### 커밋 개발내역 이번 커밋 묶음에서는 블로그 시스템의 가시성, 보안, 그리고 유지보수성을 크게 향상시키는 작업이 이루어졌습니다. 주요 변경 사항은 다음과 같습니다. - **SEO 및 GEO 최적화**: `app/[locale]/layout.tsx`, `app/[locale]/[username]/[slug]/page.tsx` 등에 `application/ld+json` 구조화 데이터를 주입하여 AI 검색 엔진과 일반 검색 엔진의 이해도를 높였습니다. - **보안 및 권한 제어**: `lib/posts.ts`, `app/api/generate/route.ts` 등을 수정하여 Private 리포지토리의 커밋 SHA 링크가 비권한자에게 404 에러를 발생시키는 문제를 방지했습니다. (`is_public` 속성 추가) - **코드 리팩토링 및 SSOT 적용**: `lib/portone-billing.ts`에 하드코딩된 가격 정보를 제거하고 `lib/subscription.ts`의 `TIER_LIMITS`로 통합하여 단일 진실 공급원(SSOT)을 구축했습니다. 더불어 Zod 스키마를 적용하고 에러 메시지를 한국어로 통일했습니다. - 전체 변경 규모는 약 450줄 이상의 코드 추가 및 삭제로 이루어졌으며, 시스템의 내실을 다지는 중요한 마일스톤이었습니다. 핵심 한 줄: **"검색 엔진과 AI를 위한 최적화, 비권한자 링크 접근 차단, 그리고 상수 통합을 통해 프로덕션 레벨의 안정성을 확보했습니다."** ### 작업 순서 이번 작업은 인프라/리팩토링부터 시작하여 보안 강화, 마지막으로 마케팅 관점의 SEO 적용 순으로 진행되었습니다. 1. **상수 통합 및 리팩토링 (`f2b319e`, `e103239`)**: 먼저 결제 가격 정보 등 흩어져 있던 설정값을 하나의 파일(`lib/subscription.ts`)로 통합하고 API 파라미터 검증을 Zod로 교체하여 기반의 안정성을 다졌습니다. 2. **UI 및 버그 수정 (`17530cf`, `0b03ac2`)**: 사용성에 영향을 미치는 404 라우팅 에러 및 모달 UI 로직 등을 걷어냈습니다. 라우터 변경 시 다국어(`@/i18n/routing`)를 적용하여 엣지 케이스를 잡았습니다. 3. **권한 제어 및 보안 패치 (`aa19135`, `8f4dd06`)**: DB 레벨에서 `is_public` 필드를 추가하고, API 라우트와 UI 컴포넌트 전반에 걸쳐 Private 리포지토리의 커밋 링크 노출을 제한하는 구조를 완성했습니다. 4. **SEO/GEO 추가 및 XSS 방어 (`0cf5038`, `7cc8d28`)**: 모든 페이지에 JSON-LD 스키마를 삽입했습니다. 이 과정에서 `dangerouslySetInnerHTML`로 주입되는 JSON 데이터에서 발생할 수 있는 스크립트 인젝션 XSS 공격을 방지하기 위해 이스케이프 처리를 추가로 구현했습니다. ### 핵심 기능 가장 두드러지는 변화 3가지를 코드와 함께 분석합니다. 1. **보안: JSON-LD 주입 시 XSS 방어** `dangerouslySetInnerHTML`을 통해 JSON 데이터를 렌더링할 때, 악의적인 문자열이 스크립트로 동작하는 것을 막아야 합니다. ```tsx // Before: 보안 취약점이 존재하던 JSON-LD 주입 ` 같은 구문이 포함될 경우 그대로 실행될 위험이 있습니다. 꺾쇠 및 앰퍼샌드를 이스케이프하여 스크립트 실행을 원천 차단했습니다. 2. **권한: 커밋 링크 조건부 노출** 비공개 리포지토리의 포스트를 타인이 읽을 때, GitHub 커밋 링크를 클릭하면 404가 발생했습니다. 이를 막기 위해 컴포넌트 단에서 렌더링을 분기했습니다. ```tsx // app/[locale]/[username]/[slug]/page.tsx (`aa19135`)

{post.commits.map((sha) => // 현재 접속자가 글 작성자이거나, 리포지토리가 공개 설정된 경우에만 링크 허용 isOwner || post.is_public ? ( {sha.substring(0, 7)} ) : ( // 그 외의 경우 텍스트로만 표시하여 404 방지 {sha.substring(0, 7)} ) )}

``` 이 변화는 DB의 `is_public` 필드 추가부터 서버 액션(`app/actions/postActions.ts`)을 아우르는 풀스택 변경이었습니다. 3. **유지보수: 결제 정보의 단일 진실 공급원(SSOT)** 결제 로직과 요금제 정보에서 중복 정의되던 가격을 하나로 합쳤습니다. ```typescript // lib/portone-billing.ts (`f2b319e`) // Before: 하드코딩된 결제 금액 배열 const TIER_AMOUNTS: Record> = { pro: { monthly: 6900, yearly: 58800 }, business: { monthly: 29900, yearly: 274800 }, }; // const amount = TIER_AMOUNTS[tier]?.[cycle]; // After: 통합된 구독 정보 구조체 활용 import { TIER_LIMITS } from "@/lib/subscription"; // subscription.ts에 정의된 price 필드를 재사용하여 // 가격 변경 시 한 곳만 수정하도록 리팩토링 완료 const amount = TIER_LIMITS[tier as SubscriptionTier]?.price[cycle]; ``` ### 개발 스토리 **AI가 코드로부터 추론한 내용입니다.** - **요구사항**: 블로그 서비스가 점진적으로 성장함에 따라 사용자 유입을 위한 마케팅 기술(SEO/GEO)의 도입, 그리고 다양한 레포지토리 연동에서 발생하는 예외 케이스(권한 없는 사용자의 404 클릭 등) 처리가 절실했습니다. 더불어 향후 요금제 개편을 위해 코드 곳곳에 산재된 설정값들을 묶어야 했습니다. - **기획**: 데이터 구조화 측면에서 Schema.org 표준의 `BlogPosting`, `BreadcrumbList`, `ProfilePage` 등을 각 라우트에 매핑하기로 설계했습니다. 보안 이슈를 해결하기 위해 DB 스키마에 `is_public` 속성을 기본값 `true`로 추가하고, 포스트 생성 시 원본 레포지토리 상태를 캡처하기로 결정했습니다. - **개발**: 리팩토링을 먼저 수행하여 Zod 기반 API 검증 체계와 `TIER_LIMITS` 객체로 의존성을 모았습니다. 이후 풀스택으로 `is_public` 필드를 연동하고, 마지막으로 각 페이지 최상단 레이아웃부터 하위 포스트 컴포넌트까지 `application/ld+json` 스크립트를 삽입했습니다. 특히 보안 검토 과정에서 JSON 주입의 취약점을 인지하고 `dangerouslySetInnerHTML` 사용에 대한 이스케이프 방어를 핫픽스 성격으로 덧붙여 배포했습니다. ### 핵심 교훈 1. **JSON-LD 사용 시 XSS 취약점은 단골 손님입니다.** React에서 `dangerouslySetInnerHTML`로 외부나 사용자 입력 데이터가 포함될 수 있는 구조화 데이터를 주입할 때는 반드시 `replace(/

Next.js 블로그 SEO 최적화 및 보안 강화: JSON-LD부터 권한 제어까지

tuosm9390