Skip to content

kakao-tech-campus-2nd-step3/Team16_FE

BranchesTags

Repository files navigation

Team16_FE

[Babting] 프로젝트 소개

목차

밥팅-removebg-preview

내용 설명
프로젝트 이름 밥팅
한줄 소개 모임 참여자들의 일정과 음식 선호도를 반영하여
최적의 약속 시간과 메뉴를 추천하는 서비스
개발 기간 2024.09 - 2024.11

카카오 테크 캠퍼스 2기 전남대 16조 프로젝트입니다.

🎯 기획 의도

식사 약속을 계획할 때 여러 사람의 일정과 음식 취향을 맞추는 것은 생각보다 많은 시간과 노력을 필요로 합니다. 특히 가족, 친구, 직장 동료 등 다양한 사람들과 모임을 계획할 때 참여자들 간의 스케줄을 조율하고 모두가 만족할 메뉴를 고르는 과정에서 불편함이 발생할 수 있습니다.

현재 약속 조율 서비스는 많지만, 약속 위치와 일정 그리고 음식 취향을 종합적으로 고려하여 모임을 준비하는 데 필요한 서비스는 존재하지 않습니다.

🍚Babting🍚은 이러한 불편함을 해결하기 위해 모임 참여자들의 일정과 음식 선호도를 반영하여 최적의 약속 시간과 메뉴를 추천하는 서비스를 기획하게 되었습니다.

목차로 이동하기

🌐 서비스 소개

✨최적의 식사 약속 시간, 메뉴, 장소를 정할 수 있는 서비스 "Babting" ✨

🔑 간편한 소셜 로그인

◦ 카카오 소셜 로그인을 통해 빠르고 쉽게 서비스에 접근할 수 있으며, 간단한 회원가입으로 바로 이용할 수 있습니다.

✏️ 톡캘린더 연동을 통한 일정 확인

◦ 톡캘린더 연동을 통해 사용자는 자신의 기존 일정을 손쉽게 확인할 수 있습니다.
◦ 사용자들은 자신의 일정과 겹치지 않는 시간을 선택하여 모임에 참여할 수 있습니다.

🗨️ 참여자 간의 선호/비선호 음식 취향 반영

◦ 모임에 참여한 사용자는 자신이 선호하는 음식과 비선호 음식을 등록할 수 있습니다.
◦ Babting은 이 데이터를 바탕으로 모든 참여자가 만족할 수 있는 추천 메뉴를 제안해드립니다.

📜 모임 진행 상황 공유 및 시간,메뉴 확정

◦ 모임 주최자는 참여자들의 가능한 시간과 음식 취향을 실시간으로 확인할 수 있습니다.
◦ 모임 주최자는 공통 가능한 시간을 기반으로 최적의 약속 시간을 정하고, 추천 메뉴를 선택하여 최종 확정할 수 있습니다.

목차로 이동하기

🔗 배포 링크

목차로 이동하기

👥 팀원 소개

백엔드

조장 테크 리더 기획 리더 타임 키퍼
박민규 지연우 서지우 김보민

프론트엔드

테크 리더 리마인더 리액셔너
박건규 김다연 김현채

목차로 이동하기

🖥️ 시스템 구조

전체적인 시스템 구조

BE 시스템 구조

Section 2

FE 시스템 구조

Team16_FE
 ┣ public
 ┣ src
 ┃ ┣ api          # API 관련 로직
 ┃ ┃ ┣ hooks      # API 관련 커스텀 훅
 ┃ ┃ ┣ instance   # Axios 인스턴스
 ┃ ┃ ┗ mock       # 목업 데이터
 ┃ ┣ components   # 컴포넌트
 ┃ ┃ ┣ common     # 공통 컴포넌트
 ┃ ┃ ┗ features   # 기능별 컴포넌트
 ┃ ┣ constants    # 상수
 ┃ ┣ hooks        # 커스텀 훅
 ┃ ┣ mocks        # MSW 설정
 ┃ ┣ pages        # 페이지 컴포넌트
 ┃ ┣ routes       # 라우팅 설정
 ┃ ┣ service      # 비즈니스 로직
 ┃ ┣ styles       # 전역 스타일
 ┃ ┣ types        # TypeScript 타입 정의
 ┃ ┗ utils        # 유틸리티 함수

목차로 이동하기

🛠️ 기술 스택

목차로 이동하기

🌱 브랜치 관리 전략

브랜치 구조

  • Master 브랜치
    • 배포 가능한 최종 코드를 관리하는 브랜치로, 안정화된 코드만 머지합니다.
  • Develop 브랜치
    • 개발 중인 기능을 통합하는 브랜치입니다.
  • Review 브랜치
    • 코드 리뷰를 위한 브랜치로, 멘토님의 코드 리뷰와 피드백을 받을 수 있습니다.
  • Weekly 브랜치
    • 주차별 작업을 통합하는 브랜치로, 팀원들이 포크한 저장소에서 작업한 기능을 PR로 제출해 이 브랜치에 머지합니다.
  • Feature 브랜치
    • Weekly 브랜치에서 각 기능을 개발하기 위한 브랜치로, 팀원들의 상호 코드리뷰를 진행할 수 있습니다.
  • hotfix 브랜치
    • 긴급한 버그나 오류 수정이 필요할 때 사용하는 브랜치입니다.

협업 플로우

브랜치전략
  • 위의 협업 플로우 차트는 팀원들이 협력하는 방식과 브랜치 간 관계를 나타냅니다.

Git 작업 단위

  1. 브랜치 생성

    • 작업을 시작하기 위해 팀 저장소의 최신 코드를 로컬로 가져오고, 새로운 기능을 위한 브랜치를 생성합니다.

  2. 커밋(Commit)

  3. 푸시(Push)

    • 로컬 작업을 완료한 후, 팀 저장소의 week 브랜치에 푸시합니다.

  4. PR(Pull Request) 생성

    • 팀원들에게 코드 검토를 요청하기 위해 PR을 생성하고, 일관된 PR 템플릿을 사용합니다.

      ## 주요 변경사항

## 리뷰어에게...

## 관련 이슈

closes #

## 체크리스트
- [ ] `reviewers` 설정
- [ ] `label` 설정

  5. 리뷰 및 피드백

    • 팀원들이 PR을 확인하고 코드 리뷰를 진행합니다. 피드백이 있을 경우, 반영 후 커밋하여 PR을 업데이트 합니다.

  6. 병합(Merge)

    • 리뷰가 완료되고 2명 이상이 승인하면 Merge Commit 전략으로 병합합니다.

Wiki 페이지로 이동

목차로 이동하기

🚀 주요 기능 소개

기능 이미지 설명
카카오 로그인 카카오 로그인으로 간편하게 서비스를 사용할 수 있습니다.
메인페이지 톡캘린더로 연동된 개인의 일정, 확정된 모임과 확정 대기 중인 모임을 확인할 수 있습니다.
최종 확정된 모임은 모임 목록에서 쉽게 확인할 수 있으며, 확정되지 않은 모임은 '확정 대기중인 모임'으로 표시되어 관리가 용이합니다.
모임 생성 모임 주최자는 모임 이름, 날짜 범위, 예상 소요 시간, 시간 범위, 원하는 위치 등을 설정하여 모임을 생성할 수 있습니다.
설정된 내용은 링크를 통해 모임에 초대된 사람들에게 자동으로 공유됩니다.
모임 참여 초대받은 사용자는 가능한 시간과 선호/비선호 음식을 추가하여 모임에 참여할 수 있습니다.
개별 일정과 음식 취향을 반영하여 더 만족스러운 모임을 준비할 수 있도록 돕습니다.
모임 관리(참여자) 모임 참여자들은 가능한 시간과 참여자들의 데이터를 기반으로 추천된 음식을 한눈에 확인할 수 있습니다.
모임 관리(주최자) 모임 주최자는 다른 사용자들이 공통적으로 가능한 시간과 모임의 추천된 음식을 한눈에 확인할 수 있습니다.
이 추천음식들 중 메뉴를 확정하고, 공통 가능한 시간 중 약속 시작 시간을 결정할 수 있습니다.
주최자가 '밥팅 나가기'를 누르면 모임이 사라집니다.
모임 확정 모임의 모든 사용자들은 지정한 위치와 확정된 시간 그리고 추천 음식들을 한눈에 확인할 수 있습니다.

