제대로 기록하는 내 친구를 위한 현명한 소비, Amica! 개발 레포 ✍🏻
| PM/DESIGN | FE | FE | FE | BE | AI |
|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
| 최아리 | 오소현 | 김경재 | 허윤아 | 이동헌 | 박인성 |
| @ChoiARi | @osohyun0224 | @PortalCube | @YoonA | @Dong Heon Lee | @InSung Bahk |
| Stack | Version | Why |
|---|---|---|
| React.js | 18.2.0 |
CSR로 구현하여 사용자에게 빠르게 반응하는 인터페이스를 제공하기 위함. 특히 상품 추천 알고리즘과 같은 동적인 기능 구현에 적합하다고 생각해 도입 |
| Redux | 8.1.1 |
프로젝트의 상태 변화를 예측 가능하고 관리하기 위해 도입 |
| @reduxjs/toolkit | 1.9.5 |
Redux를 사용하면서 생기는 boilerplate 코드를 줄이고, Redux 코드 작성에 필요한 도구와 헬퍼를 갖추기 위함. 또한 불변성을 유지하면서 상태 업데이트를 간소화하고, 비동기 작업을 쉽게 관리하기 위해 도입 |
| Styled-Components | 5.3.9 |
스타일 작성의 생산성 향상을 위하여 CSS-in-JS 도입 |
| @bootpay/client-js | 4.3.1 |
웹앱에서 결제 기능을 구현하기 위해 도입 |
| immer user-immer |
10.0.2 0.9.0 |
불변성을 유지하면서 객체나 배열을 업데이트하기 쉽게 해주기 위해서 도입 |
| axios | 1.4.0 |
API 통신에 사용하기 위해 도입 |
| react-router-dom | 6.14.2 |
다른 페이지 이동 기능을 구현하기 위해 도입 |
| dayjs | 1.11.9 |
Date 객체를 보다 편하게 다루기 위해서 도입 |
| react-daum-postcode | 3.1.3 |
사용자가 물품을 주문할 때, 한국 주소 등록을 위해서 도입 |
| react-indiana-drag-scroll | 3.0.3-alpha |
스크롤 영역을 드래그하여 움직일 수 있도록 하기 위해서 도입 |
| react-paginate | 8.2.0 |
페이지네이션 (페이징) 기능 구현을 위해 도입 |
| simplebar-react | 3.2.4 |
사용자 지정 스크롤 바 기능 구현을 위해 도입 |
Amica는 반려동물을 기르는 사람들을 대상으로 제공하는 이커머스 웹앱 서비스입니다.
- 로그인 및 회원가입
- 웹사이트는 일반 유저(User)와 공동구매를 관리하는 관리자(admin)의 2가지 계정 유형이 존재합니다.
- MyPet 페이지
- 사용자는 자신의 펫들의 대한 세부 정보를 등록 할 수 있습니다.
- 개별적으로 펫들의 대한 대표적인 해시태그를 선택해 해당 펫과 관련된 제품을 AI 알고리즘을 기반으로 추천해줍니다.
- Main 페이지
- 웹 서비스 메인 배너와 카테고리 별로 구매하고 싶은 제품들을 조회할 수 있습니다.
- Mypet에서 등록한 펫들을 각각 설정하면 해당 펫과 AI 알고리즘을 기반으로 추천해준 관련된 제품을
구매 마감 임박 / 최근 구매 순 / 인기 순으로 조회할 수 있습니다.
- 상품 세부 정보 페이지
- 상품 각각의 세부 정보를 조회 할 수 있습니다.
- 주문 및 결제 하기
- 상품을 주문하고, 결제할 수 있습니다.
- 가계부 페이지
- 월 단위로 사용자 개인의 소비 내역을 달력으로 한 눈에 조회할 수 있습니다.
- 소비한 카테고리 영역을 조회해 어느 카테고리에 많은 소비를 했는지 그래프로 확인이 가능합니다.
- 가장 많이 소비한 날의 기록을 조회 할 수 있습니다.
- 검색 페이지
- 유저는 자신이 궁금한 단어에 대해 검색 할 수 있습니다.
- 검색한 단어와 관련한 상품들의 리스트가 조회되고,
카테고리 / 최신 / 인기 / 높은 가격 / 낮은 가격 / 마감 임박 순으로 필터링 하여 조회 가능합니다.
- User 마이페이지
- 유저는 마이페이지에서 사용자 이름 / 비밀번호 / 주문한 내역을 조회 할 수 있습니다.
- 관리자 공동구매 관련 페이지
- admin은 공동구매 페이지를 직접 생성하고 수정 및 삭제가 가능합니다.
| Tags | Explanation |
|---|---|
| Feat | 새로운 기능 추가 |
| Fix | 버그 수정 |
| !BREAKING CHANGE | 커다란 API 변경의 경우 |
| !HOTFIX | 급한 치명적 버그 수정 |
| Build | 빌드 관련 파일 수정 |
| Design | CSS를 포함 UI 디자인 변경 |
| Docs | 문서 수정 |
| Style | 코드 포맷팅, 세미콜론 누락, 코드 변경 X |
| Refactor | 코드 리팩토링 |
| Comment | 필요한 주석 추가 및 변경 |
| Test | 테스트 코드 수정 |
| Rename | 파일, 폴더명 이름 수정 |
| Remove | 파일, 폴더 삭제 |
| Chore | 빌드, 패키지 수정 |