feat(landing): 거래처 관점 4단계 프로세스로 정리 (매입/입고는 어드민 전용)

랜딩 페이지에서 매입/입고 단계를 제외하고 거래처 관점만 표시:
1. 품목 검색 + 출고 요청 (재고 0은 비활성)  → 상태: 출고 요청
2. 출고 처리 (담당자 승인 + 메일+엑셀 발송)  → 상태: 출고 완료
3. 입금 확인 (담당자 등록)                     → 상태: 입금 완료
4. 월말 계산서 발행 (일괄)                     → 상태: 계산서 발행 완료 (최종)

- 각 단계 카드에 담당자(거래처/모모) 명시
- 상태 전이 라벨을 카드 하단에 highlight 박스로 표기
- 사이드바는 이미 정상 (USER에 매입/입고 메뉴 미노출)

src/app/page.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { ArrowRight, Package, FileSpreadsheet, Mail, BarChart3, Smartphone, ShieldCheck, UserPlus, Search, ShoppingCart, CheckCircle2, Truck, Receipt } from "lucide-react";
+import { ArrowRight, Package, FileSpreadsheet, Mail, BarChart3, Smartphone, ShieldCheck, UserPlus, Search, ShoppingCart, CheckCircle2, Receipt, ClipboardList } from "lucide-react";
 
 export const metadata = {
   title: "모모유통 — 유통관리 시스템",
@@ -82,63 +82,87 @@ export default function LandingPage() {
         </div>
       </section>
 
-      {/* 전체 업무 흐름 — 모모유통 시점 */}
+      {/* 전체 업무 흐름 — 거래처(구매자) 관점 4단계 */}
       <section className="bg-slate-50 border-y border-slate-200">
         <div className="max-w-6xl mx-auto px-6 py-16">
           <div className="text-center mb-10">
             <div className="inline-flex items-center gap-2 text-emerald-700 text-xs font-bold tracking-widest mb-3">
-              <span className="w-6 h-[2px] bg-emerald-600" /> WORKFLOW
+              <span className="w-6 h-[2px] bg-emerald-600" /> WORKFLOW · 거래처 관점
             </div>
-            <h2 className="text-3xl md:text-4xl font-bold mb-3">전체 업무 흐름</h2>
-            <p className="text-slate-500">매입(도매처) → 입고(창고) → 출고(거래처) → 입금 → 계산서까지 단계별로 추적</p>
+            <h2 className="text-3xl md:text-4xl font-bold mb-3">출고 요청부터 계산서까지 4단계</h2>
+            <p className="text-slate-500">출고 요청 → 출고 완료(메일 발송) → 입금 완료 → 계산서 발행 완료</p>
           </div>
-          <div className="grid grid-cols-1 md:grid-cols-5 gap-3">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
             {[
-              { n: "1", t: "매입 발주", s: "모모 → 도매처", c: "from-amber-500 to-orange-600" },
-              { n: "2", t: "입고 처리", s: "정상/불량 분리, 재고 +", c: "from-orange-500 to-rose-500" },
-              { n: "3", t: "출고 요청 → 승인", s: "거래처 → 모모, 메일발송", c: "from-rose-500 to-pink-500" },
-              { n: "4", t: "입금 등록", s: "거래처 → 모모", c: "from-pink-500 to-violet-500" },
-              { n: "5", t: "계산서 발행", s: "월말 일괄", c: "from-violet-500 to-emerald-500" },
+              {
+                n: "1", t: "품목 검색 + 출고 요청", who: "거래처가 작성",
+                desc: "재고가 있는 품목만 활성화(재고 0은 비활성). 수량 입력 후 출고 요청 작성.",
+                c: "from-amber-500 to-orange-600",
+                state: "상태: 출고 요청",
+              },
+              {
+                n: "2", t: "출고 처리", who: "모모 출고 담당자 승인",
+                desc: "담당자가 요청 확인 후 출고. 가입 이메일로 거래명세표(엑셀 첨부) 자동 발송.",
+                c: "from-orange-500 to-rose-500",
+                state: "상태: 출고 완료",
+              },
+              {
+                n: "3", t: "입금 확인", who: "모모 담당자 등록",
+                desc: "거래처 입금 확인 후 담당자가 입금 등록. 완납 시 자동으로 상태 변경.",
+                c: "from-rose-500 to-pink-500",
+                state: "상태: 입금 완료",
+              },
+              {
+                n: "4", t: "계산서 발행", who: "월말 일괄",
+                desc: "월말 결산 시 미발행 건을 일괄 선택해 계산서 발행. 최종 완료.",
+                c: "from-pink-500 to-violet-500",
+                state: "상태: 계산서 발행 완료 (최종)",
+              },
             ].map((x) => (
               <div key={x.n} className="rounded-2xl bg-white border border-slate-200 p-5 shadow-sm relative">
                 <div className={`absolute -top-3 left-5 w-7 h-7 rounded-full bg-gradient-to-br ${x.c} text-white font-bold flex items-center justify-center text-sm shadow`}>{x.n}</div>
-                <h3 className="font-bold mt-3 mb-1 text-sm">{x.t}</h3>
-                <p className="text-xs text-slate-500">{x.s}</p>
+                <h3 className="font-bold mt-3 mb-1 text-sm leading-tight">{x.t}</h3>
+                <div className="text-[11px] text-emerald-700 font-semibold mb-1.5">{x.who}</div>
+                <p className="text-xs text-slate-600 leading-relaxed mb-2">{x.desc}</p>
+                <div className="text-[10px] font-bold text-slate-500 bg-slate-100 px-2 py-0.5 rounded inline-block">{x.state}</div>
               </div>
             ))}
           </div>
         </div>
       </section>
 
-      {/* 사용 방법 (거래처 6단계) */}
+      {/* 사용 방법 (거래처 4단계 — 회원가입 + 4단계 흐름) */}
       <section className="max-w-6xl mx-auto px-6 py-20">
         <div className="text-center mb-14">
           <div className="inline-flex items-center gap-2 text-emerald-700 text-xs font-bold tracking-widest mb-3">
             <span className="w-6 h-[2px] bg-emerald-600" />
-            HOW IT WORKS · 거래처 사용법
+            HOW IT WORKS · 거래처 상세
           </div>
-          <h2 className="text-3xl md:text-4xl font-bold mb-3">가입부터 입금 확인까지</h2>
-          <p className="text-slate-500">엑셀 시트 여러 개를 띄울 필요 없습니다. 한 화면에서 모두 처리됩니다.</p>
+          <h2 className="text-3xl md:text-4xl font-bold mb-3">가입부터 계산서 발행 완료까지</h2>
+          <p className="text-slate-500">거래처는 출고 요청만 하시면 됩니다. 출고·입금·계산서는 모모유통 담당자가 처리합니다.</p>
         </div>
 
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
-          <StepCard num="1" icon={<UserPlus size={20} />} title="회원가입"
-            desc="우측 상단 [회원가입] 버튼 클릭 → 이메일·업체명·비밀번호 입력. 사업자번호와 대표자명은 거래명세서에 표시되니 미리 등록해 두세요."
+          <StepCard num="0" icon={<UserPlus size={20} />} title="회원가입 (1회)"
+            desc="우측 상단 [회원가입] 버튼 → 이메일·업체명·비밀번호 입력. 사업자등록번호·대표자명도 등록해 두면 거래명세서에 자동 표시됩니다."
           />
-          <StepCard num="2" icon={<Search size={20} />} title="품목 검색"
-            desc="로그인 후 [품목 검색]에서 사진과 함께 품목을 둘러봅니다. 현재 재고가 0인 품목은 자동으로 비활성화됩니다. 면세 품목(M○○)은 보라색 뱃지로 구분됩니다."
+          <StepCard num="1" icon={<Search size={20} />} title="품목 검색 + 출고 요청"
+            desc="[품목 검색]에서 사진과 단가를 보고 담습니다. 재고가 0인 품목은 비활성화되어 잘못 발주할 수 없습니다. 면세(M품목)는 보라 뱃지로 구분, 면세/과세 합계가 실시간 계산됩니다. [출고 요청] 버튼으로 즉시 모모에 전송."
           />
-          <StepCard num="3" icon={<ShoppingCart size={20} />} title="장바구니 → 발주"
-            desc="[+ 담기]로 수량을 조정합니다. 우측 장바구니에 면세/과세 합계가 실시간 계산됩니다. [발주 요청] 버튼으로 모모유통에 발주서가 즉시 전송됩니다."
+          <StepCard num="2" icon={<Mail size={20} />} title="출고 처리 (담당자 승인)"
+            desc="모모 담당자가 [출고 관리]에서 요청을 확인 후 [승인]. 그 즉시 재고가 차감되고, 가입 이메일로 거래명세표 메일이 자동 발송됩니다 (엑셀 .xlsx 첨부)."
+            highlight="상태: 출고 요청 → 출고 완료"
           />
-          <StepCard num="4" icon={<CheckCircle2 size={20} />} title="승인 대기"
-            desc="모모유통 담당자가 [발주서 관리]에서 검토합니다. 재고 부족 시 자동 차단되어 잘못된 출고가 방지됩니다."
+          <StepCard num="3" icon={<CheckCircle2 size={20} />} title="입금 확인"
+            desc="거래처가 입금하면 모모 담당자가 [입금 관리]에서 입금 등록. 부분 입금도 가능하고, 완납 시 자동으로 상태가 변경됩니다."
+            highlight="상태: 출고 완료 → 입금 완료"
           />
-          <StepCard num="5" icon={<Mail size={20} />} title="승인 + 메일 도착"
-            desc="담당자 [승인] 클릭 → 재고 차감 + 가입 이메일로 거래명세표 메일이 즉시 발송됩니다. 본문에 명세 표가 들어 있고, 엑셀(.xlsx) 파일이 첨부됩니다."
+          <StepCard num="4" icon={<Receipt size={20} />} title="월말 계산서 발행"
+            desc="월말 결산 시 미발행 건을 [계산서 발행]에서 체크박스 멀티 선택하여 일괄 발행. 계산서 번호 자동 채번."
+            highlight="상태: 입금 완료 → 계산서 발행 완료 (최종)"
           />
-          <StepCard num="6" icon={<Truck size={20} />} title="출고·계산서·정산"
-            desc="배송 완료 후 [출고완료]로 상태가 바뀌고, 월말에 [계산서 발행]이 일괄 처리됩니다. 입금 확인까지 한 화면에서 추적 가능합니다."
+          <StepCard num="✓" icon={<ClipboardList size={20} />} title="이력 추적"
+            desc="거래처는 [내 출고 이력]에서 본인 발주 내역을, 모모는 통계 메뉴에서 일자별·월별·업체별·품목별·마진까지 한눈에."
           />
         </div>
       </section>
@@ -298,7 +322,7 @@ function Step({ num, title, desc }: { num: string; title: string; desc: string }
   );
 }
 
-function StepCard({ num, icon, title, desc }: { num: string; icon: React.ReactNode; title: string; desc: string }) {
+function StepCard({ num, icon, title, desc, highlight }: { num: string; icon: React.ReactNode; title: string; desc: string; highlight?: string }) {
   return (
     <div className="relative rounded-2xl border border-emerald-100 bg-white p-6 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all">
       <div className="flex items-center gap-3 mb-3">
@@ -309,6 +333,11 @@ function StepCard({ num, icon, title, desc }: { num: string; icon: React.ReactNo
       </div>
       <h3 className="text-base font-bold mb-2 text-slate-900">{title}</h3>
       <p className="text-slate-600 text-sm leading-relaxed">{desc}</p>
+      {highlight && (
+        <div className="mt-3 text-[11px] font-bold text-emerald-800 bg-emerald-50 border border-emerald-200 px-2.5 py-1.5 rounded">
+          {highlight}
+        </div>
+      )}
     </div>
   );
 }