# 홈 재구조 P1 — IA 마이그레이션 + 메인 안 2 Implementation Plan > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. **Goal:** 4월 27일 brainstorm의 A-1 결정(Music + Custom Build 두 사업부)을 실제 IA로 구현 — URL 마이그레이션 + 메인 안 2(Brand Hero + 2-up Card) + 헤더 안 b(Music | Custom Build | Try now). **Architecture:** Phase A/B/C/D 분할로 빌드 무중단. Phase A는 인프라(redirects + portfolio 추출), Phase B는 신규 페이지 생성(원본 유지하며 컨텐츠 이동), Phase C는 메인/헤더/푸터 변경(원본도 새 라우트도 양쪽 존재 상태), Phase D는 원본 삭제 + 검증. 원본 페이지를 Phase D까지 살려두면 phase 중간 빌드가 깨지지 않는다. **Tech Stack:** Next.js 16 App Router + TS + Tailwind v4 + Supabase. tsconfig path alias `@/*` 활용 (절대 경로 import로 depth 차이 해소). **Spec:** `docs/superpowers/specs/2026-05-16-home-restructure-p1-design.md` **⚠️ Subagent commit 주의:** Phase 2에서 일부 subagent commit이 sandboxing으로 git에 반영 안 되는 이슈 있었음. **모든 task의 마지막 step은 `git log --oneline -3` 직접 실행 + HEAD가 본인 commit인지 검증**. 아니면 BLOCKED 보고. --- ## File Structure ### Phase A (인프라 — 2 task) | 파일 | 종류 | 책임 | |---|---|---| | `next.config.ts` | Modify | `redirects()` 함수에 10개 영구 리다이렉트 매핑 추가 | | `lib/freelance-portfolio.ts` | Create | 현 `app/freelance/page.tsx`의 portfolio array 데이터 추출 (5건 사례). `/work` 허브 + `/work/freelance` 둘 다 import | ### Phase B (신규 페이지 — 9 task) 원본 페이지는 **유지**한 채 신규 위치에 컨텐츠 이동 + `@/` 절대 경로 import로 변환. | 신규 파일 | 컨텐츠 출처 | |---|---| | `app/music/page.tsx` + `layout.tsx` | 신규 (Music 허브 — 3 카드 + 후기 압축) | | `app/music/packs/page.tsx` + `layout.tsx` | 현 `app/services/music/page.tsx` + `layout.tsx` | | `app/music/samples/page.tsx` | 현 `app/services/music/samples/page.tsx` | | `app/music/studio/page.tsx` | 현 `app/studio/page.tsx` | | `app/work/page.tsx` + `layout.tsx` | 신규 (Custom Build 허브 — 4 카드 + 5건 사례 + 견적 폼) | | `app/work/freelance/page.tsx` + `layout.tsx` | 현 `app/freelance/{page,layout}.tsx` + `#automation` 섹션 강화 | | `app/work/website/page.tsx` + `layout.tsx` | 현 `app/services/website/{page,layout}.tsx` | | `app/work/website/samples/{bakery,corporate,dashboard,game,interior,portfolio,reading,shopping}/page.tsx` | 현 `app/services/website/samples/*/page.tsx` 8개 | | `app/work/saju/page.tsx` + `layout.tsx` | 현 `app/saju/{page,layout}.tsx` | | `app/work/saju/input/page.tsx` | 현 `app/saju/input/page.tsx` | | `app/work/saju/result/page.tsx` + `SajuAISection.tsx` + `SajuFortuneSection.tsx` | 현 `app/saju/result/*` | | `app/work/saju/components/SajuForm.tsx` | 현 `app/saju/components/SajuForm.tsx` | | `app/work/blog/page.tsx` + `layout.tsx` | 현 `app/services/blog/{page,layout}.tsx` | ### Phase C (메인/헤더/푸터/SEO — 4 task) | 파일 | 종류 | 책임 | |---|---|---| | `app/page.tsx` | Modify | 안 2 적용 (Brand Hero + 2-up + Music 섹션 + Custom Build 섹션 + Final CTA) | | `app/components/TopNav.tsx` | Modify | LINKS 5개 → 2개 (Music / Custom Build) | | `app/components/PublicShell.tsx` | Modify | 푸터 URL 8개 새 URL로 | | `app/layout.tsx` | Modify | JSON-LD `OfferCatalog.itemListElement` 의 모든 `url` 새 URL로 | ### Phase D (원본 삭제 + 검증 — 2 task) 원본 25 파일 삭제: ``` app/services/music/{page,layout}.tsx app/services/music/samples/page.tsx app/studio/page.tsx app/freelance/{page,layout}.tsx app/services/website/{page,layout}.tsx app/services/website/samples/{bakery,corporate,dashboard,game,interior,portfolio,reading,shopping}/page.tsx ← 8개 app/services/blog/{page,layout}.tsx app/saju/{page,layout}.tsx app/saju/input/page.tsx app/saju/result/{page,SajuAISection,SajuFortuneSection}.tsx app/saju/components/SajuForm.tsx ``` 검증: `npm run build`, `npx eslint`, redirect 시각 회귀, JSON-LD validator. --- ## Task 순서 + 의존성 ``` Phase A A1 (next.config redirects) → A2 (lib/freelance-portfolio) Phase B (independent — A 완료 후 병렬 가능하나 subagent 충돌 회피 위해 순차) B1 (/music hub) → B2 (/music/packs) → B3 (/music/samples) → B4 (/music/studio) B5 (/work hub) → B6 (/work/freelance + #automation) → B7 (/work/website + 8 samples) B8 (/work/saju + input + result) → B9 (/work/blog) Phase C (B 완료 후) C1 (app/page.tsx 안 2) → C2 (TopNav) → C3 (PublicShell footer) → C4 (layout JSON-LD) Phase D D1 (원본 25 파일 삭제) → D2 (build + lint + 시각 회귀 + Search Console) ``` 총 17 task. 각 Phase는 자체 완료 시 빌드 통과. Phase B 모든 task 후에도 빌드 OK (원본 + 신규 양쪽 존재). Phase D 완료 후 SEO 정합성 보장. --- # Phase A — 인프라 ## Task A1: next.config.ts redirects 10개 **Files:** - Modify: `C:\Users\jaeoh\Desktop\workspace\jaengseung-made\next.config.ts` - [ ] **Step 1: 현재 next.config.ts 확인** ```bash cat next.config.ts ``` 기존 `headers()` 함수만 있음. `redirects()` 함수 신규 추가. - [ ] **Step 2: redirects() 추가** `next.config.ts` 의 `headers` 함수 다음에 `redirects` 함수 추가. 변경 후 전체: ```ts import type { NextConfig } from "next"; const nextConfig: NextConfig = { async headers() { // 기존 그대로 — 변경 X return [ { source: "/:path*", headers: [ { key: "X-Frame-Options", value: "DENY" }, { key: "X-Content-Type-Options", value: "nosniff" }, { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" }, { key: "X-XSS-Protection", value: "1; mode=block" }, { key: "Strict-Transport-Security", value: "max-age=63072000; includeSubDomains; preload", }, { key: "Permissions-Policy", value: "camera=(), microphone=(), geolocation=()", }, ], }, { source: "/api/:path*", headers: [ { key: "Cache-Control", value: "no-store, max-age=0" }, { key: "X-Frame-Options", value: "DENY" }, ], }, ]; }, async redirects() { return [ // Music 사업부 마이그 { source: '/services/music', destination: '/music/packs', permanent: true }, { source: '/services/music/samples', destination: '/music/samples', permanent: true }, { source: '/studio', destination: '/music/studio', permanent: true }, // Custom Build 사업부 마이그 { source: '/freelance', destination: '/work/freelance', permanent: true }, { source: '/services/website', destination: '/work/website', permanent: true }, { source: '/services/website/samples/:slug', destination: '/work/website/samples/:slug', permanent: true }, { source: '/services/blog', destination: '/work/blog', permanent: true }, // 사주 마이그 (단순 URL, 카탈로그 spec은 보류) { source: '/saju', destination: '/work/saju', permanent: true }, { source: '/saju/input', destination: '/work/saju/input', permanent: true }, { source: '/saju/result', destination: '/work/saju/result', permanent: true }, ]; }, }; export default nextConfig; ``` - [ ] **Step 3: 빌드 통과 확인** ```bash npm run build 2>&1 | tail -10 ``` ⚠️ 현재 시점 — `/music/packs`, `/work/freelance` 등 destination 페이지가 아직 없음. Next.js redirect는 **destination 검증 X** → 빌드 OK. 단, 실제 redirect 시 destination이 404 → Phase B에서 페이지 생성 후 해결. Expected: build success. - [ ] **Step 4: 린트** ```bash npx eslint next.config.ts ``` - [ ] **Step 5: 커밋** ```bash git add next.config.ts git commit -m "$(cat <<'EOF' feat(routing): next.config.ts redirects() 10개 추가 P1 IA 마이그레이션 — 기존 URL → 새 URL 영구 리다이렉트 (permanent: true): - /services/music → /music/packs - /services/music/samples → /music/samples - /studio → /music/studio - /freelance → /work/freelance - /services/website → /work/website - /services/website/samples/:slug → /work/website/samples/:slug - /services/blog → /work/blog - /saju → /work/saju - /saju/input → /work/saju/input - /saju/result → /work/saju/result 이 시점에 destination 페이지 아직 없음 (Phase B에서 생성). 단, redirect 자체는 빌드 OK. Co-Authored-By: Claude Opus 4.7 (1M context) EOF )" ``` - [ ] **Step 6: ⚠️ git log 검증** ```bash git log --oneline -3 ``` 기대: HEAD = 본인 commit, 직전 = `eaa0c18` (spec). --- ## Task A2: lib/freelance-portfolio.ts 추출 **Files:** - Create: `C:\Users\jaeoh\Desktop\workspace\jaengseung-made\lib\freelance-portfolio.ts` `/work` 허브와 `/work/freelance` 양쪽에서 import. 단일 소스. - [ ] **Step 1: 현재 portfolio array 확인** ```bash grep -n "const portfolio" app/freelance/page.tsx ``` `app/freelance/page.tsx` 6-73행 부근의 `const portfolio` 배열 확인. 5건 사례. - [ ] **Step 2: lib/freelance-portfolio.ts 작성** ```ts export interface PortfolioItem { title: string; category: string; desc: string; result: string; tags: string[]; status: string; statusType: string; priceRange: string; accentColor: string; accentBg: string; borderAccent: string; } export const PORTFOLIO: PortfolioItem[] = [ { 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', }, ]; ``` - [ ] **Step 3: 린트** ```bash npx eslint lib/freelance-portfolio.ts ``` - [ ] **Step 4: 커밋** ```bash git add lib/freelance-portfolio.ts git commit -m "$(cat <<'EOF' feat(packs): lib/freelance-portfolio — 외주 납품 5건 데이터 추출 /work 허브 + /work/freelance 양쪽 import. 단일 source of truth. 원본은 app/freelance/page.tsx — Phase B6에서 lib import로 교체. Co-Authored-By: Claude Opus 4.7 (1M context) EOF )" ``` - [ ] **Step 5: ⚠️ git log -3** 기대: HEAD = 본인 commit. --- # Phase B — 신규 페이지 생성 각 task의 공통 패턴: 1. 원본 파일 Read 2. 신규 경로에 Write (`@/` 절대 경로 import로 변환 + 내부 `` 새 URL로 변환) 3. 원본 파일은 그대로 유지 (Phase D에서 삭제) 4. 린트 + 빌드 통과 확인 5. 커밋 6. ⚠️ git log -3 검증 **중요 — 내부 Link 변환 규칙**: 원본 페이지 안에 `` 같은 내부 링크가 있으면, 새 위치에서는 새 URL(`/music/samples`)로 변경. redirect로 우회되긴 하지만 직접 새 URL 쓰는 게 효율적이고 명확. --- ## Task B1: /music 허브 신설 **Files:** - Create: `C:\Users\jaeoh\Desktop\workspace\jaengseung-made\app\music\page.tsx` - Create: `C:\Users\jaeoh\Desktop\workspace\jaengseung-made\app\music\layout.tsx` - [ ] **Step 1: layout.tsx** ```tsx import type { Metadata } from 'next'; export const metadata: Metadata = { title: 'AI 음악 제품', description: 'Suno 프롬프트 + 뮤직비디오 워크플로우 + 유튜브 SEO 템플릿 한 팩에. 1시간 만에 음악·뮤비 완성.', }; export default function MusicLayout({ children }: { children: React.ReactNode }) { return <>{children}; } ``` - [ ] **Step 2: page.tsx — Music 허브** `app/music/page.tsx`: ```tsx import Link from 'next/link'; import type { Metadata } from 'next'; export const metadata: Metadata = { title: 'Music — AI 음악 제품', }; const CARDS = [ { href: '/music/packs', label: '팩 상세', desc: '입문 ₩39,000부터 — Suno 프롬프트북 + 뮤비 워크플로우 + SEO 템플릿', key: 'packs', }, { href: '/music/samples', label: '샘플 갤러리', desc: '실제 결과물 — 장르별 데모 + 가사 + 영상 미리보기', key: 'samples', }, { href: '/music/studio', label: 'AI 스튜디오', desc: 'Suno API 연동 — 직접 트랙 생성 (베타)', key: 'studio', }, ]; export default function MusicHub() { return (

