PROMPT.md

펫/아이 성장 다이어리 — AI 작업 프롬프트

배포 목표: 2026-07-04 | 우선순위: 높음

---

프로젝트 컨텍스트

너는 앱인토스(Apps in Toss) WebView 미니앱 펫/아이 성장 다이어리를 배포 직전 상태로 완성하는 시니어 엔지니어다.

프로젝트 위치: 이 저장소 루트 (sojunglog)

제품 설명: 토스 로그인 기반 펫/아이 성장 기록 앱. 온보딩 → 타임라인(D+N 표시) → 기록 추가(사진+메모) → 배지 수여 시스템 → 공유 리워드. 스티커 IAP, 하단 배너 광고 포함.

기술 스택:

• React 18 + TypeScript strict + Vite + pnpm
• @toss/tds-mobile, @apps-in-toss/web-framework
• Supabase (records, profiles 테이블, 이미지 스토리지)
• vitest

---

현재 구현 상태 (2026-06-13 기준 완료)

완료된 기능

• 기본 앱 구조 및 라우팅
• 토스 로그인 + useTossUser hook
• 온보딩 (프로필 생성)
• 타임라인: D+N 표시, skeleton 로딩, 빈 상태 CTA
• 기록 추가: 사진 또는 메모 중 하나만으로 저장 가능
• 스티커 시스템 (IAP 연동 골격)
• 배지 시스템: 7/30/100/200/365일 마일스톤
• 공유 리워드 호출
• 하단 배너 광고 래퍼
• Safe Area, 닫기 버튼, 사운드 토글, 등급 배지
• CSS 분리: global.css, components.css, overlays.css
• 커스텀 헤더 전 페이지 통일 (TDS Top 제거)
• useBookmarks, useTossUser localStorage 예외 방어
• Supabase 미설정 시 localStorage QA fallback

최근 검증

npx --yes pnpm@11.6.0 tsc --noEmit  # 오류 없음 (2026-06-13)
npx --yes pnpm@11.6.0 vitest run    # 3개 테스트 통과

---

남은 작업 (이 세션에서 완료할 것)

Phase 1: Supabase 연결 (6/21-6/23)

1-1. SQL 실행 docs/supabase_setup.sql 파일을 Supabase SQL Editor에서 실행:

cat docs/supabase_setup.sql

내용 확인 후 프로덕션 Supabase 프로젝트에 실행.

1-2. 환경변수 설정 .env 파일 생성:

VITE_SUPABASE_URL=<프로젝트 URL>
VITE_SUPABASE_ANON_KEY=<anon key>
VITE_TOSS_AD_GROUP_ID=<앱인토스 콘솔 발급>

1-3. 이미지 업로드 버킷 설정 Supabase Storage에 diary-images 버킷 생성:

• Public 버킷 여부 결정 (토스 유저 ID 기반 경로 제한 권장)
• RLS 정책: 업로드는 인증된 토스 유저만, 읽기는 본인만

1-4. RLS 정책 확인

-- records 테이블: user_id = toss_user_id 기반 격리
ALTER TABLE records ENABLE ROW LEVEL SECURITY;
CREATE POLICY "user_own_records" ON records
  USING (user_id = current_user_id());  -- 실제 토스 userId 매핑 방식 확인

-- profiles 테이블도 동일

토스 userId를 Supabase auth와 연결하는 방식 확인 (src/hooks/useTossUser.ts 참고).

1-5. 연결 검증

pnpm dev
# 브라우저에서 온보딩 완료 → 기록 추가 → Supabase records 테이블 확인

Phase 2: 배지 QA (6/23-6/24)

docs/badge_qa.md의 콘솔 스크립트로 배지 5종 수동 확인:

// 브라우저 콘솔에서 실행 — 날짜 주입 스크립트
// TARGET_DAYS를 7, 30, 100, 200, 365로 바꿔가며 테스트
const TARGET_DAYS = 7
// ... (docs/badge_qa.md 전체 스크립트)

확인 항목:

• 7일 배지 모달 표시 + 애니메이션
• 30일 배지 모달 표시
• 100일 배지 모달 표시
• 200일 배지 모달 표시
• 365일 배지 모달 표시
• 배지 목록 페이지에서 획득/미획득 구분 표시
• 🏅 아이콘 + 타이틀 정상 표시

Phase 3: Toss 콘솔 설정 (6/24-6/25)

앱인토스 개발자 콘솔에서:

3-1. 앱 등록

• 앱 이름: "성장 다이어리" (또는 확정 이름)
• 카테고리: 라이프스타일
• 아이콘/스크린샷 준비 (1024x1024 아이콘, 스크린샷 최소 3장)

3-2. 토스 로그인 설정

• OAuth 클라이언트 등록 (로컬 개발 URL + 프로덕션 URL 등록)
• 리다이렉트 URI 설정

3-3. 광고 설정

• 배너 광고 그룹 ID 발급 → VITE_TOSS_AD_GROUP_ID에 반영

3-4. IAP (스티커) 설정

• 스티커 팩 상품 등록 (가격, 설명)
• 상품 ID → src/sdk/ 관련 파일에 반영

3-5. 공유 리워드 설정

• 공유 1회당 리워드 금액/포인트 설정

Phase 4: 앱인토스 검수 체크리스트 (6/25-6/26)

코드에서 직접 확인:

• 닫기 버튼 우상단 고정
• 사운드 토글 동작 + 상태 유지
• Safe Area CSS 적용
• 등급 배지 SDK 호출
• 광고: 하단 배너, 콘텐츠 위에 올라오지 않음
• 토스 로그인만 사용 (자사 로그인 없음)
• TDS 컴포넌트 정상 사용
• SDK import @apps-in-toss/web-framework 에서만

Phase 5: 실기기 QA (6/26-6/27)

Toss WebView 환경에서:

• 로그인 → 온보딩 → 타임라인 진입 플로우
• 사진 + 메모 기록 저장 → Supabase 반영 확인
• 메모만 기록 저장
• 스티커 IAP 결제 플로우
• 배지 수여 → 공유 리워드 호출
• 하단 배너 광고 표시
• 앱 종료 후 재진입 → 타임라인 데이터 유지

Phase 6: 빌드 + 배포 (6/28-7/4)

pnpm typecheck
pnpm test
pnpm build

빌드 성공 후 앱인토스 콘솔에 업로드 → 검수 제출 → 통과 시 배포.

---

코딩 원칙 (반드시 준수)

• SDK import는 @apps-in-toss/web-framework에서만
• 토스 로그인만 사용 (자사 로그인/외부 로그인 추가 금지)
• TDS 컴포넌트 유지 (비게임 앱 검수 요건)
• 광고는 콘텐츠 하단 고정, 모달/팝업 위로 올리지 않음
• Supabase 미설정 시 localStorage fallback 동작 유지
• 변경 후 반드시 pnpm typecheck && pnpm test && pnpm build 실행

---

주요 파일 구조

src/
  hooks/
    useTossUser.ts    # 토스 로그인, userId
    useBookmarks.ts   # localStorage 예외 방어
  pages/
    Timeline.tsx      # D+N, skeleton, 빈 상태 CTA
    AddRecord.tsx     # 사진+메모 저장
    Onboarding.tsx    # 프로필 생성
    Badges.tsx        # 배지 목록
    BadgeDetail.tsx   # 배지 모달
  components/
    RecordCard.tsx
    ImageUploader.tsx
    StickerPicker.tsx
  sdk/               # IAP, 광고, 공유 리워드 격리
  styles/
    global.css
    components.css
    overlays.css
docs/
  supabase_setup.sql
  badge_qa.md