" Global Nomad는 캘린더 뷰 SDK와 지도 뷰 SDK를 활용해 예약 가능한 날짜를 설정하고, 체험 상품을 예약하는 기능을 제공하는 웹 애플리케이션입니다."
- [👤 팀원 소개 & 역할]
- [🔗 배포 환경 및 기간]
- [✨ 주요 기능 요약]
- [⚙️ 설치 및 실행 방법]
- [🛠 Tech Stack]
- [⭐ 사용된 주요 라이브러리]
- [📂 폴더 및 파일 구조]
- [🧾 네이밍 규칙]
- [🌿 Git Branch 전략]
- [💬 커밋 메시지 컨벤션]
| 프로필 | 이름 | GitHub | 주요 담당 기능 |
|---|---|---|---|
 |
나예진 (NaYejin) |
@JjinJjin |
|
 |
박원현 (ParkWonHyun) |
@CIrcle0616 |
|
 |
박찬영 (ParkChanYoung) |
@Parkchanyoung0710 |
|
 |
오종택 (OhJongTaek) |
@ohjongteak |
|
 |
전수영 (JeonSuYeong) |
@daonJeon |
|
 |
조지현 (JoJiHyeon) |
@zeon0xx0 |
|
- 배포 주소: [Global Nomad](배포 후 주소 업데이트 하겠습니다 )
- 배포 환경: vercel
- 개발 기간: 2025.05.27 ~ 2025.06.26
- 예약 가능한 날짜/시간 확인 및 선택 (캘린더 뷰 SDK)
- 체험 상품 예약 및 참여 인원 설정
- 카테고리/가격/검색 필터로 체험 탐색
- 무한 스크롤 (인기 체험 탐색)
- 내 정보 관리 (프로필, 닉네임, 비밀번호)
- 내 체험 관리 (등록, 수정, 삭제, 예약 현황 확인)
- 예약 상태별 관리 (대기/승인/거절/완료)
- 알림 기능 (예약 상태 변경 알림)
# 1. 저장소 클론
$ git clone [저장소 URL]
$ cd [프로젝트 디렉토리]
# 2. 의존성 설치
$ npm install
# 3. 개발 서버 실행
$ npm run dev본 프로젝트는 아래 기술 스택을 기반으로 구성되었습니다.
| 역할 | 사용 기술 | 도입한 이유 |
|---|---|---|
| 언어 & 프레임워크 |
|
파일 기반 라우팅과 서버 컴포넌트 지원으로 빠른 렌더링과 유지보수가 용이하기 때문입니다. |
| UI & 스타일링 |
|
빠른 스타일링과 일관성 있는 디자인 시스템 구성을 위해 선택했습니다. |
| 라우팅 & 상태 관리 |
|
서버와 클라이언트 상태를 명확히 분리해 코드 관리와 성능을 개선하기 위해 사용했습니다. |
| API & 인증 |
|
간단하고 직관적인 네이티브 API로 데이터 요청을 처리하기 위해 사용했습니다. |
| 빌드 & 배포 |
|
빠른 빌드 및 배포 환경을 구성하고, 최적화된 정적 파일 서비스를 위해 사용했습니다. |
| 코드 품질 |
|
팀 전체의 코드 스타일을 통일하고 협업 중 충돌을 줄이기 위해 도입했습니다. |
| UI 협업 |
|
독립적인 UI 컴포넌트 개발과 문서화를 위해 사용했습니다. |
| 라이브러리 | 로고 | 도입한 이유 |
|---|---|---|
| React Query (useInfiniteQuery) |
|
useInfiniteQuery를 사용하면 무한 스크롤 또는 페이지네이션 기능을 손쉽게 구현할 수 있어 사용자 경험을 향상시킵니다 |
/
├── public/ # 정적 파일 (이미지, 폰트 등)
├── src/
│ ├── app/ # Next.js App Router (라우팅, 페이지, 레이아웃, 로딩 UI, 에러 UI 등)
│ │ ├── (auth)/ # 라우트 그룹 (예: 인증 관련 페이지)
│ │ │ └── login/
│ │ │ └── page.tsx
│ │ ├── api/ # API 라우트 핸들러 (Route Handlers)
│ │ │ └── hello/
│ │ │ └── route.ts
│ │ ├── layout.tsx pa # 루트 레이아웃
│ │ ├── page.tsx # 루트 페이지
│ │ └── global.css # 전역 스타일 (Tailwind CSS import 등)
│ ├── components/ # 재사용 가능한 UI 컴포넌트
│ │ ├── common/ # 여러 도메인에서 사용되는 범용 컴포넌트 (Button, Input 등)
│ │ │ ├── Button.tsx
│ │ │ └── Input.tsx
│ │ └── domain/ # 특정 도메인에 종속적인 컴포넌트 (예: ProductCard)
│ │ └── product/
│ │ └── ProductCard.tsx
│ ├── constants/ # 전역적으로 사용되는 상수 (API URL, 공통 메시지 등)
│ │ └── index.ts
│ ├── contexts/ # React Context API 사용 시 (Zustand로 대부분 대체 가능)
│ │ └── AuthContext.tsx
│ ├── hooks/ # 커스텀 React Hooks
│ │ └── useAuth.ts
│ ├── lib/ # 라이브러리 헬퍼, 유틸리티 함수 (React Query 클라이언트 설정 등)
│ │ ├── queryClient.ts
│ │ └── utils.ts
│ ├── services/ # API 요청 로직 (React Query와 함께 사용)
│ │ ├── userService.ts
│ │ └── productService.ts
│ ├── store/ # Zustand 스토어 정의
│ │ └── useAuthStore.ts
│ ├── styles/ # 전역 스타일 또는 테마 관련 스타일 (global.css 외 추가)
│ │ └── theme.ts
│ ├── types/ # 전역 TypeScript 타입 및 인터페이스
│ │ ├── index.ts # 모든 타입을 export 하는 메인 파일
│ │ └── user.ts
│ └── middleware.ts # Next.js 미들웨어
├── .eslintrc.json # ESLint 설정 파일
├── .prettierrc.json # Prettier 설정 파일
├── next.config.mjs # Next.js 설정 파일
├── tailwind.config.ts # Tailwind CSS 설정 파일
├── tsconfig.json # TypeScript 설정 파일
└── package.json
| 항목 | 방식 | 예시 |
|---|---|---|
| 폴더명 | camelCase | userService |
| 컴포넌트 | PascalCase | UserProfile.tsx |
| css클래스 | kebab-case + .styles.js | wiki-section.styles.js |
| 이미지 | kebab-case | logo-icon.png |
| 변수/함수 | camelCase | getUserInfo |
| 환경변수 | UPPER_SNAKE_CASE | NEXT_PUBLIC_API_URL |
| 브랜치명 | 목적 |
|---|---|
main |
배포 전용 브랜치 |
develop |
통합 개발 브랜치 |
feature/* |
기능 개발 단위 브랜치 |
fix/* |
버그 수정 브랜치 |
docs/* |
문서 관련 브랜치 |
| 태그 | 의미 |
|---|---|
| Feat | ✨ 기능 추가 |
| Fix | 🐛 버그 수정 |
| Style | 💄 스타일 변경 |
| Docs | 📝 문서 변경 |
| Refactor | 🔨 리팩토링 |
| Test | ✅ 테스트 코드 |
| Chore | 🔧 기타 설정 변경 |
✨ Feat: 위키 카드 컴포넌트 생성
- 사용자 이미지 및 소개 텍스트 구현
- 반응형 레이아웃 처리 완료