Name		Name	Last commit message	Last commit date
Latest commit History 475 Commits
.vscode		.vscode
public		public
src		src
.babelrc		.babelrc
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.prettierrc.json		.prettierrc.json
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

Repository files navigation

EarthUs

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

배포 링크	ID	Password
https://earthus.netlify.app	jigujoa@user.com	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	일관된 표준 스타일을 적용하기 위해 사용

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를 활용하여 업무 진행 확인 및 관리

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. 역할분담

5. 프로젝트 구현

5-1. Ui

데스크탑	모바일

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

로그인/회원가입

인트로	로그인	회원가입

홈

피드	검색	채팅

프로필

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

업로드

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

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” />의 파일 선택 커스터마이징 버튼 탭 키로 접근 가능.
일치하는 검색어에 적용되는 하이라이트 기능을 청각적인 강조로 추가 구현.
실시간으로 업데이트 되는 채팅 메세지를 인식해 스크린 리더로 읽어주는 기능 구현.

7. 트러블 슈팅

About

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

earthus.netlify.app

react sns reactquery

Report repository

Releases

No releases published

Packages

No packages published

Languages

JavaScript 99.6%
HTML 0.4%