팔랑은 소상공인이 상품 등록부터 주문과 클레임까지 관리하는 판매 플랫폼입니다. Next.js 15 App Router와 Turbo를 사용해 seller, buyer, admin 앱을 나누고 공통 UI package를 연결했습니다.
멀티앱 구조
사용자군마다 배포와 화면 책임이 달라 세 앱을 분리했습니다. 반복되는 디자인 토큰과 컴포넌트만 공통 package에 두고, 앱별 기능은 각 경계 안에 남겼습니다.
상품 등록과 주문
상품 등록은 기본 정보, 옵션, 이미지, 노출 설정의 4단계로 구성했습니다. 중간에 나갔다 돌아와도 작성 내용을 이어갈 수 있고, 옵션과 재고, 필수 이미지 검증은 단계마다 필요한 시점에 보여 줍니다.
구매자 화면에서는 주문 내역·상세와 취소·반품·교환 흐름을 구현했습니다. 클레임 상태에 따라 필요한 입력과 예상 내역을 나누고, 사진은 다음 단계로 이동하는 동안 업로드가 이어지도록 처리했습니다.
공유 미리보기와 미디어
SPA 구조에서 소셜 공유 미리보기가 나오지 않는 문제는 crawler 요청에만 동적 OG 문서를 반환하는 방식으로 풀었습니다. 상품 이미지와 영상 업로드에는 파일 검증, 진행 상태, 페이지 이탈 방지를 함께 넣었습니다.