feat(view): reflect 시안 ① main screen and ⑤ save dialog

- Header follows the mockup: dark bar, project line, stage chips (② shows the
  pending change count), save status, 저장 / 엑셀 불러오기 / 프로젝트 열기 and
  the primary 선택 교각 다시 생성 · 변경 n button.
- Left column: pier list with header row, 선택 n기 bulk bar, 입력값 and the
  2단계 input card. The bottom input panel is gone.
- First save opens 시안 ⑤ (project name, bridge, client, author, 좌표계, memo);
  later Ctrl+S / 저장 write the same file, as the spec's B5 requires.
- Project info (client, author, 좌표계, memo) is kept in the project file.
- Style layer uses the mockup's tokens (#18212B header, #1F5FA8 primary,
  #D5DBE2 borders, #E3EDF8 selected row, JetBrains Mono for numbers).
- Not reflected: ② and ③ screens (not built yet), and the mockup's static
  front preview (the app draws the model in 3D). Not verified in a browser.

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>

index.html

@@ -9,21 +9,22 @@
     <div class="app">
       <header class="top">
         <div class="brand">
-          <strong>교각 설계</strong>
-          <span id="project-line" class="muted">프로젝트 미지정</span>
+          <strong>Pierzainer</strong>
+          <span>교각 설계</span>
+          <span id="project-line" class="proj">프로젝트 미지정</span>
         </div>
         <nav class="steps" aria-label="단계">
           <span class="step current" aria-current="step">① 형상 생성 <em id="step1-status">미생성</em></span>
-          <span class="step" aria-disabled="true">② 형상계획 <em>예정</em></span>
+          <span class="step" aria-disabled="true">② 형상계획 <em id="step2-status">예정</em></span>
           <span class="step" aria-disabled="true">③ 철근배근 <em>예정</em></span>
         </nav>
         <div class="actions">
-          <button id="open-import" class="btn" type="button">엑셀 불러오기</button>
-          <button id="open-project" class="btn" type="button">프로젝트 열기</button>
-          <button id="save-project" class="btn" type="button" disabled>저장 (Ctrl+S)</button>
-          <button id="regen" class="btn primary" type="button" disabled>선택 교각 형상 생성</button>
+          <span id="save-status" class="savest">저장 전</span>
+          <button id="save-project" class="btn-s" type="button" disabled title="프로젝트 파일 저장 (Ctrl+S)">저장</button>
+          <button id="open-import" class="btn-s" type="button">엑셀 불러오기</button>
+          <button id="open-project" class="btn-s" type="button">프로젝트 열기</button>
+          <button id="regen" class="btn-p" type="button" disabled>선택 교각 형상 생성</button>
           <input id="project-file" type="file" accept=".json" hidden />
-          <span id="save-status" class="muted">저장 전</span>
         </div>
       </header>
 
@@ -36,15 +37,34 @@
 
       <main class="grid">
         <aside class="panel piers" aria-labelledby="pier-title">
-          <h2 id="pier-title">교각 목록</h2>
+          <p id="pier-title" class="lbl">교각 목록</p>
           <div class="pier-tools">
             <label>형식
               <select id="type-filter"></select>
             </label>
-            <button id="select-all" class="btn small" type="button">전체 선택</button>
+            <button id="select-all" class="lnk" type="button">전체 선택</button>
           </div>
+          <div class="phead" aria-hidden="true"><span></span><span>교각</span><span>상태</span></div>
           <ul id="pier-items" class="pier-items"></ul>
           <p id="pier-empty" class="muted">불러온 교각이 없습니다.</p>
+          <p class="pnote">시트 1장 = 교각 1기입니다. 오류가 난 교각만 건너뛰고 나머지는 생성합니다.</p>
+          <div class="bulk">
+            <b id="bulk-count">선택 0기</b>
+            <span class="grow"></span>
+            <button id="bulk-copy" class="btn-o" type="button" disabled title="2단계에서 구현">속성 복사…</button>
+            <button id="bulk-regen" class="btn-o" type="button" disabled>선택 교각 다시 생성</button>
+          </div>
+
+          <section class="pier-input" aria-labelledby="input-title">
+            <p id="input-title" class="lbl">입력값</p>
+            <dl id="inputs" class="kv wide"></dl>
+            <section class="edit-card" aria-labelledby="edit-title">
+              <h3 id="edit-title">코핑·말뚝 입력 수정</h3>
+              <div id="edit-fields"></div>
+              <p id="edit-summary" class="muted small"></p>
+              <button id="edit-regen" class="btn primary" type="button" disabled>다시 생성 · 변경 0</button>
+            </section>
+          </section>
         </aside>
 
         <section class="panel viewer" aria-labelledby="viewer-title">
