3️⃣ 페이지

🧱 메인페이지 구조 정리

Next.js 기반 GlobalNomad 프로젝트의 메인페이지 레이아웃은 다음과 같이 3단계 구조로 구성되어 있다.

📌 전체 구조 요약

/(DefaultLayout)/layout.tsx
  └─ /(...)/(MainLayout)/layout.tsx
      └─ page.tsx

.

1️⃣ /DefaultLayout/layout.tsx

function Layout({ children }: { children: ReactNode }) {
  return (
    <div className="w-screen min-h-screen flex flex-col">
      <Gnb />
      <div className="flex flex-col flex-1">{children}</div>
      <Footer />
    </div>
  );
}

✅ 역할

• 사이트 전체 공통 레이아웃을 담당
• GNB(Global Navigation Bar)와 Footer 포함 (공동 컴포넌트)
• 내부 children에 각 페이지별 콘텐츠가 들어옴
  
  
  
  

---

2️⃣ /DefaultLayout/(MainLayout)/layout.tsx

function Layout({ children }: { children: ReactNode }) {
  return (
    <main className="flex flex-col flex-1 mx-[2.4rem] tablet:mx-[3rem] desktop:w-[112rem] desktop:mx-auto">
      {children}
    </main>
  );
}

✅ 역할

• 메인페이지 콘텐츠 영역의 폭과 정렬을 담당
• 반응형 max-width 및 마진(padding)을 적용함
• 내부 children에는 메인페이지의 콘텐츠가 위치
  
  
  
  

---

3️⃣ /DefaultLayout/(MainLayout)/page.tsx

function HomePage() {
  return (
    <div className="...">
      {/* 메인 페이지 콘텐츠 (배너, 인기 체험, 모든 체험 등) */}
    </div>
  );
}

✅ 역할

• 실제 페이지 콘텐츠 구성
• 배너, 카드 리스트, 필터 등 UI 컴포넌트 사용
• 섹션 단위로 쪼개서 관리하는 것이 좋음
  
  
  
  

✅ 정리

파일 경로	역할 요약
/layout.tsx	공통 GNB + Footer를 포함하는 전체 레이아웃
/MainLayout/layout.tsx	콘텐츠 정렬/폭 조절을 위한 내부 레이아웃
page.tsx	실제 페이지별 콘텐츠 작성 (예: 홈 배너, 인기 콘텐츠 등)

✅ 따라서 메인 페이지의 콘텐츠 작성은 page.tsx에서 작업하면 된다!

🏠 메인페이지 개발 기록 모음

📌 글 모아보기

주제	설명	링크
✅ API 연결	메인페이지에 체험 데이터를 불러오기 위한 API 연동 과정 기록	보러가기
🖼 배너	무한 슬라이드 배너 영역 구현 과정 및 반응형 처리 방식 소개	보러가기
🔥 인기체험	인기 체험만 모아서 보여주는 캐러셀 구조 정리	보러가기
📚 모든체험	전체 체험 목록을 렌더링하는 구조와 무한스크롤/페이지네이션	보러가기
🧹 리팩토링	공통 컴포넌트 분리, 코드 정리, 성능 최적화 과정 정리	보러가기

---

🗂️ 예약내역 페이지 전체 구조 이해하기

예약내역 페이지는 아래와 같은 구성 순서를 따른다.


1. 상단 텍스트 영역 — "예약내역"과 설명 문구
2. 상태 필터 배지 영역 — 예약 상태별 필터링 기능
3. 예약 카드 리스트 — 개별 예약 정보 표시
4. 빈 상태 화면 — 예약이 존재하지 않을 때의 화면
이 페이지에서 중요한 점은 사용자 액션에 따라 상태가 동적으로 변화한다는 점이다.

📚 예약내역 페이지 기능별 구현 블로그 시리즈

GlobalNomad 프로젝트의 예약내역 페이지는 다양한 기능이 유기적으로 연결된 복합적인 구조로 이루어져 있다.
이 시리즈는 그중에서도 핵심적인 4가지 기능을 기능 단위로 나눠 블로그 글로 작성한 것이다.
각 포스트는 상태 관리와 컴포넌트 구조를 중심으로, 실질적인 구현 흐름을 상세히 설명한다.

🔗 블로그 시리즈 목록

1️⃣ 🔌 예약내역 페이지의 API 연동과 UI 연결 흐름

• API 호출 타이밍 (useEffect)
• 예약 데이터 상태 관리 구조
• UI 렌더링 연결 방식
• 빈 상태 처리 방식
  
  
  
  

2️⃣ 🏷️ 예약 상태 필터 기능 — StatusBadgeGroup

• 상태 배지 리스트 정의와 UI 구조
• 조건부 스타일 처리
• 상위 컴포넌트와 상태 연결 방식
• 필터링에 따른 목록 갱신 흐름
  
  
  
  

3️⃣ ✍️ 리뷰 작성 모달 ReviewModal — 체험 후기를 남기는 흐름

• 별점 선택과 후기 작성 UI
• onSubmit 콜백 구조
• 상위 페이지와의 연동 방식 (useOverlay)
• 리뷰 완료 후 상태 반영 로직
  
  
  
  

4️⃣ ❌ 예약 취소 기능 흐름 — 확인 모달과 상태 갱신까지

• 버튼 클릭 → 경고 모달 → API 호출 순서
• 상태 직접 갱신으로 빠른 UI 반영
• 에러 처리 및 확인 절차 설계 포인트
  
  

5️⃣ ✨ 예약 내역 페이지 리팩토링

• 관심사 분리 (SoC) — 상태 관리, API 호출, UI 렌더링 분리
• 커스텀 훅 도입 — 예약 관련 로직들을 역할별로 분리해서 훅으로 관리
• UI 컴포넌트 분리 — 조건부 렌더링 부분들을 컴포넌트로 추출하여 명확한 역할 부여
  
  
  
  

🧭 활용 포인트

• 예약내역 페이지의 각 기능을 독립적으로 파악할 수 있도록 분리하여 설명하였다.
• 실제 프로젝트에서의 상태 관리, 사용자 경험 설계 방식, 컴포넌트 구조 설계에 참고할 수 있다.

페이지의 전체 흐름이 궁금하다면, 시리즈를 순서대로 읽는 것을 추천한다