🧭 GlobalNomad - 다양한 체험을 예약하는 플랫폼
🗂 목차
🧭 소개
GlobalNomad는 사용자가 직접 체험을 등록하고,
다른 사용자가 해당 체험을 예약할 수 있는 양방향 체험 예약 플랫폼입니다.
지도 및 캘린더 SDK를 활용하여 체험 위치와 예약 가능 일정을 직관적으로 확인할 수 있으며,
복잡한 UI 흐름과 상태 관리를 통해 실무 수준의 사용자 경험을 제공합니다.
🎯 프로젝트 주제
- 사용자가 체험을 등록하고, 다른 사용자가 이를 예약할 수 있는 구조
- 지도 및 캘린더 SDK를 통한 위치 기반 + 일정 기반 예약 기능 구현
🧩 선정 배경
- 지도/캘린더 기반 예약 시스템에 대한 기술적 관심
- 복잡한 UI 흐름과 상태 관리 경험을 통해 실무에 가까운 프론트엔드 경험을 쌓기 위함
🚀 배포 링크
👥 팀 소개
| 박광민 | 김보경 | 맹은빈 | 이찬호 |
|---|---|---|---|
 |
 |
 |
 |
 |
|
|
|
🧑💻 역할 분담
🧑💻 박광민
- 공통 컴포넌트 제작:
Input,Button, 팝업Modal등 사용자 중심 인터랙션 요소 구현 - 로그인 / 회원가입 인증 흐름 및 유효성 검사 로직 구현
- 폼 입력 검증 및 에러 처리 로직 설계
- Kakao OAuth 연동 로그인 기능 개발
- 알림 기능 구현
- 팀 리딩 및 코드 리뷰 주도
🧑💻 김보경
- 공통 레이아웃 컴포넌트 제작:
Header,Footer,Pagination등 - 반응형 스타일링 및 페이지네이션 로직 작성
- 메인 페이지 퍼블리싱 및 API 연동
- 체험 리스트, 검색, 필터링, 정렬 기능 포함
- 인기 체험 섹션 무한 스크롤 구현
- 체험 수정/등록 UI 구현
- 모바일 UI 개선
🧑💻 맹은빈
- 공통 컴포넌트 제작:
Modal,Floating Box,Avatar등 - 체험 상세 페이지 구현
- 이미지 뷰어, 소개, Kakao Map, 캘린더 예약 기능, 리뷰 페이지네이션 포함
- 체험 등록/수정 페이지 초기 UI 및 로직 구현
- UX 개선을 위한 세부 인터랙션 구현
🧑💻 이찬호
- Oracle Cloud Infrastructure(OCI) 기반 클라우드 인프라 설계
- GitHub Actions 및 GHCR 기반 CI/CD 파이프라인 구축
- Docker 멀티스테이지 빌드 기반 컨테이너화 구성
- Nginx + Let’s Encrypt 기반 HTTPS 환경 구성
- 도메인(
globalnomad.site) 및 DNS 설정 - 공통 컴포넌트(드롭다운) 개발
- 마이페이지 (내 정보, 체험 현황, 예약 내역, 후기 작성 등) 구현
📚 기술 스택
언어
프레임워크
패키지 매니저
스타일링
코드 포맷팅
상태 관리
API 통신
지도 API
협업 도구
인프라
🛠️ 주요 기능
-
체험 등록 / 예약
사용자는 호스트로서 자신만의 체험을 등록할 수 있으며,
다른 사용자는 게스트로서 원하는 체험을 선택하여 예약할 수 있습니다. -
카테고리 기반 체험 탐색
- 다양한 카테고리로 체험을 분류하여 탐색 가능
- 검색 / 필터링 / 정렬 기능 제공
-
지도 + 캘린더 기반 예약
- Kakao Map을 통한 위치 기반 체험 확인
- 예약 가능 일자를 직관적으로 확인 가능한 캘린더 UI 제공
-
실시간 알림 기능
- 체험 승인, 거절 등 주요 활동에 대한 실시간 알림 제공
-
후기 작성 시스템
- 체험 참여 후 리뷰 작성 가능
- 다른 사용자의 후기 확인을 통해 신뢰도 확보
📁 디렉토리 구조
src/
├── actions/ # 서버 액션 함수 정의
├── apis/ # API 호출 관련 함수 모음
├── app/ # Next.js 13 App Router 기반 라우트
│ ├── (non-header)/ # 헤더가 필요 없는 페이지 폴더
│ │ ├── 페이지폴더/
│ │ └── 페이지폴더/
│ ├── (with-header)/ # 헤더가 필요한 페이지 폴더
│ │ ├── 페이지폴더/
│ │ └── 페이지폴더/
│ ├── api/ # Next.js API 라우트
│ ├── globals.css # 글로벌 스타일
│ ├── layout.tsx # 루트 레이아웃
│ ├── loading.tsx # 전역 로딩 UI
│ ├── not-found.tsx # 404 페이지
│ └── error.tsx # 에러 페이지
├── components/ # 재사용 가능한 공통 컴포넌트
├── constants/ # 상수 정의 (예: 옵션 리스트, URL 등)
├── contexts/ # 전역 Context 정의 (예: 테마, 모달 등)
├── hooks/ # 커스텀 훅
├── lib/ # 유틸성 함수 및 외부 라이브러리 설정
├── stores/ # Zustand 등 전역 상태 관리
├── types/ # 전역 TypeScript 타입 정의
├── ui/ # 디자인 시스템 기반 UI 컴포넌트
└── utils/ # 공통 유틸 함수
🛠️ 컨벤션
🖊️ Git Flow
| 브랜치명 | 설명 |
|---|---|
main |
배포 브랜치 |
develop |
통합 개발 브랜치 |
feat/* |
기능 개발 브랜치 |
fix/* |
버그 수정 브랜치 |
style/* |
스타일 수정 브랜치 |
docs/* |
문서 작성 및 수정 브랜치 |
📂 폴더/파일명 네이밍 컨벤션
| 대상 | 규칙 | 예시 |
|---|---|---|
| 폴더명 | 케밥케이스 (kebab-case) |
components, user-profile
|
| 컴포넌트 파일명 | 파스칼케이스 (PascalCase) | UserProfile.tsx |
| 이미지/아이콘 파일명 | 케밥케이스 (kebab-case) |
logo-icon.png, profile-default.png
|
| 함수명/변수명 | 카멜케이스 (camelCase) |
fetchUserData, userList
|
| 환경변수 | 대문자 + 스네이크케이스 | NEXT_PUBLIC_API_URL |
🌿 브랜치 네이밍 컨벤션
| 브랜치 종류 | 네이밍 규칙 | 예시 |
|---|---|---|
| 기능 개발 | feat/{이슈번호} | feat/13 |
| 버그 수정 | fix/{이슈번호} | fix/24 |
| 문서 수정 | docs/{이슈번호} | docs/58 |
| 스타일 수정 | style/{이슈번호} | style/33 |
🧐 커밋 메시지 타입 (Commit Type)
| Type | Description |
|---|---|
feat |
기능 추가 |
feat |
이미지/아이콘 추가 |
fix |
버그 수정 |
docs |
문서 수정 |
style |
UI, 스타일 관련 추가 및 수정 |
refactor |
리팩토링 |
chore |
설정, 빌드 변경 |
0 commit comments