🚧 wip: 리뷰 탭 1차 ui 작업 중...

bbbbmo · bbbbmo · commit ac3537384287 · 2025-09-29T23:21:53.000+09:00
diff --git a/next.config.js b/next.config.js
@@ -5,7 +5,7 @@ const withFlowbiteReact = require("flowbite-react/plugin/nextjs");
 const nextConfig = {
   outputFileTracingRoot: path.join(__dirname),
   images: {
-    domains: ["localhost", "images.unsplash.com"],
+    domains: ["localhost", "images.unsplash.com, example.com"],
   },
   webpack: (config) => {
     config.resolve.fallback = {
diff --git a/src/app/(main)/_components/RecipeCard/RecipeCard.tsx b/src/app/(main)/_components/RecipeCard/RecipeCard.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Button, Card } from "flowbite-react";
-import Stars from "./_components/Stars";
+import Stars from "../../../../components/Stars";
 import CardSkeleton from "../../../../components/Cards/CardSkeleton";
 import { UserRecipe } from "@/types/recipe.types";
 import Link from "next/link";
diff --git a/src/app/(main)/_components/RecipeCard/_components/Stars.tsx b/src/app/(main)/_components/RecipeCard/_components/Stars.tsx
diff --git a/src/app/(main)/bar-search/[barId]/_components/BarFooter.tsx/ReviewCard.const.ts b/src/app/(main)/bar-search/[barId]/_components/BarFooter.tsx/ReviewCard.const.ts
@@ -0,0 +1,64 @@
+import { Review } from "./ReviewCard";
+
+export const mockReviews: Review[] = [
+    {
+      id: 1,
+      userName: "김바텐",
+      profileImageUrl: "https://example.com/avatars/kim.png",
+      visitDate: "2025-08-15",
+      rating: 5,
+      comment: "칵테일 맛도 훌륭하고 바텐더가 정말 친절했어요!",
+      createdAt: "2025-09-20T12:34:56Z",
+      likeCount: 18,
+      imageUrl: "https://example.com/photos/review-1.jpg",
+      tags: ["친절해요", "분위기좋아요", "재방문의사있음"]
+    },
+    {
+      id: 2,
+      userName: "이밤",
+      profileImageUrl: null,
+      visitDate: "2025-09-01",
+      rating: 4,
+      comment: "조용하고 좋았는데 좌석이 약간 불편했어요.",
+      createdAt: "2025-09-22T09:11:03Z",
+      likeCount: 7,
+      imageUrl: null,
+      tags: ["조용한분위기", "가성비굿"]
+    },
+    {
+      id: 3,
+      userName: "Park",
+      profileImageUrl: "https://example.com/avatars/park.jpg",
+      visitDate: "2025-09-10",
+      rating: 3,
+      comment: "전반적으로 무난. 하이볼은 괜찮았어요.",
+      createdAt: "2025-09-23T19:45:12Z",
+      likeCount: 3,
+      imageUrl: "https://example.com/photos/review-3.png",
+      tags: ["무난해요"]
+    },
+    {
+      id: 4,
+      userName: "Jin",
+      profileImageUrl: "https://example.com/avatars/jin.webp",
+      visitDate: "2025-09-18",
+      rating: 5,
+      comment: "생일 이벤트로 갔는데 음악과 조명이 최고!",
+      createdAt: "2025-09-24T21:02:40Z",
+      likeCount: 25,
+      imageUrl: null,
+      tags: ["생일추천", "라이브좋아요", "인테리어예쁨"]
+    },
+    {
+      id: 5,
+      userName: "Sora",
+      profileImageUrl: null,
+      visitDate: "2025-09-20",
+      rating: 2,
+      comment: "기대보다 시끄러웠고 예약 확인이 늦었어요.",
+      createdAt: "2025-09-25T08:27:19Z",
+      likeCount: 1,
+      imageUrl: "https://example.com/photos/review-5.jpg",
+      tags: ["시끄러움", "대기있음"]
+    }
+  ];
diff --git a/src/app/(main)/bar-search/[barId]/_components/BarFooter.tsx/ReviewCard.tsx b/src/app/(main)/bar-search/[barId]/_components/BarFooter.tsx/ReviewCard.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import Stars from "@/components/Stars";
+import Tags from "@/components/Tags";
+import { Avatar, Card } from "flowbite-react";
+import Image from "next/image";
+import { BiLike } from "react-icons/bi";
+
+export type Review = {
+  id: number;
+  userName: string;
+  profileImageUrl: string | null;
+  visitDate: string;
+  rating: number;
+  comment: string;
+  createdAt: string;
+  likeCount: number;
+  imageUrl: string | null;
+  tags: string[];
+};
+
+export default function ReviewCard({ review }: { review: Review }) {
+  return (
+    <Card className="border-neutral-600 bg-neutral-800 py-4">
+      <Avatar img={review.profileImageUrl || ""} rounded>
+        <div className="space-y-1 font-medium dark:text-white">
+          <div>{review.userName}</div>
+          <div className="text-sm text-gray-500 dark:text-gray-400">
+            <Stars rating={review.rating} />
+            <span>{review.visitDate} 방문</span>
+          </div>
+        </div>
+      </Avatar>
+      <p>{review.comment}</p>
+      {review.imageUrl && (
+        <Image
+          src={review.imageUrl}
+          alt={review.userName}
+          width={100}
+          height={100}
+        />
+      )}
+      <Tags tags={review.tags} />
+      <div>
+        <span>
+          <BiLike size={16} />
+          {review.likeCount}개
+        </span>
+        <span>{review.createdAt}</span>
+        span
+      </div>
+    </Card>
+  );
+}
diff --git a/src/app/(main)/bar-search/[barId]/_components/BarFooter.tsx/ReviewTab.tsx b/src/app/(main)/bar-search/[barId]/_components/BarFooter.tsx/ReviewTab.tsx
@@ -1,7 +1,40 @@
 "use client";
 
-import { Card } from "flowbite-react";
+import FormOption from "@/components/Forms/FormOption";
+import Stars from "@/components/Stars";
+import { Pagination } from "flowbite-react";
+import { useState } from "react";
+import ReviewCard from "./ReviewCard";
+import { mockReviews } from "./ReviewCard.const";
 
 export default function ReviewTab() {
-  return <Card className="border-neutral-600 bg-neutral-800">BarReview</Card>;
+  const rating = 4.5;
+  const reviews = [1, 2, 3, 4, 5];
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const onPageChange = (page: number) => setCurrentPage(page);
+  return (
+    <div className="px-4">
+      <section className="mb-4">
+        <div className="flex flex-col gap-2">
+          <span className="text-4xl font-bold">{rating}</span>
+          <Stars rating={rating} size={24} />
+        </div>
+        <div className="flex items-center justify-between">
+          <span>리뷰 {reviews.length}개</span>
+          <FormOption options={["최신순", "평점순", "좋아요순"]} />
+        </div>
+      </section>
+      {mockReviews.map((review) => (
+        <ReviewCard key={review.id} review={review} />
+      ))}
+      <div className="flex overflow-x-auto sm:justify-center">
+        <Pagination
+          currentPage={currentPage}
+          totalPages={100}
+          onPageChange={onPageChange}
+          showIcons
+        />
+      </div>
+    </div>
+  );
 }
diff --git a/src/components/Stars.tsx b/src/components/Stars.tsx
@@ -0,0 +1,35 @@
+import { HiStar } from "react-icons/hi";
+
+const MAX_STARS = 5;
+
+type StarsProps = {
+  rating: number;
+  size?: number;
+  showRatingChip?: boolean;
+};
+
+export default function Stars({ rating, size, showRatingChip }: StarsProps) {
+  const safeRating = Math.max(0, Math.min(MAX_STARS, Math.round(rating)));
+  return (
+    <div className="mt-2.5 mb-5 flex items-center">
+      <div className="flex items-center rtl:space-x-reverse">
+        {Array.from({ length: MAX_STARS }).map((_, i) => (
+          <HiStar
+            key={i}
+            className={`${
+              i < safeRating
+                ? "text-yellow-300"
+                : "text-gray-200 dark:text-gray-600"
+            }`}
+            size={size}
+          ></HiStar>
+        ))}
+      </div>
+      {rating && showRatingChip ? (
+        <span className="ms-3 rounded-sm bg-blue-100 px-2.5 py-0.5 text-xs font-semibold text-blue-800 dark:bg-blue-200 dark:text-blue-800">
+          {rating}
+        </span>
+      ) : null}
+    </div>
+  );
+}
