Merge pull request #144 from codeit-13-3team/fix/ProductDetailFix

fix: product 상세 페이지 수정

Author: jihye5081

src/api/auth.ts

@@ -42,4 +42,4 @@ export const kakaoSignup = async (token: string, nickname: string) => {
     token,
   });
   return response.data;
-};
+};

src/api/axiosInstance.ts

@@ -1,7 +1,5 @@
 import axios from 'axios';
 
-// export const teamId = '13-3';
-
 const axiosInstance = axios.create({
   baseURL: 'https://mogazoa-api.vercel.app/13-3',
 });

src/components/StarRating.tsx

@@ -5,29 +5,32 @@ import FullStar from '../../public/icon/common/star.png';
 
 type StarRatingProps = {
   value: number;
-  onChange: (value: number) => void;
+  onChange?: (value: number) => void;
+  starClassName?: string;
 };
 
-function StarRating({ value, onChange }: StarRatingProps) {
+function StarRating({ value, onChange, starClassName }: StarRatingProps) {
   const handleClick = (e: React.MouseEvent<HTMLSpanElement>, index: number) => {
     const { left, width } = e.currentTarget.getBoundingClientRect();
     const x = e.clientX - left;
     const isHalf = x < width / 2;
     const newValue = isHalf ? index + 0.5 : index + 1;
-    onChange(newValue);
+    onChange?.(newValue);
   };
 
   const renderStar = (index: number) => {
+    const commonClasses = starClassName ?? 'md:w-8 md:h-8';
+
     const diff = value - index;
     if (diff >= 1) {
       return (
-        <Image src={FullStar} alt="별점 아이콘" width={28} height={28} className="md:w-8 md:h-8" />
+        <Image src={FullStar} alt="별점 아이콘" width={28} height={28} className={commonClasses} />
       );
     }
     if (diff >= 0.5) {
-      return <HalfStar size={28} className="text-yellow md:w-8 md:h-8" />;
+      return <HalfStar size={28} className={`${commonClasses} text-yellow`} />;
     }
-    return <EmptyStar size={28} className="text-gray-200 md:w-8 md:h-8" />;
+    return <EmptyStar size={28} className={`${commonClasses} text-gray-200`} />;
   };
 
   return (

src/components/products/CategoryTag.tsx

@@ -0,0 +1,28 @@
+const CATEGORY_COLOR_MAP: Record<string, string> = {
+  음악: 'bg-[#C5D17C1A] text-[#C5D17C]',
+  '영화/드라마': 'bg-[#F755321A] text-[#F75532]',
+  '강의/책': 'bg-[#A953FF1A] text-[#A953FF]',
+  호텔: 'bg-[#49AF1A1A] text-[#49AF1A]',
+  '가구/인테리어': 'bg-[#D676C11A] text-[#D676C1]',
+  식당: 'bg-[#FF7E461A] text-[#FF7E46]',
+  전자기기: 'bg-[#23B5811A] text-[#23B581]',
+  화장품: 'bg-[#FD529A1A] text-[#FD529A]',
+  '의류/악세서리': 'bg-[#757AFF1A] text-[#757AFF]',
+  앱: 'bg-[#3098E31A] text-[#3098E3]',
+};
+
+interface CategoryTagProps {
+  name?: string;
+}
+
+const CategoryTag = ({ name }: CategoryTagProps) => {
+  if (!name) return null;
+
+  const colorClasses = CATEGORY_COLOR_MAP[name] ?? 'bg-gray-700 text-gray-200';
+
+  return (
+    <span className={`inline-block text-[12px] px-2 py-1 rounded ${colorClasses}`}>{name}</span>
+  );
+};
+
+export default CategoryTag;

src/components/products/ProductDetail.tsx

@@ -1,27 +1,36 @@
-'use client';
-
 import Image from 'next/image';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { ProductResponse } from '@/types/product';
 import { getProductById } from '@/api/products';
 import ProductDetailButtonGroup from '@/components/products/ProductDetailButtonGroup';
+import CategoryTag from './CategoryTag';
+import Share from '../../../public/icon/common/share.png';
+import unFilledHeart from '../../../public/icon/common/unsave.png';
+import FilledHeart from '../../../public/icon/common/save.png';
+import useAuthStore from '@/stores/authStores';
+import { useRouter } from 'next/router';
+import axiosInstance from '@/api/axiosInstance';
 
 interface ProductDetailProps {
   id: number;
 }
 
 const toggleFavorite = async (productId: number, isFavorite: boolean): Promise<void> => {
-  const method = isFavorite ? 'DELETE' : 'POST';
-  const res = await fetch(`https://mogazoa-api.vercel.app/13-3/products/${productId}/favorite`, {
-    method,
-  });
-  if (!res.ok) {
-    throw new Error(`Failed to ${isFavorite ? 'unlike' : 'like'} product`);
+  try {
+    if (isFavorite) {
+      await axiosInstance.delete(`/products/${productId}/favorite`);
+    } else {
+      await axiosInstance.post(`/products/${productId}/favorite`);
+    }
+  } catch (err: any) {
+    throw new Error(err.message || 'Failed to toggle favorite');
   }
 };
 
 export default function ProductDetail({ id }: ProductDetailProps) {
   const queryClient = useQueryClient();
+  const router = useRouter();
+  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
 
   const { data: product, isLoading } = useQuery<ProductResponse>({
     queryKey: ['product', id],
@@ -34,14 +43,37 @@ export default function ProductDetail({ id }: ProductDetailProps) {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['product', id] });
     },
+    onError: (err) => {
+      if (err.message === 'Unauthorized') {
+        alert('로그인이 필요한 기능입니다.');
+        router.push('/login');
+      } else {
+        alert(err.message);
+      }
+    },
   });
 
   const handleFavoriteClick = () => {
+    if (!isLoggedIn) {
+      alert('로그인이 필요한 기능입니다.');
+      return router.push('/login');
+    }
     if (product) {
       favoriteMutation.mutate({ productId: product.id, isFavorite: product.isFavorite });
     }
   };
 
+  const handleShareClick = async () => {
+    try {
+      const url = window.location.href;
+      await navigator.clipboard.writeText(url);
+      alert('클립보드에 URL이 복사되었습니다.');
+    } catch (err) {
+      console.error('클립보드 복사 실패:', err);
+      alert('URL 복사에 실패했습니다.');
+    }
+  };
+
   if (isLoading) {
     return (
       <section className="flex items-center justify-center min-h-[200px]">
@@ -59,40 +91,62 @@ export default function ProductDetail({ id }: ProductDetailProps) {
   }
 
   return (
-    <section className="w-full mx-auto mb-4 sm:mb-6 lg:mb-8">
-      <div className="w-full bg-black-400 rounded-xl flex flex-col lg:flex-row items-center gap-4 lg:gap-8 p-4 sm:p-6 lg:p-8">
-        <div className="w-full sm:w-[180px] h-[180px] flex-shrink-0 flex items-center justify-center bg-black-500 rounded-lg border border-gray-200">
+    <section className="w-full mx-auto mb-[60px] lg:mb-20">
+      <div className="w-full flex flex-col md:flex-row items-center gap-4">
+        <div className="lg:w-[355px] min-w-[240px] w-full flex items-center justify-center">
           <Image
-            src={
-              product.image ||
-              'https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/MWP22?wid=1144&hei=1144&fmt=jpeg&qlt=80&.v=1591634795000'
-            }
-            alt={product.name || '상품 이미지'}
+            src={product.image}
+            alt={product.name}
             width={160}
             height={160}
-            className="object-contain"
+            priority
+            className="object-contain h-auto"
           />
         </div>
-        <div className="flex-1 flex flex-col justify-between w-full h-full gap-4">
-          <div>
-            <span className="inline-block bg-gray-200 text-white text-xs px-2 py-1 rounded mb-2">
-              {product.category?.name || '브랜드명'}
-            </span>
-            <div className="text-lg sm:text-xl lg:text-2xl font-bold mb-2 flex items-center justify-between gap-4">
-              <span>{product.name || '상품명'}</span>
-              <button
-                onClick={handleFavoriteClick}
-                className="text-gray-400 hover:text-red-500"
-                disabled={favoriteMutation.isPending}
+        <div className="flex flex-col justify-between min-w-0 w-full">
+          <>
+            <div className="flex justify-between mb-[10px]">
+              <CategoryTag name={product.category?.name} />
+              <div
+                className="p-[5px] bg-black-400 rounded-[6px] block md:hidden"
+                onClick={handleShareClick}
+              >
+                <Image src={Share} alt="공유하기 아이콘" width={14} height={14} />
+              </div>
+            </div>
+            <div className="text-lg sm:text-xl lg:text-2xl font-bold mb-5 md:mb-[50px] flex items-center justify-between">
+              <div className="flex items-center gap-[15px]">
+                <span>{product.name || '상품명'}</span>
+                {product.isFavorite ? (
+                  <Image
+                    src={FilledHeart}
+                    alt="좋아요 아이콘"
+                    width={24}
+                    height={24}
+                    onClick={handleFavoriteClick}
+                  />
+                ) : (
+                  <Image
+                    src={unFilledHeart}
+                    alt="비어있는 좋아요 아이콘"
+                    width={24}
+                    height={24}
+                    onClick={handleFavoriteClick}
+                  />
+                )}
+              </div>
+              <div
+                className="p-[5px] bg-black-400 rounded-[6px] hidden md:block"
+                onClick={handleShareClick}
               >
-                {product.isFavorite ? '❤️' : '🤍'}
-              </button>
+                <Image src={Share} alt="공유하기 아이콘" width={14} height={14} />
+              </div>
             </div>
-            <div className="text-sm lg:text-base text-gray-300">
-              {product.description || '상품 설명이 들어갑니다.'}
+            <div className="text-sm lg:text-base mb-[67px] md:mb-[60px] text-gray-50">
+              {product.description}
             </div>
-          </div>
-          <ProductDetailButtonGroup />
+          </>
+          <ProductDetailButtonGroup product={product} />
         </div>
       </div>
     </section>

src/components/products/ProductDetailButtonGroup.tsx

@@ -1,24 +1,38 @@
+import { ProductResponse } from '@/types/product';
 import Button from '../button/Button';
 
-export interface ProductDetailButtonGroupProps {}
+export interface ProductDetailButtonGroupProps {
+  product: ProductResponse;
+}
+
+export default function ProductDetailButtonGroup({ product }: ProductDetailButtonGroupProps) {
+  const user = JSON.parse(localStorage.getItem('user')!);
 
-export default function ProductDetailButtonGroup({}: ProductDetailButtonGroupProps) {
   return (
-    <section className="flex flex-col sm:flex-row gap-3 sm:gap-4 w-full">
+    <section className="flex flex-col md:flex-row gap-4 w-full">
       <Button
         size="l"
         variant="primary"
-        className="w-full sm:w-[345px] h-[48px] sm:h-[65px] rounded-[8px] text-sm sm:text-base bg-gradient-to-r from-main-blue to-main-indigo text-white"
+        className="w-full flex-[2] py-[15.5px] md:py-[18px] lg:py-[22px] rounded-[8px] bg-gradient-to-r from-main-blue to-main-indigo text-gray-50"
       >
         리뷰 작성하기
       </Button>
       <Button
         size="l"
         variant="tertiary"
-        className="w-full sm:w-[180px] h-[48px] sm:h-[65px] rounded-[8px] border border-main-blue text-main-blue text-sm sm:text-base bg-black-400"
+        className="w-full flex-[1] py-[15.5px] md:py-[18px] lg:py-[22px] rounded-[8px] border border-main-blue text-main-blue bg-black-500"
       >
         비교하기
       </Button>
+      {product.writerId === user.id && (
+        <Button
+          size="l"
+          variant="tertiary"
+          className="w-full flex-[1] py-[15.5px] md:py-[18px] lg:py-[22px] rounded-[8px] border border-gray-100 text-gray-100 bg-black-500"
+        >
+          편집하기
+        </Button>
+      )}
     </section>
   );
 }

src/components/products/ProductDetailLayout.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import React, { useState } from 'react';
 import ProductDetail from '@/components/products/ProductDetail';
 import ProductStatistics from '@/components/products/ProductStatistics';
@@ -23,15 +21,15 @@ export default function ProductDetailLayout({ id }: ProductDetailLayoutProps) {
   const [sortOrder, setSortOrder] = useState<SortOrder>('recent');
 
   return (
-    <div className="min-h-screen bg-black-500 text-white">
-      <div className="w-full max-w-[1920px] mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8 flex flex-col items-center">
+    <div className="min-h-screen text-gray-50">
+      <div className="w-full max-w-[1920px] mx-auto px-4 lg:px-8 py-4 lg:py-8 flex flex-col items-center">
         <div className="w-full max-w-[940px]">
           <ProductDetail id={id} />
           <ProductStatistics id={id} />
 
-          <div className="w-full mx-auto mb-4 sm:mb-6 lg:mb-8">
-            <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 sm:gap-4 mb-4">
-              <h2 className="text-lg sm:text-xl font-normal leading-none">상품 리뷰</h2>
+          <div className="w-full mx-auto mb-4 lg:mb-8">
+            <div className="flex justify-between items-center gap-3 mb-[30px]">
+              <h2 className="text-[16px] font-semibold text-gray-50">상품 리뷰</h2>
               <ReviewSortDropdown
                 options={SORT_OPTIONS}
                 value={sortOrder}