24.09.04 TIL STARTIFY 팀프로젝트 마무리

Startify

여러분들은 계절마다 즐겨 듣는 노래가 있으신가요?
'Startify'는 계절마다 어울리는 노래를 공유하고, 그 음악을 통해 사람들과 추억을 나눌 수 있는 공간입니다.

 

🔥배포 링크

Startify - 내일배움캠프 6기 14조

 

📦폴더 구조

폴더구조

``` 📦react-startify
┣ 📂public
┃ ┗ 📜favicon.png
┣ 📂src
┃ ┣ 📂assets
┃ ┃ ┣ 📜2024-09-03_12.32.21.png
┃ ┃ ┣ 📜blankProfile.png
┃ ┃ ┣ 📜delete.png
┃ ┃ ┣ 📜dislike.png
┃ ┃ ┣ 📜dislike01.png
┃ ┃ ┣ 📜edit.png
┃ ┃ ┣ 📜fall.png
┃ ┃ ┣ 📜like.png
┃ ┃ ┣ 📜like01.png
┃ ┃ ┣ 📜like03.png
┃ ┃ ┣ 📜playButton.png
┃ ┃ ┣ 📜playButton02.png
┃ ┃ ┣ 📜song.png
┃ ┃ ┣ 📜spring.png
┃ ┃ ┣ 📜summer.png
┃ ┃ ┣ 📜temporalLogo.png
┃ ┃ ┗ 📜winter.png
┃ ┣ 📂components
┃ ┃ ┣ 📂common
┃ ┃ ┃ ┗ 📜Button.jsx
┃ ┃ ┣ 📂detail
┃ ┃ ┃ ┣ 📜DetailComment.jsx
┃ ┃ ┃ ┣ 📜DetailDeleteModal.jsx
┃ ┃ ┃ ┣ 📜DetailEditModal.jsx
┃ ┃ ┃ ┣ 📜DetailMusic.jsx
┃ ┃ ┃ ┣ 📜DetailOwner.jsx
┃ ┃ ┃ ┗ 📜DetailVisitor.jsx
┃ ┃ ┣ 📂form
┃ ┃ ┃ ┗ 📜style.jsx
┃ ┃ ┣ 📂home
┃ ┃ ┃ ┣ 📜HomeStyles.jsx
┃ ┃ ┃ ┣ 📜PostItem.jsx
┃ ┃ ┃ ┣ 📜PostItemList.jsx
┃ ┃ ┃ ┗ 📜SearchInput.jsx
┃ ┃ ┣ 📂layout
┃ ┃ ┃ ┣ 📜LayoutHeader.jsx
┃ ┃ ┃ ┗ 📜LayoutStyles.jsx
┃ ┃ ┣ 📂profile
┃ ┃ ┃ ┣ 📂css
┃ ┃ ┃ ┃ ┗ 📜active.css
┃ ┃ ┃ ┣ 📜Created.jsx
┃ ┃ ┃ ┣ 📜CreatedItem.jsx
┃ ┃ ┃ ┣ 📜Intro.jsx
┃ ┃ ┃ ┣ 📜Liked.jsx
┃ ┃ ┃ ┣ 📜LikedItem.jsx
┃ ┃ ┃ ┣ 📜ProfileContents.jsx
┃ ┃ ┃ ┣ 📜ProfileHeader.jsx
┃ ┃ ┃ ┗ 📜ProfileStyles.jsx
┃ ┃ ┣ 📂search
┃ ┃ ┃ ┗ 📜SearchStyle.jsx
┃ ┃ ┗ 📂userInfo
┃ ┃ ┃ ┗ 📜UserStyle.jsx
┃ ┣ 📂context
┃ ┃ ┣ 📜MusicContext.jsx
┃ ┃ ┣ 📜PostContext.jsx
┃ ┃ ┣ 📜SearchedMusicContext.jsx
┃ ┃ ┗ 📜UserContext.jsx
┃ ┣ 📂fonts
┃ ┃ ┗ 📂GmarketSansTTF
┃ ┃ ┃ ┣ 📜GmarketSansTTFBold.ttf
┃ ┃ ┃ ┣ 📜GmarketSansTTFLight.ttf
┃ ┃ ┃ ┣ 📜GmarketSansTTFMedium.ttf
┃ ┃ ┃ ┣ 📜LICENSE
┃ ┃ ┃ ┣ 📜SUITE-Bold.ttf
┃ ┃ ┃ ┣ 📜SUITE-ExtraBold.ttf
┃ ┃ ┃ ┣ 📜SUITE-Heavy.ttf
┃ ┃ ┃ ┣ 📜SUITE-Light.ttf
┃ ┃ ┃ ┣ 📜SUITE-Medium.ttf
┃ ┃ ┃ ┣ 📜SUITE-Regular.ttf
┃ ┃ ┃ ┗ 📜SUITE-SemiBold.ttf
┃ ┣ 📂hooks
┃ ┃ ┣ 📜useInput.jsx
┃ ┃ ┣ 📜useMusicContext.jsx
┃ ┃ ┗ 📜useSearchedMusicContext.jsx
┃ ┣ 📂pages
┃ ┃ ┣ 📜Detail.jsx
┃ ┃ ┣ 📜EditForm.jsx
┃ ┃ ┣ 📜Form.jsx
┃ ┃ ┣ 📜Home.jsx
┃ ┃ ┣ 📜Login.jsx
┃ ┃ ┣ 📜ModifyProfile.jsx
┃ ┃ ┣ 📜NotFound.jsx
┃ ┃ ┣ 📜Profile.jsx
┃ ┃ ┣ 📜Search.jsx
┃ ┃ ┗ 📜SignUp.jsx
┃ ┣ 📂shared
┃ ┃ ┣ 📜Layout.jsx
┃ ┃ ┗ 📜Router.jsx
┃ ┣ 📜App.jsx
┃ ┣ 📜index.css
┃ ┣ 📜main.jsx
┃ ┣ 📜supabaseClient.js
┃ ┗ 📜utils.js
┣ 📜.gitignore
┣ 📜.prettierignore
┣ 📜.prettierrc
┣ 📜eslint.config.js
┣ 📜index.html
┣ 📜package.json
┣ 📜README.md
┣ 📜vercel.json
┣ 📜vite.config.js
┗ 📜yarn.lock
```

 

