README.md

EarthUs

🌎 우리의 지구를 함께 지켜요!

배포 링크	ID	Password
https://earthus.netlify.app	[email protected]	123123

목차

• 1. 프로젝트 개요
• 2. 개발 환경
• 3. 협업 환경
• 4. 역할 분담
• 5. 프로젝트 구현
• 6. 핵심 기술
• 7. 트러블 슈팅

1. 프로젝트 개요

• EarthUs(얼스어스)는 제로 웨이스트와 관련된 서비스를 제공하는 플랫폼입니다.
• 제로 웨이스트에 관심있는 사용자가 모여 정보를 공유하고 의견을 나누는 SNS 공간입니다.
• 브랜드 및 개인 판매자의 상품 홍보를 지원해 제로 웨이스트 경제 생태계를 형성합니다.
• 뉴스레터 발행을 통해 제로 웨이스트에 대한 최신 소식과 정보를 제공합니다.

2. 개발 환경

2-1. 프로젝트 기간

• 프로젝트 기획: 2023.06.01 ~ 2023.06.11
• 프로젝트 개발: 2023.06.12 ~ 2023.06.27

2-2. 기술 스택

프론트엔드	백엔드
	제공 API 사용

종류	용도
React	웹/앱의 화면을 SPA로 개발할 수 있도록 사용
Recoil	전역 상태 관리를 위해 사용
Styled Component	스타일 구현의 편의를 위해 사용
@tanstack/react-query	비동기 API 실행을 위해 사용
axios	서버와 통신을 위해 사용
react-router-dom	페이지 라우팅을 위해 사용
uuid	컴포넌트 리스트의 유니크한 key 생성을 위해 사용
react-infinite-scroller	무한 스크롤 구현을 위해 사용
swiper	여러 장 이미지 스와이프를 위해 사용
styled-normalize	일관된 표준 스타일을 적용하기 위해 사용

(Top)

3. 협업 환경

3-1. 협업 컨벤션 (자세히 보기)

• 코드 컨벤션(ESlint, Prettier, 에어비앤비)
  • 코드 스타일 통일을 위해 ESlint를 기반으로 하는 에어비앤비 컨벤션을 사용하였습니다.
  • 코드 가독성 및 유지보수성 향상을 위해 작성 방식을 통일하였습니다.

