🧭 GlobalNomad - 다양한 체험을 예약하는 플랫폼

🗂 목차

1. 소개
2. 팀 소개
3. 역할 분담
4. 기술 스택
5. 주요 기능
6. 디렉토리 구조
7. 컨벤션

🧭 소개

GlobalNomad는 사용자가 직접 체험을 등록하고,
다른 사용자가 해당 체험을 예약할 수 있는 양방향 체험 예약 플랫폼입니다.

지도 및 캘린더 SDK를 활용하여 체험 위치와 예약 가능 일정을 직관적으로 확인할 수 있으며,
복잡한 UI 흐름과 상태 관리를 통해 실무 수준의 사용자 경험을 제공합니다.

🎯 프로젝트 주제

• 사용자가 체험을 등록하고, 다른 사용자가 이를 예약할 수 있는 구조
• 지도 및 캘린더 SDK를 통한 위치 기반 + 일정 기반 예약 기능 구현

🧩 선정 배경

• 지도/캘린더 기반 예약 시스템에 대한 기술적 관심
• 복잡한 UI 흐름과 상태 관리 경험을 통해 실무에 가까운 프론트엔드 경험을 쌓기 위함

🚀 배포 링크

GlobalNomad 바로가기

👥 팀 소개

박광민	김보경	맹은빈	이찬호

🧑‍💻 역할 분담

🧑‍💻 박광민

• 공통 컴포넌트 제작: 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

협업 도구

인프라

🛠️ 주요 기능

1. 체험 등록 / 예약
   사용자는 호스트로서 자신만의 체험을 등록할 수 있으며,
   다른 사용자는 게스트로서 원하는 체험을 선택하여 예약할 수 있습니다.

2. 카테고리 기반 체험 탐색

   • 다양한 카테고리로 체험을 분류하여 탐색 가능
   • 검색 / 필터링 / 정렬 기능 제공

3. 지도 + 캘린더 기반 예약

   • Kakao Map을 통한 위치 기반 체험 확인
   • 예약 가능 일자를 직관적으로 확인 가능한 캘린더 UI 제공

4. 실시간 알림 기능

   • 체험 승인, 거절 등 주요 활동에 대한 실시간 알림 제공

5. 후기 작성 시스템

   • 체험 참여 후 리뷰 작성 가능
   • 다른 사용자의 후기 확인을 통해 신뢰도 확보

📁 디렉토리 구조

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	설정, 빌드 변경