# 타이탄 카운터 프리미엄 재설계 및 앱스토어 출시 전략 (보완본)

이 계획은 사용자의 추가 요구사항을 반영하여 '타이탄 카운터'를 다국어 지원 및 고도화된 기능을 갖춘 프리미엄 앱으로 전환하기 위한 상세 가이드입니다.

## 디자인 컨셉 (한국어 버전)

새로운 디자인은 사용자의 요청에 따라 상단 카운터 토글 기능과 하단 정보 박스를 추가하여 시각적 완성도를 높였습니다.

![타이탄 카운터 디자인 목업(한글)]

### 디자인 핵심 요소:
- **토글 카운터**: 상단 원형 영역 클릭 시 [년월일시] / [총 일수] / [총 시간] 표시 모드 전환.
- **정보 요약 박스**: 카운터 하단에 태어난 날(음력/양력 표시)과 목표 수명을 명확하게 표시.
- **다국어 레이아웃**: 한글, 일어, 영어 텍스트 길이에 대응하는 유연한 그리드 설계.

## 기술 전략

### 핵심 기능 구현 계획:
1. **정밀 날짜 엔진**: `luxon` 또는 `date-fns`를 활용하여 음력(Lunar), 윤년(Leap Year), 시간 단위까지 정밀 계산.
2. **다국어 지원(i18n)**: `react-i18next`를 사용하여 한국어, 일본어, 영어 동시 지원 및 기기 설정에 따른 자동 언어 선택.
3. **고도화된 버킷리스트**: 5년 단위 목표의 진행률 관리, 세부 할 일(Todo) 추가 및 알림 기능.
4. **상태 관리**: 토글 상태 및 다국어 설정을 앱 재구동 시에도 유지하도록 로컬 저장소 연동.

### 기술 스택:
- **프론트엔드**: Vite + React
- **다국어**: react-i18next
- **날짜 계산**: lunar-javascript (음력 변환용), date-fns
- **애니메이션**: Framer Motion
- **네이티브 래퍼**: Capacitor

## 추진 로드맵

### 1단계: 프로젝트 설정 및 다국어 구조화
- Vite + React + Capacitor 환경 구축.
- i18n 설정 (KO, JA, EN 번역 파일 구조화).
- 음력/양력 변환 라이브러리 통합.

### 2단계: UI/UX 고도화
- **상단 토글 컴포넌트**: 클릭 시 상태 전환 애니메이션 구현.
- **정보 요약 박스**: 사용자 프로필 기반 데이터 렌더링.
- **5년 단위 목표 관리**: CRUD(생성, 읽기, 수정, 삭제) 기능 및 목표별 상세 페이지/모달 구현.

### 3단계: 로직 정밀화
- 탄생 시각을 포함한 초 단위 카운트다운 엔진 최적화.
- 윤년 및 음력 생일에 따른 정확한 날짜 계산 검증.
- 언어 변경 시 날짜 형식(Locale) 자동 최적화.

### 4단계: 네이티브 최적화 및 에셋 제작
- 앱 아이콘 및 스플래시 화면 (언어별 로고 대응 필요 시 검토).
- 기기 언어 설정 감지 및 적용 로직.
- 실제 기기(iOS/Android) 빌드 및 성능 최적화.

### 5단계: 글로벌 스토어 출시 준비
- 언어별 스토어 설명(Description) 및 키워드 최적화.
- 다국어 스크린샷 세트 제작.

## 사용자 검토 필요 사항

> [!IMPORTANT]
> **음력 데이터**: 음력 변환 라이브러리를 사용하면 대부분의 날짜가 지원되지만, 특정 연도의 공휴일 정보 등이 필요하신가요? 아니면 순수 날짜 계산 위주인가요?

> [!NOTE]
> **일본어/영어 폰트**: 한글(Pretendard) 외에 일본어와 영어에 최적화된 시스템 폰트 사용을 제안드립니다. 디자인 일관성을 위해 추천 폰트를 적용해도 될까요?

## 검증 계획

### 자동화 테스트
- 음력/양력 변환 결과의 정확성 교차 검증.
- 다국어 키값 누락 여부 체크.

### 수동 검증
- 기기 언어 설정을 각각 KO, JA, EN으로 변경하며 UI 레이아웃 깨짐 확인.
- 카운터 토글 시 애니메이션의 매끄러움 확인.