refactor/이미지 개선

Author: mtm-git1018

next.config.ts

@@ -7,7 +7,7 @@ const nextConfig: NextConfig = {
   },
   images: {
     // 외부 이미지 최적화 완전 비활성화 (Vercel 유료 기능 회피)
-    unoptimized: true, 
+    // unoptimized: true, 
     domains: [
       'team2-app-s3-bucket.s3.ap-northeast-2.amazonaws.com',
       'team2-app-s3-bucket.s3.amazonaws.com',

src/app/(with-layout)/recipe/page.tsx

@@ -5,20 +5,23 @@ import { Suspense } from 'react';
 import SkeletonRecipe from '@/domains/recipe/skeleton/SkeletonRecipe';
 import Cocktails from '@/domains/recipe/components/main/Cocktails';
 
+
 export const metadata: Metadata = {
   title: '칵테일레시피',
   description: '칵테일 레시피가 궁금하신 분들을 위한 레시피 페이지',
 };
 
+
 function Page() {
+
   return (
     <div className="w-full">
       <section>
         <PageHeader title="Cocktail Recipes" description="다양하고 재밌는 칵테일 레시피" />
       </section>
       <div className="page-layout max-w-1224 mt-6">
         <Suspense fallback={<SkeletonRecipe />}>
-          <Cocktails />
+          <Cocktails  />
         </Suspense>
       </div>
     </div>

src/domains/mypage/components/pages/my-active/MyComment.tsx

@@ -22,16 +22,18 @@ function MyComment() {
       credentials: 'include',
     });
     const json = await res.json();
+ 
     setMyComment(json.data.items);
   };
 
+
   useEffect(() => {
     fetchComment();
   }, []);
 
   return (
     <section>
-      {CommentList.length !== 0 ? (
+      {myComment.length !== 0 ? (
         <CommentList
           comments={myComment}
           isLoading={isLoading}

src/domains/recipe/components/main/Cocktails.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import CocktailFilter from './CocktailFilter';
 import CocktailList from './CocktailList';
 import CocktailSearchBar from './CocktailSearchBar';
@@ -10,7 +10,6 @@ import CocktailFilterRadios from './CocktailFilterRadios';
 import { useCocktailFilter } from '../../hook/useCocktailFilter';
 import { useCocktailSearch } from '../../hook/useCocktailSearch';
 
-
 function Cocktails() {
 
   const {keyword,input,handleSearch} = useCocktailSearch()
@@ -23,18 +22,22 @@ function Cocktails() {
       cocktailTypes,
     },
     20,
-    sortBy
+    sortBy,
   );
 
   const { ref, inView } = useInView({
     threshold: 0.1,
   });
 
+  const prevInView = useRef(inView);
+
+
   useEffect(() => {
-    if (!isSearchMode && inView && hasNextPage) {
+    if (!isSearchMode && inView && hasNextPage && !prevInView.current) {
       fetchNextPage?.();
     }
-  }, [inView, hasNextPage, fetchNextPage]);
+    prevInView.current = inView
+  }, [inView, hasNextPage]);
 
 
 

src/domains/shared/components/cocktail-card/CocktailCard.tsx

@@ -41,7 +41,15 @@ function CocktailCard({
           className
         )}
       >
-        <Image src={src} alt={name} fill className="object-cover" sizes="320px" priority />
+        <Image
+          src={src}
+          alt={name}
+          fill
+          className="object-cover"
+          sizes="320px"
+          priority
+          loading='eager'
+        />
         {keep && (
           <div className="flex w-full pl-4 px-3 py-2 items-center justify-between absolute left-0 top-0">
             <div>{alcoholTitle && <Label title={alcoholTitle} />}</div>