gahusb/jaengseung-made
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 홈페이지 제작 폰트 통일 + 자동화 툴 다운로드 섹션 추가

Browse Source 
- app/services/website/page.tsx: Google Fonts (Syne, Noto Sans KR) 제거
  → 사이트 공통 폰트 CookieRun으로 교체, @import 제거
- app/services/automation/page.tsx: 자동화 도구 무료 다운로드 섹션 추가
  - 엑셀 자동화 도구(배포), 웹 스크래핑·이메일 자동화(준비중) 카드
  - 각 카드 → 상세 서브페이지 링크 연결
- app/services/automation/tools/excel/page.tsx: 신규 생성
  - 엑셀 매크로 툴킷 상세 페이지 (기능 6가지, 사용법, 미리보기 목업, FAQ)
  - 무료 다운로드 버튼 (/downloads/Excel_Macro_Toolkit_v1.2.xlsm)
  - 맞춤 개발 문의 CTA
- public/downloads/: 다운로드 파일 배치 디렉토리 생성

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
gahusb
2026-03-20 00:00:46 +09:00
parent 0222eca381
commit b2c96ceec7
3 changed files with 474 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
app/services/automation/page.tsx
View File

@@ -4,6 +4,60 @@ import { useState } from 'react';
import Link from 'next/link';
import ContactModal from '../../components/ContactModal';
const tools = [
{
id: 'excel',
title: '엑셀 자동화 도구',
subtitle: 'Excel Macro Toolkit v1.2',
desc: '반복 업무를 버튼 하나로 처리하는 엑셀 매크로 모음. 데이터 정리·집계·보고서 자동 생성 기능 포함.',
tags: ['VBA', 'Excel', '매크로', '무료'],
color: '#16a34a',
bgColor: '#f0fdf4',
borderColor: '#bbf7d0',
icon: (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} className="w-7 h-7">
<path strokeLinecap="round" strokeLinejoin="round" d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 01-1.125-1.125M3.375 19.5h1.5C5.496 19.5 6 18.996 6 18.375m-3.75.125v-1.125c0-.621.504-1.125 1.125-1.125h1.5m0 0v1.25m0-1.25c0-.621.504-1.125 1.125-1.125h1.5m0 0V7.875m0 0c0-.621.504-1.125 1.125-1.125h8.25c.621 0 1.125.504 1.125 1.125v8.25m0 0v1.125m0-1.125c0 .621-.504 1.125-1.125 1.125H6m12-8.25v8.25" />
</svg>
),
href: '/services/automation/tools/excel',
ready: true,
},
{
id: 'scraper',
title: '웹 스크래핑 도구',
subtitle: 'Web Scraper v0.9 (베타)',
desc: '공공데이터·쇼핑몰 가격·뉴스를 자동 수집해 엑셀로 저장하는 Python 기반 수집 도구.',
tags: ['Python', 'BeautifulSoup', 'Excel 출력'],
color: '#2563eb',
bgColor: '#eff6ff',
borderColor: '#bfdbfe',
icon: (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} className="w-7 h-7">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
</svg>
),
href: '/services/automation/tools/scraper',
ready: false,
},
{
id: 'email',
title: '이메일 자동 발송 도구',
subtitle: 'Email Scheduler (준비중)',
desc: '조건 설정 후 일정 시간에 자동으로 이메일을 발송. 엑셀 수신자 목록 연동 지원.',
tags: ['Python', 'SMTP', '스케줄링'],
color: '#7c3aed',
bgColor: '#f5f3ff',
borderColor: '#ddd6fe',
icon: (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} className="w-7 h-7">
<path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
</svg>
),
href: '/services/automation/tools/email',
ready: false,
},
];
const CHECKLIST = [
'자동화하고 싶은 업무를 구체적으로 설명해주세요',
'현재 사용 중인 프로그램/시스템 (엑셀, ERP, 쇼핑몰 등)',
@@ -198,6 +252,49 @@ export default function AutomationPage() {
</div>
</div>
{/* ─── 자동화 툴 다운로드 ─── */}
<div className="px-6 pb-12 lg:px-12">
<div className="max-w-5xl mx-auto">
<div className="text-center mb-8">
<p className="text-cyan-600 text-xs font-bold uppercase tracking-widest mb-2">FREE TOOLS</p>
<h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b] mb-2">자동화 도구 무료 다운로드</h2>
<p className="text-slate-500 text-sm">직접 만들어 사용 중인 자동화 도구를 무료로 공유합니다.<br />필요에 맞게 수정해서 쓰실 수 있어요.</p>
</div>
<div className="grid sm:grid-cols-3 gap-5">
{tools.map((tool) => (
<div key={tool.id} style={{ borderColor: tool.borderColor, backgroundColor: tool.bgColor }}
className="rounded-2xl border-2 p-5 flex flex-col relative">
{!tool.ready && (
<div className="absolute top-3 right-3 bg-slate-200 text-slate-500 text-[10px] font-bold px-2 py-0.5 rounded-full">준비중</div>
)}
<div style={{ color: tool.color }} className="mb-3">{tool.icon}</div>
<div style={{ color: tool.color }} className="text-xs font-bold mb-0.5">{tool.subtitle}</div>
<div className="font-extrabold text-[#04102b] text-sm mb-2">{tool.title}</div>
<p className="text-slate-500 text-xs leading-relaxed mb-4 flex-1">{tool.desc}</p>
<div className="flex flex-wrap gap-1.5 mb-4">
{tool.tags.map((tag) => (
<span key={tag} style={{ color: tool.color, borderColor: tool.borderColor }}
className="text-[10px] font-bold px-2 py-0.5 rounded-full border bg-white">{tag}</span>
))}
</div>
{tool.ready ? (
<Link href={tool.href}
style={{ backgroundColor: tool.color }}
className="block w-full text-center py-2.5 rounded-xl text-white text-sm font-bold hover:opacity-90 transition">
상세보기 · 다운로드 →
</Link>
) : (
<button disabled
className="block w-full text-center py-2.5 rounded-xl bg-slate-200 text-slate-400 text-sm font-bold cursor-not-allowed">
준비 중입니다
</button>
)}
</div>
))}
</div>
</div>
</div>
{/* ─── CTA ─── */}
<div className="px-6 pb-12 lg:px-12">
<div className="max-w-3xl mx-auto">

344
app/services/automation/tools/excel/page.tsx Normal file
View File

@@ -0,0 +1,344 @@
'use client';
import Link from 'next/link';
import { useState } from 'react';
const features = [
{
icon: (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} className="w-5 h-5">
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z" />
</svg>
),
title: '중복 데이터 자동 제거',
desc: '여러 시트에 흩어진 데이터를 하나로 합치고 중복 행을 자동으로 찾아 제거합니다. 작업 시간 90% 단축.',
color: 'text-emerald-600',
bg: 'bg-emerald-50',
border: 'border-emerald-200',
},
{
icon: (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} className="w-5 h-5">
<path strokeLinecap="round" strokeLinejoin="round" d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z" />
</svg>
),
title: '일별/월별 집계 자동화',
desc: '날짜 컬럼 기준으로 일별·주별·월별 합계를 자동 계산하고 별도 시트에 보고서를 생성합니다.',
color: 'text-blue-600',
bg: 'bg-blue-50',
border: 'border-blue-200',
},
{
icon: (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} className="w-5 h-5">
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
</svg>
),
title: '폴더 내 파일 일괄 처리',
desc: '지정한 폴더의 엑셀 파일 전체를 자동으로 열고 데이터를 통합합니다. 파일 수가 많아도 OK.',
color: 'text-violet-600',
bg: 'bg-violet-50',
border: 'border-violet-200',
},
{
icon: (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} className="w-5 h-5">
<path strokeLinecap="round" strokeLinejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42" />
</svg>
),
title: '서식·색상 자동 지정',
desc: '값 조건에 따라 셀 색상, 굵기, 테두리를 자동으로 지정합니다. 조건부 서식보다 빠릅니다.',
color: 'text-orange-600',
bg: 'bg-orange-50',
border: 'border-orange-200',
},
{
icon: (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} className="w-5 h-5">
<path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
),
title: '키워드 일괄 검색·치환',
desc: '전체 시트에서 특정 단어를 찾아 일괄 변경하거나 해당 행만 별도 추출합니다.',
color: 'text-cyan-600',
bg: 'bg-cyan-50',
border: 'border-cyan-200',
},
{
icon: (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} className="w-5 h-5">
<path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
</svg>
),
title: 'PDF / CSV 자동 저장',
desc: '작업 완료 후 PDF 또는 CSV 형식으로 자동 저장하고 지정한 폴더에 날짜별로 백업합니다.',
color: 'text-rose-600',
bg: 'bg-rose-50',
border: 'border-rose-200',
},
];
const howToUse = [
{ step: '01', title: '파일 다운로드', desc: '아래 버튼으로 .xlsm 파일을 받습니다. 매크로 포함 형식입니다.' },
{ step: '02', title: '매크로 실행 허용', desc: '파일을 열면 상단 노란 바에서 "콘텐츠 사용" 버튼을 클릭합니다.' },
{ step: '03', title: '데이터 시트에 붙여넣기', desc: '"Data" 시트에 내 데이터를 붙여넣습니다. A1부터 시작하면 됩니다.' },
{ step: '04', title: '매크로 버튼 클릭', desc: '"Control" 시트에서 원하는 기능 버튼을 클릭하면 자동 실행됩니다.' },
];
const faqs = [
{
q: '맥(Mac)에서도 사용할 수 있나요?',
a: 'Excel for Mac에서도 대부분 동작하나, VBA 일부 기능(파일 다이얼로그 등)은 Windows 전용입니다. Mac 사용자는 상담을 통해 호환 버전으로 수정 가능합니다.',
},
{
q: '파일이 열리지 않거나 오류가 발생하면요?',
a: 'Excel 2016 이상 버전을 권장합니다. 보안 정책으로 매크로가 차단된 경우 Excel 옵션 → 보안 센터 → 매크로 설정에서 "알림과 함께 VBA 매크로 사용"으로 변경해 주세요.',
},
{
q: '내 업무에 맞게 수정이 가능한가요?',
a: '파일 내 VBA 코드는 자유롭게 수정할 수 있습니다. 수정이 어려우시면 맞춤 자동화 개발 서비스로 문의해 주세요. 내 업무에 딱 맞는 버전을 만들어 드립니다.',
},
];
export default function ExcelToolPage() {
const [openFaq, setOpenFaq] = useState<number | null>(null);
return (
<div className="min-h-full bg-[#f0f5ff]">
{/* Hero */}
<div className="bg-gradient-to-br from-[#052e16] via-[#14532d] to-[#052e16] px-6 py-12 lg:px-12">
<div className="max-w-4xl mx-auto">
<Link href="/services/automation"
className="inline-flex items-center gap-1.5 text-emerald-300/60 hover:text-emerald-300 text-sm mb-6 transition">
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg>
업무 자동화 서비스로 돌아가기
</Link>
<div className="flex flex-col sm:flex-row sm:items-center gap-6">
<div className="w-20 h-20 rounded-2xl bg-emerald-400/15 border border-emerald-400/30 flex items-center justify-center flex-shrink-0">
<svg className="w-10 h-10 text-emerald-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 01-1.125-1.125M3.375 19.5h1.5C5.496 19.5 6 18.996 6 18.375m-3.75.125v-1.125c0-.621.504-1.125 1.125-1.125h1.5m0 0v1.25m0-1.25c0-.621.504-1.125 1.125-1.125h1.5m0 0V7.875m0 0c0-.621.504-1.125 1.125-1.125h8.25c.621 0 1.125.504 1.125 1.125v8.25m0 0v1.125m0-1.125c0 .621-.504 1.125-1.125 1.125H6m12-8.25v8.25" />
</svg>
</div>
<div>
<div className="flex items-center gap-2 mb-2">
<span className="text-emerald-400 text-xs font-bold uppercase tracking-widest">FREE TOOL</span>
<span className="bg-emerald-400/20 border border-emerald-400/40 text-emerald-300 text-[10px] font-bold px-2 py-0.5 rounded-full">v1.2</span>
<span className="bg-white/10 text-white/50 text-[10px] font-bold px-2 py-0.5 rounded-full">VBA · Excel</span>
</div>
<h1 className="text-3xl md:text-4xl font-extrabold text-white mb-2 leading-tight">
엑셀 자동화 도구<br />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-teal-300">
Excel Macro Toolkit
</span>
</h1>
<p className="text-emerald-100/50 text-sm leading-relaxed">
매일 반복하는 엑셀 작업을 버튼 하나로 처리하는 VBA 매크로 모음입니다.<br />
데이터 정리, 중복 제거, 집계, 보고서 생성까지 실무에서 검증된 기능들만 담았습니다.
</p>
</div>
</div>
{/* 통계 배지 */}
<div className="mt-8 inline-grid grid-cols-3 gap-px bg-emerald-400/10 border border-emerald-400/20 rounded-2xl overflow-hidden">
{[
{ v: '6가지', l: '핵심 기능' },
{ v: '무료', l: '완전 무료' },
{ v: 'Excel 2016+', l: '지원 버전' },
].map((s) => (
<div key={s.l} className="bg-[#052e16]/80 px-5 py-3 text-center">
<div className="text-white font-extrabold text-base">{s.v}</div>
<div className="text-emerald-400/50 text-xs mt-0.5">{s.l}</div>
</div>
))}
</div>
</div>
</div>
<div className="px-6 py-10 lg:px-12">
<div className="max-w-4xl mx-auto space-y-10">
{/* 다운로드 카드 */}
<div className="bg-white rounded-2xl border-2 border-emerald-200 p-6 flex flex-col sm:flex-row items-center gap-6">
<div className="flex-1">
<div className="text-emerald-700 text-xs font-bold uppercase tracking-widest mb-1">DOWNLOAD</div>
<div className="font-extrabold text-[#04102b] text-lg mb-1">Excel_Macro_Toolkit_v1.2.xlsm</div>
<div className="text-slate-500 text-xs mb-3">크기: 약 85KB · 매크로 포함 형식 · 상업적 이용 가능</div>
<div className="flex flex-wrap gap-2">
{['VBA 매크로', '6가지 기능', 'Control 시트 UI', '가이드 시트 포함'].map((t) => (
<span key={t} className="text-[10px] font-bold px-2 py-0.5 rounded-full border border-emerald-200 text-emerald-700 bg-emerald-50">{t}</span>
))}
</div>
</div>
<div className="flex flex-col gap-2 w-full sm:w-auto">
<a
href="/downloads/Excel_Macro_Toolkit_v1.2.xlsm"
download
className="flex items-center justify-center gap-2 bg-emerald-600 hover:bg-emerald-500 text-white px-6 py-3 rounded-xl font-extrabold text-sm transition-all shadow-lg shadow-emerald-900/20 w-full sm:w-48"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
</svg>
무료 다운로드
</a>
<p className="text-[10px] text-slate-400 text-center">로그인 없이 즉시 다운로드</p>
</div>
</div>
{/* 기능 소개 */}
<div>
<div className="text-center mb-6">
<p className="text-emerald-600 text-xs font-bold uppercase tracking-widest mb-1">FEATURES</p>
<h2 className="text-2xl font-extrabold text-[#04102b]">포함된 기능 6가지</h2>
</div>
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
{features.map((f) => (
<div key={f.title} className={`${f.bg} border-2 ${f.border} rounded-2xl p-5`}>
<div className={`${f.color} mb-3`}>{f.icon}</div>
<div className="font-bold text-[#04102b] text-sm mb-1.5">{f.title}</div>
<p className="text-slate-500 text-xs leading-relaxed">{f.desc}</p>
</div>
))}
</div>
</div>
{/* 사용 방법 */}
<div>
<div className="text-center mb-6">
<p className="text-emerald-600 text-xs font-bold uppercase tracking-widest mb-1">HOW TO USE</p>
<h2 className="text-2xl font-extrabold text-[#04102b]">사용 방법</h2>
</div>
<div className="relative">
<div className="hidden sm:block absolute top-10 left-[10%] right-[10%] h-0.5 bg-gradient-to-r from-emerald-200 via-teal-100 to-emerald-200" />
<div className="grid grid-cols-1 sm:grid-cols-4 gap-4">
{howToUse.map((h) => (
<div key={h.step} className="text-center">
<div className="w-20 h-20 mx-auto rounded-2xl bg-gradient-to-br from-[#052e16] to-[#14532d] border border-emerald-400/20 flex flex-col items-center justify-center mb-3 shadow-lg">
<span className="text-emerald-400 text-[10px] font-bold">STEP</span>
<span className="text-white font-extrabold text-lg leading-none">{h.step}</span>
</div>
<div className="font-bold text-[#04102b] text-sm mb-1">{h.title}</div>
<div className="text-slate-500 text-xs leading-relaxed">{h.desc}</div>
</div>
))}
</div>
</div>
</div>
{/* 미리보기 (목업) */}
<div>
<div className="text-center mb-6">
<p className="text-emerald-600 text-xs font-bold uppercase tracking-widest mb-1">PREVIEW</p>
<h2 className="text-2xl font-extrabold text-[#04102b]">화면 미리보기</h2>
</div>
<div className="bg-white rounded-2xl border border-[#dbe8ff] overflow-hidden shadow-sm">
{/* Excel 목업 */}
<div className="bg-[#1e7145] px-4 py-2 flex items-center gap-3">
<div className="flex gap-1.5">
<div className="w-3 h-3 rounded-full bg-white/30" />
<div className="w-3 h-3 rounded-full bg-white/30" />
<div className="w-3 h-3 rounded-full bg-white/30" />
</div>
<span className="text-white/80 text-xs font-medium">Excel_Macro_Toolkit_v1.2.xlsm</span>
</div>
{/* 탭 */}
<div className="flex border-b border-slate-200 bg-slate-50 px-2 pt-1 gap-1 overflow-x-auto">
{['Control', 'Data', 'Report', 'Guide'].map((tab, i) => (
<div key={tab}
className={`px-4 py-1.5 text-xs font-bold rounded-t-lg border-t border-x ${i === 0 ? 'bg-white border-slate-200 text-[#1e7145]' : 'bg-slate-100 border-slate-200 text-slate-400'}`}>
{tab}
</div>
))}
</div>
{/* Control 시트 목업 */}
<div className="p-6 bg-white">
<div className="text-center mb-5">
<div className="text-lg font-extrabold text-[#1e7145] mb-0.5">📊 Excel Macro Toolkit v1.2</div>
<div className="text-slate-400 text-xs">원하는 기능 버튼을 클릭하세요</div>
</div>
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
{[
{ label: '중복 제거', color: '#16a34a' },
{ label: '일별 집계', color: '#2563eb' },
{ label: '파일 통합', color: '#7c3aed' },
{ label: '서식 자동화', color: '#ea580c' },
{ label: '키워드 검색', color: '#0891b2' },
{ label: 'PDF 저장', color: '#dc2626' },
].map((btn) => (
<div key={btn.label}
style={{ borderColor: btn.color, color: btn.color }}
className="border-2 rounded-lg py-3 text-center text-sm font-bold cursor-default hover:opacity-80 transition bg-white shadow-sm">
{btn.label}
</div>
))}
</div>
<div className="mt-4 p-3 bg-slate-50 rounded-xl border border-slate-200">
<div className="text-[10px] text-slate-400 font-bold mb-1">상태 로그</div>
<div className="text-xs text-emerald-600 font-medium">✓ 준비 완료. 데이터 시트에 작업할 데이터를 붙여넣은 후 버튼을 클릭하세요.</div>
</div>
</div>
</div>
</div>
{/* FAQ */}
<div>
<div className="text-center mb-6">
<p className="text-emerald-600 text-xs font-bold uppercase tracking-widest mb-1">FAQ</p>
<h2 className="text-2xl font-extrabold text-[#04102b]">자주 묻는 질문</h2>
</div>
<div className="space-y-2">
{faqs.map((faq, i) => (
<div key={i} className="bg-white rounded-2xl border border-[#dbe8ff] overflow-hidden">
<button
onClick={() => setOpenFaq(openFaq === i ? null : i)}
className="w-full flex items-center justify-between px-5 py-4 text-left">
<span className="font-bold text-[#04102b] text-sm">{faq.q}</span>
<svg
className={`w-4 h-4 text-slate-400 flex-shrink-0 transition-transform ${openFaq === i ? 'rotate-180' : ''}`}
fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>
{openFaq === i && (
<div className="px-5 pb-4 text-slate-600 text-sm leading-relaxed border-t border-slate-100 pt-3">
{faq.a}
</div>
)}
</div>
))}
</div>
</div>
{/* 하단 CTA */}
<div className="bg-gradient-to-r from-[#052e16] to-[#14532d] 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">CUSTOM AUTOMATION</p>
<h3 className="text-white text-xl font-extrabold mb-2">내 업무에 맞게 수정이 필요하신가요?</h3>
<p className="text-emerald-100/40 text-sm mb-6">
기본 도구로 부족하다면, 업무 프로세스에 딱 맞는 전용 자동화 도구를 제작해 드립니다.
</p>
<div className="flex flex-col sm:flex-row gap-3 justify-center">
<a
href="/downloads/Excel_Macro_Toolkit_v1.2.xlsm"
download
className="inline-flex items-center justify-center gap-2 bg-emerald-400 hover:bg-emerald-300 text-[#052e16] px-6 py-3 rounded-xl font-extrabold text-sm 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="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
</svg>
무료 다운로드
</a>
<Link href="/freelance?service=업무+자동화"
className="inline-flex items-center justify-center gap-2 bg-white/10 hover:bg-white/20 text-white border border-white/20 px-6 py-3 rounded-xl font-extrabold text-sm transition-all">
맞춤 개발 문의 →
</Link>
</div>
</div>
</div>
</div>
</div>
);
}

