웹 서비스

쭉정이

응답 형식이 다른 도서 API 두 개를 하나의 데이터 구조로 맞춰, 검색부터 상세 조회와 독서 일정까지 한 흐름으로 이었습니다.

업무 배경과 해결 과정

배경
책을 찾고 후기를 남기는 활동과 개인 독서 계획을 한 서비스에서 관리하도록 구성했습니다. 도서 API, 리뷰, 독서 캘린더를 연결하고 홈 화면에서 인기글과 신간을 탐색할 수 있도록 구현했습니다. 현대오토에버 SW 스쿨 과정에서 진행한 프로젝트입니다.
어려웠던 점
Kakao 도서 검색 API는 키워드에 맞는 목록을 빠르게 주지만 상세 정보가 부족했고, Aladin API는 상세 정보와 메타데이터가 풍부했습니다. 두 API의 응답 형식도 서로 달랐습니다.
이렇게 풀었습니다
검색은 Kakao, 상세 정보는 Aladin을 쓰도록 역할을 나누고, 두 응답을 공통 데이터 구조로 변환했습니다. 이 과정에서 중복 데이터와 누락된 속성을 처리했습니다.

JWT 로그인, 도서 검색 API, 별점 리뷰 CRUD와 FullCalendar 기반 독서 일정 관리를 구현했습니다.

01
JWT 계정 기능과 별점 리뷰
JWT 기반 로그인·회원가입을 구현하고, 발급받은 토큰을 localStorage에 저장하고 Axios 요청의 Authorization 헤더에 Bearer로 실어 인증을 처리했습니다. 인증이 필요한 화면은 로그인 여부로 접근을 제어하고, 토큰 만료나 인증 오류가 나면 로그인 화면으로 이동시켰습니다. 별점과 후기를 입력받는 리뷰 작성·수정·삭제 기능에 좋아요를 연결해 사용자가 도서에 대한 평가를 남길 수 있도록 했습니다.
02
Kakao·Aladin 도서 API 연동
Kakao API의 도서 검색 결과와 Aladin API의 책 정보를 연결해 검색과 상세 조회 기능을 구현했습니다. 도서 목록에는 페이징 처리와 필터링을 적용해 원하는 책을 탐색할 수 있도록 했습니다.
03
FullCalendar 독서 일정 관리
개인 독서 기록을 달력에서 관리할 수 있도록 FullCalendar를 연동했습니다. 일정 조회·등록·수정·삭제 기능을 구현해 날짜를 기준으로 독서 계획을 확인하고 변경할 수 있게 했습니다.
04
홈 탐색 화면과 다크 모드
홈 배너와 슬라이더를 구성하고 인기글·신간 추천을 배치해 도서와 커뮤니티 글을 탐색할 수 있도록 했습니다. 화면에 다크 모드를 적용하고 협업 과정의 피드백을 UI에 반영했습니다.

사용 기술Vue · Spring Boot · Firebase Firestore · Tailwind CSS · Vite · Axios · Kakao API · Aladin API · FullCalendar

담당 범위

다시 만든다면 (개선 설계안)

구현 내용을 바탕으로 확장해 검토한 설계안입니다.

로그인 상태와 작업 권한의 오류 구분
토큰 만료로 인증이 필요한 상황과 다른 사용자의 리뷰 수정 권한이 없는 상황을 구분하는 개선안을 검토할 수 있습니다. 서버에서 작업 권한을 확인하고, 토큰 만료 시 재로그인 안내와 로그아웃 후 인증 상태 정리를 함께 다루는 설계안입니다.
검색 응답 순서와 빈 결과·실패 처리
검색어를 연속으로 바꿨을 때 이전 요청의 늦은 응답이 새 검색 결과를 덮어쓰지 않도록 마지막 요청에 해당하는 결과만 반영하는 개선안을 검토할 수 있습니다. 검색 결과가 없는 경우와 외부 API 요청 실패를 구분해 조건 변경 또는 재시도를 안내하는 방식입니다.