From b705f35c2dcfc5257b869af7325e833b1f7ad62b Mon Sep 17 00:00:00 2001 From: gahusb Date: Sat, 13 Jun 2026 01:10:54 +0900 Subject: [PATCH] =?UTF-8?q?feat(outsourcing):=20Deep=20Field=20=EC=9E=AC?= =?UTF-8?q?=EC=8A=A4=ED=82=A8=20+=20=EC=87=BC=EC=BC=80=EC=9D=B4=EC=8A=A4?= =?UTF-8?q?=20=ED=92=80=20=EA=B7=B8=EB=A6=AC=EB=93=9C=20+=20=EC=9A=B4?= =?UTF-8?q?=EC=98=81=20=EC=8B=A4=EC=A6=9D=20=EC=B9=B4=ED=94=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 라이트 → 다크 캔버스 전환 (메인과 동일 비주얼 언어: 다크 루트 div + -mt-16 hero + border-t 섹션 리듬 + 모노 라벨 헤더) - Hero 축약 ~60vh + HeroField 배경 - #showcase 섹션 ShowcaseGrid variant="full"(8슬롯), #portfolio 하위호환 앵커 유지 - 구 SAMPLES(/work/website/samples) 노출 링크 제거 — 쇼케이스가 대체 - 운영 실사례/제공분야/프로세스/FAQ 다크 카드 + ScrollReveal 스태거 - OutsourcingRequestForm 다크 스킨(스타일 값만, 로직 diff 0) + placeholder dark-soft - "7년차"·"대기업" 잔존 카피 전부 운영 실증 톤으로 교체 (metadata 포함) Co-Authored-By: Claude Opus 4.8 --- app/components/OutsourcingRequestForm.tsx | 72 +-- app/globals.css | 7 + app/outsourcing/page.tsx | 663 ++++++++++++---------- 3 files changed, 391 insertions(+), 351 deletions(-) diff --git a/app/components/OutsourcingRequestForm.tsx b/app/components/OutsourcingRequestForm.tsx index e109621..7af2fb6 100644 --- a/app/components/OutsourcingRequestForm.tsx +++ b/app/components/OutsourcingRequestForm.tsx @@ -16,9 +16,9 @@ const KOR_TIGHT = { letterSpacing: '-0.02em' } as const; const KOR_BODY = { letterSpacing: '-0.01em' } as const; const INPUT_STYLE = { - background: 'var(--jsm-surface)', - border: '1px solid var(--jsm-line)', - color: 'var(--jsm-ink)', + background: 'var(--jsm-dark-surface)', + border: '1px solid var(--jsm-dark-line)', + color: 'var(--jsm-dark-ink)', } as const; const PROJECT_TYPES = [ @@ -195,13 +195,13 @@ export default function OutsourcingRequestForm() { ref={setHeadingRef} tabIndex={-1} className="text-xl font-bold break-keep outline-none" - style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }} + style={{ color: 'var(--jsm-dark-ink)', ...KOR_TIGHT }} > 의뢰가 접수되었습니다

영업일 2일 내 회신드립니다.

