feat: review, travel story의 hard coding data를 msw response 값으로 변경

Author: dev-yun

src/app/[locale]/home/components/ReviewList.tsx

@@ -1,13 +1,25 @@
+import { IResponseReview } from "@/lib/types/travel";
 import React from "react";
 import ReviewCard from "@/components/ui/cards/ReviewCard";
 import WithTitleWrapper from "@/components/common/WithTitleWrapper";
 
-const ReviewList = () => {
+async function getReviews() {
+  const response = await fetch(`${process.env.API_HOST}/review`);
+
+  const reviews: IResponseReview = await response.json();
+
+  return reviews;
+}
+
+const ReviewList = async () => {
+  const reviews = await getReviews();
+
   return (
     <WithTitleWrapper title="지금뜨는 리뷰" moreHref="reviews">
       <div className="flex flex-col gap-2">
-        <ReviewCard />
-        <ReviewCard />
+        {[...reviews.data].slice(0, 2).map(review => (
+          <ReviewCard key={review.id} review={review} />
+        ))}
       </div>
     </WithTitleWrapper>
   );

src/app/[locale]/home/components/TravelStoryList.tsx

@@ -1,13 +1,25 @@
+import { IResponseTravelStory } from "@/lib/types/travel";
 import React from "react";
 import TravelStoryCard from "@/components/ui/cards/TravelStoryCard";
 import WithTitleWrapper from "@/components/common/WithTitleWrapper";
 
-const TravelStoryList = () => {
+async function getTravelStories() {
+  const response = await fetch(`${process.env.API_HOST}/story`);
+
+  const stories: IResponseTravelStory = await response.json();
+
+  return stories;
+}
+
+const TravelStoryList = async () => {
+  const stories = await getTravelStories();
+
   return (
     <WithTitleWrapper title="지금뜨는 여행기" moreHref="stories">
       <div className="flex flex-col gap-2">
-        <TravelStoryCard />
-        <TravelStoryCard />
+        {[...stories.data].slice(0, 2).map(story => (
+          <TravelStoryCard key={story.id} story={story} />
+        ))}
       </div>
     </WithTitleWrapper>
   );

src/components/ui/cards/ReviewCard.tsx

@@ -1,21 +1,17 @@
 "use client";
 
 import Card from "./context/CardProvider";
+import { IReview } from "@/lib/types/travel";
 import React from "react";
 
-const ReviewCard = () => {
-  const card = {
-    starRating: 4,
-    commentCount: 5,
-    imageSrc: "https://www.ghibli.jp/gallery/ponyo016.jpg",
-    title: "세번째 카드 종류",
-    description: "설명도 있음",
-    userName: "yunnnn",
-    userImageSrc: "https://www.ghibli.jp/gallery/ponyo016.jpg",
-  };
+interface Props {
+  review: IReview;
+}
+
+const ReviewCard = ({ review }: Props) => {
   return (
     <div className="flex items-center gap-4 px-4 py-4 border rounded-md bg-white">
-      <Card card={card}>
+      <Card card={review}>
         <Card.CardImage />
         <div className="flex flex-col gap-2 flex-1">
           <Card.CardTitle />

src/components/ui/cards/TravelStoryCard.tsx

@@ -1,23 +1,17 @@
 "use client";
 
 import Card from "./context/CardProvider";
+import { ITravelStory } from "@/lib/types/travel";
 import React from "react";
 
-const TravelStoryCard = () => {
-  const card = {
-    isLike: true,
-    likeCount: 10,
-    commentCount: 5,
-    imageSrc: "https://www.ghibli.jp/gallery/ponyo016.jpg",
-    tagList: ["#서울", "#대전"],
-    title: "첫번째 카드",
-    userName: "신윤철",
-    userImageSrc: "https://www.ghibli.jp/gallery/ponyo016.jpg",
-  };
+interface Props {
+  story: ITravelStory;
+}
 
+const TravelStoryCard = ({ story }: Props) => {
   return (
     <div className="flex items-center gap-4 px-4 py-4 border rounded-md bg-white">
-      <Card card={card}>
+      <Card card={story}>
         <Card.CardImage />
         <div className="flex flex-col gap-2 flex-1">
           <Card.CardTags />

src/components/ui/cards/context/CardProvider.tsx

@@ -12,7 +12,7 @@ interface ICard {
   isLike?: boolean;
   likeCount?: number;
   commentCount: number;
-  starRating?: number;
+  score?: number;
   imageSrc?: string;
   tagList?: string[];
   title: string;

src/components/ui/cards/context/StarButton.tsx

@@ -1,6 +1,5 @@
-import React, { useState } from "react";
-
 import { Button } from "../../Button";
+import React from "react";
 import StarIcon from "@/components/icons/StartIcon";
 import { cn } from "@/lib/utils/cn";
 import { useCardContext } from "./CardProvider";
@@ -9,8 +8,7 @@ const StarButton = React.forwardRef<
   HTMLButtonElement,
   React.HTMLAttributes<HTMLButtonElement>
 >(({ className, ...props }, ref) => {
-  const { starRating } = useCardContext();
-  const [star, setStar] = useState(false);
+  const { score } = useCardContext();
 
   return (
     // [todo]: change click event to update like Api
@@ -19,15 +17,10 @@ const StarButton = React.forwardRef<
       size="icon"
       variant="ghost"
       className={cn("flex items-center gap-1", className)}
-      onClick={() => {
-        setStar(!star);
-      }}
       {...props}
     >
       <StarIcon className="w-4 h-4" />
-      <span className="flex items-center text-[#b8b8b8] text-xs">
-        {starRating}
-      </span>
+      <span className="flex items-center text-[#b8b8b8] text-xs">{score}</span>
     </Button>
   );
 });

src/lib/types/travel.ts

@@ -0,0 +1,44 @@
+export interface IResponseTravelStory {
+  pageInfo: {
+    page: number;
+    hasNext: number;
+    hasPrevious: number;
+    totalElements: number;
+    totalPages: number;
+  };
+  data: ITravelStory[];
+}
+
+export interface ITravelStory {
+  id: number;
+  isLike: boolean;
+  likeCount: number;
+  commentCount: number;
+  imageSrc: string;
+  title: string;
+  tagList: string[];
+  userName: string;
+  userImageSrc: string;
+}
+
+export interface IResponseReview {
+  pageInfo: {
+    page: number;
+    hasNext: number;
+    hasPrevious: number;
+    totalElements: number;
+    totalPages: number;
+  };
+  data: IReview[];
+}
+
+export interface IReview {
+  id: number;
+  score: number;
+  commentCount: number;
+  imageSrc: string;
+  title: string;
+  description: string;
+  userName: string;
+  userImageSrc: string;
+}

src/mocks/handlers.ts

@@ -1,34 +1,5 @@
-import { HttpResponse, http } from "msw";
+import { getPlaces } from "./handlers/place";
+import { getReviews } from "./handlers/review";
+import { getTravelStories } from "./handlers/travelStory";
 
-import { IResponsePlace } from "@/lib/types/place";
-
-export const handlers = [
-  http.get<never, never, IResponsePlace>(
-    "http://jandp-travel.kro.kr/place",
-    () => {
-      return HttpResponse.json({
-        pageInfo: {
-          page: 1,
-          hasNext: 1,
-          hasPrevious: 0,
-          totalElements: 2,
-          totalPages: 1,
-        },
-        data: [
-          {
-            id: 1,
-            placeId: "hdaasdasdasdasas",
-            name: "서울",
-            subName: "서울",
-          },
-          {
-            id: 2,
-            placeId: "asdasfasfasfas",
-            name: "대전",
-            subName: "대전",
-          },
-        ],
-      });
-    }
-  ),
-];
+export const handlers = [getPlaces, getTravelStories, getReviews];

src/mocks/handlers/place.ts

@@ -0,0 +1,11 @@
+import { HttpResponse, http } from "msw";
+
+import { IResponsePlace } from "@/lib/types/place";
+import { placeResponse } from "../response/place";
+
+export const getPlaces = http.get<never, never, IResponsePlace>(
+  `${process.env.API_HOST}/place`,
+  () => {
+    return HttpResponse.json(placeResponse);
+  }
+);

src/mocks/handlers/review.ts

@@ -0,0 +1,7 @@
+import { HttpResponse, http } from "msw";
+
+import { reviewResponse } from "../response/review";
+
+export const getReviews = http.get(`${process.env.API_HOST}/review`, () => {
+  return HttpResponse.json(reviewResponse);
+});