stu442/good-harvest-market

풍년 마켓

🥬 풍년마켓 🥬

• 🔗 배포 URL
• 🔒 서비스 이용 계정
  • ID: [email protected]
  • PW : pung100

• 목차

1. 프로젝트 소개
2. 팀원 소개
3. 개발 환경
4. 팀 협업 방식
5. 구현 기능
6. 추후 개선 방향
7. 느낀점
8. 폴더 구조

1. 프로젝트 소개

일상에 지쳐 있던 평일, 주말엔 나만의 농장을 가꾸고 싶지 않으신가요?

풍년 마켓은 나만의 농장을 만들기 위한 정보를 공유하고 직접 구매/판매도 할 수 있는 농산물 직거래 플랫폼입니다.

풍년 마켓을 통해 직접 수확한 농산물로 음식을 차리고, 일상에서 벗어나 자연을 직접 경험하며 일상에서의 스트레스를 풀어보는건 어떨까요?

이런 분들에게 추천합니다!

💁🏻‍♀️ 주말 농장을 갓 시작했어요 "최근 상추를 심었는데 많이 시들해졌어요.. 잘 키우는 방법을 알고 싶습니다!"
🙅🏻‍♀️ 채식에 관심이 있어요 "싱싱한 채소를 먹고 싶은데 너무 비싸네요.. 직거래로 조금이라도 싸게 구매하고 싶습니다!
🤦🏻‍♂️ 수확한 농작물이 너무 많아요 "수확한 농작물을 소진하는 게 너무 어려워요.. 버릴 수도 없고 저렴하게 팔고 싶습니다!"

풍년마켓 이용자의 후기입니다!

💁🏻‍♀️ "처음 텃밭을 만들며 실패를 여러번 겪었는데, 풍년마켓을 통해 많은 정보를 얻어 나아지고 있어요! 정말 감사합니다~!"
🙅🏻‍♀️ "주말 농장은 보통 본인이 먹으려고 시작하니 믿고 먹을 수 있고, 마트보다 저렴해서 좋습니다. 풍년마켓 이용하고나서 몸이 활력이 돌아요!"
🤦🏻‍♂️ "배추 100포기 어떻게 처리할까 막막했는데 풍년마켓 시작하고 판매왕 배지도 얻었어요! 배추를 잘 키우니 사업제안도 들어오네요^^"

• 취향에 맞는 농부를 팔로우해서 정보를 얻어보세요!
• 공유하고 싶은 사진과 이미지를 게시해보세요!
• 구매를 원한다면 판매자에게 채팅을 보내보세요!
• 판매를 원한다면 내 프로필에서 상품을 등록하세요!

기획 내용

• 팀 레포지토리
• 피그마 디자인

개발 기간

• 총 개발 기간 : 2022.12.06. ~ 2013.01.05.
  
• 기획 및 초기 설정 기간 : 2022.12.06. ~ 12.08.
  
• 개발 기간 : 2022.12.09. ~ 2023.01.05.

(🔼 Top)

2. 팀원 소개

강풍윤	고은영	김미경	김혜빈
🔗KANGPUNGYUN	🔗konveloper	🔗mixnuts211	🔗khv2644511
기획 담당	문서 관리 담당	디자인 담당	팀 리더

2.1. 역할 분담

🧅 강풍윤

• 스토리보드 작성 및 라우터 설정
• 공통 헤더 컴포넌트 구현
• 회원가입 기능 구현
• 내 프로필 수정 기능 구현
• 팔로워·팔로잉 기능 구현
• 프로필 팔로우/공유 기능 구현
• 로그아웃 기능 구현

🫒 고은영

• 게시글 등록·수정·삭제·신고 기능 구현
• 이미지 업로드 기능 구현
• 프로필에 등록된 상품 출력 기능 구현
• 게시글 좋아요/취소 기능 구현
• 채팅 페이지 UI 및 기능 구현
• 공통 네비게이션 바 컴포넌트 UI
• Notion 회의록 및 README.md 작성

🍎 김미경

• 로고, 캐릭터 디자인
• 글로벌 스타일 설정 및 페이지 콘테이너 레이아웃 설정
• 버튼, 모달 컴포넌트 구현
• 스플래쉬, 로딩, 404 화면 구현
• 홈 피드 페이지 및 게시물 이미지 슬라이드 구현
• 상품 등록·수정·삭제 기능 구현
• 댓글 등록·수정·삭제·신고 기능 구현

🍑 김혜빈