💻 개발 환경

 

 

 

 

 

🔧 주요기능

회원가입 페이지 / 로그인 페이지

• 회원가입 페이지에서 필수 입력값인 이메일, 비밀번호를 입력해 가입할 수 있으며 선택사항인 프로필이미지, 닉네임, 소개글도 등록하여 가입할 수 있습니다.

• 로그인 페이지에서 가입한 이메일과 비밀번호를 사용하여 로그인 할 수 있습니다. 입력하지 않은 값이 있다면 경고창과 함께 해당 입력창이 선택됩니다.

메인 페이지 / 검색 페이지

• 랜딩 페이지인 홈페이지에서 데이터베이스에 있는 모든 게시물목록을 확인할 수 있으며, 재생버튼을 누르면 영상을 확인해 볼 수 있습니다.

• 홈페이지나 검색페이지에서 원하는 키워드 검색이 가능합니다. 게시글제목, 가수명, 노래제목으로 검색된 데이터를 검색페이지에서 확인할 수 있습니다.

게시물 작성 페이지

• 게시글 제목, 노래제목, 유튜브 주소, 가수명을 입력하여 게시글을 작성할 수 있으며, 원하는 경우 해시태그도 입력할 수 있습니다.

• 원하는 해시태그를 클릭하여 삭제할 수 있습니다. 해시태그를 입력하지 않은 게시물은 노래제목과 가수명이 자동으로 저장됩니다.

디테일 페이지 / 게시물 수정 페이지

• 게시물의 상세 내용과 노래 정보를 확인하고, 좋아요와 댓글을 작성할 수 있습니다.

• 로그인한 사용자는 자신의 게시물과 댓글을 수정하거나 삭제할 수 있습니다.

프로필 페이지 / 프로필 편집 페이지

• 내 프로필 정보와 내가 작성한 게시물 목록, 좋아요 누른 게시물 목록을 확인할 수 있습니다.

• 로그인 되어있는 유저의 정보를 가져와서 화면에 표시하고, 입력한 비밀번호가 동일하면 회원 정보 수정할 수 있습니다.

🏹 트러블 슈팅

1. 반응형에 따라 grid 행 아이템 개수가 변해 height값이 늘어나는데 드롭다운 버튼이 생기지 않는 문제