{
  "singleQuote": false,
  "semi": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

• 커밋 컨벤션

🎉 init: 초기 설정
✨ feat: 기능 추가, 삭제, 변경
🐞 fix: 버그, 오류 수정
📃 docs: readme.md, json 파일 등 수정, 라이브러리 설치 (문서 관련, 코드 수정 없음)
🌈 style: CSS 등 사용자 UI 디자인 변경 (제품 코드 수정 발생, 코드 형식, 정렬, 주석 등의 변경)
🦄 refactor: 코드 리팩토링
🧪 test: 테스트 코드 추가, 삭제, 변경 등 (코드 수정 없음, 테스트 코드에 관련된 모든 변경에 해당)
🐎 ci: npm 모듈 설치 등
🐳 chore: 패키지 매니저 설정할 경우, etc 등

3-2. 협업 방식 (자세히 보기)

• 매일 아침 9시 데일리 스크럼 진행
• Git Flow 브랜치 전략 사용
• 디스코드 웹훅을 사용해서 github 활동 알림
• 피그마 디자인 시스템 사용 (자세히 보기)

3-3. 프로젝트 관리 및 이슈 (자세히 보기)

• Github Project를 통한 일정 관리 및 코드 리뷰
• Github Issue를 활용하여 업무 진행 확인 및 관리

(Top)

4. 역할 분담

프로젝트 구조

earth_us
├─ .eslintrc.json
├─ .gitignore
├─ .prettierrc.json
├─ .vscode
│  └─ settings.json
├─ README.md
├─ package-lock.json
├─ package.json
├─ public
│  ├─ _redirects
│  ├─ assets
│  │  ├─ favicon.ico
│  │  └─ meta.png
│  └─ index.html
└─ src
   ├─ App.js
   ├─ assets
   │  ├─ fonts
   │  └─ images
   ├─ components
   │  ├─ blank
   │  │  ├─ Blank.jsx
   │  │  └─ blank.style.js
   │  ├─ chatBubble
   │  │  ├─ ChatBubble.jsx
   │  │  └─ chatBubble.style.js
   │  ├─ chatPreview
   │  │  ├─ ChatPreview.jsx
   │  │  └─ chatPreview.style.js
   │  ├─ common
   │  │  ├─ a11yHidden
   │  │  │  ├─ A11yHidden.jsx
   │  │  │  └─ a11yHidden.style.js
   │  │  ├─ avatar
   │  │  │  ├─ Avatar.jsx
   │  │  │  └─ avatar.style.js
   │  │  ├─ breakLine
   │  │  │  └─ BreakLine.jsx
   │  │  ├─ button
   │  │  │  └─ Button.jsx
   │  │  ├─ card
   │  │  │  ├─ Card.jsx
   │  │  │  └─ card.style.js
   │  │  ├─ comment
   │  │  │  ├─ Comment.jsx
   │  │  │  └─ comment.style.js
   │  │  ├─ header
   │  │  │  ├─ Header.jsx
   │  │  │  └─ header.style.js
   │  │  ├─ imagePrev
   │  │  │  ├─ ImagePrev.jsx
   │  │  │  └─ imagePrev.style.js
   │  │  ├─ input
   │  │  │  ├─ Input.jsx
   │  │  │  ├─ InputError.jsx
   │  │  │  ├─ input.style.js
   │  │  │  └─ inputError.style.js
   │  │  ├─ modal
   │  │  │  ├─ Modal.jsx
   │  │  │  └─ modal.style.js
   │  │  ├─ qrCode
   │  │  │  ├─ QrCode.jsx
   │  │  │  └─ qrCode.style.js
   │  │  ├─ tabBar
   │  │  │  ├─ TabBar.jsx
   │  │  │  └─ tabBar.style.js
   │  │  └─ textArea
   │  │     ├─ TextArea.jsx
   │  │     └─ textarea.style.js
   │  ├─ loading
   │  │  ├─ Loading.jsx
   │  │  └─ loading.style.js
   │  ├─ onboarding
   │  │  └─ Onboarding.jsx
   │  ├─ profileFeed
   │  │  ├─ ProfileFeed.jsx
   │  │  └─ profileFeed.style.js
   │  ├─ profileHeader
   │  │  ├─ ProfileHeader.jsx
   │  │  └─ profileHeader.style.js
   │  ├─ profileProduct
   │  │  ├─ ProfileProduct.jsx
   │  │  └─ profileProduct.style.js
   │  └─ userInfo
   │     ├─ UserInfo.jsx
   │     └─ userInfo.style.js
   ├─ hooks
   │  ├─ useApiInfiniteQuery.jsx
   │  ├─ useApiMutation.jsx
   │  ├─ useApiQuery.jsx
   │  ├─ useImageUploader.jsx
   │  └─ useValidations.jsx
   ├─ index.js
   ├─ pages
   │  ├─ chat
   │  │  ├─ chatList
   │  │  │  └─ ChatList.jsx
   │  │  └─ chatRoom
   │  │     ├─ ChatRoom.jsx
   │  │     └─ chatRoom.style.js
   │  ├─ error404
   │  │  └─ Error404.jsx
   │  ├─ feed
   │  │  ├─ Feed.jsx
   │  │  └─ feed.style.js
   │  ├─ follow
   │  │  ├─ Follow.jsx
   │  │  └─ follow.style.js
   │  ├─ intro
   │  │  ├─ Intro.jsx
   │  │  └─ intro.style.js
   │  ├─ post
   │  │  ├─ postDetail
   │  │  │  ├─ PostDetail.jsx
   │  │  │  └─ postDetail.style.js
   │  │  └─ postUpload
   │  │     ├─ PostImageField.jsx
   │  │     ├─ PostUpload.jsx
   │  │     └─ postUpload.style.js
   │  ├─ product
   │  │  ├─ productDetail
   │  │  │  ├─ ProductDetail.jsx
   │  │  │  └─ productDetail.style.js
   │  │  └─ productUpload
   │  │     ├─ ProductUpload.jsx
   │  │     └─ productUpload.style.js
   │  ├─ profile
   │  │  ├─ profileDetail
   │  │  │  └─ ProfileDetail.jsx
   │  │  ├─ profileEdit
   │  │  │  ├─ ProfileEdit.jsx
   │  │  │  └─ ProfileEditForm.jsx
   │  │  └─ profileUpload
   │  │     ├─ ProfileImageField.jsx
   │  │     ├─ ProfileTitle.jsx
   │  │     ├─ ProfileUpload.jsx
   │  │     └─ ProfileUpload.style.js
   │  ├─ search
   │  │  └─ Search.jsx
   │  ├─ sign
   │  │  ├─ SignIn.jsx
   │  │  ├─ SignUp.jsx
   │  │  └─ sign.style.js
   │  └─ splash
   │     ├─ Splash.jsx
   │     └─ splash.style.js
   ├─ recoil
   │  ├─ earthusDataAtom.js
   │  ├─ modalConfigAtom.js
   │  ├─ modalStateAtom.js
   │  ├─ privateDataAtom.js
   │  └─ userDataAtom.js
   ├─ routes
   │  ├─ InitRoute.jsx
   │  ├─ PrivateRoute.jsx
   │  └─ Router.jsx
   ├─ styles
   │  ├─ GlobalFont.jsx
   │  └─ GlobalStyle.jsx
   └─ utils
      └─ config.js

4-1. 팀원 소개

심은지	윤지수	정신애
Team Leader Semantic Markup Leader	Documentation Leader Web Accessibility Leader	Design Leader Optimization Leader
github | Blog	github | Blog	github | Blog

4-2. 역할분담

(Top)

5. 프로젝트 구현

5-1. Ui

데스크탑	모바일

5-2. 페이지 설명 (자세히 보기)

로그인/회원가입

인트로	로그인	회원가입

홈

피드	검색	채팅

프로필

내 프로필	유저 프로필	팔로워

업로드

게시글 작성	댓글	상품 업로드

(Top)

6. 핵심 기술

6-1. 상태관리 라이브러리 도입 (자세히 보기)

• 상태 관리를 하나의 라이브러리로만 진행하는 것이 아니라 각각의 라이브러리의 장점을 살려 Client State를 관리하는 Recoil과 ServerState를 관리하는 ReactQuery를 조합하는 전략을 시행.

6-2. API 호출을 위한 커스텀 훅 제작 (자세히 보기)

• 사용자에게 데이터를 보여주는 get 메서드를 실행하는 경우 useQuery 기능을 실행.
• 사용자가 입력한 값을 전송하는 Post Put 메서드를 실행하는 경우 useMutation 기능을 실행.
• 사용자가 첨부한 이미지 파일을 전송하기 위해 Post 메서드를 실행하는 경우 useMutation 기능을 실행하고 첨부된 이미지 문자열을 치환해서 반환.
• 사용자가 스크롤할 때마다 새로운 데이터를 가져오기 위해 useQuery를 계속해서 호출하는 경우 react-infinite-scroller 라이브러리의 InfiniteScroll 컴포넌트와 호환성이 좋은 useInfiniteQuery 기능을 실행.

6-3. 시맨틱 마크업 (자세히 보기)

• 검색 API를 통한 기능 구현에서 일치하는 검색어를 표현할 때 사용자의 현재 활동과 연관이 있는 부분에 주의를 끌기 위해 사용하는 <mark>로 하이라이트 표현.

6-4. 웹 접근성 (자세히 보기)

• swiper slide 탭으로 페이지 전환 가능.
• 모달이 열렸을 때 모달 안에서 포커스 잃지 않고 이동.
• <input type=“file” />의 파일 선택 커스터마이징 버튼 탭 키로 접근 가능.
• 일치하는 검색어에 적용되는 하이라이트 기능을 청각적인 강조로 추가 구현.
• 실시간으로 업데이트 되는 채팅 메세지를 인식해 스크린 리더로 읽어주는 기능 구현.

(Top)

7. 트러블 슈팅

• [은지] 검색 기능 최적화를 위한 debouncing 적용
• [지수] useInfiniteQuery의 queryFn 파라미터 사용
• [신애] ReactQuery를 활용한 ServerState 제어

(Top)