미니프로젝트 회고 - 대출 사이트 만들기 대작전

hyocho·2023년 2월 28일

미니프로젝트 패스트캠퍼스

회고

목록 보기

5/9

백엔드와 처음 협업해보는 미니 프로젝트 이지만 대작전임. 아무튼 대작전임🚀
금융 상품(대출) 쇼핑몰 만들기 !

✨과제 기간 : 2023. 02. 08 ~ 2023. 02. 26
✨기술 스택 : vite, axios, typescript, react, react-router, redux, tailwid, daisyui

🧩역할 분담

이번 프로젝트는 백엔드 4명, 프론트엔드 4명이 협업하는 프로젝트였는데, 그 중 프론트엔드 역할 분담은 아래와 같이 나누었다. 여태까지 로그인, 회원가입 구현을 해본 적이 없어서 꼭 해보고 싶었는데 맡게 되어서 좋았다.

팀원1 :: 팀장
- 마이 페이지
팀원2
- 관심 상품 / 장바구니 페이지
팀원3
- 메인 페이지
나
- 로그인 / 회원가입
- 상품 상세 페이지

🤝협업 툴

gather town : 비대면 회의는 개더타운에서 진행
notion : 백엔드와 함께 사용하는 노션 페이지에 일정, 회의록을 공유했다.
피그마, api명세서 등 백엔드에서 필요한 부분들도 언제든지 볼 수 있도록 공유해 놓았다.

💡기획

🎨와이어프레임 : Figma 사용

구현할 기능을 나누고 각자가 피그마로 먼저 디자인 해보기로 했다. 늘 써보고 싶었던 마음만 가지고 실천은 못하고 있었는데, 실제로 사용해보니 생각보다 훨씬 재밌었다.

📌앱 이름 결정

프로젝트를 처음 시작할 때 가장 어려운 것은 조 이름 정하기, 프로젝트 이름 정하기가 아닐까싶다. 앱 이름을 생각해봤는데 무려 내가 제안한 미왕론이 백엔드/프론트엔드 만장일치로 선택되는 쾌거를 이뤘다.. (아마 앱에서 사용하는 캐릭터 이름을 미왕이로 민 것이 큰 힘이 되었지 않나 싶다😁) ~~제법 무서운 대부업체 같지만 그런 점이 마음에 든달까..~~

🧾api 명세서 요청

여태까지는 강사님이 만들어주신 명세서만 사용했는데 이제는 백엔드에게 이렇게 해주세요! 하고 요청해야했다. 백엔드에서 준 자료를 바탕으로 우리가 어떤 값을 필요로 하는지 정리했다.

💻 구현

이번 과제에서 요구하는 필수 조건을 충족시키면서 만들어야 했다.

로그인/회원가입은 백엔드와의 연동을 통해, JWT 방식으로 구현합니다.
사용자 별 장바구니, 금융 상품 데이터 등은 모두 백엔드와의 연동을 통해서 구현합니다.
2-1. 사용자 별 장바구니, 금융 상품 데이터는 redux 를 통해서 관리합니다.
장바구니, 검색 버튼 등을 통한 화면 전환은 react-router-dom 을 통해서 구현합니다.
검색 기능에서의 필터링은 모두 백엔드와의 연동을 통해서 구현하고, 데이터를 가져온 이후의 정렬은 프론트엔드에서 진행합니다.

git hub 의 이슈 작성으로 현재 내가 어떤 작업을 하고 있는지 팀원들 간 소통이 가능했다.

PR을 올릴 때에는 양식에 맞추어 작성했고, pull request template, issue template도 미리 만들어두어 내용도 통일되게 작성하려고 했다.

마일스톤 기능은 처음 써봤는데, 어느 기능을 언제까지 해야한다는 것이 확실히 보여서 일정 관리에 도움이 되었다.

💙 결과물

파일 구조

