본문 바로가기
프로젝트/ClassCard

클래스 카드 소개

by JayAlex07 2023. 2. 26.

클래스 카드 소개

 

프로젝트 기간 : 2022.11.23 ~ 2022.12.15

 

팀원 : 김나현 (팀장), 이제준, 김지연, 김지영, 임수경

 

맡은 역할 : 풀스택 개발, Readme 문서 정리

  • 댓글, 대댓글 비동기 구현
  • 카드 디테일 페이지 구현 (기능, UI)
  • 카드 비교 기능 구현
  • 맞춤 카드 추천 페이지 구현 (기능)

 

사용 도구 : Python (Django), JavaScript | HTML, CSS | Github | AWS

 

내용 : 사회 초년생을 위한 카드 혜택 정보를 제공하는 웹사이트 제작

  • 크롤링을 통해 시중에 나와있는 카드 정보 수집 (FEAT. 카드 고릴라)
  • 카드 정보, 카드 비교, 카드 추천, 그 외에도 카드 관련 커뮤니티 기능을 구현

 

코드 링크 : https://github.com/ClassCardMLP/ClassCard

 

GitHub - ClassCardMLP/ClassCard

Contribute to ClassCardMLP/ClassCard development by creating an account on GitHub.

github.com


 

DB 모델

  • 모델링 뿐만 아니라, 혜택들을 분석하여, 각 카테고리에 넣었다
    • 카테고리에 넣은 이유는, 너무 많은 혜택들을 유저 입장에서 선택하면 불편하기 때문이다

 

페이지

카드 페이지

  • 카드 정보를 볼 수 있는 페이지다
  • 카드 정보 뿐만 아니라, 댓글을 달아, 카드에 대한 후기도 볼 수 있다

 

카드사 페이지

  • 카드사 별로 카드를 찾을 수 있다
  • 메이저한 카드사 위주로 카드사를 넣었다

 

맞춤 카드 페이지

  • 나이 대, 신용/체크 카드, 그리고 원하는 혜택 별로 선택하면, 그에 맞는 카드들을 보여준다
  • 여기서 또 한번, 카드사 별로 나눠서 볼 수 있다

 

카드 비교 페이지

  • 먼저 카드 비교를 누르면, 카드 비교함이 뜬다
    • 이 비교함에, 카드들을 넣는다 (편의를 위해 모두 비동기 처리를 했다)
  • 카드를 최대 3개까지 카드 비교함에 넣을 수 있고, 카드 정보와, 핵심 혜택 별로 정보를 보며, 카드들을 비교할 수 있다

 

이벤트 페이지

  • 웹 서비스 내 이벤트를 보여주는 페이지다
  • 특별한 기능 없이, 수작업으로 이벤트를 넣었다

 

커뮤니티 페이지

  • 카드에 대한 더 섬세한 정보를 기록할 수 있는 페이지다
  • 이 페이지는, 글을 쓸 수 있는 검증된 사람들만 쓸 수 있다

 

고객 문의 페이지

  • 고객 문의를 직접 쓸 수 있거나, 자주 물어보는 질문들을 나열해서, 기록하였다

'프로젝트 > ClassCard' 카테고리의 다른 글

클래스 카드 - [UI설명] 카드 디테일 페이지  (0) 2023.02.26
클래스 카드 - 카드 비교  (0) 2023.02.26
클래스 카드 - Selenium  (0) 2023.02.26