소상공인 금융상품

소상공인의 거주지, 설정 금액에 맞게 맞춤형 금융상품을 보고 신청할 수 있는 서비스

(이 사이트는 연습을 위한 미니 프로젝트로, 실제 기능은 하지 않습니다)

📝 TOC

• 프로젝트 소개
  • 프로젝트 제안 배경 & 솔루션
  • 타겟층
• 배포사이트
• 개발 기간
• 팀원소개
• 주요 기능과 로직
  • 사용자
  • 제품
  • 기타
• 개발스택
• 폴더 트리
  

💡 프로젝트 소개

프로젝트 제안 배경

소상공인 정책자금 데이터를 바탕으로, 맞춤형 상품을 제공하여 금융상품을 신청할 수 있도록 만들어보자.

타겟층

금융상품 신청이 필요한 소상공인

🌐 배포 사이트

소상공인 금융상품 사이트 바로가기: 소상공인 금융상품
(이 사이트는 모바일 환경을 기준으로 제작되었습니다)

📅 개발 기간

2022.08.23 - 2022.09.04 (총 13일)

🧑‍🤝‍🧑 팀원소개

김신협	박지훈	백송이	천희영
😁@kyle-shk	😎@hoona1011	😆@SongE12	😃@heeyoung-c

🪄 주요 기능과 로직

1️⃣ 사용자

• 회원가입: 이름, 이메일, 비밀번호를 받아 사용자를 등록하는 기능

• 로그인/로그아웃: 이메일과, 비밀번호를 입력해 사용자 정보를 불러오는 기능

• 자동 로그인: JWT를 사용하여, 토큰이 유효할 경우 자동 로그인하는 기능

2️⃣ 제품

• 금융상품 정보를 검색/리스트 하는 기능 (이름순/한도순 필터링)

• (회원 별) 특정 금융상품을 관심 상품으로 등록/해제하는 기능

• (회원 별) 관심 상품으로 등록해놓은 금융상품만 모아서 보는 기능
  

• (회원 별) 특정 금융상품을 장바구니에 담는 기능

• (회원 별) 장바구니에 담긴 금융상품을 신청하는 기능
  

3️⃣ 기타

• 장바구니, 검색, 메뉴 버튼 등을 통해 화면을 전환하는 기능

👨‍💻개발 스택

• yarn
• React
• React-router
• React-icons
• Redux-toolkit
• Redux-logger
• styled-components
• bootstrap
• prettier
• eslint
• netlify
• vite
• RTK Query
• Material-Ui

폴더 트리

📦src
 ┣ 📂api
 ┃ ┣ 📜authApi.js
 ┃ ┣ 📜customApi.js
 ┃ ┣ 📜productsApi.js
 ┃ ┗ 📜searchApi.js
 ┣ 📂assets
 ┃ ┗ 📂fonts
 ┃ ┃ ┣ 📜NotoSansKR-Black.otf
 ┃ ┃ ┣ 📜NotoSansKR-Bold.otf
 ┃ ┃ ┣ 📜NotoSansKR-Light.otf
 ┃ ┃ ┣ 📜NotoSansKR-Medium.otf
 ┃ ┃ ┣ 📜NotoSansKR-Regular.otf
 ┃ ┃ ┗ 📜NotoSansKR-Thin.otf
 ┣ 📂components
 ┃ ┣ 📂layout
 ┃ ┃ ┣ 📂TheFooter
 ┃ ┃ ┃ ┣ 📜index.jsx
 ┃ ┃ ┃ ┗ 📜style.js
 ┃ ┃ ┗ 📂TheHeader
 ┃ ┃ ┃ ┣ 📜index.jsx
 ┃ ┃ ┃ ┗ 📜style.js
 ┃ ┣ 📂Modal
 ┃ ┃ ┣ 📜index.jsx
 ┃ ┃ ┗ 📜style.js
 ┃ ┗ 📂ui
 ┃ ┃ ┣ 📂Card
 ┃ ┃ ┃ ┣ 📜index.jsx
 ┃ ┃ ┃ ┗ 📜style.js
 ┃ ┃ ┣ 📂EmptyProducts
 ┃ ┃ ┃ ┣ 📜index.jsx
 ┃ ┃ ┃ ┗ 📜style.js
 ┃ ┃ ┣ 📂Input
 ┃ ┃ ┃ ┣ 📜index.jsx
 ┃ ┃ ┃ ┗ 📜style.js
 ┃ ┃ ┣ 📂Loading
 ┃ ┃ ┃ ┣ 📜index.jsx
 ┃ ┃ ┃ ┗ 📜style.js
 ┃ ┃ ┣ 📂SearchBar
 ┃ ┃ ┃ ┣ 📜index.jsx
 ┃ ┃ ┃ ┗ 📜style.js
 ┃ ┃ ┣ 📂TheButton
 ┃ ┃ ┃ ┣ 📜index.jsx
 ┃ ┃ ┃ ┗ 📜style.js
 ┃ ┃ ┗ 📂UserCard
 ┃ ┃ ┃ ┣ 📜index.jsx
 ┃ ┃ ┃ ┗ 📜style.js
 ┣ 📂pages
 ┃ ┣ 📂AllProducts
 ┃ ┃ ┣ 📜index.jsx
 ┃ ┃ ┣ 📜sort.js
 ┃ ┃ ┗ 📜style.js
 ┃ ┣ 📂Cart
 ┃ ┃ ┣ 📜index.jsx
 ┃ ┃ ┗ 📜style.js
 ┃ ┣ 📂CustomProducts
 ┃ ┃ ┣ 📜index.jsx
 ┃ ┃ ┗ 📜style.js
 ┃ ┣ 📂Entry
 ┃ ┃ ┣ 📜Index.jsx
 ┃ ┃ ┗ 📜style.js
 ┃ ┣ 📂Layout
 ┃ ┃ ┣ 📜index.jsx
 ┃ ┃ ┗ 📜style.js
 ┃ ┣ 📂MyPage
 ┃ ┃ ┣ 📜index.jsx
 ┃ ┃ ┗ 📜style.js
 ┃ ┣ 📂SignIn
 ┃ ┃ ┣ 📜index.jsx
 ┃ ┃ ┗ 📜style.js
 ┃ ┣ 📂SignUp
 ┃ ┃ ┣ 📜index.jsx
 ┃ ┃ ┗ 📜style.js
 ┃ ┗ 📂WishProducts
 ┃ ┃ ┣ 📜index.jsx
 ┃ ┃ ┗ 📜style.js
 ┣ 📂routes
 ┃ ┣ 📂PrivateRoute
 ┃ ┃ ┗ 📜index.jsx
 ┃ ┗ 📜AppRouter.jsx
 ┣ 📂store
 ┃ ┣ 📂slices
 ┃ ┃ ┣ 📜keywordSlice.js
 ┃ ┃ ┗ 📜searchSlice.js
 ┃ ┗ 📜index.js
 ┣ 📂styles
 ┃ ┣ 📜globalStyle.js
 ┃ ┗ 📜theme.js
 ┣ 📂utils
 ┃ ┗ 📜validator.js
 ┣ 📜App.jsx
 ┗ 📜main.jsx