@@ -86,16 +106,6 @@
         </aside>
       </main>
 
-      <section class="panel inputs" aria-labelledby="input-title">
-        <h2 id="input-title">입력값</h2>
-        <dl id="inputs" class="kv wide"></dl>
-        <section class="edit-card" aria-labelledby="edit-title">
-          <h3 id="edit-title">코핑·말뚝 입력 수정</h3>
-          <div id="edit-fields"></div>
-          <p id="edit-summary" class="muted small"></p>
-          <button id="edit-regen" class="btn primary" type="button" disabled>다시 생성 · 변경 0</button>
-        </section>
-      </section>
     </div>
 
     <dialog id="import-dialog" aria-labelledby="dlg-title">
@@ -187,6 +197,55 @@
       </footer>
     </dialog>
 
+    <dialog id="save-dialog" aria-labelledby="sv-title">
+      <header class="dlg-head">
+        <h2 id="sv-title">프로젝트 정보 · 저장</h2>
+        <button id="sv-close" class="btn small" type="button">닫기</button>
+      </header>
+      <div class="dlg-body">
+        <div class="dlg-col">
+          <section>
+            <h3>프로젝트 정보</h3>
+            <label class="field">프로젝트명 · 필수
+              <input id="sv-name" type="text" required />
+            </label>
+            <label class="field">교량명
+              <input id="sv-bridge" type="text" />
+            </label>
+            <label class="field">발주처
+              <input id="sv-client" type="text" />
+            </label>
+            <label class="field">작성자
+              <input id="sv-author" type="text" />
+            </label>
+            <label class="field">좌표계
+              <input id="sv-crs" type="text" value="국토좌표계 (x = 동, y = 북)" readonly />
+            </label>
+            <label class="field">메모
+              <textarea id="sv-memo" rows="3"></textarea>
+            </label>
+          </section>
+        </div>
+        <div class="dlg-col">
+          <section>
+            <h3>프로젝트 파일로 저장</h3>
+            <p>파일 이름 <code id="sv-file"></code></p>
+            <h4>파일에 담기는 내용</h4>
+            <ul class="rules">
+              <li>프로젝트 정보와 엑셀 입력값 (교각·IP·받침)</li>
+              <li>교각별 기본값과 현재 입력 (기본값 대비 변경 내역)</li>
+              <li>3D 형상은 담지 않고, 파일을 열 때 입력값으로 다시 생성합니다</li>
+            </ul>
+            <p class="muted small">처음 저장할 때만 이 창이 열립니다. 이후에는 헤더의 저장(Ctrl+S)이 같은 파일에 바로 저장합니다.</p>
+          </section>
+        </div>
+      </div>
+      <footer class="dlg-foot">
+        <button id="sv-cancel" class="btn" type="button">취소</button>
+        <button id="sv-save" class="btn primary" type="button">저장</button>
+      </footer>
+    </dialog>
+
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

src/main.ts

@@ -7,7 +7,7 @@ import { buildPier, type PierModel } from './core/geometry';
 import { NOT_IMPLEMENTED_RULES, validateInput, validatePier } from './core/validate';
 import { buildTemplateWorkbook } from './core/template';
 import { EDITABLE_FIELDS, overrideKeys, pendingKeys, revertDraft, type EditableKey, type PierValues } from './core/changes';
-import { parseProject, SCHEMA_VERSION, serializeProject, type ProjectFile } from './core/project';
+import { parseProject, SCHEMA_VERSION, serializeProject, type ProjectFile, type ProjectInfo } from './core/project';
 import { clearBackup, readBackup, writeBackup, type Backup } from './view/backup';
 import type { Issue, PierInput, PierType } from './core/types';
 import { buildPierScene, viewPosition, type PartName, type PierScene, type ViewKind } from './view/scene';
