From 7e67b3fd15763ea20ea46b15ccd1f32c56ca2c00 Mon Sep 17 00:00:00 2001
From: namgungjongmin <jmnamgung@gmail.com>
Date: Sun, 5 Jan 2025 21:53:45 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20button=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/card/Review/ReviewCardAddText.tsx     |  7 ++++++-
 src/components/card/travel/TravelCard.tsx            |  6 +++++-
 src/components/card/travel/TravelCardBig.tsx         |  6 +++++-
 src/components/card/travel/TravelPlanCard.tsx        |  7 ++++++-
 .../travel/detail/TravelDetailCategory.tsx           |  2 +-
 .../travel/detail/TravelDetailContainer.tsx          | 12 ++----------
 6 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/components/card/Review/ReviewCardAddText.tsx b/src/components/card/Review/ReviewCardAddText.tsx
index b6083274..b63df0d0 100644
--- a/src/components/card/Review/ReviewCardAddText.tsx
+++ b/src/components/card/Review/ReviewCardAddText.tsx
@@ -19,7 +19,12 @@ const ReviewCardAddText = ({
           alt={`${nickname}의 여행리뷰 이미지`}
           width={100}
           height={100}
-          className="h-full w-full object-cover"
+          className="h-full w-full object-cover transition-opacity duration-300"
+          style={{ opacity: 0 }}
+          onLoadingComplete={(img: HTMLImageElement) => {
+            const imgElement = img;
+            imgElement.style.opacity = '1';
+          }}
         />
       </div>
       <div className="flex w-full flex-col gap-2">
diff --git a/src/components/card/travel/TravelCard.tsx b/src/components/card/travel/TravelCard.tsx
index d0315afe..a44ab059 100644
--- a/src/components/card/travel/TravelCard.tsx
+++ b/src/components/card/travel/TravelCard.tsx
@@ -83,7 +83,11 @@ const TravelCard = ({
           alt={`${travelName} - ${location} 여행 이미지`}
           width={300}
           height={300}
-          className="h-full w-full rounded object-cover"
+          className="h-full w-full rounded object-cover opacity-0 duration-300 ease-in-out"
+          onLoadingComplete={(img) => {
+            img.classList.remove('opacity-0');
+            img.classList.add('opacity-100');
+          }}
         />
         {closed && (
           <div className="body-3-sb absolute inset-0 z-10 flex items-center justify-center text-primary-white">
diff --git a/src/components/card/travel/TravelCardBig.tsx b/src/components/card/travel/TravelCardBig.tsx
index d360cf02..0fbba885 100644
--- a/src/components/card/travel/TravelCardBig.tsx
+++ b/src/components/card/travel/TravelCardBig.tsx
@@ -79,7 +79,11 @@ const TravelCardBig = ({
           alt={`${travelName} - ${location} 여행 이미지`}
           width={400}
           height={200}
-          className="h-full w-full object-cover"
+          className="h-full w-full object-cover opacity-0 duration-300 ease-in-out"
+          onLoadingComplete={(img) => {
+            img.classList.remove('opacity-0');
+            img.classList.add('opacity-100');
+          }}
         />
         {closed && (
           <div className="body-3-sb absolute inset-0 z-10 flex items-center justify-center text-primary-white">
diff --git a/src/components/card/travel/TravelPlanCard.tsx b/src/components/card/travel/TravelPlanCard.tsx
index 979cbf3c..4b7deeb9 100644
--- a/src/components/card/travel/TravelPlanCard.tsx
+++ b/src/components/card/travel/TravelPlanCard.tsx
@@ -15,7 +15,12 @@ const TravelPlanCard = ({
           alt={`${destination} 일정 이미지`}
           width={600}
           height={500}
-          className="h-full w-full object-cover"
+          className="h-full w-full object-cover transition-opacity duration-300 ease-in-out"
+          style={{ opacity: 0 }}
+          onLoadingComplete={(img: HTMLImageElement) => {
+            const imgElement = img;
+            imgElement.style.opacity = '1';
+          }}
         />
       </div>
 
diff --git a/src/components/travel/detail/TravelDetailCategory.tsx b/src/components/travel/detail/TravelDetailCategory.tsx
index 27677894..60588ee1 100644
--- a/src/components/travel/detail/TravelDetailCategory.tsx
+++ b/src/components/travel/detail/TravelDetailCategory.tsx
@@ -55,7 +55,7 @@ const TravelDetailCategory = ({
   ];
 
   return (
-    <section className="mx-auto w-full px-5 xs:max-w-[540px] sm:px-0 md:col-span-2 md:max-w-full md:pt-4 xl:mx-0 xl:max-w-[652px]">
+    <section className="mx-auto min-h-[300px] w-full px-5 xs:max-w-[540px] sm:px-0 md:col-span-2 md:max-w-full md:pt-4 xl:mx-0 xl:max-w-[652px]">
       <header className="heading-1-b z-20 flex items-start gap-5 border-b text-label-alternative md:gap-8">
         {categories.map(({ label, value, disabled }) => (
           <button
diff --git a/src/components/travel/detail/TravelDetailContainer.tsx b/src/components/travel/detail/TravelDetailContainer.tsx
index 45ddbc8d..40fc08e8 100644
--- a/src/components/travel/detail/TravelDetailContainer.tsx
+++ b/src/components/travel/detail/TravelDetailContainer.tsx
@@ -1,8 +1,4 @@
-import {
-  dehydrate,
-  HydrationBoundary,
-  QueryClient,
-} from '@tanstack/react-query';
+import { QueryClient } from '@tanstack/react-query';
 import { getTravelDetail } from '@/api/travel/travels';
 import { QUERY_KEYS } from '@/constants/querykeys';
 import TravelDetail from './TravelDetail';
@@ -15,11 +11,7 @@ const TravelDetailContainer = async ({ id }: { id: string }) => {
     queryFn: () => getTravelDetail({ id }),
   });
 
-  return (
-    <HydrationBoundary state={dehydrate(queryClient)}>
-      <TravelDetail travelDetail={data.data} />
-    </HydrationBoundary>
-  );
+  return <TravelDetail travelDetail={data.data} />;
 };
 
 export default TravelDetailContainer;