🏡 숙박 예약 플랫폼: 공통 레이아웃과 더미데이터 구성, 메인 페이지 구현 (2)

ε( ε ˙³˙)з ○º·2025년 7월 13일

뚝딱뚝딱 숙박 예약 플랫폼 만들기 🏡

목록 보기

2/4

본 글은 패스트캠퍼스 – Next.js 실무 강의 중 Part 8. Next.js 13으로 숙박 예약 플랫폼 만들기를 수강하며 학습한 내용을 정리한 것입니다. 🙏🏻

💨 전역 레이아웃 구성하기 (Tailwind CSS)

Tailwind: HTML, CSS, JavaScript를 사용하여 반응형 디자인을 쉽게 구축할 수 있는 CSS 프레임워크

Tailwind playground: Tailwind 실습 사이트

자주 사용하는 Tailwind 유틸리티 클래스
bg-{color}: 배경색 지정
text-{color}: 텍스트 색상 지정
font-{weight}: 폰트 굵기 지정
p-{size}, m-{size}: 패딩/마진 크기 설정
w-{size}, h-{size}: 너비/높이 설정
grid, flex: 레이아웃 구성용 클래스
rounded-{radius}: 테두리 둥글기 설정
border-{width}: 테두리 굵기 설정

▪️ `layout.tsx`로 공통 레이아웃 설계

app/layout.tsx는 Next.js 13 App Router 환경에서 최상위 레이아웃을 정의하는 파일로 전역적인 UI 구조 및 설정을 담당한다.

Next.js 공식문서: layouts-and-pages

모든 페이지에서 공통으로 사용하는 UI 요소(ex. Header, Footer, Modal 등)를 구성하는 공간으로 <html> 및 <body> 태그까지 포함해 전체 HTML 문서의 뼈대를 구성한다.

layout.tsx는 경로마다 별도로 정의할 수 있어 (app/about/layout.tsx, app/dashboard/layout.tsx 등) 중첩 레이아웃(Nested Layout) 구성하기에 유용하다.

공통 레이아웃은 상위 layout.tsx에서 각 섹션의 개별 레이아웃은 하위 layout.tsx에서 관리함으로써 유지보수성과 재사용성을 높일 수 있다.

▪️ 전역 Provider 구조 분리

상태 관리(Recoil, Redux 등), 테마, 다크모드, 세션 등과 같이 전역적으로 적용되는 설정이나 라이브러리 초기화 코드는 layout.tsx에 직접 작성하기보다 app/provider.tsx로 분리해서 관리하는 것이 일반적이다.

layout.tsx의 역할이 명확해지고 코드의 가독성과 유지보수성이 향상된다.

▪️ React Icons를 활용한 아이콘 적용

react-icons 패키지를 통해 다양한 아이콘을 쉽게 불러올 수 있다. 원하는 디자인 스타일을 검색하여 필요한 아이콘을 선택하면 된다.

import { AiOutlineSearch } from 'react-icons/ai'
import { AiOutlineMenu } from 'react-icons/ai'
import { AiOutlineUser } from 'react-icons/ai'

▪️ `not-found`를 통한 커스텀 404 페이지 구현

Next.js 13 App Router 환경에서는 프로젝트 루트의 app/ 디렉토리 내부에 not-found.tsx 파일을 생성하여 404 페이지를 커스터마이징할 수 있다. 해당 페이지는 존재하지 않는 경로로 접근했을 때 자동으로 렌더링된다.

Next.js 공식문서: not-found.js

not-found.tsx는 App Router 전용 파일로 기존 Pages Router의 404.js와는 다르게 자동으로 라우팅 처리된다.

컴포넌트 내부에서 notFound() 유틸리티 함수를 호출하여 프로그래밍적으로 404 페이지를 트리거할 수도 있다.
import { notFound } from 'next/navigation';

export async function generateStaticParams() {
  // ...
  if (!isValid) {
    notFound(); // 조건에 따라 404 페이지로 리디렉션
  }
}

🧐 Prisma 기초 문법과 Mock 데이터 세팅

Prisma Client는 타입 안정성과 자동 완성 기능을 제공하는 ORM(Object-Relational Mapping) 도구로 SQL 쿼리를 직접 작성하지 않고도 데이터베이스와 안전하게 상호작용할 수 있다.

▪️ 데이터 생성(Create) 및 조회(Read)

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

// ✅ 사용자 생성 (Create)
const user = await prisma.user.create({
  data: {
    username: 'john.doe',
    email: 'john@example.com',
  },
})

// ✅ 전체 사용자 조회 (Read)
const allUsers = await prisma.user.findMany()

// ✅ 특정 사용자 + 게시글 포함 조회 (Read + 관계 포함)
const userWithPosts = await prisma.user.findUnique({
  where: { id: 1 },
  include: { posts: true },
})

.create() 메서드는 한 개의 데이터를 새로 추가할 때 사용
.findMany() 테이블의 모든 데이터를 가져올 때 사용
.findUnique() 특정 조건(예: id)에 해당하는 단일 레코드를 찾을 때 사용
include 옵션으로 관계가 있는 다른 테이블(post 등)의 데이터도 함께 조회 가능

▪️ 데이터 수정(Update) 및 삭제(Delete)

// ✅ 사용자 정보 수정
const updatedUser = await prisma.user.update({
  where: { id: 1 },
  data: { username: 'new_username' },
})

const updatedMany = await prisma.user.updateMany({
  where: { role: 'user' },
  data: { role: 'member' },
})

// ✅ 사용자 1명 삭제
const deletedUser = await prisma.user.delete({
  where: { id: 1 },
})

// ✅ 특정 조건을 만족하는 사용자들 삭제
const deletedUsers = await prisma.user.deleteMany({
  where: {
    name: { contains: 'Kim' },
  },
})

.update() 조건에 맞는 하나의 데이터를 수정할 때 사용
.updateMany() 조건에 해당하는 여러 개의 레코드를 한 번에 수정 가능
.delete() 특정 조건에 해당하는 한 건의 데이터를 삭제할 때 사용해
.deleteMany() 조건에 해당하는 여러 데이터를 한 번에 삭제할 때 사용

▪️ Pagination(페이지네이션) 및 정렬

const paginatedUsers = await prisma.user.findMany({
  skip: 0,
  take: 10,
  orderBy: {
    username: 'asc',
  },
})

skip: 건너뛸 항목 수 (예: 0이면 처음부터)
take: 가져올 항목 수 (페이지당 10개 등)
orderBy: 정렬 기준 설정 (asc: 오름차순, desc)

▪️ Seed 파일로 초기 데이터 삽입

개발 초기 테스트를 위한 더미 데이터를 자동으로 삽입하고 싶을 때는 seed.ts 파일을 만들어 사용할 수 있다.

// prisma/seed.ts
import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

async function seed() {
  await prisma.room.createMany({
    data: [
      { title: '서울 감성 숙소', location: '서울', price: 85000 },
      { title: '부산 오션뷰 펜션', location: '부산', price: 120000 },
      { title: '강릉 조용한 산장', location: '강릉', price: 95000 },
    ],
  })
}

seed()
  .catch((e) => {
    throw e
  })
  .finally(async () => {
    await prisma.$disconnect()
  })

npx prisma db seed

createMany() 메서드를 사용하면 여러 개의 데이터를 한 번에 삽입할 수 있으며 npx prisma db seed 명령어로 해당 시드 데이터를 실제 데이터베이스에 적용할 수 있다.

▪️ Faker 라이브러리로 더미 데이터 생성

실제 데이터가 없기 때문에 UI를 테스트하고 레이아웃을 구성하기 위해 faker 라이브러리를 활용해 더미 데이터를 생성했다. (faker)

💡 faker는 이름, 주소, 이미지, 설명 등 다양한 형태의 랜덤 데이터를 손쉽게 생성할 수 있는 유틸리티 라이브러리로 더미 데이터가 필요한 테스트 환경에서 유용하다. 🤩

seed 파일에서 Mock 데이터 생성 함수를 작성하고, Prisma의 createMany()를 통해 데이터베이스에 삽입하면 실제로 Supabase DB에 테스트 데이터가 채워지는 것을 확인할 수 있다. 🤪

이렇게 생성한 Mock 데이터는 아래와 같이 findMany() 메서드로 조회할 수 있다.

async function getRooms() {
  const prisma = new PrismaClient()
  const data = await prisma.room.findMany()

  return { data }
}

PrismaClient를 통해 prisma 인스턴스를 생성하고 prisma.room.findMany()를 호출해 room 테이블의 모든 데이터를 가져온다.
조회된 데이터는 각 숙소의 이미지, 제목, 카테고리, 주소, 가격 정보 등을 UI에 매핑해 화면에 출력된다.

📊 메인 페이지 개발하기

▪️ 검색 필터 구성

여행지, 체크인/체크아웃 날짜, 게스트 수를 입력받는 필터 UI로 각 필터 항목은 useState를 통해 개별 상태로 관리하며, 현재 어떤 필터가 활성화되어 있는지를 나타내는 detailFilter, 입력값을 저장하는 filterValue 상태를 함께 구성했다. (전역 상태 관리를 위해 Recoil로 리팩토링 예정)

▪️ 달력 컴포넌트 구현 (react-calendar)

체크인/체크아웃 날짜 선택을 위해 react-calendar와 dayjs를 활용해 캘린더 UI를 구성했다. 날짜 포맷은 dayjs로 처리하고, react-calendar의 기본 스타일은 global.css에 가져와 커스터마이징하여 원하는 형태로 수정했다.

💡 react-calendar는 리액트 환경에서 간단한 설정만으로 날짜 선택 기능을 구현할 수 있는 캘린더 라이브러리로, 기본적인 API만으로도 빠르게 적용 가능하다.

defaultValue: 초기 선택 날짜
formatDay: 날짜 출력 포맷
minDate: 선택 가능한 최소 날짜 제한

▪️ Recoil로 필터 전역 상태 관리

검색 필터의 상태 관리를 기존 useState 기반에서 전역 상태 관리 도구인 Recoil로 전환했다. Recoil은 Facebook(메타)에서 개발한 React 상태 관리 라이브러리로, atom과 selector 개념을 기반으로 구성되며 복잡한 컴포넌트 트리에서도 상태 공유가 간편해진다.

Recoil 주요 개념

Atom: Recoil에서 가장 기본적인 상태 단위로, 여러 컴포넌트에서 읽고 쓸 수 있는 전역 상태

Selector: 하나 이상의 atom 또는 selector 값을 기반으로 계산된 파생 상태를 생성하는 함수 (동기/비동기 모두 가능)

자주 사용하는 Recoil 훅

useRecoilState atom의 값을 읽고 쓰는 쌍을 반환

useRecoilValue atom 또는 selector의 값만 반환 (읽기 전용)

useSetRecoilState 값을 설정하는 함수만 반환

useResetRecoilState atom 값을 초기 상태로 되돌림

useState로 개별 관리하던 filterValue, detailFilter 등의 상태는 각각 atom으로 정의하고 컴포넌트에서는 useRecoilState를 통해 전역적으로 접근하도록 리팩토링했다.

  const [filterValue, setFilterValue] = useRecoilState(filterState)
  const [detailFilter, setDetailFilter] = useRecoilState(detailFilterState)

▪️ Next.js 13의 Data Fetching 전략 정리 (SSR / SSG / ISR)

Next.js 12까지는 getStaticProps, getServerSideProps, getStaticPaths 등 특수한 함수 기반으로 SSG/SSR/ISR을 구현했지만,
Next.js 13(App Router)부터는 fetch() 함수에 캐시 설정(cache)과 리밸리데이션(next.revalidate) 옵션을 조합해 렌더링 전략을 선택할 수 있다.

SSR(Server-Side Rendering) 방식
요청 시마다 서버에서 HTML을 새로 렌더링하는 방식으로 최신 데이터 보장이 필요한 페이지에 적합하다

const res = await fetch('https://api.example.com/rooms', {
  cache: 'no-store',
});

SSG(Static Site Generation)
빌드 시점에 정적 HTML로 렌더링하고 그 결과를 캐시해 최고의 성능을 제공하는 방식이다. 기본값은 'force-cache'로 명시적으로 작성하지 않아도 적용된다.

const res = await fetch('https://api.example.com/rooms', {
  cache: 'force-cache', // 생략 가능
});

ISR(Incremental Static Regeneration)
정적으로 생성된 페이지를 일정 주기로 자동 갱신해 SSG의 성능과 최신성을 모두 만족하는 방식이다.

const res = await fetch('https://api.example.com/rooms', {
  next: { revalidate: 10 }, // 10초마다 백그라운드 갱신
});

👀 Next.js 13의 fetch()와 각 캐싱 전략(SSG, SSR, ISR)에 따른 동작 차이를 확인하기 위해 랜덤 숫자 API(https://www.random.org)를 활용해 실습을 진행했다.

SSR: 요청할 때마다 새 숫자가 반환되어 매번 다른 값 확인 가능

SSG: 빌드 이후 숫자가 고정되어 동일한 값이 계속 표시됨

ISR: 설정한 revalidate 시간에 따라 일정 주기로 숫자 갱신. 그 외엔 기존 데이터 유지

💡 yarn build, yarn start로 실행한 뒤 DevTools나 서버 로그, 혹은 E-Tag 응답 헤더 등을 통해 캐시 유무를 정확히 검증할 수 있다.

▪️ 숙박 리스트 및 카테고리 구현하기

숙소 데이터를 불러오기 위해 Next.js 13의 Route Handlers를 활용해 API 엔드포인트를 구성하고 클라이언트 측에서는 초기에는 fetch로 데이터를 요청하다가 이후에는 React Query를 도입해 안정적이고 효율적인 방식으로 리팩토링하였다.

Route Handlers란?
Route Handlers는 app/ 디렉토리 내에서 route.ts 또는 route.js 파일로 구성해 API 요청을 처리하는 기능이다. 기존 pages/api 기반 API Routes와 비슷하지만 App Router 환경에 맞춰 더 직관적이고 유연한 API 구성이 가능하다.

app/api/rooms/route.ts처럼 파일을 구성하면 /api/rooms 경로에서 HTTP 요청을 처리할 수 있다.
GET, POST, PUT, PATCH, DELETE 등 다양한 메서드를 지원하며 GET의 경우 Response 객체를 명시적으로 반환해야 한다.
내부적으로 캐싱, 스트리밍, 헤더 제어 등이 가능하다.
응답은 NextResponse.json(data, { status: 200 }) 형태로 반환하여 상태 코드와 JSON 데이터를 함께 전달한다.

Next.js 13의 Route Handlers를 활용해 app/api/rooms/route.ts 경로에 GET 요청을 처리하는 API를 구성했다. 해당 핸들러에서는 Prisma Client를 사용해 room 테이블의 데이터를 조회하고, NextResponse.json()을 통해 상태 코드 200과 함께 JSON 형태로 응답을 반환한다.

React Query로 CSR 데이터 요청하기

fetch('/api/rooms')를 사용해 데이터를 요청했지만, 상태 관리와 로딩 처리, 에러 핸들링을 효율적으로 하기 위해 React Query의 useQuery 훅으로 변경했다.

비동기 요청과 동시에 로딩, 에러, 성공 상태를 명확하게 분리해 관리할 수 있어 유지보수에 용이하다.

React Query는 데이터 캐싱, 리페치, 오류 재시도 등 다양한 기능을 기본으로 제공해 보다 안정적인 상태 관리가 가능하다.

▪️ Intersection Observer 기반 무한 스크롤 구현

사용자 경험을 향상시키기 위해, 페이지 하단에 도달하면 자동으로 다음 숙소 데이터를 불러오는 무한 스크롤 기능을 구현했다. 이를 위해 react-query의 useInfiniteQuery를 활용해 비동기 데이터 흐름을 관리하고 브라우저 API인 Intersection Observer로 하단 요소가 뷰포트에 진입했는지를 감지하여 추가 데이터를 로드하는 구조로 구성했다.

Intersection Observer란?
Intersection Observer API는 브라우저 뷰포트 또는 지정된 루트(root)와 특정 요소가 교차하는 시점을 감지해 콜백을 실행할 수 있는 브라우저 API다. 주로 무한 스크롤, 이미지 Lazy Loading, 광고 가시성 측정 등에 활용된다.

Target: 관찰할 DOM 요소

Observer: 대상 요소가 교차 상태일 때 콜백을 실행하는 주체

Callback: 상태가 변경되었을 때 실행되는 함수

Options: root, rootMargin, threshold 등 감지 조건 설정

👀 무한 스크롤 구현 순서
1. 기존 findMany()로 전부 불러오던 방식에서 페이지네이션 기반 데이터 구조로 변경
2. useInfiniteQuery를 사용해 페이지 단위로 데이터를 요청하고, getNextPageParam을 정의해 다음 요청 조건을 설정
3.Intersection Observer로 하단 감시 요소(ref)를 등록하고, 해당 요소가 뷰포트에 들어오면 fetchNextPage() 호출
4. isFetching, isFetchingNextPage, hasNextPage 값을 기반으로 로딩 상태 UI를 제어하여 사용자 흐름을 자연스럽게 유지

▪️ Next.js 13 Error Handling 예외 처리

Next.js 13의 App Router에서는 error.js 파일을 통해 경로별로 에러 처리를 구성할 수 있다. 이 파일은 해당 세그먼트에 React Error Boundary를 자동 생성하며 중첩된 경로 하위에서 오류가 발생했을 때 해당 블록만 분리해 렌더링을 제어한다.

오류가 발생해도 전체 애플리케이션이 중단되지 않고, 문제가 생긴 부분만 격리되어 나머지 화면은 정상적으로 동작하고 reset() 함수를 활용해 사용자가 직접 다시 시도할 수 있는 복구 UI를 구현할 수 있다.

Next.js 공식문서: Error Handling

중첩 라우트에서의 에러 처리
Next.js App Router에서는 중첩 구조를 따르기 때문에 rror.js 파일 역시 중첩된 경로마다 정의할 수 있다. 이를 통해 경로별로 에러 UI를 다르게 구성하거나, 더 세밀한 오류 핸들링을 구현할 수 있다.

app/products/error.tsx: 상품 페이지 관련 에러 전용 UI

app/global-error.tsx: 앱 전역에서 발생하는 예외 처리

💡 error.js는 React Error Boundary처럼 클라이언트에서 동작해야 하므로, 반드시 'use client' 지시어를 선언해야 정상적으로 작동한다.

전체 화면이 흰 화면(Fallback UI)으로 바뀌는 것은 사용자 입장에서 큰 이탈 요인이 될 수 있다. Next.js 13의 error.js를 활용하면 경로별로 적절한 에러 처리 UI를 제공할 수 있어, 서비스 신뢰도와 사용자 경험 모두를 지키는 에러 대응이 가능하다.

ε( ε ˙³˙)з ○º

차곡차곡 쌓아두기 💭

이전 포스트

🏡 숙박 예약 플랫폼: Next.js 13 프로젝트 설계 및 환경 구성 (1)

다음 포스트

🏡 숙박 예약 플랫폼: 공통 레이아웃과 더미데이터 구성, 메인 페이지 구현 (2)

뚝딱뚝딱 숙박 예약 플랫폼 만들기 🏡

💨 전역 레이아웃 구성하기 (Tailwind CSS)

▪️ `layout.tsx`로 공통 레이아웃 설계

▪️ 전역 Provider 구조 분리

▪️ React Icons를 활용한 아이콘 적용

▪️ `not-found`를 통한 커스텀 404 페이지 구현

🧐 Prisma 기초 문법과 Mock 데이터 세팅

▪️ 데이터 생성(Create) 및 조회(Read)

▪️ 데이터 수정(Update) 및 삭제(Delete)

▪️ Pagination(페이지네이션) 및 정렬

▪️ Seed 파일로 초기 데이터 삽입

▪️ Faker 라이브러리로 더미 데이터 생성

📊 메인 페이지 개발하기

▪️ 검색 필터 구성

▪️ 달력 컴포넌트 구현 (react-calendar)

▪️ Recoil로 필터 전역 상태 관리

▪️ Next.js 13의 Data Fetching 전략 정리 (SSR / SSG / ISR)

▪️ 숙박 리스트 및 카테고리 구현하기

React Query로 CSR 데이터 요청하기

▪️ Intersection Observer 기반 무한 스크롤 구현

▪️ Next.js 13 Error Handling 예외 처리

🏡 숙박 예약 플랫폼: Next.js 13 프로젝트 설계 및 환경 구성 (1)

🏡 숙박 예약 플랫폼: Kakao Map 지도 연동과 상세 페이지 구현 (3)

0개의 댓글

🏡 숙박 예약 플랫폼: 공통 레이아웃과 더미데이터 구성, 메인 페이지 구현 (2)

뚝딱뚝딱 숙박 예약 플랫폼 만들기 🏡

💨 전역 레이아웃 구성하기 (Tailwind CSS)

▪️ layout.tsx로 공통 레이아웃 설계

▪️ 전역 Provider 구조 분리

▪️ React Icons를 활용한 아이콘 적용

▪️ not-found를 통한 커스텀 404 페이지 구현

🧐 Prisma 기초 문법과 Mock 데이터 세팅

▪️ 데이터 생성(Create) 및 조회(Read)

▪️ 데이터 수정(Update) 및 삭제(Delete)

▪️ Pagination(페이지네이션) 및 정렬

▪️ Seed 파일로 초기 데이터 삽입

▪️ Faker 라이브러리로 더미 데이터 생성

📊 메인 페이지 개발하기

▪️ 검색 필터 구성

▪️ 달력 컴포넌트 구현 (react-calendar)

▪️ Recoil로 필터 전역 상태 관리

▪️ Next.js 13의 Data Fetching 전략 정리 (SSR / SSG / ISR)

▪️ 숙박 리스트 및 카테고리 구현하기

React Query로 CSR 데이터 요청하기

▪️ Intersection Observer 기반 무한 스크롤 구현

▪️ Next.js 13 Error Handling 예외 처리

🏡 숙박 예약 플랫폼: Next.js 13 프로젝트 설계 및 환경 구성 (1)

🏡 숙박 예약 플랫폼: Kakao Map 지도 연동과 상세 페이지 구현 (3)

0개의 댓글

▪️ `layout.tsx`로 공통 레이아웃 설계

▪️ `not-found`를 통한 커스텀 404 페이지 구현