HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🙂
달리팀 노션/
🎰
달리 1팀/
☀️
웨더클로젯 README
☀️

웨더클로젯 README

프로젝트 소개

notion image

웨더클로젯(WeatherCloset) : 날씨의 옷장☀️🌈⛈❄️☃️

 

프로젝트 타겟, 목표

웨더 클로젯은 수치로만 제공되는 날씨의 불편함을 해소하여, 내 온도에 맞는 옷을 찾아갈 수 있도록 도와줍니다. 웨더 클로젯에서 사람들은 매일 자신의 스타일을 기록하고 평가하여, 내 온도에 맞는 스타일을 찾을 수 있습니다. 또한 다른 사람들의 스타일을 보며 날씨에 맞는 옷을 미리 선택할 수 있어 매일 아침 옷을 고르는 시간을 줄이고, 스타일의 만족도를 높여줍니다.

팀원소개(깃헙주소)

 
notion image
  • 🔗 고종현
notion image
  • 🔗 강푸름
notion image
  • 🔗 서진환
notion image
  • 🔗 이소정

환경설정

  • 린터, 포맷터 어떻게 설정했는지 등
    • airbnb룰을 따랐지만 팀원과 협의 후 끌껀 끄고, 킬껀 키고 (그래서 뭘끄고 켰는지... 개발생산성을 해치는 것을 껐다 → 뭔데?zzㅋㅋㅋㅋ)
  • netlify로 배포 [링크]

기술 스택

 
  • JavaScript
      • https://img.shields.io/badge/javascript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black
      notion image
      notion image
  • React
      • https://img.shields.io/badge/react-61DAFB?style=for-the-badge&logo=react&logoColor=black
      notion image
      notion image
  • Emotion
      • https://img.shields.io/badge/emotion-C571BE?style=for-the-badge&logo=emotion&logoColor=black
      notion image
      notion image
  • Storybook
      • https://img.shields.io/badge/storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white
      notion image
      notion image
  • axios + interceptor
      • https://img.shields.io/badge/axios-5233DB?style=for-the-badge&logo=emotion&logoColor=black
      notion image
      notion image
  • craco
      • https://img.shields.io/badge/craco-61DAFB?style=for-the-badge&logo=cracot&logoColor=black
      notion image
  • eslint + prettier (Airbnb 룰 적용 후 커스텀)
      • https://img.shields.io/badge/eslint-4B32C3?style=for-the-badge&logo=eslint&logoColor=white
      https://img.shields.io/badge/prettier-F7B93E?style=for-the-badge&logo=prettier&logoColor=black
      notion image
      notion image
      notion image
  • Lottie (이따 시연 기대해주세요😎)
      • https://img.shields.io/badge/lottie-7BCBC2?style=for-the-badge&logo=lottie&logoColor=black
      notion image
      notion image
  • dayjs (momentjs와 고민했는데 dayjs가 확장해서 쓰기 때문에 더 가벼워서)
      • https://img.shields.io/badge/dayjs-ED6A55?style=for-the-badge&logo=dayjs&logoColor=black
      notion image
      notion image
  • use-double-tap (더블 터치로 쉬운 게시물 좋아요)
      •  
  • Figma
      • https://img.shields.io/badge/figma-F24E1E?style=for-the-badge&logo=figma&logoColor=white
      notion image
      notion image

디렉토리 구조


