'북적북적'

북클럽 서비스 '북적북적'은 독서를 통해 세상과 소통할 수 있는 책 기반 소셜링 플랫폼입니다.

https://bookjeok-bookjeok.vercel.app

계정 : wat@ch.me / qwert123!

팀 소개

구황작물

서로의 코드를 이해하고 모두가 함께 성장하는 프로젝트!

담당 페이지

수양 clapsheep

• 팀장 / 스크럼마스터 / 라우팅 셋팅, 인트로, 에러, 모임 (메인, 상세, 생성, 관리) 채팅 페이지 구현

현지 jio-ping

• 문서화 / 노션정리 / 회원가입, 로그인, 나의 모임, 모임 참여, 독후감 상세, 독후감 생성, 마이페이지, 프로필 수정 페이지 구현

유나 cho

• 리드미 / 아토믹 컴포넌트, 독후감 목록

프로젝트 일정

일정


기술 스택

화면 구성

폴더 구조

├─public
│  └─icons
└─src
    ├─api
    ├─assets
    │  └─icons
    ├─client
    ├─components
    │  ├─Atoms
    │  │  ├─Accordion
    │  │  ├─Badge
    │  │  ├─BlankContents
    │  │  ├─Buttons
    │  │  │  ├─MainButton
    │  │  │  ├─OutlineButton
    │  │  │  └─SmallButton
    │  │  ├─GenreButton
    │  │  ├─Inputs
    │  │  │  ├─ChatTextarea
    │  │  │  ├─CheckboxForm
    │  │  │  ├─ImageForm
    │  │  │  ├─RadioForm
    │  │  │  ├─Textarea
    │  │  │  ├─TextForm
    │  │  │  └─ThinTextForm
    │  │  ├─LikeButton
    │  │  ├─MessageBubble
    │  │  ├─NomalTitle
    │  │  ├─RoundImage
    │  │  ├─Svg
    │  │  └─TextBox
    │  ├─Common
    │  │  ├─Loading
    │  │  ├─ProtectRoute
    │  │  └─RootLayout
    │  └─Molecules
    │      ├─ApplicantList
    │      ├─Avatar
    │      ├─BookReviewList
    │      ├─ChatRoomList
    │      ├─ClubCard
    │      ├─ClubList
    │      ├─ConfirmUserList
    │      ├─FilterList
    │      ├─GNB
    │      ├─MainKindToggle
    │      └─Modal
    │          ├─ButtonModalForManageMent
    │          └─DobbleButtonModal
    ├─hooks
    ├─pages
    │  ├─ApplicationClub
    │  │  ├─ApplicationClub1
    │  │  └─ApplicationClub2
    │  ├─Chatting
    │  │  ├─ChatRoom
    │  │  └─ChatRoomListPage
    │  ├─CreateBookReview
    │  ├─CreateClub
    │  │  ├─CreateClub1
    │  │  ├─CreateClub2
    │  │  ├─CreateClub3
    │  │  └─CreateClub4
    │  ├─DetailBookReview
    │  ├─DetailClub
    │  ├─EditProfile
    │  ├─Error404
    │  ├─Filter
    │  ├─Intro
    │  ├─Login
    │  ├─MainBookReview
    │  ├─MainClub
    │  ├─ManagementClub
    │  ├─MyClubList
    │  ├─MyPage
    │  ├─SignUp
    │  └─Welcome
    ├─routes
    ├─store
    ├─styles
    └─utils

인트로	로그인	회원가입

모임 목록	모임 상세	쇼설링 멤버 관리

모임 생성 1 of 4	모임 생성 2 of 4	모임 생성 3 of 4

모임 생성 4 of 4	모임 신청 1 of 2	모임 신청 2 of 2

독후감 댓글	독후감 상세	독후감 작성

독후감 검색	나의 모임	나의 모임 검색

나의 채팅	채팅	로딩중

마이페이지	프로필 수정	로그아웃 확인

DataBase structure

소감

수양

수업을 들으면서 최대한 놓치는 부분 없이 열심히 따라가고자 했지만, 리액트 생태계가 워낙 넓고 다양해서 공부해야 할 것이 너무 많았다. 특히 수업 마지막 주에 라우터, 전역 상태 관리, Tanstack Query를 배우면서 너무 어렵고, 잘 소화해 내지 못했지만 이번 프로젝트에서 부족한 부분을 공부하면서 최대한 적용해내려고 노력한 덕에 정말 많은 공부를 하게 되었다. 특히 프로젝트 초반에 왜 Tanstack Query를 사용하는지, 어떤 상황에 전역 상태 관리를 해야 하는지 전혀 모른 체 물음표만 가득했지만, 이제는 기능을 구현하기 위해 조금만 고민해 보면 어떤 툴을 사용하고, 어떤 방식을 채택해야 할지 조금은 감이 잡혔다. 수료 후에는 이번에 사용해 보지 못했던 TS, Redux, NEXT.js 등을 공부하면서 프론트엔드 개발자로 얼른 성장하고 싶다! 함께 쉽지 않은 상황에서 열심히 임해주신 유나님, 현지님 정말 감사합니다! 😆

현지

주먹구구식으로 배워가면서 바로 적용하는 게 힘들었지만 라이브러리가 있는건 이유가 있습니다… 탠스택쿼리 최고 🥰
기획 과정에서 얘기 나눈 페이지 수를 줄일까 고민했는데 저희 셋이서 해냈음에 너무 뿌듯해요!!!!!!!!!!!!!!!
셋이서 500커밋 . . . 이게 되네 😎 이게 다 저희 팀원이랑 도움 요청할 때마다 도와주신 분들 덕분입니다 🥺 🖤
덕분에 모든 순간이 좋은 기억으로 남을 것 같아요ㅎ.ㅎ 다들 건강하게 개발하십시오 ! 척추 수술 5000만원 ! ! 👩‍💻 👨‍💻

유나

나에겐 너무 어려운 리액트 수업, 프로젝트에서는 아토믹 컴포넌트를 만들어 보며 리액트와 친숙해지는 시간을 가질 수 있었다. 팀원분들과 같이 만들어 보면서 한 페이지라도 맛보기 해 볼 수 있었다. 덕분에 많이 배울 수 있었고, 팀원분들 정말 감사해요!! 🌝