mini-project-fe

라이브러리

react-icons 아이콘 컴포넌트
react-loading 로딩 컴포넌트
axios
@tanstack/react-query
redux - 토큰관리
typescript
react-router-dom

작업 분배

페이지 및 기능

/ Home 페이지
- 로그인 페이지 이동 버튼
- 회원가입 페이지 이동 버튼
singup 회원가입 페이지
- 입력 폼: 이메일/ 패스워드/ 이름/나이/직업/거주지역/특기/취미
- 회원가입 약관
- 회원가입 확인 버튼 - "POST : api/auth/signup"
signin 로그인 페이지
- 입력폼: 이메일 / 패스워드
  - 로그인 버튼 - "POST : api/auth/signin"
- 회원가입 페이지 이동 버튼 (route /signup )
/main 메인 페이지(금융상품 목록) - "GET : api/products", "GET : api/products/recommends"
- 신청 가능 대출금 보여주기
- 대출 상품 목록 (무한스크롤)
- 추천 상품 목록 (무한스크롤 슬라이더)
/user 개인 정보 페이지 - "GET : api/user"
- 관심상품 리스트
- 장바구니 상품 리스트
- 신청한 대출상품 리스트
- 정보 수정 페이지 이동 버튼
- 회원 탈퇴
  - 회원 탈퇴 클릭시 컨펌모달창 띄움 : 예/아니오 - "DELETE : api/auth/signup"
user/edit 개인정보 수정 페이지 - "GET api/auth/user"
- 정보수정 form : 패스워드/이름/나이/직업/거주지/특기/취미/연봉
- 확인 버튼 - "PUT api/user"
user/myCart 장바구니 페이지 - "GET api/auth/user"
- 구매한 상품 (카드형식 구매하기 버튼O)
- 구매하기 버튼 - "POST api/products/financial/buy"
user/wishlist 관심상품 페이지 - "GET api/auth/user"
- 구매한 상품(카드형식 구매하기 버튼X)
- 장바구니로 추가하기 버튼 - - "PUT api/auth/user"
products/financial 금융상품페이지 -"GET api/products/financial"
- 검색입력 form
  - 검색어 제출 - "GET api/products/financial"
- 정렬 select 박스
- 검색 리스트
products/financial/:financialId 금융 상품 상세페이지 - "GET api/products/financial/:financialId"
- 상품 이미지
- 상품명
- 간단한 description
- 장바구니, 구매하기(신청하기), 관심상품(등록) 버튼
  - 구매하기 버튼시 모달창 띄움 : 신청하기 / 취소하기 - "POST api/products/financial/buy"

+@ (추가?)

products/card 카드 관련 페이지
- 검색 input
- 정렬 select 박스
- 검색 리스트
products/card/:cardId 금융 상품 상세페이지
- 상품 이미지
- 상품명
- 간단한 description
- 장바구니, 구매하기(신청하기), 관심상품(등록) 버튼
  - 구매하기 버튼시 모달창 띄움 : 신청하기 / 취소하기
products/membership 멤버십 관련
- 검색 input
- 정렬 select 박스
- 검색 리스트
products/memebership/:memebershipId 멤버십 혜택 상세페이지
- 상품 이미지
- 상품명
- 간단한 description
- 장바구니, 구매하기(신청하기), 관심상품(등록) 버튼
  - 구매하기 버튼시 모달창 띄움 : 신청하기 / 취소하기

API 요청

API 요청 headers

모든 API 요청(request) headers 에 아래 정보가 꼭 포함돼야 합니다.

{
  "content-type": "application/json",
  "apikey": "aQF1bDcFEF12fg78fp2PqFmcE13"
}

회원가입

사용자 비밀번호는 암호화하여 저장합니다.
FE 는 약관에 동의할 경우 요청을 보냅니다.

curl BASE_URL/api/auth/signup
  \ -X 'POST'

요청 데이터 타입 및 예시:

interface RequestBody {
  email: string; // 사용자 아이디 (필수!)
  password: string; // 사용자 비밀번호, 8자 이상 (필수!)
  displayName: string; // 사용자 이름, 20자 이하 (필수!)
  age: number; // 나이 (필수!)
  job?: string; // 직업 (선택)
  location?: string; // 사는 곳 (선택)
  skills?: string[]; // 특기 (선택)
}

{
  "email": "[email protected]",
  "password": "********",
  "displayName": "HongGilDong",
  "age": 25,
  "job": "개발자",
  "location": "서울/경기",
  "skills": ["코딩/개발", "글쓰기", "작곡/작사", "그림/디자인", "기획/아이디어"]
}

응답 데이터 타입 및 예시:

interface ResponseValue {
  user: {
    // 회원가입한 사용자 정보
    userId: string; // 사용자 ID
    email: string; // 사용자 이메일
    displayName: string; // 사용자 표시 이름
    age: number; // 나이
    job: string | null; // 직업
    location: string | null; // 지역
    skills: string[]; // 특기
    wishlist: string[]; // 관심상품 목록
    myCart: string[]; // 장바구니
    status: {
      creditScore: number; // 신용점수
      assets: IAssets; // 자산관련
      loan: ILoan[]; // 대출관련
    };
  };
  accessToken: string; // 사용자 접근 토큰
}

{
  "user": {
    "userId": "Mq2KKHk8vlmr6Xkg58Fa",
    "email": "[email protected]",
    "password": "********",
    "displayName": "HongGilDong",
    "age": 25,
    "job": "개발자",
    "location": "서울/경기",
    "skills": [
      "코딩/개발",
      "글쓰기",
      "작곡/작사",
      "그림/디자인",
      "기획/아이디어"
    ],
    "wishlist": ["adbDasdfd1d91FD", "Fdf19dfkcfddfasd"], // 관심상품 목록
    "myCart": ["dfoD@12fdVdasdfad"], // 장바구니
    "status": {
      "creditScore": 999,
      "assets": {
        // 자산
      },
      "loan": {
        // 대출
      }
    }
  },
  "accessToken": "ey81cdciOiJIUzI1NiIs12CDfcCI6IkpXVCJ9.eyJpFID6IlM3FHepQ...(생략)"
}

로그인(signin)

발급된 accessToken은 24시간 후 만료됩니다.(만료 후 다시 로그인 필요)

curl https://BASE_API_URL/api/auth/signin
  \ -X 'POST'

요청 데이터 타입 및 예시:

interface RequestBody {
  email: string; // 사용자 아이디 (필수!)
  password: string; // 사용자 비밀번호 (필수!)
}

{
  "email": "[email protected]",
  "password": "********"
}

응답 데이터 타입 및 예시:

interface ResponseValue {
  user: {
    // 회원가입한 사용자 정보
    userId: string;
    email: string; // 사용자 아이디
    displayName: string; // 사용자 표시 이름
    age: number; // 나이
    job: string | null; // 직업
    location: string | null; // 지역
    skills: string[] | null; // 특기
    wishlist: string[]; // 관심상품 목록
    myCart: string[]; // 장바구니
    status: {
      creditScore: number; // 신용점수
      assets: IAssets; // 자산관련
      loan: ILoan; // 대출관련
    };
  };
  accessToken: string; // 사용자 접근 토큰
}
interface IAssets {
  //
}
interface ILoan {
  //
}

{
  "user": {
    "userId": "Mq2KKHk8vlmr6Xkg58Fa",
    "email": "[email protected]",
    "password": "********",
    "displayName": "HongGilDong",
    "age": 25,
    "job": "개발자",
    "location": "서울/경기",
    "wishlist": ["adbDasdfd1d91FD", "Fdf19dfkcfddfasd"], // 관심상품 목록
    "myCart": ["dfoD@12fdVdasdfad"], // 장바구니
    "skills": [
      "코딩/개발",
      "글쓰기",
      "작곡/작사",
      "그림/디자인",
      "기획/아이디어"
    ],
    "status": {
      "creditScore": 999,
      "assets": {
        // 자산
      },
      "loan": {
        // 대출
      }
    }
  },
  "accessToken": "ey81cdciOiJIUzI1NiIs12CDfcCI6IkpXVCJ9.eyJpFID6IlM3FHepQ...(생략)"
}

