농부와 직접 소통하는 농산물 직거래앱 어스마켓

[배포 URL]

• URL: https://earthmarket.vercel.app/
• 계정
  • 🧑🏻‍💻 ID: [email protected]
  • 🔐 PassWord: earthmarket

💡 개요

🌍 어스마켓은 'us'와 'earth' 두 가지 단어의 의미를 내포하고 있습니다.

👨‍🌾 우리와 지구 모두를 위한 마켓으로 기존 전통 시장의 장점을 살려 비대면 시대에서 농부와 고객을 연결하는 서비스입니다.

💬 판매자는 농사지은 농산물을 판매할 수 있으며 고객은 언제든 상품에 대한 질문이 가능합니다.

👥 모든 서비스 사용자는 자신의 일상을 공유할 수 있으며 사용자 간의 팔로우가 가능해 다른 사용자의 피드를 확인할 수 있습니다.

💡 어스마켓은 상품을 판매하는 앱을 넘어 사회적 문제를 해결하는 가치에 집중했습니다.

💪🏻 코로나 이후 어려움을 겪는 농부와 건강한 먹거리를 찾는 고객이 쉽고 간단한 방법으로 소통할 수 있도록 어스마켓이 도울 것입니다!

🧑🏻‍💻 팀원 소개

FE 최재영	FE 김현길	FE 조미진	FE 김지수
blog: Herman`s BigData github: goawmfhfl	blog: 네이버 github: hyunghilkim	blog: m122 github: mmcho122	blog: jisu.log github: jisu2433

⚙️ 개발 환경 및 배포 URL

[기술]

• FrontEnd: React, Redux, Styled-components
• BackEnd: 제공된 API 사용

[개발 환경]

• EarthMarket WorkPlace: 🚀 어스마켓 워크플레이스
• Conference: 💬 함께 진행한 회의록
• UseFulURL: 🔗함께 공유한 URL
• Coding Convention: ⚙️함께 정한 코딩 컨벤션
• Study ✏️ 함께 진행한 스터디

[배포 URL]

• URL: https://earthmarket.vercel.app/
• 계정
  • 🧑🏻‍💻 ID: [email protected]
  • 🔐 PassWord: earthmarket

💡 요구사항

[기능]

- 🔐 인증
    - 로그인
    - 회원가입
    - 회원 정보 수정
    - 유효성 평가

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

- 🏞 게시글
    - 게시글 목록 / 등록 / 수정 / 삭제
    - 다중 이미지 파일 업로드 / 수정 / 미리보기

- 💬 댓글
    - 댓글 등록 / 삭제

- 🔍 검색

- 👨‍🌾👩🏻‍🌾 follow / unfollow

- 💙 좋아요

[UI Interaction]

- 이미지 슬라이드
- 모달
- splash animation
- 버튼 활성화
- (무한스크롤)

🧑🏻‍💻 역할 분담

🧑🏻‍💻 최재영 - 문서화 및 UI Interection

• 스타일링 및 기능 구현
• 농촌 뉴스 API 구현 (xml to json)
• 페이지 (HomeFeed, Profile) 스타일링 및 리팩토링
• 이미지 슬라이더 구현
• 메뉴 및 모달 기능 구현
• profile 액자, 갤러리 구분 보기 구현
• 그 외 팀원들이 작성한 코드 CodeReview 통해 숙지 및 구현

🧑🏻‍💻 김현길 - API 통신 및 Redux 환경 구축

• 상태 관리 (Redux) 설계 및 구현
• 프로젝트 내 API요청 (23개) 구현
• routes 설계 및 구현
• react-hook-form 활용하여 유효성 평가 및 form 관련 기능 구현
• 이미지 파일 업로드 / 수정 / 미리보기 구현
• 기능 이슈 관련 디버깅
• 반복되는 함수 추상화 작업으로 유지보수 개선
• 서비스 배포

👩🏻‍💻 김지수 - 프로젝트 아이디어 기획 및 스타일링

• 스타일링 및 기능 구현
• 페이지(Login, Join, Search, FollowerList, FollowingList) 스타일링
• 페이지(Login, Join) 리팩토링
• 로그인, 회원가입, 상품 업로드 유효성 검사 기능 구현
• 어스마켓 기획

👩🏻‍💻 조미진 - 프로젝트 전반적인 디자인 및 스타일링

• 스타일링 및 기능 구현
• 페이지 (Upload, Edit, Information) 스타일링 및 리팩토링
• 농촌 뉴스 API 데이터 바인딩
• 가격 원단위, 이미지 삭제 기능 구현
• 웹 접근성 개선
• 기획 참여 및 디자인

🧑🏻‍💻 구현 기능

0.splash	1.회원가입

2.로그인	3.홈화면

4.계정 검색	5.농촌소식

6.마이 프로필	6-1.마이 프로필 수정

7.상품 등록	7-1.상품 등록 수정

8.게시글 등록	8-1.게시글 등록 수정

9.팔로우, 팔로워	10.유저 프로필

11.게시글 댓글, 삭제	12.게시글 신고

13.상품 댓글, 삭제	14.상품 신고

💥 협업하며 겪은 이슈

✅ WorkSpace를 통한 “병목현상 제거”

- 팀 레파지토리를 운영하면서 발생한 병목현상을 “작업 현황판”을 만들어 해결했습니다.
- 리팩토링을 진행하며 기존에 있던 작업들의 내용을 한곳으로 모으는 작업 중에 있었습니다.
- 작업을 진행하면서 동일한 페이지에서 작업을 하지만 서로가 인지하지 못하는 문제가 발생했고, 그에 따라서 충돌이 자주 발생하게 되었습니다.
- 이어서 수정 사항이 반영되지 않는 문제가 발생했고, 원래 동작하던 기능이 동작하지 않는 문제가 발생했습니다.
- 이틀간의 디버깅 과정을 통해서 다시 원상복구를 하는데 성공했고, 이와 같은 문제를 다시 일으키지 않기 위해서 팀원과 함께 규칙을 정했습니다.
- 회의를 통해 GitHub 작업 현황판을 만들어 서로의 작업 현황을 공유하는 환경을 만들었습니다.
- 결국 서로 간에 작업 현황에 대하여 더욱 이해할 수 있게 되었으며, 동일한 문제를 반복하지 않게 되었습니다.

3줄 요약

1. 팀원들과 함께 공용 레파지토리를 통한 형상관리 중 충돌로 인한 기능 오류가 생김
2. 디버깅하는데 오랜 시간이 걸렸고, 이를 해결하기 위해 협의를 통해 “Git Hub 작업 현황판”을 만듦
3. 서로의 작업 현황을 이해할 수 있게 되었으며, 동일한 문제를 반복하지 않게 되었음.

✅ 페어프로그래밍 및 스터디를 통한 “문제 해결“

- 협업을 하면서 맞이한 문제를 빠르게 해결하기 위해 팀원들과 페어 프로그래밍을 진행했습니다.
- 또한 부족한 기술을 보충을 위한 스터디를 진행하면서 프로젝트를 완성시켰습니다.
- 리액트 환경에 익숙하지 않은 팀원들과 함께 프로젝트를 진행하면서 가장 중요했던 것은 서로 간의 지식 공유 였습니다.
- 이를 더욱 효율적으로 하기 위해 매주 한 번씩은 리액트 스터디를 진행하여 새로 배우는 기술에 적응하기 위한 노력을 함께 했습니다.
- 또한 함께 문제를 해결할 수 있는 환경을 만들기 위해 매일 아침 10시 디스코드에 모여 한 공간에서 작업을 했습니다.
- 문제가 발생하면 빠르게 화면공유와 LiveShare를 통해서 함께 고민하고 해결해 나아갔습니다.

2줄 요약

1. 프로젝트를 진행하며 맞이한 문제를 해결하기 위해서 페어 프로그래밍 및 스터디를 함께 진행
2. 페어 프로그래밍을 통한 빠른 문제 해결, 스터디를 통한 리액트 이해도를 높임

✅ Refactoring을 통한 “ 효율적인 코드 분리 “

• (왼쪽) 리팩토링 이후 (오른쪽) 리팩토링 이전

- 리액트에서 컴포넌트 분리 경험이 없는 팀원들과 함께 리팩토링을 통하여 효율적인 아키텍처를 만들었습니다.
- 초반 프로젝트에 디자인 시스템을 적용하기 위해서 원자 - 분자 - 템플릿 - 페이지 단위의 아키텍처를 구성하습니다.
- 하지만 스타일 로직과 비즈니스 로직에 대한 이해도가 부족해 결국 리팩토링 진행함.
- 이어서 재도전으로 모듈 - 템플릿 - 페이지를 시도하였으나, 이마저도 비즈니스 로직과 병합하는 과정에서 코드의 흐름을 예측하기 힘든 문제가 발생하였습니다.
- 마지막으로 컴포넌트 - 페이지 단위의 아키텍처 구성하였습니다.
- 비록 리팩토링 과정을 통해서 코드를 여러 번 고쳤지만, 그 과정에서의 실패와 실수를 통해서 팀원들 모두가 이해할 수 있는 아키텍처를 구상하였습니다.

3줄 요약

1. 초반 설계시 아토믹 디자인 패턴을 적용하기 위해서 아키텍처를 구상함
2. 디자인 패턴적용에 실패하며 3회 리팩토링을 진행하여 아키텍처를 구성함
3. 결국 팀원들 모두가 비즈니스 로직과 스타일링 로직을 이해하여 코드의 흐름을 예측할 수 있었음

🚀 실행방법

🖥 코드 실행

  npm install
  npm start

Defendency

🌲 파일 구조

📦src
 ┣ 📂actions
 ┣ 📂asset
 ┃ ┣ 📂font
 ┃ ┣ 📂icon
 ┣ 📂components
 ┃ ┣ 📂common
 ┃ ┃ ┣ 📂Alert
 ┃ ┃ ┣ 📂CommonHeader
 ┃ ┃ ┣ 📂Modal
 ┃ ┃ ┣ 📂Navbar
 ┃ ┃ ┣ 📂PostCard
 ┃ ┃ ┣ 📂PostIconBox
 ┃ ┃ ┗ 📂UploadHeader
 ┃ ┣ 📂etc
 ┃ ┃ ┣ 📂Error
 ┃ ┃ ┣ 📂Loading
 ┃ ┃ ┗ 📂NotFoundContainer
 ┃ ┣ 📂follow
 ┃ ┃ ┣ 📂FollowerCard
 ┃ ┃ ┣ 📂FollowerContainer
 ┃ ┃ ┣ 📂FollowingCard
 ┃ ┃ ┗ 📂FollowingContainer
 ┃ ┣ 📂header
 ┃ ┃ ┣ 📂FollowHeader
 ┃ ┃ ┣ 📂HomeHeader
 ┃ ┃ ┗ 📂InformationHeader
 ┃ ┣ 📂home
 ┃ ┃ ┗ 📂HomeContainer
 ┃ ┣ 📂information
 ┃ ┃ ┣ 📂InformationCard
 ┃ ┃ ┗ 📂InformationContainer
 ┃ ┣ 📂join
 ┃ ┃ ┣ 📂JoinMember
 ┃ ┃ ┗ 📂JoinProfile
 ┃ ┣ 📂login
 ┃ ┃ ┣ 📂LoginCard
 ┃ ┃ ┣ 📂LoginContainer
 ┃ ┃ ┣ 📂LoginEmail
 ┃ ┃ ┗ 📂SplashCard
 ┃ ┣ 📂postUpdate
 ┃ ┣ 📂postUpload
 ┃ ┣ 📂postView
 ┃ ┃ ┣ 📂CommentCard
 ┃ ┃ ┣ 📂CommentItem
 ┃ ┃ ┗ 📂PostViewContainer
 ┃ ┣ 📂productUpdate
 ┃ ┣ 📂productUpload
 ┃ ┣ 📂profile
 ┃ ┃ ┣ 📂AlbumGallery
 ┃ ┃ ┣ 📂GalleryContainer
 ┃ ┃ ┣ 📂ProductCard
 ┃ ┃ ┣ 📂ProductContainer
 ┃ ┃ ┣ 📂ProfileCard
 ┃ ┃ ┗ 📂ProfileContainer
 ┃ ┣ 📂profileUpdate
 ┃ ┗ 📂search
 ┃ ┃ ┣ 📂SearchBar
 ┃ ┃ ┣ 📂SearchCard
 ┃ ┃ ┗ 📂SearchContainer
 ┣ 📂constants
 ┣ 📂pages
 ┣ 📂reducers
 ┣ 📂styles
 ┣ 📂util
 ┣ 📜App.js
 ┣ 📜index.js
 ┗ 📜store.js