├── craco.config.js
├── package.json
├── public
│   ├── _redirects
│   ├── favicon.ico
│   ├── index.html
│   ├── link_image.png
│   ├── logo192.png
│   ├── logo512.png
│   └── manifest.json
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── App.test.jsx
│   ├── assets
│   │   ├── logo
│   │   │   └── logo_line.png
│   │   └── lotties
│   │       ├── fireworks.json
│   │       ├── likeButton.json
│   │       └── more.json
│   ├── components
│   │   ├── base
│   │   │   ├── Avatar
│   │   │   ├── Badge
│   │   │   ├── Button
│   │   │   ├── Header
│   │   │   ├── Icon
│   │   │   ├── Image
│   │   │   ├── Input
│   │   │   ├── Modal
│   │   │   ├── Skeleton
│   │   │   ├── Slider
│   │   │   ├── Spinner
│   │   │   ├── Tab
│   │   │   ├── Text
│   │   │   ├── Toast
│   │   │   ├── Toggle
│   │   │   ├── Upload
│   │   └── domain
│   │       ├── BottomNavigation
│   │       ├── EditButton
│   │       ├── EvaluationModal
│   │       ├── FollowButton
│   │       ├── ImageEditor
│   │       ├── ImageUpload
│   │       ├── Loading
│   │       ├── PostTag
│   │       └── TopNavigation
│   ├── contexts
│   │   ├── AuthContext
│   │   │   ├── handles.jsx
│   │   │   ├── index.jsx
│   │   │   ├── reducer.jsx
│   │   │   ├── types.jsx
│   │   │   └── utils.jsx
│   │   ├── NavigationContext
│   │   │   ├── eventTypes.jsx
│   │   │   ├── index.jsx
│   │   │   ├── reducer.jsx
│   │   │   └── types.jsx
│   │   ├── PostProvider
│   │   │   ├── index.jsx
│   │   │   └── reducer.jsx
│   │   └── WeatherProvider
│   │       ├── index.jsx
│   │       ├── reducer.jsx
│   │       └── types.jsx
│   ├── hooks
│   │   ├── useClickAway.js
│   │   ├── useCookie.js
│   │   ├── useDebounce.js
│   │   ├── useForm.js
│   │   ├── useInfiniteScroll.js
│   │   ├── useInterval.js
│   │   ├── useIntervalFn.js
│   │   ├── useLocalStorage.js
│   │   ├── useTimeout.js
│   │   ├── useTimeoutFn.js
│   │   └── useToggle.js
│   ├── index.jsx
│   ├── pages
│   │   ├── CommentsPage.jsx
│   │   ├── ExplorePage.jsx
│   │   ├── HomePage.jsx
│   │   ├── LoginPage.jsx
│   │   ├── NotFoundPage.jsx
│   │   ├── NotificationsPage.jsx
│   │   ├── PostPage.jsx
│   │   ├── SignupPage.jsx
│   │   ├── UploadPage.jsx
│   │   ├── UserEditPage.jsx
│   │   ├── UserMenuPage.jsx
│   │   ├── UserPage.jsx
│   │   ├── UserPostsPage.jsx
│   │   └── index.jsx
│   ├── routes
│   │   ├── Router.jsx
│   │   └── utilRoutes
│   │       ├── PreventedRoute
│   │       ├── PrivateRoute
│   │       └── hooks
│   │           └── useLocalToken.js
│   ├── styles
│   │   └── theme.js
│   ├── template
│   │   └── DefaultTemplate.jsx
│   └── utils
│       ├── apis
│       │   ├── common.js
│       │   ├── snsApi.js
│       │   └── weatherApi.js
│       ├── constants
│       │   └── apiConstant.js
│       └── functions
│           ├── commonUtil.js
│           ├── dateUtil.js
│           └── weatherUtil.js
└── yarn.lock
 

와이어프레임

기능명세서 링크걸기
notion image
 

공통 세팅

로그인 여부에 따라 라우팅 보호 (Private / Prevented Route)

  • 로그인하지 않은 유저 의도된 시나리오로 유도

전역관리 (Context API)

회원 정보 전역 관리 (Auth)

세부 기능
  • 새로고침 시에도 사용자 정보 받아오기
  • 앱 전역에서 사용자 정보를 갱신 / 로그아웃 / 로그인 / 회원가입하기
  • 인증 토큰이 만료되거나 임의로 사용자로 수정할 경우, 자동 로그아웃
  • 각 api사용 시 로딩 UI 구현

날씨 정보 전역 관리 (Weather)

세부 기능
  • 현재 날씨의 정보 받아오기

상 / 하단 네비게이션 전역 관리 (Navigation)

세부 기능
  • 각 페이지에서 뒤로가기 / 다음가기 버튼에 각 페이지에서 이벤트 추가 관리
  • 각 페이지에서 상 / 하단의 아이콘의 상태를 관리

Axios Interceptor

세부 기능
  • axios interceptor 처리를 통해 axios 관련 설정을 추상화

주요 기능

로그인/회원가입/로그아웃 기능

notion image
notion image
notion image
notion image

