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

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

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

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

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

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

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

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

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

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

- 🔍 검색

- 👨‍🌾👩🏻‍🌾 follow / unfollow

- 💙 좋아요

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

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

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

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

  npm install
  npm start

📦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