✨무드캐처 (mood catcher)

📌바로가기

• 무드캐처 바로가기 : https://moodcatch.link/
• 프론트엔드 GitHub : https://github.com/moodCatcherProject/Front-End
• 백엔드 GitHub : https://github.com/moodCatcherProject/Back-End
• 시연 영상 보러가기 : https://youtu.be/YxuV_0BQvvY

무드캐처 자세히 보러 가기

무드캐처 트러블슈팅 보러 가기

📆 프로젝트 기간

• 2022/08/26 ~ 2022/10/07(6주)

👔 무드캐처 서비스 소개

무드 캐쳐를 꿈꾸는 모든 일반인들을 위한 커뮤니티 사이트.

⌖ 내 주변 사람들의 옷장을 알 수 있어요

• 지도를 통해 내 주변 사람들의 옷장을 볼 수 있습니다.
• 검색을 통해 내가 원하는 정보를 얻을 수 있습니다.

👗 다른 유저의 착장 정보를 알고 싶어요

• 다른 유저의 착장 정보를 볼 수 있고 착장 정보를 바로 사러 갈 수 있습니다.(무신사 연동)

👍 셀럽이 될 수 있어요

• 새로 올린 게시글은 메인에서 볼 수 있습니다
• 좋아요에 따른 메인의 핫게시물에 등재될 수도 있고 역대 핫게시물들을 볼 수 있는 명예의 전당이 있습니다.
• 게시물에 달린 댓글과 댓글 안의 댓글로 유저들끼리 소통을 할 수 있습니다.
• 유저들은 참여할 때마다 포인트를 받고 포인트로 레벨이 상승 돼 흥미도를 높일 수 있습니다.

주요 기능 소개

무한스크롤 기능

• 유저의 스크롤 위치에 따른 API 요청으로 무한 스크롤을 구현했습니다
• lodash 라이브러리의 throttle을 이용하여 동일 이벤트가 반복적으로 시행되는 경우, 이벤트의 실제 반복 주기와 상관 없이 임의로 설정한 일정 시간 간격으로 실행하게 하여 함수호출의 빈도를 감소시켰습니다.

카카오 맵 구현

• 주변 유저들의 위치를 알 수 있습니다
• 유저의 프로필을 클릭하면 유저의 옷장을 구경할 수 있습니다.

검색 기능

• 글의 제목이나 작성자로 검색이 가능합니다.
• url로 keyword와 sort를 넘겨주어 검색하는 방식으로 구현했습니다.
• 검색 결과 페이지에서 재검색을 했을 경우 state를 변경시켜 재렌더링시켰습니다.

PWA 구현

• 모바일 유저의 편의 성을 높이기 위해 PWA를 구현했습니다.

kakao 로그인 구현

• 유저의 접근성을 높이기 위해 소셜로그인을 도입했습니다.
• 카카오 개발자 페이지에서 닉네임/성별 창으로 토큰을 url로 주어 리다리엑트 하는 방식으로 구현했습니다.

회원가입, 로그인 시 비밀번호 암호화 구현

• 백엔드에서 DB로 저장할 때 암호화를 하기는 하지만
  회원가입과 로그인 때 네트워크 창에서 비밀번호가 공개되는 것을 방지하기 위해 암호화 해서 전송하고 있습니다.

프로젝트 구조

서비스 아키텍처

API 명세서

무드캐처의 API명세서 바로가기 : https://www.notion.so/API-de77ba4d0fee4713b1f8db051119d555

팀 소개

• React, Node.js 기반
• 개발인원: 7명
  1. Front-end: 박준수, 신수정
  2. Back-end: 조권영, 황수민, 이수범
  3. Designer: 김유나
  4. PM: 김승빈

기술스택

사용한 라이브러리(패키지)

    "axios": "^0.27.2", //서버와 통신
    "bcryptjs": "^2.4.3", //회원가입, 로그인시 비밀번호 암호화 전송
    "cross-env": "^7.0.3", //환경변수 관리
    "jwt-decode": "^3.1.2", //토큰 복호화
    "lodash": "^4.17.21", //무한스크롤 
    "react-hook-form": "^7.34.2", //폼 태그 유효성 검사
    "react-pwa-install": "^1.0.12", // PWA
    "react-redux": "^8.0.2", //데이터 전역상태관리
    "react-router-dom": "^6.3.0", // 페이지 전환
    "styled-components": "^5.3.5", //css 관리

데이터 흐름도

와이어 프레임

https://www.figma.com/file/jtjWzOYOVgJ5I4dtneHYwG/무드캐쳐?node-id=117%3A247