careermate 0.0.4 → 0.0.6

package/dist/public/pages/home.js

@@ -7,6 +7,7 @@ import {
   el, get, icon, navigate, Card, Badge, Btn, ListRow, CheckRow,
   Stat, PageHead, fmtDate, fmtRelative, scoreClass, STATUS_COLOR, statusColor, mount,
 } from '/lib.js';
+import { t } from '/i18n.js';
 
 const PIPE_ORDER = ['draft', 'planned', 'applied', 'document_passed', 'interview', 'final_passed', 'on_hold', 'rejected'];
 
@@ -28,7 +29,7 @@ export async function render(ctx) {
   const name = profileRes.profile?.name;
 
   // exactly one primary action per screen, pinned to the topbar
-  ctx.setActions([Btn('공고 추가', { icon: 'plus', variant: 'primary', onClick: () => navigate('/jobs') })]);
+  ctx.setActions([Btn(t('home.action.addJob'), { icon: 'plus', variant: 'primary', onClick: () => navigate('/jobs') })]);
 
   // day one: nothing saved yet → just greeting + the single getting-started card
   // (skip the pipeline + a wall of empty cards).
@@ -47,7 +48,7 @@ export async function render(ctx) {
   wrap.append(StatRow(s.counts));
   wrap.append(Pipeline(s.status_breakdown));
   wrap.append(el('div', { class: 'grid grid--2' },
-    el('div', { class: 'stack-4' }, ActionLane(s.interview_todo, s.in_progress), RecentJobs(s.recent_jobs)),
+    el('div', { class: 'stack-4' }, ActionLane(s), RecentJobs(s.recent_jobs)),
     el('div', { class: 'stack-4' }, Activity(s.recent_activity)),
   ));
 
@@ -57,25 +58,25 @@ export async function render(ctx) {
 /* ----------------------------------------------------------------- greeting band */
 function Greeting(name, s, firstRun) {
   let focus;
-  if (firstRun) focus = '시작해 볼까요 — 먼저 기본 정보를 채워 주세요.';
-  else if (s.interview_todo.length) focus = `면접 준비가 필요한 지원 ${s.interview_todo.length}건이 있어요.`;
-  else if (s.in_progress.length) focus = `진행 중인 지원 ${s.in_progress.length}건이 있어요.`;
-  else if (s.counts.jobs) focus = `저장된 공고 ${s.counts.jobs}건 · 새 적합도 분석을 받아보세요.`;
-  else focus = '오늘도 한 걸음 나아가 볼까요.';
-  return PageHead({ title: name ? `${name}님, 안녕하세요` : '환영합니다', desc: focus });
+  if (firstRun) focus = t('home.greeting.firstRun');
+  else if (s.interview_todo.length) focus = t('home.greeting.interviewTodo', { count: s.interview_todo.length });
+  else if (s.in_progress.length) focus = t('home.greeting.inProgress', { count: s.in_progress.length });
+  else if (s.counts.jobs) focus = t('home.greeting.jobsSaved', { count: s.counts.jobs });
+  else focus = t('home.greeting.idle');
+  return PageHead({ title: name ? t('home.greeting.title', { name }) : t('home.greeting.welcome'), desc: focus });
 }
 
 /* ----------------------------------------------- getting started (the one guidance surface) */
 function GettingStarted(o) {
   const steps = [
-    { done: o.has_profile, label: '기본 프로필 작성', to: '/profile' },
-    { done: o.has_resume || o.has_experience, label: '이력서 또는 경력 추가', to: '/profile' },
-    { done: o.has_cover_letter, label: '기존 자기소개서 등록', to: '/documents' },
-    { done: o.has_job, label: '관심 공고 저장', to: '/jobs' },
+    { done: o.has_profile, label: t('home.start.step.profile'), to: '/profile' },
+    { done: o.has_resume, label: t('home.start.step.resume'), to: '/documents/career' },
+    { done: o.has_cover_letter, label: t('home.start.step.coverLetter'), to: '/documents' },
+    { done: o.has_job, label: t('home.start.step.job'), to: '/jobs' },
   ];
   return Card({
-    title: '시작하기',
-    sub: `프로필 완성도 ${o.profile_completeness}%`,
+    title: t('home.start.title'),
+    sub: t('home.start.completeness', { pct: o.profile_completeness }),
     body: [
       // The one place (per DESIGN_GUIDE rule 4) that teaches the core mental model:
       // CareerMate stores; your own AI does the thinking. Without this, first-run users
@@ -83,12 +84,12 @@ function GettingStarted(o) {
       el('div', { class: 'callout mb-3' },
         icon('info'),
         el('div', {},
-          el('div', { class: 'callout__title' }, '두뇌는 당신의 AI, 보관은 CareerMate'),
+          el('div', { class: 'callout__title' }, t('home.start.calloutTitle')),
           el('div', { class: 'callout__body' },
-            '공고 분석·자기소개서·면접 준비는 평소 쓰던 AI에게 말로 시키면, 결과가 이 대시보드에 쌓여요.'))),
+            t('home.start.calloutBody')))),
       el('div', { class: 'progress' }, el('div', { class: 'progress__bar', style: { width: `${o.profile_completeness}%` } })),
       el('p', { class: 'text-secondary text-sm mt-3 mb-2' },
-        '완성할수록 AI의 적합도 분석과 자기소개서 품질이 좋아져요.'),
+        t('home.start.note')),
       el('div', {}, ...steps.map((it) => CheckRow({ done: it.done, label: it.label, onClick: () => navigate(it.to) }))),
     ],
   });
@@ -102,10 +103,10 @@ function StatTile(label, value, iconName, to) {
 }
 function StatRow(counts) {
   return el('div', { class: 'grid grid--4' },
-    StatTile('저장 공고', counts.jobs, 'briefcase', '/jobs'),
-    StatTile('진행 중 지원', counts.active_applications, 'layers', '/applications'),
-    StatTile('자기소개서', counts.cover_letters, 'file', '/documents'),
-    StatTile('면접 준비', counts.interview_pending, 'mic', '/interview'),
+    StatTile(t('home.stat.jobs'), counts.jobs, 'briefcase', '/jobs'),
+    StatTile(t('home.stat.activeApplications'), counts.active_applications, 'layers', '/applications'),
+    StatTile(t('home.stat.coverLetters'), counts.cover_letters, 'file', '/documents'),
+    StatTile(t('home.stat.interviewPending'), counts.interview_pending, 'mic', '/interview'),
   );
 }
 
@@ -119,13 +120,13 @@ function Pipeline(breakdown) {
   let body;
   if (total === 0) {
     body = el('p', { class: 'muted', style: { margin: 0 } },
-      '아직 지원 단계가 없어요. 공고에 지원 상태를 표시하면 여기에 파이프라인이 채워져요.');
+      t('home.pipeline.empty'));
   } else {
     const segs = PIPE_ORDER.filter((st) => c(st) > 0).map((st) =>
       el('div', {
         class: 'pipebar__seg',
         style: { flexGrow: String(c(st)), background: STATUS_COLOR[st] },
-        title: `${breakdown.find((b) => b.status === st).label} ${c(st)}`,
+        title: `${t('status.' + st)} ${c(st)}`,
         onClick: open,
       }));
 
@@ -134,13 +135,13 @@ function Pipeline(breakdown) {
     const intv = c('interview') + c('final_passed');
     const fin = c('final_passed');
     const pct = (num, den) => (den > 0 ? Math.round((num / den) * 100) : null);
-    const conv = (num, den, label) => (pct(num, den) != null ? `${label} ${pct(num, den)}%` : null);
+    const conv = (num, den, key) => (pct(num, den) != null ? t(key, { pct: pct(num, den) }) : null);
 
     const tiles = [
-      { st: 'applied', label: '지원', value: reached, conv: total ? `전체 ${total}건` : null },
-      { st: 'document_passed', label: '서류 합격', value: docPass, conv: conv(docPass, reached, '지원 대비') },
-      { st: 'interview', label: '면접', value: intv, conv: conv(intv, reached, '지원 대비') },
-      { st: 'final_passed', label: '최종 합격', value: fin, conv: conv(fin, intv, '면접 대비') || conv(fin, reached, '지원 대비') },
+      { st: 'applied', label: t('home.pipeline.stage.applied'), value: reached, conv: total ? t('home.pipeline.conv.total', { count: total }) : null },
+      { st: 'document_passed', label: t('home.pipeline.stage.documentPassed'), value: docPass, conv: conv(docPass, reached, 'home.pipeline.conv.vsApplied') },
+      { st: 'interview', label: t('home.pipeline.stage.interview'), value: intv, conv: conv(intv, reached, 'home.pipeline.conv.vsApplied') },
+      { st: 'final_passed', label: t('home.pipeline.stage.finalPassed'), value: fin, conv: conv(fin, intv, 'home.pipeline.conv.vsInterview') || conv(fin, reached, 'home.pipeline.conv.vsApplied') },
     ];
 
     body = [
@@ -155,8 +156,8 @@ function Pipeline(breakdown) {
   }
 
   return Card({
-    title: '지원 파이프라인',
-    actions: Btn('보드 열기', { sm: true, variant: 'ghost', onClick: open }),
+    title: t('home.pipeline.title'),
+    actions: Btn(t('home.pipeline.openBoard'), { sm: true, variant: 'ghost', onClick: open }),
     body,
   });
 }
@@ -166,33 +167,67 @@ function statusDot(status) {
   return el('span', { class: 'list-row__dot', style: { background: statusColor(status) } });
 }
 
-function ActionLane(interviewTodo, inProgress) {
+// deadline days_left (computed server-side) → coloured D-day badge.
+function ddayBadge(daysLeft) {
+  if (daysLeft < 0) return Badge('rejected', t('applications.dday.past'));
+  if (daysLeft === 0) return Badge('rejected', t('applications.dday.today'));
+  return Badge('interview', t('applications.dday.future', { n: daysLeft }));
+}
+
+function ActionLane(s) {
   const rows = [];
-  for (const it of interviewTodo) {
-    rows.push(ListRow({
+  const seen = new Set();
+  // Dedup by job id: the same posting can surface in multiple lanes (e.g. a draft
+  // with a near deadline is also in_progress) — show it once, in its highest lane.
+  const push = (jobId, r) => {
+    if (rows.length >= 6 || (jobId && seen.has(jobId))) return;
+    if (jobId) seen.add(jobId);
+    rows.push(r);
+  };
+  // Priority: interview prep (post-screening, time-bound) → deadline-urgent postings
+  // → stale follow-ups → other in-progress. interview prep keeps its prior top slot.
+  for (const it of s.interview_todo || []) {
+    push(it.job.id, ListRow({
       leading: statusDot('document_passed'),
       title: it.job.company,
       sub: it.job.position,
-      trailing: el('span', { class: 'badge badge--accent' }, el('span', { class: 'dot' }), '면접 준비'),
+      trailing: el('span', { class: 'badge badge--accent' }, el('span', { class: 'dot' }), t('home.actionLane.interviewPrep')),
+      onClick: () => navigate(`/jobs/${it.job.id}`),
+    }));
+  }
+  for (const it of s.deadlines || []) {
+    push(it.job.id, ListRow({
+      leading: statusDot(it.status),
+      title: it.job.company,
+      sub: it.job.position,
+      trailing: ddayBadge(it.days_left),
+      onClick: () => navigate(`/jobs/${it.job.id}`),
+    }));
+  }
+  for (const it of s.followups || []) {
+    push(it.job.id, ListRow({
+      leading: statusDot('applied'),
+      title: it.job.company,
+      sub: it.job.position,
+      trailing: Badge('accent', t('home.actionLane.followup', { n: it.days_since })),
       onClick: () => navigate(`/jobs/${it.job.id}`),
     }));
   }
-  for (const it of inProgress) {
-    if (rows.length >= 6) break;
-    rows.push(ListRow({
+  for (const it of s.in_progress || []) {
+    push(it.job?.id, ListRow({
       leading: statusDot(it.application.status),
-      title: it.job?.company || '—',
+      title: it.job?.company || t('home.placeholder.dash'),
       sub: it.job?.position || '',
-      trailing: Badge(it.application.status, it.status_label),
+      trailing: Badge(it.application.status, t('status.' + it.application.status)),
       onClick: it.job ? () => navigate(`/jobs/${it.job.id}`) : null,
     }));
   }
   return Card({
-    title: '이번에 할 일',
-    actions: rows.length ? Btn('전체 보기', { sm: true, variant: 'ghost', onClick: () => navigate('/applications') }) : null,
+    title: t('home.actionLane.title'),
+    actions: rows.length ? Btn(t('home.actionLane.viewAll'), { sm: true, variant: 'ghost', onClick: () => navigate('/applications') }) : null,
     body: rows.length
       ? el('div', {}, ...rows)
-      : el('p', { class: 'muted', style: { margin: 0 } }, '지금 처리할 일이 없어요. 새 공고를 분석해 보세요.'),
+      : el('p', { class: 'muted', style: { margin: 0 } }, t('home.actionLane.empty')),
   });
 }
 
@@ -200,8 +235,8 @@ function ActionLane(interviewTodo, inProgress) {
 function RecentJobs(jobs) {
   if (!jobs.length) {
     return Card({
-      title: '최근 공고',
-      body: el('p', { class: 'muted', style: { margin: 0 } }, '저장된 공고가 아직 없어요. 새 공고를 추가해 보세요.'),
+      title: t('home.recentJobs.title'),
+      body: el('p', { class: 'muted', style: { margin: 0 } }, t('home.recentJobs.empty')),
     });
   }
   const rows = jobs.map((j) => ListRow({
@@ -209,15 +244,15 @@ function RecentJobs(jobs) {
     sub: j.position,
     trailing: [
       j.fit_score != null
-        ? el('span', { class: `strong tnum ${scoreClass(j.fit_score)}` }, `${j.fit_score}점`)
-        : el('span', { class: 'muted text-sm' }, '—'),
-      Badge(j.status, j.status_label),
+        ? el('span', { class: `strong tnum ${scoreClass(j.fit_score)}` }, t('home.recentJobs.score', { score: j.fit_score }))
+        : el('span', { class: 'muted text-sm' }, t('home.placeholder.dash')),
+      Badge(j.status, t('status.' + j.status)),
     ],
     onClick: () => navigate(`/jobs/${j.id}`),
   }));
   return Card({
-    title: '최근 공고',
-    actions: Btn('전체 보기', { sm: true, variant: 'ghost', onClick: () => navigate('/jobs') }),
+    title: t('home.recentJobs.title'),
+    actions: Btn(t('home.recentJobs.viewAll'), { sm: true, variant: 'ghost', onClick: () => navigate('/jobs') }),
     body: el('div', {}, ...rows),
   });
 }
@@ -226,8 +261,8 @@ function RecentJobs(jobs) {
 function Activity(acts) {
   if (!acts.length) {
     return Card({
-      title: '최근 활동',
-      body: el('p', { class: 'muted', style: { margin: 0 } }, '아직 활동 내역이 없어요. 공고를 저장하거나 분석하면 여기에 기록돼요.'),
+      title: t('home.activity.title'),
+      body: el('p', { class: 'muted', style: { margin: 0 } }, t('home.activity.empty')),
     });
   }
   const body = [];
@@ -242,7 +277,7 @@ function Activity(acts) {
           el('time', { class: 'feed-item__time', title: fmtDate(a.created_at), attrs: { datetime: a.created_at } }, fmtRelative(a.created_at)))));
     }
   }
-  return Card({ title: '최근 활동', body: el('div', {}, ...body) });
+  return Card({ title: t('home.activity.title'), body: el('div', {}, ...body) });
 }
 
 function groupByDay(acts) {
@@ -253,7 +288,7 @@ function groupByDay(acts) {
   const buckets = new Map();
   for (const a of acts) {
     const day = midnight(a.created_at);
-    const label = day === today ? '오늘' : day === yesterday ? '어제' : fmtDate(a.created_at);
+    const label = day === today ? t('home.activity.today') : day === yesterday ? t('home.activity.yesterday') : fmtDate(a.created_at);
     if (!buckets.has(label)) { buckets.set(label, []); order.push(label); }
     buckets.get(label).push(a);
   }

package/dist/public/pages/interview.js

@@ -1,9 +1,15 @@
-// Interview — preparation materials for jobs that reached 서류 합격 or beyond.
+// Interview — preparation materials saved for jobs, plus timely interview-stage to-dos.
 import {
   el, get, put, icon, navigate, Card, Badge, Btn, SubmitBtn, EmptyState, Field, Input,
-  Textarea, openModal, closeModal, toastOk, copyText,
+  Textarea, Select, openModal, closeModal, toastOk, copyText,
   downloadUrl, mount,
 } from '/lib.js';
+import { t } from '/i18n.js';
+
+// Interview questions split into two tabs: 기술(1차) / 인성·컬처핏(2차). A question
+// with no category is treated as technical (back-compat with preps saved before tabs).
+const CATEGORIES = ['technical', 'behavioral'];
+const catOf = (q) => (q && q.category === 'behavioral' ? 'behavioral' : 'technical');
 
 export async function render(ctx) {
   const data = await get('/api/interview');
@@ -17,9 +23,9 @@ export async function render(ctx) {
   if (!eligible.length) {
     wrap.append(EmptyState({
       iconName: 'mic',
-      title: '아직 면접 준비할 공고가 없어요',
-      body: '서류 합격 이상 상태가 되면 그 공고의 면접 준비를 여기서 할 수 있어요.',
-      action: Btn('지원 현황으로 가기', { icon: 'layers', variant: 'primary', onClick: () => navigate('/applications') }),
+      title: t('interview.empty.title'),
+      body: t('interview.empty.body'),
+      action: Btn(t('interview.empty.cta'), { icon: 'briefcase', variant: 'primary', onClick: () => navigate('/jobs') }),
     }));
     mount(ctx.view, wrap);
     ctx.setActions([]);
@@ -39,27 +45,35 @@ export async function render(ctx) {
 
     const body = [];
     if (hasPrep) {
-      const qCount = (prep.questions || []).length;
+      const qs = prep.questions || [];
+      const techN = qs.filter((q) => catOf(q) === 'technical').length;
+      const behN = qs.filter((q) => catOf(q) === 'behavioral').length;
       const sCount = (prep.star_guides || []).length;
       const hasIntro = !!(prep.self_introduction && prep.self_introduction.trim());
       body.push(el('p', { class: 'text-secondary', style: { margin: 0 } },
-        `예상 질문 ${qCount}개 · STAR 가이드 ${sCount}개 · 1분 자기소개 ${hasIntro ? '있음' : '없음'}`));
+        t('interview.card.summary', {
+          q: behN > 0
+            ? t('interview.card.questionsSplit', { tech: techN, beh: behN })
+            : t('interview.card.questionsCount', { count: qs.length }),
+          s: t('interview.card.starCount', { count: sCount }),
+          intro: hasIntro ? t('interview.card.introYes') : t('interview.card.introNo'),
+        })));
     } else {
       body.push(el('p', { class: 'text-secondary', style: { margin: 0, lineHeight: '1.6' } },
-        '예상 질문과 1분 자기소개를 정리해 두면 한곳에서 연습할 수 있어요.'));
+        t('interview.card.hint')));
     }
 
     const actions = [];
     if (hasPrep) {
-      actions.push(Btn('자세히 보기', { icon: 'external', sm: true, onClick: () => openPrepModal(entry, prep) }));
+      actions.push(Btn(t('interview.card.view'), { icon: 'external', sm: true, onClick: () => openPrepModal(entry, prep) }));
     } else {
-      actions.push(Btn('직접 작성', { icon: 'edit', sm: true, onClick: () => openEditModal(entry, null) }));
+      actions.push(Btn(t('interview.card.create'), { icon: 'edit', sm: true, onClick: () => openEditModal(entry, null) }));
     }
 
     return Card({
       title: `${job.company || '—'} · ${job.position || ''}`,
       sub: undefined,
-      actions: [Badge(entry.status, entry.status_label), ...actions],
+      actions: [Badge(entry.status, t('status.' + entry.status)), ...actions],
       body,
     });
   }
@@ -70,66 +84,93 @@ export async function render(ctx) {
     const jobId = prep.job_id;
     const sections = el('div', { class: 'stack-4' });
 
-    // 예상 질문 & 꼬리 질문
+    // 예상 질문 & 꼬리 질문 — 기술 / 인성·컬처핏 탭
     const questions = prep.questions || [];
     sections.append(Card({
-      title: '예상 질문 & 꼬리 질문',
+      title: t('interview.modal.questionsTitle'),
       body: questions.length
-        ? el('div', { class: 'stack-3' }, ...questions.map(QuestionBlock))
-        : el('p', { class: 'muted', style: { margin: 0 } }, '등록된 예상 질문이 없습니다.'),
+        ? QuestionTabs(questions)
+        : el('p', { class: 'muted', style: { margin: 0 } }, t('interview.modal.questionsEmpty')),
     }));
 
     // STAR 답변 가이드
     const stars = prep.star_guides || [];
     sections.append(Card({
-      title: 'STAR 답변 가이드',
+      title: t('interview.modal.starTitle'),
       body: stars.length
         ? el('div', { class: 'stack-3' }, ...stars.map(StarBlock))
-        : el('p', { class: 'muted', style: { margin: 0 } }, '등록된 STAR 가이드가 없습니다.'),
+        : el('p', { class: 'muted', style: { margin: 0 } }, t('interview.modal.starEmpty')),
     }));
 
     // 1분 자기소개
     const intro = prep.self_introduction || '';
     sections.append(Card({
-      title: '1분 자기소개',
-      actions: intro.trim() && Btn('복사', { icon: 'copy', sm: true, onClick: () => copyText(intro) }),
+      title: t('interview.modal.introTitle'),
+      actions: intro.trim() && Btn(t('interview.modal.introCopy'), { icon: 'copy', sm: true, onClick: () => copyText(intro) }),
       body: intro.trim()
         ? el('div', { class: 'doc-preview' }, intro)
-        : el('p', { class: 'muted', style: { margin: 0 } }, '작성된 자기소개가 없습니다.'),
+        : el('p', { class: 'muted', style: { margin: 0 } }, t('interview.modal.introEmpty')),
     }));
 
     // 메모
     if (prep.notes && prep.notes.trim()) {
       sections.append(Card({
-        title: '메모',
+        title: t('interview.modal.notesTitle'),
         body: el('div', { class: 'doc-preview' }, prep.notes),
       }));
     }
 
     openModal({
-      title: `${job.company || ''} 면접 준비`,
+      title: t('interview.modal.title', { company: job.company || '' }),
       size: 'lg',
       body: sections,
       footer: (close) => [
-        Btn('MD 내보내기', { icon: 'download', onClick: () => downloadUrl(`/api/export/interview/${jobId}?format=md`) }),
-        Btn('HTML 내보내기', { icon: 'download', onClick: () => downloadUrl(`/api/export/interview/${jobId}?format=html`) }),
-        Btn('수정', { icon: 'edit', variant: 'primary', onClick: () => { close(); openEditModal(entry, prep); } }),
+        Btn(t('interview.modal.exportMd'), { icon: 'download', onClick: () => downloadUrl(`/api/export/interview/${jobId}?format=md`) }),
+        Btn(t('interview.modal.exportHtml'), { icon: 'download', onClick: () => downloadUrl(`/api/export/interview/${jobId}?format=html`) }),
+        Btn(t('interview.modal.edit'), { icon: 'edit', variant: 'primary', onClick: () => { close(); openEditModal(entry, prep); } }),
       ],
     });
   }
 
+  // Two-tab view over the question list. Opens on the first tab that has content.
+  function QuestionTabs(questions) {
+    const groups = {
+      technical: questions.filter((q) => catOf(q) === 'technical'),
+      behavioral: questions.filter((q) => catOf(q) === 'behavioral'),
+    };
+    let active = groups.technical.length === 0 && groups.behavioral.length ? 'behavioral' : 'technical';
+    const tabEls = {};
+    const panel = el('div', {});
+    function draw() {
+      const list = groups[active];
+      mount(panel, list.length
+        ? el('div', { class: 'stack-3' }, ...list.map(QuestionBlock))
+        : el('p', { class: 'muted', style: { margin: 0 } }, t('interview.modal.questionsEmptyTab')));
+      for (const c of CATEGORIES) tabEls[c].classList.toggle('is-active', c === active);
+    }
+    const tabs = el('div', { class: 'tabs' }, ...CATEGORIES.map((c) => {
+      const n = groups[c].length;
+      const tabEl = el('div', { class: 'tab', onClick: () => { active = c; draw(); } },
+        n ? `${t('interview.tab.' + c)} (${n})` : t('interview.tab.' + c));
+      tabEls[c] = tabEl;
+      return tabEl;
+    }));
+    draw();
+    return el('div', { class: 'stack-3' }, tabs, panel);
+  }
+
   function QuestionBlock(q) {
     const node = el('div', { class: 'stack-2', style: { paddingBottom: '6px' } });
     node.append(el('div', { class: 'strong' }, q.question || ''));
-    if (q.intent) node.append(el('div', { class: 'muted text-sm' }, `의도: ${q.intent}`));
+    if (q.intent) node.append(el('div', { class: 'muted text-sm' }, t('interview.question.intent', { intent: q.intent })));
     const followups = (q.followups || []).filter((f) => f && String(f).trim());
     if (followups.length) {
-      node.append(el('div', { class: 'text-sm text-secondary', style: { marginTop: '2px' } }, '꼬리 질문'));
+      node.append(el('div', { class: 'text-sm text-secondary', style: { marginTop: '2px' } }, t('interview.question.followups')));
       node.append(el('ul', { class: 'stack-2', style: { margin: '2px 0 0', paddingLeft: '18px' } },
         ...followups.map((f) => el('li', { class: 'text-sm text-secondary' }, f))));
     }
     if (q.answer_outline && String(q.answer_outline).trim()) {
-      node.append(el('div', { class: 'muted text-sm', style: { marginTop: '4px' } }, '답변 가이드'));
+      node.append(el('div', { class: 'muted text-sm', style: { marginTop: '4px' } }, t('interview.question.answerGuide')));
       node.append(el('div', { class: 'doc-preview', style: { marginTop: '2px' } }, q.answer_outline));
     }
     return node;
@@ -138,15 +179,15 @@ export async function render(ctx) {
   function StarBlock(g) {
     const rows = [];
     const add = (label, val) => { if (val && String(val).trim()) { rows.push(el('dt', {}, label)); rows.push(el('dd', {}, val)); } };
-    add('상황', g.situation);
-    add('과제', g.task);
-    add('행동', g.action);
-    add('결과', g.result);
+    add(t('interview.star.situation'), g.situation);
+    add(t('interview.star.task'), g.task);
+    add(t('interview.star.action'), g.action);
+    add(t('interview.star.result'), g.result);
     return el('div', { class: 'stack-2', style: { paddingBottom: '6px' } },
       el('div', { class: 'strong' }, g.question || ''),
       rows.length
         ? el('dl', { class: 'kv' }, ...rows)
-        : el('div', { class: 'muted text-sm' }, 'S/T/A/R 내용이 비어 있습니다.'));
+        : el('div', { class: 'muted text-sm' }, t('interview.star.empty')));
   }
 
   // -------------------------------------------------- manual edit / create
@@ -158,12 +199,12 @@ export async function render(ctx) {
     const introInput = Textarea({
       value: prep.self_introduction || '',
       rows: 5,
-      placeholder: '1분 분량(약 300~400자)의 자기소개를 작성하세요.',
+      placeholder: t('interview.edit.introPlaceholder'),
     });
     const notesInput = Textarea({
       value: prep.notes || '',
       rows: 3,
-      placeholder: '면접 준비 메모를 자유롭게 적어두세요.',
+      placeholder: t('interview.edit.notesPlaceholder'),
     });
 
     // Repeatable question list: question + answer_outline.
@@ -171,43 +212,56 @@ export async function render(ctx) {
     const qRows = [];
     function addQuestionRow(q) {
       q = q || {};
-      const qInput = Input({ value: q.question || '', placeholder: '예상 질문' });
-      const aInput = Textarea({ value: q.answer_outline || '', rows: 2, placeholder: '답변 가이드 (선택)' });
+      const qInput = Input({ value: q.question || '', placeholder: t('interview.edit.questionPlaceholder') });
+      const aInput = Textarea({ value: q.answer_outline || '', rows: 2, placeholder: t('interview.edit.answerPlaceholder') });
+      const catSelect = Select(
+        CATEGORIES.map((c) => ({ value: c, label: t('interview.tab.' + c), selected: catOf(q) === c })),
+        { attrs: { 'aria-label': t('interview.edit.fieldCategory') } },
+      );
+      catSelect.classList.add('select--sm');
       const row = el('div', { class: 'subcard stack-2' },
         el('div', { class: 'flex between center' },
-          el('span', { class: 'text-sm muted' }, `질문 ${qRows.length + 1}`),
-          Btn('삭제', { icon: 'trash', sm: true, variant: 'ghost', onClick: () => { entryRef.removed = true; row.remove(); } })),
-        Field('질문', qInput),
-        Field('답변 가이드', aInput));
-      const entryRef = { qInput, aInput, removed: false };
+          el('span', { class: 'text-sm muted' }, t('interview.edit.questionNum', { n: qRows.length + 1 })),
+          el('div', { class: 'flex gap-2 center' },
+            catSelect,
+            Btn(t('interview.edit.delete'), { icon: 'trash', sm: true, variant: 'ghost', onClick: () => { entryRef.removed = true; row.remove(); } }))),
+        Field(t('interview.edit.fieldQuestion'), qInput),
+        Field(t('interview.edit.fieldAnswer'), aInput));
+      const entryRef = { qInput, aInput, catSelect, removed: false };
       qRows.push(entryRef);
       qList.append(row);
     }
     (prep.questions || []).forEach(addQuestionRow);
 
     const formBody = el('div', { class: 'stack-4' },
-      Field('1분 자기소개', introInput),
-      Field('메모', notesInput),
+      Field(t('interview.edit.introLabel'), introInput),
+      Field(t('interview.edit.notesLabel'), notesInput),
       el('div', { class: 'stack-2' },
         el('div', { class: 'flex between center' },
-          el('label', {}, '예상 질문'),
-          Btn('질문 추가', { icon: 'plus', sm: true, onClick: () => addQuestionRow(null) })),
+          el('label', {}, t('interview.edit.questionsLabel')),
+          Btn(t('interview.edit.addQuestion'), { icon: 'plus', sm: true, onClick: () => addQuestionRow(null) })),
         qList));
 
     openModal({
-      title: `${job.company || ''} 면접 준비 ${Object.keys(prep).length ? '수정' : '작성'}`,
+      title: Object.keys(prep).length
+        ? t('interview.edit.titleEdit', { company: job.company || '' })
+        : t('interview.edit.titleCreate', { company: job.company || '' }),
       size: 'lg',
       body: formBody,
       footer: (close) => [
-        Btn('취소', { onClick: close }),
-        SubmitBtn('면접 준비 저장', () => save(jobId)),
+        Btn(t('interview.edit.cancel'), { onClick: close }),
+        SubmitBtn(t('interview.edit.save'), () => save(jobId)),
       ],
     });
 
     async function save(id) {
       const questions = qRows
         .filter((r) => !r.removed)
-        .map((r) => ({ question: r.qInput.value.trim(), answer_outline: r.aInput.value.trim() }))
+        .map((r) => ({
+          question: r.qInput.value.trim(),
+          category: r.catSelect.value,
+          answer_outline: r.aInput.value.trim(),
+        }))
         .filter((q) => q.question);
       // Preserve any richer star_guides authored elsewhere (AI/MCP).
       const payload = {
@@ -219,7 +273,7 @@ export async function render(ctx) {
       // Throws on failure so the SubmitBtn surfaces it inline.
       await put(`/api/jobs/${id}/interview`, payload);
       closeModal();
-      toastOk('면접 준비를 저장했어요.');
+      toastOk(t('interview.edit.saved'));
       await ctx.refreshNav();
       await render(ctx);
     }