🏡 숙박 예약 플랫폼: 찜하기 및 댓글 기능 구현하기 (5)

---

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

---

🩷 숙소 상세페이지에 찜하기 기능 구현하기

▪️ 찜하기(Like) 스키마 모델링

찜하기 기능을 구현하기 위해 사용자(User)와 숙소(Room) 간의 N:M 관계를 표현하는 Like 모델을 추가적으로 설계했다. 사용자가 숙소에 좋아요를 누르면 해당 조합의 Like 레코드가 생성되고, 좋아요를 해제하면 해당 레코드가 삭제된다.

model Like {
  id        Int      @id @default(autoincrement())
  roomId    Int
  userId    Int
  createdAt DateTime @default(now())

  room Room @relation(fields: [roomId], references: [id], onDelete: Cascade)
  user User @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@index([userId, roomId])
}

• roomId, userId: 어떤 숙소를 어떤 사용자가 찜했는지를 나타내는 관계 키
• createdAt: 찜한 시점 기록
• onDelete: Cascade: 숙소 또는 사용자가 삭제되면 관련 찜 데이터도 자동으로 삭제되도록 설정
• @@index([userId, roomId]): 한 사용자가 같은 숙소를 중복으로 찜하는 것을 방지하거나 userId + roomId 기반의 빠른 조회를 위한 인덱스 설정

💡

• POST /api/likes: roomId와 userId 조합으로 찜 데이터를 생성 또는 삭제
• GET /api/rooms: 해당 roomId에 대한 찜 목록 확인
• 클라이언트에서는 Like 데이터의 유무에 따라 UI 상태를 조건 분기하여 표시

---

▪️ LikeButton 컴포넌트 구조와 설계

• roomId를 props로 전달받아 현재 숙소 정보를 조회
• 찜 여부 확인을 위해 /api/rooms?id=${roomId}로 GET 요청
• 응답 데이터의 isLiked 값을 기준으로 컴포넌트의 UI 상태를 다르게 렌더링
• 사용자가 하트를 클릭하면 toggleLike 함수를 실행하여 /api/likes/route에 POST 요청을 전송

  const toggleLike = async () => {
    // 찜하기 / 찜 취소하기 로직
    if (session?.user && room) {
      try {
        const like = await axios.post('/api/likes', {
          roomId: room.id,
        })

        if (like.status === 201) {
          toast.success('숙소를 찜했습니다.')
        } else {
          toast.error('찜을 취소했습니다.')
        }

        refetch()
      } catch (e) {
        console.log(e)
        toast.error('찜 목록에 추가하는데 실패했습니다.')
      }
    } else {
      toast.error('로그인 후 시도해주세요.')
    }
  }

---

▪️ Like API 설계 (Next.js Route Handler)

• /api/likes/route 찜 토글 API
  클라이언트에서는 하나의 토글 함수로 찜 여부를 전환할 수 있도록 POST 요청 기반의 단일 API로 설계했다.
  사용자가 하트를 클릭하면 서버에 요청을 보내고, 기존에 찜한 상태인지 여부에 따라 등록 또는 취소 처리를 수행한다.
  이 로직은 Next.js의 app/api Route Handler를 통해 하나의 엔드포인트에서 통합적으로 처리된다.

export async function POST(req: Request) {
  const { roomId } = await req.json();
  const session = await getServerSession(authOptions);

  if (!session?.user?.id) {
    return new NextResponse('Unauthorized', { status: 401 });
  }

  // 현재 유저가 이 roomId에 대해 이미 찜했는지 확인
  const existingLike = await prisma.like.findFirst({
    where: {
      roomId,
      userId: session.user.id,
    },
  });

  if (existingLike) {
    // 이미 찜한 상태 (삭제 처리)
    const like = await prisma.like.delete({
      where: { id: existingLike.id },
    });
    return NextResponse.json(like, { status: 200 });
  } else {
    // 찜한 적 없음 (새로 생성)
    const like = await prisma.like.create({
      data: {
        roomId,
        userId: session.user.id,
      },
    });
    return NextResponse.json(like, { status: 201 });
  }
}

• /api/likes는 단일 API로 찜 등록 및 해제를 모두 처리
• 내부에서 roomId + userId 조합으로 기존 Like 레코드가 있는지 확인
  (존재하면 삭제, 없으면 새로 생성)
• 프론트엔드는 복잡한 분기 없이 하나의 toggleLike() 함수로 처리 가능

• 찜하기 기능은 로그인한 사용자만 사용할 수 있기 때문에 API 요청 시 next-auth의 getServerSession()을 통해 현재 로그인된 사용자의 정보를 서버에서 확인하고 인증 여부를 검증한다.

• /api/rooms/route: 찜 여부 확인 API
  GET 요청으로 동작하며 roomId와 userId를 기준으로 클라이언트에서 특정 숙소가 로그인한 사용자의 찜 목록에 포함되어 있는지를 판단하기 위해 사용

if (id) {
  // 숙소 상세 정보 조회
  const room = await prisma.room.findUnique({
    where: { id: parseInt(id) },
    include: {
      likes: {
        where: session ? { userId: session?.user?.id } : {},
      },
    },
  });
}

include.likes를 통해 Room 모델과 Like 모델 간의 관계를 활용해 찜 정보를 함께 조회한다. 이때 조건으로 userId === 현재 로그인한 사용자 ID를 적용하여 해당 숙소를 현재 사용자가 찜한 경우에만 likes 배열에 데이터가 포함된다. 따라서 room.likes.length > 0이면 찜한 상태, 그렇지 않으면 찜하지 않은 상태로 판단할 수 있다.

