notion: bit.ly/409L44T

서비스 개발 단계

기획

• react native, redux, redux toolkit, styled components, modal을 더 능숙하게 익히하기 위해 상용 앱을 레퍼런스로 삼고 기능을 구현
  • 바텀탭 3개 이상 / redux toolkit 으로 상태 관리
  • 옵션 선택 , 구매 modal 구현
  • 캐러샐 구현
• 대표적 쇼핑몰 확인 (레퍼런스: 무신사, 에이블리)
• 추천 홈 (메인) / 찜 or 좋아요 / 마이페이지 / 장바구니 / 주문내역
  • 홈
    • 이벤트 배너는 캐러샐로 구현
    • 상품 리스트 중 하나를 누르면 상세 화면으로 이동
    • 각 상품별 찜하기 가능
    • 찜한 상품은 찜 탭에서 확인 가능
  • 찜: 찜 탭에서는 찜한 상품 목록 확인 가능
    • 찜한 상품을 삭제 가능
    • 모두 한번에 삭제 가능
  • 마이페이지:
    • 설정 아이콘 클릭시 Async Storage 초기화 (추후 개인 정보 수정으로 변경)
    • 주문 내역 개수, 찜 개수 확인 가능
    • 주문 내역 클릭시 주문한 내역 확인 가능 (구매 일시)
    • 최근에 본 상품: 최근에 본 상품 확인 가능
  • 장바구니:
    • 장바구니에 담은 제품들을 브랜드 별로 확인 가능
    • 전체 선택 가능 / 선택한 제품 선택 가능
    • 하단부 전체 선택한 제품 개수 및 총 가격 확인 가능
  • 주문 내역:
    • 장바구니에서 구매한 날짜/시간 확인 가능
    • 구매한 제품의 Detail Page 접근 가능

기술스택

• 프래임워크: react native

• 상태관리: redux toolkit

• 코드 형상관리: git

• 패키지: styled components

• 레퍼런스: 무신사, 에이블리, GaneSo

설계

• 데이터 설계

  • 상품: json 서버
    • Redux toolkit 상태 관리 라이브러리를 통해 관리

• 인터페이스 설계

  • 바텀 탭 3개
    • 홈 추천에는 상품들 플렛리스트: 상품들 이미지가 반복되어 보여지도록
    • 찜 or 좋아요 페이지에는 내가 찜해 놓은 리스트업, 최종 비용 계산 / 체크박스가 있고 삭제가 가능한 리스트업
      • 서버 데이터를 가공하는 것으로 구현
    • 마이 페이지에서는 여러 기능 구현 (주문 내역 확인, 최근에 본 상품)
    • 화면당 핵심기능 2~3개
    • • 장바구니

• UI 설계 (컴포넌트 설계)

  • 상세페이지 수량, 최종 금액 계산 컴포넌트, 상세 버튼 등

• 인터렉션 설계 (로직 설계)

3. 구현 및 개발 ->2월 코딩 작업 진행 (+리팩토링) → 3월 12일 마무리

4. 테스트 (고객의 입장에서)

목업 디자인

진행 사항

• 바텀 탭 3가지: 찜 / 홈 / 마이페이지
• 실질적 추가 페이지로는 Detail Page / 장바구니 / 구매 내역

홈

• 이벤트 내용: ScrollViewCarousel로 구현

• ClothList Item 별 확인 가능

• 마케팅적 요소: Sponsored

  • 제품 상위 노출 및 이벤트 노출

• ClothItem 컴포넌트에 찜 가능하도록 활용: 찜 페이지에서 확인 가능

• 제품 클릭시 해당 제품의 detail screen으로 연결

  Detail Page

  • 대표이미지 (썸네일): ScrollViewCarousel로 구현 (홈화면 이벤트 캐러셀과 동일 컴포넌트로 활용)
  • 브랜드, 카테고리, 제품 이름, 설명, 비용을 한 눈에 볼 수 있는 UI
    • price 는 천단위 ‘콤마’
  • 디테일 이미지는 길지 않게, ‘상품정보 펼쳐보기’ 클릭시 모든 정보 확인 가능하도록 구현
    • ImageBlock 컴포넌트를 활용하여 uri 이미지 사이즈를 모바일 최적화
  • 마케팅적 요소: 현재 상품을 보고있는 고객 수 (구현 예정)
  • 구매 버튼 클릭시 옵션 모달 / 구매 모달 연결
  • counter 컴포넌트
    • 개별 갯수 조절 및 가격 확인 가능
    • 총 선택 갯수 및 총 가격 확인 가능
  • 옵션 모달과 구매 모달, 그리고 장바구니 간의 알고리즘 작업
    • 사이즈와 컬러가 모두 중복되는 상품 관리
    • 재고 관리 (count)
      • M 사이즈 재고 확인 코드 + 재고 없을시 클릭 불가
      • L 사이즈 재고 2개 ⇒ 구매가 2개 초과 될 경우 장바구니에서 구매 불가 하도록 설정
    • 장바구니 + 구매한 동일 제품의 재고가 없을 시, 옵션 모달에서 장바구니 담기 불가

찜

• 찜 상품 목록 확인 가능
• 찜 하트 모양을 눌러 삭제 가능
• 전체 삭제 클릭하여 한번에 모두 삭제 가능 (확인 Alert)

마이페이지

• 개인 정보 기입 및 수정 (구현 예정)
• 설정 버튼 클릭시 async storage 초기화 (현재)
• 주문 내역 및 찜 갯수 한눈에 확인 가능
• 주문 내역 클릭시 주문한 내역 확인 가능
  • 장바구니에서 구매시, 해당 시간/날짜 추가
• 찜 관리 클릭하여 찜 페이지 이동
• 최근에 본 상품
  • RecentProduct 상태 확인
  • 역순으로 데이터 배열 저장 후 랜더링
  • 동일 상품 제거 후 랜더링

장바구니

• BasketProduct 상태 확인
• 장바구니 담은 제품들을 브랜드 별로 확인 가능
• 전체 선택 가능 / 선택한 제품 선택 삭제 가능
• 하단 전체 선택 갯수 및 총 가격 확인 가능
• 주문시 OrderProduct 데이터 전달

주문 내역

• OrderProduct 상태 확인
• 장바구니에서 구매한 날짜/시간 확인 가능
• 구매한 제품의 DetailPage 접근 가능

특이사항

• 작업시 github 업로드
• 데이터는 인터넷 쇼핑몰 레퍼런스를 활용
• 상품 아이템은 10개 / 브랜드는 모두 다르게 진행
• 상태 관리 redux toolkit, 로컬 데이터베이스 저장소 Async Storage
• 로그인 시스템 차후 구현
• 로그인 시스템 구현 이후 개인정보 기입 및 수정 구현