‘밥친구 구하기’ 플랫폼, 모모는 제로베이스에서 진행한 팀 프로젝트입니다.

2인 이상이 기본인 메뉴를 먹고 싶을 때나 유명한 맛집을 가고 싶을 때, 혹은 단순히 혼자 밥이 먹기 싫을 때 같이 밥을 먹을 수 있는 밥친구를 편하고 간단히 구할 수 있는 기능을 제공하는 웹사이트입니다.

팀 구성 : Back-End 3, Front-End 2

발표 자료 : [Demo] MOMO(모든 식사, 모두와 함께) Github : https://github.com/Team-momo-front/momo-front

개발 기간

2023.12.16 ~ 2025.01.23 : 프로젝트 DEMO 발표

2025.02 : 미완성 기능 구현 및 리팩토링(주요 기능 및 채팅, 알림)

사용 기술

Skill

• React
• TypeScript
• Axios
• TanStack Query
• Recoil
• Vite

Style

• Tailwind
• DaisyUI

ETC

• Kakao API
• figma
• slack
• notion

기여한 부분

✨ 프로젝트 디자인 시스템 기반 마련

• 프로젝트 전반에 사용할 수 있는 디자인 시스템 기반 마련
  • 기본 폰트, 컬러, 애니메이션 등 Tailwind Custom Utility Style로 정의
  • DaisyUI에서 기본으로 제공하는 Button, Input 등의 hover, focus, disabled 스타일을 커스터마이징
• 협업을 위한 공용 스타일을 정의하여 팀원간 UI/UX의 통일성을 갖도록 함

✨ 회원가입 & 소셜 로그인

• 이메일 기반 회원가입 & 이메일 인증 구현
• 일반 회원 로그인 & 로그아웃
• Kakao 로그인 구현
  • 동의 후 리다이렉트할 수 있는 컴포넌트 구현
• 비밀번호 재설정 구현
  • 프로젝트 전반적으로 API 호출시 TanStack Query를 사용해 서버 호출 상태(isPending, isError 등)에 따라 렌더링 처리를 하여 UX 개선을 위해 노력함

🚀 트러블 슈팅

• 백엔드 담당자와 회원가입 프로세스 이해 오류 발생
  • UI 구현을 마치고 연동을 진행하던 중, 이메일 인증 API가 이메일 코드 발급 방식이 아닌 이메일 인증 링크 발송으로 구현됨을 담당자를 통해 확인
  • 백엔드 담당자와의 의사소통 오해로 생긴 이슈로 기존에 진행하기로 했던 방식인 인증 코드 발급으로 API 수정을 결정
  • 추가 재수정을 막기 위해 백엔드 담당자와 화면을 공유하며 프로세스 재검증을 실시
  • 재검증 과정 중, 회원가입 API에 인증 코드 발송이 포함되어 있으므로 회원가입 폼 입력 페이지와 인증 코드 입력 페이지의 분리가 필요함을 인지
  • 백엔드 API 수정과 프론트엔드 페이지 수정을 통해 해당 기능 구현 완료
• 카카오 로그인 리다이렉트 컴포넌트 구현
  • 카카오 로그인 프로세스 논의 없이 백엔드 API 구현이 이루어져 실제 API 연동시 리다이렉트 URI가 백엔드 주소로 잘못 설정되어 이슈 발생
  • KakaoLogin 컴포넌트를 생성 후 프론트 로컬 주소를 URI 주소로 설정하여 해결
  • 리다이렉트 이후 쿼리로 전달된 코드를 콜백 API에 담아서 보내도록 구현

회원가입

소셜 로그인

비밀번호 재설정

✨ 프로필 생성 및 수정 기능

• 프로필 생성 및 수정 기능 구현
  • 프로필 이미지 파일과 기본 정보를 담은 JSON 데이터를 서버로 보내기 위해 FormData 사용
• UX 향상을 위해 기본 이미지 설정 기능 추가 구현

🚀 트러블 슈팅

• 프로필 검증 처리
• 기본 이미지 설정

✨ 마이페이지