• eslint, prettier 셋팅
• Outlet을 통한 라우터 기능 구현
• 로그인 기능 구현
• 유저 검색 기능 구현
• 프로필, 게시글 상세 페이지, Input UI
• 공통 네비게이션 바 컴포넌트 기능 구현
• 유저 검색 기능 구현
• 게시글 좋아요/취소 기능 구현
• IntersectionObserver를 통한 무한 스크롤 기능 구현
• 게시글 조건부 렌더링 기능 구현

(🔼 Top)

3. 개발 환경

제목	내용
Front-End	React React Hooks Styled Components
Back-End	제공되는 API 사용
버전 및 이슈관리	Git GitHub Notion
컨벤션	eslint prettier
프로젝트 관리	Git Flow Github Projects Github issues Milestones
소통	Notion Discord Gather.town
배포	netlify

• react : 자바스크립트에 비해 배우는 기간이 짧아 경험할 기회가 부족했다고 느껴 학습 차원에서 리액트를 채택했습니다.
• Styled Components : props를 활용한 조건부 스타일링이 재활용성이 높기 때문에 리액트에서 활용하고 배워보고자 채택했습니다.
• eslint prettier : 팀원들의 코딩 스타일이 달라 원활한 협업과 팀워크를 맞추기 위한 도구로서 사용했습니다.
• Github Projects Github issues Milestones : 프로젝트 작업 흐름과 일정 관리는 깃허브의 기능들을 사용했습니다.
  약 3주간 진행되는 프로젝트로 일정관리가 중요하다고 느꼈기 때문에 UI작업 1주일, 기능 구현 2주일을 잡고 마일스톤을 이용하여 일정 관리를 진행했습니다.
  
• Git flow : 빠른 작업을 위해 Git Flow를 도입하였으며, 프로젝트 규모가 크지 않아 main dev feat 세 가지의 브랜치를 사용하는 전략을 택했습니다.

[컨벤션]

1. 네이밍 규칙
   

• 폴더명
  PascalCase
  
• 파일명
  REACT 컴포넌트 : PascalCase
  이미지파일 : kebab-case
  JSX : PascalCase
  JS : camelCase
  스타일드 컴포넌트 파일 : ~~Style.jsx
  
• 변수명
  일반적인 변수, 함수 : camelCase
  변수: ‘명사형' 무엇을 담고있는지 정확히 표현(예: numberOfPeople)
  불린형 변수: is~~
  함수 : ‘동사형' 무엇을 하는 함수인지 정확히 표현(예: getInputValue) ~Handler
  상수 : PascalCase
  생성자 함수, 클래스 : PascalCase
  이미지 변수 : 파일명 그대로 쓰되 camelCase (예: iconHeart)
  스타일드 컴포넌트 변수: 의미+Style
  (예: const ChatWrapStyle = styled.div, const EmailInputStyle = styled.input)

• URL : 소문자, 언더바 사용 (예: profile_edit)
• 이슈 : [Feat] 팔로우 기능 추가
• PR/커밋메세지 : Feat : 팔로우 기능 추가
  
  • JavaScript ES6+ 문법 사용, var 사용 금지, 세미콜론, 작은 따옴표 사용
    

2. Git 커밋 컨벤션
   Feat : 기능 추가 (브랜치 맨처음 커밋, 기능 추가)
   Add : 코드 추가 (어떠한 기능 내에 기능을 더 추가)
   Modify : 코드 수정, 파일 삭제(버그 수정, 코드 지우고, 추가하고, 수정하는 모든 과정들)
   Style : 컴포넌트 및 UI 구현 (스타일드 컴포넌트)
   Delete : 코드 삭제
   

(🔼 Top)

4. 팀 협업 방식

• 스토리보드 활용
  • 전체적인 작업 흐름을 팀원 모두가 공유하고 이해할 수 있었습니다.
  • 효율적인 업무 분담 : 페이지별로 분리하고 각 페이지에 필요한 기능 명세를 채워 세부적인 역할 분담을 원활하게 진행할 수 있었습니다.
• 데일리 스크럼
  • 매일 9시, 5시에 모여 금일 작업 내용과 진행 상황을 공유했습니다.
  • 팀 노션을 통해 회의록을 작성해 체크 리스트로 세부적인 진행 사항을 파악했습니다.
• 네 일이 곧 내 일!
  • 어려움이 있을 경우 공유해서 vscode의 live share를 활용해 팀원 모두 코드를 보면서 함께 해결해나갔습니다.
  • 완료한 작업은 merge 전 팀원에게 화면 공유를 통해 자신의 코드를 설명하여 자신이 담당하지 않은 부분도 파악하도록 했습니다.