목차로 이동하기

🤔 고민한 부분

  1. 유사한 UI, 다양한 기능

    • 문제 상황 : 밥팅에는 메뉴를 보여주는 다양한 섹션이 존재합니다. 이들은 모두들 거희 유사한 UI를 보여주지만, 다른 동작을 요구하고있습니다.
    • 해결 : 이를 해결하기 위해서 공통으로 사용될 수 있는 로직들을 가진 Wrapper컴포넌트를 만들고, 이를 FACC패턴을 통해서 하위의 컴포넌트에 Wrapper컴포넌트의 상태를 전달할 수 있도록 하였습니다. 하위의 컴포넌트는 사용하는 곳에 맞추어서 여러 UI 및 기능을 가진 다른 컴포넌트로 변경하여 사용이 가능하도록 하여 재사용성을 늘렸습니다. 파일 링크

  2. 로그인 토큰 관리 개선 사항

    1. 처음 방식

      • 구현: access token과 refresh token을 쿠키에 저장한 후, 프론트에서 access token을 localStorage에 저장하고 쿠키는 삭제.
      • 문제점: 프론트에서 쿠키를 직접 조작하는 과정에서 보안 위험 발생 가능.

    2. 선택한 방식

      • 구현: refresh token만 httpOnly 쿠키에 저장, 프론트는 서버에 access token 재발급 요청.
      • 장점: 쿠키 관리는 서버가 전담, 프론트는 재발급된 토큰만 관리하여 역할이 분담되어있고, 쿠키 접근은 서버에서만 가능하여 보안 유지에 유리.

  3. Create 페이지에서의 폼 관리

    • 문제 상황 : 다양한 폼의 상태를 관리해야 하지만, 컴포넌트 간 책임 분리가 원활해야 했습니다.
    • 해결 : 각 폼 상태를 관리하기 위해서 react-hook-form을 이용하였고, FormProvider 안에 모아두되 세분화하여 책임 분리가 명확하도록 폼 컴포넌트들을 배치했습니다. 또한, day.js를 도입해서 시간/날짜 범위 validation의 정확성을 높였습니다.

  4. 유사하지만 조금씩 다른 기능

    • 문제 상황 : Join과 Edit 페이지의 UI 및 기능이 유사하나, 백엔드와의 소통 로직, 초기에 렌더링할 데이터 등이 달랐습니다.
    • 해결 : Context API를 도입해 전역으로 관리해 상태 동기화를 일관성 있게 유지하였습니다. FormContext로 공통 로직을 추출하였고, 백엔드와 선택적으로 소통이 가능한 공통 컴포넌트를 만들어 재사용성을 높였습니다.

📝 테스트 결과 보고서 / 시나리오 명세서

📑 테스트 시나리오 명세서
📈 테스트 결과 보고서

목차로 이동하기

📚 자료 모음

목차로 이동하기

📄 License Information

이 프로젝트는 여러 오픈 소스 라이브러리를 포함하고 있으며, 각 라이브러리는 다음과 같은 라이선스를 따릅니다:

목차로 이동하기

📜 Project License

이 프로젝트는 MIT License로 배포됩니다. 자세한 내용은 LICENSES/LICENSE.MIT을 참조하세요.
이 라이선스에 따라, 본 서비스는 자유롭게 사용, 수정, 배포할 수 있으며, 저작권 표시만 유지하면 됩니다.

목차로 이동하기

How to Start

# 저장소 복제
git clone https://github.com/kakao-tech-campus-2nd-step3/Team16_FE.git

# 종속성 설치
npm install

# 개발 서버 실행
npm start

# 테스트 실행
npm test

# 프로덕션 빌드
npm run build

About

16조 프론트엔드

Resources

Readme
Activity
Custom properties

Stars

6 stars

Watchers

0 watching

Forks

2 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages