HeartRing [1] 요구사항 분석 및 회의

대학교 동기친구와 쥬얼리 쇼핑몰 프로젝트를 설계 및 개발을 진행하게되었다. 스택 선정부터 요구사항 분석까지 진행하였고 노션에 정리해두었다.

Stack

• FrontEnd
  • React(Hooks)
  • Next.js
  • TypeScript
  • Emotion
  • API
    • SWR
    • Axios
  • Deploy
    • Vercel vs (AWS or GCP)
• BackEnd
  • strapi

React + Next.js는 나에게 익숙하지만
TypeScipt는 익숙치 않아 힘들지만 좋은경험이 될것같만 같다
이 기회에 제너릭과 타입 인터페이스등 객체지향 프로그래밍 공부를 더 해볼 기회라고 생각이되어 행복하다.

나도 친구놈도 프론트엔드개발만 진행해왔었기에 백엔드를 대체할수있는 strapi를 사용해보기로했다.

요구사항

• 상품 등록
  • 특정 권한 (Admin)을 가진 유저는 상품 등록이 가능해야 한다.
  • 상품 등록에는 Editor(CKEditor 등)를 붙인다.
  • 상품을 등록하면 바로 목록에 노출된다.
• 상품 목록 노출
  • 상품은 카테고리별 필터가 가능해야 한다.
    • 상품의 카테고리는 20가지 이상 구성한다.
    • 카테고리를 조합했을 때 조회가 가능해야 한다.
  • 상품은 25개씩 한번에 보여주며 페이지네이션 또는 가능하다면 무한 스크롤로 구현한다.
  • 상품은 검색이 가능해야합니다.
    • 검색했을 때, 검색 결과에 맞는 아이템만 보여줘야 한다.
    • 검색어에 맞는 아이템을 강조한다.

• 상품 상세 노출
• 상품별 댓글 노출
  • 댓글은 25개씩 한번에 보여주며 페이지네이션을 지원한다.
  • 댓글에는 대댓글이 가능하며, 대댓글은 최대 1번까지만 Depth를 지원한다.
  • 댓글에는 이미지 삽입이 가능해야 한다.
• 회원
  • 로그인
  • 로그 아웃
  • 회원가입
  • 회원탈퇴
  • 아이디 찾기
  • 비밀번호 찾기
  • 카카오, 구글, 메타 등 로그인
• 위시리스트
  • 상품 위시리스트가 존재하여 등록할 수 있어야 한다.
  • 위시리스트에 등록 가능한 갯수에 제한은 없다.
• 장바구니
  • 장바구니에 아이템을 25개까지 담을 수 있다.
  • 해당 계정과 장바구니는 연동되어야 한다.
• 결제
  • 주소 등을 입력받아 결제받는 페이지를 구현한다.
    • 주소 검색에는 주소 검색 API (다음)를 사용한다.
  • 지역별로 배송비 주문 로직을 추가한다
    • 일반 배송비는 2,500원
    • 도서산간지방 (제주, 울릉도)은 10,000원
    • 장바구니가 특정 금액 (50,000원)을 넘어서는 경우에는 무료 배송
  • 결제가 이루어지지 않을 경우에는 장바구니를 초기화하지 않는 다.
  • 결제 버튼을 눌렀을 때에는 결제에 포함된 데이터만 보여줄 수 있어야 한다.
• (공통) 네비게이션
  • 네비게이션에서는 페이지간 이동, 유저 정보 노출 등이 가능해야한다.
• 기획전
  • 쇼핑몰에서 자주 쓰이는 기획전 페이지를 구현한다.
  • 기획전은 최대 갯수가 존재하지 않으며, 공유하기가 가능해야 한다.
    (카카오톡 공유하기 / 페이스북 공유하기 / 네이버 공유하기 등)
    - 카카오는 API Key 발급이 어려운 경우라면 제외

기술 요구사항

• 모든 페이지는 공유하기가 가능
• 로그인은 유저가 브라우저를 종료해도 유지
• 모든 페이지는 반응형을 지원
• 모든 페이지는 접근성을 준수
• 모든 페이지는 검색이 가능 (SEO)
• 모든 Form은 유효성 검사가 되어야 함

챌린지

• AWS를 이용해서 배포해주세요 ^^
  • Azure 나 GCP를 써도 됩니다.
• 운영 모드 (유지보수 정책)를 고민해주세요.
  • Admin을 만들어보면 어떨까요? (=== 백오피스)
  • CS를 받을 창구를 마련해주세요.
  • GitHub 배포 전략을 잡아주세요.
  • GitHub Actions를 활용해 CI / CD를 구축해주세요
  • ESLint 등과 관련된 내용을 추가해주세요.
• 테스트 주도 개발로 짜주세요.
  • Jest를 이용해 테스트를 구축해 주세요.

회의

추상화와 디자인 패턴, 커밋 룰, 컨벤션을 정하고 UI를 결정했다. 먼저 간단한 Card와 메인 및 상세 페이지 등의 UI 구조를 잡아놓는 것으로 결정했다. 그 후 strapi로 백을 구축하고 데이터를 연결할 예정이다.