• 공유하는 습관
  • 프로젝트 시작할 때 팀 원칙을 설정하고 준수했습니다. 적극적으로 의견 표현하기 어려움은 바로 공유하기
  • 비대면이었으나 Discord, Gather.town을 활용하여 실시간 의사소통으로 진행 상황을 빠르게 나누었습니다.
• 💡 팀원 모두 프로젝트와 리액트 경험이 처음이었으나, 이러한 협업 방식을 통해 📈500 커밋, 코드 리뷰 점수 80점📈을 달성하며 프로젝트를 완수했습니다.

(🔼 Top)

5. 구현 기능

• 홈

스플래쉬	회원가입	프로필 설정

로그인	홈 피드	계정 검색

팔로잉 팔로우	404	채팅

• 게시글

게시글 작성	게시글 수정	게시글 삭제

댓글 작성	댓글 삭제	댓글 신고

게시글 상세	게시글 신고	게시글 좋아요

|

• 프로필

내 프로필	내 프로필 수정	유저 프로필 팔로우

프로필 게시글 리스트/앨범형	유저 프로필 링크 공유	로그아웃

• 상품

상품 등록	상품 수정	상품 삭제

(🔼 Top)

6. 추후 개선 방향

• 전역 상태 관리

  • 현재 로컬 스토리지에 토큰과 유저 이름을 저장하여 관리하고 있습니다.
  • 전역에서 state 값으로 관리하거나 recoil을 도입하는 등 상태 관리할 방법을 고민해서 추후 적용해보려고 합니다.

• axios / API

  • 유지 보수와 코드 중복 최소화를 위해 서버와 통신하여 호출하는 모든 것들을 API 파일에 분리하여 관리할 예정입니다.
  • 복잡성을 낮추어 하나의 폴더만 보고도 API를 빠르게 파악할 수 있을 것입니다.

• 재사용되는 컴포넌트 분리

  • 추후 확장 및 유지 보수를 고려해 재사용되는 컴포넌트는 별도로 common 폴더에서 관리할 예정입니다.

• 풍년마켓 v1.1.0 (리팩토링)

  • 회원가입 form validation
  • 로그인 토큰 검증
  • 채팅방 목업 데이터로 재구현
  • 게시글 업로드/수정 페이지 하나로 합치기
  • 게시글 모달 중복코드 분리

(🔼 Top)

7. 느낀점

🧅 강풍윤 : 이번 멋사를 통해 리엑트를 처음 접해보았기 때문에 리엑트가 익숙하지 않았습니다. 익숙하지 않다보니 리엑트에서 많이 깨져보는 경험을 했던 것 같습니다. 스스로 에러를 해결해보기도 하고 팀원들과 공유해서 해결도 해보았습니다. 이 경험을 통해 어느새 리엑트가 익숙해져 있는 것을 느꼈습니다. 조원들과 소통하면서 전달할 프로젝트 이슈를 저 스스로 미리 정리해서, 전달하고자 하는 사항을 보다 구체적으로 설명할 필요성을 느꼈습니다. 이러한 부분 말고도 협업하면서 제가 개선해야할 점들을 발견하게 되고 이를 고치려는 노력해보면서 이 프로젝트를 통해 저 스스로가 더 많이 성장했다고 많이 느끼게 됩니다.

🫒 고은영 : 프로젝트 a-z 경험을 해보고 싶었는데 초기 설정부터 깃 브랜치, 이슈 관리, 작업의 우선순위와 흐름을 파악 할 수 있었습니다. 그동안 스스로 부족한 부분을 혼자 채우려는 경향이 있었는데 이번 프로젝트를 하면서 팀원들에게 물어보며 같이 방법을 찾거나 도움을 얻었습니다. 기꺼이 도와주는 팀원들 덕에 덜 창피해하고 더 질문할 수 있는 사람이 된 것 같습니다. 멘토님의 피드백을 통해 더 나은 코드를 고민하고 개선하는 경험도 뿌듯했고, 초반 코드를 다시 짜보기도 하는 등 빠른 시간 동안 성장했다는 게 느껴졌습니다. 모두 감사합니다.

🍎 김미경 : 멀리 가려면 함께 가라는 말의 의미를 진정으로 느낀 한 달이었습니다! 같이 협업해주고 도와주는 팀원들이 있어 온전히 몰입해서 즐겁게 프로젝트를 해 나갈 수 있었던거 같습니다. 신기하게 피곤하지도 힘들지도 않았습니다. 아직 가야할 길이 더 많지만 많은 걸 배우고 한 달 전보다 훨씬 더 성장했다는 걸 느꼈습니다. 좋은 경험을 할 수 있게 해준 팀원 분들 모두 너무 감사드려요 💖

