SHOWROOMZ

요약

브랜드와 인플루언서가 계약을 맺고 공동구매(공구)를 진행하는 커머스 플랫폼으로, 창업팀에서 프론트엔드를 맡았습니다. 2026년 7월에 합류해 기존 소비자 앱·파트너센터·운영자 콘솔을 이어받아 확장했고, 파트너센터의 설정을 바탕으로 인플루언서용 스튜디오 웹을 구축했습니다. 계약·공구 흐름을 브랜드·인플루언서·운영자 화면에, 연결·소통 메시지를 브랜드·인플루언서 화면에 구현했고, 소비자 앱에는 주문·결제·반품 흐름을 구현했습니다.

내가 한 일

• 파트너센터의 설정과 구조를 바탕으로 인플루언서용 스튜디오 웹 구축(소셜 로그인 4종, 연결·소통, 계약, 공구, 게시물, 쇼룸 관리)
• 계약 관리와 공구 관리 화면을 파트너센터·스튜디오·운영자 콘솔 3곳에 구현
• 파트너센터의 연결·소통 메시지, 주문·클레임 화면, 상품 문의, 기본정보 관리 구현
• 운영자 콘솔의 정보 변경 요청 심사, 1:1·상품 문의, 약관·공지, 소비자 회원 관리 구현과 기존 입점 심사·상품·FAQ 화면 재작성
• 소비자 앱의 주문·결제(PortOne)·반품/교환 흐름 구현과 게시물 피드·쇼룸·탭 구성 재편
• 네 앱의 401 토큰 갱신 처리 개선(동시 요청이 refresh 하나를 공유)과 운영자 콘솔·파트너센터의 인증 쿠키 경로 고정
• 정산·배송 정책 등 서버 API가 아직 없는 화면의 UI와 개발 환경 전용 목업 구현
• 소비자 앱 빌드 설정 정비(스플래시 config plugin, Pretendard 폰트, 소셜 로그인 URL 스킴, TestFlight 배포 설정)

화면

원본 크기로 보기 (새 탭)

원본 크기로 보기 (새 탭)

원본 크기로 보기 (새 탭)

원본 크기로 보기 (새 탭)

핵심 기능

계약 관리

브랜드가 계약을 작성해 검토를 요청하면 운영자가 검토하고, 브랜드와 인플루언서가 서명하면 체결 문서가 만들어집니다. 양측은 서명 진행 상황과 체결 문서를 확인합니다.

공구 관리

체결된 계약으로 생성된 공구의 준비 조건(물량 확보·게시물 등록·운영자 승인)과 진행 상태를 브랜드·인플루언서·운영자가 각자 화면에서 확인하고 처리합니다.

연결·소통 메시지

브랜드와 인플루언서가 스레드로 메시지와 첨부 파일을 주고받으며, 업로드 진행률과 읽음 상태를 표시합니다.

주문·반품 처리

브랜드가 주문을 상태별 탭으로 조회하고 발주서 다운로드, 송장 일괄 업로드, 취소 승인, 반품 검수를 처리합니다.

소비자 주문·결제

소비자가 체크아웃에서 PortOne으로 결제하고 주문 상세·배송 조회·반품/교환 신청을 진행합니다.

게시물 작성

인플루언서가 사진과 본문을 작성하며 미리보기를 확인하고, 게시 후 인사이트를 봅니다.

입점·변경 요청 심사

운영자가 브랜드·인플루언서 입점 신청과 정보 변경 요청을 승인하거나 반려합니다.

기술 스택

함께 쓴 라이브러리·도구

같은 기술을 쓴 다른 프로젝트Hello Vibe

구조

웹 콘솔 3종(React + Vite)과 소비자 앱(React Native + Expo)이 하나의 백엔드 REST API를 역할별 경로(/user, /seller, /creator, /admin)로 호출합니다. 서버 상태는 TanStack Query로 관리하고 Axios 인터셉터가 토큰 갱신을 처리하며, 첨부 파일은 S3 presigned URL로 직접 업로드합니다.

문제와 해결

1. 문제

   토큰 만료 시 동시에 나간 요청들이 각자 refresh를 호출해, 서버의 refresh 토큰 회전 때문에 첫 요청 외에는 모두 401로 실패함

   해결

   진행 중인 refresh promise 하나를 모든 요청이 공유하고, 요청당 한 번만 재시도하도록 변경

2. 문제

   경로 없이 저장된 인증 쿠키가 하위 경로에 남아 새 토큰을 가리면서 401이 반복됨

   해결

   인증 쿠키를 루트 경로에 저장하고 하위 경로의 사본을 지우도록 변경

3. 문제

   다른 출처의 첨부 파일이 다운로드되지 않고 새 탭으로 열려 작업 중이던 화면 상태가 사라짐

   해결

   Content-Disposition이 붙은 서명 URL을 매번 새로 받아 저장하고, 여러 파일은 간격을 두고 순서대로 저장

4. 문제

   업로드된 사진을 다시 자를 때 CORS 때문에 canvas가 원본 이미지를 읽지 못함

   해결

   허용된 호스트와 https만 받고 크기 상한을 둔 같은 출처 이미지 프록시를 Vercel Functions로 추가

5. 문제

   소비자 앱에서 iOS 글자가 Android보다 작게 보임

   해결

   Pretendard 정적 폰트를 번들에 넣고 굵기별로 폰트 패밀리를 매핑

결과

• LOOKIE 2026 START-UP DEMODAY 우수상 (고려대·서강대·연세대학교 AI중심대학 주최)

관련 수상LOOKIE 2026 START-UP DEMODAY 우수상고려대·서강대·연세대학교 AI중심대학2026.07

배운 점

• 프론트엔드와 백엔드 저장소를 나눠 협업한 첫 프로젝트였습니다.
• 커밋·PR·머지를 잘 모르는 상태에서 시작해, 작업 브랜치에서 커밋하고 PR로 올려 머지하는 흐름을 이 프로젝트에서 익혔습니다.