diff --git a/PROJECT_STRUCTURE.md b/PROJECT_STRUCTURE.md index a7acfe9..7b1cca8 100644 --- a/PROJECT_STRUCTURE.md +++ b/PROJECT_STRUCTURE.md @@ -7,12 +7,14 @@ **최신 업데이트** (2025-11-13): - 🌏 **다국어 지원 시스템 (i18n)** - next-intl 라이브러리 기반 - - 한국어(ko), 영어(en) 지원 - - **[locale] 라우팅**: URL에 언어 코드 표시 (`/ko/home`, `/en/home`) + - **3개 언어 지원**: 한국어(ko), 영어(en), 일본어(ja) + - **[locale] 라우팅**: URL에 언어 코드 표시 (`/ko/home`, `/en/home`, `/ja/home`) - **브라우저 언어 자동 감지**: `Accept-Language` 헤더 기반 자동 리다이렉트 - - **언어 전환 버튼**: LocaleSwitcher 컴포넌트 (Navbar 우측) - - **번역 파일**: `messages/ko.json`, `messages/en.json` - - **완성된 페이지**: Navbar, Landing 페이지, Home 페이지 전체 번역 완료 + - **개선된 언어 전환**: LocaleSwitcher 드롭다운 메뉴 (국기 이모지 🇰🇷 🇺🇸 🇯🇵, 현재 언어 체크 표시) + - **번역 파일**: `messages/ko.json`, `messages/en.json`, `messages/ja.json` (각 407줄, 220+ 키) + - **완성된 페이지**: Navbar, Landing, Home, Team(전체), Write 페이지 번역 완료 + - **완성된 컴포넌트**: LoginDialog, LoginForm, SignupForm, UserProfileButton, StudentLoginFlow, SavedDraftsDialog, SecurityLevelSelector 번역 완료 + - **어린이 친화적**: 일본어는 한자 최소화, ひらがな 우선 사용 - **타입 안전**: useTranslations 훅으로 타입 체크 - **쿠키 저장**: 사용자가 선택한 언어 기억 (`NEXT_LOCALE`) - **site.ts 텍스트 이동**: 사이트 메타데이터도 번역 파일로 관리 @@ -137,14 +139,15 @@ 모든 페이지는 `[locale]` 세그먼트를 통해 다국어를 지원합니다: - **한국어**: `/ko/*` (기본값) - **영어**: `/en/*` +- **일본어**: `/ja/*` 🆕 - **자동 감지**: 브라우저 언어 설정에 따라 첫 방문 시 자동 리다이렉트 -- **언어 전환**: Navbar의 지구본 버튼(🌐 KO/EN) 클릭 +- **언어 전환**: Navbar 우측 🌐 버튼 → 드롭다운 메뉴 (🇰🇷 🇺🇸 🇯🇵) **URL 예시**: -- 랜딩: `/ko`, `/en` -- 홈: `/ko/home`, `/en/home` -- 글쓰기: `/ko/write`, `/en/write` -- 팀: `/ko/team`, `/en/team` +- 랜딩: `/ko`, `/en`, `/ja` +- 홈: `/ko/home`, `/en/home`, `/ja/home` +- 글쓰기: `/ko/write`, `/en/write`, `/ja/write` +- 팀: `/ko/team`, `/en/team`, `/ja/team` ### ✅ 구현 완료 @@ -219,7 +222,7 @@ | 컴포넌트 | 파일명 | 설명 | 상태 | |---------|--------|------|------| | **Navbar** | `Navbar.tsx` | 상단 네비게이션 바 (다국어 지원) | ✅ 완료 | -| **LocaleSwitcher** | `LocaleSwitcher.tsx` | 🆕 **언어 전환 버튼** (KO ↔ EN, 지구본 아이콘) | ✅ 완료 | +| **LocaleSwitcher** | `LocaleSwitcher.tsx` | 🆕 **언어 선택 메뉴** (KO/EN/JA, 드롭다운, 국기 이모지, 체크 표시) | ✅ 완료 | **네비게이션 링크** (다국어 지원): - 홈 (`/[locale]` 또는 `/[locale]/home`) - 인증 상태에 따라 동적 변경 @@ -230,9 +233,11 @@ - 스티커 (`/[locale]/stickers`) - 미구현 **주요 기능** (2025-11-13): +- ✅ 3개 언어 지원 (ko, en, ja) - ✅ next-intl 타입 안전 Link 사용 - ✅ useTranslations 훅으로 번역 텍스트 관리 -- ✅ LocaleSwitcher로 실시간 언어 전환 +- ✅ LocaleSwitcher 드롭다운 메뉴 (국기, 언어명, 체크 표시) +- ✅ 어린이 친화적 표현 (일본어 ひらがな 우선) --- diff --git a/ROADMAP.md b/ROADMAP.md index 33d1bc0..9abda0a 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -84,7 +84,7 @@ | **패턴 분석 - 팀 소유자 기능** | **3가지 분석 타입 (self/by-team/by-topic), API 권한 체크, 팀 주제 필터링, WritingPatternDialog Props 확장, TopicMemberAnalysisSection (UI만), 팀 관리 페이지에 멤버 분석 메뉴** | **2025-11-12** | | **Content Hash 기반 3단계 캐싱** | **글 목록 해시 생성 (id+updatedAt), L1: localStorage (영구, LRU 10개), L2: Firestore patternAnalyses (영구), L3: Server in-memory (5분, 50개), 변경 자동 감지, AI 비용 절감 (전체 사용자 기준 1회 분석), contentHash.ts + patternCacheManager.ts + patternAnalysis.ts** | **2025-11-12** | | **실시간 글쓰기 모니터링** | **Firebase Realtime Database 기반 실시간 통신 (Redis Pub/Sub 방식), WritingSessionManager (5초 주기 통계 전송, 미리보기 요청-응답, 상세 디버그 로그), LiveWritingMonitor (주제 Select, 모든 팀 멤버 표시, StudentMonitorCard), 3가지 상태 관리 (작성 중/나감/대기 중, 정렬 순서, 색상별 시각화), 글쓰기 페이지 모니터링 (contentRef 최적화), onDisconnect() 자동 정리, 작성 속도 계산 (클라이언트, 글자/분, charDiff*12), Sparkline 그래프 (Area Chart, 최근 10개, 0 표시), 인터랙티브 툴팁 (속도+시간), 30초 타임아웃 체크 (lastUpdated), 마지막 통계 유지 (Firebase 삭제되어도 유지), database.rules.json (topicId 레벨 읽기), @chakra-ui/charts+recharts, 완전 무료 (100명)** | **2025-11-12** | -| **다국어 지원 시스템 (i18n)** | **next-intl 라이브러리 설치 및 설정, [locale] 라우팅 구조 변경 (/ko/*, /en/*), middleware.ts 생성 (브라우저 언어 자동 감지, Accept-Language 헤더), 번역 파일 생성 (messages/ko.json, messages/en.json), Navbar 번역 적용 (useTranslations 훅), LocaleSwitcher 컴포넌트 (지구본 아이콘 + KO/EN 토글), Landing 페이지 전체 번역 (Hero, Features, Steps, CTA, Footer), Home 페이지 전체 번역 (Welcome, QuickStart 9개 액션 카드, RecentActivity), site.ts 텍스트를 번역 파일로 이동 (사이트명, 태그라인, 저작권), localeDetection: true 설정, NEXT_LOCALE 쿠키 저장, next.config.ts에 next-intl 플러그인 추가, i18n/routing.ts + i18n/request.ts 설정, 타입 체크 통과** | **2025-11-13** | +| **다국어 지원 시스템 (i18n)** | **next-intl 라이브러리 설치 및 설정, [locale] 라우팅 구조 변경 (/ko/*, /en/*, /ja/*), middleware.ts 생성 (브라우저 언어 자동 감지, Accept-Language 헤더), 3개 언어 번역 파일 생성 (messages/ko.json, messages/en.json, messages/ja.json - 각 407줄, 220+ 키), Navbar 번역 (4개 링크), LocaleSwitcher 드롭다운 메뉴 개선 (국기 이모지 🇰🇷 🇺🇸 🇯🇵, 현재 언어 체크 표시, Portal 사용), Landing 페이지 전체 번역 (Hero, Features, Steps, CTA, Footer - 20+ 항목), Home 페이지 전체 번역 (Welcome, QuickStart 9개 액션 카드, RecentActivity), 인증 컴포넌트 전체 번역 (LoginDialog, LoginForm, SignupForm, UserProfileButton, StudentLoginFlow, SavedDraftsDialog - 70+ 항목), Team 페이지 전체 번역 (List, Create, Detail, Manage + SecurityLevelSelector - 60+ 항목), Write 페이지 번역 (분석/저장 메시지, 버튼), 일본어 어린이 친화적 표현 (한자 최소화, ひらがな 우선), site.ts 텍스트를 번역 파일로 이동 (사이트명, 태그라인, 저작권), localeDetection: true 설정, NEXT_LOCALE 쿠키 저장, next.config.ts에 next-intl 플러그인 추가, i18n/routing.ts + i18n/request.ts 설정, 타입 체크 통과, CLAUDE.md에 다국어 필수 규칙 추가** | **2025-11-13** | ### 🚧 진행 중 diff --git a/TECH_STACK.md b/TECH_STACK.md index 9613e61..47e4e3b 100644 --- a/TECH_STACK.md +++ b/TECH_STACK.md @@ -1182,6 +1182,7 @@ interface Draft { **지원 언어**: - 한국어 (ko) - 기본값 - 영어 (en) +- 일본어 (ja) - 어린이 친화적 표현 (한자 최소화, ひらがな 우선) #### 아키텍처 @@ -1248,9 +1249,9 @@ Middleware (src/middleware.ts) **i18n/routing.ts** - 라우팅 설정: ```typescript export const routing = defineRouting({ - locales: ['ko', 'en'], + locales: ['ko', 'en', 'ja'], defaultLocale: 'ko', - localePrefix: 'always', // URL에 항상 표시 (/ko/*, /en/*) + localePrefix: 'always', // URL에 항상 표시 (/ko/*, /en/*, /ja/*) localeDetection: true // 브라우저 언어 자동 감지 }); @@ -1333,24 +1334,38 @@ import {Link} from '@/i18n/routing'; **LocaleSwitcher** (`src/components/navigation/LocaleSwitcher.tsx`): ```typescript -const locale = useLocale(); // 현재 언어 -const router = useRouter(); -const pathname = usePathname(); +const LOCALES = [ + {code: 'ko', name: '한국어', flag: '🇰🇷'}, + {code: 'en', name: 'English', flag: '🇺🇸'}, + {code: 'ja', name: '日本語', flag: '🇯🇵'}, +]; -const toggleLocale = () => { - const nextLocale = locale === 'ko' ? 'en' : 'ko'; - router.replace(pathname, {locale: nextLocale}); -}; +const locale = useLocale(); +const currentLocale = LOCALES.find(l => l.code === locale); return ( - + + + + + + {LOCALES.map((loc) => ( + handleLocaleChange(loc.code)}> + {loc.flag} {loc.name} + {locale === loc.code && } + + ))} + + ); ``` **동작**: -- `/ko/home`에서 버튼 클릭 → `/en/home`으로 이동 +- 드롭다운 메뉴에서 언어 선택 +- 국기 이모지로 시각적 구분 +- 현재 언어에 체크 마크 표시 - `NEXT_LOCALE` 쿠키에 저장 (다음 방문 시 기억) #### 브라우저 언어 자동 감지 @@ -1361,6 +1376,7 @@ return ( 2. Middleware가 Accept-Language 헤더 확인 - "en-US,en;q=0.9" → /en/으로 리다이렉트 - "ko-KR,ko;q=0.9" → /ko/로 리다이렉트 + - "ja-JP,ja;q=0.9" → /ja/로 리다이렉트 - 지원하지 않는 언어 → /ko/ (기본값) 3. NEXT_LOCALE 쿠키 저장 @@ -1376,8 +1392,11 @@ return ( | **Navbar** | 모든 페이지 | ✅ 완료 | 홈, 글쓰기, 학습하기, 스티커 (4개) | | **Landing** | `/[locale]` | ✅ 완료 | Hero(사이트명, 태그라인, CTA 버튼), Features(4개 카드), Steps(3단계), CTA 섹션, Footer (총 20+ 항목) | | **Home** | `/[locale]/home` | ✅ 완료 | 웰컴 메시지, QuickStart(9개 액션 카드), RecentActivity (총 15+ 항목) | -| **Write** | `/[locale]/write` | 🔜 예정 | - | -| **Team** | `/[locale]/team/*` | 🔜 예정 | - | +| **Auth** | LoginDialog 등 | ✅ 완료 | LoginDialog, LoginForm, SignupForm, UserProfileButton, StudentLoginFlow, SavedDraftsDialog (총 50+ 항목) | +| **Team** | `/[locale]/team/*` | ✅ 완료 | List, Create, Detail, Manage + SecurityLevelSelector (총 60+ 항목) | +| **Write** | `/[locale]/write` | ✅ 완료 | 분석/저장 메시지, 버튼, 상태 표시 (총 20+ 항목) | + +**총 번역 키**: 220개 이상 (ko.json, en.json) #### next.config.ts 설정