1인 가구를 위한 공유 냉장고 노나먹자 🍴

• 🔗배포URL
• 🔒서비스 이용을 위한 계정
  
  id : [email protected]
  pw : 123456

목차

1. 프로젝트 소개
2. 요구사항
3. 팀원소개
4. 역할 분담
5. 개발 환경
6. UI
7. 핵심 코드
8. 폴더 구조

1. 프로젝트 소개

🔸 이 프로젝트는 1인가구에서 남는 식재료 또는 반찬을 공유할 수 있는 SNS 커뮤니티 입니다.

🔸 서비스 사용자들은 포스팅 기능을 통해 사진과 글을 기록하며 1인 가구에 도움이되는 정보를 공유할 수 있습니다. 

🔸 무료로 나눔하고 싶거나 판매하고 싶은 물건이 있다면 상품 판매를 등록하고 본인의 SNS에 바로 홍보할 수 있습니다. 

2. 요구사항

🔐 인증

• 로그인 / 로그아웃
• 회원가입
• 회원 정보 수정
• 유효성 검증

🏕️ 게시글

• 게시글 등록/수정/삭제/신고
• 다중 이미지 파일 업로드/수정/미리보기
• 앨범뷰 / 리스트뷰
• 이미지 슬라이드
• 좋아요 기능

👥 팔로우

• 유저 팔로우/언팔로우
• 팔로잉, 팔로워 리스트

🥗 상품

• 상품 등록/수정/삭제
• 이미지 파일 업로드/수정/미리보기
• 유효성 평가

🔎 검색

• 유저 검색
• 무한 스크롤

💬 댓글

• 댓글 등록, 삭제, 신고
• 댓글 작성 시간
  
  

3. 팀원 소개

양지성	방현영	선은혜	한유진
🔗GitHub	🔗GitHub	🔗GitHub	🔗GitHub
총괄 팀장	코드 리뷰 리더	회의록 리더	디자인 리더

4. 역할 분담

🛠 공통 담당

• 공통 작업 : 로그인 / 회원가입 / 프로필 등록 / 버튼 컴포넌트

5. 개발 환경

1) 개발기간 : 2022.12.09 ~ 2023.01.05

2) 기술

• FrontEnd : React, React-router, Hooks, Styled-components (수정하기)
• BackEnd : 제공된 API 사용

3) 협업 도구

• Discord: 실시간 채팅 및 코드 리뷰를 위한 화면 공유
• Notion : 🔗회의록 및 컨벤션
• VSCode Live Share
• Figma : 🔗디자인 시안 참고

4) 이슈 관리

• 🔗GitHub Issues 와 🔗GitHub Project 를 사용하여 버전 관리 및 진행 상황을 공유함

5) Git Flow

6. UI

0. Splash	1. 로그인

2. 회원가입	3. 회원가입 - 프로필 설정

4. 홈피드	5. 검색

6. 게시글 등록	7. 게시글 수정

8. 게시글 삭제	9. 게시글 신고

10. 게시글 댓글 등록 및 삭제	11. 게시글 댓글 신고

12. 내 프로필	13. 내 프로필 수정

14. 타 유저 프로필	15. 팔로우

16. 판매 상품 등록	17. 판매 상품 수정 및 삭제

18. 로그아웃	19. 좋아요

20. 404 페이지	21. 채팅

7. 핵심 코드

1) useContext

• token, accountname이 여러 컴포넌트 내에서 api통신을 할 때 필요로 하는 것을 발견.
• 전역에서 필요한 token, accountname을 useContext를 이용하여 관리
• useContext를 사용함으로써 prop drilling을 방지
• token, accountname을 얻기 위한 불필요한 데이터 요청 방지

2) CustomHook

• 모달 구현 시 모달이 필요한 여러 컴포넌트 내에서 동일한 로직이 반복적으로 사용되는 것을 발견.
• 이를, useModal 이라는 커스텀 훅으로 만듦으로써 코드의 중복 최소화 및 상태 관리 로직의 재사용성을 높임.

3) Button 컴포넌트

• 재사용성이 높은 버튼을 공통 컴포넌트로 만들어 여러 페이지 내에서 사용할 수 있게 구현함
• 기본 버튼 컴포넌트 구현 후 버튼의 스타일 컴포넌트에서 사이즈,disabled,색상 등을 prop 인자로 받아와서 여러 페이지에서 사용할 수 있게 구현함.
• 특히, 버튼의 사이즈를 SIZES 라는 객체(s,ms,m)로 변수를 지정하여 확장성있는 코드로 구현함

(보류) 라우터 접근제한 eslint, prettier api 파일 분리

8. 폴더 구조

📦src
 ┣ 📂api
 ┣ 📂assets
 ┃ ┣ 📂font
 ┃ ┗ 📂images
 ┣ 📂components    
 ┃ ┣ 📂Comment
 ┃ ┣ 📂CommentInput
 ┃ ┣ 📂common           // 공통으로 사용되는 컴포넌트 폴더
 ┃ ┃ ┣ 📂Button
 ┃ ┃ ┣ 📂ImageInput
 ┃ ┃ ┣ 📂LabelInput
 ┃ ┃ ┣ 📂Modals
 ┃ ┃ ┣ 📂PostAlbum
 ┃ ┃ ┣ 📂PostCard
 ┃ ┃ ┣ 📂Product
 ┃ ┃ ┣ 📂ProfileImg
 ┃ ┃ ┗ 📂TabMenu
 ┃ ┣ 📂ImagePreview
 ┃ ┣ 📂Loading
 ┃ ┣ 📂MenuBar
 ┃ ┣ 📂Nav
 ┃ ┣ 📂ProfileInfo
 ┃ ┗ 📂UserListItem
 ┃ ┃ ┗ 📂UserFollow
 ┣ 📂context         // 로그인 한 사용자 정보를 담기 위한 context 파일 관리 폴더
 ┣ 📂hooks
 ┣ 📂pages
 ┃ ┣ 📂AddProduct
 ┃ ┣ 📂ChatList
 ┃ ┣ 📂ChatRoom
 ┃ ┣ 📂EditPost
 ┃ ┣ 📂Follow
 ┃ ┣ 📂HomeFeed
 ┃ ┣ 📂JoinEmail
 ┃ ┣ 📂JoinProfileEdit
 ┃ ┣ 📂Login
 ┃ ┣ 📂LoginEmail
 ┃ ┣ 📂ModifyProfile
 ┃ ┣ 📂NotFound
 ┃ ┣ 📂PostDetail
 ┃ ┣ 📂Profile
 ┃ ┃ ┗ 📂UserProfile
 ┃ ┣ 📂SearchUser
 ┃ ┣ 📂Splash
 ┃ ┣ 📂UpdateProduct
 ┃ ┗ 📂UploadPost
 ┣ 📂Router
 ┣ 📂styles
 ┣ 📜App.jsx
 ┣ 📜index.css
 ┗ 📜index.jsx