🤩 서비스 소개

• 핔은 패션 유튜버 MCN 어패럴파이러츠와 연계한 인플루언서 커머스 플랫폼입니다. MCN에 속한 패션 유튜버들이 직접 ‘핔’에 입점한 브랜드 제품을 선별해 리뷰하고, 판매까지 연동하는 형식입니다.
• 2020년 7월 기준 MAU 7만, 월 거래액 1억원을 달성했습니다.

👩‍👩‍👧‍👧 개발팀 구성

• FE 개발자 2명 (본인 포함)
• BE 개발자 1명

🛠 기술 스택

TypeScript ReactJS Next.js vercel SWR styled-components Yarn Berry ESlint prettier Storybook Sentry Google Analytics ant-design React Native Code Push

🪄 담당 업무

[1] 웹사이트 리뉴얼

1. 각종 페이지 구현 & 개선

   1. 상품 관련 기능 구현

      • 상품 카테고리 목록, 상품 랭킹, 랭킹 필터

        : 상품 랭킹 목록과 카테고리, 스타일 태그, 가격대로 목록을 필터링할 수 있는 기능을 추가했습니다.

      • 상품 상세

        : 상품 정보와 문의 목록, 연관 상품 목록, 상품과 관련된 리뷰 목록을 확인할 수 있는 상품 상세 페이지를 구현했습니다.

        • SWR의 useSWR()을 이용해 상품 문의 목록 Pagination 구현

   2. 문의 관련 기능 구현

      • 문의 작성, 문의 내역, 문의 상세

        : 문의 작성과 유저가 작성한 문의 내역을 확인할 수 있는 기능을 구현했습니다.

   3. 주문 관련 기능 구현

      • 주문 내역, 주문 상세

        : 주문 정보와 주문 상태(발송 대기, 배송 중, 배송 완료, ...)에 따라 액션(취소 요청, 구매 확정, 반품 요청, 교환 요청, ...) 버튼을 표시하는 기능을 추가했습니다.

      • 취소요청, 반품요청, 교환요청

        : 주문을 취소, 상품을 반품, 교환할 수 있는 기능을 추가했습니다.

   4. 포인트 관련 기능 구현

      • 포인트 내역

        : 포인트 총액과 적립, 사용 내역을 확인할 수 있는 기능을 추가했습니다.

        • SWR의 useSWRInfinite()를 이용해 오프셋 페이징 방식의 무한 스크롤 구현

      • 수익 내역, 수익 상세, 수익 출금 신청

        : 리뷰를 작성한 인플루언서가 판매 수익을 확인하고, 수익을 출금 신청할 수 있는 기능을 추가했습니다.

   5. 매칭 테스트 기능 구현

      : 유저의 나이,키,몸무게와 선호 스타일을 조사하는 기능을 추가했습니다.

   6. 리뷰 관련 기능 구현

      • 리뷰 목록

        : 상품 리뷰 목록과 목록을 리뷰 종류(글/영상), 스타일 태그, 상품 카테고리, 리뷰어 키 값으로 필터링할 수 있는 기능을 추가했습니다.

        • SWR의 useSWRInfinite()를 이용해 오프셋 페이징 방식의 무한 스크롤 구현

      • 댓글 작성, 댓글 목록

        : 댓글 작성과 리뷰에 대한 댓글 목록을 확인할 수 있는 기능을 추가했습니다.

        • SWR의 mutation 기능을 이용해 댓글 좋아요에 optimistic update 적용

   7. 인플루언서 채널 관련 기능 구현

      • 채널 정보 상세, 정보 수정

        : 인플루언서 관련 정보(프로필, 리뷰 목록) 확인과 채널 구독, 채널 정보를 수정할 수 있는 기능을 구현했습니다.

2. 공용 컴포넌트 구현

   • 디자인 시스템에 따라 공용 컴포넌트 구현
   • Storybook을 이용해 공용 컴포넌트의 UI 검증 프로세스 간소화

[2] 브랜드 어드민 사이트 기능 개발

1. 상품 관리 기능 구현

   : 정렬, 필터링 가능한 상품 조회 테이블, 상품 생성/수정/삭제 기능을 구현했습니다.

   • ant-design 이용해 UI 구현

2. 로그인 페이지 구현

[3] 모바일앱 개발, 출시

1. 각종 스크린 구현 & 개선
   • react-native-fast-image를 사용해 이미지 로딩 속도를 개선
   • 작업한 스크린은 웹 리뉴얼 작업 목록과 동일
2. 구글 애널리틱스를 적용해 유저 행동 데이터 수집
3. CodePush를 이용해 HTML, CSS, JS, aseet 코드 변경점을 앱 강제 업데이트 없이 반영할 수 있도록 설정
4. 앱 심사 등록