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:
@@ -1,7 +1,10 @@
|
|||||||
{
|
{
|
||||||
"permissions": {
|
"permissions": {
|
||||||
"allow": [
|
"allow": [
|
||||||
"Bash(mkdir:*)"
|
"Bash(mkdir:*)",
|
||||||
|
"Bash(npx tsc:*)",
|
||||||
|
"Bash(git add:*)",
|
||||||
|
"Bash(git commit:*)"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -46,6 +46,26 @@ const NAV_ITEMS = [
|
|||||||
</svg>
|
</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() {
|
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>
|
</div>
|
||||||
<h1 className="text-4xl md:text-5xl font-extrabold text-white tracking-tight leading-tight mb-4">
|
<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 className="text-transparent bg-clip-text bg-gradient-to-r from-[#5ba4ff] to-[#818cf8]">
|
||||||
처음부터 직접 만들어드립니다
|
직접 만들고, 직접 책임집니다
|
||||||
</span>
|
</span>
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-blue-200/60 text-base md:text-lg max-w-xl mx-auto leading-relaxed mb-2">
|
<p className="text-blue-200/60 text-base md:text-lg max-w-xl mx-auto leading-relaxed mb-2">
|
||||||
검증된 코드 품질을 합리적인 가격에 경험하세요.
|
개발자에게 맡겼다가 연락 두절된 경험 있으신가요?<br />
|
||||||
아이디어만 있어도 충분합니다.
|
계약서 작성, 중간 보고, 소스코드 인도까지 — 단계마다 증거를 남깁니다.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -437,11 +437,11 @@ export default function FreelancePage() {
|
|||||||
</div>
|
</div>
|
||||||
<ul className="space-y-3.5">
|
<ul className="space-y-3.5">
|
||||||
{[
|
{[
|
||||||
{ icon: '🏢', title: '대기업 백엔드 경력', desc: '대기업 수준의 코드 품질과 개발 프로세스 적용' },
|
{ icon: '🌐', title: '지금 URL로 직접 확인', desc: 'jaengseung-made.com — 로또 분석, 주식 자동매매 지금도 운영 중' },
|
||||||
{ icon: '🖥️', title: '운영 중인 실제 서비스', desc: 'NAS 서버에서 로또·주식 시스템 직접 운영' },
|
{ icon: '📋', title: '계약서 먼저, 개발 나중', desc: '구두 약속 없음 — 견적서·계약서 발송 후 착수' },
|
||||||
{ icon: '📄', title: '계약서 + 소스코드 제공', desc: '계약서 포함, 완성 후 소스코드 전체 인도' },
|
{ icon: '🔒', title: '납품 전 전액 환불 보장', desc: '마음에 안 드시면 이유 불문 전액 환불' },
|
||||||
{ icon: '🔒', title: '1개월 무상 AS 보장', desc: '납품 후 버그·문제 발생 시 무료 수정' },
|
{ icon: '📦', title: '소스코드 100% 인도', desc: '완성 후 전체 소스코드 + 배포 가이드 제공' },
|
||||||
{ icon: '⚡', title: '24시간 내 답변', desc: '문의 후 하루 이내 답변 보장' },
|
{ icon: '⚡', title: '납기 지연 시 패널티', desc: '하루 늦을 때마다 10만원 감면 — 그래서 안 늦습니다' },
|
||||||
].map((item) => (
|
].map((item) => (
|
||||||
<li key={item.title} className="flex items-start gap-3">
|
<li key={item.title} className="flex items-start gap-3">
|
||||||
<span className="text-base flex-shrink-0 mt-0.5">{item.icon}</span>
|
<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">
|
<div className="text-center mb-8">
|
||||||
<p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">CONTACT</p>
|
<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>
|
<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>
|
||||||
|
|
||||||
<div className="grid md:grid-cols-5 gap-6">
|
<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';
|
import ContactModal from './components/ContactModal';
|
||||||
|
|
||||||
const stats = [
|
const stats = [
|
||||||
{ value: '7년+', label: '개발 경력' },
|
{ value: '3개', label: '지금 운영 중인 서비스' },
|
||||||
{ value: '100+', label: '완료 프로젝트' },
|
{ value: '24h', label: '이내 견적 발송 보장' },
|
||||||
{ value: '24h', label: '평균 응답' },
|
{ value: '100%', label: '소스코드 전달' },
|
||||||
{ value: '98%', label: '고객 만족도' },
|
{ value: '1개월', label: '무상 AS 보장' },
|
||||||
];
|
];
|
||||||
|
|
||||||
const techStack = [
|
const techStack = [
|
||||||
@@ -83,18 +83,18 @@ export default function Home() {
|
|||||||
<div className="relative max-w-3xl mx-auto text-center">
|
<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">
|
<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" />
|
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
|
||||||
7년차 대기업 백엔드 개발자 · 현재 서비스 운영 중
|
지금 이 순간도 작동 중인 서비스가 있습니다
|
||||||
</div>
|
</div>
|
||||||
<h1 className="text-4xl md:text-5xl font-extrabold text-white leading-tight mb-5 tracking-tight">
|
<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 className="text-transparent bg-clip-text bg-gradient-to-r from-[#5ba4ff] to-[#818cf8]">
|
||||||
개발 서비스
|
직접 확인하고
|
||||||
</span>
|
</span>{' '}
|
||||||
를 제공합니다
|
결정하세요
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-blue-200/70 text-base md:text-lg leading-relaxed mb-8 max-w-xl mx-auto">
|
<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>
|
</p>
|
||||||
<div className="flex flex-wrap gap-3 justify-center">
|
<div className="flex flex-wrap gap-3 justify-center">
|
||||||
<button
|
<button
|
||||||
@@ -104,7 +104,7 @@ export default function Home() {
|
|||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<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" />
|
<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>
|
</svg>
|
||||||
무료 상담 신청
|
URL 확인 후 상담 신청
|
||||||
</button>
|
</button>
|
||||||
<a
|
<a
|
||||||
href="mailto:bgg8988@gmail.com"
|
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="bg-white rounded-2xl border border-[#dbe8ff] p-6">
|
||||||
<div className="flex items-center gap-2 mb-4">
|
<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" />
|
<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>
|
</div>
|
||||||
<ul className="space-y-3">
|
<ul className="space-y-3">
|
||||||
{[
|
{[
|
||||||
{ icon: '🏢', text: '7년차 대기업 백엔드 개발 경력' },
|
{ icon: '🌐', text: 'jaengseung-made.com — 지금 바로 확인 가능한 실제 운영 서비스' },
|
||||||
{ icon: '🖥️', text: 'NAS 서버에서 실제 서비스 직접 운영 중' },
|
{ icon: '🔒', text: '납품 전 마음에 안 드시면 이유 불문 전액 환불' },
|
||||||
{ icon: '📱', text: '텔레그램·이메일 실시간 커뮤니케이션' },
|
{ icon: '📋', text: '계약서 + 소스코드 전체 제공 — 잠수 없음, 연락 두절 없음' },
|
||||||
{ icon: '🔒', text: '1개월 무상 유지보수 + 평생 AS 가능' },
|
{ icon: '⚡', text: '24시간 이내 답변 · 납기 지연 시 패널티 적용' },
|
||||||
].map((item) => (
|
].map((item) => (
|
||||||
<li key={item.text} className="flex items-start gap-2.5 text-sm text-slate-700">
|
<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>
|
<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('업무 자동화')}
|
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"
|
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>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</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">
|
<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>
|
<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>
|
<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
|
<button
|
||||||
onClick={() => openModal('주식 자동 매매')}
|
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"
|
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>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -148,14 +148,14 @@ export default function WebsiteServicePage() {
|
|||||||
background: 'linear-gradient(135deg, #ffffff 0%, #c7d2fe 50%, #818cf8 100%)',
|
background: 'linear-gradient(135deg, #ffffff 0%, #c7d2fe 50%, #818cf8 100%)',
|
||||||
WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
|
WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
|
||||||
}}>
|
}}>
|
||||||
비즈니스를 빛내는 홈페이지,<br />직접 만들어드립니다
|
홈페이지 맡겼다가 연락 끊긴 경험,<br />여기선 없습니다
|
||||||
</h1>
|
</h1>
|
||||||
<p style={{
|
<p style={{
|
||||||
fontSize: 16, color: '#94a3b8', lineHeight: 1.8, marginBottom: 36,
|
fontSize: 16, color: '#94a3b8', lineHeight: 1.8, marginBottom: 36,
|
||||||
fontFamily: "'CookieRun', sans-serif",
|
fontFamily: "'CookieRun', sans-serif",
|
||||||
}}>
|
}}>
|
||||||
7년차 대기업 개발자가 기획·디자인·개발·배포까지 원스톱으로.<br />
|
계약서 작성 → 중간 보고 → 소스코드 인도까지 단계마다 증거를 남깁니다.<br />
|
||||||
단순한 외주가 아닌, 비즈니스 성과를 만드는 홈페이지를 제작합니다.
|
납기 지연 시 하루당 10만원 감면 — 그래서 안 늦습니다.
|
||||||
</p>
|
</p>
|
||||||
<div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
|
<div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
|
||||||
<Link href="/freelance?service=website" style={{
|
<Link href="/freelance?service=website" style={{
|
||||||
@@ -180,9 +180,9 @@ export default function WebsiteServicePage() {
|
|||||||
{/* Stats */}
|
{/* Stats */}
|
||||||
<div style={{ display: 'flex', gap: 32, justifyContent: 'center', marginTop: 48, flexWrap: 'wrap' }}>
|
<div style={{ display: 'flex', gap: 32, justifyContent: 'center', marginTop: 48, flexWrap: 'wrap' }}>
|
||||||
{[
|
{[
|
||||||
{ num: '3~5일', label: '최단 납품' },
|
{ num: '3~5일', label: '최단 납품 (스타터)' },
|
||||||
{ num: '50만원~', label: '시작 가격' },
|
{ num: '50만원~', label: '시작 가격' },
|
||||||
{ num: '100%', label: '반응형 지원' },
|
{ num: '전액환불', label: '납품 전 환불 보장' },
|
||||||
].map((s) => (
|
].map((s) => (
|
||||||
<div key={s.label} style={{ textAlign: 'center' }}>
|
<div key={s.label} style={{ textAlign: 'center' }}>
|
||||||
<div style={{ fontSize: 24, fontWeight: 800, color: 'white', fontFamily: "'CookieRun', sans-serif" }}>{s.num}</div>
|
<div style={{ fontSize: 24, fontWeight: 800, color: 'white', fontFamily: "'CookieRun', sans-serif" }}>{s.num}</div>
|
||||||
|
|||||||
125
public/marketing/banner-homepage.svg
Normal file
125
public/marketing/banner-homepage.svg
Normal file
@@ -0,0 +1,125 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="400" viewBox="0 0 1200 400">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#0f172a;stop-opacity:1"/>
|
||||||
|
<stop offset="60%" style="stop-color:#1e1b4b;stop-opacity:1"/>
|
||||||
|
<stop offset="100%" style="stop-color:#1e3a8a;stop-opacity:1"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="textGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" style="stop-color:#60a5fa;stop-opacity:1"/>
|
||||||
|
<stop offset="100%" style="stop-color:#a78bfa;stop-opacity:1"/>
|
||||||
|
</linearGradient>
|
||||||
|
<radialGradient id="glowBlue" cx="75%" cy="35%" r="40%">
|
||||||
|
<stop offset="0%" style="stop-color:#2563eb;stop-opacity:0.25"/>
|
||||||
|
<stop offset="100%" style="stop-color:#2563eb;stop-opacity:0"/>
|
||||||
|
</radialGradient>
|
||||||
|
<radialGradient id="glowViolet" cx="85%" cy="70%" r="30%">
|
||||||
|
<stop offset="0%" style="stop-color:#7c3aed;stop-opacity:0.2"/>
|
||||||
|
<stop offset="100%" style="stop-color:#7c3aed;stop-opacity:0"/>
|
||||||
|
</radialGradient>
|
||||||
|
<clipPath id="browserClip">
|
||||||
|
<rect x="650" y="40" width="510" height="320" rx="12"/>
|
||||||
|
</clipPath>
|
||||||
|
<filter id="shadow" x="-10%" y="-10%" width="130%" height="130%">
|
||||||
|
<feDropShadow dx="0" dy="8" stdDeviation="16" flood-color="#000000" flood-opacity="0.5"/>
|
||||||
|
</filter>
|
||||||
|
<filter id="badgeShadow">
|
||||||
|
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#2563eb" flood-opacity="0.4"/>
|
||||||
|
</filter>
|
||||||
|
<filter id="priceShadow">
|
||||||
|
<feDropShadow dx="0" dy="2" stdDeviation="6" flood-color="#7c3aed" flood-opacity="0.5"/>
|
||||||
|
</filter>
|
||||||
|
<pattern id="dots" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||||
|
<circle cx="20" cy="20" r="1" fill="#334155" opacity="0.5"/>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- 배경 -->
|
||||||
|
<rect width="1200" height="400" fill="url(#bgGrad)"/>
|
||||||
|
<rect width="1200" height="400" fill="url(#glowBlue)"/>
|
||||||
|
<rect width="1200" height="400" fill="url(#glowViolet)"/>
|
||||||
|
<rect width="1200" height="400" fill="url(#dots)"/>
|
||||||
|
|
||||||
|
<!-- 신뢰 뱃지 -->
|
||||||
|
<rect x="60" y="48" width="260" height="34" rx="17" fill="#1d4ed8" filter="url(#badgeShadow)"/>
|
||||||
|
<text x="190" y="70" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',Arial,sans-serif" font-size="13" font-weight="700" fill="#ffffff">★ 100% 만족보장 · 로켓 납품</text>
|
||||||
|
|
||||||
|
<!-- 메인 헤드라인 -->
|
||||||
|
<text x="60" y="130" font-family="'Malgun Gothic','Apple SD Gothic Neo',Arial,sans-serif" font-size="40" font-weight="800" fill="#ffffff">7년차 대기업 개발자가</text>
|
||||||
|
<text x="60" y="182" font-family="'Malgun Gothic','Apple SD Gothic Neo',Arial,sans-serif" font-size="40" font-weight="800" fill="url(#textGrad)">직접 만드는 홈페이지</text>
|
||||||
|
|
||||||
|
<!-- 서브텍스트 -->
|
||||||
|
<text x="60" y="228" font-family="'Malgun Gothic','Apple SD Gothic Neo',Arial,sans-serif" font-size="17" fill="#94a3b8">코드 품질 · 성능 최적화 · SEO 설정까지 원스톱</text>
|
||||||
|
|
||||||
|
<!-- 가격 뱃지 -->
|
||||||
|
<rect x="60" y="255" width="200" height="48" rx="12" fill="#7c3aed" filter="url(#priceShadow)"/>
|
||||||
|
<text x="160" y="274" text-anchor="middle" font-family="'Malgun Gothic',Arial,sans-serif" font-size="12" font-weight="600" fill="#ddd6fe">시작 가격</text>
|
||||||
|
<text x="160" y="294" text-anchor="middle" font-family="'Malgun Gothic',Arial,sans-serif" font-size="22" font-weight="800" fill="#ffffff">스타터 50만원~</text>
|
||||||
|
|
||||||
|
<!-- 체크리스트 -->
|
||||||
|
<circle cx="74" cy="334" r="9" fill="#22c55e" opacity="0.2"/>
|
||||||
|
<text x="74" y="339" text-anchor="middle" font-family="Arial" font-size="11" font-weight="700" fill="#22c55e">✓</text>
|
||||||
|
<text x="92" y="339" font-family="'Malgun Gothic',Arial,sans-serif" font-size="14" fill="#94a3b8">반응형 디자인</text>
|
||||||
|
|
||||||
|
<circle cx="224" cy="334" r="9" fill="#22c55e" opacity="0.2"/>
|
||||||
|
<text x="224" y="339" text-anchor="middle" font-family="Arial" font-size="11" font-weight="700" fill="#22c55e">✓</text>
|
||||||
|
<text x="242" y="339" font-family="'Malgun Gothic',Arial,sans-serif" font-size="14" fill="#94a3b8">SEO 최적화</text>
|
||||||
|
|
||||||
|
<circle cx="364" cy="334" r="9" fill="#22c55e" opacity="0.2"/>
|
||||||
|
<text x="364" y="339" text-anchor="middle" font-family="Arial" font-size="11" font-weight="700" fill="#22c55e">✓</text>
|
||||||
|
<text x="382" y="339" font-family="'Malgun Gothic',Arial,sans-serif" font-size="14" fill="#94a3b8">무료 A/S</text>
|
||||||
|
|
||||||
|
<!-- URL -->
|
||||||
|
<text x="60" y="380" font-family="Arial,sans-serif" font-size="13" fill="#475569">jaengseung-made.com</text>
|
||||||
|
|
||||||
|
<!-- 브라우저 목업 -->
|
||||||
|
<g filter="url(#shadow)">
|
||||||
|
<rect x="650" y="40" width="510" height="320" rx="12" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||||||
|
<!-- 탭바 -->
|
||||||
|
<rect x="650" y="40" width="510" height="36" rx="12" fill="#0f172a"/>
|
||||||
|
<rect x="650" y="64" width="510" height="12" fill="#0f172a"/>
|
||||||
|
<circle cx="676" cy="58" r="6" fill="#ef4444"/>
|
||||||
|
<circle cx="698" cy="58" r="6" fill="#f59e0b"/>
|
||||||
|
<circle cx="720" cy="58" r="6" fill="#22c55e"/>
|
||||||
|
<rect x="740" y="48" width="360" height="20" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||||||
|
<text x="920" y="62" text-anchor="middle" font-family="Arial,sans-serif" font-size="10" fill="#64748b">jaengseung-made.com</text>
|
||||||
|
<!-- 내부 콘텐츠 -->
|
||||||
|
<g clip-path="url(#browserClip)">
|
||||||
|
<rect x="650" y="76" width="510" height="284" fill="#f8fafc"/>
|
||||||
|
<!-- 네비 -->
|
||||||
|
<rect x="650" y="76" width="510" height="40" fill="#1d4ed8"/>
|
||||||
|
<rect x="668" y="88" width="60" height="16" rx="8" fill="#ffffff" opacity="0.3"/>
|
||||||
|
<rect x="870" y="88" width="40" height="16" rx="8" fill="#ffffff" opacity="0.2"/>
|
||||||
|
<rect x="918" y="88" width="40" height="16" rx="8" fill="#ffffff" opacity="0.2"/>
|
||||||
|
<rect x="966" y="88" width="40" height="16" rx="8" fill="#ffffff" opacity="0.2"/>
|
||||||
|
<rect x="1080" y="84" width="64" height="24" rx="12" fill="#7c3aed"/>
|
||||||
|
<!-- 히어로 -->
|
||||||
|
<rect x="650" y="116" width="510" height="110" fill="#eff6ff"/>
|
||||||
|
<rect x="695" y="134" width="200" height="18" rx="9" fill="#bfdbfe"/>
|
||||||
|
<rect x="695" y="160" width="160" height="18" rx="9" fill="#93c5fd"/>
|
||||||
|
<rect x="695" y="186" width="100" height="28" rx="14" fill="#2563eb"/>
|
||||||
|
<rect x="980" y="122" width="160" height="96" rx="8" fill="#dbeafe"/>
|
||||||
|
<rect x="996" y="138" width="80" height="10" rx="5" fill="#93c5fd"/>
|
||||||
|
<rect x="996" y="154" width="120" height="10" rx="5" fill="#bfdbfe"/>
|
||||||
|
<rect x="996" y="170" width="100" height="10" rx="5" fill="#bfdbfe"/>
|
||||||
|
<!-- 카드들 -->
|
||||||
|
<rect x="668" y="242" width="148" height="90" rx="8" fill="#ffffff" stroke="#e2e8f0" stroke-width="1"/>
|
||||||
|
<rect x="668" y="242" width="148" height="6" rx="3" fill="#2563eb"/>
|
||||||
|
<rect x="680" y="258" width="60" height="10" rx="5" fill="#e2e8f0"/>
|
||||||
|
<rect x="680" y="276" width="100" height="8" rx="4" fill="#f1f5f9"/>
|
||||||
|
<rect x="680" y="292" width="80" height="8" rx="4" fill="#f1f5f9"/>
|
||||||
|
<rect x="826" y="242" width="148" height="90" rx="8" fill="#ffffff" stroke="#e2e8f0" stroke-width="1"/>
|
||||||
|
<rect x="826" y="242" width="148" height="6" rx="3" fill="#7c3aed"/>
|
||||||
|
<rect x="838" y="258" width="60" height="10" rx="5" fill="#ddd6fe"/>
|
||||||
|
<rect x="838" y="276" width="100" height="8" rx="4" fill="#ede9fe"/>
|
||||||
|
<rect x="984" y="242" width="148" height="90" rx="8" fill="#ffffff" stroke="#e2e8f0" stroke-width="1"/>
|
||||||
|
<rect x="984" y="242" width="148" height="6" rx="3" fill="#059669"/>
|
||||||
|
<rect x="996" y="258" width="60" height="10" rx="5" fill="#d1fae5"/>
|
||||||
|
<rect x="996" y="276" width="100" height="8" rx="4" fill="#ecfdf5"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- 하단 바 -->
|
||||||
|
<rect x="0" y="368" width="1200" height="32" fill="#1d4ed8"/>
|
||||||
|
<text x="600" y="389" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',Arial,sans-serif" font-size="13" font-weight="600" fill="#ffffff">7년차 대기업 백엔드 개발자 박재오 | 기획부터 런칭까지 원스톱 | jaengseung-made.com</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 7.9 KiB |
158
public/marketing/thumb-automation.svg
Normal file
158
public/marketing/thumb-automation.svg
Normal file
@@ -0,0 +1,158 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#0f172a"/>
|
||||||
|
<stop offset="50%" style="stop-color:#064e3b"/>
|
||||||
|
<stop offset="100%" style="stop-color:#0f172a"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="headGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" style="stop-color:#34d399"/>
|
||||||
|
<stop offset="100%" style="stop-color:#60a5fa"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="timeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#10b981"/>
|
||||||
|
<stop offset="100%" style="stop-color:#059669"/>
|
||||||
|
</linearGradient>
|
||||||
|
<radialGradient id="glow" cx="60%" cy="50%" r="50%">
|
||||||
|
<stop offset="0%" style="stop-color:#10b981;stop-opacity:0.18"/>
|
||||||
|
<stop offset="100%" style="stop-color:#10b981;stop-opacity:0"/>
|
||||||
|
</radialGradient>
|
||||||
|
<radialGradient id="glowBlue" cx="85%" cy="70%" r="35%">
|
||||||
|
<stop offset="0%" style="stop-color:#2563eb;stop-opacity:0.14"/>
|
||||||
|
<stop offset="100%" style="stop-color:#2563eb;stop-opacity:0"/>
|
||||||
|
</radialGradient>
|
||||||
|
<filter id="nodeShadow">
|
||||||
|
<feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#10b981" flood-opacity="0.4"/>
|
||||||
|
</filter>
|
||||||
|
<filter id="arrowGlow">
|
||||||
|
<feGaussianBlur stdDeviation="2" result="blur"/>
|
||||||
|
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- 배경 -->
|
||||||
|
<rect width="1200" height="675" fill="url(#bg)"/>
|
||||||
|
<rect width="1200" height="675" fill="url(#glow)"/>
|
||||||
|
<rect width="1200" height="675" fill="url(#glowBlue)"/>
|
||||||
|
|
||||||
|
<!-- 배경 도트 패턴 -->
|
||||||
|
<defs>
|
||||||
|
<pattern id="dots" width="36" height="36" patternUnits="userSpaceOnUse">
|
||||||
|
<circle cx="18" cy="18" r="1.2" fill="#1e293b" opacity="0.8"/>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect width="1200" height="675" fill="url(#dots)"/>
|
||||||
|
|
||||||
|
<!-- 왼쪽 텍스트 영역 -->
|
||||||
|
<!-- 상단 뱃지 -->
|
||||||
|
<rect x="60" y="72" width="230" height="36" rx="18" fill="#065f46"/>
|
||||||
|
<text x="78" y="95" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#34d399">⚡ 반복 업무 완전 자동화</text>
|
||||||
|
|
||||||
|
<!-- 헤드라인 -->
|
||||||
|
<text x="60" y="162" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="50" font-weight="800" fill="#ffffff">하루 3시간을</text>
|
||||||
|
<text x="60" y="222" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="50" font-weight="800" fill="url(#headGrad)">되찾아 드립니다</text>
|
||||||
|
<text x="60" y="280" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="22" fill="#94a3b8">7년차 대기업 개발자의 자동화 솔루션</text>
|
||||||
|
|
||||||
|
<!-- 시간 절약 수치 뱃지 -->
|
||||||
|
<rect x="60" y="310" width="490" height="80" rx="14" fill="#0f172a" opacity="0.7"/>
|
||||||
|
<rect x="60" y="310" width="490" height="80" rx="14" stroke="#10b981" stroke-width="1" opacity="0.4"/>
|
||||||
|
|
||||||
|
<!-- 수치 1 -->
|
||||||
|
<text x="152" y="344" text-anchor="middle" font-family="sans-serif" font-size="32" font-weight="900" fill="#34d399">주 15h</text>
|
||||||
|
<text x="152" y="368" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">절약</text>
|
||||||
|
<!-- 구분선 -->
|
||||||
|
<line x1="218" y1="322" x2="218" y2="378" stroke="#1e293b" stroke-width="1.5"/>
|
||||||
|
<!-- 수치 2 -->
|
||||||
|
<text x="310" y="344" text-anchor="middle" font-family="sans-serif" font-size="32" font-weight="900" fill="#60a5fa">0%</text>
|
||||||
|
<text x="310" y="368" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">오류율</text>
|
||||||
|
<!-- 구분선 -->
|
||||||
|
<line x1="380" y1="322" x2="380" y2="378" stroke="#1e293b" stroke-width="1.5"/>
|
||||||
|
<!-- 수치 3 -->
|
||||||
|
<text x="468" y="344" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="20" font-weight="900" fill="#fbbf24">즉시 실행</text>
|
||||||
|
<text x="468" y="368" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">배포 완료</text>
|
||||||
|
|
||||||
|
<!-- 서비스 유형 리스트 -->
|
||||||
|
<text x="60" y="428" font-family="'Malgun Gothic',sans-serif" font-size="15" fill="#94a3b8">📊 엑셀 자동화 · 📧 이메일 자동발송 · 🕸️ 웹 크롤링</text>
|
||||||
|
<text x="60" y="460" font-family="'Malgun Gothic',sans-serif" font-size="15" fill="#94a3b8">🖥️ RPA · 📁 파일 자동 정리 · 🔔 텔레그램 알림 연동</text>
|
||||||
|
|
||||||
|
<!-- 가격 뱃지 -->
|
||||||
|
<rect x="60" y="486" width="220" height="58" rx="14" fill="url(#timeGrad)"/>
|
||||||
|
<text x="170" y="510" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#d1fae5">시작 가격</text>
|
||||||
|
<text x="170" y="534" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="26" font-weight="800" fill="#ffffff">33만원~</text>
|
||||||
|
|
||||||
|
<!-- URL -->
|
||||||
|
<text x="60" y="628" font-family="sans-serif" font-size="14" fill="#475569">jaengseung-made.com</text>
|
||||||
|
|
||||||
|
<!-- 오른쪽 자동화 플로우 다이어그램 -->
|
||||||
|
<!-- 플로우 배경 박스 -->
|
||||||
|
<rect x="620" y="60" width="550" height="540" rx="20" fill="#0a0f1e" stroke="#10b981" stroke-width="1" opacity="0.9"/>
|
||||||
|
<rect x="640" y="74" width="200" height="22" rx="4" fill="#0f2a20"/>
|
||||||
|
<text x="648" y="90" font-family="sans-serif" font-size="11" fill="#10b981">● 자동화 실행 중...</text>
|
||||||
|
|
||||||
|
<!-- 노드 1: 입력 -->
|
||||||
|
<rect x="688" y="120" width="160" height="70" rx="12" fill="#0f172a" stroke="#10b981" stroke-width="1.5" filter="url(#nodeShadow)"/>
|
||||||
|
<text x="768" y="148" text-anchor="middle" font-size="20">📊</text>
|
||||||
|
<text x="768" y="172" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#34d399">엑셀 파일 입력</text>
|
||||||
|
|
||||||
|
<!-- 화살표 -->
|
||||||
|
<line x1="768" y1="190" x2="768" y2="228" stroke="#10b981" stroke-width="2" filter="url(#arrowGlow)"/>
|
||||||
|
<polygon points="758,224 768,240 778,224" fill="#10b981"/>
|
||||||
|
|
||||||
|
<!-- 노드 2: 처리 -->
|
||||||
|
<rect x="658" y="242" width="220" height="70" rx="12" fill="#1a3a2a" stroke="#34d399" stroke-width="1.5" filter="url(#nodeShadow)"/>
|
||||||
|
<text x="768" y="270" text-anchor="middle" font-size="20">⚙️</text>
|
||||||
|
<text x="768" y="294" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#ffffff">Python 스크립트 실행</text>
|
||||||
|
|
||||||
|
<!-- 화살표 -->
|
||||||
|
<line x1="768" y1="312" x2="768" y2="350" stroke="#10b981" stroke-width="2" filter="url(#arrowGlow)"/>
|
||||||
|
<polygon points="758,346 768,362 778,346" fill="#10b981"/>
|
||||||
|
|
||||||
|
<!-- 노드 3: 출력 -->
|
||||||
|
<rect x="688" y="364" width="160" height="70" rx="12" fill="#0f172a" stroke="#10b981" stroke-width="1.5" filter="url(#nodeShadow)"/>
|
||||||
|
<text x="768" y="392" text-anchor="middle" font-size="20">📋</text>
|
||||||
|
<text x="768" y="416" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#34d399">리포트 자동 생성</text>
|
||||||
|
|
||||||
|
<!-- 화살표 -->
|
||||||
|
<line x1="768" y1="434" x2="768" y2="472" stroke="#10b981" stroke-width="2" filter="url(#arrowGlow)"/>
|
||||||
|
<polygon points="758,468 768,484 778,468" fill="#10b981"/>
|
||||||
|
|
||||||
|
<!-- 알림 노드 -->
|
||||||
|
<rect x="648" y="484" width="240" height="70" rx="12" fill="#0a1628" stroke="#60a5fa" stroke-width="1.5"/>
|
||||||
|
<text x="768" y="512" text-anchor="middle" font-size="20">📱</text>
|
||||||
|
<text x="768" y="538" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#60a5fa">텔레그램 알림 전송</text>
|
||||||
|
|
||||||
|
<!-- 우측 정보 패널 -->
|
||||||
|
<rect x="920" y="120" width="220" height="434" rx="16" fill="#0f172a" stroke="#1e293b" stroke-width="1"/>
|
||||||
|
<text x="1030" y="150" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#64748b">절약 시간 계산</text>
|
||||||
|
<!-- 막대 그래프 -->
|
||||||
|
<!-- 이전 -->
|
||||||
|
<text x="960" y="186" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#64748b">수동 작업</text>
|
||||||
|
<rect x="950" y="194" width="140" height="28" rx="6" fill="#1e293b"/>
|
||||||
|
<rect x="950" y="194" width="140" height="28" rx="6" fill="#ef4444" opacity="0.7"/>
|
||||||
|
<text x="1030" y="213" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="700" fill="#fff">3시간/일</text>
|
||||||
|
<!-- 이후 -->
|
||||||
|
<text x="960" y="244" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#64748b">자동화 후</text>
|
||||||
|
<rect x="950" y="252" width="140" height="28" rx="6" fill="#1e293b"/>
|
||||||
|
<rect x="950" y="252" width="22" height="28" rx="6" fill="#10b981"/>
|
||||||
|
<text x="970" y="271" font-family="sans-serif" font-size="12" font-weight="700" fill="#fff">5분</text>
|
||||||
|
|
||||||
|
<!-- 기술 스택 -->
|
||||||
|
<text x="1030" y="312" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">사용 기술</text>
|
||||||
|
<rect x="960" y="320" width="60" height="26" rx="8" fill="#1e3a8a"/>
|
||||||
|
<text x="990" y="338" text-anchor="middle" font-family="sans-serif" font-size="11" font-weight="700" fill="#60a5fa">Python</text>
|
||||||
|
<rect x="1030" y="320" width="50" height="26" rx="8" fill="#065f46"/>
|
||||||
|
<text x="1055" y="338" text-anchor="middle" font-family="sans-serif" font-size="11" font-weight="700" fill="#34d399">VBA</text>
|
||||||
|
<rect x="960" y="356" width="70" height="26" rx="8" fill="#1c1917"/>
|
||||||
|
<text x="995" y="374" text-anchor="middle" font-family="sans-serif" font-size="11" font-weight="700" fill="#d6d3d1">Selenium</text>
|
||||||
|
<rect x="1040" y="356" width="50" height="26" rx="8" fill="#1e1b4b"/>
|
||||||
|
<text x="1065" y="374" text-anchor="middle" font-family="sans-serif" font-size="11" font-weight="700" fill="#a78bfa">RPA</text>
|
||||||
|
|
||||||
|
<!-- 전문가 뱃지 -->
|
||||||
|
<rect x="950" y="404" width="140" height="50" rx="12" fill="#1e3a8a"/>
|
||||||
|
<text x="1020" y="424" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#bfdbfe">7년차 개발자</text>
|
||||||
|
<text x="1020" y="444" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" font-weight="700" fill="#ffffff">직접 분석 · 구현</text>
|
||||||
|
|
||||||
|
<!-- 하단 바 -->
|
||||||
|
<rect x="0" y="635" width="1200" height="40" fill="#065f46"/>
|
||||||
|
<text x="600" y="660" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="600" fill="#ffffff">엑셀 · 이메일 · RPA · 크롤링 · 7년차 대기업 개발자 직접 구축 · jaengseung-made.com</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 10 KiB |
186
public/marketing/thumb-homepage-A.svg
Normal file
186
public/marketing/thumb-homepage-A.svg
Normal file
@@ -0,0 +1,186 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#0f172a"/>
|
||||||
|
<stop offset="55%" style="stop-color:#1e1b4b"/>
|
||||||
|
<stop offset="100%" style="stop-color:#1e3a8a"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="headGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" style="stop-color:#60a5fa"/>
|
||||||
|
<stop offset="100%" style="stop-color:#a78bfa"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="priceGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#7c3aed"/>
|
||||||
|
<stop offset="100%" style="stop-color:#6d28d9"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="btnGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" style="stop-color:#2563eb"/>
|
||||||
|
<stop offset="100%" style="stop-color:#7c3aed"/>
|
||||||
|
</linearGradient>
|
||||||
|
<radialGradient id="glow1" cx="70%" cy="30%" r="45%">
|
||||||
|
<stop offset="0%" style="stop-color:#2563eb;stop-opacity:0.22"/>
|
||||||
|
<stop offset="100%" style="stop-color:#2563eb;stop-opacity:0"/>
|
||||||
|
</radialGradient>
|
||||||
|
<radialGradient id="glow2" cx="85%" cy="75%" r="35%">
|
||||||
|
<stop offset="0%" style="stop-color:#7c3aed;stop-opacity:0.18"/>
|
||||||
|
<stop offset="100%" style="stop-color:#7c3aed;stop-opacity:0"/>
|
||||||
|
</radialGradient>
|
||||||
|
<filter id="shadow">
|
||||||
|
<feDropShadow dx="0" dy="12" stdDeviation="20" flood-color="#000" flood-opacity="0.55"/>
|
||||||
|
</filter>
|
||||||
|
<filter id="glowFilter">
|
||||||
|
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||||
|
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||||
|
</filter>
|
||||||
|
<clipPath id="browserClip">
|
||||||
|
<rect x="620" y="60" width="550" height="530" rx="16"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- 배경 -->
|
||||||
|
<rect width="1200" height="675" fill="url(#bg)"/>
|
||||||
|
<rect width="1200" height="675" fill="url(#glow1)"/>
|
||||||
|
<rect width="1200" height="675" fill="url(#glow2)"/>
|
||||||
|
|
||||||
|
<!-- 격자 패턴 -->
|
||||||
|
<defs>
|
||||||
|
<pattern id="grid" width="48" height="48" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M 48 0 L 0 0 0 48" fill="none" stroke="#334155" stroke-width="0.5" opacity="0.4"/>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect width="1200" height="675" fill="url(#grid)"/>
|
||||||
|
|
||||||
|
<!-- 왼쪽 콘텐츠 -->
|
||||||
|
<!-- 상단 뱃지 -->
|
||||||
|
<rect x="60" y="72" width="296" height="38" rx="19" fill="#1d4ed8" opacity="0.9"/>
|
||||||
|
<circle cx="82" cy="91" r="5" fill="#fbbf24"/>
|
||||||
|
<text x="98" y="96" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="15" font-weight="700" fill="#ffffff">대기업 현직 개발자 직접 제작</text>
|
||||||
|
|
||||||
|
<!-- 메인 헤드라인 -->
|
||||||
|
<text x="60" y="170" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="52" font-weight="800" fill="#ffffff">7년차 대기업</text>
|
||||||
|
<text x="60" y="232" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="52" font-weight="800" fill="#ffffff">개발자가 직접</text>
|
||||||
|
<text x="60" y="294" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="52" font-weight="800" fill="url(#headGrad)">만드는 홈페이지</text>
|
||||||
|
|
||||||
|
<!-- 서브텍스트 -->
|
||||||
|
<text x="60" y="346" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="20" fill="#94a3b8">기획 · 디자인 · 개발 · 배포 원스톱</text>
|
||||||
|
|
||||||
|
<!-- 가격 뱃지 -->
|
||||||
|
<rect x="60" y="376" width="230" height="62" rx="14" fill="url(#priceGrad)" filter="url(#glowFilter)"/>
|
||||||
|
<text x="175" y="400" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" font-weight="600" fill="#ddd6fe">시작 가격</text>
|
||||||
|
<text x="175" y="428" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="26" font-weight="800" fill="#ffffff">스타터 50만원~</text>
|
||||||
|
|
||||||
|
<!-- 체크리스트 -->
|
||||||
|
<rect x="60" y="462" width="490" height="50" rx="10" fill="#0f172a" opacity="0.6"/>
|
||||||
|
<!-- 체크1 -->
|
||||||
|
<circle cx="84" cy="487" r="10" fill="#22c55e" opacity="0.2"/>
|
||||||
|
<text x="84" y="492" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="900" fill="#22c55e">✓</text>
|
||||||
|
<text x="100" y="492" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="15" fill="#e2e8f0">반응형</text>
|
||||||
|
<!-- 체크2 -->
|
||||||
|
<circle cx="198" cy="487" r="10" fill="#22c55e" opacity="0.2"/>
|
||||||
|
<text x="198" y="492" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="900" fill="#22c55e">✓</text>
|
||||||
|
<text x="214" y="492" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="15" fill="#e2e8f0">SEO 최적화</text>
|
||||||
|
<!-- 체크3 -->
|
||||||
|
<circle cx="328" cy="487" r="10" fill="#22c55e" opacity="0.2"/>
|
||||||
|
<text x="328" y="492" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="900" fill="#22c55e">✓</text>
|
||||||
|
<text x="344" y="492" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="15" fill="#e2e8f0">납기 보장</text>
|
||||||
|
<!-- 체크4 -->
|
||||||
|
<circle cx="440" cy="487" r="10" fill="#22c55e" opacity="0.2"/>
|
||||||
|
<text x="440" y="492" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="900" fill="#22c55e">✓</text>
|
||||||
|
<text x="456" y="492" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="15" fill="#e2e8f0">무료 AS</text>
|
||||||
|
|
||||||
|
<!-- 문의 버튼 -->
|
||||||
|
<rect x="60" y="534" width="200" height="52" rx="13" fill="url(#btnGrad)"/>
|
||||||
|
<text x="160" y="566" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="17" font-weight="700" fill="#ffffff">무료 상담 신청 →</text>
|
||||||
|
|
||||||
|
<!-- URL -->
|
||||||
|
<text x="60" y="628" font-family="sans-serif" font-size="14" fill="#475569">jaengseung-made.com</text>
|
||||||
|
|
||||||
|
<!-- 오른쪽 브라우저 목업 -->
|
||||||
|
<g filter="url(#shadow)">
|
||||||
|
<rect x="620" y="60" width="550" height="530" rx="16" fill="#1e293b" stroke="#334155" stroke-width="1.5"/>
|
||||||
|
<!-- 탭바 -->
|
||||||
|
<rect x="620" y="60" width="550" height="44" rx="16" fill="#0f172a"/>
|
||||||
|
<rect x="620" y="92" width="550" height="12" fill="#0f172a"/>
|
||||||
|
<!-- 창 버튼 -->
|
||||||
|
<circle cx="650" cy="82" r="7" fill="#ef4444"/>
|
||||||
|
<circle cx="674" cy="82" r="7" fill="#f59e0b"/>
|
||||||
|
<circle cx="698" cy="82" r="7" fill="#22c55e"/>
|
||||||
|
<!-- URL 바 -->
|
||||||
|
<rect x="724" y="70" width="380" height="24" rx="12" fill="#1e293b" stroke="#475569" stroke-width="1"/>
|
||||||
|
<text x="914" y="87" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#64748b">jaengseung-made.com</text>
|
||||||
|
|
||||||
|
<!-- 브라우저 내부 -->
|
||||||
|
<g clip-path="url(#browserClip)">
|
||||||
|
<rect x="620" y="104" width="550" height="486" fill="#f8fafc"/>
|
||||||
|
|
||||||
|
<!-- 네비 -->
|
||||||
|
<rect x="620" y="104" width="550" height="48" fill="#1d4ed8"/>
|
||||||
|
<rect x="638" y="118" width="70" height="20" rx="10" fill="#fff" opacity="0.25"/>
|
||||||
|
<rect x="900" y="118" width="45" height="20" rx="10" fill="#fff" opacity="0.15"/>
|
||||||
|
<rect x="952" y="118" width="45" height="20" rx="10" fill="#fff" opacity="0.15"/>
|
||||||
|
<rect x="1004" y="118" width="45" height="20" rx="10" fill="#fff" opacity="0.15"/>
|
||||||
|
<rect x="1100" y="114" width="56" height="28" rx="14" fill="#7c3aed"/>
|
||||||
|
<text x="1128" y="133" text-anchor="middle" font-family="sans-serif" font-size="11" font-weight="700" fill="#fff">문의</text>
|
||||||
|
|
||||||
|
<!-- 히어로 섹션 -->
|
||||||
|
<rect x="620" y="152" width="550" height="160" fill="#eff6ff"/>
|
||||||
|
<!-- 히어로 텍스트 블록 -->
|
||||||
|
<rect x="642" y="174" width="180" height="18" rx="9" fill="#bfdbfe"/>
|
||||||
|
<rect x="642" y="200" width="240" height="22" rx="11" fill="#93c5fd"/>
|
||||||
|
<rect x="642" y="230" width="200" height="18" rx="9" fill="#bfdbfe"/>
|
||||||
|
<rect x="642" y="260" width="110" height="34" rx="17" fill="#2563eb"/>
|
||||||
|
<text x="697" y="283" text-anchor="middle" font-family="sans-serif" font-size="12" fill="#fff">문의하기</text>
|
||||||
|
<!-- 히어로 이미지 -->
|
||||||
|
<rect x="950" y="164" width="196" height="134" rx="10" fill="#dbeafe"/>
|
||||||
|
<rect x="970" y="184" width="100" height="12" rx="6" fill="#93c5fd"/>
|
||||||
|
<rect x="970" y="204" width="140" height="12" rx="6" fill="#bfdbfe"/>
|
||||||
|
<rect x="970" y="224" width="120" height="12" rx="6" fill="#bfdbfe"/>
|
||||||
|
<rect x="970" y="254" width="80" height="26" rx="13" fill="#2563eb"/>
|
||||||
|
|
||||||
|
<!-- 서비스 카드 영역 -->
|
||||||
|
<rect x="620" y="312" width="550" height="20" fill="#f1f5f9"/>
|
||||||
|
<text x="895" y="327" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#94a3b8">주요 서비스</text>
|
||||||
|
|
||||||
|
<!-- 카드 1 -->
|
||||||
|
<rect x="634" y="344" width="162" height="130" rx="10" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
|
||||||
|
<rect x="634" y="344" width="162" height="5" rx="2" fill="#2563eb"/>
|
||||||
|
<rect x="648" y="362" width="50" height="50" rx="10" fill="#eff6ff"/>
|
||||||
|
<text x="673" y="394" text-anchor="middle" font-size="22">🏢</text>
|
||||||
|
<rect x="648" y="424" width="90" height="12" rx="6" fill="#e2e8f0"/>
|
||||||
|
<rect x="648" y="444" width="120" height="10" rx="5" fill="#f1f5f9"/>
|
||||||
|
<rect x="648" y="458" width="60" height="8" rx="4" fill="#f1f5f9"/>
|
||||||
|
|
||||||
|
<!-- 카드 2 -->
|
||||||
|
<rect x="808" y="344" width="162" height="130" rx="10" fill="#fff" stroke="#ede9fe" stroke-width="1.5"/>
|
||||||
|
<rect x="808" y="344" width="162" height="5" rx="2" fill="#7c3aed"/>
|
||||||
|
<rect x="820" y="338" width="50" height="20" rx="10" fill="#7c3aed"/>
|
||||||
|
<text x="845" y="353" text-anchor="middle" font-family="sans-serif" font-size="10" font-weight="700" fill="#fff">추천</text>
|
||||||
|
<rect x="822" y="362" width="50" height="50" rx="10" fill="#ede9fe"/>
|
||||||
|
<text x="847" y="394" text-anchor="middle" font-size="22">⚡</text>
|
||||||
|
<rect x="822" y="424" width="90" height="12" rx="6" fill="#ddd6fe"/>
|
||||||
|
<rect x="822" y="444" width="120" height="10" rx="5" fill="#ede9fe"/>
|
||||||
|
<rect x="822" y="458" width="60" height="8" rx="4" fill="#f5f3ff"/>
|
||||||
|
|
||||||
|
<!-- 카드 3 -->
|
||||||
|
<rect x="982" y="344" width="162" height="130" rx="10" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
|
||||||
|
<rect x="982" y="344" width="162" height="5" rx="2" fill="#059669"/>
|
||||||
|
<rect x="996" y="362" width="50" height="50" rx="10" fill="#ecfdf5"/>
|
||||||
|
<text x="1021" y="394" text-anchor="middle" font-size="22">🚀</text>
|
||||||
|
<rect x="996" y="424" width="90" height="12" rx="6" fill="#e2e8f0"/>
|
||||||
|
<rect x="996" y="444" width="120" height="10" rx="5" fill="#f1f5f9"/>
|
||||||
|
<rect x="996" y="458" width="60" height="8" rx="4" fill="#f1f5f9"/>
|
||||||
|
|
||||||
|
<!-- 하단 푸터 영역 -->
|
||||||
|
<rect x="620" y="486" width="550" height="104" fill="#0f172a"/>
|
||||||
|
<rect x="642" y="502" width="80" height="14" rx="7" fill="#334155"/>
|
||||||
|
<rect x="642" y="524" width="120" height="10" rx="5" fill="#1e293b"/>
|
||||||
|
<rect x="642" y="540" width="100" height="10" rx="5" fill="#1e293b"/>
|
||||||
|
<rect x="1050" y="502" width="96" height="34" rx="8" fill="#2563eb"/>
|
||||||
|
<text x="1098" y="524" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#fff">상담 신청</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- 하단 바 -->
|
||||||
|
<rect x="0" y="635" width="1200" height="40" fill="#1d4ed8"/>
|
||||||
|
<text x="600" y="660" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="600" fill="#ffffff">7년차 대기업 백엔드 개발자 박재오 · 기획부터 배포까지 원스톱 · jaengseung-made.com</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 11 KiB |
88
public/marketing/thumb-homepage-B.svg
Normal file
88
public/marketing/thumb-homepage-B.svg
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="topBg" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" style="stop-color:#0f172a"/>
|
||||||
|
<stop offset="100%" style="stop-color:#1e3a8a"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="card2Grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#eff6ff"/>
|
||||||
|
<stop offset="100%" style="stop-color:#ede9fe"/>
|
||||||
|
</linearGradient>
|
||||||
|
<filter id="cardShadow">
|
||||||
|
<feDropShadow dx="0" dy="4" stdDeviation="12" flood-color="#000" flood-opacity="0.15"/>
|
||||||
|
</filter>
|
||||||
|
<filter id="card2Shadow">
|
||||||
|
<feDropShadow dx="0" dy="8" stdDeviation="20" flood-color="#7c3aed" flood-opacity="0.25"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- 상단 어두운 배경 -->
|
||||||
|
<rect width="1200" height="280" fill="url(#topBg)"/>
|
||||||
|
<!-- 하단 밝은 배경 -->
|
||||||
|
<rect y="280" width="1200" height="395" fill="#f8fafc"/>
|
||||||
|
|
||||||
|
<!-- 상단 로고/브랜드 -->
|
||||||
|
<rect x="60" y="36" width="44" height="44" rx="12" fill="#2563eb"/>
|
||||||
|
<text x="82" y="64" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="18" font-weight="900" fill="#fff">쟁</text>
|
||||||
|
<text x="116" y="52" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="700" fill="#60a5fa">쟁승메이드</text>
|
||||||
|
<text x="116" y="70" font-family="sans-serif" font-size="12" fill="#475569">홈페이지 제작 전문</text>
|
||||||
|
|
||||||
|
<!-- 상단 헤드라인 -->
|
||||||
|
<text x="600" y="128" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="48" font-weight="800" fill="#ffffff">기업급 품질, 합리적 가격</text>
|
||||||
|
<text x="600" y="180" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="22" fill="#94a3b8">7년차 대기업 현직 개발자 · Next.js 풀스택 · SEO 최적화</text>
|
||||||
|
|
||||||
|
<!-- 구분선 -->
|
||||||
|
<line x1="400" y1="218" x2="800" y2="218" stroke="#334155" stroke-width="1"/>
|
||||||
|
|
||||||
|
<!-- 아이콘 지표 3개 -->
|
||||||
|
<text x="340" y="255" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#60a5fa">⚡ 최단 7일 납품</text>
|
||||||
|
<text x="600" y="255" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#a78bfa">🔒 코드 품질 보장</text>
|
||||||
|
<text x="860" y="255" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#34d399">✓ 납품 후 AS 포함</text>
|
||||||
|
|
||||||
|
<!-- 플랜 카드 3개 -->
|
||||||
|
<!-- 카드1: 스타터 -->
|
||||||
|
<rect x="60" y="304" width="330" height="320" rx="20" fill="#ffffff" stroke="#e2e8f0" stroke-width="1.5" filter="url(#cardShadow)"/>
|
||||||
|
<rect x="60" y="304" width="330" height="8" rx="4" fill="#2563eb"/>
|
||||||
|
<text x="225" y="350" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#2563eb">STARTER</text>
|
||||||
|
<text x="225" y="410" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="52" font-weight="900" fill="#0f172a">50만원</text>
|
||||||
|
<text x="225" y="438" text-anchor="middle" font-family="sans-serif" font-size="13" fill="#64748b">~부터 시작</text>
|
||||||
|
<line x1="84" y1="454" x2="366" y2="454" stroke="#f1f5f9" stroke-width="1.5"/>
|
||||||
|
<text x="100" y="480" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#64748b">✓ 5페이지 이내</text>
|
||||||
|
<text x="100" y="504" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#64748b">✓ 반응형 디자인</text>
|
||||||
|
<text x="100" y="528" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#64748b">✓ SEO 기본 설정</text>
|
||||||
|
<text x="100" y="552" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#64748b">✓ 납기 7일</text>
|
||||||
|
<rect x="84" y="574" width="262" height="40" rx="10" fill="#eff6ff"/>
|
||||||
|
<text x="215" y="599" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#2563eb">상담 신청</text>
|
||||||
|
|
||||||
|
<!-- 카드2: 비즈니스 (추천) -->
|
||||||
|
<rect x="430" y="284" width="340" height="360" rx="20" fill="url(#card2Grad)" stroke="#7c3aed" stroke-width="2" filter="url(#card2Shadow)"/>
|
||||||
|
<rect x="430" y="284" width="340" height="8" rx="4" fill="#7c3aed"/>
|
||||||
|
<!-- 추천 뱃지 -->
|
||||||
|
<rect x="672" y="274" width="76" height="28" rx="14" fill="#7c3aed"/>
|
||||||
|
<text x="710" y="293" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" font-weight="700" fill="#fff">⭐ 추천</text>
|
||||||
|
<text x="600" y="334" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#7c3aed">BUSINESS</text>
|
||||||
|
<text x="600" y="400" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="52" font-weight="900" fill="#0f172a">150만원</text>
|
||||||
|
<text x="600" y="428" text-anchor="middle" font-family="sans-serif" font-size="13" fill="#64748b">~부터 시작</text>
|
||||||
|
<line x1="450" y1="444" x2="750" y2="444" stroke="#ddd6fe" stroke-width="1.5"/>
|
||||||
|
<text x="470" y="470" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#374151">✓ 10페이지 이내</text>
|
||||||
|
<text x="470" y="494" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#374151">✓ 커스텀 디자인</text>
|
||||||
|
<text x="470" y="518" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#374151">✓ 관리자 페이지</text>
|
||||||
|
<text x="470" y="542" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#374151">✓ SEO 최적화</text>
|
||||||
|
<text x="470" y="566" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#374151">✓ 납기 14일</text>
|
||||||
|
<rect x="450" y="590" width="300" height="44" rx="12" fill="#7c3aed"/>
|
||||||
|
<text x="600" y="617" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="16" font-weight="700" fill="#fff">상담 신청 →</text>
|
||||||
|
|
||||||
|
<!-- 카드3: 프리미엄 -->
|
||||||
|
<rect x="810" y="304" width="330" height="320" rx="20" fill="#0f172a" stroke="#334155" stroke-width="1.5" filter="url(#cardShadow)"/>
|
||||||
|
<rect x="810" y="304" width="330" height="8" rx="4" fill="#f59e0b"/>
|
||||||
|
<text x="975" y="350" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#fbbf24">PREMIUM</text>
|
||||||
|
<text x="975" y="410" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="52" font-weight="900" fill="#ffffff">300만원</text>
|
||||||
|
<text x="975" y="438" text-anchor="middle" font-family="sans-serif" font-size="13" fill="#64748b">~부터 시작</text>
|
||||||
|
<line x1="830" y1="454" x2="1120" y2="454" stroke="#1e293b" stroke-width="1.5"/>
|
||||||
|
<text x="850" y="480" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#94a3b8">✓ 페이지 수 무제한</text>
|
||||||
|
<text x="850" y="504" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#94a3b8">✓ 결제/회원 시스템</text>
|
||||||
|
<text x="850" y="528" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#94a3b8">✓ DB 연동</text>
|
||||||
|
<text x="850" y="552" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#94a3b8">✓ 6개월 유지보수</text>
|
||||||
|
<rect x="830" y="574" width="262" height="40" rx="10" fill="#1e293b"/>
|
||||||
|
<text x="961" y="599" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#fbbf24">프리미엄 상담</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 7.2 KiB |
124
public/marketing/thumb-prompt.svg
Normal file
124
public/marketing/thumb-prompt.svg
Normal file
@@ -0,0 +1,124 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="bg" x1="135deg" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#1e1b4b"/>
|
||||||
|
<stop offset="100%" style="stop-color:#0f172a"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="bg2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#1e1b4b"/>
|
||||||
|
<stop offset="100%" style="stop-color:#0f172a"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="headGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" style="stop-color:#a78bfa"/>
|
||||||
|
<stop offset="100%" style="stop-color:#60a5fa"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="badGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#374151"/>
|
||||||
|
<stop offset="100%" style="stop-color:#1f2937"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="goodGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#1e1b4b"/>
|
||||||
|
<stop offset="100%" style="stop-color:#312e81"/>
|
||||||
|
</linearGradient>
|
||||||
|
<radialGradient id="glow" cx="50%" cy="40%" r="55%">
|
||||||
|
<stop offset="0%" style="stop-color:#7c3aed;stop-opacity:0.2"/>
|
||||||
|
<stop offset="100%" style="stop-color:#7c3aed;stop-opacity:0"/>
|
||||||
|
</radialGradient>
|
||||||
|
<filter id="bubbleShadow">
|
||||||
|
<feDropShadow dx="0" dy="6" stdDeviation="12" flood-color="#7c3aed" flood-opacity="0.3"/>
|
||||||
|
</filter>
|
||||||
|
<filter id="badShadow">
|
||||||
|
<feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#000" flood-opacity="0.3"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- 배경 -->
|
||||||
|
<rect width="1200" height="675" fill="url(#bg2)"/>
|
||||||
|
<rect width="1200" height="675" fill="url(#glow)"/>
|
||||||
|
|
||||||
|
<!-- 배경 코드 패턴 -->
|
||||||
|
<text x="40" y="100" font-family="monospace" font-size="13" fill="#312e81" opacity="0.6">system: You are an expert...</text>
|
||||||
|
<text x="40" y="140" font-family="monospace" font-size="13" fill="#312e81" opacity="0.4">role: assistant</text>
|
||||||
|
<text x="40" y="580" font-family="monospace" font-size="13" fill="#312e81" opacity="0.4">temperature: 0.7</text>
|
||||||
|
<text x="40" y="610" font-family="monospace" font-size="13" fill="#312e81" opacity="0.3">max_tokens: 2048</text>
|
||||||
|
<text x="900" y="80" font-family="monospace" font-size="13" fill="#312e81" opacity="0.4">{"role": "user",</text>
|
||||||
|
<text x="900" y="110" font-family="monospace" font-size="13" fill="#312e81" opacity="0.3"> "content": "..."}</text>
|
||||||
|
|
||||||
|
<!-- 상단 뱃지 -->
|
||||||
|
<rect x="60" y="66" width="270" height="38" rx="19" fill="#3b0764" stroke="#7c3aed" stroke-width="1"/>
|
||||||
|
<text x="84" y="90" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#c4b5fd">🧠 AI 프롬프트 전문 설계</text>
|
||||||
|
|
||||||
|
<!-- 헤드라인 -->
|
||||||
|
<text x="60" y="162" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="48" font-weight="800" fill="#ffffff">AI를 제대로</text>
|
||||||
|
<text x="60" y="220" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="48" font-weight="800" fill="url(#headGrad)">써본 적 있으신가요?</text>
|
||||||
|
<text x="60" y="272" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="20" fill="#94a3b8">업무 특화 프롬프트로 생산성 극대화</text>
|
||||||
|
|
||||||
|
<!-- 수치 뱃지들 -->
|
||||||
|
<rect x="60" y="300" width="140" height="64" rx="12" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1"/>
|
||||||
|
<text x="130" y="328" text-anchor="middle" font-family="sans-serif" font-size="28" font-weight="900" fill="#a78bfa">10x</text>
|
||||||
|
<text x="130" y="352" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">생산성 향상</text>
|
||||||
|
|
||||||
|
<rect x="212" y="300" width="140" height="64" rx="12" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1"/>
|
||||||
|
<text x="282" y="328" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="22" font-weight="900" fill="#60a5fa">3일</text>
|
||||||
|
<text x="282" y="352" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">납품 (베이직)</text>
|
||||||
|
|
||||||
|
<rect x="364" y="300" width="140" height="64" rx="12" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1"/>
|
||||||
|
<text x="434" y="328" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="22" font-weight="900" fill="#34d399">10만원~</text>
|
||||||
|
<text x="434" y="352" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">시작 가격</text>
|
||||||
|
|
||||||
|
<!-- 호환 AI 뱃지 -->
|
||||||
|
<text x="60" y="398" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#64748b">지원 AI:</text>
|
||||||
|
<rect x="130" y="381" width="100" height="28" rx="8" fill="#10a37f" opacity="0.9"/>
|
||||||
|
<text x="180" y="400" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="700" fill="#fff">ChatGPT</text>
|
||||||
|
<rect x="240" y="381" width="70" height="28" rx="8" fill="#CC785C" opacity="0.9"/>
|
||||||
|
<text x="275" y="400" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="700" fill="#fff">Claude</text>
|
||||||
|
<rect x="320" y="381" width="80" height="28" rx="8" fill="#1a73e8" opacity="0.9"/>
|
||||||
|
<text x="360" y="400" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="700" fill="#fff">Gemini</text>
|
||||||
|
|
||||||
|
<!-- URL -->
|
||||||
|
<text x="60" y="628" font-family="sans-serif" font-size="14" fill="#475569">jaengseung-made.com</text>
|
||||||
|
|
||||||
|
<!-- 오른쪽 Before/After 말풍선 -->
|
||||||
|
<!-- Before 영역 -->
|
||||||
|
<text x="638" y="90" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#ef4444">❌ BEFORE — 일반 프롬프트</text>
|
||||||
|
<rect x="630" y="104" width="530" height="220" rx="16" fill="url(#badGrad)" stroke="#4b5563" stroke-width="1" filter="url(#badShadow)"/>
|
||||||
|
|
||||||
|
<!-- 사용자 메시지 -->
|
||||||
|
<rect x="848" y="120" width="290" height="44" rx="12" fill="#4b5563"/>
|
||||||
|
<text x="868" y="140" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#e5e7eb">보고서 써줘</text>
|
||||||
|
<text x="868" y="158" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#9ca3af">(프롬프트 7글자)</text>
|
||||||
|
|
||||||
|
<!-- AI 응답 -->
|
||||||
|
<rect x="648" y="176" width="320" height="130" rx="12" fill="#374151"/>
|
||||||
|
<rect x="648" y="176" width="320" height="130" rx="12" fill="#374151"/>
|
||||||
|
<text x="668" y="198" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#9ca3af">보고서를 작성해 드리겠습니다.</text>
|
||||||
|
<text x="668" y="218" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#9ca3af">제목: 보고서</text>
|
||||||
|
<text x="668" y="238" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#9ca3af">내용: [내용을 입력해주세요]</text>
|
||||||
|
<text x="668" y="258" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#6b7280">결론: [결론을 입력해주세요]</text>
|
||||||
|
<text x="668" y="278" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#6b7280">...</text>
|
||||||
|
<text x="668" y="296" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#ef4444">→ 쓸모없는 템플릿 반환</text>
|
||||||
|
|
||||||
|
<!-- After 영역 -->
|
||||||
|
<text x="638" y="358" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#34d399">✅ AFTER — 최적화 프롬프트</text>
|
||||||
|
<rect x="630" y="372" width="530" height="240" rx="16" fill="url(#goodGrad)" stroke="#7c3aed" stroke-width="1.5" filter="url(#bubbleShadow)"/>
|
||||||
|
|
||||||
|
<!-- 최적화된 프롬프트 -->
|
||||||
|
<rect x="820" y="388" width="318" height="90" rx="12" fill="#312e81"/>
|
||||||
|
<text x="840" y="408" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#c4b5fd">[역할] 당신은 5년 경력 경영분석가</text>
|
||||||
|
<text x="840" y="424" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#c4b5fd">[배경] 임원 보고용, 3분 이내 읽기</text>
|
||||||
|
<text x="840" y="440" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#c4b5fd">[형식] 요약→현황→제언 구조</text>
|
||||||
|
<text x="840" y="456" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#c4b5fd">[제약] 불필요한 미사여구 제거</text>
|
||||||
|
<text x="840" y="472" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#a78bfa">(최적화 프롬프트)</text>
|
||||||
|
|
||||||
|
<!-- AI 응답 (좋은 버전) -->
|
||||||
|
<rect x="648" y="492" width="330" height="104" rx="12" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1"/>
|
||||||
|
<text x="668" y="514" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#e2e8f0">📋 [임원 보고 요약]</text>
|
||||||
|
<text x="668" y="532" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#c4b5fd">▶ 핵심 수치: 매출 12% 성장</text>
|
||||||
|
<text x="668" y="550" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#c4b5fd">▶ 리스크 요인: 원가 상승 3건</text>
|
||||||
|
<text x="668" y="568" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#c4b5fd">▶ 즉시 조치 사항: ...</text>
|
||||||
|
<text x="668" y="584" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#34d399">→ 즉시 활용 가능한 보고서 완성!</text>
|
||||||
|
|
||||||
|
<!-- 하단 바 -->
|
||||||
|
<rect x="0" y="635" width="1200" height="40" fill="#4c1d95"/>
|
||||||
|
<text x="600" y="660" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="600" fill="#ffffff">ChatGPT · Claude · Gemini 업무 특화 프롬프트 설계 · jaengseung-made.com</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 9.2 KiB |
151
public/marketing/thumb-stock.svg
Normal file
151
public/marketing/thumb-stock.svg
Normal file
@@ -0,0 +1,151 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#0f172a"/>
|
||||||
|
<stop offset="60%" style="stop-color:#052e16"/>
|
||||||
|
<stop offset="100%" style="stop-color:#0f172a"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="headGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" style="stop-color:#22c55e"/>
|
||||||
|
<stop offset="100%" style="stop-color:#86efac"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="chartLine" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" style="stop-color:#22c55e;stop-opacity:0.4"/>
|
||||||
|
<stop offset="100%" style="stop-color:#22c55e"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="chartFill" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#22c55e;stop-opacity:0.25"/>
|
||||||
|
<stop offset="100%" style="stop-color:#22c55e;stop-opacity:0"/>
|
||||||
|
</linearGradient>
|
||||||
|
<radialGradient id="glowGreen" cx="70%" cy="50%" r="50%">
|
||||||
|
<stop offset="0%" style="stop-color:#22c55e;stop-opacity:0.15"/>
|
||||||
|
<stop offset="100%" style="stop-color:#22c55e;stop-opacity:0"/>
|
||||||
|
</radialGradient>
|
||||||
|
<filter id="chartShadow">
|
||||||
|
<feDropShadow dx="0" dy="8" stdDeviation="16" flood-color="#000" flood-opacity="0.5"/>
|
||||||
|
</filter>
|
||||||
|
<filter id="phoneShadow">
|
||||||
|
<feDropShadow dx="0" dy="16" stdDeviation="24" flood-color="#22c55e" flood-opacity="0.2"/>
|
||||||
|
</filter>
|
||||||
|
<clipPath id="phoneClip">
|
||||||
|
<rect x="860" y="80" width="280" height="530" rx="28"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- 배경 -->
|
||||||
|
<rect width="1200" height="675" fill="url(#bg)"/>
|
||||||
|
<rect width="1200" height="675" fill="url(#glowGreen)"/>
|
||||||
|
|
||||||
|
<!-- 배경 차트 라인 (은은하게) -->
|
||||||
|
<polyline points="0,500 120,420 240,460 360,380 480,400 600,300 720,340 840,260 960,220 1200,180"
|
||||||
|
fill="none" stroke="#22c55e" stroke-width="1" opacity="0.08"/>
|
||||||
|
|
||||||
|
<!-- 배경 격자 -->
|
||||||
|
<defs>
|
||||||
|
<pattern id="grid" width="50" height="50" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M 50 0 L 0 0 0 50" fill="none" stroke="#1e3a2a" stroke-width="0.6"/>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect width="1200" height="675" fill="url(#grid)" opacity="0.5"/>
|
||||||
|
|
||||||
|
<!-- 왼쪽 콘텐츠 -->
|
||||||
|
<!-- 뱃지 -->
|
||||||
|
<rect x="60" y="66" width="240" height="38" rx="19" fill="#052e16" stroke="#22c55e" stroke-width="1"/>
|
||||||
|
<text x="80" y="90" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#22c55e">📈 텔레그램 실시간 알림</text>
|
||||||
|
|
||||||
|
<!-- 헤드라인 -->
|
||||||
|
<text x="60" y="160" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="50" font-weight="800" fill="#ffffff">잠자는 동안에도</text>
|
||||||
|
<text x="60" y="218" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="50" font-weight="800" fill="url(#headGrad)">자동으로 매매</text>
|
||||||
|
|
||||||
|
<!-- 서브텍스트 -->
|
||||||
|
<text x="60" y="268" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="18" fill="#94a3b8">백테스팅 · 실시간 매매 · 손절/익절 자동화</text>
|
||||||
|
|
||||||
|
<!-- 기능 뱃지들 -->
|
||||||
|
<rect x="60" y="294" width="490" height="100" rx="14" fill="#0a1a10" stroke="#22c55e" stroke-width="1" opacity="0.9"/>
|
||||||
|
<!-- 행1 -->
|
||||||
|
<circle cx="88" cy="322" r="16" fill="#052e16" stroke="#22c55e" stroke-width="1"/>
|
||||||
|
<text x="88" y="328" text-anchor="middle" font-size="14">⚙️</text>
|
||||||
|
<text x="116" y="320" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#e2e8f0">KIS API 연동</text>
|
||||||
|
<text x="116" y="336" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">한국투자증권 공식 API</text>
|
||||||
|
|
||||||
|
<circle cx="290" cy="322" r="16" fill="#052e16" stroke="#22c55e" stroke-width="1"/>
|
||||||
|
<text x="290" y="328" text-anchor="middle" font-size="14">📊</text>
|
||||||
|
<text x="318" y="320" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#e2e8f0">백테스팅</text>
|
||||||
|
<text x="318" y="336" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">전략 사전 검증</text>
|
||||||
|
|
||||||
|
<!-- 행2 -->
|
||||||
|
<circle cx="88" cy="368" r="16" fill="#052e16" stroke="#22c55e" stroke-width="1"/>
|
||||||
|
<text x="88" y="374" text-anchor="middle" font-size="14">🔔</text>
|
||||||
|
<text x="116" y="366" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#e2e8f0">텔레그램 알림</text>
|
||||||
|
<text x="116" y="382" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">매수/매도 실시간 알림</text>
|
||||||
|
|
||||||
|
<circle cx="290" cy="368" r="16" fill="#052e16" stroke="#22c55e" stroke-width="1"/>
|
||||||
|
<text x="290" y="374" text-anchor="middle" font-size="14">🛡️</text>
|
||||||
|
<text x="318" y="366" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#e2e8f0">리스크 관리</text>
|
||||||
|
<text x="318" y="382" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">손절/익절 자동 설정</text>
|
||||||
|
|
||||||
|
<!-- 가격 -->
|
||||||
|
<rect x="60" y="420" width="200" height="60" rx="14" fill="#052e16" stroke="#22c55e" stroke-width="1.5"/>
|
||||||
|
<text x="160" y="444" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#86efac">기본 세팅 가격</text>
|
||||||
|
<text x="160" y="468" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="26" font-weight="800" fill="#22c55e">55만원~</text>
|
||||||
|
|
||||||
|
<!-- 면책 문구 -->
|
||||||
|
<rect x="60" y="494" width="490" height="36" rx="8" fill="#1c1917" opacity="0.8"/>
|
||||||
|
<text x="80" y="516" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#6b7280">⚠️ 수익을 보장하지 않습니다. 자동화 도구 제공 서비스입니다.</text>
|
||||||
|
|
||||||
|
<!-- URL -->
|
||||||
|
<text x="60" y="628" font-family="sans-serif" font-size="14" fill="#475569">jaengseung-made.com</text>
|
||||||
|
|
||||||
|
<!-- 오른쪽 폰 목업 -->
|
||||||
|
<g filter="url(#phoneShadow)">
|
||||||
|
<!-- 폰 외곽 -->
|
||||||
|
<rect x="860" y="80" width="280" height="530" rx="28" fill="#0f172a" stroke="#1e293b" stroke-width="2"/>
|
||||||
|
<!-- 노치 -->
|
||||||
|
<rect x="960" y="88" width="80" height="16" rx="8" fill="#0a0f18"/>
|
||||||
|
|
||||||
|
<!-- 화면 내부 -->
|
||||||
|
<g clip-path="url(#phoneClip)">
|
||||||
|
<rect x="860" y="80" width="280" height="530" fill="#111827"/>
|
||||||
|
|
||||||
|
<!-- 텔레그램 헤더 -->
|
||||||
|
<rect x="860" y="110" width="280" height="56" fill="#1d4ed8"/>
|
||||||
|
<circle cx="892" cy="138" r="16" fill="#3b82f6"/>
|
||||||
|
<text x="892" y="144" text-anchor="middle" font-size="16">✈️</text>
|
||||||
|
<text x="920" y="132" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#fff">주식 자동매매 봇</text>
|
||||||
|
<text x="920" y="150" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#93c5fd">● 온라인</text>
|
||||||
|
|
||||||
|
<!-- 채팅 메시지들 -->
|
||||||
|
<!-- 메시지 1: 매수 -->
|
||||||
|
<rect x="876" y="180" width="230" height="66" rx="12" fill="#1e3a8a"/>
|
||||||
|
<text x="892" y="200" font-family="'Malgun Gothic',sans-serif" font-size="11" font-weight="700" fill="#22c55e">✅ 매수 체결</text>
|
||||||
|
<text x="892" y="218" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#e2e8f0">삼성전자 10주</text>
|
||||||
|
<text x="892" y="236" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#93c5fd">₩73,400 × 10 = ₩734,000</text>
|
||||||
|
|
||||||
|
<!-- 메시지 2: 수익 -->
|
||||||
|
<rect x="876" y="260" width="230" height="66" rx="12" fill="#0f2a20"/>
|
||||||
|
<text x="892" y="280" font-family="'Malgun Gothic',sans-serif" font-size="11" font-weight="700" fill="#fbbf24">💰 목표가 도달</text>
|
||||||
|
<text x="892" y="298" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#e2e8f0">수익률 +3.2%</text>
|
||||||
|
<text x="892" y="316" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#34d399">매도 주문 실행 중...</text>
|
||||||
|
|
||||||
|
<!-- 메시지 3: 매도 완료 -->
|
||||||
|
<rect x="876" y="340" width="230" height="66" rx="12" fill="#1e3a8a"/>
|
||||||
|
<text x="892" y="360" font-family="'Malgun Gothic',sans-serif" font-size="11" font-weight="700" fill="#22c55e">✅ 매도 체결 완료</text>
|
||||||
|
<text x="892" y="378" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#e2e8f0">실현 수익: +₩23,480</text>
|
||||||
|
<text x="892" y="396" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#93c5fd">09:32:14</text>
|
||||||
|
|
||||||
|
<!-- 차트 영역 -->
|
||||||
|
<rect x="876" y="422" width="248" height="140" rx="12" fill="#0f172a" stroke="#1e293b" stroke-width="1"/>
|
||||||
|
<text x="886" y="440" font-family="sans-serif" font-size="10" fill="#64748b">오늘의 수익</text>
|
||||||
|
<text x="886" y="458" font-family="'Malgun Gothic',sans-serif" font-size="18" font-weight="800" fill="#22c55e">+₩47,250</text>
|
||||||
|
<!-- 미니 차트 -->
|
||||||
|
<polyline points="886,540 910,530 934,534 958,520 982,524 1006,510 1030,506 1054,496 1078,488 1102,480"
|
||||||
|
fill="none" stroke="#22c55e" stroke-width="2"/>
|
||||||
|
<polygon points="886,560 886,540 910,530 934,534 958,520 982,524 1006,510 1030,506 1054,496 1078,488 1102,480 1102,560"
|
||||||
|
fill="url(#chartFill)"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- 하단 바 -->
|
||||||
|
<rect x="0" y="635" width="1200" height="40" fill="#052e16"/>
|
||||||
|
<text x="600" y="660" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="600" fill="#ffffff">텔레그램 연동 국내주식 자동매매 봇 · KIS API · 7년차 개발자 직접 구축 · jaengseung-made.com</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 9.3 KiB |
Reference in New Issue
Block a user