Granite + Apps-in-Toss + TDS 종속성을 제거하고 Vite + 순수 React로
전환하는 16개 task 구현 계획. 각 task는 2~5분 단위 step으로 분해되어
TDD 회귀 테스트, git 커밋 리듬, 명시적 코드 블록을 모두 포함.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
토스 인앱 타겟에서 웹 PWA 단독 배포로 방향 전환. 4주 영업일 기준
1차 출시 스코프, 광고 어댑터 인터페이스, PWA + 푸시 전략, 분석·
배포 계획을 단일 디자인 문서로 정리.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
react-native 0.84.1의 index.js가 TypeScript 'as' 구문을 사용하지만
metro-react-native-babel-preset이 .js 파일에는 TypeScript transform을
적용하지 않아 dev 서버 실행 시 SyntaxError가 발생하던 문제 수정.
babel.config.js를 추가하여 react-native 패키지의 .js 파일에도
@babel/plugin-transform-typescript가 적용되도록 구성.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
- build 스크립트를 ait build에서 직접 granite CLI 호출로 변경
(ait build가 --no-cache 옵션을 granite에 전달하나 미지원 버그)
- typescript, @types/react, @types/react-dom, @types/webpack-env 설치
- @toss/tds-react-native 누락 peer dependency 설치
- tsconfig.json: ignoreDeprecations 및 webpack-env 타입 설정 추가
- require.context.ts: webpack/granite-js RequireContext 타입 호환 수정
- global.d.ts: 전역 타입 선언 파일 추가
Co-Authored-By: Paperclip <noreply@paperclip.ing>
- AchievementToast, PrestigeModal, AchievementsScreen 컴포넌트 추가
- BottomTabBar에 업적 탭 연결
- useGameStore 프레스티지/업적 상태 로직 수정
- pages/index.tsx 라우팅 업데이트
Co-Authored-By: Paperclip <noreply@paperclip.ing>
- ElementsScreen: 첫 번째 obtained 원소 카드에 data-tutorial 스포트라이트 마커
- FusionScreen: 합성 슬롯1, 합성 결과 배너에 data-tutorial 마커
- EvolutionScreen: 첫 번째 강화 버튼에 data-tutorial 마커
- _app.tsx: AppContainer에 <TutorialOverlay /> 전역 마운트
Co-Authored-By: Paperclip <noreply@paperclip.ing>
- PrestigeResult, AchievementStats 타입 추가
- performPrestige(): 프레스티지 시 골드/원소 초기화, 배율·타이틀 업데이트
- achieveUnlock(): 업적 조건 충족 여부 실시간 체크 및 보상 지급
- 업적 통계 (fuseCount, enhanceCount, tiersUnlocked, prestigeCount 등) 상태 추적
Co-Authored-By: Paperclip <noreply@paperclip.ing>
- TutorialWelcomeCard: 첫 실행 시 게임 소개 카드
- TutorialProgressBar: 스텝 진행 상태 표시
- TutorialTooltip: 대상 요소 위/아래 스포트라이트 설명 툴팁
- TutorialOverlay: 전체 튜토리얼 흐름 조율 (4단계: 원소→합성슬롯→합성결과→강화)
Co-Authored-By: Paperclip <noreply@paperclip.ing>
- CharacterSprite: 원소별 카와이 치비 스타일 SVG 캐릭터 (Tier/파티클 대응)
- FloatingOverlay: 골드/아이템 획득 시 플로팅 텍스트 애니메이션
- useFloatingItems: 플로팅 아이템 상태 관리 훅
Co-Authored-By: Paperclip <noreply@paperclip.ing>
- src/data/achievements.json: 30개+ 업적 조건/보상 데이터
- src/data/prestige.json: 프레스티지 레벨별 배율 및 타이틀 테이블
- src/data/characterVisual.ts: 원소별 캐릭터 SVG 비주얼 파라미터
- src/styles/gameColors.ts: 게임 전용 색상 토큰 및 유틸 함수
Co-Authored-By: Paperclip <noreply@paperclip.ing>
- SettingsScreen 컴포넌트 추가 (언어선택, BGM 토글, 앱 버전, 게임 초기화)
- 게임 데이터 초기화: 2단계 확인 다이얼로그 (localStorage 전체 삭제 후 리로드)
- 언어 설정: 한국어/English 세그먼트 버튼 (language 상태 persist)
- BGM 토글 스위치 (bgmEnabled 상태 persist)
- 마지막 저장 시각 및 오프라인 보상 최대 24시간 안내 텍스트
- BottomTabBar에 ⚙️ 설정 탭 추가
- useGameStore에 TabName 'settings', Language 타입 및 관련 액션 추가
Co-Authored-By: Paperclip <noreply@paperclip.ing>
- useGameStore: localStorage 저장을 최대 10초 간격으로 스로틀링
(매 tick마다 저장하던 것을 개선)
- useGameStore: flushGameState() 내보내기 — beforeunload에서 즉시 저장
- useIdleTick: beforeunload 이벤트에 flushGameState 연결
- ElementsScreen: useGameStore 전체 구독 → 필요한 slice만 selector로 구독
- ElementsScreen: 원소 카드를 memo(ElementCard)로 추출
(count/level 불변 시 리렌더 방지)
Co-Authored-By: Paperclip <noreply@paperclip.ing>
