'use client'; import { useState, useEffect, useRef } from 'react'; import ContactForm from '../components/ContactForm'; /* ─── Data ─── */ const portfolio = [ { title: '기업 브랜드 홈페이지', category: '웹사이트 제작 · Next.js', desc: '제조업체의 영업용 기업 소개 사이트. 서비스·연혁·팀 소개·문의 폼 포함. 모바일 반응형 및 SEO 최적화까지 포함하여 납품.', result: '납품 후 B2B 영업 미팅 시 "홈페이지 보고 연락했다" 비율 증가', tags: ['Next.js', 'Tailwind CSS', 'Vercel', 'SEO'], status: '납품 완료', statusType: 'done', priceRange: '50~200만원', accentColor: 'text-indigo-400', accentBg: 'bg-[#0d0a2e]', borderAccent: 'border-indigo-400/20', }, { title: 'Gmail 자동화 RPA', category: 'RPA · 업무 자동화', desc: '거래처 이메일 수신 시 자동 분류, 답장 초안 작성, 담당자 알림 전송하는 Gmail 자동화 시스템.', result: '이메일 처리 시간 일 2시간 → 10분 (의뢰인 직접 확인)', tags: ['Python', 'Gmail API', 'Google Apps Script'], status: '납품 완료', statusType: 'done', priceRange: '30~150만원', accentColor: 'text-red-400', accentBg: 'bg-[#200a0a]', borderAccent: 'border-red-400/20', }, { title: '쇼핑몰 가격 모니터링 봇', category: '웹 스크래핑 · 알림 자동화', desc: '경쟁사 쇼핑몰의 특정 상품 가격을 매일 모니터링하여 변동 시 텔레그램으로 즉시 알림.', result: '경쟁사 10곳 · 상품 50개 매일 자동 추적, 수동 확인 0분', tags: ['Python', 'Selenium', 'Telegram Bot'], status: '납품 완료', statusType: 'done', priceRange: '30~150만원', accentColor: 'text-violet-400', accentBg: 'bg-[#0d0a2e]', borderAccent: 'border-violet-400/20', }, { title: '영업 일보 자동화 시스템', category: '엑셀 자동화 · 보고서 생성', desc: '영업 데이터 엑셀 파일을 자동으로 집계하여 일별/주별/월별 영업 일보 PDF를 생성하고 이메일 발송.', result: '보고서 작성 3시간 → 5분, 매일 09:00 자동 발송', tags: ['Python', 'OpenPyXL', 'ReportLab'], status: '납품 완료', statusType: 'done', priceRange: '30~150만원', accentColor: 'text-cyan-400', accentBg: 'bg-[#012030]', borderAccent: 'border-cyan-400/20', }, { title: '부동산 공시지가 수집 시스템', category: '공공 데이터 · API 연동', desc: '국토교통부 공공 API를 통해 특정 지역 공시지가를 주기적으로 수집·저장하고 변동 알림 제공.', result: '전국 3개 지역 공시지가 주 1회 자동 수집·변동 알림', tags: ['Python', '공공데이터 API', 'PostgreSQL', 'Telegram'], status: '납품 완료', statusType: 'done', priceRange: '30~150만원', accentColor: 'text-blue-400', accentBg: 'bg-[#04102b]', borderAccent: 'border-blue-400/20', }, ]; const testimonials = [ { name: '이서준', role: '온라인 쇼핑몰 운영자', project: '경쟁사 가격 모니터링 봇', content: '경쟁사 10곳 가격을 매일 수동으로 확인했는데 이제 텔레그램으로 자동 알림 받습니다. 납기도 정확히 지켜주셨고, 완료 후에도 작은 수정 요청에 빠르게 응답해주셔서 믿음이 갔습니다.', result: '가격 모니터링 시간 → 0분/일', accentColor: 'bg-emerald-500', borderColor: 'border-emerald-200', tagColor: 'text-emerald-700 bg-emerald-50 border-emerald-200', }, { name: '박하은', role: '스타트업 운영팀장', project: 'Excel 보고서 자동화 시스템', content: '매주 월요일 아침 2시간씩 쓰던 Excel 집계 작업을 자동화했습니다. 처음엔 반신반의했는데 계약서부터 작성해주셔서 진짜 전문가구나 싶었고, 결과물도 기대 이상이었습니다.', result: '주간 보고 작업 2시간 → 5분', accentColor: 'bg-blue-500', borderColor: 'border-blue-200', tagColor: 'text-blue-700 bg-blue-50 border-blue-200', }, { name: '김도윤', role: '프리랜서 디자이너', project: '포트폴리오 웹사이트 제작', content: '이전에 다른 개발자한테 맡겼다가 중간에 연락이 끊겼던 경험이 있어서 많이 걱정했는데, 주 1회 진행 보고를 꼬박꼬박 해주시고 최종 소스코드까지 전달해주셔서 정말 만족했습니다.', result: '2주 납품 약속 정확히 이행', accentColor: 'bg-violet-500', borderColor: 'border-violet-200', tagColor: 'text-violet-700 bg-violet-50 border-violet-200', }, ]; const process = [ { num: '01', title: '무료 상담', desc: '전화 또는 이메일로 요구사항 파악 (30분 이내)', sub: '비용 없음 · 부담 없음', icon: ( ), }, { num: '02', title: '견적 제안', desc: '개발 범위, 일정, 비용 상세 견적서 제공', sub: '1~3일 이내 발송', icon: ( ), }, { num: '03', title: '계약 체결', desc: '계약서 작성 및 계약금(30%) 입금 후 개발 시작', sub: '계약서 포함 · 안전 거래', icon: ( ), }, { num: '04', title: '개발 진행', desc: '주 1회 이상 진행 상황 공유 및 중간 검수', sub: '투명한 진행 보고', icon: ( ), highlight: true, }, { num: '05', title: '최종 납품', desc: '완성본 인도 + 사용 교육 + 소스코드 전달', sub: '소스코드 전체 제공', icon: ( ), }, { num: '06', title: 'AS 지원', desc: '1개월 무상 기술 지원 및 평생 유지보수 가능', sub: '1개월 무상 + 평생 AS', icon: ( ), }, ]; const guarantees = [ { label: '계약서 필수', detail: '구두 약속 없음 — 착수 전 계약서 발송', icon: ( ), accentText: 'text-sky-400', accentBorder: 'border-sky-400/20', }, { label: '납기 지연 패널티', detail: '하루 지연 = 10만원 감면 — 그래서 안 늦습니다', icon: ( ), accentText: 'text-amber-400', accentBorder: 'border-amber-400/20', }, { label: '소스코드 100% 인도', detail: '납품 후 전체 소스코드 + 배포 가이드 제공', icon: ( ), accentText: 'text-emerald-400', accentBorder: 'border-emerald-400/20', }, { label: '1개월 무상 AS', detail: '납품 후 한 달 — 버그·수정 무상 대응', icon: ( ), accentText: 'text-violet-400', accentBorder: 'border-violet-400/20', }, { label: '실시간 진행 현황', detail: '마이페이지에서 7단계 진행 상황 직접 확인', icon: ( ), accentText: 'text-cyan-400', accentBorder: 'border-cyan-400/20', }, ]; /* ─── Scroll Reveal ─── */ function useScrollReveal() { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add('is-visible'); observer.unobserve(entry.target); } }); }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' } ); el.querySelectorAll('.reveal').forEach((child) => observer.observe(child)); return () => observer.disconnect(); }, []); return ref; } /* ─── Main Page ─── */ export default function FreelancePage() { const [_contactPreset] = useState(''); const containerRef = useScrollReveal(); return (
{/* ─── Hero ─── */}
현재 프로젝트 접수 가능