67
app/services/website/page.tsx
View File

@@ -113,7 +113,6 @@ export default function WebsiteServicePage() {
return (
<div style={{ background: '#020817', minHeight: '100vh', color: 'white' }}>
<style>{`
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gridScroll { from { background-position: 0 0; } to { background-position: 48px 48px; } }
.ws-card:hover { transform: translateY(-5px); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
@@ -139,12 +138,12 @@ export default function WebsiteServicePage() {
display: 'inline-block', fontSize: 11, fontWeight: 700, letterSpacing: '0.2em',
color: '#818cf8', textTransform: 'uppercase',
border: '1px solid rgba(129,140,248,0.35)', padding: '5px 16px', borderRadius: 100,
marginBottom: 28, fontFamily: 'Syne, sans-serif',
marginBottom: 28, fontFamily: "'CookieRun', sans-serif",
}}>
Homepage Development Service
</span>
<h1 style={{
fontFamily: 'Syne, sans-serif', fontSize: 'clamp(30px, 5vw, 58px)', fontWeight: 800,
fontFamily: "'CookieRun', sans-serif", fontSize: 'clamp(30px, 5vw, 58px)', fontWeight: 800,
lineHeight: 1.15, marginBottom: 20,
background: 'linear-gradient(135deg, #ffffff 0%, #c7d2fe 50%, #818cf8 100%)',
WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
@@ -153,7 +152,7 @@ export default function WebsiteServicePage() {
</h1>
<p style={{
fontSize: 16, color: '#94a3b8', lineHeight: 1.8, marginBottom: 36,
fontFamily: "'Noto Sans KR', sans-serif",
fontFamily: "'CookieRun', sans-serif",
}}>
7년차 대기업 개발자가 기획·디자인·개발·배포까지 원스톱으로.<br />
단순한 외주가 아닌, 비즈니스 성과를 만드는 홈페이지를 제작합니다.
@@ -163,7 +162,7 @@ export default function WebsiteServicePage() {
display: 'inline-block', padding: '14px 32px',
background: 'linear-gradient(135deg, #6366f1, #818cf8)',
borderRadius: 12, color: 'white', fontWeight: 700, fontSize: 15,
textDecoration: 'none', fontFamily: "'Noto Sans KR', sans-serif",
textDecoration: 'none', fontFamily: "'CookieRun', sans-serif",
boxShadow: '0 8px 32px rgba(99,102,241,0.4)',
}}>
무료 상담 신청 →
@@ -172,7 +171,7 @@ export default function WebsiteServicePage() {
display: 'inline-block', padding: '14px 32px',
border: '1px solid rgba(255,255,255,0.12)', borderRadius: 12,
color: '#cbd5e1', fontWeight: 600, fontSize: 15,
textDecoration: 'none', fontFamily: "'Noto Sans KR', sans-serif",
textDecoration: 'none', fontFamily: "'CookieRun', sans-serif",
}}>
샘플 보기
</a>
@@ -186,8 +185,8 @@ export default function WebsiteServicePage() {
{ num: '100%', label: '반응형 지원' },
].map((s) => (
<div key={s.label} style={{ textAlign: 'center' }}>
<div style={{ fontSize: 24, fontWeight: 800, color: 'white', fontFamily: 'Syne, sans-serif' }}>{s.num}</div>
<div style={{ fontSize: 12, color: '#475569', fontFamily: "'Noto Sans KR', sans-serif", marginTop: 2 }}>{s.label}</div>
<div style={{ fontSize: 24, fontWeight: 800, color: 'white', fontFamily: "'CookieRun', sans-serif" }}>{s.num}</div>
<div style={{ fontSize: 12, color: '#475569', fontFamily: "'CookieRun', sans-serif", marginTop: 2 }}>{s.label}</div>
</div>
))}
</div>
@@ -198,12 +197,12 @@ export default function WebsiteServicePage() {
<section id="samples" style={{ padding: '56px 24px', maxWidth: 1100, margin: '0 auto' }}>
<div style={{ textAlign: 'center', marginBottom: 40 }}>
<h2 style={{
fontFamily: 'Syne, sans-serif', fontSize: 28, fontWeight: 800,
fontFamily: "'CookieRun', sans-serif", fontSize: 28, fontWeight: 800,
color: 'white', marginBottom: 10,
}}>
포트폴리오 샘플
</h2>
<p style={{ color: '#64748b', fontFamily: "'Noto Sans KR', sans-serif", fontSize: 15 }}>
<p style={{ color: '#64748b', fontFamily: "'CookieRun', sans-serif", fontSize: 15 }}>
카드를 클릭하면 실제 완성 화면을 미리 확인할 수 있습니다
</p>
</div>
@@ -238,19 +237,19 @@ export default function WebsiteServicePage() {
background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(8px)',
border: `1px solid ${s.accent}50`,
borderRadius: 8, padding: '5px 12px',
fontSize: 11, color: s.accent, fontFamily: 'Syne, sans-serif', fontWeight: 700,
fontSize: 11, color: s.accent, fontFamily: "'CookieRun', sans-serif", fontWeight: 700,
}}>
미리보기 →
</div>
</div>
<div style={{ padding: '18px 22px 22px' }}>
<div style={{ fontSize: 11, color: '#475569', fontFamily: 'Syne, sans-serif', marginBottom: 5, letterSpacing: '0.05em' }}>
<div style={{ fontSize: 11, color: '#475569', fontFamily: "'CookieRun', sans-serif", marginBottom: 5, letterSpacing: '0.05em' }}>
{s.subtitle}
</div>
<div style={{ fontSize: 17, fontWeight: 700, color: 'white', fontFamily: 'Syne, sans-serif', marginBottom: 8 }}>
<div style={{ fontSize: 17, fontWeight: 700, color: 'white', fontFamily: "'CookieRun', sans-serif", marginBottom: 8 }}>
{s.title}
</div>
<div style={{ fontSize: 13, color: '#64748b', lineHeight: 1.65, fontFamily: "'Noto Sans KR', sans-serif" }}>
<div style={{ fontSize: 13, color: '#64748b', lineHeight: 1.65, fontFamily: "'CookieRun', sans-serif" }}>
{s.desc}
</div>
</div>
@@ -264,10 +263,10 @@ export default function WebsiteServicePage() {
<section style={{ padding: '56px 24px', background: 'rgba(255,255,255,0.02)', borderTop: '1px solid rgba(255,255,255,0.05)', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
<div style={{ maxWidth: 1000, margin: '0 auto' }}>
<div style={{ textAlign: 'center', marginBottom: 40 }}>
<h2 style={{ fontFamily: 'Syne, sans-serif', fontSize: 28, fontWeight: 800, color: 'white', marginBottom: 10 }}>
<h2 style={{ fontFamily: "'CookieRun', sans-serif", fontSize: 28, fontWeight: 800, color: 'white', marginBottom: 10 }}>
제작 프로세스
</h2>
<p style={{ color: '#64748b', fontFamily: "'Noto Sans KR', sans-serif", fontSize: 15 }}>
<p style={{ color: '#64748b', fontFamily: "'CookieRun', sans-serif", fontSize: 15 }}>
투명하고 체계적인 5단계로 진행됩니다
</p>
</div>
@@ -281,15 +280,15 @@ export default function WebsiteServicePage() {
}}>
<div style={{ fontSize: 30, marginBottom: 10 }}>{p.icon}</div>
<div style={{
fontSize: 10, color: '#6366f1', fontFamily: 'Syne, sans-serif',
fontSize: 10, color: '#6366f1', fontFamily: "'CookieRun', sans-serif",
fontWeight: 700, letterSpacing: '0.1em', marginBottom: 6,
}}>
STEP {p.step}
</div>
<div style={{ fontSize: 14, fontWeight: 700, color: 'white', fontFamily: "'Noto Sans KR', sans-serif", marginBottom: 5 }}>
<div style={{ fontSize: 14, fontWeight: 700, color: 'white', fontFamily: "'CookieRun', sans-serif", marginBottom: 5 }}>
{p.title}
</div>
<div style={{ fontSize: 11, color: '#475569', fontFamily: "'Noto Sans KR', sans-serif", lineHeight: 1.5 }}>
<div style={{ fontSize: 11, color: '#475569', fontFamily: "'CookieRun', sans-serif", lineHeight: 1.5 }}>
{p.desc}
</div>
</div>
@@ -305,10 +304,10 @@ export default function WebsiteServicePage() {
{/* Pricing */}
<section style={{ padding: '56px 24px', maxWidth: 1000, margin: '0 auto' }}>
<div style={{ textAlign: 'center', marginBottom: 40 }}>
<h2 style={{ fontFamily: 'Syne, sans-serif', fontSize: 28, fontWeight: 800, color: 'white', marginBottom: 10 }}>
<h2 style={{ fontFamily: "'CookieRun', sans-serif", fontSize: 28, fontWeight: 800, color: 'white', marginBottom: 10 }}>
가격 플랜
</h2>
<p style={{ color: '#64748b', fontFamily: "'Noto Sans KR', sans-serif", fontSize: 15 }}>
<p style={{ color: '#64748b', fontFamily: "'CookieRun', sans-serif", fontSize: 15 }}>
프로젝트 규모에 맞는 플랜을 선택하세요
</p>
</div>
@@ -326,28 +325,28 @@ export default function WebsiteServicePage() {
position: 'absolute', top: 18, right: 18,
background: plan.color, color: '#1e1b4b',
fontSize: 10, fontWeight: 800, padding: '3px 10px', borderRadius: 100,
fontFamily: 'Syne, sans-serif',
fontFamily: "'CookieRun', sans-serif",
}}>BEST</div>
)}
<div style={{ fontSize: 13, color: plan.color, fontFamily: 'Syne, sans-serif', fontWeight: 700, marginBottom: 10 }}>
<div style={{ fontSize: 13, color: plan.color, fontFamily: "'CookieRun', sans-serif", fontWeight: 700, marginBottom: 10 }}>
{plan.name}
</div>
<div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 4 }}>
<span style={{ fontSize: 42, fontWeight: 800, color: 'white', fontFamily: 'Syne, sans-serif' }}>
<span style={{ fontSize: 42, fontWeight: 800, color: 'white', fontFamily: "'CookieRun', sans-serif" }}>
{plan.price}
</span>
<span style={{ fontSize: 16, color: '#94a3b8', fontFamily: "'Noto Sans KR', sans-serif" }}>
<span style={{ fontSize: 16, color: '#94a3b8', fontFamily: "'CookieRun', sans-serif" }}>
{plan.unit}
</span>
</div>
<div style={{ fontSize: 12, color: '#475569', fontFamily: "'Noto Sans KR', sans-serif", marginBottom: 22 }}>
<div style={{ fontSize: 12, color: '#475569', fontFamily: "'CookieRun', sans-serif", marginBottom: 22 }}>
{plan.note}
</div>
<div style={{ borderTop: '1px solid rgba(255,255,255,0.07)', paddingTop: 20, marginBottom: 24 }}>
{plan.features.map((f) => (
<div key={f} style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 11 }}>
<span style={{ color: plan.color, fontSize: 14, flexShrink: 0, fontWeight: 700 }}>✓</span>
<span style={{ fontSize: 13, color: '#94a3b8', fontFamily: "'Noto Sans KR', sans-serif" }}>{f}</span>
<span style={{ fontSize: 13, color: '#94a3b8', fontFamily: "'CookieRun', sans-serif" }}>{f}</span>
</div>
))}
</div>
@@ -356,7 +355,7 @@ export default function WebsiteServicePage() {
background: plan.featured ? plan.color : 'rgba(255,255,255,0.05)',
borderRadius: 10, color: plan.featured ? '#1e1b4b' : '#cbd5e1',
fontWeight: 700, fontSize: 14, textDecoration: 'none',
fontFamily: "'Noto Sans KR', sans-serif",
fontFamily: "'CookieRun', sans-serif",
border: plan.featured ? 'none' : '1px solid rgba(255,255,255,0.08)',
}}>
상담 신청
@@ -369,7 +368,7 @@ export default function WebsiteServicePage() {
{/* FAQ */}
<section style={{ padding: '0 24px 56px', maxWidth: 720, margin: '0 auto' }}>
<div style={{ textAlign: 'center', marginBottom: 32 }}>
<h2 style={{ fontFamily: 'Syne, sans-serif', fontSize: 28, fontWeight: 800, color: 'white', marginBottom: 10 }}>
<h2 style={{ fontFamily: "'CookieRun', sans-serif", fontSize: 28, fontWeight: 800, color: 'white', marginBottom: 10 }}>
자주 묻는 질문
</h2>
</div>
@@ -385,7 +384,7 @@ export default function WebsiteServicePage() {
background: 'none', border: 'none', cursor: 'pointer',
display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12,
}}>
<span style={{ fontSize: 14, fontWeight: 600, color: 'white', fontFamily: "'Noto Sans KR', sans-serif" }}>
<span style={{ fontSize: 14, fontWeight: 600, color: 'white', fontFamily: "'CookieRun', sans-serif" }}>
{faq.q}
</span>
<span style={{
@@ -398,7 +397,7 @@ export default function WebsiteServicePage() {
{openFaq === i && (
<div style={{
padding: '0 22px 18px', fontSize: 14, color: '#64748b',
lineHeight: 1.75, fontFamily: "'Noto Sans KR', sans-serif",
lineHeight: 1.75, fontFamily: "'CookieRun', sans-serif",
}}>
{faq.a}
</div>
@@ -417,12 +416,12 @@ export default function WebsiteServicePage() {
border: '1px solid rgba(129,140,248,0.3)',
boxShadow: '0 24px 80px rgba(99,102,241,0.2)',
}}>
<h2 style={{ fontFamily: 'Syne, sans-serif', fontSize: 28, fontWeight: 800, color: 'white', marginBottom: 14 }}>
<h2 style={{ fontFamily: "'CookieRun', sans-serif", fontSize: 28, fontWeight: 800, color: 'white', marginBottom: 14 }}>
지금 바로 시작하세요
</h2>
<p style={{
color: '#a5b4fc', fontSize: 15, lineHeight: 1.7, marginBottom: 30,
fontFamily: "'Noto Sans KR', sans-serif",
fontFamily: "'CookieRun', sans-serif",
}}>
무료 상담은 24시간 이내 답변드립니다.<br />
어떤 규모의 프로젝트든 환영합니다.
@@ -431,7 +430,7 @@ export default function WebsiteServicePage() {
display: 'inline-block', padding: '15px 40px',
background: 'linear-gradient(135deg, #818cf8, #6366f1)',
borderRadius: 12, color: 'white', fontWeight: 700, fontSize: 16,
textDecoration: 'none', fontFamily: "'Noto Sans KR', sans-serif",
textDecoration: 'none', fontFamily: "'CookieRun', sans-serif",
boxShadow: '0 8px 32px rgba(99,102,241,0.5)',
}}>
무료 상담 신청하기 →