feat: migrate profileQuestions constants to i18n keys

jammy · claude · jammy · commit e2f2acf9c22a · 2026-03-26T13:57:22.000+09:00
- Replace hardcoded Korean strings in PROFILE_QUESTIONS with i18n key references (titleKey, subtitleKey, labelKey)
- Rename getProfileLabel → getProfileLabelKey to return translation key
- Update OnboardingModal and ProfilePage to use t() for all question/option text
- Add 25 onboarding keys (age, occupation, experience, goal) to ko/en/zh translation files

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/packages/frontend/src/components/OnboardingModal.tsx b/packages/frontend/src/components/OnboardingModal.tsx
@@ -157,10 +157,10 @@ export function OnboardingModal() {
                 className="text-center"
               >
                 <h2 className="text-xl font-bold text-[var(--theme-dashboard-title)]">
-                  {currentQuestion.title}
+                  {t(currentQuestion.titleKey)}
                 </h2>
                 <p className="text-sm text-[var(--theme-dashboard-text-muted)] mt-1">
-                  {currentQuestion.subtitle}
+                  {t(currentQuestion.subtitleKey)}
                 </p>
               </motion.div>
             </AnimatePresence>
@@ -195,7 +195,7 @@ export function OnboardingModal() {
                     <span className={`text-sm font-medium ${
                       selectedValue === option.value ? 'text-orange-700' : 'text-[var(--theme-dashboard-title)]'
                     }`}>
-                      {option.label}
+                      {t(option.labelKey)}
                     </span>
                   </motion.button>
                 ))}
@@ -213,7 +213,7 @@ export function OnboardingModal() {
                 className="flex items-center gap-1 px-4 py-3 text-[var(--theme-dashboard-text-muted)] border-2 border-[var(--theme-dashboard-card-border)] rounded-xl font-medium hover:bg-[var(--theme-dashboard-section-header-bg)] transition-colors"
               >
                 <ChevronLeft className="w-4 h-4" />
-                이전
+                {t('common.previous')}
               </motion.button>
             )}
 
@@ -237,16 +237,16 @@ export function OnboardingModal() {
                     transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
                     className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full"
                   />
-                  저장 중...
+                  {t('common.loading')}
                 </span>
               ) : isLastStep ? (
                 <>
                   <Sparkles className="w-4 h-4" />
-                  시작하기
+                  {t('home.start_learning')}
                 </>
               ) : (
                 <>
-                  다음
+                  {t('common.next')}
                   <ChevronRight className="w-4 h-4" />
                 </>
               )}
@@ -259,7 +259,7 @@ export function OnboardingModal() {
               onClick={handleSkip}
               className="text-xs text-[var(--theme-dashboard-text-muted)] hover:text-[var(--theme-dashboard-title)] transition-colors"
             >
-              나중에 설정하기
+              {t('onboarding.skip_for_now')}
             </button>
           </div>
         </motion.div>
diff --git a/packages/frontend/src/constants/profileQuestions.ts b/packages/frontend/src/constants/profileQuestions.ts
@@ -5,19 +5,22 @@
  * USAGE:
  *   - OnboardingModal: 최초 설문
  *   - ProfilePage: 조회/수정
+ *
+ * NOTE: title/subtitle/label 은 i18n 키로 저장.
+ *       컴포넌트에서 t(question.titleKey) 형태로 사용.
  */
 
 // 설문 항목 타입
 export interface ProfileQuestion {
   key: ProfileQuestionKey;
-  title: string;
-  subtitle: string;
+  titleKey: string;
+  subtitleKey: string;
   options: ProfileOption[];
 }
 
 export interface ProfileOption {
   value: string;
-  label: string;
+  labelKey: string;
   emoji: string;
 }
 
@@ -32,61 +35,60 @@ export type ProfileQuestionKey =
 export const PROFILE_QUESTIONS: readonly ProfileQuestion[] = [
   {
     key: 'ageGroup',
-    title: '나이대가 어떻게 되세요?',
-    subtitle: '맞춤형 학습 콘텐츠를 위해 필요해요',
+    titleKey: 'onboarding.age_question',
+    subtitleKey: 'onboarding.age_subtitle',
     options: [
-      { value: '10s', label: '10대', emoji: '🎒' },
-      { value: '20s', label: '20대', emoji: '🎓' },
-      { value: '30s', label: '30대', emoji: '💼' },
-      { value: '40s+', label: '40대 이상', emoji: '🌟' },
+      { value: '10s',  labelKey: 'onboarding.age_10s',      emoji: '🎒' },
+      { value: '20s',  labelKey: 'onboarding.age_20s',      emoji: '🎓' },
+      { value: '30s',  labelKey: 'onboarding.age_30s',      emoji: '💼' },
+      { value: '40s+', labelKey: 'onboarding.age_40s_plus', emoji: '🌟' },
     ],
   },
   {
     key: 'occupation',
-    title: '현재 어떤 일을 하고 계세요?',
-    subtitle: '학습 목표에 맞는 추천을 드릴게요',
+    titleKey: 'onboarding.occupation_question',
+    subtitleKey: 'onboarding.occupation_subtitle',
     options: [
-      { value: 'student_middle', label: '중학생', emoji: '📚' },
-      { value: 'student_high', label: '고등학생', emoji: '📝' },
-      { value: 'student_univ', label: '대학생', emoji: '🎓' },
-      { value: 'job_seeker', label: '취업 준비생', emoji: '🔍' },
-      { value: 'worker', label: '직장인', emoji: '💻' },
-      { value: 'other', label: '기타', emoji: '✨' },
+      { value: 'student_middle', labelKey: 'onboarding.student_middle', emoji: '📚' },
+      { value: 'student_high',   labelKey: 'onboarding.student_high',   emoji: '📝' },
+      { value: 'student_univ',   labelKey: 'onboarding.student_univ',   emoji: '🎓' },
+      { value: 'job_seeker',     labelKey: 'onboarding.job_seeker',     emoji: '🔍' },
+      { value: 'worker',         labelKey: 'onboarding.worker',         emoji: '💻' },
+      { value: 'other',          labelKey: 'onboarding.other',          emoji: '✨' },
     ],
   },
   {
     key: 'programmingExp',
-    title: '프로그래밍 경험이 있으신가요?',
-    subtitle: '수준에 맞는 설명을 제공해 드릴게요',
+    titleKey: 'onboarding.exp_question',
+    subtitleKey: 'onboarding.exp_subtitle',
     options: [
-      { value: 'none', label: '처음이에요', emoji: '🌱' },
-      { value: 'less_1y', label: '1년 미만', emoji: '🌿' },
-      { value: '1_3y', label: '1~3년', emoji: '🌳' },
-      { value: '3y_plus', label: '3년 이상', emoji: '🏆' },
+      { value: 'none',     labelKey: 'onboarding.exp_none',     emoji: '🌱' },
+      { value: 'less_1y',  labelKey: 'onboarding.exp_less_1y',  emoji: '🌿' },
+      { value: '1_3y',     labelKey: 'onboarding.exp_1_3y',     emoji: '🌳' },
+      { value: '3y_plus',  labelKey: 'onboarding.exp_3y_plus',  emoji: '🏆' },
     ],
   },
   {
     key: 'learningGoal',
-    title: '어떤 목표로 학습하시나요?',
-    subtitle: '목표에 맞는 학습 경로를 추천해 드릴게요',
+    titleKey: 'onboarding.goal_question',
+    subtitleKey: 'onboarding.goal_subtitle',
     options: [
-      { value: 'basics', label: '기초부터 탄탄히', emoji: '📖' },
-      { value: 'job_prep', label: '취업/이직 준비', emoji: '🎯' },
-      { value: 'skill_up', label: '실력 향상', emoji: '📈' },
-      { value: 'curiosity', label: '호기심/재미', emoji: '🎮' },
+      { value: 'basics',    labelKey: 'onboarding.goal_basics',    emoji: '📖' },
+      { value: 'job_prep',  labelKey: 'onboarding.goal_job_prep',  emoji: '🎯' },
+      { value: 'skill_up',  labelKey: 'onboarding.goal_skill_up',  emoji: '📈' },
+      { value: 'curiosity', labelKey: 'onboarding.goal_curiosity', emoji: '🎮' },
     ],
   },
 ] as const;
 
 /**
- * value로 label 찾기 (프로필 표시용)
+ * value로 labelKey 찾기 (컴포넌트에서 t(key) 로 번역)
  */
-export function getProfileLabel(key: ProfileQuestionKey, value: string): string {
+export function getProfileLabelKey(key: ProfileQuestionKey, value: string): string {
   const question = PROFILE_QUESTIONS.find((q) => q.key === key);
   if (!question) return value;
-
   const option = question.options.find((o) => o.value === value);
-  return option?.label || value;
+  return option?.labelKey ?? value;
 }
 
 /**
@@ -95,9 +97,8 @@ export function getProfileLabel(key: ProfileQuestionKey, value: string): string
 export function getProfileEmoji(key: ProfileQuestionKey, value: string): string {
   const question = PROFILE_QUESTIONS.find((q) => q.key === key);
   if (!question) return '';
-
   const option = question.options.find((o) => o.value === value);
-  return option?.emoji || '';
+  return option?.emoji ?? '';
 }
 
 /**
diff --git a/packages/frontend/src/features/profile/ProfilePage.tsx b/packages/frontend/src/features/profile/ProfilePage.tsx
@@ -26,7 +26,7 @@ import {
 } from '@/components/ui/dialog';
 import {
   PROFILE_QUESTIONS,
-  getProfileLabel,
+  getProfileLabelKey,
   getProfileEmoji,
   type ProfileQuestionKey,
 } from '@/constants/profileQuestions';
@@ -385,16 +385,16 @@ function getErrorMessage(error: unknown, fallback: string): string {
                       >
                         <div>
                           <p className="text-xs text-[var(--theme-dashboard-text-muted)] mb-1">
-                            {question.title.replace('?', '')}
+                            {t(question.titleKey).replace('?', '')}
                           </p>
                           {value ? (
                             <p className="text-sm font-medium text-[var(--theme-dashboard-title)] flex items-center gap-2">
                               <span>{getProfileEmoji(question.key, value)}</span>
-                              <span>{getProfileLabel(question.key, value)}</span>
+                              <span>{t(getProfileLabelKey(question.key, value))}</span>
                             </p>
                           ) : (
                             <p className="text-sm text-[var(--theme-dashboard-text-muted)]">
-                              아직 설정하지 않았어요
+                              {t('learning_profile.not_set')}
                             </p>
                           )}
                         </div>
@@ -414,13 +414,13 @@ function getErrorMessage(error: unknown, fallback: string): string {
                           <div className="p-4 bg-gradient-to-br from-orange-50 to-amber-50 rounded-xl border-2 border-orange-200">
                             <div className="flex items-center justify-between mb-3">
                               <p className="text-sm font-semibold text-[var(--theme-dashboard-title)]">
-                                {question.title}
+                                {t(question.titleKey)}
                               </p>
                               <button
                                 onClick={() => setEditingKey(null)}
                                 className="text-xs text-[var(--theme-dashboard-text-muted)] hover:text-[var(--theme-dashboard-title)] transition-colors"
                               >
-                                취소
+                                {t('common.cancel')}
                               </button>
                             </div>
                             <div className="grid grid-cols-2 gap-2">
@@ -442,7 +442,7 @@ function getErrorMessage(error: unknown, fallback: string): string {
                                 >
                                   <span className="text-lg">{option.emoji}</span>
                                   <span className="text-sm font-medium text-[var(--theme-dashboard-title)]">
-                                    {option.label}
+                                    {t(option.labelKey)}
                                   </span>
                                   {value === option.value && (
                                     <Check className="w-4 h-4 text-orange-500 ml-auto" />
diff --git a/packages/frontend/src/locales/en/translation.json b/packages/frontend/src/locales/en/translation.json
@@ -493,7 +493,34 @@
     "minimal": "Minimal"
   },
   "onboarding": {
-    "txt_939764": "Skip for now"
+    "txt_939764": "Skip for now",
+    "age_question": "How old are you?",
+    "age_subtitle": "Needed for personalized learning content",
+    "age_10s": "Teens",
+    "age_20s": "20s",
+    "age_30s": "30s",
+    "age_40s_plus": "40s and above",
+    "occupation_question": "What do you currently do?",
+    "occupation_subtitle": "We'll recommend courses based on your goals",
+    "student_middle": "Middle school student",
+    "student_high": "High school student",
+    "student_univ": "University student",
+    "job_seeker": "Job seeker",
+    "worker": "Working professional",
+    "other": "Other",
+    "exp_question": "Do you have programming experience?",
+    "exp_subtitle": "We'll tailor explanations to your level",
+    "exp_none": "Complete beginner",
+    "exp_less_1y": "Less than 1 year",
+    "exp_1_3y": "1–3 years",
+    "exp_3y_plus": "3+ years",
+    "goal_question": "What is your learning goal?",
+    "goal_subtitle": "We'll recommend a learning path for your goal",
+    "goal_basics": "Build a solid foundation",
+    "goal_job_prep": "Job / career change prep",
+    "goal_skill_up": "Improve my skills",
+    "goal_curiosity": "Curiosity / fun",
+    "skip_for_now": "Skip for now"
   },
   "gamification": {
     "txt_c09ebd": "Start your streak",
diff --git a/packages/frontend/src/locales/ko/translation.json b/packages/frontend/src/locales/ko/translation.json
@@ -493,7 +493,34 @@
     "minimal": "미니멀"
   },
   "onboarding": {
-    "txt_939764": "나중에 하기"
+    "txt_939764": "나중에 하기",
+    "age_question": "나이대가 어떻게 되세요?",
+    "age_subtitle": "맞춤형 학습 콘텐츠를 위해 필요해요",
+    "age_10s": "10대",
+    "age_20s": "20대",
+    "age_30s": "30대",
+    "age_40s_plus": "40대 이상",
+    "occupation_question": "현재 어떤 일을 하고 계세요?",
+    "occupation_subtitle": "학습 목표에 맞는 추천을 드릴게요",
+    "student_middle": "중학생",
+    "student_high": "고등학생",
+    "student_univ": "대학생",
+    "job_seeker": "취업 준비생",
+    "worker": "직장인",
+    "other": "기타",
+    "exp_question": "프로그래밍 경험이 있으신가요?",
+    "exp_subtitle": "수준에 맞는 설명을 제공해 드릴게요",
+    "exp_none": "처음이에요",
+    "exp_less_1y": "1년 미만",
+    "exp_1_3y": "1~3년",
+    "exp_3y_plus": "3년 이상",
+    "goal_question": "어떤 목표로 학습하시나요?",
+    "goal_subtitle": "목표에 맞는 학습 경로를 추천해 드릴게요",
+    "goal_basics": "기초부터 탄탄히",
+    "goal_job_prep": "취업/이직 준비",
+    "goal_skill_up": "실력 향상",
+    "goal_curiosity": "호기심/재미",
+    "skip_for_now": "나중에 하기"
   },
   "gamification": {
     "txt_c09ebd": "스트릭 시작하기",
diff --git a/packages/frontend/src/locales/zh/translation.json b/packages/frontend/src/locales/zh/translation.json
@@ -493,7 +493,34 @@
     "minimal": "简约"
   },
   "onboarding": {
-    "txt_939764": "稍后再说"
+    "txt_939764": "稍后再说",
+    "age_question": "您的年龄段是？",
+    "age_subtitle": "用于提供个性化学习内容",
+    "age_10s": "10多岁",
+    "age_20s": "20多岁",
+    "age_30s": "30多岁",
+    "age_40s_plus": "40岁及以上",
+    "occupation_question": "您目前从事什么工作？",
+    "occupation_subtitle": "我们将根据您的目标推荐课程",
+    "student_middle": "初中生",
+    "student_high": "高中生",
+    "student_univ": "大学生",
+    "job_seeker": "求职者",
+    "worker": "职场人",
+    "other": "其他",
+    "exp_question": "您有编程经验吗？",
+    "exp_subtitle": "我们将根据您的水平提供解释",
+    "exp_none": "完全零基础",
+    "exp_less_1y": "不到1年",
+    "exp_1_3y": "1~3年",
+    "exp_3y_plus": "3年以上",
+    "goal_question": "您的学习目标是什么？",
+    "goal_subtitle": "我们将为您推荐合适的学习路径",
+    "goal_basics": "打好基础",
+    "goal_job_prep": "求职/转行准备",
+    "goal_skill_up": "提升技能",
+    "goal_curiosity": "兴趣/娱乐",
+    "skip_for_now": "稍后再说"
   },
   "gamification": {
     "txt_c09ebd": "开始连续打卡",