📦src
 ┣ 📂api
 ┃ ┣ 📂core
 ┃ ┃ ┗ 📜api.ts
 ┃ ┗ 📜axios.ts
 ┣ 📂app
 ┃ ┣ 📜hooks.ts
 ┃ ┗ 📜store.ts
 ┣ 📂assets
 ┃ ┣ 📂loading
 ┃ ┃ ┣ 📜loading-bg.jpg
 ┃ ┃ ┣ 📜loading-bg.png
 ┃ ┃ ┣ 📜loading1.svg
 ┃ ┃ ┣ 📜loading2.svg
 ┃ ┃ ┣ 📜loading3.svg
 ┃ ┃ ┗ 📜loading4.svg
 ┃ ┣ 📜008.png
 ┃ ┣ 📜index.css
 ┃ ┣ 📜meewang3.png
 ┃ ┣ 📜paging.css
 ┃ ┣ 📜react.svg
 ┃ ┗ 📜Vector.svg
 ┣ 📂components
 ┃ ┣ 📂CartNLikePage
 ┃ ┃ ┣ 📜CarList.tsx
 ┃ ┃ ┗ 📜CartItem.tsx
 ┃ ┣ 📂MainPage
 ┃ ┃ ┣ 📂ToggleMenu
 ┃ ┃ ┃ ┣ 📜Agency.tsx
 ┃ ┃ ┃ ┣ 📜Location.tsx
 ┃ ┃ ┃ ┣ 📜Target.tsx
 ┃ ┃ ┃ ┣ 📜ToggleBody.tsx
 ┃ ┃ ┃ ┣ 📜ToggleHeader.tsx
 ┃ ┃ ┃ ┗ 📜Using.tsx
 ┃ ┃ ┣ 📜GoodsList.tsx
 ┃ ┃ ┣ 📜ListBox.tsx
 ┃ ┃ ┗ 📜RecommendList.tsx
 ┃ ┣ 📂MyPage
 ┃ ┃ ┣ 📜LikeBox.tsx
 ┃ ┃ ┗ 📜LoanBox.tsx
 ┃ ┣ 📂ProductDetail
 ┃ ┃ ┣ 📜Etc.tsx
 ┃ ┃ ┣ 📜Loan.tsx
 ┃ ┃ ┗ 📜Target.tsx
 ┃ ┣ 📂UserInfoPage
 ┃ ┃ ┣ 📜UserDetail.tsx
 ┃ ┃ ┗ 📜UserInfo.tsx
 ┃ ┣ 📂UserLoan
 ┃ ┃ ┣ 📜AccountDetail.tsx
 ┃ ┃ ┗ 📜AccountHistory.tsx
 ┃ ┣ 📜Header.tsx
 ┃ ┣ 📜InfoSelect.tsx
 ┃ ┗ 📜MenuBar.tsx
 ┣ 📂features
 ┃ ┣ 📜authSlice.ts
 ┃ ┗ 📜cartSlice.ts
 ┣ 📂hooks
 ┃ ┣ 📜useAddCart.ts
 ┃ ┗ 📜useUserInfo.ts
 ┣ 📂pages
 ┃ ┣ 📂allProduct
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂CartNLikesPage
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂CategoryPage
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂LoadingPage
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂MainPage
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂MyPage
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂NotFound
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂ProductDetail
 ┃ ┃ ┣ 📜const.ts
 ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┗ 📜interface.ts
 ┃ ┣ 📂SearchPage
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂SignInPage
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂SignUpPage
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂UserInfoPage
 ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┗ 📜PasswordCheck.tsx
 ┃ ┗ 📂UserLoanPage
 ┃ ┃ ┗ 📜index.tsx
 ┣ 📂slider
 ┃ ┣ 📜slick.tsx
 ┃ ┗ 📜SlickItem.tsx
 ┣ 📂utils
 ┃ ┣ 📜cookieFn.ts
 ┃ ┣ 📜infoData.ts
 ┃ ┗ 📜toasstify.ts
 ┣ 📜App.tsx
 ┣ 📜index.css
 ┗ 📜main.tsx