📖 BookSaeTong (북새통)

---

📄 프로젝트 소개

---

• 프로젝트 명 : 📖 북새통

  저희 프로젝트는 중고 도서를 거래할 수 있는 플랫폼으로 현재 북새통에 올라와 있는 책의 정보와 직거래할 수 있는 위치까지 볼 수 있어요.

• 배포 주소

  북새통 바로가기

• GitHub 주소

  Github 바로가기

👥 팀소개

김운성	박초원	서예은	염경원	이하름	백현명

🛠️ 내가 맡은 기능

✅ 메인페이지

• 메인페이지 : swiper를 사용해 전체도서목록, 내 위치 도서, 이 두 목록을 10개 씩 볼 수 있게 하였고 더 보기를 통해 해당 페이지로 들어갈 수 있게하였습니다. 작성자 근처의 판매 글이 없을 경우 대응하는 컴포넌트를 넣었습니다.

✅ 마이페이지 - 내가 찜한 목록, 내 판매글 목록

• 내가 찜한 목록, 판매글 목록 : 로그인 한 유저의 유저 id를 사용해서 supabase에서 user가 찜한 게시글과 작성한 게시글을 불러왔습니다.

✅ 공동 컴포넌트 - 헤더, PostList, PostCard, EmptyState

• Header : cva를 사용하여 회원가입, 로그인, 로그아웃, 글쓰기 버튼을 props로 바꿀 수 있게 했습니다.
• PostList, PostCard : 공통으로 사용되는 Card 컴포넌트의 재사용성과 통일성을 위해 card에 알맞은 props와 타입을 지정하였습니다.
• EmptyState : data가 없을 경우 보여줄 수 있는 컴포넌트로 틀 제작은 같은 팀 하름님이 판매글 내역이 없을 때를 겨냥해 만들어 주신 것을 제가 모듈화를 하여 다른 팀원도 상황에 맞게 쓸 수 있게 코드를 리팩토링하였습니다.

👀 프로젝트 계기

주제에 대해 논의 중에 중고 거래 플랫폼에 대해 만들어 보자는 의견이 통일되어서 주제를 좁혀서 중고 책 거래 플래폼으로 채택했어요!

🛠️ 주요기능

---

✅ 중고 책 판매

중고로 팔고 싶은 책을 제목, 내용, 거래 위치, 금액, 사진을 입력해서 올리고, 댓글로 구매의사를 표현할 수 있습니다.
또한, 내가 작성한 게시글의 수정, 삭제가 가능하고 내가 작성한 댓글의 수정, 삭제가 가능합니다.

🔽 중고 책 등록

🔽 중고 책 수정, 삭제

🔽 댓글 등록, 수정, 삭제

✅ 내 위치 기반 중고거래

글 작성 시에 입력한 지도 위치에서 도시명까지의 위치를 기반으로 하여 내 주변 매물을 확인 할 수 있습니다.

✅ 거래 검색 기능

책의 제목, 거래 위치를 검색하거나 카테고리 별로 판매글을 필터링해서 볼 수 있습니다.

🔽 카테고리 필터링

🔽 검색 필터링

✅ 회원가입/로그인

유저가 이메일로 회원을 가입할 수 있습니다.

✅ 마이페이지

회원인 유저만 생성되는 페이지로, 프로필 수정, 내가 찜한 목록, 내가 올린 게시글을 볼 수 있습니다.

⏳ 개발기간

---

2024.07.08 ~ 2024.07.15 (총 7일간)

📚 기술스택

---

🖼️ 와이어 프레임

---

🧩 ERD

---

🗂️ 프로젝트 파일 구조

---

📦src
 ┣ 📂api
 ┣ 📂app
 ┃ ┣ 📂(provider)
 ┃ ┃ ┣ 📂(root)
 ┃ ┃ ┃ ┣ 📂(auth)
 ┃ ┃ ┃ ┃ ┣ 📂login
 ┃ ┃ ┃ ┃ ┗ 📂signup
 ┃ ┃ ┃ ┣ 📂(product)
 ┃ ┃ ┃ ┃ ┣ 📂detail
 ┃ ┃ ┃ ┃ ┃ ┗ 📂[id]
 ┃ ┃ ┃ ┃ ┣ 📂edit
 ┃ ┃ ┃ ┃ ┃ ┗ 📂[id]
 ┃ ┃ ┃ ┃ ┣ 📂list
 ┃ ┃ ┃ ┃ ┃ ┣ 📂all
 ┃ ┃ ┃ ┃ ┃ ┣ 📂around
 ┃ ┃ ┃ ┃ ┗ 📂post
 ┃ ┃ ┃ ┣ 📂mypage
 ┃ ┃ ┃ ┃ ┣ 📂likes
 ┃ ┃ ┃ ┃ ┣ 📂mysell
 ┃ ┃ ┃ ┃ ┗ 📂profile
 ┃ ┣ 📂api
 ┣ 📂components
 ┣ 📂contexts
 ┣ 📂types
 ┣ 📂utils
 ┣ 📂zustand
 ┗ 📜middleware.ts

🏹 Trouble Shooting

---

Swiper 오류

className의 오류로 한 페이지 안에서 두개의 Swiper를 사용했을때 하나의 Swiper가 안나타나는 문제가 발생했었다. 처음에는 데이터 로딩과정에서의 문제인줄 알고 계속 받아오는 로직부터 모조리 console.log를 찍었는데 data랑 undefined가 번갈아서 떠서 이게 문제인 줄 알았다. 근데 알고보니 width 값을 안줘서 생긴 문제였다..