feat: 견적서 자동화, 마케팅 에셋, 전체 카피 강화
- 관리자 견적서 CRUD (WBS/항목/향후관리/특이사항 5탭 편집기) - 고객용 공개 견적서 페이지 (optional 항목 선택 + 실시간 총액 + 수락) - 마케팅 SVG 에셋 6종 (썸네일 5개 + 배너 1개) + 관리자 에셋 페이지 - 전체 카피 강화: 크레덴셜 제거 → URL증거/환불보장/계약서/납기패널티 중심 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -46,6 +46,26 @@ const NAV_ITEMS = [
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
href: '/admin/quotes',
|
||||
label: '견적서 관리',
|
||||
icon: (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
href: '/admin/marketing',
|
||||
label: '마케팅 에셋',
|
||||
icon: (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export default function AdminSidebar() {
|
||||
|
||||
182
app/admin/marketing/page.tsx
Normal file
182
app/admin/marketing/page.tsx
Normal file
@@ -0,0 +1,182 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
const ASSETS = [
|
||||
{
|
||||
file: '/marketing/thumb-homepage-A.svg',
|
||||
name: '홈페이지 제작 썸네일 A',
|
||||
desc: '신뢰형 — 브라우저 목업 포함 다크 테마',
|
||||
size: '1200 × 675',
|
||||
platform: '크몽 메인',
|
||||
color: '#2563eb',
|
||||
},
|
||||
{
|
||||
file: '/marketing/thumb-homepage-B.svg',
|
||||
name: '홈페이지 제작 썸네일 B',
|
||||
desc: '스펙 강조형 — 3플랜 카드 비교',
|
||||
size: '1200 × 675',
|
||||
platform: '크몽 서브',
|
||||
color: '#7c3aed',
|
||||
},
|
||||
{
|
||||
file: '/marketing/thumb-automation.svg',
|
||||
name: '업무 자동화 썸네일',
|
||||
desc: '시간 절약형 — 자동화 플로우 다이어그램',
|
||||
size: '1200 × 675',
|
||||
platform: '크몽 메인',
|
||||
color: '#10b981',
|
||||
},
|
||||
{
|
||||
file: '/marketing/thumb-prompt.svg',
|
||||
name: '프롬프트 엔지니어링 썸네일',
|
||||
desc: 'Before/After 말풍선 비교형',
|
||||
size: '1200 × 675',
|
||||
platform: '크몽 메인',
|
||||
color: '#7c3aed',
|
||||
},
|
||||
{
|
||||
file: '/marketing/thumb-stock.svg',
|
||||
name: '주식 자동매매 썸네일',
|
||||
desc: '폰 목업 + 텔레그램 알림 UI',
|
||||
size: '1200 × 675',
|
||||
platform: '크몽 메인',
|
||||
color: '#22c55e',
|
||||
},
|
||||
{
|
||||
file: '/marketing/banner-homepage.svg',
|
||||
name: '홈페이지 제작 배너',
|
||||
desc: '가로형 배너 — 블로그/SNS 활용',
|
||||
size: '1200 × 400',
|
||||
platform: '블로그/SNS',
|
||||
color: '#2563eb',
|
||||
},
|
||||
];
|
||||
|
||||
export default function MarketingPage() {
|
||||
const [preview, setPreview] = useState<(typeof ASSETS)[0] | null>(null);
|
||||
const [copied, setCopied] = useState<string | null>(null);
|
||||
|
||||
function copyPath(file: string) {
|
||||
const url = `${window.location.origin}${file}`;
|
||||
navigator.clipboard.writeText(url);
|
||||
setCopied(file);
|
||||
setTimeout(() => setCopied(null), 2000);
|
||||
}
|
||||
|
||||
function download(file: string, name: string) {
|
||||
const a = document.createElement('a');
|
||||
a.href = file;
|
||||
a.download = name.replace(/\s/g, '_') + '.svg';
|
||||
a.click();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-8">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">마케팅 에셋</h1>
|
||||
<p className="text-slate-400 text-sm mt-1">크몽/숨고 등록용 썸네일 및 배너 — SVG 파일 다운로드 가능</p>
|
||||
</div>
|
||||
<Link href="/admin/dashboard" className="text-slate-400 hover:text-white text-sm transition-colors">
|
||||
← 대시보드
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* 안내 */}
|
||||
<div className="bg-blue-900/20 border border-blue-500/30 rounded-xl p-4 mb-8 flex items-start gap-3">
|
||||
<span className="text-blue-400 text-xl mt-0.5">ℹ️</span>
|
||||
<div>
|
||||
<p className="text-blue-300 font-semibold text-sm mb-1">SVG → PNG 변환 방법</p>
|
||||
<p className="text-slate-400 text-sm">브라우저에서 파일 열기 → 우클릭 → "이미지 다른 이름으로 저장" (PNG), 또는 <strong className="text-slate-300">Figma에 SVG 드래그 후 PNG Export</strong>를 추천합니다. 크몽은 JPG/PNG만 허용합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 그리드 */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
{ASSETS.map((asset) => (
|
||||
<div key={asset.file} className="bg-slate-900 rounded-2xl border border-slate-800 overflow-hidden hover:border-slate-600 transition-all group">
|
||||
{/* 미리보기 */}
|
||||
<button
|
||||
onClick={() => setPreview(asset)}
|
||||
className="w-full block relative overflow-hidden bg-slate-950"
|
||||
style={{ aspectRatio: asset.size.includes('400') ? '3/1' : '16/9' }}
|
||||
>
|
||||
<img
|
||||
src={asset.file}
|
||||
alt={asset.name}
|
||||
className="w-full h-full object-contain group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-all flex items-center justify-center">
|
||||
<span className="opacity-0 group-hover:opacity-100 text-white font-semibold text-sm bg-black/60 px-4 py-2 rounded-full transition-all">
|
||||
크게 보기
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* 정보 */}
|
||||
<div className="p-4">
|
||||
<div className="flex items-start justify-between gap-2 mb-2">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold text-sm">{asset.name}</h3>
|
||||
<p className="text-slate-500 text-xs mt-0.5">{asset.desc}</p>
|
||||
</div>
|
||||
<span className="text-xs font-semibold px-2 py-1 rounded-full shrink-0" style={{ background: asset.color + '20', color: asset.color }}>
|
||||
{asset.platform}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-slate-600 text-xs mb-3">{asset.size}px</p>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => download(asset.file, asset.name)}
|
||||
className="flex-1 py-2 rounded-lg text-xs font-semibold bg-slate-800 hover:bg-slate-700 text-white transition-all"
|
||||
>
|
||||
SVG 다운로드
|
||||
</button>
|
||||
<button
|
||||
onClick={() => copyPath(asset.file)}
|
||||
className={`px-3 py-2 rounded-lg text-xs font-semibold transition-all ${copied === asset.file ? 'bg-green-900/40 text-green-400 border border-green-500/30' : 'bg-slate-800 hover:bg-slate-700 text-slate-400'}`}
|
||||
>
|
||||
{copied === asset.file ? '✓ 복사됨' : 'URL 복사'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 크게 보기 모달 */}
|
||||
{preview && (
|
||||
<div
|
||||
className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-6"
|
||||
onClick={() => setPreview(null)}
|
||||
>
|
||||
<div className="max-w-6xl w-full" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h2 className="text-white font-bold text-lg">{preview.name}</h2>
|
||||
<p className="text-slate-400 text-sm">{preview.size}px · {preview.desc}</p>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => download(preview.file, preview.name)}
|
||||
className="px-4 py-2 rounded-lg text-sm font-semibold bg-blue-600 hover:bg-blue-500 text-white transition-all"
|
||||
>
|
||||
SVG 다운로드
|
||||
</button>
|
||||
<button onClick={() => setPreview(null)} className="text-slate-400 hover:text-white text-2xl leading-none px-2">×</button>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
src={preview.file}
|
||||
alt={preview.name}
|
||||
className="w-full rounded-xl border border-slate-700"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
510
app/admin/quotes/[id]/page.tsx
Normal file
510
app/admin/quotes/[id]/page.tsx
Normal file
@@ -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<Tab>('기본정보');
|
||||
const [form, setForm] = useState<QuoteForm>({
|
||||
title: '새 견적서', client_name: '', client_email: '',
|
||||
valid_until: '', status: 'draft',
|
||||
wbs: [], items: [], maintenance: [], notes: '',
|
||||
});
|
||||
const [publicToken, setPublicToken] = useState('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [saved, setSaved] = useState(false);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`/api/admin/quotes/${id}`)
|
||||
.then((r) => r.json())
|
||||
.then((d) => {
|
||||
if (d.quote) {
|
||||
const q = d.quote;
|
||||
setForm({
|
||||
title: q.title, client_name: q.client_name, client_email: q.client_email,
|
||||
valid_until: q.valid_until?.slice(0, 10) ?? '', status: q.status,
|
||||
wbs: q.wbs ?? [], items: q.items ?? [],
|
||||
maintenance: q.maintenance ?? [], notes: q.notes ?? '',
|
||||
});
|
||||
setPublicToken(q.public_token);
|
||||
}
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
}, [id]);
|
||||
|
||||
const save = useCallback(async (silent = false) => {
|
||||
if (!silent) setSaving(true);
|
||||
await fetch(`/api/admin/quotes/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(form),
|
||||
});
|
||||
if (!silent) { setSaving(false); setSaved(true); setTimeout(() => setSaved(false), 2000); }
|
||||
}, [id, form]);
|
||||
|
||||
// ── helpers ────────────────────────────
|
||||
const setField = (k: keyof QuoteForm, v: unknown) => setForm((f) => ({ ...f, [k]: v }));
|
||||
|
||||
const totalPrice = form.items.reduce((s, i) => s + i.unitPrice * i.quantity, 0);
|
||||
|
||||
function copyLink() {
|
||||
navigator.clipboard.writeText(`${window.location.origin}/quote/${publicToken}`);
|
||||
setCopied(true); setTimeout(() => setCopied(false), 2000);
|
||||
}
|
||||
|
||||
// ── WBS ────────────────────────────────
|
||||
function addPhase() {
|
||||
setField('wbs', [...form.wbs, { id: newId(), phase: '새 단계', tasks: [] }]);
|
||||
}
|
||||
function updatePhase(phaseId: string, k: string, v: string) {
|
||||
setField('wbs', form.wbs.map((p) => p.id === phaseId ? { ...p, [k]: v } : p));
|
||||
}
|
||||
function removePhase(phaseId: string) {
|
||||
setField('wbs', form.wbs.filter((p) => p.id !== phaseId));
|
||||
}
|
||||
function addTask(phaseId: string) {
|
||||
setField('wbs', form.wbs.map((p) => p.id === phaseId
|
||||
? { ...p, tasks: [...p.tasks, { id: newId(), name: '새 작업', duration: '1일', description: '' }] }
|
||||
: p));
|
||||
}
|
||||
function updateTask(phaseId: string, taskId: string, k: string, v: string) {
|
||||
setField('wbs', form.wbs.map((p) => p.id === phaseId
|
||||
? { ...p, tasks: p.tasks.map((t) => t.id === taskId ? { ...t, [k]: v } : t) }
|
||||
: p));
|
||||
}
|
||||
function removeTask(phaseId: string, taskId: string) {
|
||||
setField('wbs', form.wbs.map((p) => p.id === phaseId
|
||||
? { ...p, tasks: p.tasks.filter((t) => t.id !== taskId) }
|
||||
: p));
|
||||
}
|
||||
|
||||
// ── Items ───────────────────────────────
|
||||
function addItem() {
|
||||
setField('items', [...form.items, {
|
||||
id: newId(), category: '개발', name: '', description: '',
|
||||
quantity: 1, unitPrice: 0, optional: false,
|
||||
}]);
|
||||
}
|
||||
function updateItem(itemId: string, k: string, v: unknown) {
|
||||
setField('items', form.items.map((i) => i.id === itemId ? { ...i, [k]: v } : i));
|
||||
}
|
||||
function removeItem(itemId: string) {
|
||||
setField('items', form.items.filter((i) => i.id !== itemId));
|
||||
}
|
||||
|
||||
// ── Maintenance ─────────────────────────
|
||||
function addPlan() {
|
||||
setField('maintenance', [...form.maintenance, {
|
||||
id: newId(), name: '기본 유지보수', period: '3개월',
|
||||
monthlyFee: 0, includes: ['버그 수정', '소소한 변경'], recommended: false,
|
||||
}]);
|
||||
}
|
||||
function updatePlan(planId: string, k: string, v: unknown) {
|
||||
setField('maintenance', form.maintenance.map((p) => p.id === planId ? { ...p, [k]: v } : p));
|
||||
}
|
||||
function removePlan(planId: string) {
|
||||
setField('maintenance', form.maintenance.filter((p) => p.id !== planId));
|
||||
}
|
||||
function updatePlanInclude(planId: string, idx: number, v: string) {
|
||||
setField('maintenance', form.maintenance.map((p) => p.id === planId
|
||||
? { ...p, includes: p.includes.map((inc, i) => i === idx ? v : inc) }
|
||||
: p));
|
||||
}
|
||||
function addPlanInclude(planId: string) {
|
||||
setField('maintenance', form.maintenance.map((p) => p.id === planId
|
||||
? { ...p, includes: [...p.includes, ''] }
|
||||
: p));
|
||||
}
|
||||
function removePlanInclude(planId: string, idx: number) {
|
||||
setField('maintenance', form.maintenance.map((p) => p.id === planId
|
||||
? { ...p, includes: p.includes.filter((_, i) => i !== idx) }
|
||||
: p));
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return <div className="flex items-center justify-center h-full text-slate-500 p-20">불러오는 중...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* 상단 바 */}
|
||||
<div className="sticky top-0 z-10 bg-slate-950 border-b border-slate-800 px-8 py-4 flex items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="/admin/quotes" className="text-slate-400 hover:text-white transition-colors">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className="text-white font-bold text-lg leading-tight">{form.title || '견적서 편집'}</h1>
|
||||
<p className="text-slate-500 text-xs">{form.client_name || '고객 미지정'} · 합계 {totalPrice.toLocaleString()}원</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
{/* 공개 링크 */}
|
||||
{publicToken && (
|
||||
<button onClick={copyLink} className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all border ${copied ? 'border-green-500 text-green-400 bg-green-900/20' : 'border-slate-700 text-slate-400 hover:text-white hover:border-slate-600'}`}>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
||||
</svg>
|
||||
{copied ? '복사됨!' : '고객 링크 복사'}
|
||||
</button>
|
||||
)}
|
||||
{/* 미리보기 */}
|
||||
{publicToken && (
|
||||
<a href={`/quote/${publicToken}`} target="_blank" rel="noreferrer"
|
||||
className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border border-slate-700 text-slate-400 hover:text-white hover:border-slate-600 transition-all">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
미리보기
|
||||
</a>
|
||||
)}
|
||||
{/* 저장 */}
|
||||
<button onClick={() => save()} disabled={saving}
|
||||
className={`flex items-center gap-2 px-5 py-2 rounded-xl text-sm font-semibold transition-all ${saved ? 'bg-green-600 text-white' : 'bg-blue-600 hover:bg-blue-500 text-white'} disabled:opacity-60`}>
|
||||
{saving ? <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> :
|
||||
saved ? '✓ 저장됨' : '저장'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 탭 */}
|
||||
<div className="border-b border-slate-800 px-8">
|
||||
<div className="flex gap-0">
|
||||
{TABS.map((t) => (
|
||||
<button key={t} onClick={() => setTab(t)}
|
||||
className={`px-5 py-3 text-sm font-medium border-b-2 transition-all ${tab === t ? 'border-blue-500 text-blue-400' : 'border-transparent text-slate-500 hover:text-slate-300'}`}>
|
||||
{t}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 콘텐츠 */}
|
||||
<div className="flex-1 overflow-y-auto p-8">
|
||||
|
||||
{/* ── 기본정보 ── */}
|
||||
{tab === '기본정보' && (
|
||||
<div className="max-w-2xl space-y-6">
|
||||
<div className="grid grid-cols-1 gap-5">
|
||||
<Field label="견적서명">
|
||||
<input className={inp} value={form.title} onChange={(e) => setField('title', e.target.value)} placeholder="예: 쇼핑몰 개발 견적서 v1.0" />
|
||||
</Field>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Field label="고객명">
|
||||
<input className={inp} value={form.client_name} onChange={(e) => setField('client_name', e.target.value)} placeholder="홍길동" />
|
||||
</Field>
|
||||
<Field label="고객 이메일">
|
||||
<input className={inp} type="email" value={form.client_email} onChange={(e) => setField('client_email', e.target.value)} placeholder="client@example.com" />
|
||||
</Field>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Field label="유효기간">
|
||||
<input className={inp} type="date" value={form.valid_until} onChange={(e) => setField('valid_until', e.target.value)} />
|
||||
</Field>
|
||||
<Field label="상태">
|
||||
<select className={inp} value={form.status} onChange={(e) => setField('status', e.target.value)}>
|
||||
{STATUS_OPTIONS.map((s) => <option key={s.value} value={s.value}>{s.label}</option>)}
|
||||
</select>
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 요약 카드 */}
|
||||
<div className="bg-slate-900 rounded-xl border border-slate-700 p-5">
|
||||
<h3 className="text-slate-400 text-xs font-semibold uppercase tracking-wider mb-4">견적 요약</h3>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-white">{form.items.length}</div>
|
||||
<div className="text-slate-500 text-xs mt-1">총 항목</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-blue-400">{form.items.filter(i => !i.optional).length}</div>
|
||||
<div className="text-slate-500 text-xs mt-1">필수 항목</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-violet-400">{form.items.filter(i => i.optional).length}</div>
|
||||
<div className="text-slate-500 text-xs mt-1">선택 항목</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 pt-4 border-t border-slate-800 flex items-center justify-between">
|
||||
<span className="text-slate-400 text-sm">총 견적 금액</span>
|
||||
<span className="text-xl font-bold text-white">{totalPrice.toLocaleString()}원</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── WBS ── */}
|
||||
{tab === 'WBS' && (
|
||||
<div className="max-w-4xl space-y-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<p className="text-slate-400 text-sm">작업 분류 체계(WBS)를 단계별로 작성합니다</p>
|
||||
<button onClick={addPhase} className={addBtn}>+ 단계 추가</button>
|
||||
</div>
|
||||
{form.wbs.length === 0 && (
|
||||
<EmptyState icon="📋" msg="단계를 추가해 WBS를 작성해보세요" />
|
||||
)}
|
||||
{form.wbs.map((phase, pi) => (
|
||||
<div key={phase.id} className="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden">
|
||||
<div className="flex items-center gap-3 p-4 bg-slate-800/40">
|
||||
<span className="text-slate-500 text-sm font-mono w-6 text-center">{pi + 1}</span>
|
||||
<input
|
||||
className="flex-1 bg-transparent text-white font-semibold focus:outline-none"
|
||||
value={phase.phase}
|
||||
onChange={(e) => updatePhase(phase.id, 'phase', e.target.value)}
|
||||
placeholder="단계명 (예: 기획, 디자인, 개발)"
|
||||
/>
|
||||
<button onClick={() => addTask(phase.id)} className="text-xs text-blue-400 hover:text-blue-300 px-3 py-1 rounded-lg border border-blue-500/30 hover:border-blue-400/50 transition-all">+ 작업 추가</button>
|
||||
<button onClick={() => removePhase(phase.id)} className="text-slate-600 hover:text-red-400 transition-colors">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
{phase.tasks.length > 0 && (
|
||||
<div className="divide-y divide-slate-800/50">
|
||||
{phase.tasks.map((task) => (
|
||||
<div key={task.id} className="grid grid-cols-12 gap-3 px-4 py-3 items-center">
|
||||
<div className="col-span-4">
|
||||
<input className={inpSm} value={task.name} onChange={(e) => updateTask(phase.id, task.id, 'name', e.target.value)} placeholder="작업명" />
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<input className={inpSm} value={task.duration} onChange={(e) => updateTask(phase.id, task.id, 'duration', e.target.value)} placeholder="기간 (예: 3일)" />
|
||||
</div>
|
||||
<div className="col-span-5">
|
||||
<input className={inpSm} value={task.description} onChange={(e) => updateTask(phase.id, task.id, 'description', e.target.value)} placeholder="작업 설명" />
|
||||
</div>
|
||||
<div className="col-span-1 flex justify-end">
|
||||
<button onClick={() => removeTask(phase.id, task.id)} className="text-slate-600 hover:text-red-400 transition-colors">
|
||||
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{phase.tasks.length === 0 && (
|
||||
<p className="text-slate-600 text-sm text-center py-4">작업 없음 — 위 버튼으로 추가하세요</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── 견적항목 ── */}
|
||||
{tab === '견적항목' && (
|
||||
<div className="max-w-5xl space-y-3">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<p className="text-slate-400 text-sm">선택 항목(optional)은 고객이 직접 선택/해제할 수 있습니다</p>
|
||||
<button onClick={addItem} className={addBtn}>+ 항목 추가</button>
|
||||
</div>
|
||||
|
||||
{/* 헤더 */}
|
||||
{form.items.length > 0 && (
|
||||
<div className="grid grid-cols-12 gap-3 px-4 py-2 text-xs font-semibold text-slate-500 uppercase tracking-wider">
|
||||
<div className="col-span-2">카테고리</div>
|
||||
<div className="col-span-3">항목명</div>
|
||||
<div className="col-span-3">설명</div>
|
||||
<div className="col-span-1 text-right">수량</div>
|
||||
<div className="col-span-1 text-right">단가</div>
|
||||
<div className="col-span-1 text-center">선택</div>
|
||||
<div className="col-span-1" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{form.items.length === 0 && <EmptyState icon="💰" msg="항목을 추가해 견적을 구성해보세요" />}
|
||||
|
||||
{form.items.map((item) => (
|
||||
<div key={item.id} className={`grid grid-cols-12 gap-3 px-4 py-3 rounded-xl border items-center transition-all ${item.optional ? 'bg-violet-900/10 border-violet-800/30' : 'bg-slate-900 border-slate-800'}`}>
|
||||
<div className="col-span-2">
|
||||
<select className={inpSm} value={item.category} onChange={(e) => updateItem(item.id, 'category', e.target.value)}>
|
||||
{ITEM_CATEGORIES.map((c) => <option key={c}>{c}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-span-3">
|
||||
<input className={inpSm} value={item.name} onChange={(e) => updateItem(item.id, 'name', e.target.value)} placeholder="항목명" />
|
||||
</div>
|
||||
<div className="col-span-3">
|
||||
<input className={inpSm} value={item.description} onChange={(e) => updateItem(item.id, 'description', e.target.value)} placeholder="상세 설명" />
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<input className={`${inpSm} text-right`} type="number" min={1} value={item.quantity} onChange={(e) => updateItem(item.id, 'quantity', Number(e.target.value))} />
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<input className={`${inpSm} text-right`} type="number" min={0} step={10000} value={item.unitPrice} onChange={(e) => updateItem(item.id, 'unitPrice', Number(e.target.value))} />
|
||||
</div>
|
||||
<div className="col-span-1 flex justify-center">
|
||||
<button
|
||||
onClick={() => updateItem(item.id, 'optional', !item.optional)}
|
||||
title={item.optional ? '선택 항목 (클릭시 필수로)' : '필수 항목 (클릭시 선택으로)'}
|
||||
className={`w-10 h-5 rounded-full transition-all relative ${item.optional ? 'bg-violet-500' : 'bg-slate-600'}`}>
|
||||
<span className={`absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-all ${item.optional ? 'left-5' : 'left-0.5'}`} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="col-span-1 flex justify-end">
|
||||
<button onClick={() => removeItem(item.id)} className="text-slate-600 hover:text-red-400 transition-colors">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* 합계 */}
|
||||
{form.items.length > 0 && (
|
||||
<div className="flex justify-end pt-4">
|
||||
<div className="bg-slate-900 border border-slate-700 rounded-xl p-5 w-72 space-y-2">
|
||||
<div className="flex justify-between text-sm text-slate-400">
|
||||
<span>필수 합계</span>
|
||||
<span className="font-mono">{form.items.filter(i => !i.optional).reduce((s, i) => s + i.unitPrice * i.quantity, 0).toLocaleString()}원</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm text-violet-400">
|
||||
<span>선택 합계</span>
|
||||
<span className="font-mono">{form.items.filter(i => i.optional).reduce((s, i) => s + i.unitPrice * i.quantity, 0).toLocaleString()}원</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-white font-bold pt-2 border-t border-slate-700">
|
||||
<span>전체 합계</span>
|
||||
<span className="font-mono">{totalPrice.toLocaleString()}원</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── 향후관리 ── */}
|
||||
{tab === '향후관리' && (
|
||||
<div className="max-w-3xl space-y-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<p className="text-slate-400 text-sm">납품 후 유지보수 플랜을 구성합니다 (고객이 하나를 선택)</p>
|
||||
<button onClick={addPlan} className={addBtn}>+ 플랜 추가</button>
|
||||
</div>
|
||||
{form.maintenance.length === 0 && <EmptyState icon="🛡️" msg="유지보수 플랜을 추가해보세요" />}
|
||||
{form.maintenance.map((plan) => (
|
||||
<div key={plan.id} className={`rounded-xl border p-5 space-y-4 ${plan.recommended ? 'border-blue-500/50 bg-blue-900/10' : 'border-slate-800 bg-slate-900'}`}>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="grid grid-cols-3 gap-3 flex-1">
|
||||
<Field label="플랜명">
|
||||
<input className={inpSm} value={plan.name} onChange={(e) => updatePlan(plan.id, 'name', e.target.value)} placeholder="기본 유지보수" />
|
||||
</Field>
|
||||
<Field label="기간">
|
||||
<input className={inpSm} value={plan.period} onChange={(e) => updatePlan(plan.id, 'period', e.target.value)} placeholder="3개월" />
|
||||
</Field>
|
||||
<Field label="월 비용 (원)">
|
||||
<input className={`${inpSm} text-right`} type="number" min={0} step={10000} value={plan.monthlyFee} onChange={(e) => updatePlan(plan.id, 'monthlyFee', Number(e.target.value))} />
|
||||
</Field>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-1 pb-1">
|
||||
<span className="text-slate-500 text-xs">추천</span>
|
||||
<button
|
||||
onClick={() => updatePlan(plan.id, 'recommended', !plan.recommended)}
|
||||
className={`w-10 h-5 rounded-full transition-all relative ${plan.recommended ? 'bg-blue-500' : 'bg-slate-600'}`}>
|
||||
<span className={`absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-all ${plan.recommended ? 'left-5' : 'left-0.5'}`} />
|
||||
</button>
|
||||
</div>
|
||||
<button onClick={() => removePlan(plan.id)} className="text-slate-600 hover:text-red-400 transition-colors pb-1">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-slate-500 text-xs font-semibold uppercase tracking-wider">포함 사항</span>
|
||||
<button onClick={() => addPlanInclude(plan.id)} className="text-xs text-blue-400 hover:text-blue-300">+ 추가</button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{plan.includes.map((inc, idx) => (
|
||||
<div key={idx} className="flex items-center gap-2">
|
||||
<input className={`${inpSm} flex-1`} value={inc} onChange={(e) => updatePlanInclude(plan.id, idx, e.target.value)} placeholder="포함 사항 입력" />
|
||||
<button onClick={() => removePlanInclude(plan.id, idx)} className="text-slate-600 hover:text-red-400 transition-colors">
|
||||
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── 특이사항 ── */}
|
||||
{tab === '특이사항' && (
|
||||
<div className="max-w-2xl">
|
||||
<Field label="특이사항 및 참고사항">
|
||||
<textarea
|
||||
className={`${inp} min-h-48 resize-y`}
|
||||
value={form.notes}
|
||||
onChange={(e) => setField('notes', e.target.value)}
|
||||
placeholder="계약 조건, 주의사항, 면책 조항 등을 입력하세요 예: 본 견적서는 발행일로부터 30일간 유효합니다..."
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── 서브 컴포넌트 ────────────────────────────────────── */
|
||||
function Field({ label, children }: { label: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">{label}</label>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyState({ icon, msg }: { icon: string; msg: string }) {
|
||||
return (
|
||||
<div className="text-center py-12 bg-slate-900 rounded-xl border border-slate-800">
|
||||
<div className="text-4xl mb-3">{icon}</div>
|
||||
<p className="text-slate-500 text-sm">{msg}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── 스타일 상수 ──────────────────────────────────────── */
|
||||
const inp = 'w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2.5 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 transition-colors';
|
||||
const inpSm = 'w-full bg-slate-800/80 border border-slate-700 rounded-lg px-2.5 py-1.5 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 transition-colors';
|
||||
const addBtn = 'px-4 py-1.5 rounded-lg text-sm font-medium bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white border border-slate-700 transition-all';
|
||||
200
app/admin/quotes/page.tsx
Normal file
200
app/admin/quotes/page.tsx
Normal file
@@ -0,0 +1,200 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
interface Quote {
|
||||
id: string;
|
||||
title: string;
|
||||
client_name: string;
|
||||
client_email: string;
|
||||
status: 'draft' | 'sent' | 'accepted' | 'rejected';
|
||||
valid_until: string | null;
|
||||
public_token: string;
|
||||
items: { unitPrice: number; quantity: number; optional: boolean }[];
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
const STATUS = {
|
||||
draft: { label: '초안', color: 'bg-slate-700 text-slate-300' },
|
||||
sent: { label: '발송됨', color: 'bg-blue-900/50 text-blue-400' },
|
||||
accepted: { label: '수락됨', color: 'bg-green-900/50 text-green-400' },
|
||||
rejected: { label: '거절됨', color: 'bg-red-900/50 text-red-400' },
|
||||
};
|
||||
|
||||
function calcTotal(items: Quote['items']) {
|
||||
return items.reduce((sum, i) => sum + i.unitPrice * i.quantity, 0);
|
||||
}
|
||||
|
||||
export default function AdminQuotesPage() {
|
||||
const router = useRouter();
|
||||
const [quotes, setQuotes] = useState<Quote[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [deleting, setDeleting] = useState<string | null>(null);
|
||||
const [copied, setCopied] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/admin/quotes')
|
||||
.then((r) => r.json())
|
||||
.then((d) => setQuotes(d.quotes ?? []))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
async function handleCreate() {
|
||||
setCreating(true);
|
||||
const res = await fetch('/api/admin/quotes', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ title: '새 견적서' }),
|
||||
});
|
||||
const d = await res.json();
|
||||
if (d.quote?.id) router.push(`/admin/quotes/${d.quote.id}`);
|
||||
else setCreating(false);
|
||||
}
|
||||
|
||||
async function handleDelete(id: string) {
|
||||
if (!confirm('이 견적서를 삭제할까요?')) return;
|
||||
setDeleting(id);
|
||||
await fetch(`/api/admin/quotes/${id}`, { method: 'DELETE' });
|
||||
setQuotes((prev) => prev.filter((q) => q.id !== id));
|
||||
setDeleting(null);
|
||||
}
|
||||
|
||||
function copyLink(token: string, id: string) {
|
||||
const url = `${window.location.origin}/quote/${token}`;
|
||||
navigator.clipboard.writeText(url);
|
||||
setCopied(id);
|
||||
setTimeout(() => setCopied(null), 2000);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-8">
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">견적서 관리</h1>
|
||||
<p className="text-slate-400 text-sm mt-1">고객에게 제시할 견적서를 작성하고 관리합니다</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleCreate}
|
||||
disabled={creating}
|
||||
className="flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-blue-600 to-violet-600 hover:from-blue-500 hover:to-violet-500 text-white font-semibold rounded-xl transition-all disabled:opacity-60"
|
||||
>
|
||||
{creating ? (
|
||||
<span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
) : (
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
)}
|
||||
새 견적서 작성
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 목록 */}
|
||||
{loading ? (
|
||||
<div className="text-center py-20 text-slate-500">불러오는 중...</div>
|
||||
) : quotes.length === 0 ? (
|
||||
<div className="text-center py-20">
|
||||
<div className="text-5xl mb-4">📄</div>
|
||||
<p className="text-slate-400 text-lg font-medium">아직 견적서가 없습니다</p>
|
||||
<p className="text-slate-600 text-sm mt-2">위 버튼을 눌러 첫 번째 견적서를 작성해보세요</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-slate-900 rounded-2xl border border-slate-800 overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-800">
|
||||
<th className="text-left px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">견적서명</th>
|
||||
<th className="text-left px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">고객</th>
|
||||
<th className="text-left px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">합계</th>
|
||||
<th className="text-left px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">상태</th>
|
||||
<th className="text-left px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">유효기간</th>
|
||||
<th className="text-left px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">작성일</th>
|
||||
<th className="px-6 py-4" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-800/60">
|
||||
{quotes.map((q) => {
|
||||
const st = STATUS[q.status] ?? STATUS.draft;
|
||||
const total = calcTotal(q.items ?? []);
|
||||
return (
|
||||
<tr key={q.id} className="hover:bg-slate-800/30 transition-colors">
|
||||
<td className="px-6 py-4">
|
||||
<Link href={`/admin/quotes/${q.id}`} className="text-white font-medium hover:text-blue-400 transition-colors">
|
||||
{q.title}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="text-slate-300 text-sm">{q.client_name || '—'}</div>
|
||||
<div className="text-slate-500 text-xs">{q.client_email || ''}</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-slate-300 text-sm font-mono">
|
||||
{total > 0 ? `${total.toLocaleString()}원` : '—'}
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`inline-block text-xs font-semibold px-2.5 py-1 rounded-full ${st.color}`}>
|
||||
{st.label}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-slate-400 text-sm">
|
||||
{q.valid_until ? q.valid_until.slice(0, 10) : '—'}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-slate-500 text-sm">
|
||||
{new Date(q.created_at).toLocaleDateString('ko-KR')}
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-2 justify-end">
|
||||
{/* 공개 링크 복사 */}
|
||||
<button
|
||||
onClick={() => copyLink(q.public_token, q.id)}
|
||||
title="고객용 링크 복사"
|
||||
className="p-2 rounded-lg text-slate-400 hover:text-blue-400 hover:bg-slate-800 transition-all"
|
||||
>
|
||||
{copied === q.id ? (
|
||||
<svg className="w-4 h-4 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
{/* 편집 */}
|
||||
<Link
|
||||
href={`/admin/quotes/${q.id}`}
|
||||
className="p-2 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800 transition-all"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
</Link>
|
||||
{/* 삭제 */}
|
||||
<button
|
||||
onClick={() => handleDelete(q.id)}
|
||||
disabled={deleting === q.id}
|
||||
className="p-2 rounded-lg text-slate-400 hover:text-red-400 hover:bg-red-900/20 transition-all disabled:opacity-40"
|
||||
>
|
||||
{deleting === q.id ? (
|
||||
<span className="w-4 h-4 border-2 border-red-400/30 border-t-red-400 rounded-full animate-spin inline-block" />
|
||||
) : (
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
47
app/api/admin/quotes/[id]/route.ts
Normal file
47
app/api/admin/quotes/[id]/route.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
import { NextResponse } from 'next/server';
|
||||
import { createAdminClient } from '@/lib/supabase/admin';
|
||||
import { verifyAdminTokenNode } from '@/lib/admin-auth';
|
||||
import { cookies } from 'next/headers';
|
||||
|
||||
export const runtime = 'nodejs';
|
||||
|
||||
async function checkAuth() {
|
||||
const cookieStore = await cookies();
|
||||
const token = cookieStore.get('admin_token')?.value;
|
||||
return token && verifyAdminTokenNode(token);
|
||||
}
|
||||
|
||||
export async function GET(_req: Request, { params }: { params: Promise<{ id: string }> }) {
|
||||
if (!(await checkAuth())) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||
const { id } = await params;
|
||||
const supabase = createAdminClient();
|
||||
const { data, error } = await supabase.from('quotes').select('*').eq('id', id).single();
|
||||
if (error) return NextResponse.json({ error: error.message }, { status: 404 });
|
||||
return NextResponse.json({ quote: data });
|
||||
}
|
||||
|
||||
export async function PUT(request: Request, { params }: { params: Promise<{ id: string }> }) {
|
||||
if (!(await checkAuth())) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||
const { id } = await params;
|
||||
const body = await request.json();
|
||||
const supabase = createAdminClient();
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('quotes')
|
||||
.update({ ...body, updated_at: new Date().toISOString() })
|
||||
.eq('id', id)
|
||||
.select()
|
||||
.single();
|
||||
|
||||
if (error) return NextResponse.json({ error: error.message }, { status: 500 });
|
||||
return NextResponse.json({ quote: data });
|
||||
}
|
||||
|
||||
export async function DELETE(_req: Request, { params }: { params: Promise<{ id: string }> }) {
|
||||
if (!(await checkAuth())) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||
const { id } = await params;
|
||||
const supabase = createAdminClient();
|
||||
const { error } = await supabase.from('quotes').delete().eq('id', id);
|
||||
if (error) return NextResponse.json({ error: error.message }, { status: 500 });
|
||||
return NextResponse.json({ success: true });
|
||||
}
|
||||
55
app/api/admin/quotes/route.ts
Normal file
55
app/api/admin/quotes/route.ts
Normal file
@@ -0,0 +1,55 @@
|
||||
import { NextResponse } from 'next/server';
|
||||
import { createAdminClient } from '@/lib/supabase/admin';
|
||||
import { verifyAdminTokenNode } from '@/lib/admin-auth';
|
||||
import { cookies } from 'next/headers';
|
||||
|
||||
export const runtime = 'nodejs';
|
||||
|
||||
async function checkAuth() {
|
||||
const cookieStore = await cookies();
|
||||
const token = cookieStore.get('admin_token')?.value;
|
||||
return token && verifyAdminTokenNode(token);
|
||||
}
|
||||
|
||||
export async function GET() {
|
||||
if (!(await checkAuth())) {
|
||||
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||
}
|
||||
|
||||
const supabase = createAdminClient();
|
||||
const { data, error } = await supabase
|
||||
.from('quotes')
|
||||
.select('id, title, client_name, client_email, status, valid_until, public_token, items, created_at')
|
||||
.order('created_at', { ascending: false });
|
||||
|
||||
if (error) return NextResponse.json({ error: error.message }, { status: 500 });
|
||||
return NextResponse.json({ quotes: data ?? [] });
|
||||
}
|
||||
|
||||
export async function POST(request: Request) {
|
||||
if (!(await checkAuth())) {
|
||||
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||
}
|
||||
|
||||
const body = await request.json();
|
||||
const supabase = createAdminClient();
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('quotes')
|
||||
.insert({
|
||||
title: body.title || '새 견적서',
|
||||
client_name: body.client_name || '',
|
||||
client_email: body.client_email || '',
|
||||
valid_until: body.valid_until || null,
|
||||
wbs: body.wbs || [],
|
||||
items: body.items || [],
|
||||
maintenance: body.maintenance || [],
|
||||
notes: body.notes || '',
|
||||
status: 'draft',
|
||||
})
|
||||
.select()
|
||||
.single();
|
||||
|
||||
if (error) return NextResponse.json({ error: error.message }, { status: 500 });
|
||||
return NextResponse.json({ quote: data }, { status: 201 });
|
||||
}
|
||||
48
app/api/quote/[token]/route.ts
Normal file
48
app/api/quote/[token]/route.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
import { NextResponse } from 'next/server';
|
||||
import { createAdminClient } from '@/lib/supabase/admin';
|
||||
|
||||
export const runtime = 'nodejs';
|
||||
|
||||
// 고객용 공개 견적서 조회 (토큰 기반)
|
||||
export async function GET(_req: Request, { params }: { params: Promise<{ token: string }> }) {
|
||||
const { token } = await params;
|
||||
const supabase = createAdminClient();
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('quotes')
|
||||
.select('id, title, client_name, valid_until, status, wbs, items, maintenance, notes, created_at')
|
||||
.eq('public_token', token)
|
||||
.single();
|
||||
|
||||
if (error || !data) return NextResponse.json({ error: 'Not found' }, { status: 404 });
|
||||
return NextResponse.json({ quote: data });
|
||||
}
|
||||
|
||||
// 고객이 견적 수락
|
||||
export async function POST(request: Request, { params }: { params: Promise<{ token: string }> }) {
|
||||
const { token } = await params;
|
||||
const body = await request.json(); // { selectedItems, selectedMaintenance }
|
||||
const supabase = createAdminClient();
|
||||
|
||||
const { data: quote, error: findErr } = await supabase
|
||||
.from('quotes')
|
||||
.select('id, title, client_name, client_email')
|
||||
.eq('public_token', token)
|
||||
.single();
|
||||
|
||||
if (findErr || !quote) return NextResponse.json({ error: 'Not found' }, { status: 404 });
|
||||
|
||||
// 상태를 accepted로 변경
|
||||
await supabase
|
||||
.from('quotes')
|
||||
.update({
|
||||
status: 'accepted',
|
||||
accepted_items: body.selectedItems,
|
||||
accepted_maintenance: body.selectedMaintenance,
|
||||
accepted_total: body.total,
|
||||
updated_at: new Date().toISOString(),
|
||||
})
|
||||
.eq('id', quote.id);
|
||||
|
||||
return NextResponse.json({ success: true });
|
||||
}
|
||||
@@ -231,14 +231,14 @@ export default function FreelancePage() {
|
||||
현재 프로젝트 접수 가능
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-extrabold text-white tracking-tight leading-tight mb-4">
|
||||
맞춤 개발,<br />
|
||||
연락 두절? 그런 거 없습니다.<br />
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#5ba4ff] to-[#818cf8]">
|
||||
처음부터 직접 만들어드립니다
|
||||
직접 만들고, 직접 책임집니다
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-blue-200/60 text-base md:text-lg max-w-xl mx-auto leading-relaxed mb-2">
|
||||
검증된 코드 품질을 합리적인 가격에 경험하세요.
|
||||
아이디어만 있어도 충분합니다.
|
||||
개발자에게 맡겼다가 연락 두절된 경험 있으신가요?<br />
|
||||
계약서 작성, 중간 보고, 소스코드 인도까지 — 단계마다 증거를 남깁니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -437,11 +437,11 @@ export default function FreelancePage() {
|
||||
</div>
|
||||
<ul className="space-y-3.5">
|
||||
{[
|
||||
{ icon: '🏢', title: '대기업 백엔드 경력', desc: '대기업 수준의 코드 품질과 개발 프로세스 적용' },
|
||||
{ icon: '🖥️', title: '운영 중인 실제 서비스', desc: 'NAS 서버에서 로또·주식 시스템 직접 운영' },
|
||||
{ icon: '📄', title: '계약서 + 소스코드 제공', desc: '계약서 포함, 완성 후 소스코드 전체 인도' },
|
||||
{ icon: '🔒', title: '1개월 무상 AS 보장', desc: '납품 후 버그·문제 발생 시 무료 수정' },
|
||||
{ icon: '⚡', title: '24시간 내 답변', desc: '문의 후 하루 이내 답변 보장' },
|
||||
{ icon: '🌐', title: '지금 URL로 직접 확인', desc: 'jaengseung-made.com — 로또 분석, 주식 자동매매 지금도 운영 중' },
|
||||
{ icon: '📋', title: '계약서 먼저, 개발 나중', desc: '구두 약속 없음 — 견적서·계약서 발송 후 착수' },
|
||||
{ icon: '🔒', title: '납품 전 전액 환불 보장', desc: '마음에 안 드시면 이유 불문 전액 환불' },
|
||||
{ icon: '📦', title: '소스코드 100% 인도', desc: '완성 후 전체 소스코드 + 배포 가이드 제공' },
|
||||
{ icon: '⚡', title: '납기 지연 시 패널티', desc: '하루 늦을 때마다 10만원 감면 — 그래서 안 늦습니다' },
|
||||
].map((item) => (
|
||||
<li key={item.title} className="flex items-start gap-3">
|
||||
<span className="text-base flex-shrink-0 mt-0.5">{item.icon}</span>
|
||||
@@ -462,7 +462,7 @@ export default function FreelancePage() {
|
||||
<div className="text-center mb-8">
|
||||
<p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">CONTACT</p>
|
||||
<h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b]">프로젝트 문의</h2>
|
||||
<p className="text-slate-500 text-sm mt-2">아이디어만 있어도 충분합니다. 24시간 이내 답변드립니다.</p>
|
||||
<p className="text-slate-500 text-sm mt-2">개발사 연락 두절로 손해 본 경험 있으신가요? 여기선 계약서부터 시작합니다.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-5 gap-6">
|
||||
|
||||
34
app/page.tsx
34
app/page.tsx
@@ -5,10 +5,10 @@ import Link from 'next/link';
|
||||
import ContactModal from './components/ContactModal';
|
||||
|
||||
const stats = [
|
||||
{ value: '7년+', label: '개발 경력' },
|
||||
{ value: '100+', label: '완료 프로젝트' },
|
||||
{ value: '24h', label: '평균 응답' },
|
||||
{ value: '98%', label: '고객 만족도' },
|
||||
{ value: '3개', label: '지금 운영 중인 서비스' },
|
||||
{ value: '24h', label: '이내 견적 발송 보장' },
|
||||
{ value: '100%', label: '소스코드 전달' },
|
||||
{ value: '1개월', label: '무상 AS 보장' },
|
||||
];
|
||||
|
||||
const techStack = [
|
||||
@@ -83,18 +83,18 @@ export default function Home() {
|
||||
<div className="relative max-w-3xl mx-auto text-center">
|
||||
<div className="inline-flex items-center gap-2 bg-blue-400/10 border border-blue-400/25 text-blue-300 text-xs font-semibold px-4 py-1.5 rounded-full mb-5 tracking-wide">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
|
||||
7년차 대기업 백엔드 개발자 · 현재 서비스 운영 중
|
||||
지금 이 순간도 작동 중인 서비스가 있습니다
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-extrabold text-white leading-tight mb-5 tracking-tight">
|
||||
실제로 작동하는<br />
|
||||
URL을 드립니다.<br />
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#5ba4ff] to-[#818cf8]">
|
||||
개발 서비스
|
||||
</span>
|
||||
를 제공합니다
|
||||
직접 확인하고
|
||||
</span>{' '}
|
||||
결정하세요
|
||||
</h1>
|
||||
<p className="text-blue-200/70 text-base md:text-lg leading-relaxed mb-8 max-w-xl mx-auto">
|
||||
대기업 개발 경험을 바탕으로, NAS 서버에서 로또 분석·주식 자동매매를
|
||||
직접 운영하며 검증된 솔루션만 제공합니다.
|
||||
jaengseung-made.com — 로또 분석, 주식 자동매매, 구독 결제까지
|
||||
직접 만들고 지금도 운영 중입니다. 당신 것도 이렇게 만들어드립니다.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-3 justify-center">
|
||||
<button
|
||||
@@ -104,7 +104,7 @@ export default function Home() {
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
||||
</svg>
|
||||
무료 상담 신청
|
||||
URL 확인 후 상담 신청
|
||||
</button>
|
||||
<a
|
||||
href="mailto:bgg8988@gmail.com"
|
||||
@@ -380,14 +380,14 @@ export default function Home() {
|
||||
<div className="bg-white rounded-2xl border border-[#dbe8ff] p-6">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<div className="w-1 h-5 bg-gradient-to-b from-[#1a56db] to-[#4338ca] rounded-full" />
|
||||
<h3 className="font-bold text-[#04102b] text-sm">신뢰할 수 있는 이유</h3>
|
||||
<h3 className="font-bold text-[#04102b] text-sm">왜 맡겨도 되는가</h3>
|
||||
</div>
|
||||
<ul className="space-y-3">
|
||||
{[
|
||||
{ icon: '🏢', text: '7년차 대기업 백엔드 개발 경력' },
|
||||
{ icon: '🖥️', text: 'NAS 서버에서 실제 서비스 직접 운영 중' },
|
||||
{ icon: '📱', text: '텔레그램·이메일 실시간 커뮤니케이션' },
|
||||
{ icon: '🔒', text: '1개월 무상 유지보수 + 평생 AS 가능' },
|
||||
{ icon: '🌐', text: 'jaengseung-made.com — 지금 바로 확인 가능한 실제 운영 서비스' },
|
||||
{ icon: '🔒', text: '납품 전 마음에 안 드시면 이유 불문 전액 환불' },
|
||||
{ icon: '📋', text: '계약서 + 소스코드 전체 제공 — 잠수 없음, 연락 두절 없음' },
|
||||
{ icon: '⚡', text: '24시간 이내 답변 · 납기 지연 시 패널티 적용' },
|
||||
].map((item) => (
|
||||
<li key={item.text} className="flex items-start gap-2.5 text-sm text-slate-700">
|
||||
<span className="text-base flex-shrink-0 mt-0.5">{item.icon}</span>
|
||||
|
||||
466
app/quote/[token]/page.tsx
Normal file
466
app/quote/[token]/page.tsx
Normal file
@@ -0,0 +1,466 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
|
||||
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 Quote {
|
||||
id: string; title: string; client_name: string; valid_until: string | null;
|
||||
status: string; wbs: WBSPhase[]; items: QuoteItem[];
|
||||
maintenance: MaintenancePlan[]; notes: string; created_at: string;
|
||||
}
|
||||
|
||||
const CATEGORY_COLORS: Record<string, string> = {
|
||||
기획: '#60a5fa', 디자인: '#f472b6', 개발: '#34d399', 인프라: '#fb923c',
|
||||
유지보수: '#a78bfa', 기타: '#94a3b8',
|
||||
};
|
||||
|
||||
export default function QuotePage() {
|
||||
const { token } = useParams<{ token: string }>();
|
||||
const [quote, setQuote] = useState<Quote | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [notFound, setNotFound] = useState(false);
|
||||
|
||||
// 선택 상태
|
||||
const [checkedOptional, setCheckedOptional] = useState<Record<string, boolean>>({});
|
||||
const [selectedMaintenance, setSelectedMaintenance] = useState<string | null>(null);
|
||||
const [activeTab, setActiveTab] = useState<'overview' | 'wbs' | 'quote' | 'maintenance'>('overview');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`/api/quote/${token}`)
|
||||
.then((r) => r.ok ? r.json() : Promise.reject())
|
||||
.then((d) => {
|
||||
setQuote(d.quote);
|
||||
// 기본값: 필수 항목은 항상 체크, 선택 항목은 기본 체크
|
||||
const init: Record<string, boolean> = {};
|
||||
(d.quote.items as QuoteItem[]).forEach((i) => { init[i.id] = true; });
|
||||
setCheckedOptional(init);
|
||||
// 추천 유지보수 플랜 기본 선택
|
||||
const rec = (d.quote.maintenance as MaintenancePlan[]).find((p) => p.recommended);
|
||||
if (rec) setSelectedMaintenance(rec.id);
|
||||
else if (d.quote.maintenance.length > 0) setSelectedMaintenance(d.quote.maintenance[0].id);
|
||||
})
|
||||
.catch(() => setNotFound(true))
|
||||
.finally(() => setLoading(false));
|
||||
}, [token]);
|
||||
|
||||
const requiredItems = quote?.items.filter((i) => !i.optional) ?? [];
|
||||
const optionalItems = quote?.items.filter((i) => i.optional) ?? [];
|
||||
|
||||
const requiredTotal = requiredItems.reduce((s, i) => s + i.unitPrice * i.quantity, 0);
|
||||
const optionalTotal = optionalItems
|
||||
.filter((i) => checkedOptional[i.id])
|
||||
.reduce((s, i) => s + i.unitPrice * i.quantity, 0);
|
||||
const selectedPlan = quote?.maintenance.find((p) => p.id === selectedMaintenance);
|
||||
const maintenanceTotal = selectedPlan ? selectedPlan.monthlyFee : 0;
|
||||
const grandTotal = requiredTotal + optionalTotal;
|
||||
|
||||
async function handleAccept() {
|
||||
if (!quote) return;
|
||||
setSubmitting(true);
|
||||
const selectedItems = quote.items.filter((i) => !i.optional || checkedOptional[i.id]).map((i) => i.id);
|
||||
await fetch(`/api/quote/${token}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ selectedItems, selectedMaintenance, total: grandTotal }),
|
||||
});
|
||||
setSubmitting(false);
|
||||
setSubmitted(true);
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ minHeight: '100vh', background: '#0a0f1e', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div style={{ width: 40, height: 40, border: '3px solid rgba(99,102,241,0.3)', borderTopColor: '#6366f1', borderRadius: '50%', animation: 'spin 0.8s linear infinite', margin: '0 auto 16px' }} />
|
||||
<p style={{ color: '#475569', fontFamily: 'sans-serif' }}>견적서를 불러오는 중...</p>
|
||||
</div>
|
||||
<style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (notFound || !quote) {
|
||||
return (
|
||||
<div style={{ minHeight: '100vh', background: '#0a0f1e', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 16 }}>
|
||||
<div style={{ fontSize: 64 }}>🔍</div>
|
||||
<h1 style={{ color: 'white', fontSize: 24, fontWeight: 700, fontFamily: 'sans-serif' }}>견적서를 찾을 수 없습니다</h1>
|
||||
<p style={{ color: '#475569', fontFamily: 'sans-serif' }}>링크가 만료되었거나 잘못된 주소입니다</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (submitted) {
|
||||
return (
|
||||
<div style={{ minHeight: '100vh', background: '#0a0f1e', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 20, padding: 24 }}>
|
||||
<style>{`@keyframes pop { 0% { transform: scale(0.5); opacity: 0; } 70% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }`}</style>
|
||||
<div style={{ fontSize: 80, animation: 'pop 0.5s ease forwards' }}>🎉</div>
|
||||
<h1 style={{ color: 'white', fontSize: 28, fontWeight: 800, fontFamily: 'sans-serif', textAlign: 'center' }}>견적을 수락해 주셨습니다!</h1>
|
||||
<p style={{ color: '#94a3b8', fontFamily: 'sans-serif', textAlign: 'center', lineHeight: 1.7 }}>
|
||||
담당자가 확인 후 빠른 시일 내에 연락드리겠습니다.<br />
|
||||
선택하신 내용을 기반으로 계약을 진행합니다.
|
||||
</p>
|
||||
<div style={{ background: '#0f172a', border: '1px solid rgba(99,102,241,0.3)', borderRadius: 16, padding: '24px 32px', textAlign: 'center' }}>
|
||||
<div style={{ color: '#94a3b8', fontSize: 14, fontFamily: 'sans-serif', marginBottom: 8 }}>최종 견적 금액</div>
|
||||
<div style={{ color: 'white', fontSize: 36, fontWeight: 800, fontFamily: 'sans-serif' }}>{grandTotal.toLocaleString()}원</div>
|
||||
{maintenanceTotal > 0 && (
|
||||
<div style={{ color: '#6366f1', fontSize: 14, fontFamily: 'sans-serif', marginTop: 6 }}>+ 유지보수 {maintenanceTotal.toLocaleString()}원/월</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{ key: 'overview', label: '개요' },
|
||||
{ key: 'wbs', label: 'WBS', show: quote.wbs.length > 0 },
|
||||
{ key: 'quote', label: '견적 항목', show: quote.items.length > 0 },
|
||||
{ key: 'maintenance', label: '향후 관리', show: quote.maintenance.length > 0 },
|
||||
].filter((t) => t.show !== false);
|
||||
|
||||
return (
|
||||
<div style={{ background: '#0a0f1e', minHeight: '100vh', color: 'white', fontFamily: "'Pretendard', 'Noto Sans KR', sans-serif" }}>
|
||||
<style>{`
|
||||
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
||||
@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
|
||||
* { box-sizing: border-box; }
|
||||
input[type=checkbox] { accent-color: #6366f1; width: 18px; height: 18px; cursor: pointer; }
|
||||
input[type=radio] { accent-color: #6366f1; width: 18px; height: 18px; cursor: pointer; }
|
||||
`}</style>
|
||||
|
||||
{/* 헤더 */}
|
||||
<div style={{ background: 'linear-gradient(180deg, #0f172a 0%, #0a0f1e 100%)', borderBottom: '1px solid rgba(255,255,255,0.06)', padding: '32px 24px 0' }}>
|
||||
<div style={{ maxWidth: 900, margin: '0 auto' }}>
|
||||
{/* 브랜드 */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 32 }}>
|
||||
<div style={{ width: 36, height: 36, borderRadius: 10, background: 'linear-gradient(135deg, #6366f1, #8b5cf6)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, fontWeight: 700 }}>쟁</div>
|
||||
<div>
|
||||
<div style={{ color: 'white', fontWeight: 700, fontSize: 14 }}>쟁승메이드</div>
|
||||
<div style={{ color: '#475569', fontSize: 11 }}>jaengseung-made.com</div>
|
||||
</div>
|
||||
<div style={{ marginLeft: 'auto' }}>
|
||||
<span style={{ background: 'rgba(99,102,241,0.15)', border: '1px solid rgba(99,102,241,0.3)', color: '#818cf8', fontSize: 11, fontWeight: 600, padding: '4px 12px', borderRadius: 100 }}>
|
||||
공식 견적서
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 제목 */}
|
||||
<div style={{ animation: 'fadeUp 0.6s ease forwards', paddingBottom: 28 }}>
|
||||
<h1 style={{ fontSize: 'clamp(22px, 4vw, 36px)', fontWeight: 800, color: 'white', marginBottom: 12, lineHeight: 1.2 }}>
|
||||
{quote.title}
|
||||
</h1>
|
||||
<div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
|
||||
{quote.client_name && (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6, color: '#94a3b8', fontSize: 14 }}>
|
||||
<span>👤</span> {quote.client_name} 고객님
|
||||
</div>
|
||||
)}
|
||||
{quote.valid_until && (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6, color: '#94a3b8', fontSize: 14 }}>
|
||||
<span>📅</span> 유효기간: {quote.valid_until.slice(0, 10)}
|
||||
</div>
|
||||
)}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6, color: '#94a3b8', fontSize: 14 }}>
|
||||
<span>📄</span> 발행일: {new Date(quote.created_at).toLocaleDateString('ko-KR')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 탭 */}
|
||||
<div style={{ display: 'flex', gap: 0, borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
|
||||
{tabs.map((t) => (
|
||||
<button key={t.key} onClick={() => setActiveTab(t.key as typeof activeTab)}
|
||||
style={{
|
||||
padding: '12px 20px', fontSize: 14, fontWeight: 500, border: 'none', cursor: 'pointer',
|
||||
background: 'none', color: activeTab === t.key ? '#818cf8' : '#64748b',
|
||||
borderBottom: `2px solid ${activeTab === t.key ? '#6366f1' : 'transparent'}`,
|
||||
transition: 'all 0.2s', marginBottom: -1,
|
||||
}}>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 본문 */}
|
||||
<div style={{ maxWidth: 900, margin: '0 auto', padding: '32px 24px' }}>
|
||||
|
||||
{/* ── 개요 ── */}
|
||||
{activeTab === 'overview' && (
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 16, animation: 'fadeUp 0.4s ease' }}>
|
||||
<StatCard label="총 필수 항목" value={requiredItems.length + '개'} sub="반드시 포함" color="#60a5fa" />
|
||||
<StatCard label="총 선택 항목" value={optionalItems.length + '개'} sub="고객 선택 가능" color="#a78bfa" />
|
||||
<StatCard label="필수 견적 합계" value={requiredTotal.toLocaleString() + '원'} sub="VAT 별도" color="#34d399" />
|
||||
<StatCard
|
||||
label="선택 포함 합계"
|
||||
value={grandTotal.toLocaleString() + '원'}
|
||||
sub={optionalItems.filter(i => checkedOptional[i.id]).length + '개 선택됨'}
|
||||
color="#f59e0b"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── WBS ── */}
|
||||
{activeTab === 'wbs' && (
|
||||
<div style={{ animation: 'fadeUp 0.4s ease' }}>
|
||||
{quote.wbs.map((phase, pi) => (
|
||||
<div key={phase.id} style={{ marginBottom: 24 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
|
||||
<div style={{ width: 32, height: 32, borderRadius: 8, background: 'linear-gradient(135deg, #6366f1, #8b5cf6)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 700, flexShrink: 0 }}>
|
||||
{pi + 1}
|
||||
</div>
|
||||
<h3 style={{ fontSize: 18, fontWeight: 700, color: 'white' }}>{phase.phase}</h3>
|
||||
</div>
|
||||
<div style={{ background: '#0f172a', borderRadius: 12, border: '1px solid rgba(255,255,255,0.06)', overflow: 'hidden' }}>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||||
<thead>
|
||||
<tr style={{ borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
|
||||
<th style={thStyle}>작업명</th>
|
||||
<th style={{ ...thStyle, width: 100 }}>기간</th>
|
||||
<th style={thStyle}>설명</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{phase.tasks.map((task) => (
|
||||
<tr key={task.id} style={{ borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
|
||||
<td style={tdStyle}>{task.name}</td>
|
||||
<td style={{ ...tdStyle, color: '#818cf8', fontWeight: 600 }}>{task.duration}</td>
|
||||
<td style={{ ...tdStyle, color: '#64748b' }}>{task.description || '—'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── 견적 항목 ── */}
|
||||
{activeTab === 'quote' && (
|
||||
<div style={{ animation: 'fadeUp 0.4s ease' }}>
|
||||
{/* 필수 항목 */}
|
||||
{requiredItems.length > 0 && (
|
||||
<section style={{ marginBottom: 32 }}>
|
||||
<h3 style={{ fontSize: 16, fontWeight: 700, color: '#60a5fa', marginBottom: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<span style={{ width: 8, height: 8, borderRadius: '50%', background: '#60a5fa', display: 'inline-block' }} />
|
||||
필수 항목
|
||||
</h3>
|
||||
<div style={{ background: '#0f172a', borderRadius: 12, border: '1px solid rgba(255,255,255,0.06)', overflow: 'hidden' }}>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||||
<thead>
|
||||
<tr style={{ borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
|
||||
<th style={thStyle}>카테고리</th>
|
||||
<th style={thStyle}>항목명</th>
|
||||
<th style={thStyle}>설명</th>
|
||||
<th style={{ ...thStyle, textAlign: 'right' }}>수량</th>
|
||||
<th style={{ ...thStyle, textAlign: 'right' }}>단가</th>
|
||||
<th style={{ ...thStyle, textAlign: 'right' }}>금액</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{requiredItems.map((item) => (
|
||||
<tr key={item.id} style={{ borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
|
||||
<td style={tdStyle}>
|
||||
<span style={{ background: (CATEGORY_COLORS[item.category] || '#94a3b8') + '20', color: CATEGORY_COLORS[item.category] || '#94a3b8', fontSize: 11, fontWeight: 600, padding: '2px 8px', borderRadius: 100 }}>
|
||||
{item.category}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ ...tdStyle, fontWeight: 600, color: 'white' }}>{item.name}</td>
|
||||
<td style={{ ...tdStyle, color: '#64748b' }}>{item.description || '—'}</td>
|
||||
<td style={{ ...tdStyle, textAlign: 'right', color: '#94a3b8' }}>{item.quantity}</td>
|
||||
<td style={{ ...tdStyle, textAlign: 'right', color: '#94a3b8', fontFamily: 'monospace' }}>{item.unitPrice.toLocaleString()}</td>
|
||||
<td style={{ ...tdStyle, textAlign: 'right', fontWeight: 700, color: 'white', fontFamily: 'monospace' }}>{(item.unitPrice * item.quantity).toLocaleString()}원</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 선택 항목 */}
|
||||
{optionalItems.length > 0 && (
|
||||
<section style={{ marginBottom: 32 }}>
|
||||
<h3 style={{ fontSize: 16, fontWeight: 700, color: '#a78bfa', marginBottom: 6, display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<span style={{ width: 8, height: 8, borderRadius: '50%', background: '#a78bfa', display: 'inline-block' }} />
|
||||
선택 항목
|
||||
</h3>
|
||||
<p style={{ color: '#475569', fontSize: 13, marginBottom: 12 }}>아래 항목 중 원하시는 것을 선택하세요 — 총 금액에 실시간으로 반영됩니다</p>
|
||||
<div style={{ background: '#0f172a', borderRadius: 12, border: '1px solid rgba(167,139,250,0.2)', overflow: 'hidden' }}>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||||
<thead>
|
||||
<tr style={{ borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
|
||||
<th style={{ ...thStyle, width: 50 }}>선택</th>
|
||||
<th style={thStyle}>카테고리</th>
|
||||
<th style={thStyle}>항목명</th>
|
||||
<th style={thStyle}>설명</th>
|
||||
<th style={{ ...thStyle, textAlign: 'right' }}>수량</th>
|
||||
<th style={{ ...thStyle, textAlign: 'right' }}>금액</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{optionalItems.map((item) => (
|
||||
<tr key={item.id}
|
||||
onClick={() => setCheckedOptional((prev) => ({ ...prev, [item.id]: !prev[item.id] }))}
|
||||
style={{ borderBottom: '1px solid rgba(255,255,255,0.04)', cursor: 'pointer', background: checkedOptional[item.id] ? 'rgba(167,139,250,0.05)' : 'transparent', transition: 'background 0.2s' }}>
|
||||
<td style={{ ...tdStyle, textAlign: 'center' }}>
|
||||
<input type="checkbox" checked={!!checkedOptional[item.id]} onChange={() => {}} />
|
||||
</td>
|
||||
<td style={tdStyle}>
|
||||
<span style={{ background: (CATEGORY_COLORS[item.category] || '#94a3b8') + '20', color: CATEGORY_COLORS[item.category] || '#94a3b8', fontSize: 11, fontWeight: 600, padding: '2px 8px', borderRadius: 100 }}>
|
||||
{item.category}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ ...tdStyle, fontWeight: 600, color: checkedOptional[item.id] ? 'white' : '#64748b' }}>{item.name}</td>
|
||||
<td style={{ ...tdStyle, color: '#475569' }}>{item.description || '—'}</td>
|
||||
<td style={{ ...tdStyle, textAlign: 'right', color: '#64748b' }}>{item.quantity}</td>
|
||||
<td style={{ ...tdStyle, textAlign: 'right', fontWeight: 700, color: checkedOptional[item.id] ? '#a78bfa' : '#475569', fontFamily: 'monospace' }}>
|
||||
{(item.unitPrice * item.quantity).toLocaleString()}원
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 합계 */}
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||
<div style={{ background: '#0f172a', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 16, padding: '24px 28px', width: 320 }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
|
||||
<span style={{ color: '#64748b', fontSize: 14 }}>필수 항목</span>
|
||||
<span style={{ color: '#94a3b8', fontSize: 14, fontFamily: 'monospace' }}>{requiredTotal.toLocaleString()}원</span>
|
||||
</div>
|
||||
{optionalTotal > 0 && (
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
|
||||
<span style={{ color: '#64748b', fontSize: 14 }}>선택 항목</span>
|
||||
<span style={{ color: '#a78bfa', fontSize: 14, fontFamily: 'monospace' }}>+{optionalTotal.toLocaleString()}원</span>
|
||||
</div>
|
||||
)}
|
||||
<div style={{ borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
|
||||
<span style={{ color: 'white', fontWeight: 700, fontSize: 16 }}>합계 (VAT 별도)</span>
|
||||
<span style={{ color: 'white', fontWeight: 800, fontSize: 24, fontFamily: 'monospace' }}>{grandTotal.toLocaleString()}원</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── 향후 관리 ── */}
|
||||
{activeTab === 'maintenance' && (
|
||||
<div style={{ animation: 'fadeUp 0.4s ease' }}>
|
||||
<p style={{ color: '#64748b', fontSize: 14, marginBottom: 20 }}>납품 후 유지보수 플랜을 선택해주세요 (선택 사항)</p>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 16 }}>
|
||||
{quote.maintenance.map((plan) => {
|
||||
const isSelected = selectedMaintenance === plan.id;
|
||||
return (
|
||||
<div key={plan.id} onClick={() => setSelectedMaintenance(isSelected ? null : plan.id)}
|
||||
style={{
|
||||
background: isSelected ? 'linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.1))' : '#0f172a',
|
||||
border: `1px solid ${isSelected ? '#6366f1' : 'rgba(255,255,255,0.06)'}`,
|
||||
borderRadius: 16, padding: 24, cursor: 'pointer', transition: 'all 0.25s', position: 'relative',
|
||||
}}>
|
||||
{plan.recommended && (
|
||||
<div style={{ position: 'absolute', top: 16, right: 16, background: '#6366f1', color: 'white', fontSize: 10, fontWeight: 700, padding: '3px 10px', borderRadius: 100 }}>추천</div>
|
||||
)}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
|
||||
<input type="radio" checked={isSelected} onChange={() => {}} />
|
||||
<div>
|
||||
<div style={{ color: 'white', fontWeight: 700, fontSize: 16 }}>{plan.name}</div>
|
||||
<div style={{ color: '#475569', fontSize: 13 }}>{plan.period}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ fontSize: 24, fontWeight: 800, color: isSelected ? '#818cf8' : 'white', marginBottom: 16, fontFamily: 'monospace' }}>
|
||||
{plan.monthlyFee === 0 ? '무료' : plan.monthlyFee.toLocaleString() + '원/월'}
|
||||
</div>
|
||||
<div style={{ borderTop: '1px solid rgba(255,255,255,0.06)', paddingTop: 16, display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
{plan.includes.map((inc, i) => (
|
||||
<div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 8, fontSize: 13, color: '#94a3b8' }}>
|
||||
<span style={{ color: '#6366f1', flexShrink: 0, marginTop: 1 }}>✓</span>
|
||||
{inc}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 특이사항 */}
|
||||
{quote.notes && (
|
||||
<div style={{ marginTop: 40, background: '#0f172a', borderRadius: 12, border: '1px solid rgba(255,255,255,0.06)', padding: 24 }}>
|
||||
<h3 style={{ fontSize: 14, fontWeight: 700, color: '#475569', marginBottom: 12, textTransform: 'uppercase', letterSpacing: '0.1em' }}>특이사항 및 참고사항</h3>
|
||||
<p style={{ color: '#64748b', fontSize: 14, lineHeight: 1.8, whiteSpace: 'pre-wrap' }}>{quote.notes}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 하단 고정 바 — 견적 수락 */}
|
||||
{quote.status !== 'accepted' && quote.status !== 'rejected' && (
|
||||
<div style={{ position: 'fixed', bottom: 0, left: 0, right: 0, background: 'rgba(10,15,30,0.95)', backdropFilter: 'blur(12px)', borderTop: '1px solid rgba(255,255,255,0.08)', padding: '16px 24px' }}>
|
||||
<div style={{ maxWidth: 900, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
|
||||
<div>
|
||||
<div style={{ color: '#64748b', fontSize: 13 }}>현재 선택된 견적 합계</div>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
|
||||
<span style={{ color: 'white', fontSize: 24, fontWeight: 800, fontFamily: 'monospace' }}>{grandTotal.toLocaleString()}원</span>
|
||||
{maintenanceTotal > 0 && selectedPlan && (
|
||||
<span style={{ color: '#6366f1', fontSize: 13 }}>+ {maintenanceTotal.toLocaleString()}원/월 ({selectedPlan.name})</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={handleAccept} disabled={submitting}
|
||||
style={{
|
||||
padding: '14px 36px', borderRadius: 12, border: 'none', cursor: 'pointer',
|
||||
background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
|
||||
color: 'white', fontSize: 16, fontWeight: 700, transition: 'all 0.2s',
|
||||
boxShadow: '0 8px 32px rgba(99,102,241,0.4)',
|
||||
opacity: submitting ? 0.7 : 1,
|
||||
}}>
|
||||
{submitting ? '처리 중...' : '이 견적으로 진행하겠습니다 →'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 수락된 경우 */}
|
||||
{quote.status === 'accepted' && (
|
||||
<div style={{ position: 'fixed', bottom: 0, left: 0, right: 0, background: 'rgba(16,185,129,0.1)', backdropFilter: 'blur(12px)', borderTop: '1px solid rgba(16,185,129,0.3)', padding: '16px 24px', textAlign: 'center' }}>
|
||||
<p style={{ color: '#34d399', fontWeight: 600, fontSize: 16 }}>✓ 이미 수락된 견적서입니다</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 하단 여백 */}
|
||||
<div style={{ height: 80 }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatCard({ label, value, sub, color }: { label: string; value: string; sub: string; color: string }) {
|
||||
return (
|
||||
<div style={{ background: '#0f172a', border: `1px solid ${color}20`, borderRadius: 16, padding: 24 }}>
|
||||
<div style={{ color: '#475569', fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 10 }}>{label}</div>
|
||||
<div style={{ color, fontSize: 28, fontWeight: 800, fontFamily: 'monospace', marginBottom: 4 }}>{value}</div>
|
||||
<div style={{ color: '#374151', fontSize: 12 }}>{sub}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const thStyle: React.CSSProperties = { padding: '12px 16px', textAlign: 'left', fontSize: 11, fontWeight: 600, color: '#475569', textTransform: 'uppercase', letterSpacing: '0.08em' };
|
||||
const tdStyle: React.CSSProperties = { padding: '14px 16px', fontSize: 14, color: '#94a3b8' };
|
||||
@@ -306,7 +306,7 @@ export default function AutomationPage() {
|
||||
onClick={() => openModal('업무 자동화')}
|
||||
className="inline-flex items-center gap-2 bg-cyan-400 hover:bg-cyan-300 text-[#012030] px-8 py-3 rounded-xl font-extrabold text-sm transition-all shadow-lg shadow-cyan-900/30"
|
||||
>
|
||||
무료 상담 신청 →
|
||||
자동화 상담 신청 (계약서 포함) →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -262,12 +262,12 @@ export default function StockPage() {
|
||||
<div className="bg-gradient-to-r from-[#011225] to-[#01204a] rounded-2xl border border-emerald-400/20 p-8 text-center">
|
||||
<p className="text-emerald-400 text-xs font-bold uppercase tracking-widest mb-2">START TRADING</p>
|
||||
<h3 className="text-white text-2xl font-extrabold mb-2">지금 도입 상담 받아보세요</h3>
|
||||
<p className="text-emerald-100/40 text-sm mb-6">무료 상담 후 정확한 견적을 드립니다</p>
|
||||
<p className="text-emerald-100/40 text-sm mb-6">계약서 먼저, 개발 나중 — 구두 약속 없음</p>
|
||||
<button
|
||||
onClick={() => openModal('주식 자동 매매')}
|
||||
className="inline-flex items-center gap-2 bg-emerald-400 hover:bg-emerald-300 text-[#011225] px-8 py-3 rounded-xl font-extrabold text-sm transition-all shadow-lg shadow-emerald-900/30"
|
||||
>
|
||||
무료 상담 신청 →
|
||||
시스템 확인 후 상담 신청 →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -148,14 +148,14 @@ export default function WebsiteServicePage() {
|
||||
background: 'linear-gradient(135deg, #ffffff 0%, #c7d2fe 50%, #818cf8 100%)',
|
||||
WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
|
||||
}}>
|
||||
비즈니스를 빛내는 홈페이지,<br />직접 만들어드립니다
|
||||
홈페이지 맡겼다가 연락 끊긴 경험,<br />여기선 없습니다
|
||||
</h1>
|
||||
<p style={{
|
||||
fontSize: 16, color: '#94a3b8', lineHeight: 1.8, marginBottom: 36,
|
||||
fontFamily: "'CookieRun', sans-serif",
|
||||
}}>
|
||||
7년차 대기업 개발자가 기획·디자인·개발·배포까지 원스톱으로.<br />
|
||||
단순한 외주가 아닌, 비즈니스 성과를 만드는 홈페이지를 제작합니다.
|
||||
계약서 작성 → 중간 보고 → 소스코드 인도까지 단계마다 증거를 남깁니다.<br />
|
||||
납기 지연 시 하루당 10만원 감면 — 그래서 안 늦습니다.
|
||||
</p>
|
||||
<div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
|
||||
<Link href="/freelance?service=website" style={{
|
||||
@@ -180,9 +180,9 @@ export default function WebsiteServicePage() {
|
||||
{/* Stats */}
|
||||
<div style={{ display: 'flex', gap: 32, justifyContent: 'center', marginTop: 48, flexWrap: 'wrap' }}>
|
||||
{[
|
||||
{ num: '3~5일', label: '최단 납품' },
|
||||
{ num: '3~5일', label: '최단 납품 (스타터)' },
|
||||
{ num: '50만원~', label: '시작 가격' },
|
||||
{ num: '100%', label: '반응형 지원' },
|
||||
{ num: '전액환불', label: '납품 전 환불 보장' },
|
||||
].map((s) => (
|
||||
<div key={s.label} style={{ textAlign: 'center' }}>
|
||||
<div style={{ fontSize: 24, fontWeight: 800, color: 'white', fontFamily: "'CookieRun', sans-serif" }}>{s.num}</div>
|
||||
|
||||
Reference in New Issue
Block a user