Skip to content

Adult96/12jo_ToyProject

Repository files navigation

📚 Book Mark Saver

향해99 12기 12조 토이프로젝트 23.01.09 - 23.01.12

팀원

팀원 스택 팀원구분 깃허브 블로그
김선중 프론트엔드 팀장 Seogun95 서근개발노트
박성인 프론트엔드 팀원 Adult96 Adult퐉
나도관 백엔드 팀원 DOGWANNA 개발 꿈나무의 성장일기
신경연 백엔드 팀원 bestfarmer94 bestfarmer

프로젝트 소개

Book Mark Saver에 로그인을 하고 본인만의 프라이빗한 웹사이트를 저장해보세요!

카테고리별 / 태그별로 저장도 가능하고 필요하다면 삭제까지!

깔끔한 UI를 통해 저장하려는 웹사이트의 이미지와 타이틀을 확인하실 수 있습니다.

프로젝트 시연 영상

Book Mark Saver Youtube

기술 스택

사용한 라이브러리

toastr, tagify, AOS

API Table

Index Method URL Desc Request Response
1 POST /login 로그인/회원가입 id, password, passwordCheck /token
2 POST /token 토큰 및 쿠키생성 id, password token /main
3 GET /main 메인화면(쿠키O), 로그인화면(쿠키X) /show_bookmark or login.html
4 POST /show_bookmark 메인화면 리스트생성 (id) bookmarks_list, category_list
5 POST /save_bookmark 북마크 추가 (id) url, comment, category /show_bookmark
6 POST /delete 북마크 삭제 number /main

구현 기능

1. 메인 페이지

CleanShot 2023-01-14 at 18 02 09

typing 텍스트 효과를 포함한 메인 홈 페이지. 바로 시작하기 클릭시 로그인 페이지로 이동

2. 로그인 페이지

CleanShot 2023-01-14 at 18 03 22

PyJWT 방식으로 쿠키를 사용해 구현. 회원 가입 버튼 클릭시 input이 추가되며 회원가입을 진행 할 수 있다. 중복 아이디 또는 맞지 않은 패스워드를 입력시 Toastr 라이브러리를 사용한 Toast 메세지가 나타난다.

3. 메인 페이지

image-20230114165524196 image 저장할 사이트의 URL, 카테고리, 태그를 입력하게 되면 해당 웹사이트의 썸네일과 클릭해 이동할 수 있는 링크, 카테고리와 태그가 나타나게 됩니다. 그리고 북마크버튼을 누르게 되면 위 메인 페이지 이미지 처럼 아래에 포스트카드 형식으로 뿌려지게 됩니다.

3-1 구현 화면

CleanShot 2023-01-15 at 00 03 48

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published