Skip to content

prgrms-web-devcourse/Team-DarkNight-Kkini-FE

Repository files navigation

랜덤 음식점 추천 및 밥모임 제공 서비스

끼니 로고

우리가 해결하고자 했던 문제

  • 오늘 무엇을 먹을지 : 사용자의 현재 위치에 기반하여 근처의 음식점을 랜덤으로 뽑아줍니다.
  • 혼자 가기엔 애매한데 누구랑 갈지 : 여러 사람과 함께 음식점에 방문할 수 있도록 밥모임 서비스를 제공합니다.

기획 배경 및 기대 효과

Kkini는 현재 위치에 기반하여 주변의 음식점을 랜덤으로 추천해줍니다. 또한, 혼자서는 두려운 음식점을 방문할 수 있도록 밥모임 모집 서비스를 제공합니다.

식사 해결에 고민하는 시간을 줄이고, 나아가 인연을 만날 수 있는 기회를 제공하며 음식점 현장 방문을 장려하기 위해 Kkini를 기획하였습니다.


Kkini 서비스 바로가기

발표 영상 보러 가기

발표 영상 썸네일





Demo

랜덤 음식점 뽑기 밥모임 생성 밥모임 상태 변경
랜덤 음식점 뽑기 밥모임 생성 밥모임 상태 변경
리뷰 작성하기 신청서 보내기 신청서 수락 및 거절
리뷰 작성하기 신청서 보내기 신청서 수락 및 거절
밥모임 채팅 카카오, 구글 소셜 로그인 프로필 이미지, 닉네임, 간단소개 변경
밥모임 채팅 카카오, 구글 소셜 로그인 프로필 이미지, 닉네임, 간단소개 변경




프로젝트 관련 문서

Git 전략

코딩 컨벤션





팀원

신동우 신승준 한수화




기술 스택





폴더 구조

  • UI랑 비즈니스 로직 분리를 위해 utils, hooks폴더 활용
    • hooks 사용 시, hooks폴더
    • 사용안할 경우, utils
src
 ┣ apis
 ┣ components
 ┃ ┣ ...
 ┃ ┗ common # Header, Navigation, Button 등 공통으로 쓰이는 컴포넌트 폴더
 ┣ contexts
 ┃ ┗ kakaoMap # kakao를 통해 만든 객체들을 context로 저장
 ┣ hooks
 ┃ ┣ ...
 ┃ ┗ query # useQuery, useMutation 등 react-query 훅 폴더
 ┣ pages
 ┃ ┣ food-party
 ┃ ┃ ┣ detail
 ┃ ┃ ┃ ┣ chat
 ┃ ┃ ┃ ┃ ┗ [roomId].tsx # 채팅방 페이지
 ┃ ┃ ┃ ┗ [partyId].tsx # 밥모임 상세 페이지
 ┃ ┃ ┣ list
 ┃ ┃ ┃ ┣ restaurant
 ┃ ┃ ┃ ┃ ┗ [placeId].tsx # 음식점으로 검색한 밥모임 목록을 페이지
 ┃ ┃ ┃ ┗ my.tsx # 자신이 참여 중인 밥모임 목록을 보여주는 페이지
 ┃ ┃ ┣ review
 ┃ ┃ ┃ ┗ [partyId].tsx # 밥모임 식사 완료 후 리뷰를 작성할 수 있는 페이지
 ┃ ┃ ┣ application.tsx # 자신이 다른 밥모임에 보낸 신청서, 자신이 만든 밥모임에 들어온 신청서 목록을 보여주는 페이지
 ┃ ┃ ┗ create.tsx # 밥모임을 생성하는 페이지
 ┃ ┣ user
 ┃ ┃ ┣ [userId].tsx # 나의 프로필 페이지
 ┃ ┃ ┗ edit.tsx # 나의 프로필 수정 페이지
 ┃ ┣ 404.tsx
 ┃ ┣ _app.tsx
 ┃ ┣ _document.tsx
 ┃ ┣ index.tsx
 ┃ ┗ oauth.tsx # 소셜 로그인 페이지
 ┣ services # useQuery, useMutation에 사용되는 비즈니스 비동기 로직 폴더
 ┣ stores # recoil로 저장하는 상태들을 정의하는 폴더
 ┣ styles
 ┣ types
 ┗ utils
 ┃ ┣ constants
 ┃ ┣ helpers
 ┃ ┗ validations




백엔드 레포지토리

https://github.com/prgrms-web-devcourse/Team-DarkNight-Kkini-BE