멀티앱 구조
판매자·구매자·운영자마다 필요한 화면과 배포가 달라 Next.js 15 App Router와 Turbo로 세 앱을 분리했습니다. 디자인 토큰과 반복되는 컴포넌트는 공통 패키지에 두고 각 앱의 기능은 해당 앱에서 관리했습니다.
상품 등록과 주문
AI 상품 등록은 이미지 업로드, 상품 선택, 상품 특징, 상세 정보 편집의 4단계로 구성했습니다. 이미지에서 판매할 대상을 고르고 특징을 선택하면 AI가 만든 상세 설명을 편집할 수 있습니다. 직접 등록도 지원하며 임시저장할 때는 아직 전송하지 않은 이미지·영상을 S3에 올린 뒤 서버에 저장하고 나중에 다시 불러오도록 구현했습니다.
구매자 화면에서는 주문 내역·상세와 취소·반품·교환 흐름을 구현했습니다. 클레임 상태에 따라 필요한 입력과 예상 내역을 나누고 사진은 다음 단계로 이동하는 동안 업로드가 이어지도록 처리했습니다.
공유 미리보기와 미디어
SPA 구조에서 소셜 공유 미리보기가 나오지 않는 문제는 크롤러 요청에만 동적 OG 문서를 반환하는 방식으로 풀었습니다. 상품 이미지와 영상 업로드에는 파일 검증, 진행 상태, 페이지 이탈 방지를 함께 넣었습니다.