인증 확인

curl https://BASE_API_URL/api/auth/me
  \ -X 'POST'
  \ -H 'Authorization: Bearer <accessToken>'

요청 데이터 타입 및 예시:

응답 데이터 타입 및 예시:

interface ResponseValue {
  user: {
    // 회원가입한 사용자 정보
    userId: string;
    email: string; // 사용자 아이디
    displayName: string; // 사용자 표시 이름
    age: number; // 나이
    job: string | null; // 직업
    location: string | null; // 지역
    skills: string[] | null; // 특기
    status: {
      creditScore: number; // 신용점수
      assets: IAssets; // 자산관련
      loan: ILoan; // 대출관련
    };
  };
  accessToken: string; // 사용자 접근 토큰
}

{
  "user": {
    "userId": "Mq2KKHk8vlmr6Xkg58Fa",
    "email": "[email protected]",
    "password": "********",
    "displayName": "HongGilDong",
    "age": 25,
    "job": "개발자",
    "location": "서울/경기",
    "wishlist": ["adbDasdfd1d91FD", "Fdf19dfkcfddfasd"],
    "myCart": ["dfoD@12fdVdasdfad"],
    "skills": [
      "코딩/개발",
      "글쓰기",
      "작곡/작사",
      "그림/디자인",
      "기획/아이디어"
    ],
    "status": {
      "creditScore": 999,
      "assets": {
        // 자산
      },
      "loan": {
        // 대출
      }
    }
  },
  "accessToken": "ey81cdciOiJIUzI1NiIs12CDfcCI6IkpXVCJ9.eyJpFID6IlM3FHepQ...(생략)"
}

로그아웃 (signout)

curl https://BASE_API_URL/api/auth/signout
  \ -X 'POST'
  \ -H 'Authorization: Bearer <accessToken>'

요청 데이터 타입 및 예시:

응답 데이터 타입 및 예시:

type ResponseValue = true; // 로그아웃 처리 상태

사용자 정보 수정

curl https://BASE_API_URL/api/auth/user
  \ -X 'PUT'
  \ -H 'Authorization: Bearer <accessToken>'

요청 데이터 타입 및 예시:

interface RequestBody {
  displayName?: string; // 새로운 표시 이름
  oldPassword?: string; // 기존 비밀번호
  newPassword?: string; // 새로운 비밀번호
  age?: number; // 새로운 나이
  job?: string | null; // 새로운 직업
  location?: string | null; // 새로운 지역
  skills?: string[] | null; // 새로운 특기
}

{
  "oldPassword": "********",
  "newPassword": "**********"
}

응답 데이터 타입 및 예시:

interface ResponseValue {
  email: string; // 사용자 아이디
  displayName: string; // 사용자 표시 이름
  age?: number; // 새로운 나이
  job?: string | null; // 새로운 직업
  location?: string | null; // 새로운 지역
  skills?: string[] | null; // 새로운 특기
}

{
  "email": "[email protected]",
  "displayName": "HongGilDong",
  "age": 25,
  "job": "개발자",
  "location": "서울/경기",
  "skills": ["코딩/개발", "글쓰기", "작곡/작사", "그림/디자인", "기획/아이디어"]
}

상품

모든 금융 상품 조회

curl https://BASE_API_URL/api/financial
  \ -X 'GET'

요청 데이터 타입 및 예시:

응답 데이터 타입 및 예시:

type ResponseValue = Financial[]; // 판매중인 모든 제품의 목록

