feat: SEO 개선, 다중 이미지 버그 수정, 이미지 캡션 기능 추가

[3rdflr]

주요 변경 사항

🔍 SEO 개선

• 메타데이터 강화 (layout.tsx): 타이틀을 템플릿 구조(%s | 가챠 지도)로 변경해 각 페이지별 제목이 자동 조합되도록 개선. 신규 가챠, 신규 쿠지, 신규 가차, 쿠지 지도, 홍대 가챠 등 핵심 검색 키워드 추가
• OG 이미지 절대경로 수정 (layout.tsx): 상대경로 og-image.png → https://gachamap.vercel.app/og-image.png 로 수정해 SNS 공유 시 이미지가 정상 표시되도록 함
• siteName 오타 수정 (layout.tsx): '사이트 이름' → '가챠 지도'
• 게시판 페이지 메타데이터 강화 (gacha-board/page.tsx): 검색 키워드 중심으로 title/description 재작성
• 게시글 상세 동적 메타데이터 추가 (gacha-board/[id]/page.tsx): generateMetadata를 추가해 각 게시글의 제목·이미지가 구글/네이버 검색 결과에 그대로 노출
• 사이트맵 보완 (sitemap.ts): /gacha-board 페이지 추가(priority 0.9)해 크롤러가 게시판 페이지를 인식하도록 함

🐛 버그 수정: 이미지 1장만 저장되던 문제

• 원인: Editor가 image_url(단일 필드)만 저장하고 images[] 배열에 저장하지 않았으며, Detail도 image_url 하나만 읽고 있었음
• 수정 (GachaPostEditor.tsx): 저장 시 images[] + captions[] 배열을 함께 DB에 저장
• 수정 (GachaPostDetail.tsx): images[] 우선으로 읽고, 없는 경우 image_url로 fallback 처리

✨ 신규 기능: 이미지별 캡션 입력

• 에디터에서 이미지 업로드 UI를 카드 형태로 변경, 각 이미지 옆에 캡션 입력 textarea 추가
• 저장 시 captions[] 배열로 이미지 순서에 맞춰 함께 저장

📰 게시글 상세 페이지 레이아웃 개선

• 상단에 대표 이미지(이미지 1) 풀블리드 표시
• 제목 → 태그 → 상세 설명 순서로 정보 구성
• 이미지 2장부터는 하단에 각 이미지 + 해당 캡션을 세로로 나열
• 하단에 Google AdSense 광고 추가

🧩 기타

• GachaPost 타입 인터페이스 신규 추가 (types/db.ts)
• GitHub Actions 모바일 리더 워크플로우 추가 (.github/workflows/mobile-reader.yml)
• 회원 탈퇴 기능 및 토큰 기반 본인 인증 추가

DB 마이그레이션 필요

Supabase SQL Editor에서 아래 쿼리 실행 필요:

ALTER TABLE gacha_posts ADD COLUMN IF NOT EXISTS captions text[] DEFAULT '{}';

테스트 체크리스트

• 게시글 작성 시 이미지 여러 장 업로드 후 전체 저장 확인
• 각 이미지 캡션 입력 후 상세 페이지에서 순서대로 표시 확인
• 상세 페이지 상단 메인 이미지 → 하단 이미지+캡션 레이아웃 확인
• 구글/네이버에서 게시글 URL 공유 시 OG 이미지·제목 표시 확인
• 하단 광고 렌더링 확인

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
gacha-map	Ready	Preview, Comment	Feb 22, 2026 11:21am

[github-actions]

📖 PR #2 — feat: SEO 개선, 다중 이미지 버그 수정, 이미지 캡션 기능 추가

Repository: 3rdflr/gacha_map
Commit: cf131cb
변경된 JS/TS 파일: 7개

---

📄 src/app/gacha-board/[id]/page.tsx

변경된 함수 / 컴포넌트

• ✅ generateMetadata() — added

---

📄 src/components/GachaPostDetail.tsx

🎨 JSX Structure

div
div
div
  div
    Image
  div
    ArrowLeft
    div
      div
      div
      div
    div
      Tag
      span
    div
      h2
      p
    hr
    div
      div
      div
    div
    div
      GoogleAd

---

📄 src/components/GachaPostEditor.tsx

🎨 JSX Structure

p
  div
    div
      div
      div
      X
    label
      Upload

---

🛠 Auto-generated by github-mobile-reader. Do not edit manually.