https://github.com/osohyun0224/amica-frontend
2023 멋쟁이사자처럼 중앙해커톤 제대로 기록하는 내 친구를 위한 현명한 소비, Amica! 프론트엔드 개발 레포
https://github.com/osohyun0224/amica-frontend
axios bootpay dayjs react-daum-postcode reactjs redux redux-toolkit
Last synced: 4 months ago
JSON representation
2023 멋쟁이사자처럼 중앙해커톤 제대로 기록하는 내 친구를 위한 현명한 소비, Amica! 프론트엔드 개발 레포
- Host: GitHub
- URL: https://github.com/osohyun0224/amica-frontend
- Owner: osohyun0224
- Created: 2023-07-28T08:30:32.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-08-21T10:46:49.000Z (almost 3 years ago)
- Last Synced: 2025-03-11T02:12:17.500Z (over 1 year ago)
- Topics: axios, bootpay, dayjs, react-daum-postcode, reactjs, redux, redux-toolkit
- Language: JavaScript
- Homepage: https://async-without-sync.vercel.app/
- Size: 70.5 MB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 🎉 2023 멋쟁이사자처럼 대학 11주년 해커톤 출품작 , Amica! 🦁
제대로 기록하는 내 친구를 위한 현명한 소비, Amica! 개발 레포 ✍🏻
## 🔥 동기없는 비동기처리 팀
| PM/DESIGN | FE | FE | FE | BE | AI |
| :---: | :---: | :---: | :---: | :---: | :---: |
| 
| 
| 
| 
| 
| 
| 최아리 | 오소현 | 김경재 | 허윤아 | 이동헌 | 박인성 |
|[@ChoiARi](https://github.com/Akdbkahdkaka) | [@osohyun0224](https://github.com/osohyun0224) | [@PortalCube](https://github.com/PortalCube) | [@YoonA](https://github.com/yoona1110) | [@Dong Heon Lee](https://github.com/Sirius506775) | [@InSung Bahk](https://github.com/insung3511) |
## 📚 Amica Development (23.07.17 - 08.18)
## 👨🏻💻 FrontEnd Tech Stacks
**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`| 사용자 지정 스크롤 바 기능 구현을 위해 도입
## 👨🏻💻 System Architecture
## 💡 Amica는 어떤 서비스 인가요?
### 💭 기획 의도
Amica는 반려동물을 기르는 사람들을 대상으로 제공하는 이커머스 웹앱 서비스입니다.
### 🖐🏻 메인 기능
### 📺 개발 화면
[vercel 링크로 웹사이트 확인하기](https://async-without-sync.vercel.app)
## 🐶 모든 기능 소개
> 1. 로그인 및 회원가입
- 웹사이트는 일반 유저(User)와 공동구매를 관리하는 관리자(admin)의 2가지 계정 유형이 존재합니다.
> 2. MyPet 페이지
- 사용자는 자신의 펫들의 대한 세부 정보를 등록 할 수 있습니다.
- 개별적으로 펫들의 대한 대표적인 해시태그를 선택해 해당 펫과 관련된 제품을 AI 알고리즘을 기반으로 추천해줍니다.
> 3. Main 페이지
- 웹 서비스 메인 배너와 **카테고리 별**로 구매하고 싶은 제품들을 조회할 수 있습니다.
- Mypet에서 등록한 펫들을 각각 설정하면 해당 펫과 AI 알고리즘을 기반으로 추천해준 관련된 제품을
**구매 마감 임박 / 최근 구매 순 / 인기 순으로** 조회할 수 있습니다.
> 4. 상품 세부 정보 페이지
- 상품 각각의 세부 정보를 조회 할 수 있습니다.
> 5. 주문 및 **결제 하기**
- 상품을 주문하고, 결제할 수 있습니다.
> 6. 가계부 페이지
- 월 단위로 사용자 개인의 소비 내역을 달력으로 한 눈에 조회할 수 있습니다.
- 소비한 카테고리 영역을 조회해 어느 카테고리에 많은 소비를 했는지 그래프로 확인이 가능합니다.
- 가장 많이 소비한 날의 기록을 조회 할 수 있습니다.
)
> 7. 검색 페이지
- 유저는 자신이 궁금한 단어에 대해 검색 할 수 있습니다.
- 검색한 단어와 관련한 상품들의 리스트가 조회되고,
카테고리 / 최신 / 인기 / 높은 가격 / 낮은 가격 / 마감 임박 순으로 필터링 하여 조회 가능합니다.
> 8. User 마이페이지
- 유저는 마이페이지에서 사용자 이름 / 비밀번호 / 주문한 내역을 조회 할 수 있습니다.
> 9. 관리자 공동구매 관련 페이지
- admin은 공동구매 페이지를 직접 생성하고 수정 및 삭제가 가능합니다.
## 🧾 Amica 개발 관련 문서 모음
- [Amica 최종 기능 명세서](https://www.notion.so/osohyun/2e9de48e1c9f4de5a17bcb3a9fef2bb6)
- [Backend API 명세서-1](https://documenter.getpostman.com/view/25536437/2s9Y5SUjhs)
- [Backend API 명세서-2](https://documenter.getpostman.com/view/25536437/2s9Y5SVQyW)
- [Backend API 명세서-3](https://documenter.getpostman.com/view/25536437/2s9Y5SVR3m)
- [AI Server API 명세서](https://documenter.getpostman.com/view/28690465/2s9Y5R3nHv)
- [개발자 전체 칸반보드](https://github.com/orgs/Likelion-MainHackaton-2team/projects/1)
## 💡 Developer Commit Convention
| Tags | Explanation |
| :--------------: | :-------------------------------------: |
| Feat | 새로운 기능 추가 |
| Fix | 버그 수정 |
| !BREAKING CHANGE | 커다란 API 변경의 경우 |
| !HOTFIX | 급한 치명적 버그 수정 |
| Build | 빌드 관련 파일 수정 |
| Design | CSS를 포함 UI 디자인 변경 |
| Docs | 문서 수정 |
| Style | 코드 포맷팅, 세미콜론 누락, 코드 변경 X |
| Refactor | 코드 리팩토링 |
| Comment | 필요한 주석 추가 및 변경 |
| Test | 테스트 코드 수정 |
| Rename | 파일, 폴더명 이름 수정 |
| Remove | 파일, 폴더 삭제 |
| Chore | 빌드, 패키지 수정 |