[프론트엔드 부트캠프 우수 프로젝트] 북적북적

독서를 좋아하는데 함께 읽고 이야기 나눌 공간이 없어 아쉬웠던 적 있으신가요? 멋쟁이사자처럼 프론트엔드 부트캠프에서는 수강생들이 직접 팀을 이뤄 실전 수준의 서비스를 설계하고 구현해요.

이번 우수 프로젝트 '북적북적'은 독서를 통해 세상과 소통할 수 있는 책 기반 소셜링 플랫폼이에요. 모임 생성부터 채팅·독후감 공유까지, 프론트엔드 실무 스택으로 완성한 결과물을 지금 확인해 보세요.

목차

1. 북적북적이란?

2. 기술 스택과 선택 이유

3. 기획 과정

4. 주요 기능 구현

1. 북적북적이란?

책을 통해 세상과 소통하는 책 기반 소셜링 플랫폼이에요

'북적북적'은 독서를 통해 세상과 소통할 수 있는 책 기반 소셜링 플랫폼이에요. 모임을 만들고 공통의 주제를 가진 사람들과 채팅을 통해 소통할 수 있어요. 다른 사람의 독후감을 보고 나의 독후감을 작성할 수 있어요.

개발 기간은 2024.02.15 - 2024.04이에요. 비즈니스 모델은 출판사 광고, 모임 결제 수수료, 책 콘텐츠 수익 수수료로 설계됐어요.

2. 기술 스택과 선택 이유

프론트엔드부터 백엔드 플랫폼·데이터 관리 등의 기술로 구성했어요

3. 기획 과정

데이터베이스 구조 설계와 레퍼런스 조사로 기반을 다졌어요

개발에 앞서 데이터베이스 구조를 설계했어요. 레퍼런스로 문토, 밀리의 서재를 참고했어요.

4. 주요 기능 구현

1) 모임 생성

다양한 선택지(위치, 온라인/오프라인 등)를 가진 모임을 생성할 수 있어요. 네비게이터를 구성하고, Tailwind와 pure CSS를 활용해 스타일을 구현했어요.

각 페이지에서 작성한 정보를 전역으로 관리하며, useGetFilter를 사용해요.

2) 커뮤니티 기능

검색 기능을 통해 내가 원하는 모임에 참여할 수 있고, 내가 만든 모임과 다른 사람이 만든 모임의 리스트를 볼 수 있어요. 모임번으로 검색할 수 있으며, 참여하거나 생성한 모임은 참여가 3회 이상인 경우 '다 보기' 분류가 활성화돼요.

3) 채팅 기능

모임에 참여하고자 하는 사람은 채팅 기능을 통해 모임의 구성원과 채팅으로 이야기를 주고 받을 수 있어요. Observer 설정의 pb realtime 업데이트 정보를 잔시처리하고, TanStack Query로 불가능한 실시간 정보를 반영했어요. 메시지 입력 등 textarea를 사용하며, TanStack Query의 optimistic update를 활용했어요.

4) 독후감

다른 사람이 쓴 독후감을 최신 순으로 볼 수 있고 내가 관심있는 책에 대한 독후감을 검색할 수 있어요. 전체 독후감 리스트가 렌더링되며, 책 제목으로 독후감을 검색할 수 있어요. 내가 읽은 독후감의 독후감을 작성하여 다른 사람에게 공유할 수 있어요.

독후감 상세 페이지에서는 white-space: pre-wrap을 사용해 독후감 작성자가 입력한 줄별, 띄어쓰기가 그대로 적용돼요. 독후감 작성 시 책 제목, 독후감 제목, 이미지, 내용을 모두 작성해야 등록 버튼이 활성화되며, 작성 성공 시 팝업이 표시되고 독후감 상세페이지에서 조회 모달로 확인할 수 있어요.

💡프로젝트 시연 영상

'북적북적'은 책 기반 소셜링이라는 아이디어를 모임 생성·커뮤니티·채팅·독후감 기능으로 구현한 프론트엔드 우수 프로젝트예요.

멋쟁이사자처럼 국비지원 부트캠프에서 어떤 프로젝트를 만들 수 있는지 직접 확인해 보세요.