Music

AI 음악 제품

Suno 프롬프트 + 뮤직비디오 워크플로우 + 유튜브 SEO 템플릿. 한 팩에 담긴 4단계 워크플로우로 1시간 안에 결과물 완성.

{CARDS.map((c) => (

{c.label}

{c.desc}

))}
); } ``` - [ ] **Step 3: 린트 + 빌드** ```bash npx eslint app/music/page.tsx app/music/layout.tsx npm run build 2>&1 | tail -10 ``` - [ ] **Step 4: 커밋** ```bash git add app/music/ git commit -m "$(cat <<'EOF' feat(music): /music 허브 신설 — 3 카드 (팩 상세 / 샘플 / 스튜디오) Music 사업부 진입점. /music/{packs,samples,studio} 으로 분기. Co-Authored-By: Claude Opus 4.7 (1M context) EOF )" ``` - [ ] **Step 5: ⚠️ git log -3** --- ## Task B2: /music/packs (현 /services/music 이동) **Files:** - Create: `C:\Users\jaeoh\Desktop\workspace\jaengseung-made\app\music\packs\page.tsx` - Create: `C:\Users\jaeoh\Desktop\workspace\jaengseung-made\app\music\packs\layout.tsx` - [ ] **Step 1: 원본 layout 복사** ```bash cat app/services/music/layout.tsx ``` 내용을 `app/music/packs/layout.tsx` 에 복사. 단, 만약 layout에 `'use client'` 또는 metadata 외 hooks가 있으면 그대로. import 경로는 `@/` 절대 경로로 변환. - [ ] **Step 2: 원본 page.tsx 복사 + 변환** ```bash cat app/services/music/page.tsx | wc -l ``` 원본 read → `app/music/packs/page.tsx` 에 write. 변환 규칙: - `import` 문에 `../../` 또는 `../components/` 등 상대 경로 → `@/app/components/...` 또는 `@/lib/...` 절대 경로로 교체 - 내부 `` 중 P1 redirect 대상: - `href="/services/music"` → `href="/music/packs"` - `href="/services/music/samples"` → `href="/music/samples"` - `href="/studio"` → `href="/music/studio"` - `href="/services/blog"` → `href="/work/blog"` - `href="/freelance"` → `href="/work/freelance"` - `href="/saju"` → `href="/work/saju"` - API route는 변경 X (`/api/*` 그대로) - 그 외 모든 컨텐츠 동일 - [ ] **Step 3: 린트 + 빌드** ```bash npx eslint app/music/packs/page.tsx app/music/packs/layout.tsx npm run build 2>&1 | tail -10 ``` - [ ] **Step 4: 커밋** ```bash git add app/music/packs/ git commit -m "$(cat <<'EOF' feat(music): /music/packs — 현 /services/music 컨텐츠 이동 @/ 절대 경로 import + 내부 Link 새 URL로 변환. 원본 app/services/music/* 는 Phase D에서 삭제 (현재는 양쪽 존재 → redirect 우선). Co-Authored-By: Claude Opus 4.7 (1M context) EOF )" ``` - [ ] **Step 5: ⚠️ git log -3** --- ## Task B3: /music/samples (현 /services/music/samples 이동) **Files:** - Create: `C:\Users\jaeoh\Desktop\workspace\jaengseung-made\app\music\samples\page.tsx` Task B2와 동일 패턴. - [ ] **Step 1: 원본 복사 + 변환** ```bash cat app/services/music/samples/page.tsx ``` → `app/music/samples/page.tsx` 에 복사. import 절대 경로 + 내부 Link href 새 URL로. - [ ] **Step 2: 린트 + 빌드** ```bash npx eslint app/music/samples/page.tsx npm run build 2>&1 | tail -10 ``` - [ ] **Step 3: 커밋** ```bash git add app/music/samples/ git commit -m "$(cat <<'EOF' feat(music): /music/samples — 현 /services/music/samples 컨텐츠 이동 Co-Authored-By: Claude Opus 4.7 (1M context) EOF )" ``` - [ ] **Step 4: ⚠️ git log -3** --- ## Task B4: /music/studio (현 /studio 이동) **Files:** - Create: `C:\Users\jaeoh\Desktop\workspace\jaengseung-made\app\music\studio\page.tsx` ⚠️ 이 task는 depth 변경됨 (`app/studio/` 1 level → `app/music/studio/` 2 levels). 상대 경로 import는 반드시 `@/` 절대 경로로 변환. - [ ] **Step 1: 원본 복사 + 변환** ```bash cat app/studio/page.tsx | head -50 ``` → `app/music/studio/page.tsx` 에 복사. import 모두 `@/` 변환 + 내부 Link href 새 URL로. - [ ] **Step 2: 린트 + 빌드** ```bash npx eslint app/music/studio/page.tsx npm run build 2>&1 | tail -10 ``` - [ ] **Step 3: 커밋** ```bash git add app/music/studio/ git commit -m "$(cat <<'EOF' feat(music): /music/studio — 현 /studio 컨텐츠 이동 Co-Authored-By: Claude Opus 4.7 (1M context) EOF )" ``` - [ ] **Step 4: ⚠️ git log -3** --- ## Task B5: /work 허브 신설 **Files:** - Create: `C:\Users\jaeoh\Desktop\workspace\jaengseung-made\app\work\page.tsx` - Create: `C:\Users\jaeoh\Desktop\workspace\jaengseung-made\app\work\layout.tsx` Custom Build 사업부 허브. 4 카드 + 5건 사례 미리보기 + 견적 폼 (ContactModal 트리거). - [ ] **Step 1: layout.tsx** ```tsx import type { Metadata } from 'next'; export const metadata: Metadata = { title: 'Custom Build — 맞춤 개발 사업부', description: '7년차 백엔드 개발자가 직접 설계·개발·납품. 외주 · 웹사이트 · AI 사주 · 블로그 자동화.', }; export default function WorkLayout({ children }: { children: React.ReactNode }) { return <>{children}; } ``` - [ ] **Step 2: page.tsx — Work 허브** ```tsx 'use client'; import { useState } from 'react'; import Link from 'next/link'; import ContactModal from '@/app/components/ContactModal'; import { PORTFOLIO } from '@/lib/freelance-portfolio'; import { trackCTAClick } from '@/lib/gtag'; const CARDS = [ { href: '/work/freelance', label: '외주 개발', desc: '맞춤 솔루션 외주 · RPA·API 연동·자동화 포함', key: 'freelance', }, { href: '/work/website', label: '웹사이트 제작', desc: '기업·브랜드 사이트 · Next.js + SEO + 배포', key: 'website', }, { href: '/work/saju', label: 'AI 사주', desc: 'AI 사주팔자 + 12개 항목 해석 (무료)', key: 'saju', }, { href: '/work/blog', label: '블로그 자동화', desc: '수익 엔진 팩 · 자동화 마케팅 콘텐츠', key: 'blog', }, ]; export default function WorkHub() { const [modalOpen, setModalOpen] = useState(false); const [modalService, setModalService] = useState('외주 개발 문의'); const openContact = (service: string) => { setModalService(service); setModalOpen(true); }; return (
{ setModalOpen(false); setModalService('외주 개발 문의'); }} service={modalService} checklist={['연락처/이메일', '원하는 작업 범위', '희망 일정']} />

Custom Build

맞춤 개발 사업부

7년차 백엔드 개발자가 직접 설계·개발·납품. 외주, 웹사이트, AI 사주, 블로그 자동화까지.

{CARDS.map((c) => ( trackCTAClick(`work_hub_card_${c.key}`)} className="group rounded-2xl border border-white/15 bg-white/[0.02] p-5 hover:border-white/40 hover:bg-white/[0.05] transition flex flex-col" style={{ textDecoration: 'none' }} >

{c.label}

{c.desc}

))}

Recent Deliveries

최근 납품 사례

{PORTFOLIO.map((p) => (

{p.category}

{p.title}

{p.result}

{p.priceRange}

))}

견적이 필요하신가요?

연락처 + 작업 범위 + 희망 일정만 알려주시면 24시간 내 답변드립니다.

); } ``` - [ ] **Step 3: 린트 + 빌드** ```bash npx eslint app/work/page.tsx app/work/layout.tsx npm run build 2>&1 | tail -10 ``` - [ ] **Step 4: 커밋** ```bash git add app/work/ git commit -m "$(cat <<'EOF' feat(work): /work 허브 신설 — Custom Build 4 카드 + 5건 사례 + 견적 폼 - 4 카드: 외주 / 웹사이트 / AI 사주 / 블로그 (자동화는 외주 흡수) - 납품 사례: lib/freelance-portfolio 5건 import - 견적 CTA: ContactModal('외주 개발 문의') - 가격 표 없음 — 가격 미정 (Phase 2/D에서 추가 예정) Co-Authored-By: Claude Opus 4.7 (1M context) EOF )" ``` - [ ] **Step 5: ⚠️ git log -3** --- ## Task B6: /work/freelance (현 /freelance 이동 + #automation 섹션 강화) **Files:** - Create: `C:\Users\jaeoh\Desktop\workspace\jaengseung-made\app\work\freelance\page.tsx` - Create: `C:\Users\jaeoh\Desktop\workspace\jaengseung-made\app\work\freelance\layout.tsx` ⚠️ depth 변경 (1 level → 2 levels). `@/` 절대 import 필수. - [ ] **Step 1: 원본 layout 복사** ```bash cat app/freelance/layout.tsx ``` → `app/work/freelance/layout.tsx` 에 복사. import 절대 경로. - [ ] **Step 2: 원본 page.tsx 복사 + portfolio array → lib import** `app/freelance/page.tsx` 내용을 `app/work/freelance/page.tsx`에 복사하되 다음 변경: 1. 파일 상단의 `const portfolio = [...]` 배열(약 5건) **삭제** 2. import 추가: `import { PORTFOLIO } from '@/lib/freelance-portfolio';` 3. 페이지 내부 `portfolio` 변수 참조를 `PORTFOLIO` 로 교체 4. import 절대 경로 (`@/app/components/...`, `@/lib/...`) 5. 내부 `` 새 URL로 (`/freelance` → `/work/freelance` 등) 6. **`#automation` anchor 섹션 ID 추가**: portfolio 안에서 RPA/자동화 사례 3-4건이 있는 영역에 `
` 래핑 (또는 자동화 그룹 div에 id="automation" 부여). `/work/page.tsx`의 외주 카드 desc에 "RPA·API 연동·자동화 포함"이라 명시되므로, `/work/freelance#automation`으로 직접 진입 시 자동화 섹션이 viewport 상단에 오도록. - [ ] **Step 3: 린트 + 빌드** ```bash npx eslint app/work/freelance/page.tsx app/work/freelance/layout.tsx npm run build 2>&1 | tail -10 ``` - [ ] **Step 4: 커밋** ```bash git add app/work/freelance/ git commit -m "$(cat <<'EOF' feat(work): /work/freelance — 현 /freelance 컨텐츠 이동 + #automation 앵커 - portfolio 데이터는 lib/freelance-portfolio import (양쪽 페이지 공유) - 자동화 사례 그룹에 id="automation" 부여 → 직접 진입 가능 - import @/ 절대 경로 변환 Co-Authored-By: Claude Opus 4.7 (1M context) EOF )" ``` - [ ] **Step 5: ⚠️ git log -3** --- ## Task B7: /work/website + 8 samples (현 /services/website 이동) **Files:** - Create: `app/work/website/page.tsx`, `layout.tsx` - Create: `app/work/website/samples/{bakery,corporate,dashboard,game,interior,portfolio,reading,shopping}/page.tsx` (8개) ⚠️ 동일 depth (3 levels — `services/website/samples/X` ≡ `work/website/samples/X`). 상대 경로 그대로 동작하지만 일관성 위해 `@/` 절대 경로로 변환 권장. - [ ] **Step 1: layout + page** ```bash cp app/services/website/layout.tsx app/work/website/layout.tsx cp app/services/website/page.tsx app/work/website/page.tsx ``` 복사 후 import 절대 경로 변환 + 내부 Link href 새 URL로: - `/services/website/samples/...` → `/work/website/samples/...` - 기타 `/services/*`, `/freelance`, `/saju`, `/studio` 등 새 URL로 - [ ] **Step 2: 8개 sample 페이지 복사** ```bash mkdir -p app/work/website/samples for s in bakery corporate dashboard game interior portfolio reading shopping; do mkdir -p "app/work/website/samples/$s" cp "app/services/website/samples/$s/page.tsx" "app/work/website/samples/$s/page.tsx" done ``` 각 sample 페이지에서 import `@/` 변환 + Link href 새 URL로. 8개 모두. (만약 sample 페이지들이 자기 자신만 참조하고 외부 Link가 거의 없으면 변경 최소.) - [ ] **Step 3: 린트 + 빌드** ```bash npx eslint app/work/website/ npm run build 2>&1 | tail -10 ``` - [ ] **Step 4: 커밋** ```bash git add app/work/website/ git commit -m "$(cat <<'EOF' feat(work): /work/website + 8 samples — 현 /services/website 컨텐츠 이동 - 메인 페이지 + layout + 8 sample 페이지 (bakery, corporate, dashboard, game, interior, portfolio, reading, shopping) - import @/ 절대 경로 변환 Co-Authored-By: Claude Opus 4.7 (1M context) EOF )" ``` - [ ] **Step 5: ⚠️ git log -3** --- ## Task B8: /work/saju + input + result + components (현 /saju 이동) **Files:** - Create: `app/work/saju/page.tsx`, `layout.tsx` - Create: `app/work/saju/input/page.tsx` - Create: `app/work/saju/result/page.tsx`, `SajuAISection.tsx`, `SajuFortuneSection.tsx` - Create: `app/work/saju/components/SajuForm.tsx` ⚠️ depth 변경 (saju 1 → work/saju 2). `@/` 변환 필수. SajuForm 등 내부 컴포넌트 import 경로 조정. - [ ] **Step 1: layout + main page** ```bash cp app/saju/layout.tsx app/work/saju/layout.tsx cp app/saju/page.tsx app/work/saju/page.tsx ``` import `@/`, Link href 새 URL로 (`/saju/input` → `/work/saju/input`, `/saju/result` → `/work/saju/result`). - [ ] **Step 2: input + result** ```bash mkdir -p app/work/saju/{input,result,components} cp app/saju/input/page.tsx app/work/saju/input/page.tsx cp app/saju/result/page.tsx app/work/saju/result/page.tsx cp app/saju/result/SajuAISection.tsx app/work/saju/result/SajuAISection.tsx cp app/saju/result/SajuFortuneSection.tsx app/work/saju/result/SajuFortuneSection.tsx cp app/saju/components/SajuForm.tsx app/work/saju/components/SajuForm.tsx ``` 각 파일에서: - import 절대 경로 `@/` - 내부 Link href 새 URL로 - 동일 폴더 내 sibling import (예: `./SajuAISection`, `../components/SajuForm`)은 새 위치 기준으로 그대로 유효 (depth 보존되므로) - API route 호출(`/api/saju/*`)은 변경 X - [ ] **Step 3: 린트 + 빌드** ```bash npx eslint app/work/saju/ npm run build 2>&1 | tail -10 ``` - [ ] **Step 4: 커밋** ```bash git add app/work/saju/ git commit -m "$(cat <<'EOF' feat(work): /work/saju + input + result — 현 /saju 컨텐츠 이동 - saju 페이지 + 입력 폼 + 결과 + AI 해석 + 사주 컴포넌트 모두 이동 - 카탈로그 spec(49만 코어 + 11 모듈)은 보류 — 무료 사주 분석만 마이그 - API route /api/saju/* 변경 없음 Co-Authored-By: Claude Opus 4.7 (1M context) EOF )" ``` - [ ] **Step 5: ⚠️ git log -3** --- ## Task B9: /work/blog (현 /services/blog 이동) **Files:** - Create: `app/work/blog/page.tsx`, `layout.tsx` - [ ] **Step 1: 복사** ```bash mkdir -p app/work/blog cp app/services/blog/layout.tsx app/work/blog/layout.tsx cp app/services/blog/page.tsx app/work/blog/page.tsx ``` import `@/`, Link href 새 URL로. - [ ] **Step 2: 린트 + 빌드** ```bash npx eslint app/work/blog/ npm run build 2>&1 | tail -10 ``` - [ ] **Step 3: 커밋** ```bash git add app/work/blog/ git commit -m "$(cat <<'EOF' feat(work): /work/blog — 현 /services/blog 컨텐츠 이동 Co-Authored-By: Claude Opus 4.7 (1M context) EOF )" ``` - [ ] **Step 4: ⚠️ git log -3** --- # Phase C — 메인 + 헤더/푸터/SEO ## Task C1: app/page.tsx 안 2 적용 **Files:** - Modify: `C:\Users\jaeoh\Desktop\workspace\jaengseung-made\app\page.tsx` 기존 메인(Hero / Features / Before-After / Use Cases / Custom Build 미니 / Final CTA 6 섹션)을 안 2 (Brand Hero + 2-up + Music 섹션 + Custom Build 섹션 + Final CTA 5 섹션)로 재구조. 기존 메인이 P0+안2 후속 작업을 이미 일부 반영 → 큰 변경은 Hero를 Brand Hero로 축소 + Two-up 카드 신설 + 일부 섹션 통폐합. - [ ] **Step 1: 현재 app/page.tsx 구조 파악** ```bash grep -nE "^\s*\{/\* [0-9]" app/page.tsx ``` 기존 섹션 번호와 위치 확인. - [ ] **Step 2: 전체 재작성** `app/page.tsx` 전체를 다음으로 교체. 기존 BEFORE/AFTER/TWEETS_ROW_A/B 상수 + 마퀴 CSS는 Music 섹션에 그대로 보존: (원본 page.tsx 의 BEFORE/AFTER/TWEETS_ROW_A/TWEETS_ROW_B 4 상수는 그대로 유지. 라인 9-43 부근) 새 page.tsx 구조 (스켈레톤 — 상세 JSX는 implementer가 기존 컨텐츠 그대로 가져와 배치): ```tsx 'use client'; import { useState } from 'react'; import Link from 'next/link'; import ContactModal from './components/ContactModal'; import { GlassButton } from './components/LiquidGlass'; import { trackCTAClick } from '@/lib/gtag'; import { PORTFOLIO } from '@/lib/freelance-portfolio'; const BEFORE = [ '작곡 공부에만 최소 6개월 소요', '영상 편집 프로그램 학습의 높은 장벽', '항상 불안한 저작권 위반 위험', '곡 하나 완성에 드는 수백만 원의 외주비', ]; const AFTER = [ '단 1시간 만에 프로급 음원 & 영상 완성', '드래그 앤 드롭 수준의 직관적인 워크플로우', '가이드대로 따라하면 완벽한 저작권 해결', '커피 한 잔 가격으로 무한대 콘텐츠 생산', ]; // TWEETS_ROW_A, TWEETS_ROW_B: 기존 app/page.tsx 18-36행 그대로 보존 const TWEETS_ROW_A = [ { name: '김민재', handle: 'minjae_shorts', time: '2h', body: '작곡 하나 못 하던 내가 3일 만에 쇼츠 채널 열었다. 프롬프트북 반칙 수준 ㄹㅇ' }, { name: '이소영', handle: 'cafe_sohyang', time: '5h', body: '매장 BGM 직접 만들어요. 저작권 고민 없이 매달 플레이리스트 갈아끼우는 게 신기함.' }, { name: '박도현', handle: 'dohyun_side', time: '1d', body: '퇴근 후 1시간 = 쇼츠 한 편. 애드센스 첫 수익이 3주 만에 꽂혔습니다. 팩값 회수 완료.' }, { name: '정유진', handle: 'yujin_indie', time: '2d', body: '데모 작업 시간이 1/5로. 레퍼런스 탐색 → MV까지 한 번에. 인디 뮤지션들 다 써야 함.' }, { name: '최현우', handle: 'hyunwoo_tube', time: '3d', body: '구독자 정체기였는데 AI 뮤비 시리즈로 알고리즘 탑승. 조회수 월 +320%.' }, { name: '한지원', handle: 'jiwon_studio', time: '4d', body: '팩 안에 든 저작권 체크리스트가 실질적. Suno 약관 읽는 시간 아꼈다.' }, { name: '오세린', handle: 'serin_mv', time: '5d', body: 'Runway 프리셋 그대로 써도 퀄 나옴. 프롬프트 설계가 반이네요.' }, { name: '강태윤', handle: 'taeyun_ads', time: '6d', body: '광고 BGM 10개 찍어서 외주 드렸더니 클라이언트 반응이 달라졌습니다.' }, ]; const TWEETS_ROW_B = [ { name: '문가은', handle: 'gaeun_beats', time: '3h', body: '가사 생성 템플릿이 진짜 핵심. 한글 랩 가사 붙일 때 막히던 거 뚫렸어요.' }, { name: '류현석', handle: 'hyun_creator', time: '7h', body: '쇼츠 업로드 루틴이 1시간 안에 끝남. 주말마다 10편씩 쌓고 있습니다.' }, { name: '배수진', handle: 'sujin_pop', time: '1d', body: 'K-POP 스타일 프롬프트 조합 충격. 레퍼런스 없이도 그 느낌이 나옴.' }, { name: '송재훈', handle: 'jaehun_lab', time: '2d', body: '1:1 Q&A 답변 속도 미쳤어요. 당일 회신 + 실무 디테일까지.' }, { name: '조은비', handle: 'eunbi_vlog', time: '3d', body: '브이로그 BGM 자작하니까 조회수 + 체류시간 둘 다 올라감. 데이터가 말함.' }, { name: '신도윤', handle: 'doyoon_snd', time: '4d', body: '스템 분리본이 포함된 게 진짜 크다. 믹싱 작업 훨씬 편해짐.' }, { name: '윤채원', handle: 'chaewon_art', time: '5d', body: 'Midjourney 프롬프트 풀 가치가 팩값 넘음. 그냥 사세요.' }, { name: '임준혁', handle: 'junhyuk_tune', time: '6d', body: '업데이트 진짜로 오네요. 2주 만에 V4.5 프롬프트 가이드 추가됨.' }, ]; const CB_CARDS = [ { href: '/work/freelance', label: '외주 개발', desc: '맞춤 솔루션 · RPA·API 자동화 포함', key: 'freelance' }, { href: '/work/website', label: '웹사이트', desc: '기업·브랜드 사이트', key: 'website' }, { href: '/work/saju', label: 'AI 사주', desc: '12개 항목 무료 해석', key: 'saju' }, { href: '/work/blog', label: '블로그 자동화', desc: '수익 엔진 팩', key: 'blog' }, ]; export default function Home() { const [modalOpen, setModalOpen] = useState(false); const [modalService, setModalService] = useState('일반 문의'); const openContact = (service: string) => { setModalService(service); setModalOpen(true); }; return (
{ setModalOpen(false); setModalService('일반 문의'); }} service={modalService} checklist={['연락처/이메일', '원하는 작업 범위', '희망 일정']} /> {/* 1. Brand Hero — kx-surface 검정, 60vh, 텍스트 중심 */}
{/* 2. Two-up Cards */}
{/* Music 카드 */} trackCTAClick('home_v7_card_music')} className="group relative rounded-2xl border border-white/15 overflow-hidden min-h-[280px] flex flex-col justify-end p-8 hover:border-white/40 transition" style={{ textDecoration: 'none' }} >
{/* 3. Music 섹션 — Features 3-step + Before/After + Tweet 마퀴 (기존 메인 그대로) */} {/* 기존 app/page.tsx 의 Features 섹션 (101-182행) + Before/After (184-229) + Use Cases (231-278) 그대로 복사 */} {/* 4. Custom Build 섹션 — 4 카드 + 견적 CTA (기존 P0 미니섹션을 확장 + 자동화 카드 빠짐) */}

