목차

1. 팀원 소개
2. 프로젝트 소개
3. 주요 기능
4. 기술 스택
5. URL
6. 폴더 구조
7. 구현 페이지

팀원 소개

TEAM DOIT
깔쌈한 프론트엔드 개발자 단체 DOIT 입니다.

👑최승은👑	오소영	홍준기	김정목

프로젝트 소개

⚡️ 번개처럼 빠르게! 새로운 사람들과 만나보세요

번개팅은 누구나 빠르고 간편하게 모임을 생성하고 참여할 수 있는 번개 모임 플랫폼입니다
실제 참여자들의 신뢰도 높은 후기를 통해 안심하고 만남을 가질 수 있으며, 실시간 채팅 기능으로 원활한 소통이 가능합니다.
새로운 사람들과 색다른 경험을 해보고 싶을 때, 번개팅과 함께해보세요!

🎯 프로젝트 목표

• 사용자들이 빠르게 원하는 모임을 찾고 참여할 수 있도록 직관적인 UI 제공
  
• 실시간 채팅을 통해 원활한 소통 제공
  
• 실제 참여자들의 신뢰할 수 있는 솔직한 후기 시스템 구축
  
• PWA(Progressive Web App) 적용을 통해 웹에서도 앱처럼 원활하게 이용 가능
  
• JWT 인증 방식을 도입하여 안전한 로그인 및 회원 관리
  

주요 기능

1️⃣ 모임 기능

• 모임 조회: 다양한 카테고리(술자리, 보드게임, 카페, 맛집 등)의 번개 모임을 한눈에 확인 가능
  
• 모임 생성: 누구나 쉽게 모달을 통해 원하는 번개 모임을 생성
  
• 모임 참여: 지역 및 관심사 기반으로 원하는 테마의 번개 모임에 참여 가능
  
• 모임 상세보기: 주최자 정보, 상세 내용, 위치 정보, 참가자 리뷰 확인 가능
  
• 찜 기능: 마음에 드는 모임을 찜 해둘 수 있음
  

2️⃣ 리뷰 시스템

• 실제 참여자만 리뷰 가능: 신뢰할 수 있는 후기 제공
  
• 별점 & 코멘트 작성: 모임에 대한 피드백을 남길 수 있음

3️⃣ 마이 페이지

• 내가 만든 모임 & 참여한 모임 관리
  
• 참여 내역 및 후기 관리
  
• 프로필 수정: 닉네임, 프로필 사진, 소개글 변경 가능
  

4️⃣ 실시간 채팅

• 참가자 간 일정 조율 및 정보 공유 가능
  
• 모임 시작 전, 빠르게 소통 가능
  

5️⃣ 유저관리

• 회원가입과 로그인을 통해 나만의 모임 관리 가능
  
• 게스트로그인: 회원가입없이도 번개팅 사이트를 체험해볼 수 있음

기술 스택

🎨 프론트엔드

🤝 협업 & 버전 관리

⚙️ 개발 도구

🛠 테스트 및 분석

🚀 CI/CD

URL

📌 배포: 번개팅 사이트

📌 GitHub: 번개팅 GitHub

📌 Figma: 번개팅 Figma

📌 Notion: 번개팅 공유 Notion

폴더 구조

폴더 구조