연락 두절? 그런 거 없습니다.
납기 지키고, 끝까지 책임집니다

개발자에게 맡겼다가 연락 두절된 경험 있으신가요?
계약서 작성, 중간 보고, 소스코드 인도까지 — 단계마다 증거를 남깁니다.

{/* Developer tag */}
박
쟁토리 (박재오)
실무 엔지니어 · Python / Java / Next.js
{['Python', 'Java', 'Next.js', 'Docker'].map(t => ( {t} ))}
{/* 보증 카드 4개 */}
{guarantees.map((g) => (
{g.icon}
{g.label}
{g.detail}
))}
{/* ─── 포트폴리오 ─── */}

PORTFOLIO

직접 개발한 프로젝트

실제 운영 중인 서비스와 납품 완료 프로젝트입니다

{portfolio.map((item) => (
{/* card header */}
{item.category}

{item.title}

{item.statusType === 'live' ? (
운영 중
) : (
납품 완료
)}
{/* card body */}

{item.desc}

{item.result && (
{item.result}
)}
{item.tags.map((tag) => ( {tag} ))}
))}
{/* 추가 문구 */}

위 프로젝트 외에도 다양한 프로젝트 경험이 있습니다 ·{' '} 포트폴리오 전체 요청

{/* ─── 고객 후기 ─── */}

