Weather Closet 소개
웨더클로젯(WeatherCloset) : 날씨의 옷장☀️🌈⛈❄️☃️
- 웨더클로젯은 날씨 맞춤 옷을 찾게 도와주는 서비스입니다.
🔗 웨더클로젯 - Netlify 배포
주요 기능 시연
1. 로그인 / 회원가입 / 로그아웃
2. 팔로우, 좋아요, 댓글 작성 시 해당 유저에게 알림!
3. 다른 사람들의 옷차림을 쉽게 파악할 수 있도록 현재 기온을 기준으로 데이터를 필터링
4. 업로드한 옷차림 평가
5. 옷차림 업로드 시 이미지 편집, 태그 추가 기능
6. 업로드 중인 데이터가 유지될 수 있도록 로컬스토리지 활용
7. 무한스크롤로 끊임없는 탐색 피드 구현
8. 게시물에 댓글 추가, 삭제 기능
9. 유저페이지에서 온도별 게시물 필터링(카드뷰, 리스트뷰)
10. 사용자 프로필 이미지, 닉네임, 비밀번호 수정 기능
11. 네비게이션 탭
공통 세팅
로그인 여부에 따라 라우팅 보호 (Private / Prevented Route)
- 로그인하지 않은 유저 의도된 시나리오로 유도
전역관리 (Context API)
회원 정보 전역 관리 (Auth)
- 새로고침 시에도 사용자 정보 받아오기
- 앱 전역에서 사용자 정보를 갱신 / 로그아웃 / 로그인 / 회원가입하기
- 인증 토큰이 만료되거나 임의로 사용자로 수정할 경우, 자동 로그아웃
- 각 api사용 시 로딩 UI 구현
날씨 정보 전역 관리 (Weather)
- 현재 날씨의 정보 받아오기
상 / 하단 네비게이션 전역 관리 (Navigation)
- 각 페이지에서 뒤로가기 / 다음가기 버튼에 각 페이지에서 이벤트 추가 관리
- 각 페이지에서 상 / 하단의 아이콘의 상태를 관리
Axios Interceptor
- axios interceptor 처리를 통해 axios 관련 설정을 추상화
페이지 별 구현사항
와이어프레임
로그인 / 회원가입 페이지
- 빈 input과 email 형식 검증
- 로그인 / 회원가입 성공 시, 토스트 메시지 유저 피드백
- 에러 처리, 토스트 메시지로 유저 행동 유도
알림 페이지
- 좋아요, 댓글, 팔로우 성공시, 해당 내용을 알림을 생성하는 api호출
- 알림을 뷰에 보여주고, 프로필 사진 클릭 시 라우팅
메인 페이지
- 날씨 API를 사용하여
한눈에 현재 기온및 최저,최고기온을 확인
현재 기온을 기준으로 데이터를 필터링 하여다른 사람들의 옷차림을 쉽게 파악하여 오늘 무슨옷차림으로 나갈지 도움을 받을 수 있음
- 사용자가 자신의 옷차림을 업로드 했으면 '추웠어요, 좋았어요, 더웠어요' 중 하나를 선택하여
평가
- 포스트 클릭시 탐색페이지로 라우팅되고
해당 포스트의 위치로 스크롤이동
업로드 페이지
- 업로드 페이지 진입 시, 현재
날씨 데이터받아서 노출
- 사진 업로드 시,
이미지 미리보기구현
- 사진을 업로드 시, 이미지를
편집(위치, 밝기, 대비, 채도, 흑백)기능 구현
로컬스토리지에 작성중인 게시물 데이터를 저장해 새로고침해도 업로드 중인데이터를 유지할 수 있도록 구현
- 게시물에 스타일 태그 추가 기능 구현
- 아직 평가하지 않은 게시물이 있는 경우, 평가 후 새로운 게시물 업로드할 수 있도록 구현
탐색 페이지
무한 스크롤및 skeleton ui
Lottie를 사용하여 좋아요 애니메이션 추가
- 게시글에
더블클릭시 좋아요 기능
- 팔로우, 언팔로우 기능
- 업로드 페이지에서 이미지
필터를 적용했을 경우 조회되는 포스트들도 필터가 적용되도록 구현
댓글 페이지
dayjs를 이용하여 몇일전, 몇분전 코멘트를 적었는지 확인
- 내
댓글 삭제기능
유저 페이지
- 주소에 유저 id가 아닌
유저닉네임을 작성하여 데이터를 불러오기
- 유저가 좋아요한 포스트를 볼 수있는 기능
- 온도별로 사진을 보여주는 기능
- 본인 페이지에선 Edit Profile을 / 다른 사람의 페이지에선 Follow/UnFollow를 보여주도록 설정
- 페이지에 있는 사진을 선택했을 때, 포스트를 보고있는 위치로 갈수 있도록 설정
사용자 정보 수정
- 버튼하나로 프로필수정, 회원 이름변경, 비밀번호 변경을 할 수 있도록 만듬
- 프로필 사진과 username이 변경되었을 경우, 새로운 username 마이페이지로 라우트함
유저 메뉴 페이지
- 로그아웃
디렉토리 구조
├── craco.config.js ├── package.json ├── public ├── src │ ├── assets │ │ ├── logo │ │ └── lotties │ ├── components │ │ ├── base │ │ └── domain │ ├── contexts │ │ ├── AuthContext │ │ ├── NavigationContext │ │ ├── PostProvider │ │ └── WeatherProvider │ ├── hooks │ ├── pages │ ├── routes │ │ └── utilRoutes │ │ └── hooks │ ├── styles │ ├── template │ └── utils │ ├── apis │ ├── constants │ └── functions └── yarn.lock
팀원 소개
기술 스택
- JavaScript
- React
- Storybook
- Axios
- Craco
- Emotion
- Lottie
- Netlify
- ESLint + Prettier
- Figma
- Dayjs