Skip to content

FRONTENDSCHOOL5/final-18-EarthUs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

EarthUs

μ–ΌμŠ€μ–΄μŠ€

🌎 우리의 지ꡬλ₯Ό ν•¨κ»˜ μ§€μΌœμš”!

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


λͺ©μ°¨



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. νŠΈλŸ¬λΈ” μŠˆνŒ…



(Top)

About

🌍 μ œλ‘œμ›¨μ΄μŠ€νŠΈ SNS ν”Œλž«νΌ

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •