👻 Soul Pick 🎸

---

혼자만 알고 있기 아까운 노래, 나만 알고 있는 명곡을 공유하며 의견을 소통해보세요!

🗓️ 프로젝트 소개

---

• 내일배움캠프 React 팀 프로젝트
• 개발기간: 2024.05.31 ~ 2024.06.06
• github: github 주소
• 사이트 방문: Soul Pick

• 개발 환경

  FrontEnd	BackEnd	버전관리	배포
  - React - Styled-Components - Redux	Supabase	GitHub	Vercel

🗃️ 사용한 라이브러리

---

• react-youtube

  react-youtube를 사용하여 디테일 페이지에서 사용자가 입력한 youtube url에 맞는 동영상을 틀 수 있게 하였습니다.

• uuid

  comment list를 추가할 때, supabase에서는 uuid값을 받아와서 item의 key값이 고유하지만, 추가한 comment가 state에 일시적으로 저장할 때는 고유한 id값이 없어서 사용하였습니다.

• styled-reset

  스타일을 reset 시켜서 grobal style로 적용시키는데 사용하였습니다.

🛠️ 내가 구현한 기능

---

• Detail Page READ/UPDATE/DELETE

  게시글 READ

  supabase로 저장된 데이터를 불러와서 redux안에 state에 post 값을 넣어서 저장하였습니다.
  
  

  게시글 UPDATE/DELETE

  우선 user가 작성한 글이라면 수정, 삭제 버튼이 보이게 하였습니다. 게시글을 update할 때는 redux에 저장한 값을 가져와서 수정한 값을 넣어주어서 값이 변경되면 바로 반영되게 한 다음, supabase에 바뀐 값을 저장하였습니다. 게시글 delete는 supabase에 해당 post를 삭제하고 랜딩페이지로 이동하게 하였습니다.

• 댓글 CRUD

  마찬가지로 redux와 supabase를 사용하여 기능을 구현하였습니다.
  post 페이지를 진입할 때, useEffect를 이용하여 최초 진입 시 supabase 값을 불러와서 redux에 initComment로 리스트에 state를 저장하고
  Create 시, redux와 supabase에 값을 추가로 저장하여 리렌더링이 되게 하였고 update/delete도 해당 댓글 작성자만 수정 삭제 버튼이 보이게 하였으며 값이 변경(수정/삭제)시에도 값을 변경하는 로직을 작성해 redux와 supabase에서 변경하였습니다.

• User Data

  User fetch

  홈화면에 진입할 시, 현재 진입한 유저가 로그인한 유저라면, redux state에 값을 저장하도록 하였습니다. 이 값을 전역으로 관리하여, header 오른쪽에 유저 프로필, mypage 유저 정보, detailpage에서 input 창에 작성자의 프로필에 사용하였습니다. 또한, 유저인지 아닌지 검증작업이 필요한 post 작성 시, comment 작성 시, my page 진입 시에 사용되었습니다.

  User logout

  header에 있는 프로필 클릭 시, 로그인 유저라면 뜨는 select에서 로그아웃을 눌렀을 때, supabase 로직을 통해 로그아웃 처리가 되며 또한 바로 상태를 리렌더링 하기 위해 user data를 저장했던 state에 값을 빈값으로 변경해서 guest(로그인이 안된 상태)로 바꾸어 주었습니다.

• Style 작업

  figma를 이용하여 와이어 프레임과 메인컬러 지정, 모든 디자인 구상을 맡았습니다.

📐 와이어 프레임

---

🎨 Figma 디자인

---

🗨️ 회고

프로젝트 일정에 대해

팀장을 맡아서 프로젝트를 진행하니 resourse를 팀원들에게 어떻게 분배해야 짧은 기간에 마감기한에 맞게 프로젝트를 완성 시킬 수 있을지 고민을 많이 하게 된 것 같다. 그래도 기한내에 모든 필수 구현 사항을 만들고 디테일 한 디자인도 잘 살려서 완성도 있게 마무리 한 것 같아서 뿌듯하다.

redux toolkit에 대해

저번 개인 프로젝트에서 redux를 사용하여 프로젝트를 구현하였지만, 아무래도 page가 많지 않고 데이터가 여러 컴포넌트에 쓰이지 않아서 사용의 장점이 크게 부각되지 않았었는데, 요번 프로젝트를 통해 state를 전역으로 관리하는 것이 얼마나 쉬워지는지와 react toolkit으로 immer를 통해 손쉽게 불변성을 지키며 데이터를 추가 삭제 할 수 있어서 코드가 엄청 간결해진게 너무 매력적이었다.

supabase에 대해

처음 다루는 sql 서비스였지만 내장된 로직으로 엄청 쉽게 데이터를 관리할 수 있어서 좋은 경험이 된 것 같다. api폴더를 따로 만들어서 비동기 함수를 불러오는 방식을 사용하니까 코드 유지보수와 가독성이 좋아져서 만족스러웠다. 하지만, 개인적으로 로그인 회원가입 소셜 로그인 쪽을 다루지 못해서 아쉬웠다. 다음 개인 프로젝트에서 다룰 수 있다면 다루고 싶다.

vercel 배포

이 부분도 팀원이 맡아 주셔서 손쉽게 배포가 된다는데 직접 사용하지 못했다. 다음 프로젝트는 꼭 vercel를 이용해서 배포를 진행해 보겠다!

loader에 대해

react router v6으로 routing 작업을 했는데, 컴포넌트가 렌더링될때 loader를 통해 로딩페이지를 구현하지 못했다. 마감에 급급해져서 미처 구현하지 못한게 너무 아쉽다.. 다음 프로젝트에선 꼭 넣어서 더욱 완성도를 높이고 싶다.