Update Pier_v1 project

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

랜딩페이지/landing-page.ts

@@ -3,6 +3,7 @@ import { createHeroMotion, heroMotionMarkup } from './landing-motion';
 import './landing-white.css';
 import { sampleProjects } from './sample-projects';
 import { parseProject } from '../src/core/project';
+import { createDrawingPopup, drawingPopupMarkup } from './drawing-popup';
 
 const appRoot = document.querySelector<HTMLDivElement>('.app');
 const homeButton = document.querySelector<HTMLButtonElement>('#home-from-app');
@@ -71,11 +72,11 @@ const landingPanelMarkup = `
           <div class="landing-card-top"><div class="landing-card-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h16v16H4zM4 9h7v11M11 4v5h9M15 13h2v3h-2M7 13v3"/></svg></div><span class="landing-card-number">02 / EXTRACT</span></div>
           <span class="landing-card-eyebrow">Drawing Import</span>
           <h3>도면 불러오기</h3>
-          <p>종평면도와 받침배치도, 고저 근거도를 선택합니다.</p>
+          <p>도면 폴더에서 교각 정보를 추출하고 결과 Excel을 바로 불러옵니다.</p>
         </div>
         <div class="landing-card-actions">
-          <span class="landing-card-note">개발 중</span>
-          <button class="landing-primary" type="button">설계도면 불러오기</button>
+          <span class="landing-card-note" id="landing-drawing-status" role="status" aria-live="polite">프로그램 안에서 도면 추출</span>
+          <button class="landing-primary" type="button">도면 불러오기</button>
         </div>
       </article>
 
@@ -116,50 +117,7 @@ const landingPanelMarkup = `
       </div>
     </section>
 
-    <section id="landing-drawing-panel" class="landing-panel" aria-label="도면 입력 패널">
-      <div class="landing-panel-head">
-        <h3>도면 입력</h3>
-        <button type="button" class="landing-close-button" data-close-panel="landing-drawing-panel">닫기</button>
-      </div>
-      <div class="landing-panel-body">
-        <div class="landing-sheet-list">
-          <div class="landing-sheet">
-            <div>
-              <h4>종평면도</h4>
-              <p>CAD 도면 또는 이미지 파일을 불러옵니다.</p>
-            </div>
-            <div class="landing-file-name" id="landing-drawing-longitudinal-name">미선택</div>
-            <input id="landing-drawing-longitudinal-input" type="file" accept=".dwg,.dxf,.pdf,.png,.jpg,.jpeg" hidden />
-            <button type="button" class="landing-ghost" data-pick-file="drawing-longitudinal">종평면도 불러오기</button>
-          </div>
-
-          <div class="landing-sheet">
-            <div>
-              <h4>교량받침배치도</h4>
-              <p>받침 배치 제원을 확인할 설계도면입니다.</p>
-            </div>
-            <div class="landing-file-name" id="landing-drawing-bearing-name">미선택</div>
-            <input id="landing-drawing-bearing-input" type="file" accept=".dwg,.dxf,.pdf,.png,.jpg,.jpeg" hidden />
-            <button type="button" class="landing-ghost" data-pick-file="drawing-bearing">교량받침배치도 불러오기</button>
-          </div>
-
-          <div class="landing-sheet">
-            <div>
-              <h4>ELEVATION 산출근거도</h4>
-              <p>고저 및 해석 기준이 되는 근거도를 선택합니다.</p>
-            </div>
-            <div class="landing-file-name" id="landing-drawing-elevation-name">미선택</div>
-            <input id="landing-drawing-elevation-input" type="file" accept=".dwg,.dxf,.pdf,.png,.jpg,.jpeg" hidden />
-            <button type="button" class="landing-ghost" data-pick-file="drawing-elevation">ELEVATION 산출근거도 불러오기</button>
-          </div>
-        </div>
-
-        <div class="landing-actions-row">
-          <button type="button" class="landing-ghost" data-close-panel="landing-drawing-panel">취소</button>
-          <button id="landing-drawing-start" class="landing-primary" type="button" disabled>도면 분석 시작</button>
-        </div>
-      </div>
-    </section>
+    ${drawingPopupMarkup}
 
     <section id="landing-sample-panel" class="landing-panel" aria-label="샘플 모델 패널">
       <div class="landing-panel-head">