📦 프로젝트 루트
├── 📂 api                # API 관리 (클라이언트 & 서버)
│   ├── 📂 client
│   │   ├── 📂 chat        # 채팅 관련 API
│   │   ├── 📂 meeting     # 번개 모임 API
│   │   ├── 📂 myPage      # 마이페이지 관련 API
│   │   ├── 📂 review      # 리뷰 API
│   │   ├── 📂 user        # 회원가입/로그인 API
│   ├── 📂 middleware      # API 요청 미들웨어 (ex: 인증 처리)
│   ├── 📂 mock            # MSW & JSON-Server를 활용한 Mock 데이터 관리
│   ├── 📂 server          # 서버 API 요청 (SSR/SSG 시 필요)
│   ├── 📂 socket          # WebSocket 연결 관련 설정 (STOMP & Socket.js)
│
├── 📂 app                # Next.js App Router 기반 도메인별 페이지
│   ├── 📂 liked          # 찜한 번개 페이지    
│   ├── 📂 meeting        # 번개 모임 페이지 (패럴라우팅 적용)
│   │   ├── 📂 detail      # 모임 상세 페이지
│   │   │   ├── 📂 [id]    # 동적 라우팅 적용
│   │   │   │   ├── 📂 @bottombar  
│   │   │   │   ├── 📂 @card
│   │   │   │   ├── 📂 @description
│   │   │   │   ├── 📂 @host
│   │   │   │   ├── 📂 @location
│   │   │   │   ├── 📂 @reviews
│   │   │   │   ├── layout.tsx
│   │   │   ├── 📂 components  # 재사용 가능한 상세 페이지 컴포넌트
│   │   ├── 📂 list            # 모임 리스트 페이지
│   │   │   ├── 📂 @meetinglist
│   │   │   ├── 📂 @title
│   │   │   ├── 📂 components
│   │   │   ├── layout.tsx    
│   ├── 📂 myprofile           # 마이페이지 (내 정보, 내 모임)
│   ├── 📂 review              # 리뷰 페이지
│   ├── 📂 user                # 인증 관련 페이지 (로그인/회원가입)
│   ├── layout.tsx             # 전체 레이아웃 설정
│
├── 📂 components              # 재사용 가능한 UI 컴포넌트
│   ├── 📂 layout              # 네비게이션 바, 푸터 등 전역 레이아웃
│   ├── 📂 modal               # 모달 컴포넌트
│   ├── 📂 shared              # 공통 기능 컴포넌트
│   │   ├── 📂 icons           # 아이콘 컴포넌트
│   │   ├── 📂 query           # API 요청 관련 UI
│   ├── 📂 ui                  # 버튼, 카드, Input 등 UI 요소
│   ├── 📂 utils               # 유틸리티 함수 모음
│
├── 📂 hooks                   # 커스텀 훅 모음
│   ├── 📂 chat                # 채팅 관련 훅
│   ├── 📂 like                # 찜 기능 관련 훅
│   ├── 📂 map                 # 지도 관련 훅
│   ├── 📂 meeting             # 모임 관련 훅
│   ├── 📂 review              # 리뷰 관련 훅
│   ├── 📂 user                # 로그인 상태 관리 훅
│
├── 📂 lib                     # 유틸리티 및 API 요청 관리
│   ├── 📂 constants           # 공통 상수 (toast 메시지, API 엔드포인트 등)
│   ├── auth.ts                # 인증 관련 유틸리티
│   ├── formValidation.ts       # 입력 폼 유효성 검사
│   ├── pwa.ts                  # PWA 설정 관련 유틸리티
│
├── 📂 store                   # Zustand 기반 전역 상태 관리
│   ├── 📂 chat                # 채팅 관련 상태
│   ├── 📂 user                # 사용자 인증 상태
│   ├── likeCoutStore.ts       # 찜한 개수 관리
│   ├── modalStore.ts          # 모달 상태 관리
│   ├── profileStore.ts        # 프로필 관련 상태 관리
│
├── 📂 public                  # 정적 파일 관리 (아이콘, 폰트, 이미지 등)
│
├── 📂 test                    # 테스트 코드 (Jest & Cypress)
│   ├── 📂 unit                # 단위 테스트
│   ├── 📂 integration         # 통합 테스트
│   ├── 📂 cypress             # E2E 테스트 (Cypress 활용)
│
├── 📂 types                   # TypeScript 타입 정의
│
├── 📂 styles                  # 전역 스타일 (Tailwind CSS 활용)
│   ├── globals.css            # 전체 스타일
│   ├── theme.ts               # 테마 설정
│
├── 📜 tailwind.config.ts       # Tailwind 설정
├── 📜 next.config.mjs          # Next.js 설정
├── 📜 tsconfig.json            # TypeScript 설정
├── 📜 package.json             # 패키지 목록

구현 페이지

구현 페이지로 이동!