careermate 0.0.7 → 0.0.9

package/dist/public/pages/jobs.js

@@ -6,7 +6,7 @@ import {
   el, get, post, put, del, icon, navigate, Card, Badge, Btn, SubmitBtn,
   EmptyState, Chips, Field, Input, Textarea, Select,
   openModal, closeModal, confirmDialog, toastOk, toastError,
-  fmtDate, scoreClass, mount, meta, linesToArray, csvToArray,
+  fmtDate, scoreClass, mount, meta, linesToArray, csvToArray, daysUntil, scheduleDdayBadge,
 } from '/lib.js';
 import { t } from '/i18n.js';
 
@@ -340,6 +340,7 @@ async function renderDetail(ctx, jobId) {
       CoverLettersCard(job.cover_letters),
       InterviewCard(job)),
     PostingCard(job),
+    CompanyResearchCard(job),
     FitCard(job.fit),
     TimelineCard(job.timeline),
     RelatedCard(job.related),
@@ -372,6 +373,41 @@ function PostingCard(job) {
         ...job.requirements.map((r) => el('li', {}, r)))));
   }
 
+  if (job.questions && job.questions.length) {
+    // 한국 문항형 자소서: 회사 지정 문항·글자수 한도. AI가 문항별 답변을 쓰고 한도를
+    // 점검할 원본이자, 사용자가 대시보드에서 요구 문항을 그대로 볼 수 있게 한다.
+    body.push(el('div', { class: 'mt-3' },
+      el('div', { class: 'muted text-sm mb-2' }, t('jobs.questions.title')),
+      el('ol', { class: 'stack-2', style: { margin: 0, paddingLeft: '18px' } },
+        ...job.questions.map((q) => {
+          const label = questionLimitLabel(q);
+          return el('li', {},
+            el('span', {}, q.question),
+            label ? el('span', { class: 'muted text-sm', style: { marginLeft: '8px' } }, label) : null);
+        }))));
+  }
+
+  if (job.schedule && job.schedule.length) {
+    // 전형 일정: 면접·인적성·발표 등 단계별 날짜. 날짜순으로 D-day 라벨과 함께 보여주고,
+    // 이미 지난 일정은 흐리게 처리한다(v9 문항 블록과 같은 위치·스타일 패턴).
+    const sorted = job.schedule.slice().sort((a, b) => {
+      if (a.date !== b.date) return a.date < b.date ? -1 : 1;
+      return (a.time || '99:99').localeCompare(b.time || '99:99');
+    });
+    body.push(el('div', { class: 'mt-3' },
+      el('div', { class: 'muted text-sm mb-2' }, t('jobs.schedule.title')),
+      el('ul', { class: 'stack-2', style: { margin: 0, padding: 0, listStyle: 'none' } },
+        ...sorted.map((s) => {
+          const dDay = daysUntil(s.date);
+          const when = s.time ? `${fmtDate(s.date)} ${s.time}` : fmtDate(s.date);
+          return el('li', { class: `flex gap-2 center${dDay != null && dDay < 0 ? ' muted' : ''}` },
+            scheduleDdayBadge(dDay),
+            el('span', { class: 'strong' }, s.label),
+            el('span', { class: 'text-sm' }, when),
+            s.note ? el('span', { class: 'muted text-sm' }, s.note) : null);
+        }))));
+  }
+
   if (job.description) {
     // 원문은 가장 길어 칼럼을 늘리는 주범 — 기본 접힘(아코디언)으로 둔다.
     body.push(el('details', { class: 'disclosure mt-3' },
@@ -384,6 +420,40 @@ function PostingCard(job) {
   return Card({ title: t('jobs.posting.title'), body });
 }
 
+// 문항 글자수 한도 라벨(예: "최대 700자(공백포함)"). 한도가 없으면 null.
+// count_mode: with_space=공백포함 · no_space=공백제외 · byte=UTF-8 바이트(공백 구분 없음).
+function questionLimitLabel(q) {
+  const hasMin = typeof q.min_chars === 'number';
+  const hasMax = typeof q.max_chars === 'number';
+  if (!hasMin && !hasMax) return null;
+  const unit = q.count_mode === 'byte' ? t('jobs.questions.unitByte') : t('jobs.questions.unitChar');
+  const suffix = q.count_mode === 'no_space' ? t('jobs.questions.modeNoSpace')
+    : q.count_mode === 'with_space' ? t('jobs.questions.modeWithSpace')
+    : '';
+  const parts = [];
+  if (hasMin) parts.push(t('jobs.questions.min', { n: q.min_chars, unit }));
+  if (hasMax) parts.push(t('jobs.questions.max', { n: q.max_chars, unit }));
+  return `${parts.join(' · ')}${suffix}`;
+}
+
+// Company research the AI saved (overview·인재상·핵심가치·평판) — rendered so the
+// user can actually SEE it in the dashboard, not just have the AI use it.
+function CompanyResearchCard(job) {
+  const hasValues = job.core_values && job.core_values.length;
+  if (!job.company_overview && !job.talent_profile && !hasValues && !job.reputation) return null;
+  const field = (labelKey, value) => el('div', { class: 'mt-3' },
+    el('div', { class: 'muted text-sm mb-2' }, t(labelKey)),
+    el('p', { style: { margin: 0, whiteSpace: 'pre-wrap' } }, value));
+  const body = [];
+  if (job.company_overview) body.push(field('jobs.company.overview', job.company_overview));
+  if (job.talent_profile) body.push(field('jobs.company.talent', job.talent_profile));
+  if (hasValues) body.push(el('div', { class: 'mt-3' },
+    el('div', { class: 'muted text-sm mb-2' }, t('jobs.company.values')),
+    Chips(job.core_values, { accent: true })));
+  if (job.reputation) body.push(field('jobs.company.reputation', job.reputation));
+  return Card({ title: t('jobs.company.title'), body });
+}
+
 function FitCard(fit) {
   if (!fit) {
     return Card({

package/dist/public/pages/profile.js

@@ -2,7 +2,7 @@
 import {
   el, get, post, put, del, icon, Card, Badge, Btn, IconBtn, SubmitBtn, EmptyState, Chips,
   Field, Input, Textarea, openModal, closeModal, confirmDialog,
-  toastOk, toastError, fmtDate, mount, linesToArray, csvToArray, downloadUrl,
+  toastOk, toastError, fmtDate, mount, linesToArray, csvToArray, ExportMenu,
 } from '/lib.js';
 import { t } from '/i18n.js';
 
@@ -67,8 +67,7 @@ function CompletenessCard(o) {
     title: t('profile.completeness.title'),
     sub: t('profile.completeness.percent', { pct }),
     actions: [
-      Btn(t('profile.export.md'), { sm: true, variant: 'ghost', icon: 'download', title: t('profile.export.mdTitle'), onClick: () => downloadUrl('/api/export/profile?format=md') }),
-      Btn(t('profile.export.html'), { sm: true, variant: 'ghost', icon: 'download', title: t('profile.export.htmlTitle'), onClick: () => downloadUrl('/api/export/profile?format=html') }),
+      ExportMenu('/api/export/profile'),
     ],
     body: [
       el('div', { class: 'progress', style: { marginBottom: steps.length ? '12px' : '0' } },

package/dist/public/pages/settings.js

@@ -168,7 +168,6 @@ function Theme() {
 /* ------------------------------------------------------------- 언어 / Language */
 function LanguageSwitcher() {
   // 테마 컴포넌트와 동일 패턴: localStorage 영속 + paint() + 변경 시 재페인트.
-  // 카탈로그가 채워지는 Phase 2부터 페이지 텍스트가 실제로 전환된다.
   const options = [
     { value: 'ko', label: '한국어' },
     { value: 'en', label: 'English' },
@@ -188,8 +187,9 @@ function LanguageSwitcher() {
   onLangChange(paint);
 
   return Card({
+    // 제목은 의도적으로 양언어 병기 — 현재 언어를 못 읽는 사용자도 이 카드를 찾아야 한다.
     title: '언어 / Language',
-    sub: '대시보드 표시 언어',
+    sub: t('settings.lang.sub'),
     body: row,
   });
 }

package/dist/public/styles.css

@@ -201,14 +201,16 @@ h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
 .card.is-clickable { cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
 .card.is-clickable:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
 
-/* stat tiles */
-.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; }
+/* stat tiles — slim, dense KPI row (home only). A contextual hint line, when
+   present, sits at the bottom so tiles align evenly whether or not they carry one. */
+.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
+  padding: 12px 15px; min-height: 84px; display: flex; flex-direction: column; }
 .stat.is-clickable { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
 .stat.is-clickable:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
 .stat__label { font-size: 13px; color: var(--text-secondary); display:flex; align-items:center; gap:7px; }
 .stat__label svg { width: 15px; height: 15px; color: var(--text-tertiary); }
-.stat__value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; }
-.stat__hint { font-size: 12.5px; color: var(--text-tertiary); margin-top: 2px; }
+.stat__value { font-size: 23px; font-weight: 700; letter-spacing: -.02em; margin-top: 3px; line-height: 1.15; }
+.stat__hint { font-size: 12.5px; color: var(--text-tertiary); margin-top: auto; padding-top: 6px; }
 /* borderless count strip (settings 내 데이터) — flat counts, never a card-in-card */
 .countstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 24px; }
 .countstrip__item { display: flex; flex-direction: column; gap: 2px; }
@@ -379,6 +381,24 @@ h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
 .app-group__title { font-weight: 650; font-size: 15px; letter-spacing: -.01em; }
 .app-group__count { margin-left: auto; color: var(--text-tertiary); font-size: 13px; }
 
+/* applications row trailing — keep the right edge informative (never empty):
+   right-aligned score column, an optional D-day chip, then the status. The status
+   shows a calm badge at rest and swaps to the inline change-select on hover/focus
+   (display swap, not opacity, so the hidden control reserves no width). */
+.app-score { min-width: 42px; text-align: right; font-size: 13.5px; }
+.app-dday { color: var(--text-tertiary); }
+.app-dday--urgent { color: var(--amber); }
+.app-status { display: inline-flex; align-items: center; }
+.app-status .select { display: none; }
+.list-row:hover .app-status .badge,
+.list-row:focus-within .app-status .badge { display: none; }
+.list-row:hover .app-status .select,
+.list-row:focus-within .app-status .select { display: inline-flex; }
+@media (hover: none) {
+  .app-status .badge { display: none; }
+  .app-status .select { display: inline-flex; }
+}
+
 /* row-level action (e.g. status select) — hidden until the row is hovered or
    focused, so grouped lists stay calm. Always shown where hover isn't available. */
 .list-row .row-action { opacity: 0; pointer-events: none; transition: opacity .12s; }
@@ -467,6 +487,21 @@ h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
 @keyframes pop { from { transform: translate(-50%,-46%); opacity: 0; } to { transform: translate(-50%,-50%); opacity: 1; } }
 @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
 
+/* Dropdown menu (Menu/ExportMenu) — fixed popover anchored to its trigger so it
+   never clips inside a scrolling modal body. Sits above the modal layer (60). */
+.menu { position: relative; display: inline-flex; }
+.menu__trigger .menu__caret { width: 14px; height: 14px; margin-left: -2px; opacity: .55; transform: rotate(90deg); }
+.menu__list { position: fixed; z-index: 70; min-width: 176px; padding: 5px; display: flex; flex-direction: column; gap: 2px;
+  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); animation: fade .12s; }
+.menu__list[hidden] { display: none; }
+.menu__item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm);
+  background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
+.menu__item:hover, .menu__item:focus-visible { background: var(--surface-hover); outline: none; }
+.menu__item .icon { width: 15px; height: 15px; color: var(--text-tertiary); flex: none; }
+.menu__item-label { flex: 1; }
+.menu__item-hint { color: var(--text-tertiary); font-size: 11.5px; font-variant-numeric: tabular-nums; }
+.menu__item--danger { color: var(--red); }
+
 /* ----------------------------------------------------------------- toast */
 .toasts { position: fixed; bottom: 20px; right: 20px; z-index: 80; display: flex; flex-direction: column; gap: 10px; }
 .toast { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius);
@@ -542,3 +577,16 @@ h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
   .card__head .right{ margin-left: 0; width: 100%; justify-content: flex-start; }
   .page-head{ flex-wrap: wrap; }
 }
+
+/* ---------- reduced motion ----------
+   전정기관 민감 사용자를 위해 OS 설정을 존중한다: 모달·토스트·오프캔버스의
+   등장 애니메이션과 hover 트랜지션을 사실상 즉시(0.01ms)로 줄인다.
+   (스켈레톤 shimmer 포함 — 반복 애니메이션이 가장 부담이 크다.) */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}