@@ -218,7 +218,7 @@ export default function OutsourcingRequestForm() {

추적 링크를 이메일로도 보내드렸습니다.

@@ -232,7 +232,7 @@ export default function OutsourcingRequestForm() { const canAdvance = stepValid(step); return ( -
+
{/* 진행 표시기 */}
    {STEPS.map((s, i) => { @@ -244,7 +244,7 @@ export default function OutsourcingRequestForm() { className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold shrink-0 transition-colors" style={ state === 'upcoming' - ? { background: 'var(--jsm-surface-alt)', color: 'var(--jsm-ink-faint)' } + ? { background: 'var(--jsm-dark-surface)', color: 'var(--jsm-dark-soft)', boxShadow: 'inset 0 0 0 1px var(--jsm-dark-line)' } : { background: 'var(--jsm-accent)', color: '#ffffff' } } aria-current={state === 'current' ? 'step' : undefined} @@ -255,7 +255,7 @@ export default function OutsourcingRequestForm() { className="text-xs font-semibold truncate hidden sm:inline" style={{ color: - state === 'upcoming' ? 'var(--jsm-ink-faint)' : 'var(--jsm-ink)', + state === 'upcoming' ? 'var(--jsm-dark-soft)' : 'var(--jsm-dark-ink)', ...KOR_BODY, }} > @@ -264,7 +264,7 @@ export default function OutsourcingRequestForm() { {i < STEPS.length - 1 && ( )} @@ -281,13 +281,13 @@ export default function OutsourcingRequestForm() { ref={setHeadingRef} tabIndex={-1} className="text-lg font-bold break-keep outline-none mb-1" - style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }} + style={{ color: 'var(--jsm-dark-ink)', ...KOR_TIGHT }} > 어떤 프로젝트인가요?

    가장 가까운 유형을 하나 선택해주세요.

    @@ -303,12 +303,12 @@ export default function OutsourcingRequestForm() { className="px-4 py-3.5 rounded-lg text-sm font-semibold text-center break-keep transition-colors outline-none focus-visible:ring-2 focus-visible:ring-[var(--jsm-accent)]" style={{ border: selected - ? '1px solid var(--jsm-accent)' - : '1px solid var(--jsm-line)', + ? '1px solid var(--jsm-accent-bright)' + : '1px solid var(--jsm-dark-line)', background: selected - ? 'var(--jsm-accent-soft)' - : 'var(--jsm-surface)', - color: selected ? 'var(--jsm-accent)' : 'var(--jsm-ink)', + ? 'rgba(96,165,250,0.12)' + : 'var(--jsm-dark-surface)', + color: selected ? 'var(--jsm-accent-bright)' : 'var(--jsm-dark-ink)', ...KOR_BODY, }} > @@ -327,13 +327,13 @@ export default function OutsourcingRequestForm() { ref={setHeadingRef} tabIndex={-1} className="text-lg font-bold break-keep outline-none mb-1" - style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }} + style={{ color: 'var(--jsm-dark-ink)', ...KOR_TIGHT }} > 예산과 일정을 알려주세요

    대략적인 범위면 충분합니다. 정해지지 않았다면 미정을 선택하세요.

    @@ -341,7 +341,7 @@ export default function OutsourcingRequestForm() {
    예산 @@ -360,7 +360,7 @@ export default function OutsourcingRequestForm() {
    희망 일정 @@ -385,13 +385,13 @@ export default function OutsourcingRequestForm() { ref={setHeadingRef} tabIndex={-1} className="text-lg font-bold break-keep outline-none mb-1" - style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }} + style={{ color: 'var(--jsm-dark-ink)', ...KOR_TIGHT }} > 자세히 들려주세요

    구체적일수록 정확한 견적이 가능합니다. 최소 10자 이상 작성해주세요.

    @@ -413,7 +413,7 @@ export default function OutsourcingRequestForm() { />

    {trimmedMessage.length}/10자 이상

    @@ -427,13 +427,13 @@ export default function OutsourcingRequestForm() { ref={setHeadingRef} tabIndex={-1} className="text-lg font-bold break-keep outline-none mb-1" - style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }} + style={{ color: 'var(--jsm-dark-ink)', ...KOR_TIGHT }} > 어디로 회신드릴까요?

    영업일 2일 내에 회신드립니다.

    @@ -443,7 +443,7 @@ export default function OutsourcingRequestForm() { @@ -465,7 +465,7 @@ export default function OutsourcingRequestForm() { @@ -487,7 +487,7 @@ export default function OutsourcingRequestForm() { @@ -530,10 +530,10 @@ export default function OutsourcingRequestForm() { type="button" onClick={goPrev} disabled={submitting} - className="px-5 py-3 rounded-lg text-sm font-semibold border transition-colors hover:bg-[var(--jsm-surface-alt)] disabled:opacity-50 disabled:cursor-not-allowed" + className="px-5 py-3 rounded-lg text-sm font-semibold border transition-colors hover:bg-[var(--jsm-dark-surface)] disabled:opacity-50 disabled:cursor-not-allowed" style={{ ...INPUT_STYLE, - borderColor: 'var(--jsm-line)', + borderColor: 'var(--jsm-dark-line)', ...KOR_BODY, }} > @@ -548,7 +548,7 @@ export default function OutsourcingRequestForm() { className="flex-1 py-3 rounded-lg text-sm font-semibold text-white transition-colors" style={{ background: !canAdvance || submitting - ? 'var(--jsm-ink-faint)' + ? 'var(--jsm-dark-line)' : 'var(--jsm-accent)', cursor: !canAdvance || submitting ? 'not-allowed' : 'pointer', ...KOR_BODY, @@ -563,7 +563,7 @@ export default function OutsourcingRequestForm() { disabled={!canAdvance} className="flex-1 inline-flex items-center justify-center gap-2 py-3 rounded-lg text-sm font-semibold text-white transition-colors" style={{ - background: canAdvance ? 'var(--jsm-accent)' : 'var(--jsm-ink-faint)', + background: canAdvance ? 'var(--jsm-accent)' : 'var(--jsm-dark-line)', cursor: canAdvance ? 'pointer' : 'not-allowed', ...KOR_BODY, }} @@ -595,9 +595,9 @@ function Chip({ aria-pressed={selected} className="px-4 py-2.5 rounded-lg text-sm font-semibold break-keep transition-colors outline-none focus-visible:ring-2 focus-visible:ring-[var(--jsm-accent)]" style={{ - border: selected ? '1px solid var(--jsm-accent)' : '1px solid var(--jsm-line)', - background: selected ? 'var(--jsm-accent-soft)' : 'var(--jsm-surface)', - color: selected ? 'var(--jsm-accent)' : 'var(--jsm-ink)', + border: selected ? '1px solid var(--jsm-accent-bright)' : '1px solid var(--jsm-dark-line)', + background: selected ? 'rgba(96,165,250,0.12)' : 'var(--jsm-dark-surface)', + color: selected ? 'var(--jsm-accent-bright)' : 'var(--jsm-dark-ink)', ...KOR_BODY, }} > diff --git a/app/globals.css b/app/globals.css index ee701df..84f62db 100644 --- a/app/globals.css +++ b/app/globals.css @@ -198,6 +198,13 @@ body { pointer-events: none; } +/* 외주 의뢰 폼 — 다크 스킨 placeholder (Deep Field 재스킨) */ +.jsm-dark-form input::placeholder, +.jsm-dark-form textarea::placeholder { + color: var(--jsm-dark-soft); + opacity: 1; +} + /* Service card hover */ .service-card { transition: transform 0.2s ease, box-shadow 0.2s ease; diff --git a/app/outsourcing/page.tsx b/app/outsourcing/page.tsx index 7cf4ba7..fab99fb 100644 --- a/app/outsourcing/page.tsx +++ b/app/outsourcing/page.tsx @@ -2,14 +2,20 @@ import Link from 'next/link'; import type { Metadata } from 'next'; import OutsourcingRequestForm from '@/app/components/OutsourcingRequestForm'; -// 외주 개발 의뢰 페이지 (서버 컴포넌트) -// PublicShell이 TopNav(h-16)·푸터·main 배경을 제공하므로 여기서는 콘텐츠 섹션만 렌더한다. -// 메인(/)의 토큰·타이포 패턴(KOR_TIGHT/KOR_BODY)·섹션 리듬과 일관되게 구성한다. +import HeroField from '@/app/components/deepfield/HeroField'; +import ShowcaseGrid from '@/app/components/deepfield/ShowcaseGrid'; +import ScrollReveal from '@/app/components/deepfield/ScrollReveal'; +import { SHOWCASE_SLOTS } from '@/lib/showcase'; + +// 외주 개발 의뢰 페이지 (서버 컴포넌트) — Deep Field 다크 캔버스. +// PublicShell이 TopNav(h-16, /outsourcing 다크 인지)·푸터·main 배경(라이트)을 제공한다. +// 이 페이지는 자기 풀-블리드 다크 배경을 소유해 main의 라이트 배경을 덮고, +// 메인(/)과 동일한 비주얼 언어(다크 루트 div + -mt-16 hero + 섹션 border-t 리듬 + 모노 라벨 헤더)를 따른다. export const metadata: Metadata = { title: '외주 개발', description: - '7년차 대기업 백엔드 개발자가 직접 진행하는 맞춤 소프트웨어 외주 개발. 웹 서비스, 업무 자동화, API·백엔드, 봇, AI 연동까지 기획부터 납품·하자보수까지 단독으로 책임집니다.', + '24시간 돌아가는 실서비스를 직접 설계·운영하는 손으로, 맞춤 소프트웨어를 만들어 드립니다. 웹 서비스·업무 자동화·API·백엔드·봇·AI 연동까지 기획부터 납품·하자보수까지 단독으로 책임집니다.', }; const KOR_TIGHT = { letterSpacing: '-0.02em' } as const; @@ -51,7 +57,7 @@ const PROCESS = [ { n: '06', t: '무상 하자보수 30일', d: '납품 후 30일간 결함·수정을 무상으로 대응해 안정화까지 책임집니다.' }, ]; -// 기존 work/freelance(lib/freelance-portfolio) 실사례를 새 토큰 기준으로 재구성. +// 기존 work/freelance(lib/freelance-portfolio) 실사례를 다크 토큰 기준으로 재구성. const CASES = [ { t: '주식 자동매매 시스템', @@ -97,14 +103,6 @@ const CASES = [ }, ]; -// /work/website/samples/* 중 대표 샘플 — 이 라우트는 숨김이 아니라 포트폴리오용으로 잔존. -const SAMPLES = [ - { slug: 'corporate', t: '기업 홈페이지', sub: '테크솔루션㈜', tag: 'B2B · 신뢰' }, - { slug: 'shopping', t: '개인 쇼핑몰', sub: 'MELLOW STUDIO', tag: '쇼핑몰 · 브랜드' }, - { slug: 'dashboard', t: '관리자 대시보드', sub: 'DataFlow SaaS', tag: 'SaaS · 자동화' }, - { slug: 'portfolio', t: '개인 포트폴리오', sub: 'Kim Jisu', tag: '크리에이터 · 수주' }, -]; - const FAQ = [ { q: '견적은 어떻게 산정되나요?', @@ -145,395 +143,430 @@ function ArrowRight() { export default function OutsourcingPage() { return ( - <> - {/* ─── 1. Hero ─── */} -
    -
    + // 풀-블리드 다크 캔버스 — main의 라이트 배경을 덮는다. +
    + {/* ─────────────────── 1. HERO (축약 ~60vh) ─────────────────── */} + {/* -mt-16 pt-16: 고정 헤더 아래로 끌어올려 상단 라이트 띠 제거 */} +
    + + {/* 콘텐츠 가독성용 스크림 (radial 광원 위 텍스트 대비) */} +
    +
    - 외주 개발 + + outsourcing

    - 맞춤 소프트웨어{' '} - 외주 개발 + 맞춤 소프트웨어 +
    + 외주 개발 + .

    - 기획 정리가 안 됐어도 괜찮습니다. 상담에서 함께 정리합니다. 7년차 대기업 백엔드 - 개발자가 기획부터 배포·하자보수까지 단독으로 책임집니다. + 기획 정리가 안 됐어도 괜찮습니다. 상담에서 함께 정리합니다.

    -
    +
    의뢰 내용 보내기 - 포트폴리오 보기 + 작업 화면 보기
    - {/* ─── 2. 제공 분야 ─── */} -
    -
    -
    + {/* ─────────────────── 2. SHOWCASE (풀 그리드) ─────────────────── */} +
    + {/* 하위 호환: 기존 /outsourcing#portfolio 링크(메인 footer 등)용 앵커 유지 */} +
    +
    +

    - Scope + showcase

    - 이런 것들을 만들어 드립니다 + 우리가 만드는 화면들

    -
    -
    - {FIELDS.map((f) => ( -
    -

    - {f.t} -

    -

    - {f.d} -

    -
    - ))} + + +
    +
    - {/* ─── 3. 진행 프로세스 ─── */} -
    -
    -
    + {/* ─────────────────── 3. 운영 실사례 ─────────────────── */} +
    +
    +

    - Process + in production

    - 상담부터 하자보수까지, 흐름이 분명합니다 -

    -
    -
    - {PROCESS.map((s) => ( -
    - - {s.n} - -

    - {s.t} -

    -

    - {s.d} -

    -
    - ))} -
    -
    -
    - - {/* ─── 4. 포트폴리오 ─── */} -
    -
    -
    -

    - Portfolio -

    -

    직접 개발하고, 실제로 굴러가는 결과물

    운영 중인 서비스와 납품 완료 프로젝트입니다. 의뢰하신 프로젝트도 같은 깊이로 만듭니다.

    -
    + - {/* 실사례 카드 */} -
    - {CASES.map((c) => ( -
    - - {c.live && ( - - )} - {c.cat} - -

    - {c.t} -

    -

    - {c.d} -

    -
    - {c.tags.map((tag) => ( - - {tag} - - ))} -
    -
    - ))} -
    - - {/* 웹사이트 샘플 링크 */} -
    -

    - 웹사이트 제작 샘플 -

    -

    - 직접 둘러볼 수 있는 데모 사이트입니다. 카드를 눌러 화면을 확인하세요. -

    -
    - {SAMPLES.map((s) => ( - + {CASES.map((c, i) => ( + +
    - {s.tag} + {c.live && ( + + )} + {c.cat} -

    - {s.t} -

    + {c.t} +

    - {s.sub} + {c.d}

    - - 데모 보기 - - - - ))} -
    +
    + {c.tags.map((tag) => ( + + {tag} + + ))} +
    +
    + + ))}
    - {/* ─── 5. FAQ ─── */} -
    -
    -
    + {/* ─────────────────── 4a. 제공 분야 ─────────────────── */} +
    +
    +

    - FAQ + scope

    + 이런 것들을 만들어 드립니다 +

    +     + +
    + {FIELDS.map((f, i) => ( + +
    +

    + {f.t} +

    +

    + {f.d} +

    +
    +     + ))} +
    +
    +
    + + {/* ─────────────────── 4b. 진행 프로세스 ─────────────────── */} +
    +
    + +

    + process +

    +

    + 상담부터 하자보수까지, 흐름이 분명합니다 +

    +     + +
    + {PROCESS.map((s, i) => ( + +
    + + {s.n} + +

    + {s.t} +

    +

    + {s.d} +

    +
    +     + ))} +
    +
    +
    + + {/* ─────────────────── 5. FAQ ─────────────────── */} +
    +
    + +

    + faq +

    +

    자주 묻는 질문

    -
    -
    - {FAQ.map((item) => ( -
    - + +
    + {FAQ.map((item, i) => ( + +
    - {item.q} - - - -
    -

    - {item.a} -

    -
    + {item.q} + + + + +

    + {item.a} +

    + + ))}
    - {/* ─── 6. 의뢰 폼 ─── */} -
    -
    -
    + {/* ─────────────────── 6. 의뢰 폼 ─────────────────── */} +
    +
    +
    {/* 안내 */}
    -

    - Contact -

    -

    - 프로젝트 문의 -

    -

    - 영업일 2일 내에 회신드립니다. 아이디어 단계여도 괜찮습니다 — 상담에서 방향을 - 함께 잡아드립니다. -

    - + 프로젝트 문의 + +

    + 영업일 2일 내에 회신드립니다. 아이디어 단계여도 괜찮습니다 — 상담에서 방향을 + 함께 잡아드립니다. +

    + +
    {/* 폼 */}
    -
    - -
    + +
    + +
    +
    - +
    ); }