풀스택

포트폴리오용 프로젝트 수정 및 보완

원래 weinvite는 모바일 청첩장만 만들어주는 서비스였다. 오늘은 여기에
돌잔치 초대장 카테고리를 새로 얹는 작업을 했다. 단순히 폼 하나 더
만드는 걸로 끝나지 않고, 라우팅 구조 개편 · 관리자 대시보드 · D1 마이그레이션 ·
운영 중이던 버그 수정까지 하루 만에 꽤 많은 일이 있었다. 기록해둔다.

---

왜 확장했나

청첩장을 만든 고객이 나중에 아이를 낳으면 돌잔치도 우리 서비스로 다시
찾아오게 만들고 싶었다. 그러려면 "청첩장 전용 사이트"가 아니라 "모바일
초대장 플랫폼"으로 방향을 넓혀야 했고, 첫 확장 대상으로 돌잔치 초대장을
골랐다.

아키텍처 결정: 기존 코드는 최대한 안 건드린다

가장 먼저 부딪힌 문제는 이거였다. 청첩장 커버 디자인이 34종이나 있는데,
전부 groom.name/bride.name을 하드코딩해서 렌더링하고 있었다. 게다가
5개 언어 i18n 스키마, wedding-admin의 D1 스키마에도 신랑/신부 개념이
깊게 박혀 있었다.

여기서 전면 리팩터(필드명 전부 중립화)로 가면 기존 청첩장 상품 전체가
회귀 위험에 노출된다. 그래서 택한 방향은:

• 기존 WeddingContext + 34개 커버는 그대로 유지 (한 줄도 안 건드림)
• 돌잔치 전용 FirstBirthdayContext 신규 생성
• 갤러리·방명록·RSVP·계좌·연락처처럼 실제로 카테고리 무관하게 재사용 가능한
  컴포넌트만 SharedInvitationContext라는 최소 공통 필드 컨텍스트로
  분리해서 양쪽이 공유

이렇게 하면 "새 기능 추가"가 "기존 기능 수정"이 되지 않는다. 대신 대가는
있다 — 완전히 새로운 타입/컨텍스트/섹션 컴포넌트를 병행해서 만들어야 해서
작업량 자체는 늘어난다.

오늘 만든 것들

• 데이터 모델: FirstBirthdayConfig, 아기/보호자 정보 타입
• 신규 커버 디자인 3종 (꽃잎 / 풍선 / 폴라로이드)
• 아기 프로필, 인사말, 돌잔치 안내 섹션 컴포넌트
• 청첩장과 동일한 구조의 제작 편집기 — 좌측 아이콘 사이드바 + 우측 실시간
  폰 목업 미리보기, 카카오 장소 검색, 섹션 온오프, BGM 탭까지 포함
• / 진입 시 청첩장/돌잔치 중 고르는 카테고리 선택 화면 신규
• 관리자 대시보드 + D1 스키마에 category 필드 추가, 운영 DB에 마이그레이션
  실제 적용까지 완료

진행하면서 발견한 것들

1. tsc 검증이 사실 아무것도 안 하고 있었다

세션 내내 npx tsc --noEmit -p .로 타입 체크를 돌리고 "클린"이라고
확인했는데, 나중에 알고 보니 이 프로젝트의 tsconfig.json은 references만
있는 솔루션 파일이라 이 명령으로는 실질적으로 아무것도 체크가 안 되고
있었다. 진짜 빌드(tsc -b && vite build)를 돌려보고서야 실제 타입 에러
2건을 발견했다. 이후로는 항상 실제 빌드 명령으로 검증하기로 했다.

2. 리팩터 과정에서 생긴 사진 탭 크래시 — 그리고 이미 배포돼 있었다

공용 컴포넌트들을 SharedInvitationContext를 구독하도록 옮기면서, 정작
편집 폼(왼쪽 패널)에는 그 Provider를 안 씌워놨다는 걸 나중에 발견했다.
결과: 사진 탭에 들어가면 즉시 크래시. 문제는 이게 돌잔치뿐 아니라
이미 운영 중이던 청첩장 에디터에도 동일하게 적용되고 있었다는 것.
새 기능을 얹다가 기존 기능을 몰래 부순 전형적인 케이스였다.
다행히 바로 발견해서 수정했다.

회고

• "기존 걸 안 건드린다"는 원칙을 세워도, 공용부(컨텍스트, 훅)를 건드리는
  순간 그 원칙은 생각보다 쉽게 깨진다. 리팩터 범위가 "이 파일만"이 아니라
  "이 파일을 쓰는 모든 곳"이라는 걸 매번 되새겨야 한다.
• 정적 분석(빌드/타입체크)은 그 자체가 맞게 설정돼 있는지부터 의심해야
  한다. "에러 없음"이 "정말 체크했음"을 보장하지 않는다.
• 기능을 줄여서(리스크를 줄여서) 처음 배포하는 것과, 사용자가 실제로
  기대하는 완성도 사이의 간극은 생각보다 크다. "왜 이렇게 빠진 게 많냐"는
  피드백을 받고 나서야 청첩장과 눈높이를 맞추는 작업(장소 검색, 섹션 관리,
  BGM, 레이아웃 통일)을 이어서 했다.

다음에 할 일

• 폰트 선택, 안내사항 문구 편집, 다국어(언어 탭) — 돌잔치 쪽은 아직 한국어
  전용이라 5개 언어 대응은 남은 숙제
• 프리미엄(영구 배포) 파이프라인의 돌잔치 지원
• 실제 주문 → 발행 → 조회까지 브라우저로 직접 눌러보는 E2E 테스트
  (이번 세션은 샌드박스에 헤드리스 브라우저 구동 라이브러리가 없어서
  프로덕션 빌드로만 검증했다 — 다음엔 실제로 클릭해보면서 확인해야 한다)