[팀 프로젝트] 방콕 스타일

 

팀 프로젝트 소개 📖

방콕 스타일

방콕 스타일은 재택근무, 원격 수업 등 집에서 나가지 않고도 스타일리시한 OOTD를 완성할 수 있는 패션 뉴스피드 서비스입니다.

 

배포 링크 : https://bangkok-style.vercel.app/

깃허브 링크 : https://github.com/smu06030/bangkok-style

파일 구조 🗂️

📦src
┣ 📂assets
┃ ┣ 📂fonts
┃ ┗ 📂images
┣ 📂components
┃ ┣ 📂Layout
┃ ┣ 📂MyPage
┃ ┗ 📂UI
┣ 📂constant
┣ 📂Context
┣ 📂hooks
┣ 📂modules
┣ 📂pages
┃ ┣ 📂private
┃ ┣ 📂public
┣ 📂routes
┣ 📂services
┣ 📂styles
┣ 📂utils
┣ 📜App.jsx
┣ 📜main.jsx
┗ 📜supabaseClient.js

 

요구 사항 📌

필수 구현 사항

✅ Supabase를 활용한 CRUD

✅ Supabase를 활용한 로그인 회원가입

✅ Context API를 활용한 전역상태 관리

✅ React Router DOM

✅ 마이 페이지

✅ 배포하기 (vercel)

 

도전 과제

✅ 로그인, 회원가입 예외 처리

✅ 소셜 로그인 - Github

✅ 비밀번호 찾기 기능

✅ 댓글 기능

✅ 좋아요 기능

✅ 더보기 기능

사용 기술 🛠️

 

팀장으로서의 역할 👨‍👩‍👧‍👦

1. 질문을 두려워하지 않는 팀 만들기

모르는 내용이 있다면 질문할 준비가 되어 있고 나 또한 아는 내용은 기꺼이 대답할 준비가 되어 있는 팀의 일원으로 성장하고 싶은 마음에 목표를 정했습니다.

 

2. 좋은 협업을 위해 pr 규칙 정하기

PR 템플릿 만들기

 

작은 작업 단위 PR

 

 

동료들의 시간은 소중하니까요!!

 

 

개선점 이야기 하기

 

 

의미 있는 커밋 메세지 작성

 

 

주요 기능 💡

내가 맡은 역할

✅ 좋아요 기능

[팀 프로젝트] 방콕스타일 - 좋아요 기능 구현

 

✅ 더보기 구현

[팀 프로젝트] 방콕스타일 - 더보기 기능 구현

✅ 검색 디바운스 구현하기

[팀 프로젝트] 방콕스타일 - 검색 기능 구현 (Debounce)

 

1. Supabase를 활용한 로그인 회원가입

2. 디테일 페이지

• 게시글 상세 조회

  사용자는 디테일 페이지에서 게시글의 작성자 닉네임, 포스팅 내용, 좋아요 수 등 게시물의 세부 정보를 확인할 수 있습니다. 이를 통해 게시물에 대한 전체적인 정보를 한눈에 파악할 수 있습니다.

• 댓글 기능 (CRUD)

  사용자가 댓글을 작성하면, 해당 댓글은 최신 댓글로 표시되며 페이지에는 최신 댓글 하나만 표시됩니다. 모두 보기 버튼을 클릭하면 해당 게시물의 전체 댓글 목록을 확인할 수 있습니다. 댓글 작성자는 자신이 작성한 댓글에 대해 수정 및 삭제 버튼을 사용할 수 있습니다. 이 기능은 작성자가 댓글을 관리하고 필요에 따라 수정하거나 삭제할 수 있도록 합니다.

 

3. 좋아요 게시물 관리

• 메인 페이지에서 좋아요한 게시물 가져오기

  사용자가 메인 페이지에서 좋아요 버튼을 클릭한 게시물은 자동으로 좋아요 게시판으로 이동합니다. 이 게시물은 '좋아요' 상태가 유지된 채로 좋아요 게시판에 표시됩니다.

• 좋아요 해제 시 게시물 삭제

  사용자가 좋아요를 해제하면 해당 게시물은 즉시 좋아요 게시판에서 삭제됩니다. 이를 통해 사용자는 좋아요 게시판에서 항상 최신 상태의 게시물만을 확인할 수 있습니다.

• 게시물 클릭 시 디테일 페이지 이동

  좋아요 게시판에 표시된 게시물을 클릭하면, 해당 게시물의 상세 정보를 확인할 수 있는 디테일 페이지로 이동합니다. 이 기능을 통해 사용자는 게시물에 대한 더 많은 정보를 쉽게 확인할 수 있습니다.

 

4. 마이페이지

• 프로필, 닉네임, 비밀번호 수정
  사용자 프로필, 닉네임, 비밀번호를 수정할 수 있는 기능을 제공합니다.

• 작성한 게시물 조회

  로그인한 사용자가 작성한 게시물을 불러와서 마이 페이지에 표시합니다. 이를 통해 사용자는 자신의 게시물 목록을 확인하고, 작성한 콘텐츠를 쉽게 관리할 수 있습니다.

 

이슈 ❓

개인 이슈

[트러블 슈팅] 방콕 스타일 (supabase RLS 오류)

 

[트러블 슈팅] 방콕 스타일 (새로고침 시 좋아요 랜덤 활성화 이슈)

 

팀 이슈

GitHub - smu06030/bangkok-style

 

 

회고 🧐

이번 프로젝트에선 팀장을 맡아서 진행을 했는데 어떻게 하면 좋은 팀이 될 수 있는지에 대해 고민해 볼 수 있었던 시간이었던 것 같습니다.