팔로우, 좋아요, 댓글 작성 시 해당 유저에게 알림

notion image

다른 사람들의 옷차림을 쉽게 파악할 수 있도록 현재 기온을 기준으로 데이터를 필터링

notion image
notion image

업로드한 옷차림 평가

notion image

옷차림 업로드 시 이미지 편집, 태그 추가 기능

notion image
notion image
notion image

업로드 중인 데이터가 유지될 수 있도록 로컬스토리지 활용

notion image

무한스크롤로 끊임없는 탐색 피드 구현

notion image
notion image

게시물에 댓글 추가, 삭제 기능

notion image

유저페이지에서 온도별 게시물 필터링(카드뷰, 리스트뷰)

notion image
notion image

사용자 프로필 이미지, 닉네임, 비밀번호 수정 기능

notion image

네비게이션 탭

notion image

협업 방식

(깃 플로우, 이슈 작성 컨벤션, 규칙 등등 노션 문서 링크 걸기)

🕳️
Copy of github 컨벤션
🔎
Copy of git 으로 협업하기
 
 
 
<아래는 참고용>

로그인 / 회원가입 페이지

세부 기능
  • 빈 input과 email 형식 검증
  • 로그인 / 회원가입 성공 시, 토스트 메시지 유저 피드백
  • 에러 처리, 토스트 메시지로 유저 행동 유도

알림 페이지

세부 기능
  • 좋아요, 댓글, 팔로우 성공시, 해당 내용을 알림을 생성하는 api호출
  • 알림을 뷰에 보여주고, 프로필 사진 클릭 시 라우팅

메인 페이지

세부 기능
  • 날씨 API를 사용하여 한눈에 현재 기온 및 최저,최고기온을 확인
  • 현재 기온을 기준으로 데이터를 필터링 하여 다른 사람들의 옷차림을 쉽게 파악하여 오늘 무슨 옷차림으로 나갈지 도움을 받을 수 있음
  • 사용자가 자신의 옷차림을 업로드 했으면 '추웠어요, 좋았어요, 더웠어요' 중 하나를 선택하여 평가
  • 포스트 클릭시 탐색페이지로 라우팅되고 해당 포스트의 위치로 스크롤 이동

업로드 페이지

세부 기능
  • 업로드 페이지 진입 시, 현재 날씨 데이터 받아서 노출
  • 사진 업로드 시, 이미지 미리보기 구현
  • 사진을 업로드 시, 이미지를 편집(위치, 밝기, 대비, 채도, 흑백)기능 구현
  • 로컬스토리지에 작성중인 게시물 데이터를 저장해 새로고침해도 업로드 중인 데이터를 유지할 수 있도록 구현
  • 게시물에 스타일 태그 추가 기능 구현
  • 아직 평가하지 않은 게시물이 있는 경우, 평가 후 새로운 게시물 업로드할 수 있도록 구현

탐색 페이지

세부 기능
  • 무한 스크롤 및 skeleton ui
  • Lottie를 사용하여 좋아요 애니메이션 추가
  • 게시글에 더블클릭시 좋아요 기능
  • 팔로우, 언팔로우 기능
  • 업로드 페이지에서 이미지 필터를 적용했을 경우 조회되는 포스트들도 필터가 적용되도록 구현

댓글 페이지

세부 기능
  • dayjs를 이용하여 몇일전, 몇분전 코멘트를 적었는지 확인
  • 내 댓글 삭제 기능

유저 페이지

세부 기능
  • 주소에 유저 id가 아닌 유저닉네임을 작성하여 데이터를 불러오기
  • 유저가 좋아요한 포스트를 볼 수있는 기능
  • 온도별로 사진을 보여주는 기능
  • 본인 페이지에선 Edit Profile을 / 다른 사람의 페이지에선 Follow/UnFollow를 보여주도록 설정
  • 페이지에 있는 사진을 선택했을 때, 포스트를 보고있는 위치로 갈수 있도록 설정

사용자 정보 수정

세부 기능
  • 버튼하나로 프로필수정, 회원 이름변경, 비밀번호 변경을 할 수 있도록 만듬
  • 프로필 사진과 username이 변경되었을 경우, 새로운 username 마이페이지로 라우트함

유저 메뉴 페이지

세부 기능
  • 로그아웃