본문 바로가기

프로젝트/ClassCard4

클래스 카드 - [UI설명] 카드 디테일 페이지 클래스 카드 - 카드 디테일 페이지 카드 디테일 페이지는 카드 데이터부터, 시각화까지 모든 것을 구현했다 카드 데이터 크롤링을 통해 카드 데이터를 가지고 왔다 카드 이름 / 카드사 혜택 등 페이지 구현 제일 중요하게 생각한 것이, 어떻게 하면 유저들에게 간단한 UI를 제공하고 싶었다 그래서 정말 중요한 카드 내용들은 페이지에서 보여주었다 그리고 주요 혜택 같이, 내용이 많은 것들은, 모달을 이용했다 주요 혜택의 제목 그리고 간단한 설명을 카드와 카드 호버 기능을 통해 구현을 했다 해당 카드를 누르면, 모달창이 뜨고, 주요 혜택에 대한 자세한 정보를 볼 수 있다 위와 같이 페이지를 만들어, 유저들이 한 눈에 카드에 대한 내용을 볼 수 있다 만약 주요 혜택이 궁금하면, 카드를 클릭하면 된다 주로 주요 혜택을.. 2023. 2. 26.
클래스 카드 - 카드 비교 클래스 카드 - 카드 비교 카드 비교 모델 (Model) class CompareCard(models.Model): card = models.ForeignKey(Card,on_delete=models.CASCADE) user = models.ForeignKey(get_user_model(),on_delete=models.CASCADE) 로그인을 해야 카드 비교 기능을 사용할 수 있다 그래서 유저 정보를 가지고 오고, card 정보를 통해서 카드를 카드 비교함에 넣는 것이다 여기서 user마다 카드는 최대 3개까지 카드 비교함에 넣을 수 있다 카드 비교함에 카드 넣기 (요청) # 카드를 비교하기 위해서 비교하기 바구니에 넣고 / 비교하기 페이지 path('bookmark//', views.b.. 2023. 2. 26.
클래스 카드 - Selenium 클래스 카드 - Selenium ✍️ Selenium을 통한 크롤링 Selenium을 이용하여 크롤링을 진행했다 카드 디테일 페이지를 하나씩 돌면서, 안에 있는 상세 정보들을 CSS_SELECTOR를 통해 가지고 왔다 2023. 2. 26.
클래스 카드 소개 클래스 카드 소개 프로젝트 기간 : 2022.11.23 ~ 2022.12.15 팀원 : 김나현 (팀장), 이제준, 김지연, 김지영, 임수경 맡은 역할 : 풀스택 개발, Readme 문서 정리 댓글, 대댓글 비동기 구현 카드 디테일 페이지 구현 (기능, UI) 카드 비교 기능 구현 맞춤 카드 추천 페이지 구현 (기능) 사용 도구 : Python (Django), JavaScript | HTML, CSS | Github | AWS 내용 : 사회 초년생을 위한 카드 혜택 정보를 제공하는 웹사이트 제작 크롤링을 통해 시중에 나와있는 카드 정보 수집 (FEAT. 카드 고릴라) 카드 정보, 카드 비교, 카드 추천, 그 외에도 카드 관련 커뮤니티 기능을 구현 코드 링크 : https://github.com/Class.. 2023. 2. 26.

티스토리툴바