📖 청소년을 위한 도서관 TeenBook

프로젝트 기간 : 2024.08.05 ~2024.08.30

배포 : https://www.teenbook.click/

프로젝트 소개

TeenBook은 청소년들이 도서관 이벤트와 정보에 대해서 쉽게 접근하고, 비슷한 나이대의 인기 도서와 급상승 도서를 발견하며, 도서관 이용을 일상화하고 재미있게 다가갈 수 있도록 지원하는 것을 목표로 하였습니다.

도서관 데이터 관련 부분은 도서관 정보나루, 서울 열린 데이터광장 등 공공 API를 활용하여 구현했습니다. 또한 PWA를 도입하여 웹에서 앱으로 설치 가능하도록 하는 웹 기반 어플리케이션으로 제작하였습니다.

기대효과

• 도서관 이용률 증가
• 독서 습관 개선 및 정보 접근성 향상
• 참여와 동기 부여

팀원 소개

기획	프론트엔드	백엔드
하명관	박효빈	심한주

💛기술 스택

💚주요 기능

[간편 카카오 로그인]	[인기 도서 데이터 표시] / [대출 급상승 도서 데이터 표시]
카카오 API를 이용하여 소셜 로그인 구현	홈 상단에 탭메뉴를 통해 접근가능 도서관 정보나루 API 이용 / 크롤링을 통해 데이터 수집하여 API로 구현 UI는 carousel로 구현하고 navigation 버튼을 나타내 사용자 중심 UI 구성

[지리 기반 도서관 위치 안내 및 도서관 정보]
카카오 맵 API 사용 서울 도서관 API 사용 사용자 위치 기반으로 인근 도서관의 위치를 제공, 도서관 마커 클릭 시 해당 도서관의 상세 정보 확인

[즐겨찾기] / [즐겨찾기 목록]
사용자는 즐겨 찾는 도서관 등록 및 해제 가능, 등록한 도서관은 자주 찾는 도서관 탭에서 확인 가능.

[출석 인증]
사용자와 도서관 위치를 비교하여 100m 안이면 마커 클릭 시 출석하기 버튼 활성되도록 구현 그 후 출석 등록 가능(경험치 10을 얻게 됩니다.) 마커 색은 클릭시 진한 남색으로 표시하여 사용자 시점 생각하여 구현

[대출 인증]	[포인트샵]
인증을 위해 카메라 구현 인증을 통해 포인트 500 얻음	출석하기 및 대출하기로 모은 포인트 사용 가능

💜트러블 슈팅

1. PWA와 HMR 충돌-> https://simple-relish-748.notion.site/PWA-HMR-f5131547511343acbf7dfc9b878f290a?pvs=4
2. 프론트 배포 후 Mixed Content 에러 -> https://simple-relish-748.notion.site/Mixed-Content-7276674bc13a4a9ca7bd4dd895f26a0b?pvs=4