refactor: 이미지 최적화 적용

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">

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">

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">

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>
 

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

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;