diff --git a/app/work/freelance/layout.tsx b/app/work/freelance/layout.tsx new file mode 100644 index 0000000..52635af --- /dev/null +++ b/app/work/freelance/layout.tsx @@ -0,0 +1,27 @@ +import type { Metadata } from 'next'; + +export const metadata: Metadata = { + title: '외주 개발 의뢰', + description: + '계약서 먼저, 납기 지키고, 소스코드 100% 인도. 47건 납품 완료. 현직 실무 엔지니어에게 외주 개발을 맡겨보세요. 납기 지연 시 하루 10만 원 패널티.', + keywords: [ + '외주 개발', + '프리랜서 개발자', + '웹 개발 외주', + '앱 개발 외주', + 'RPA 개발', + '업무 자동화 외주', + '소프트웨어 개발', + ], + openGraph: { + title: '외주 개발 의뢰 | 쟁승메이드', + description: + '47건 납품 완료. 계약서 먼저, 납기 패널티, 소스코드 100% 인도. 연락 두절 없는 개발자.', + url: 'https://jaengseung-made.com/work/freelance', + }, + robots: { index: false, follow: false }, +}; + +export default function FreelanceLayout({ children }: { children: React.ReactNode }) { + return children; +} diff --git a/app/work/freelance/page.tsx b/app/work/freelance/page.tsx new file mode 100644 index 0000000..58fd85c --- /dev/null +++ b/app/work/freelance/page.tsx @@ -0,0 +1,644 @@ +'use client'; + +import { useState, useEffect, useRef } from 'react'; +import ContactForm from '@/app/components/ContactForm'; +import { PORTFOLIO as portfolio } from '@/lib/freelance-portfolio'; + +/* ─── Data ─── */ +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
+
이내 답변 보장
+
영업일 기준 · 주말 포함
+
+
+ + {/* 오른쪽: 폼 */} +
+ +
+
+
+
+
+ ); +}