/ShineUs

빛나리 - 자랑하고 싶은 것들을 소개하는 웹페이지 (소셜미디어, 뉴스피드 형태)

Primary LanguageJavaScript

💫 빛나리 Project

✰ 프로젝트 주제

"빛나리"는 사용자들이 자신의 자랑스러운 순간들을 자유롭게 공유할 수 있는 소셜 플랫폼입니다. 이 프로젝트는 사람들이 자신의 성취, 특별한 경험, 또는 자랑하고 싶은 모든 것을 빛나게 보여줄 수 있는 공간을 제공합니다. 사용자는 자랑하고 싶은 특별한 순간들을 공유하며, 이를 통해 긍정적이고 자부심을 느낄 수 있는 소통의 장을 마련합니다.

✰ 선정 배경

현대 사회에서는 SNS를 통해 자신의 일상을 공유하고, 타인의 피드백을 받는 것이 일상이 되었습니다. 그러나, 기존의 많은 SNS 플랫폼은 단순히 일상을 기록하거나 소통하는 데 집중되어 있어, 특별히 자랑하고 싶은 순간을 강조하기엔 부족함이 있었습니다. 빛나리는 이러한 부분에 착안하여, 사용자가 자랑스러운 순간들을 더욱 빛나게 표현할 수 있는 공간을 제공하기 위해 기획되었습니다.

✰ 기획 의도

  • 특화 포인트
    : 빛나리는 사용자가 자랑하고 싶은 순간을 사진이나 글과 함께 게시할 수 있으며, 다른 사용자들과 소통할 수 있는 기능을 강화하였습니다. 특히, 자랑하고 싶은 순간을 중심으로 한 SNS 플랫폼이라는 점에서 차별화를 두고 있습니다.

  • 차별화된 내용
    :기존의 유사한 SNS 서비스와 달리 빛나리는 '자랑'이라는 주제에 초점을 맞추어, 긍정적이고 자부심을 느낄 수 있는 콘텐츠 공유에 중점을 둡니다. 이로 인해 사용자들은 더 자랑스럽고 특별한 순간들을 공유하고, 그로 인해 더욱 의미 있는 피드백을 받을 수 있습니다.

📚 STACKS

📅 프로젝트 기간

2024.08.28 ~ 2024.09.04

🪖 팀원

Frontend Frontend Frontend Frontend
팀장 : 이준열 팀원 : 김하영 팀원 : 박규리 팀원 : 장세희

👓 개별 담당

  • 준열

    로그인, 로그아웃, 배포 : Supabase를 활용한 로그인, 로그아웃, 회원 가입과 메인 페이지의 좋아요, 댓글, Top버튼 + RRD(React Router DOM)

  • 하영

    메인 페이지 : Supabase를 활용한 인풋 데이터 관리, 이미지, 포스트 글, 태그, 무한스크롤 + RRD(React Router DOM)

  • 규리

    마이 피드 페이지 : Supabase를 활용한 CRUD, 좋아요한 게시글 모아보기 구현.

  • 세희

    마이 페이지 : Supabase를 활용한 프로필 수정, 이미지 수정과 업로드 구현, 로고 제작.

🗂️ 파일 구조 

📦src
 ┣ 📂assets
 ┃ ┗ 📂images
 ┃   ┗ 📂common
 ┣ 📂common
 ┃ ┣ 📜nicknameConstants.js
 ┃ ┗ 📜utils.js
 ┣ 📂components
 ┃ ┣ 📜CommentList.jsx
 ┃ ┣ 📜FeedCard.jsx
 ┃ ┣ 📜FeedHeader.jsx
 ┃ ┣ 📜FeedList.jsx
 ┃ ┣ 📜Layout.jsx
 ┃ ┣ 📜MainPageInput.jsx
 ┃ ┣ 📜MainPagePosts.jsx
 ┃ ┣ 📜MainPageTag.jsx
 ┃ ┣ 📜MyPageContainer.jsx
 ┃ ┣ 📜MyPageMyInfo.jsx
 ┃ ┣ 📜MyPageProfile.jsx
 ┃ ┣ 📜Nav.jsx
 ┃ ┣ 📜SignInContainer.jsx
 ┃ ┣ 📜SignUpContainer.jsx
 ┃ ┗ 📜WriteCommentForm.jsx
 ┣ 📂context
 ┃ ┗ 📜ShineContext.jsx
 ┣ 📂pages
 ┃ ┣ 📜Home.jsx
 ┃ ┣ 📜MyFeed.jsx
 ┃ ┣ 📜MyPage.jsx
 ┃ ┣ 📜SignIn.jsx
 ┃ ┗ 📜SignUp.jsx
 ┣ 📂shared
 ┃ ┣ 📜GlobalStyled.jsx
 ┃ ┗ 📜Router.jsx
 ┣ 📜App.jsx
 ┣ 📜index.css
 ┣ 📜main.jsx
 ┣ 📜mock.js
 ┗ 📜supabaseClient.js

🛠️ 구현 기능

  • 페이지 분리 (Home, SingUp, SingIn, MyFeed, MyPage, Nav)
    • 페이지 라우팅
  • home 페이지
    • 게시글 조회
      • 무한 스크롤
      • 좋아요/댓글 표시
      • 사진 조회
    • 게시글 작성
      • 사진 업로드
      • 태그 작성
      • 좋아요/댓글 작성
  • myfeed 페이지
    • '내가 작성한 글' 탭
      • 내가 작성한 게시글 조회
      • 내가 작성한 게시글 수정/삭제
    • 좋아요 탭
      • 내가 좋아요 누른 게시글 조회
      • 내가 누른 좋아요 취소
    • mypage 페이지
      • 내 정보 조회
      • 내 정보 수정(닉네임)
      • 프로필 사진 업로드
  • 공통
    • styled components
    • supabase

💫 빛나리 미리보기

  • home
Home
  • signin
signin
  • signup
signup
  • mypage
mypage
  • myfeed
myfeed

💻 배포 사이트

https://shine-us.vercel.app/

‼️ Issue

  • vercel 배포

    vercel 배포를 하고 링크로 들어갔는데, logo이미지 파일이 경로가 다르다고 뜨지 않았던 이슈가 있었다. 해당 부분은 브랜치를 main이 아닌 dev로 배포링크를 만들어서 생겼던 이슈였고, 이미지 경로를 public파일 안에 넣어 해결하였다.

  • 같은 컴포넌트에서 2명 이상의 작업

    컴플릭트가 많이 날것을 예상하고, 새로운 dev2 브랜치를 파서 합친 후 컨플릭트를 해결하고 dev로 합쳐서 큰 이슈는 일어나지 않았다. 너무 좋았던 방법이였다.

  • 나만 안될 때

    같은 최종 dev파일을 모든 팀원이 풀받았을 때에 꼭 한사람씩 기능이 구현이 안되었던 적이 있었다. 이런 이슈는 vite를 새로고침 하거나, 다시 pull을 받거나, 컴퓨터를 재부팅을 하는 등의 원시적인 방법으로 해결을 하였다.