Seojae-check

📌 주제

• 책 검색과 나만의 서재를 관리할 수 있는 서비스입니다.

✋🏻 역할

• 검색 기능/페이지
• 로고
• 배포

🤔 배경

한강 작가님의 노벨상 수상으로 “텍스트 힙”이라는 키워드가 생겨나고 독서열풍에 힘입어 나만의 서재를 만들어주는 간단한 프로젝트를 만들어보고자 시작했습니다. 그래서 Kakao 도서 검색 api를 활용한 책 정보와 온라인 서재를 관리할 수 있는 서비스를 만들게 되었습니다.

📝주요 구현 사항

이미지 로딩 중...

이미지 로딩 중...

검색 기능

• Zustand를 활용하여 전역 검색 상태를 관리하고, router.push( ) 를 통해 검색 결과 페이지로 이동합니다.
• role=”search”, aria-label 등을 사용해 검색 바에 접근성을 고려했으며, 화면 리더 사용자도 검색 기능을 사용할 수 있도록 시맨틱 마크업을 적용했습니다.
• 검색어가 비어 있거나, 검색 결과가 없는 경우 등 사용자 친화적인 예외 처리를 적용했습니다.

이미지 로딩 중...

 

필터링 + 페이지네이션

• 검색 결과는 정확도순/ 발간일순으로 필터링할 수 있으며, 선택 시 URL parameter 업데이트되어 결과 목록이 자동 정렬됩니다.
• 블록 단위(10개씩)로 페이지를 묶어서 이동할 수 있게 하였고, 현재 페이지 번호와 총 페이지 수를 계산하여, 필요한 페이지만큼 동적으로 버튼을 생성했습니다.
• 이전/다음 블록으로 한번에 건너뛰는 기능과, 처음/마지막 페이지로 바로 이동하는 버튼을 제공, 페이지 전환 시 스크롤을 상단으로 이동시키는 등 세부 사용자 경험을 고려하여 구현했습니다.

이미지 로딩 중...

 

북마크

• 기존에 팀원이 Zustand를 사용해 만들어 둔 서재 상태 목록을 불러와 읽고 싶은 책 / 읽고 있는 책 / 다 읽은 책으로 분류할 수 있는 드롭다운(Bookmark, dropdown)을 구현했습니다.
• 북마크 목록이 여러 개 열려서 생기는 에러 상황을 방지하기 위해 북마크가 열려있는 책 리스트의 isbn을 서로 비교해서 북마크의 open/close를 제어했습니다.
• Zustand store에 저장된 서재 목록을 배열로 변환 후, 목록에 이미 존재하는 책과 추가하려는 책의 isbn을 비교하여 알림을 띄움으로써 사용자의 실수를 방지했습니다.

이미지 로딩 중...

 

🧠 성과

이 프로젝트에서 전역 검색 상태(Zustand)와 Next.js 라우팅(router.push())를 결합해 사용자 검색 흐름 전반을 체계적으로 다룰 수 있었습니다.

role=”search”, aria-*같은 접근성 속성 을 적용하고, 검색어가 비어 있거나 결과가 없는 경우 등 다양한예외 처리 로직을 경험하며 UX 개선에 집중했습니다.

정확도순·발간일순 필터링과 블록 단위 페이지네이션을 구현하면서, URL 파라미터를 활용해 상태관리와 UI 로직을 일관성 있게 연결했습니다.

또한 북마크 기능에서 isbn 비교 로직을 통해 중복 추가를 방지하고, Zustand에 저장된 도서 목록과의 동기화를 직관적인 구조로 설계해 유지보수성을 높였습니다.

결과적으로, 접근성·성능·확장성을 모두 고려한 기능 개발 과정을 거치며, React 기반 웹앱 설계와 사용자 경험(UX) 향상에 대한 실무 감각을 키울 수 있었습니다.