chpark
defd358e20
Deploy momo-erp / deploy (push) Successful in 1m11s
- docker-compose.prod.yml: Traefik Host 라벨 (apex + www) - .gitea/workflows/deploy.yml: NEXTAUTH_URL + 헬스체크 URL - CICD_SETUP.md, docs/proposal.html, docs/MOMO_DISTRIBUTION_SPEC.md 도메인 표기 수정 DNS 입력 (가비아): A @ 183.99.177.40 A www 183.99.177.40 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
256 lines
15 KiB
HTML
256 lines
15 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>모모유통 — 유통관리 시스템 제안서</title>
|
|
<style>
|
|
:root{
|
|
--brand:#0f766e;
|
|
--brand-2:#14b8a6;
|
|
--ink:#0f172a;
|
|
--ink-2:#334155;
|
|
--line:#e2e8f0;
|
|
--bg:#f8fafc;
|
|
--warn:#f59e0b;
|
|
--ok:#10b981;
|
|
--tax-free:#7c3aed;
|
|
--tax:#e11d48;
|
|
}
|
|
*{box-sizing:border-box}
|
|
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
|
|
.wrap{max-width:1080px;margin:0 auto;padding:48px 24px 80px}
|
|
header.hero{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);color:#fff;padding:64px 32px;border-radius:24px;box-shadow:0 20px 50px -20px rgba(15,118,110,.4);margin-bottom:48px}
|
|
header.hero h1{margin:0 0 8px;font-size:40px;letter-spacing:-.5px}
|
|
header.hero .sub{font-size:16px;opacity:.9;margin-bottom:24px}
|
|
header.hero .meta{display:flex;gap:24px;flex-wrap:wrap;font-size:14px;opacity:.9}
|
|
header.hero .meta b{font-weight:600}
|
|
section{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px;margin-bottom:24px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
|
|
h2{margin:0 0 16px;font-size:24px;color:var(--brand);display:flex;align-items:center;gap:10px}
|
|
h2 .num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--brand);color:#fff;border-radius:8px;font-size:16px;font-weight:700}
|
|
h3{margin:24px 0 12px;font-size:18px;color:var(--ink)}
|
|
p,li{color:var(--ink-2);font-size:15px}
|
|
ul,ol{padding-left:20px}
|
|
ul li{margin:6px 0}
|
|
.grid{display:grid;gap:16px}
|
|
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
|
|
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
|
|
.card{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:18px}
|
|
.card .ico{width:36px;height:36px;background:var(--brand);color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:10px}
|
|
.card h4{margin:0 0 6px;font-size:15px;color:var(--ink)}
|
|
.card p{margin:0;font-size:13.5px}
|
|
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;margin-right:4px}
|
|
.badge.brand{background:#ccfbf1;color:#0f766e}
|
|
.badge.warn{background:#fef3c7;color:#92400e}
|
|
.badge.ok{background:#d1fae5;color:#065f46}
|
|
.badge.free{background:#ede9fe;color:#6d28d9}
|
|
.badge.tax{background:#ffe4e6;color:#9f1239}
|
|
.flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:16px 0}
|
|
.flow .step{flex:1;min-width:140px;background:#fff;border:2px solid var(--line);border-radius:12px;padding:14px;text-align:center}
|
|
.flow .step .t{font-size:13px;color:var(--ink-2);margin-bottom:4px}
|
|
.flow .step .l{font-weight:700;color:var(--ink)}
|
|
.flow .step.s1{border-color:#fde68a}
|
|
.flow .step.s2{border-color:#a7f3d0}
|
|
.flow .step.s3{border-color:#bfdbfe}
|
|
.flow .step.s4{border-color:#ddd6fe}
|
|
.flow .arrow{font-size:24px;color:#94a3b8}
|
|
table{width:100%;border-collapse:collapse;margin-top:8px;font-size:14px}
|
|
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
|
|
th{background:#f1f5f9;color:var(--ink);font-weight:600;font-size:13px}
|
|
td.num{text-align:right;font-variant-numeric:tabular-nums}
|
|
.callout{border-left:4px solid var(--brand);background:#f0fdfa;padding:14px 18px;border-radius:8px;margin:16px 0;font-size:14.5px}
|
|
.callout.warn{border-left-color:var(--warn);background:#fffbeb}
|
|
.timeline{display:grid;grid-template-columns:120px 1fr;gap:0;margin-top:16px}
|
|
.timeline .t{padding:14px 12px;border-right:2px solid var(--brand);font-weight:700;color:var(--brand);font-size:14px}
|
|
.timeline .c{padding:14px 18px;border-bottom:1px solid var(--line)}
|
|
.timeline .c:last-child{border-bottom:0}
|
|
.timeline .t:last-of-type{border-right:2px solid var(--brand)}
|
|
.device{background:#0f172a;border-radius:24px;padding:18px;color:#e2e8f0;margin:16px 0;font-size:13px;font-family:"SF Mono",Consolas,monospace;line-height:1.6}
|
|
.device .bar{height:6px;background:#334155;border-radius:3px;margin-bottom:12px}
|
|
.price{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed #334155}
|
|
.price:last-child{border-bottom:0;font-weight:700;color:#5eead4}
|
|
footer{margin-top:48px;padding:24px;text-align:center;color:var(--ink-2);font-size:13px}
|
|
.signature{margin-top:32px;padding-top:24px;border-top:2px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
|
|
.signature .col{flex:1;min-width:240px}
|
|
.signature .col h4{margin:0 0 4px;color:var(--brand)}
|
|
@media print{
|
|
body{background:#fff}
|
|
section{break-inside:avoid;box-shadow:none;border-color:#cbd5e1}
|
|
header.hero{box-shadow:none}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
|
|
<header class="hero">
|
|
<div style="font-size:13px;letter-spacing:2px;opacity:.85;margin-bottom:8px">PROPOSAL · 2026-04-25</div>
|
|
<h1>모모유통 유통관리 시스템</h1>
|
|
<div class="sub">엑셀 기반 발주 업무를 웹 + 모바일 앱으로 전환합니다</div>
|
|
<div class="meta">
|
|
<span><b>고객사</b> · 모모유통</span>
|
|
<span><b>도메인</b> · momotogether.com</span>
|
|
<span><b>기간(예상)</b> · 5주</span>
|
|
<span><b>플랫폼</b> · 웹(PC) + 안드로이드 앱</span>
|
|
</div>
|
|
</header>
|
|
|
|
<section>
|
|
<h2><span class="num">1</span> 왜 이 시스템이 필요한가</h2>
|
|
<p>현재는 엑셀 한 파일에 <b>여러 명이 동시에 입력</b>하다 보니 발주 총수량과 명세서 자동계산이 어긋나는 일이 잦습니다. 업체가 늘어날수록 단가·재고·입금 상태를 한 시트에서 관리하기가 점점 더 어렵습니다.</p>
|
|
<div class="grid cols-3" style="margin-top:18px">
|
|
<div class="card"><div class="ico">📋</div><h4>발주 누락·중복</h4><p>여러 명이 동시 편집 → 셀이 겹치거나 사라짐</p></div>
|
|
<div class="card"><div class="ico">🧮</div><h4>금액 오류</h4><p>VAT·면세 분리 합산이 수동, 자릿수 실수</p></div>
|
|
<div class="card"><div class="ico">📨</div><h4>명세서 수작업</h4><p>업체별로 매번 별도 시트 복사·메일 발송</p></div>
|
|
<div class="card"><div class="ico">📦</div><h4>재고 불투명</h4><p>창고별 현재고가 엑셀에 반영되지 않음</p></div>
|
|
<div class="card"><div class="ico">📊</div><h4>매출 가시성 부족</h4><p>월간 누적·업체별 매출을 한눈에 보기 어려움</p></div>
|
|
<div class="card"><div class="ico">📱</div><h4>현장 입력 불가</h4><p>거래처가 PC 앞에 가야만 발주 가능</p></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2><span class="num">2</span> 누가 어떻게 사용하나</h2>
|
|
|
|
<h3>👤 일반 사용자 (대리점·소매상)</h3>
|
|
<ul>
|
|
<li>이메일과 업체명으로 <b>회원가입</b></li>
|
|
<li>웹 또는 <b>안드로이드 앱</b>에서 로그인</li>
|
|
<li>현재 재고가 있는 품목을 검색·선택해 <b>발주 요청</b></li>
|
|
<li>본인 발주 이력·미수금·계산서 조회</li>
|
|
</ul>
|
|
|
|
<h3>🛠 관리자 (모모유통 담당자)</h3>
|
|
<ul>
|
|
<li>품목 마스터 관리 (사진·제조사·면세여부·속성)</li>
|
|
<li>창고별 재고 등록·조정·이력 추적</li>
|
|
<li>발주 요청 검토 → <b>승인 한 번으로</b> 재고 차감 + 거래명세표 메일 자동 발송</li>
|
|
<li>월말 계산서 발행 / 입금 관리 / 누적 매출 통계</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h2><span class="num">3</span> 핵심 업무 흐름</h2>
|
|
<div class="flow">
|
|
<div class="step s1"><div class="t">1단계 · 대리점</div><div class="l">발주 요청</div></div>
|
|
<div class="arrow">▶</div>
|
|
<div class="step s2"><div class="t">2단계 · 모모유통</div><div class="l">승인 + 메일 발송</div></div>
|
|
<div class="arrow">▶</div>
|
|
<div class="step s3"><div class="t">3단계 · 모모유통</div><div class="l">출고 처리</div></div>
|
|
<div class="arrow">▶</div>
|
|
<div class="step s4"><div class="t">4단계 · 월말</div><div class="l">계산서 + 입금</div></div>
|
|
</div>
|
|
<div class="callout">
|
|
<b>승인 버튼 한 번</b>으로 다음이 자동 처리됩니다:<br>
|
|
① 재고에서 발주 수량만큼 차감 → ② 거래명세표 PDF/엑셀 자동 생성 → ③ 가입한 이메일로 명세서 본문 + 엑셀 첨부 메일 발송 → ④ 발주 상태 "발주완료"로 변경
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2><span class="num">4</span> 면세 / 과세 자동 분리</h2>
|
|
<p>품목명이 <b>"M"</b>으로 시작하는 면세 품목(예: M유정란, M꽃계탕)은 시스템이 자동으로 면세 플래그를 켜고, 거래명세표·매출통계에서 면세 합계와 과세 합계를 분리 집계합니다.</p>
|
|
<table>
|
|
<thead><tr><th>품명</th><th>구분</th><th class="num">단가</th><th class="num">수량</th><th class="num">공급가</th><th class="num">세액</th><th class="num">합계</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>M 유정란</td><td><span class="badge free">면세</span></td><td class="num">10,000</td><td class="num">30</td><td class="num">300,000</td><td class="num">-</td><td class="num">300,000</td></tr>
|
|
<tr><td>빨강 탈취제</td><td><span class="badge tax">과세</span></td><td class="num">9,200</td><td class="num">11</td><td class="num">92,000</td><td class="num">9,200</td><td class="num">101,200</td></tr>
|
|
<tr><td>초록 탈취제</td><td><span class="badge tax">과세</span></td><td class="num">9,200</td><td class="num">3</td><td class="num">25,091</td><td class="num">2,509</td><td class="num">27,600</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<section>
|
|
<h2><span class="num">5</span> 메일 자동 발송 (거래명세표)</h2>
|
|
<p>관리자가 발주를 승인하면, 가입 시 등록한 이메일로 다음과 같은 메일이 즉시 발송됩니다.</p>
|
|
<div class="device">
|
|
<div class="bar"></div>
|
|
<div style="font-size:11px;color:#94a3b8">받는사람: 수원 거래처 <suwon@example.com></div>
|
|
<div style="font-size:11px;color:#94a3b8;margin-bottom:10px">제목: [모모유통] 발주 ORD-20260425-0007 승인되었습니다</div>
|
|
<div style="color:#5eead4;font-size:14px;margin-bottom:8px">📎 첨부 · 거래명세표.xlsx (12 KB)</div>
|
|
<div class="price"><span>면세 합계</span><span>₩300,000</span></div>
|
|
<div class="price"><span>과세 공급가</span><span>₩928,650</span></div>
|
|
<div class="price"><span>세액</span><span>₩81,900</span></div>
|
|
<div class="price"><span>총 합계 (VAT 포함)</span><span>₩1,310,550</span></div>
|
|
</div>
|
|
<p style="margin-top:14px">메일에는 <b>본문에 명세서 표</b>가 포함되며, 동시에 <b>엑셀 파일(.xlsx)</b>이 첨부됩니다. 거래처가 그대로 회계 시스템에 올릴 수 있습니다.</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2><span class="num">6</span> 화면 구성</h2>
|
|
<h3>웹 (PC) — 관리자 + 대리점 공용</h3>
|
|
<ul>
|
|
<li><b>대시보드</b> — 오늘의 발주, 승인 대기, 이번달 매출, 미수금, 재고 부족 알림</li>
|
|
<li><b>품목 관리</b> — 사진 업로드, 제조사, 면세 여부, 속성(소비기한 등)</li>
|
|
<li><b>창고/재고</b> — 창고별 현재고, 입출고 이력</li>
|
|
<li><b>발주 관리</b> — 발주서 작성/목록/승인, 거래명세표 출력</li>
|
|
<li><b>정산</b> — 계산서 발행, 입금 등록, 미수금 관리</li>
|
|
<li><b>통계</b> — 일자별·월별·업체별·품목별 그래프</li>
|
|
</ul>
|
|
|
|
<h3>📱 안드로이드 앱 — 대리점 전용</h3>
|
|
<ul>
|
|
<li>로그인</li>
|
|
<li>품목 검색 (사진·재고·단가 표시)</li>
|
|
<li>장바구니 → 발주 요청</li>
|
|
<li>내 발주 이력 + 알림</li>
|
|
</ul>
|
|
<div class="callout">앱은 <b>APK 파일</b>로 전달드립니다. 구글 플레이 등록 없이 사내 배포 가능합니다.</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2><span class="num">7</span> 일정 (5주)</h2>
|
|
<div class="timeline">
|
|
<div class="t">1주차</div>
|
|
<div class="c"><b>기초 — 메뉴 정리, DB 구축, 회원가입, 권한</b><br>불필요한 PLM 잔재 메뉴 제거 후 모모유통 메뉴 트리로 재편</div>
|
|
<div class="t">2주차</div>
|
|
<div class="c"><b>마스터 — 품목·제조사·창고·재고</b><br>품목 사진 업로드, 면세 자동 인식, 창고별 재고 관리</div>
|
|
<div class="t">3~4주차</div>
|
|
<div class="c"><b>발주 핵심 — 작성·승인·메일·엑셀</b><br>장바구니 UI, 트랜잭션 재고 차감, 거래명세표 메일 + 엑셀 첨부</div>
|
|
<div class="t">5주차</div>
|
|
<div class="c"><b>정산·통계·앱 + 마무리</b><br>계산서·입금·통계 화면, 안드로이드 APK 빌드, 운영 가이드</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2><span class="num">8</span> 결정해 주실 사항</h2>
|
|
<ol>
|
|
<li><b>가입 승인</b> — 거래처가 가입하면 자동 활성화? 아니면 관리자 승인 후 활성화?</li>
|
|
<li><b>단가 모델</b> — 등록 단가에 VAT가 <b>포함</b>되어 있나요, 별도인가요? (엑셀 보면 포함으로 보입니다)</li>
|
|
<li><b>이메일 송신 계정</b> — momo8443@daum.net 사용 시 SMTP 비밀번호/앱 비밀번호 필요</li>
|
|
<li><b>계산서 발행 단위</b> — 발주 1건씩 / 업체별 월 합산 (둘 다 가능, 디폴트 결정 필요)</li>
|
|
<li><b>재고 부족 알림 기준</b> — 임계 수량 (예: 10개 미만 알림)</li>
|
|
</ol>
|
|
</section>
|
|
|
|
<section>
|
|
<h2><span class="num">9</span> 기대 효과</h2>
|
|
<div class="grid cols-3">
|
|
<div class="card"><div class="ico">⚡</div><h4>발주 처리 시간</h4><p>엑셀 대비 <b>70% 단축</b><br>(승인 1클릭 = 재고+메일+명세서)</p></div>
|
|
<div class="card"><div class="ico">✅</div><h4>금액 오류</h4><p>VAT·면세 자동 계산으로<br><b>0건</b> 목표</p></div>
|
|
<div class="card"><div class="ico">📈</div><h4>매출 가시성</h4><p>월간 누적·업체별 그래프를<br><b>실시간</b>으로</p></div>
|
|
<div class="card"><div class="ico">📱</div><h4>거래처 편의</h4><p>휴대폰만으로 발주 가능<br>현장 즉시 주문</p></div>
|
|
<div class="card"><div class="ico">🔒</div><h4>데이터 안전성</h4><p>동시 편집 충돌 없음<br>모든 변경 이력 추적</p></div>
|
|
<div class="card"><div class="ico">🧾</div><h4>회계 연계</h4><p>엑셀 명세서 자동 첨부<br>거래처가 그대로 활용</p></div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="signature">
|
|
<div class="col">
|
|
<h4>고객사</h4>
|
|
<div>모모유통</div>
|
|
<div style="font-size:13px;color:#64748b">대표: ____________</div>
|
|
<div style="font-size:13px;color:#64748b">날짜: 2026 . __ . __</div>
|
|
</div>
|
|
<div class="col">
|
|
<h4>개발사</h4>
|
|
<div>chpark@wace.me</div>
|
|
<div style="font-size:13px;color:#64748b">담당: ____________</div>
|
|
<div style="font-size:13px;color:#64748b">날짜: 2026 . __ . __</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>© 2026 모모유통 유통관리 시스템 · Next.js 15 + React Native (APK) · momotogether.com</footer>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|