🍑 김혜빈 : 혼자서는 경험하지 못할 깃, 협업, 소통하는 방법을 배울 수 있어서 좋았고 다른 사람의 코드를 읽고 이해하는 연습을 할 수 있는 경험이였습니다. 팀장을 맡아서 초반에 굉장한 부담감이 있었는데, 오히려 그 부담감이 저를 성장시키고 나태해지지 않도록 도와준 것 같아서 팀장 역할을 맡을 수 있게 해준 팀원들께 감사합니다. 그리고 잠시 쉬고싶을 때 항상 열심히 해주시는 모습에 저도 더 열심히 하게 된 것 같습니다. 혼자는 절대 마무리하지 못했을 것 같은 프로젝트인데 끝까지 함께 해주셔서 감사합니다💖

(🔼 Top)

8. 폴더 구조

📦public
 ├─ 📃index.html
📦src
   ├─ 📃API.jsx
   ├─ 📃App.jsx
   ├─ 📃index.js
   ├─ 📂_state
   │  └─ 📃auth.js
   ├─ 📂assets
   │  └─ 📁img
   ├─ 📂components
   │  ├─ 📁AlbumIcon
   │  ├─ 📁Blank
   │  ├─ 📁Button
   │  │  ├─ 📃Button.jsx
   │  │  └─ 📁UploadFileBtn
   │  ├─ 📁Chat
   │  │  ├─ 📁ChatListItem
   │  │  └─ 📁ChatRoom
   │  │     ├─ 📁ChatComment
   │  │     └─ 📁ChatItem
   │  ├─ 📁ChatIcon
   │  ├─ 📁Comment
   │  ├─ 📁CommentInput
   │  ├─ 📁CommentsIcon
   │  ├─ 📁Follow
   │  ├─ 📁FollowUserList
   │  ├─ 📁FollowersCount
   │  ├─ 📁Header
   │  ├─ 📁HomeRender
   │  ├─ 📁Input
   │  ├─ 📁LikeBtn
   │  ├─ 📁ListIcon
   │  ├─ 📁ListOrAlbum
   │  ├─ 📁Modal
   │  │  ├─ 📁LoginModalAlert
   │  │  ├─ 📁PostModalAlert
   │  │  └─ 📁ProductModalAlert
   │  ├─ 📁Nav
   │  ├─ 📁PostAlbum
   │  ├─ 📁PostAlbumList
   │  ├─ 📁PostCard
   │  ├─ 📁PostCardList
   │  ├─ 📁PostTxt
   │  ├─ 📁Product
   │  ├─ 📁ProductList
   │  ├─ 📁Profile
   │  ├─ 📁ProfileAccount
   │  ├─ 📁ProfileImg
   │  ├─ 📁ProfileImgAccount
   │  ├─ 📁ShareIcon
   │  └─ 📁UploadProfileImg
   ├─ 📂pages
   │  ├─ 📁Login
   │  │  ├─ 📃Login.jsx
   │  │  ├─ 📁LoginEmail
   │  ├─ 📁Main
   │  │  ├─ 📁Chat
   │  │  │  ├─ 📃Chat.jsx
   │  │  │  └─ 📁ChatRoom
   │  │  ├─ 📁Home
   │  │  │  ├─ 📃Home.jsx
   │  │  │  └─ 📁Search
   │  │  ├─📁 Post
   │  │  │  ├─ 📃Post.jsx
   │  │  │  ├─ 📁PostEdit
   │  │  │  └─ 📁PostUpload
   │  │  └─ 📁Profile
   │  │     ├─ 📁MyProfile
   │  │     │  ├─ 📁FollowList
   │  │     │  ├─ 📃MyProfile.jsx
   │  │     │  ├─ 📁Product
   │  │     │  │  ├─ 📁ProductEdit
   │  │     │  │  └─ 📁ProductUpload
   │  │     │  └─ 📁ProfileEdit
   │  │     └─ 📁UserProfile
   │  │        ├─📁 FollowList
   │  │        └─ 📃UserProfile.jsx
   │  ├─ 📁NotFound
   │  ├─ 📃Root.jsx
   │  ├─ 📁Signup
   │  │  ├─ 📃Register.jsx
   │  │  ├─ 📃Signup.jsx
   │  │  ├─ 📃SignupUserProfile.jsx
   │  └─ 📁Splash
   └─ 📂styles
      └─ 📃GlobalStyles.jsx

(🔼 Top)