Custom Build

맞춤 개발이 필요하신가요?

7년차 백엔드 개발자가 직접 설계·개발·납품. 외주, 웹사이트, AI 사주, 블로그 자동화까지.

{CB_CARDS.map((card) => ( trackCTAClick(`home_v7_cb_card_${card.key}`)} className="group rounded-2xl border border-white/15 bg-white/[0.02] p-5 hover:border-white/40 hover:bg-white/[0.05] transition flex flex-col" >

{card.label}

{card.desc}

))}
{/* 납품 5건 사례 미리보기 */}
{PORTFOLIO.map((p) => (

{p.category}

{p.title}

{p.result}

))}
{/* 5. Final CTA — 어느 쪽이든 시작하세요 */}
); } ``` ⚠️ Section 3 (Music 섹션 — Features 3-step + Before/After + Tweet 마퀴)는 기존 `app/page.tsx`의 해당 JSX 그대로 보존해야 함. 위 코드의 `{/* 3. Music 섹션 ... */}` 주석 위치에 기존 101-278행 JSX 그대로 삽입. - [ ] **Step 3: 린트 + 빌드** ```bash npx eslint app/page.tsx npm run build 2>&1 | tail -10 ``` - [ ] **Step 4: 커밋** ```bash git add app/page.tsx git commit -m "$(cat <<'EOF' feat(home): 메인 안 2 적용 — Brand Hero + 2-up + Music 섹션 + Custom Build + Final CTA - Brand Hero: 60vh, "현직 엔지니어가 만드는 두 가지" + 영상 blur 35% - Two-up: Music 카드(영상+₩39,000~) / Custom Build 카드(정적 그라데이션+견적) - Music 섹션: 기존 Features+Before/After+마퀴 그대로 보존 - Custom Build 섹션: 4 카드 (자동화는 외주 흡수) + 납품 5건 사례 + 견적 CTA - Final CTA: "어느 쪽이든 시작하세요" + 두 분기 CTA Co-Authored-By: Claude Opus 4.7 (1M context) EOF )" ``` - [ ] **Step 5: ⚠️ git log -3** --- ## Task C2: TopNav LINKS 2개 **Files:** - Modify: `C:\Users\jaeoh\Desktop\workspace\jaengseung-made\app\components\TopNav.tsx` (7-13행) - [ ] **Step 1: LINKS 배열 변경** 현재 (line 7-13): ```ts const LINKS = [ { href: '/', label: '홈' }, { href: '/services/music/samples', label: '샘플' }, { href: '/services/music', label: '팩 상세' }, { href: '/studio', label: '스튜디오' }, { href: '/freelance', label: '외주' }, ]; ``` 변경 후: ```ts const LINKS = [ { href: '/music', label: 'Music' }, { href: '/work', label: 'Custom Build' }, ]; ``` ⚠️ `Try now` 버튼 destination도 확인 — 현재 `/services/music` 으로 되어있으면 `/music` 로 변경 (또는 redirect 의존으로 그대로). 찾기: ```bash grep -n "/services/music\|/freelance\|/saju\|/studio\|/services/blog\|/services/website" app/components/TopNav.tsx ``` 각 사용처를 새 URL로 교체 (redirect로 처리되긴 하지만 직접 변환). - [ ] **Step 2: 린트 + 빌드** ```bash npx eslint app/components/TopNav.tsx npm run build 2>&1 | tail -10 ``` - [ ] **Step 3: 커밋** ```bash git add app/components/TopNav.tsx git commit -m "$(cat <<'EOF' feat(nav): TopNav LINKS 5개 → 2개 (Music | Custom Build) 헤더 안 b 적용. /music, /work 각 사업부 허브로 진입. Try now 버튼 destination 도 /music 으로 변경 (기존 /services/music). Co-Authored-By: Claude Opus 4.7 (1M context) EOF )" ``` - [ ] **Step 4: ⚠️ git log -3** --- ## Task C3: PublicShell 푸터 URL 갱신 **Files:** - Modify: `C:\Users\jaeoh\Desktop\workspace\jaengseung-made\app\components\PublicShell.tsx` P0에서 정돈된 푸터의 URL 8개를 새 URL로 교체. - [ ] **Step 1: 푸터 grep** ```bash grep -nE "(services/(music|blog|website)|freelance|saju|studio)" app/components/PublicShell.tsx ``` - [ ] **Step 2: URL 교체** 각 매칭 위치를 새 URL로: | 기존 | 새 | |---|---| | `/services/music` | `/music/packs` | | `/services/music/samples` | `/music/samples` | | `/services/music#pricing` | `/music/packs#pricing` | | `/freelance` | `/work/freelance` | | `/services/website` | `/work/website` | | `/saju` | `/work/saju` | | `/services/blog` | `/work/blog` | | `/studio` (있다면) | `/music/studio` | 또한 푸터 컬럼명 `Product` → `Music` 으로 변경 (사업부 명명 일치). 단, 기존 컬럼 구조 유지. - [ ] **Step 3: 린트 + 빌드** ```bash npx eslint app/components/PublicShell.tsx npm run build 2>&1 | tail -10 ``` - [ ] **Step 4: 커밋** ```bash git add app/components/PublicShell.tsx git commit -m "$(cat <<'EOF' feat(footer): PublicShell 푸터 URL 갱신 — 새 IA - /services/music → /music/packs (외 7개 URL 교체) - Product 컬럼명 → Music (사업부 명명 일치) Co-Authored-By: Claude Opus 4.7 (1M context) EOF )" ``` - [ ] **Step 5: ⚠️ git log -3** --- ## Task C4: layout.tsx JSON-LD URL 갱신 **Files:** - Modify: `C:\Users\jaeoh\Desktop\workspace\jaengseung-made\app\layout.tsx` JSON-LD `OfferCatalog.itemListElement` 의 모든 `url` 필드를 새 URL로. - [ ] **Step 1: 현재 url 필드 grep** ```bash grep -nE "(services/(music|blog|website)|freelance|saju|studio)" app/layout.tsx ``` - [ ] **Step 2: URL 교체** 각 url을 새 URL로 (Task C3와 동일 매핑). `OfferCatalog` 안의 5개 Offer 항목 + 신규 외주/웹사이트 Offer 2개 (P0에서 추가) 등 모두 갱신. - [ ] **Step 3: 빌드 (JSON-LD 문법 검증)** ```bash npm run build 2>&1 | tail -10 ``` JSON-LD가 빌드 단계에서 `JSON.stringify` 처리되므로 syntax 오류 시 즉시 실패. - [ ] **Step 4: 커밋** ```bash git add app/layout.tsx git commit -m "$(cat <<'EOF' feat(seo): JSON-LD OfferCatalog URL 갱신 — 새 IA 모든 Offer.url + itemOffered.url 필드를 새 URL로: - /services/music → /music/packs - /freelance → /work/freelance - /services/website → /work/website - /saju → /work/saju - /services/blog → /work/blog Co-Authored-By: Claude Opus 4.7 (1M context) EOF )" ``` - [ ] **Step 5: ⚠️ git log -3** --- # Phase D — 원본 삭제 + 검증 ## Task D1: 원본 25 파일 일괄 삭제 **Files (delete):** - `app/services/music/{page,layout}.tsx` - `app/services/music/samples/page.tsx` - `app/studio/page.tsx` - `app/freelance/{page,layout}.tsx` - `app/services/website/{page,layout}.tsx` - `app/services/website/samples/{bakery,corporate,dashboard,game,interior,portfolio,reading,shopping}/page.tsx` (8개) - `app/services/blog/{page,layout}.tsx` - `app/saju/{page,layout}.tsx` - `app/saju/input/page.tsx` - `app/saju/result/{page,SajuAISection,SajuFortuneSection}.tsx` (3개) - `app/saju/components/SajuForm.tsx` 총 25 파일. 빈 디렉토리도 삭제. - [ ] **Step 1: 삭제** ```bash cd /c/Users/jaeoh/Desktop/workspace/jaengseung-made git rm app/services/music/page.tsx app/services/music/layout.tsx git rm app/services/music/samples/page.tsx git rm app/studio/page.tsx git rm app/freelance/page.tsx app/freelance/layout.tsx git rm app/services/website/page.tsx app/services/website/layout.tsx git rm app/services/website/samples/bakery/page.tsx git rm app/services/website/samples/corporate/page.tsx git rm app/services/website/samples/dashboard/page.tsx git rm app/services/website/samples/game/page.tsx git rm app/services/website/samples/interior/page.tsx git rm app/services/website/samples/portfolio/page.tsx git rm app/services/website/samples/reading/page.tsx git rm app/services/website/samples/shopping/page.tsx git rm app/services/blog/page.tsx app/services/blog/layout.tsx git rm app/saju/page.tsx app/saju/layout.tsx git rm app/saju/input/page.tsx git rm app/saju/result/page.tsx git rm app/saju/result/SajuAISection.tsx git rm app/saju/result/SajuFortuneSection.tsx git rm app/saju/components/SajuForm.tsx ``` 빈 디렉토리 자동 정리 (git은 비어있는 디렉토리 추적 X). - [ ] **Step 2: 빌드 통과 (필수)** ```bash npm run build 2>&1 | tail -15 ``` 기대: 모든 라우트 빌드 성공. 신규 라우트(`/music/*`, `/work/*`) 모두 prerender + redirect 동작. 만약 깨지면 (예: 신규 페이지에서 삭제된 원본 위치 컴포넌트 import 잔존): - 에러 메시지 확인 - 신규 페이지의 import path 수정 (`@/` 절대 경로 누락 검색) - [ ] **Step 3: 린트** ```bash npx eslint app/ ``` - [ ] **Step 4: 커밋** ```bash git commit -m "$(cat <<'EOF' refactor(routes): 원본 25 파일 삭제 — Phase B에서 컨텐츠 이동 완료 Phase D 마무리: - /services/music + /services/music/samples (3 파일) - /studio (1) - /freelance (2) - /services/website + 8 samples (10) - /services/blog (2) - /saju + input + result + components (7) next.config.ts redirects()로 외부 링크 보존 (영구 리다이렉트 301). Co-Authored-By: Claude Opus 4.7 (1M context) EOF )" ``` - [ ] **Step 5: ⚠️ git log -3** --- ## Task D2: 통합 검증 (build + lint + 시각 회귀 + Search Console) **Files:** 코드 변경 없음. 검증 단계. - [ ] **Step 1: 전체 빌드** ```bash npm run build 2>&1 | tail -20 ``` 기대: 모든 라우트 success. 라우트 카운트는 P0 + Phase 2 + P1 후 약 80+개. 확인: - `/music`, `/music/packs`, `/music/samples`, `/music/studio` — 4개 모두 빌드 - `/work`, `/work/freelance`, `/work/website`, `/work/website/samples/*` (8개), `/work/saju`, `/work/saju/input`, `/work/saju/result`, `/work/blog` — 12+개 모두 빌드 - `/services/*`, `/saju/*`, `/studio`, `/freelance` — **모두 사라짐** (삭제됨) - [ ] **Step 2: 변경 핵심 파일 lint** ```bash npx eslint \ app/page.tsx \ app/layout.tsx \ app/components/TopNav.tsx \ app/components/PublicShell.tsx \ next.config.ts \ lib/freelance-portfolio.ts \ app/music app/work ``` 기대: exit 0 또는 사전 존재 경고만. - [ ] **Step 3: redirect 시각 회귀 (수동, 사용자 직접 확인)** `npm run dev` 후 브라우저에서: 기존 URL → 새 URL 리다이렉트 검증: - `http://localhost:3000/services/music` → 자동으로 `/music/packs` (URL 바뀜 + 페이지 정상) - `http://localhost:3000/services/music/samples` → `/music/samples` - `http://localhost:3000/studio` → `/music/studio` - `http://localhost:3000/freelance` → `/work/freelance` - `http://localhost:3000/services/website` → `/work/website` - `http://localhost:3000/services/website/samples/bakery` → `/work/website/samples/bakery` - `http://localhost:3000/services/blog` → `/work/blog` - `http://localhost:3000/saju` → `/work/saju` - `http://localhost:3000/saju/input` → `/work/saju/input` - `http://localhost:3000/saju/result?year=1992&month=12&day=23&hour=16&gender=male&calendarType=solar` → `/work/saju/result?...` (쿼리 스트링 보존) 직접 URL 접근: - `/` — 안 2 적용된 메인 (Brand Hero + 2-up + Music 섹션 + Custom Build 섹션 + Final CTA) - `/music` — Music 허브 (3 카드) - `/work` — Custom Build 허브 (4 카드 + 5건 사례 + 견적 폼) - `/work/freelance#automation` — 자동화 섹션이 viewport 상단에 옴 헤더: - 데스크톱: `JSM | Music | Custom Build | 로그인 (또는 마이페이지) | Try now (또는 로그아웃)` - 모바일 햄버거: 2개 LINKS 표시 - [ ] **Step 4: JSON-LD 검증** Google Rich Results Test (https://search.google.com/test/rich-results) 에 사이트 URL 또는 메인 페이지 source 붙여넣고: - `LocalBusiness` 정상 - `OfferCatalog.itemListElement` 의 모든 `url` 새 URL로 (5+ 항목) - 에러 0, 경고 최소 - [ ] **Step 5: Google Search Console 색인 요청 (운영자 수동)** CEO 수동 작업: 1. Google Search Console 진입 2. URL Inspection으로 핵심 새 URL 5-10개 색인 요청: - `https://jaengseung-made.com/` - `https://jaengseung-made.com/music` - `https://jaengseung-made.com/music/packs` - `https://jaengseung-made.com/work` - `https://jaengseung-made.com/work/freelance` - `https://jaengseung-made.com/work/saju` - 등 3. 기존 URL의 301 redirect 정상 동작 확인 (예: `/services/music` 색인 상태 확인 → 30일 내 새 URL로 대체) - [ ] **Step 6: P1 commit 요약 git log 확인** ```bash git log --oneline eaa0c18..HEAD | wc -l ``` 기대: 17 task commits (A1, A2, B1-B9, C1-C4, D1). D2는 코드 변경 없음. ```bash git log --oneline eaa0c18..HEAD ``` 전체 commit 리스트 출력 — 사용자가 review 가능. 이 task는 코드 변경 없음 — commit X. --- # 부록 A. 안전성 분석 — 단계별 빌드 영향 | 시점 | 빌드 | 외부 사용자 영향 | |---|---|---| | Phase A 완료 후 (A1+A2) | OK | redirect 작동, destination 미존재 → 404 (P0 사용자가 새 URL 접근 시) | | Phase B 진행 중 | OK (원본 + 신규 양쪽 존재) | redirect 작동하나 destination 일부만 존재. 진행 중인 phase 는 push 안 함 | | Phase B 완료 (B9 후) | OK | 모든 destination 존재. 단, 원본 page도 존재 (dead route, redirect로 우회) | | Phase C 진행 (C1-C4) | OK | 메인/헤더/푸터 변경 노출 (push 시) | | Phase D 완료 (D1+D2) | OK | 원본 삭제, redirect만 남음. 사이트 정합성 보장 | → **push 시점은 Phase D 완료 후**. Phase A/B/C는 로컬 commit만, 일괄 push. # 부록 B. 검증 인프라 메모 이 프로젝트는 jest/vitest/playwright 미설치. 각 task 검증은: 1. `npx eslint <변경 파일>` — TypeScript + ESLint 2. `npm run build` — Next.js 빌드 통과 3. (Phase D) 시각/수동 — dev 서버에서 redirect + 페이지 확인 D1 commit 후에는 **사용자가 직접 시각 회귀 수행 후 push 결정**. 자동 검증 한계. # 부록 C. Subagent commit sandboxing 우려 Phase 2 에서 일부 subagent의 commit이 git에 반영 안 되는 sandboxing 이슈 있었음. 본 plan의 모든 task에 다음 step 포함: ```bash git log --oneline -3 ``` 기대: HEAD가 본인 commit인지 직접 검증. 안 보이면 **BLOCKED + sandbox 의심 보고**. # 부록 D. P3+ 후속 (이 plan 종료 후) - 자체 정가 표 (가격 결정 후) - /about 페이지 - /work/automation 별도 페이지 (분리 결정 시) - 사주 카탈로그 49만 + 11 모듈 (재정리 후) - Custom Build 라인별 후기/리뷰 - sitemap.xml 자동 생성 - Brand Hero 영상/모션 재디자인 - redirect 정합성 모니터링 (Search Console 30일)