반려견 맞춤 간식 구독 커머스 · 2026.03–2026.09

담당: 프론트엔드 전체 구현과 API 연동 · 백엔드 팀장과 단품몰 확장의 API·테이블 방향 협의

서비스

Next.js 16 · React 19 · TypeScript · Tailwind CSS 4 · TanStack Query · Playwright · Vitest

구독 서비스에 단품 구매가 추가됐을 때

처음 계획에 없던 단품몰이 실제 고객의 요구로 추가됐습니다. 구독·단품 구매·결제·마이페이지를 구현하고, 변경되는 구매 흐름에 맞춰 API 연동을 조정했습니다. 백엔드 팀장과 테이블 방향과 API 변경점을 논의했습니다.

구매 화면에서는 요청 중 버튼을 비활성화하고 중복 요청을 차단했습니다. 이 처리는 백엔드의 중복 주문 방어와 연결했습니다. 화면의 반복 조작을 막는 부분과 서버에서 주문을 방어하는 부분을 함께 다뤘습니다.

이미지와 한글 폰트가 많은 상세 화면

상품 상세의 성능 개선에서는 원본 이미지와 한글 폰트를 다뤘습니다. 이미지를 리사이징하고 로딩 방식을 개선했으며, 한글 폰트에는 서브셋을 적용했습니다.

변경 뒤 상품 상세 페이지의 데스크톱 Lighthouse Performance 57 → 88점을 확인했습니다. 약 4회 측정한 결과입니다.

구매 흐름을 반복해서 확인하는 방법

Playwright E2E를 로그인 외의 구독·주문·마이페이지 흐름으로 확장했습니다. 인증·쿠폰·오류 흐름을 포함해 34개 시나리오를 구성했습니다. mock API와 공용 인증 헬퍼를 만들어 테스트의 기반으로 사용했습니다.

기능이 늘어난 뒤의 구조 관리

• 레이어 경계: FSD 혼합 구조의 public API를 정비하고 dependency-cruiser로 레이어 의존성 위반을 자동 검사했습니다.
• 구매 행동 측정: 타입 안전한 GA4 이벤트 헬퍼로 구매·인증·구독 퍼널 측정 기반을 구성했습니다.
• 표기 일관성: 배송비·혜택을 공용 컴포넌트와 상수로 정리하고 관련 단위 테스트를 갱신했습니다.
• 검색 정보: 배송·반품 정책을 반영한 Product 구조화 데이터를 구현했습니다.

결과와 구현 범위

구독 서비스의 단품몰 확장에 맞춰 구매 화면과 API 연동을 조정하고, 성능 측정과 E2E 테스트를 함께 적용했습니다. 프론트엔드 전체 구현을 전담하고 백엔드 팀장과 API·테이블 방향을 협의했습니다.