=> resize이벤트를 사용하여 미리 설정해둔 width범위에 따라 한 줄에 보여줄 최소값을 설정하고, 리렌더링을 유발하여 드롭다운 버튼이 생기도록 구현함

2. 동일한 파일명이 있거나, 한글 파일명을 인식하지 못하는 문제

=> getTime 메서드를 사용하여 유니크한 파일명으로 데이터 베이스에 올라가도록 수정함

=> 한글파일명을 임의의 랜덤파일명으로 바꾸고 업로드하도록 수정함

3. 해시태그에 가수명, 노래제목이 자동으로 들어가있는 문제

=> 저장 버튼을 눌렀을 때 해시태그 값을 검사하여 빈 값일경우 가수명과 노래제목을 넣어 supabase에 전달함

4. supabase 데이터 테이블 간 외래키 공유 후 삭제 기능에서의 문제

=> 해당 외래키의 참조행이 없어졌을 경우 연결된 데이터가 삭제되도록 정책설정

🗣️ 프로젝트 소감

한수빈(팀장)

프로젝트 첫날에는 해야 할 일들을 나열하고, 각 작업에 대한 접근 방식을 고민했지만 로직을 짜는 데 어려움을 겪었습니다. 그래서 구글링을 하며 하나씩 문제를 해결해 나갔고, 결국 프로젝트를 성공적으로 마무리할 수 있었습니다. 하지만 데이터베이스와 Context API 사용이 아직은 서툴다 느꼈고, 이 부분을 더 보완해야겠다고 생각했습니다.

전상국

처음으로 프로젝트에서 supabase를 사용하다보니 테이블 설정부터 데이터 사용까지 많은 어려움
을 겪었습니다. 관계형데이터베이스의 foreign key를 통한 데이터 연결 및 요청에 대해 이해를 하게
되면서 아직은 부족하지만 조금은 익숙해졌습니다. context를 사용하며 리렌더링을 신경써보고 싶
었는데 supabase사용법에 급급하여 시간이 부족했던 점이 아쉽습니다.

신한별

supabase의 권한 설정 문제로 시간을 많이 잡아먹었는데, 이제 해결방법을 알았으니 다음부턴 더 수월하게 이용할 수 있을 것 같습니다. 회원가입, 로그인, 세션관리, 파일관리 등 번거로운 작업들을 supabase가 다 해줘서 편하게 프로젝트를 진행한 것 같습니다.
깃허브가 특히 어려워서, 작업을 하나 진행할 때 마다 코드가 날아가고 꼬이고 하는 불상사가 발생하고 그 때마다 너무 스트레스 받았지만, 팀원들의 도움도 받으면서 계속 루틴을 반복하다 보니 이젠 무리 없이 진행할 수 있는 것 같습니다. 다양한 git 관련 명령어도 알게 되었고 다음에는 이번 경험을 기반으로 실수 없이 팀작업을 하고 싶습니다!
팀원들이 다들 잘하시고 의욕도 넘쳐서 좋은 영향을 받고 프로젝트에 집중할 수 있었던 것 같습니다. 처음으로 깃허브 룰에 맞춰서 커밋 메시지도 작성해보고 좋았습니다.

송혜인

수파베이스를 처음 사용해보아서 어떻게 세팅을 해야하는지 어떻게 값을 전달하고 불러와야하는지 막막했었는데 팀원들과 같이 팀프로젝트로 진행을 하다보니 방법을 쉽게 익힐 수 있었던 것 같습니다. Git 관련부분도 개인과제를 할 때에는 딱히 브런치를 여러 개 만들거나 충돌일어날 부분도 없었었는데 팀과제를 하면서 충돌관련부분을 해결해 볼 수 있는 경험이 된 것 같아 좋았습니다.

정지형

supabase와 연결해서 사용하는 방법에 대해서 조금은 알게 되어 만족스럽고 auth데이터
와 USER데이터를 전역으로 관리 되도록 하지 못한 부분과 queryString을 이용해서 다른
사용자의 프로필 페이지를 구현 못한게 아쉬웠다.

📗 프로젝트 피드백

• 폴더구조가 마음에 들었다.
• 로고의 크기가 너무 크다.
• 모달 스타일이 화면에 따라 깨지는게 조금 아쉽다.