@@ -38,6 +38,7 @@ const VIEWS: { kind: ViewKind; label: string }[] = [
 ];
 
 const TYPES: PierType[] = ['T형', '2주형', '3주형'];
+const CRS = '국토좌표계 (x = 동, y = 북)';
 
 interface Pending {
   fileName: string;
@@ -52,7 +53,9 @@ const state = {
   view: 'iso' as ViewKind,
   visible: Object.fromEntries(PART_GROUPS.flatMap((g) => g.parts).map((p) => [p, true])) as Record<PartName, boolean>,
   scene: null as PierScene | null,
-  project: { name: '', bridge: '' },
+  project: { name: '', bridge: '', client: '', author: '', crs: CRS, memo: '' } as ProjectInfo,
+  /** True once the project has a file on disk (first save via 시안 ⑤, or an opened file). Later saves go straight to it. */
+  savedOnce: false,
   filter: 'all' as 'all' | PierType,
   pending: null as Pending | null,
   source: { fileName: '', sheets: [] as string[] },
@@ -256,9 +259,13 @@ function renderHeader(): void {
   $('step1-status').textContent = pier?.model ? '생성됨' : '미생성';
   renderSaveStatus();
   const total = pendingTotal();
+  const checked = state.piers.filter((p) => p.checked).length;
+  $('step2-status').textContent = total ? `변경 ${total}건 · 재생성 필요` : '예정';
   const regen = $<HTMLButtonElement>('regen');
-  regen.disabled = !state.piers.some((p) => p.checked);
+  regen.disabled = checked === 0;
   regen.textContent = total ? `선택 교각 다시 생성 · 변경 ${total}` : '선택 교각 형상 생성';
+  $('bulk-count').textContent = `선택 ${checked}기`;
+  $<HTMLButtonElement>('bulk-regen').disabled = checked === 0;
 }
 
 // --- results panel (시안 ① 입력값 · 계산 결과) ----------------------------------------
@@ -461,7 +468,7 @@ function isDirty(): boolean {
 function currentProjectText(): string {
   return serializeProject({
     schemaVersion: SCHEMA_VERSION,
-    project: { name: state.project.name, bridge: state.project.bridge, client: '', author: '', crs: '', memo: '' },
+    project: { ...state.project },
     source: state.source,
     piers: state.piers.map((p) => ({ id: p.input.name, input: p.input, defaults: p.defaults, draft: p.draft })),
     history: state.history,
@@ -481,11 +488,55 @@ function renderSaveStatus(): void {
   }
 }
 
+/** 저장 button and Ctrl+S: the first save opens the project dialog (시안 ⑤); later saves write the same file. */
 function saveProject(): void {
   if (state.piers.length === 0) return;
+  if (!state.savedOnce) {
+    openSaveDialog();
+    return;
+  }
+  writeProjectFile();
+}
+
+function projectFileName(): string {
+  return `${state.project.bridge || state.project.name || '교각설계'}_교각설계.pzr.json`;
+}
+
+function openSaveDialog(): void {
+  $<HTMLInputElement>('sv-name').value = state.project.name;
+  $<HTMLInputElement>('sv-bridge').value = state.project.bridge;
+  $<HTMLInputElement>('sv-client').value = state.project.client;
+  $<HTMLInputElement>('sv-author').value = state.project.author;
+  $<HTMLTextAreaElement>('sv-memo').value = state.project.memo;
+  $('sv-file').textContent = projectFileName();
+  $<HTMLDialogElement>('save-dialog').showModal();
+  $<HTMLInputElement>('sv-name').focus();
+}
+
+function confirmSaveDialog(): void {
+  const name = $<HTMLInputElement>('sv-name').value.trim();
+  if (!name) {
+    $<HTMLInputElement>('sv-name').focus();
+    setStatus('프로젝트명을 입력하세요.');
+    return;
+  }
+  state.project = {
+    name,
+    bridge: $<HTMLInputElement>('sv-bridge').value.trim(),
+    client: $<HTMLInputElement>('sv-client').value.trim(),
+    author: $<HTMLInputElement>('sv-author').value.trim(),
+    crs: CRS,
+    memo: $<HTMLTextAreaElement>('sv-memo').value.trim(),
+  };
+  $<HTMLDialogElement>('save-dialog').close();
+  writeProjectFile();
+}
+
+function writeProjectFile(): void {
+  state.savedOnce = true;
   state.history = [...state.history, { version: String(state.history.length + 1), note: '저장', at: new Date().toISOString() }];
   const text = currentProjectText();
-  const name = `${state.project.bridge || state.project.name || '교각설계'}_교각설계.pzr.json`;
+  const name = projectFileName();
   const url = URL.createObjectURL(new Blob([text], { type: 'application/json' }));
   const link = document.createElement('a');
   link.href = url;
@@ -501,7 +552,7 @@ function saveProject(): void {
 /** Opens a project from its text. A backup stays unsaved until the user saves it. */
 function openProjectText(text: string, saved: boolean): void {
   const parsed = parseProject(text);
-  state.project = { name: parsed.project.name, bridge: parsed.project.bridge };
+  state.project = { ...parsed.project };
   state.source = parsed.source;
   state.history = parsed.history;
   state.piers = parsed.piers.map((p) => ({
@@ -520,6 +571,7 @@ function openProjectText(text: string, saved: boolean): void {
 async function openProjectFile(file: File): Promise<void> {
   try {
     openProjectText(await file.text(), true);
+    state.savedOnce = true;
     clearBackup().catch(() => undefined);
     setStatus(`${file.name}을 열었습니다. ${state.piers.length}기를 원본 엑셀 없이 다시 생성했습니다.`);
   } catch (err) {
@@ -680,7 +732,7 @@ function applyImport(): void {
   const p = state.pending;
   const name = $<HTMLInputElement>('project-name').value.trim();
   if (!p || !name) return;
-  state.project = { name, bridge: $<HTMLInputElement>('bridge-name').value.trim() };
+  state.project = { ...state.project, name, bridge: $<HTMLInputElement>('bridge-name').value.trim() };
   state.piers = p.entries.filter((e) => e.checked && selectable(p, e));
   state.active = state.piers[0]?.input.name ?? null;
   state.filter = 'all';
@@ -688,6 +740,7 @@ function applyImport(): void {
   state.source = { fileName: p.fileName, sheets: p.sheets.map((sheet) => sheet.name) };
   state.history = [];
   state.savedSnapshot = null;
+  state.savedOnce = false;
   $<HTMLDialogElement>('import-dialog').close();
   setupScene();
   renderAll();
@@ -727,6 +780,10 @@ $<HTMLButtonElement>('dlg-close').addEventListener('click', () => $<HTMLDialogEl
 $<HTMLButtonElement>('dlg-cancel').addEventListener('click', () => $<HTMLDialogElement>('import-dialog').close());
 $<HTMLButtonElement>('dlg-apply').addEventListener('click', applyImport);
 $<HTMLButtonElement>('regen').addEventListener('click', regenerateChecked);
+$<HTMLButtonElement>('bulk-regen').addEventListener('click', regenerateChecked);
+$<HTMLButtonElement>('sv-save').addEventListener('click', confirmSaveDialog);
+$<HTMLButtonElement>('sv-cancel').addEventListener('click', () => $<HTMLDialogElement>('save-dialog').close());
+$<HTMLButtonElement>('sv-close').addEventListener('click', () => $<HTMLDialogElement>('save-dialog').close());
 $<HTMLButtonElement>('edit-regen').addEventListener('click', () => {
   const pier = activePier();
   if (pier) regenerateOne(pier.input.name);

src/style.css

@@ -595,3 +595,53 @@ table {
 .edit-row input { width: 110px; padding: 4px 6px; border: 1px solid #b9c4d0; border-radius: 4px; }
 .edit-row.changed input { border: 2px solid #e8833a; background: #fff6ee; }
 .edit-row.changed label { color: #a4530e; }
+
+/* ---- 시안 ① 디자인 반영 (RAG/Pierzainer UI 시안 (1).html) ---- */
+body { background: #eef1f4; font-family: 'Noto Sans KR', system-ui, sans-serif; }
+.top { background: #18212b; color: #ffffff; padding: 10px 24px; }
+.top .brand strong { font-size: 18px; letter-spacing: 0.01em; }
+.top .brand > span:not(.proj) { font-size: 12px; color: #b8c2ce; }
+.proj { padding-left: 14px; border-left: 1px solid #33404f; color: #ffffff; font-size: 13px; font-weight: 700; }
+.steps .step { color: #dce3ea; min-height: 44px; padding: 4px 14px; border-radius: 6px; background: transparent; border: 0; }
+.steps .step.current { background: #ffffff; color: #18212b; }
+.steps .step em { font-style: normal; color: #b8c2ce; font-size: 12px; }
+.steps .step.current em { color: #55606e; }
+.steps .step[aria-disabled='true'] em { color: #b8c2ce; }
+.savest { color: #f2c48d; font-size: 12px; }
+.actions { color: #ffffff; }
+.btn-s, .btn-p, .btn-o { display: inline-flex; align-items: center; font-family: inherit; font-size: 13px; min-height: 44px; border-radius: 6px; cursor: pointer; box-sizing: border-box; text-decoration: none; }
+.btn-s { padding: 0 14px; border: 1px solid #8c99a8; background: transparent; color: #ffffff; }
+.btn-s:hover { border-color: #c3cbd4; }
+.btn-s:disabled { opacity: 0.45; cursor: default; }
+.btn-p { padding: 0 16px; border: 0; background: #1f5fa8; color: #ffffff; font-weight: 700; font-size: 14px; }
+.btn-p:hover:not(:disabled) { background: #174c88; }
+.btn-p:disabled { opacity: 0.45; cursor: default; }
+.btn-o { padding: 0 12px; min-height: 40px; border: 1px solid #1f5fa8; background: #ffffff; color: #1f5fa8; }
+.btn-o:hover:not(:disabled) { background: #f2f7fc; color: #123e70; }
+.btn-o:disabled { opacity: 0.45; cursor: default; }
+.lnk { font-size: 12px; color: #1f5fa8; background: none; border: 0; min-height: 36px; padding: 0 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
+.lbl { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: #55606e; margin: 0 0 8px; }
+.panel { background: #ffffff; border: 1px solid #d5dbe2; border-radius: 8px; padding: 16px; }
+.piers { display: flex; flex-direction: column; gap: 6px; }
+.pier-tools { display: flex; align-items: center; gap: 8px; padding: 0 4px 8px; }
+.pier-tools select { border: 1px solid #c3cbd4; border-radius: 6px; background: #ffffff; min-height: 36px; }
+.phead { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; padding: 0 10px 6px; font-size: 12px; color: #55606e; border-bottom: 1px solid #d5dbe2; }
+.pier-items li { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 8px; border-radius: 6px; padding-right: 6px; }
+.pier-items li:has(.pier-name[aria-pressed='true']) { background: #e3edf8; }
+.pier-name { border: 0; background: transparent; color: #18212b; text-align: left; font-size: 13px; min-height: 44px; padding: 0 6px; }
+.pier-name[aria-pressed='true'] { color: #123e70; font-weight: 700; }
+.badge { font-size: 12px; border-radius: 10px; padding: 2px 8px; background: #e2f2e7; color: #1d6b3a; white-space: nowrap; }
+.badge.error { background: #fde2e2; color: #9b2c2c; }
+.pnote { font-size: 12px; color: #55606e; margin: 8px 4px 0; line-height: 1.6; }
+.bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: #f2f7fc; font-size: 13px; color: #123e70; }
+.bulk .grow { flex: 1 1 auto; }
+.pier-input { margin-top: 14px; border-top: 1px solid #d5dbe2; padding-top: 12px; }
+.kv div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #e6eaef; font-size: 13px; }
+.kv dt { color: #55606e; }
+.kv dd { margin: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; text-align: right; }
+.views { display: flex; gap: 2px; background: #eef1f4; border-radius: 6px; padding: 2px; }
+.views .btn { min-height: 40px; padding: 0 14px; border: 0; border-radius: 4px; background: transparent; color: #18212b; }
+.views .btn[aria-pressed='true'] { background: #1f5fa8; color: #ffffff; font-weight: 700; }
+.viewer-head { gap: 8px; }
+.edit-card h3 { font-size: 12px; color: #55606e; }
+