@@ -282,10 +240,6 @@ const bindCard = (cardSelector: string, panelId: string, mode: 'panel' | 'picker
         if (projectName) projectName.focus();
         return;
       }
-      if (cardSelector === '[data-card="drawing"]') {
-        window.openDrawingFlow?.();
-        return;
-      }
       if (cardSelector === '[data-card="sample"]') {
         void window.openSampleProject?.();
         return;
@@ -296,9 +250,15 @@ const bindCard = (cardSelector: string, panelId: string, mode: 'panel' | 'picker
 };
 
 bindCard('[data-card="excel"]', 'landing-excel-panel', 'picker');
-bindCard('[data-card="drawing"]', 'landing-drawing-panel');
 bindCard('[data-card="sample"]', 'landing-sample-panel');
 
+const drawingPopup = createDrawingPopup(landingOverlay, () => {
+  landingGuide.dismissHint();
+  landingGuide.close(false);
+  closePanels();
+});
+document.querySelector<HTMLButtonElement>('[data-card="drawing"] button')!.addEventListener('click', () => drawingPopup.open());
+
 document.querySelectorAll<HTMLElement>('[data-close-panel]').forEach((button) => {
   button.addEventListener('click', () => {
     const panelId = button.getAttribute('data-close-panel');
@@ -314,9 +274,6 @@ document.querySelectorAll<HTMLButtonElement>('[data-pick-file]').forEach((button
 
   const targetMap: Record<string, string> = {
     excel: 'landing-excel-input',
-    'drawing-longitudinal': 'landing-drawing-longitudinal-input',
-    'drawing-bearing': 'landing-drawing-bearing-input',
-    'drawing-elevation': 'landing-drawing-elevation-input',
   };
 
   const targetId = targetMap[kind];
@@ -328,33 +285,6 @@ document.querySelectorAll<HTMLButtonElement>('[data-pick-file]').forEach((button
 });
 
 bindFilePicker(document.querySelector('[data-pick-file="excel"]') as HTMLButtonElement, 'landing-excel-input', 'landing-excel-name');
-bindFilePicker(document.querySelector('[data-pick-file="drawing-longitudinal"]') as HTMLButtonElement, 'landing-drawing-longitudinal-input', 'landing-drawing-longitudinal-name');
-bindFilePicker(document.querySelector('[data-pick-file="drawing-bearing"]') as HTMLButtonElement, 'landing-drawing-bearing-input', 'landing-drawing-bearing-name');
-bindFilePicker(document.querySelector('[data-pick-file="drawing-elevation"]') as HTMLButtonElement, 'landing-drawing-elevation-input', 'landing-drawing-elevation-name');
-
-const drawingInputs = [
-  document.querySelector<HTMLInputElement>('#landing-drawing-longitudinal-input'),
-  document.querySelector<HTMLInputElement>('#landing-drawing-bearing-input'),
-  document.querySelector<HTMLInputElement>('#landing-drawing-elevation-input'),
-];
-const drawingStart = document.querySelector<HTMLButtonElement>('#landing-drawing-start');
-
-const refreshDrawingSelection = (): void => {
-  const ready = drawingInputs.every((input) => !!input?.files?.length);
-  if (drawingStart) drawingStart.disabled = !ready;
-};
-
-drawingInputs.forEach((input) => {
-  input?.addEventListener('change', refreshDrawingSelection);
-});
-
-if (drawingStart) {
-  drawingStart.addEventListener('click', () => {
-    if (drawingInputs.every((input) => !!input?.files?.length)) {
-      showApp();
-    }
-  });
-}
 
 const sampleGrid = document.querySelector<HTMLElement>('#landing-sample-grid');
 let sampleLoading = false;