REVIEWS

실제 의뢰인 후기

숫자보다 실제 말이 더 정직합니다

{testimonials.map((t) => (
{/* 별점 */}
{[1,2,3,4,5].map((n) => ( ))}
{/* 후기 내용 */}

“{t.content}”

{/* 결과 뱃지 */}
✓ {t.result}
{/* 의뢰인 */}
{t.name[0]}
{t.name}
{t.role} · {t.project}
))}

* 의뢰인 동의 하에 게시된 후기입니다. 전체 대화 내역 공개 요청 시 제공 가능합니다.

무료 상담 시작하기

24시간 내 답변 · 상담은 무료입니다

{/* ─── 진행 프로세스 ─── */}

PROCESS

진행 프로세스

투명하고 체계적인 6단계로 진행됩니다

{/* Vertical timeline */}
{/* connecting line */}
{process.map((p) => (
{/* step circle */}
{p.icon}
{/* content */}
STEP {p.num} {p.highlight && ( 현재 진행 )}

{p.title}

{p.desc}

{p.sub}
))}
{/* ─── 기술 스택 & 신뢰 ─── */}
{/* Tech Stack */}

개발 가능 기술 스택

{[ { label: 'Backend', techs: ['Python', 'Java', 'Spring Boot', 'FastAPI', 'Node.js'] }, { label: 'Frontend', techs: ['Next.js', 'React', 'TypeScript', 'Tailwind CSS'] }, { label: 'Database', techs: ['PostgreSQL', 'MySQL', 'Redis', 'SQLite'] }, { label: 'Infra / API', techs: ['Docker', 'AWS', 'Telegram API', '공공 API'] }, ].map((group) => (
{group.label}
{group.techs.map((t) => ( {t} ))}
))}
{/* 신뢰 포인트 */}

신뢰할 수 있는 이유

    {[ { title: '지금 URL로 직접 확인', desc: 'jaengseung-made.com — 로또 분석, 주식 자동매매 지금도 운영 중', icon: ( ), }, { title: '계약서 먼저, 개발 나중', desc: '구두 약속 없음 — 견적서·계약서 발송 후 착수', icon: ( ), }, { title: '납품 전 전액 환불 보장', desc: '마음에 안 드시면 이유 불문 전액 환불', icon: ( ), }, { title: '소스코드 100% 인도', desc: '완성 후 전체 소스코드 + 배포 가이드 제공', icon: ( ), }, { title: '납기 지연 시 패널티', desc: '하루 늦을 때마다 10만원 감면 — 그래서 안 늦습니다', icon: ( ), }, ].map((item) => (
  • {item.icon}
    {item.title}
    {item.desc}
    • ))}
{/* ─── 문의 폼 ─── */}

CONTACT

프로젝트 문의

개발사 연락 두절로 손해 본 경험 있으신가요? 여기선 계약서부터 시작합니다.

{/* 왼쪽: 간단 안내 */}

문의 전 체크리스트

    {[ '어떤 업무를 자동화/개발하고 싶은지', '현재 사용 중인 시스템 (엑셀, ERP 등)', '희망하는 완성 일정', '예산 범위 (대략적으로도 OK)', ].map((item, i) => (
  • {i + 1} {item}
    • ))}
24h
이내 답변 보장
영업일 기준 · 주말 포함
{/* 오른쪽: 폼 */}
); }