+
+ );
+}
diff --git a/app/admin/quotes/[id]/page.tsx b/app/admin/quotes/[id]/page.tsx
new file mode 100644
index 0000000..777478e
--- /dev/null
+++ b/app/admin/quotes/[id]/page.tsx
@@ -0,0 +1,510 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import Link from 'next/link';
+
+/* ─── 타입 ─────────────────────────────────────────────── */
+interface WBSTask { id: string; name: string; duration: string; description: string; }
+interface WBSPhase { id: string; phase: string; tasks: WBSTask[]; }
+interface QuoteItem {
+ id: string; category: string; name: string; description: string;
+ quantity: number; unitPrice: number; optional: boolean;
+}
+interface MaintenancePlan {
+ id: string; name: string; period: string; monthlyFee: number;
+ includes: string[]; recommended: boolean;
+}
+interface QuoteForm {
+ title: string; client_name: string; client_email: string;
+ valid_until: string; status: string;
+ wbs: WBSPhase[]; items: QuoteItem[]; maintenance: MaintenancePlan[]; notes: string;
+}
+
+const newId = () => Math.random().toString(36).slice(2, 9);
+
+const STATUS_OPTIONS = [
+ { value: 'draft', label: '초안' },
+ { value: 'sent', label: '발송됨' },
+ { value: 'accepted', label: '수락됨' },
+ { value: 'rejected', label: '거절됨' },
+];
+
+const ITEM_CATEGORIES = ['기획', '디자인', '개발', '인프라', '유지보수', '기타'];
+
+const TABS = ['기본정보', 'WBS', '견적항목', '향후관리', '특이사항'] as const;
+type Tab = typeof TABS[number];
+
+/* ─── 컴포넌트 ─────────────────────────────────────────── */
+export default function QuoteEditorPage() {
+ const params = useParams();
+ const router = useRouter();
+ const id = params.id as string;
+
+ const [tab, setTab] = useState
+
+
+ {/* 안내 */}
+
+
+
+ ← 대시보드
+
+ 마케팅 에셋
+크몽/숨고 등록용 썸네일 및 배너 — SVG 파일 다운로드 가능
+
+ ℹ️
+
+
+ {/* 그리드 */}
+
+
+ SVG → PNG 변환 방법
+브라우저에서 파일 열기 → 우클릭 → "이미지 다른 이름으로 저장" (PNG), 또는 Figma에 SVG 드래그 후 PNG Export를 추천합니다. 크몽은 JPG/PNG만 허용합니다.
+
+ {ASSETS.map((asset) => (
+
+
+ {/* 크게 보기 모달 */}
+ {preview && (
+
+ {/* 미리보기 */}
+
+
+ {/* 정보 */}
+
+ ))}
+
+
+
+
+
+
+
+ {asset.platform}
+
+ {asset.name}
+{asset.desc}
+{asset.size}px
+ +
+
+
+
+ setPreview(null)}
+ >
+
+ )}
+ e.stopPropagation()}>
+ 
+
+
+
+
+
+ {preview.name}
+{preview.size}px · {preview.desc}
+
+
+
+
+ 불러오는 중...
;
+ }
+
+ return (
+
+ {/* 상단 바 */}
+
+
+
+ {/* 탭 */}
+
+
+
+
+
+
+
+
+ {form.title || '견적서 편집'}
+{form.client_name || '고객 미지정'} · 합계 {totalPrice.toLocaleString()}원
+
+ {/* 공개 링크 */}
+ {publicToken && (
+
+ )}
+ {/* 미리보기 */}
+ {publicToken && (
+
+
+ 미리보기
+
+ )}
+ {/* 저장 */}
+
+
+
+
+
+ {/* 콘텐츠 */}
+
+ {TABS.map((t) => (
+
+ ))}
+
+
+
+ {/* ── 기본정보 ── */}
+ {tab === '기본정보' && (
+
+
+ )}
+
+ {/* ── WBS ── */}
+ {tab === 'WBS' && (
+
+
+ setField('title', e.target.value)} placeholder="예: 쇼핑몰 개발 견적서 v1.0" />
+
+
+
+ {/* 요약 카드 */}
+
+
+ setField('client_name', e.target.value)} placeholder="홍길동" />
+
+
+ setField('client_email', e.target.value)} placeholder="client@example.com" />
+
+
+
+
+ setField('valid_until', e.target.value)} />
+
+
+
+
+
+
+
+ 견적 요약
+
+
+
+
+ {form.items.length}
+ 총 항목
+
+
+ {form.items.filter(i => !i.optional).length}
+ 필수 항목
+
+
+ {form.items.filter(i => i.optional).length}
+ 선택 항목
+
+ 총 견적 금액
+ {totalPrice.toLocaleString()}원
+
+
+
+ )}
+
+ {/* ── 견적항목 ── */}
+ {tab === '견적항목' && (
+
+
+ {form.wbs.length === 0 && (
+ 작업 분류 체계(WBS)를 단계별로 작성합니다
+ +
+
+ ))}
+
+ {pi + 1}
+ updatePhase(phase.id, 'phase', e.target.value)}
+ placeholder="단계명 (예: 기획, 디자인, 개발)"
+ />
+
+
+
+ {phase.tasks.length > 0 && (
+
+ {phase.tasks.map((task) => (
+
+ )}
+ {phase.tasks.length === 0 && (
+
+
+ ))}
+
+ updateTask(phase.id, task.id, 'name', e.target.value)} placeholder="작업명" />
+
+
+ updateTask(phase.id, task.id, 'duration', e.target.value)} placeholder="기간 (예: 3일)" />
+
+
+ updateTask(phase.id, task.id, 'description', e.target.value)} placeholder="작업 설명" />
+
+
+
+
+ 작업 없음 — 위 버튼으로 추가하세요
+ )} +
+
+ )}
+
+ {/* ── 향후관리 ── */}
+ {tab === '향후관리' && (
+
+
+
+ {/* 헤더 */}
+ {form.items.length > 0 && (
+ 선택 항목(optional)은 고객이 직접 선택/해제할 수 있습니다
+ +
+
+ )}
+
+ {form.items.length === 0 && 카테고리
+ 항목명
+ 설명
+ 수량
+ 단가
+ 선택
+
+
+
+ ))}
+
+ {/* 합계 */}
+ {form.items.length > 0 && (
+
+
+
+
+ updateItem(item.id, 'name', e.target.value)} placeholder="항목명" />
+
+
+ updateItem(item.id, 'description', e.target.value)} placeholder="상세 설명" />
+
+
+ updateItem(item.id, 'quantity', Number(e.target.value))} />
+
+
+ updateItem(item.id, 'unitPrice', Number(e.target.value))} />
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+ 필수 합계
+ {form.items.filter(i => !i.optional).reduce((s, i) => s + i.unitPrice * i.quantity, 0).toLocaleString()}원
+
+
+ 선택 합계
+ {form.items.filter(i => i.optional).reduce((s, i) => s + i.unitPrice * i.quantity, 0).toLocaleString()}원
+
+
+ 전체 합계
+ {totalPrice.toLocaleString()}원
+
+
+
+ )}
+
+ {/* ── 특이사항 ── */}
+ {tab === '특이사항' && (
+
+
+ {form.maintenance.length === 0 && 납품 후 유지보수 플랜을 구성합니다 (고객이 하나를 선택)
+ +
+
+ ))}
+
+
+
+
+
+ updatePlan(plan.id, 'name', e.target.value)} placeholder="기본 유지보수" />
+
+
+ updatePlan(plan.id, 'period', e.target.value)} placeholder="3개월" />
+
+
+ updatePlan(plan.id, 'monthlyFee', Number(e.target.value))} />
+
+
+
+ 추천
+
+
+
+
+
+
+ 포함 사항
+
+
+
+ {plan.includes.map((inc, idx) => (
+
+
+ updatePlanInclude(plan.id, idx, e.target.value)} placeholder="포함 사항 입력" />
+
+
+ ))}
+
+
+