interface Financial {
  // 상품 정보
  financialId: string; // 금융상품 ID
  title: string; // 제품 이름
  price: number | number[] | null; // 제품 가격
  type: 'loan' | 'investment' | 'deposit' | 'guaranteed'; // 금융상품의 종류: 대출or투자or예금or보장성
  tags: string[]; // 제품 태그
  provider: string; // 서비스 제공자
  image: string | null; // 상품 제공자 로고 or 이미지(URL)
}

[
  {
    "financialId": "cFmeC7aY5KjZbBAdJE9y",
    "title": "경기도청 청년대출",
    "price": 1000000,
    "description": "청년 대출을 만나보세요 소득이 없거나 재직기간이 1년 미만인 직장인도 만 19-34세 무주택 청년이라면 대출신청이 가능합니다.",
    "type": "loan",
    "tags": ["청년", "경기도", "낮은 이자"],
    "provider": "경기도",
    "image": "https://image_url/cFmeC7aY5KjZbBAdJE9y.jpg"
  },
  {
    "financialId": "nbqtQvEivYwEXTDet7YM",
    "title": "주택청약종합저축",
    "price": null,
    "description": "주택마련의 시작! 매월 2만원 이상 50만원 이내에서 자유롭게 납입할 수 있으며, 납부한 총액이 1,500만원 도달 시 까지는 50만원 초과하여 자유적립 가능하며 국민주택, 민영주택 등 모든 주택 청약이 가능합니다",
    "type": "deposit",
    "tags": ["예금자보호", "세제혜택"],
    "provider": "하나은행",
    "image": "https://image_url/nbqtQvEivYwEXTDet7YM.jpg"
  }
]

단일 상품 상세 조회

curl https://BASE_API_URL/api/financial/:financialId
  \ -X 'GET'

요청 데이터 타입 및 예시:

응답 데이터 타입 및 예시:

interface ResponseValue {
  // 상품 정보
  financialId: string; // 금융상품 ID
  title: string; // 제품 이름
  price: number | null; // 제품 가격
  description: string; // 제품 설명
  type: 'loan' | 'investment' | 'deposit' | 'guaranteed'; // 금융상품의 종류: 대출or투자or예금or보장성
  tags: string[]; // 제품 태그
  provider: string; // 서비스 제공자
  image: string | null; // 상품 제공자 로고 또는 기타 이미지(URL)
}

{
  "financialId": "nbqtQvEivYwEXTDet7YM",
  "title": "주택청약종합저축",
  "price": null,
  "description": "주택마련의 시작! 매월 2만원 이상 50만원 이내에서 자유롭게 납입할 수 있으며, 납부한 총액이 1,500만원 도달 시 까지는 50만원 초과하여 자유적립 가능하며 국민주택, 민영주택 등 모든 주택 청약이 가능합니다",
  "type": "deposit",
  "tags": ["예금자보호", "세제혜택"],
  "provider": "하나은행",
  "image": "https://image_url/nbqtQvEivYwEXTDet7YM.jpg"
}

상품 검색

상품 이름과 태그, 타입을 동시에 검색할 수 있고, 'And'(검색한 이름과 태그 모두 포함된 상품) 조건으로 결과를 반환합니다.
상품 이름과 태그와 타입 모두 포함하지 않으면, 모든 상품의 결과를 반환합니다.
상품의 기본 정보만 반환합니다.

curl https://BASE_API_URL/api/financial/search
  \ -X 'POST'

요청 데이터 타입 및 예시:

interface RequestBody {
  searchText?: string; // 검색할 상품 이름
  searchTags?: string[]; // 검색할 상품 태그
  searchType?: 'loan' | 'investment' | 'deposit' | 'guaranteed'; // 검색할 상품의 유형
}

{
  "searchText": "대출",
  "searchTags": ["태그"]
}

응답 데이터 타입 및 예시:

type ResponseValue = Financial[]; // 관리하는 모든 제품의 목록

interface Financial {
  // 상품 정보
  financialId: string; // 금융상품 ID
  title: string; // 제품 이름
  price: number | null; // 제품 가격
  type: 'loan' | 'investment' | 'deposit' | 'guaranteed'; // 금융상품의 종류: 대출or투자or예금or보장성
  tags: string[]; // 제품 태그
  provider: string; // 서비스 제공자
  image: string | null; // 상품 제공자 로고 or 이미지(URL)
}