---

💬 숙소 상세페이지에 댓글 기능 구현하기

▪️ 댓글(Comment) 스키마 모델링

댓글 기능을 구현하기 위해 사용자(User)와 숙소(Room) 간의 관계를 표현하는 Comment 모델을 설계했다. Like 모델과 거의 비슷하며, 사용자가 댓글을 작성하면 해당 숙소와 유저에 연결된 댓글 데이터가 생성되며 본문 내용은 body 필드에 저장된다.

model Comment {
  id         Int      @id @default(autoincrement())
  createdAt  DateTime @default(now())
  roomId     Int
  userId     String
  body       String

  room Room  @relation(fields: [roomId], references: [id], onDelete: Cascade)
  user User  @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@index([userId, roomId])
}

• roomId, userId: 댓글을 작성한 숙소와 사용자 간의 관계 키
• body: 댓글 본문 내용
• createdAt: 댓글 작성 시각 (자동 기록)
• onDelete: Cascade: 사용자 또는 숙소가 삭제될 경우 관련 댓글도 함께 삭제
• @@index([userId, roomId]): 유저/숙소 기준으로 빠른 조회를 위한 인덱스 설정

---

▪️ Comment 댓글 컴포넌트 구조

댓글 기능은 입력과 조회, 전체 보기로 나뉘며 다음과 같은 세 가지 컴포넌트로 구성된다. 이렇게 역할을 분리함으로써 입력 영역과 조회 영역을 독립적으로 구성할 수 있다.

• CommentForm: 댓글을 입력하는 영역
• 사용자가 내용을 입력하면 onChange 핸들러를 통해 상태(state)에 값이 저장
• 입력 후 버튼을 클릭하면 /api/comments에 POST 요청을 보내 댓글을 생성

• CommentList: 최신 댓글 목록(최대 6개)을 보여주는 컴포넌트
• 상세 페이지 내에서 간단히 확인 가능한 리스트 UI
• ‘후기 모두 보기’ 버튼 클릭 시 CommentListModal을 열어 전체 댓글 확인 가능

• CommentListModal: 모든 댓글을 모달 형태로 보여주는 컴포넌트
• /api/comments에 GET 요청을 보내 페이지 단위로 댓글 불러오기
• IntersectionObserver와 useInfiniteQuery를 활용해 무한 스크롤 방식으로 구현

---

▪️ 댓글 기능 설계: Comment API 구조

댓글 기능은 /api/comments/route에서 다음 세 가지 메서드로 처리된다.

• POST /api/comments: 로그인된 사용자 인증
  댓글 작성 시 클라이언트에서 roomId와 body(댓글 내용)를 보내면 서버에서는 getServerSession으로 인증된 유저 정보를 확인한 후, 해당 데이터를 기반으로 새로운 댓글을 생성한다.

export async function POST(req: Request) {
  const session = await getServerSession(authOptions);
  const formData = await req.json();
  const { roomId, body }: { roomId: number; body: string } = formData;

  const comment = await prisma.comment.create({
    data: {
      roomId,
      body,
      userId: session?.user.id,
    },
  });

  return NextResponse.json(comment, { status: 200 });
}

• getServerSession(authOptions)로 인증된 사용자 여부 확인
• 로그인되어 있지 않으면 401 Unauthorized 반환
• 인증된 유저라면 roomId, body, userId를 바탕으로 댓글 생성

• GET /api/comments?roomId=1&limit=6: 특정 숙소의 댓글을 조회
  GET 요청에서는 searchParams를 기준으로 분기하여 두 가지 조회 방식을 처리한다.

1. page 파라미터가 존재할 경우 (무한 스크롤)

if (page) {
  const count = await prisma.comment.count({ where: { roomId } });
  const comments = await prisma.comment.findMany({
    where: { roomId },
    orderBy: { createdAt: 'desc' },
    take: limit,
    skip: (page - 1) * limit,
    include: { user: true },
  });

  return {
    data: comments,
    totalCount: count,
    totalPage: Math.ceil(count / limit),
    page,
  };
}

• skip, take를 활용한 offset 기반 pagination
• 총 개수 count와 함께 totalPage도 반환하여 클라이언트에서 페이지 종료 조건 판단 가능
• include: { user: true }로 사용자 정보도 함께 포함

2. page 파라미터가 없고 limit만 존재할 경우 (최신 댓글 6개)

const comments = await prisma.comment.findMany({
  where: { roomId },
  orderBy: { createdAt: 'desc' },
  take: limit,
  include: { user: true },
});

• 페이지 없이 최신순으로 N개만 조회 (6개)
• 페이지네이션이 필요 없는 CommentList에 적합

---

🙋🏻‍♀️ 마이페이지 기능 구현: 내가 쓴 댓글 & 찜한 숙소 리스트

로그인한 사용자가 자신의 활동 내역을 확인할 수 있도록, 마이페이지에는 ‘내가 작성한 댓글’과 ‘찜한 숙소 리스트’ 페이지를 각각 구현했다.

• 내가 작성한 댓글 모아보기
• app/(home)/users/comments/page.tsx
• app/api/comments/route.ts
• 로그인한 사용자가 작성한 댓글 목록을 조회하여 리스트로 출력
• API: GET /api/comments (userId를 조건으로 필터링된 댓글만 조회)

• 내가 찜한 숙소 리스트
• app/(home)/users/likes/page.tsx
• app/api/likes/route.ts
• 사용자가 찜한 숙소 데이터를 조회하여 리스트로 출력
• API: GET /api/likes (userId 기준으로 Like 목록 조회 및 숙소 정보 포함)