[
  {
    "financialId": "nbqtQvEivYwEXTDet7YM",
    "title": "주택청약종합저축",
    "price": null,
    "description": "주택마련의 시작! 매월 2만원 이상 50만원 이내에서 자유롭게 납입할 수 있으며, 납부한 총액이 1,500만원 도달 시 까지는 50만원 초과하여 자유적립 가능하며 국민주택, 민영주택 등 모든 주택 청약이 가능합니다",
    "type": "deposit",
    "tags": ["예금자보호", "세제혜택"],
    "provider": "하나은행",
    "image": "https://image_url/nbqtQvEivYwEXTDet7YM.jpg"
  }
]

대출 신청

대출 신청시 신청 가능 대출금 총합에서 차감됩니다.
신청 가능 대출금 총합보다 대출 금액이 크면 대출 신청이 처리되지 않습니다.(에러 반환)

curl https://BASE_API_URL/api/products/financial/:financialId
  \ -X 'POST'
  \ -H 'Authorization: Bearer <accessToken>'

요청 데이터 타입 및 예시:

interface RequestBody {
  financialId: string; // 대출 상품 ID (필수!)
  accountId: string; // 결제할 사용자 계좌 ID (필수!)
}

{
  "productId": "nbqtQvEivYwEXTDet7YM",
  "accountId": "Mq2KKHk8vlmr6Xkg58Fa"
}

응답 데이터 타입 및 예시:

type ResponseValue = true; // 거래 신청 처리 여부

제품 거래(구매) 취소

사용자 전용 API입니다.
'취소'시 대출 가능 금액이 올라갑니다.

curl https://BASE_API_URL/api/financial/cancel
  \ -X 'POST'
  \ -H 'Authorization: Bearer <accessToken>'

요청 데이터 타입 및 예시:

interface RequestBody {
  financialId: string; // 취소할 상품의 거래 내역 ID
  userId: string; // 취소하는 유저의 userId
}

{
  "financialId": "dMhfxyrAupQP18OYmywy",
  "userId": "Mq2KKHk8vlmr6Xkg58Fa"
}

응답 데이터 타입 및 예시:

type ResponseValue = true; // 거래 취소 처리 여부

Name		Name	Last commit message	Last commit date
Latest commit History 342 Commits
.github		.github
functions		functions
public		public
readMeImages		readMeImages
src		src
.firebaserc		.firebaserc
.gitignore		.gitignore
.prettierrc.ts		.prettierrc.ts
README.md		README.md
firebase.json		firebase.json
firestore.indexes.json		firestore.indexes.json
firestore.rules		firestore.rules
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.cjs		postcss.config.cjs
pull_request_template.md		pull_request_template.md
storage.rules		storage.rules
tailwind.config.cjs		tailwind.config.cjs
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

mini-project-fe

라이브러리

작업 분배

페이지 및 기능

+@ (추가?)

API 요청

API 요청 headers

회원가입

로그인(signin)

인증 확인

로그아웃 (signout)

사용자 정보 수정

상품

모든 금융 상품 조회

단일 상품 상세 조회

상품 검색

대출 신청

제품 거래(구매) 취소

About

Releases 1

Packages

Contributors 4

Languages

FastcampusMini/mini-project-fe

Folders and files

Latest commit

History

Repository files navigation

mini-project-fe

라이브러리

작업 분배

페이지 및 기능

+@ (추가?)

API 요청

API 요청 headers

회원가입

로그인(signin)

인증 확인

로그아웃 (signout)

사용자 정보 수정

상품

모든 금융 상품 조회

단일 상품 상세 조회

상품 검색

대출 신청

제품 거래(구매) 취소

About

Resources

Stars

Watchers

Forks

Releases 1

Packages 0

Contributors 4

Languages

Packages