Merge pull request #75 from 3rdflr/feat/TRI-79

DreamPaste · web-flow · commit fc2319f354aa · 2025-09-14T23:31:37.000+09:00
fix TRI-79: 버셀에서 이미지 최적화 사용량 초과로 이미지 생성에 오류가 생기던 문제 해결
diff --git a/next.config.js b/next.config.js
@@ -1,5 +1,6 @@
 const nextConfig = {
   images: {
+    unoptimized: true,
     remotePatterns: [
       {
         protocol: 'https',
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -57,7 +57,6 @@ export const metadata: Metadata = {
       'max-snippet': -1,
     },
   },
-  themeColor: '#e60e68',
 };
 
 export default function RootLayout({
diff --git a/src/components/common/Footer.tsx b/src/components/common/Footer.tsx
@@ -3,6 +3,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
+import { wsrvLoader } from '../common/wsrvLoader';
 
 export default function Footer() {
   const searchParams = useSearchParams();
@@ -15,6 +16,8 @@ export default function Footer() {
       <div className='bg-white w-full h-20 rounded-b-full shadow-lg mb-30'></div>
 
       <Image
+        loader={wsrvLoader}
+        loading='lazy'
         src={'/images/icons/logo.svg'}
         alt='트리베라 로고'
         width={0}
diff --git a/src/components/common/Nav.tsx b/src/components/common/Nav.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { usePathname } from 'next/navigation';
 import { motion, useScroll, useTransform, useSpring } from 'framer-motion';
 import { useScreenSize } from '@/hooks/useScreenSize';
+import { wsrvLoader } from '../common/wsrvLoader';
 import Link from 'next/link';
 import Image from 'next/image';
 import CategoryList from '../home/CategoryList';
@@ -64,14 +65,23 @@ export default function Nav() {
           <Link href='/' className={`${isSearching ? 'z-[100]' : 'z-[120]'}`}>
             {isTablet ? (
               <Image
+                loader={wsrvLoader}
+                loading='lazy'
                 src='/images/icons/small_logo.svg'
                 alt='Logo'
                 width={40}
                 height={40}
                 className='w-[40px] h-[40px]'
               />
             ) : (
-              <Image src='/images/icons/logo.svg' alt='Logo' width={105} height={26} />
+              <Image
+                loader={wsrvLoader}
+                loading='lazy'
+                src='/images/icons/logo.svg'
+                alt='Logo'
+                width={105}
+                height={26}
+              />
             )}
           </Link>
 
diff --git a/src/components/common/wsrvLoader.tsx b/src/components/common/wsrvLoader.tsx
@@ -0,0 +1,11 @@
+export const wsrvLoader = ({
+  src,
+  width,
+  quality,
+}: {
+  src: string;
+  width: number;
+  quality?: number;
+}) => {
+  return `https://wsrv.nl/?url=${encodeURIComponent(src)}&w=${width}&q=${quality || 75}`;
+};
diff --git a/src/components/home/ActivityCard.tsx b/src/components/home/ActivityCard.tsx
@@ -7,6 +7,7 @@ import { BASE_IMG_URL } from '@/components/home/Constants';
 import { Activity } from '@/types/activities.type';
 import { useRecentViewedStore } from '@/store/recentlyWatched';
 import { successToast } from '@/lib/utils/toastUtils';
+import { wsrvLoader } from '../common/wsrvLoader';
 import { X } from 'lucide-react';
 import Image from 'next/image';
 import ActivityLike from './ActivityLike';
@@ -36,6 +37,8 @@ export default function ActivityCard({
         {/* 배너 이미지 (에러 시 기본 이미지 fallback) */}
         <div className='relative w-full aspect-square rounded-[20px] overflow-hidden bg-grayscale-25'>
           <Image
+            loader={wsrvLoader}
+            loading='lazy'
             src={bannerImg}
             alt={activity.title}
             fill
diff --git a/src/components/home/ActivityList.tsx b/src/components/home/ActivityList.tsx
@@ -6,6 +6,7 @@ import { useUserStore } from '@/store/userStore';
 import { useElementInView } from '@/hooks/useElemetInView';
 import { useInfiniteList } from '@/hooks/useInfiniteList';
 import { ChevronRight, MapPinCheckInside } from 'lucide-react';
+import { wsrvLoader } from '../common/wsrvLoader';
 import Spinner from '../common/Spinner';
 import ActivityCard from './ActivityCard';
 import Image from 'next/image';
@@ -44,17 +45,21 @@ export default function ActivityList({
       <div className='flex flex-col items-center justify-center gap-7 mt-50'>
         <div className='flex flex-col items-center justify-center'>
           <Image
+            loader={wsrvLoader}
             src={'/images/icons/Logo_top.svg'}
             alt='빈 체험 로고'
             width={234}
             height={337}
+            loading='lazy'
             className='animate-bounce w-[234px] h-auto'
           />
           <Image
+            loader={wsrvLoader}
             src={'/images/icons/Logo_bottom.svg'}
             alt='빈 체험 로고'
             width={45}
             height={16}
+            loading='lazy'
             className='w-[45px] h-auto'
           />
         </div>
diff --git a/src/components/home/BottomNav.tsx b/src/components/home/BottomNav.tsx
@@ -8,6 +8,7 @@ import { Bell, Search, Heart } from 'lucide-react';
 import { useUserStore } from '@/store/userStore';
 import { useScreenSize } from '@/hooks/useScreenSize';
 import { useNotifications } from '@/hooks/useNotification';
+import { wsrvLoader } from '../common/wsrvLoader';
 import Link from 'next/link';
 import Image from 'next/image';
 import NotificationModal from './NotificationModal';
@@ -118,6 +119,8 @@ export default function BottomNav() {
               href='/mypage'
             >
               <Image
+                loader={wsrvLoader}
+                loading='lazy'
                 src={
                   user.profileImageUrl ? user.profileImageUrl : '/images/icons/default_profile.svg'
                 }
@@ -148,6 +151,8 @@ export default function BottomNav() {
               href='/login'
             >
               <Image
+                loader={wsrvLoader}
+                loading='lazy'
                 src={'/images/icons/default_profile_gray.svg'}
                 alt='Profile'
                 width={20}
diff --git a/src/components/home/LoginSection.tsx b/src/components/home/LoginSection.tsx
@@ -8,10 +8,11 @@ import { useUserStore } from '@/store/userStore';
 import { logout } from '@/lib/utils/logoutUtils';
 import { Bell, Heart, CircleUser, LogOut } from 'lucide-react';
 import { useNotifications } from '@/hooks/useNotification';
+import { useSaveCurrentUrl } from '@/lib/utils/useSaveCurrentUrl';
+import { wsrvLoader } from '../common/wsrvLoader';
 import Link from 'next/link';
 import Image from 'next/image';
 import NotificationModal from './NotificationModal';
-import { useSaveCurrentUrl } from '@/lib/utils/useSaveCurrentUrl';
 
 export default function LoginSection() {
   const { isDesktop } = useScreenSize();
@@ -38,6 +39,8 @@ export default function LoginSection() {
           <Dropdown.Trigger>
             <div className='w-[30px] h-[30px] rounded-full cursor-pointer overflow-hidden'>
               <Image
+                loader={wsrvLoader}
+                loading='lazy'
                 src={
                   user.profileImageUrl ? user.profileImageUrl : '/images/icons/default_profile.svg'
                 }
@@ -73,7 +76,14 @@ export default function LoginSection() {
         </Link>
       )}
       <Link onClick={saveCurrentUrl} href='/login' className='cursor-pointer'>
-        <Image src='/images/icons/default_profile_gray.svg' alt='Profile' width={30} height={30} />
+        <Image
+          loader={wsrvLoader}
+          loading='lazy'
+          src='/images/icons/default_profile_gray.svg'
+          alt='Profile'
+          width={30}
+          height={30}
+        />
       </Link>
     </>
   );
diff --git a/src/components/home/MapCard.tsx b/src/components/home/MapCard.tsx
@@ -1,15 +1,16 @@
 'use client';
 
-import Link from 'next/link';
-import Image from 'next/image';
 import { useState } from 'react';
 import { Activity } from '@/types/activities.type';
 import { useUserStore } from '@/store/userStore';
 import { BASE_IMG_URL } from './Constants';
-import { X } from 'lucide-react';
-import ActivityLike from './ActivityLike';
 import { useScreenSize } from '@/hooks/useScreenSize';
 import { AnimatePresence, motion } from 'framer-motion';
+import { X } from 'lucide-react';
+import { wsrvLoader } from '../common/wsrvLoader';
+import Link from 'next/link';
+import Image from 'next/image';
+import ActivityLike from './ActivityLike';
 
 interface MapCardProps {
   activity: Activity;
@@ -88,13 +89,14 @@ export default function MapCard({ activity, onClose }: MapCardProps) {
               <Link href={`/activities/${activity.id}`}>
                 <div className='w-[126px] h-full relative flex-shrink-0'>
                   <Image
+                    loader={wsrvLoader}
+                    loading='lazy'
                     src={bannerImg}
                     alt={activity.title}
                     fill
                     className='object-cover rounded-l-2xl'
                     onError={() => setIsError(true)}
                     blurDataURL={BASE_IMG_URL}
-                    loading='lazy'
                   />
                 </div>
               </Link>
diff --git a/src/components/home/NavMobileView.tsx b/src/components/home/NavMobileView.tsx
@@ -5,6 +5,7 @@ import { usePathname, useRouter } from 'next/navigation';
 import { Search, SearchIcon, X, ArrowLeft, Share } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { PLACES } from './Constants';
+import { wsrvLoader } from '../common/wsrvLoader';
 import MobileCategoryList from './MobileCategoryList';
 import PriceFilter from './PriceFilter';
 import Image from 'next/image';
@@ -112,6 +113,8 @@ export default function NavMobileView() {
         >
           <Link href='/' className='flex items-center justify-center gap-2 py-9'>
             <Image
+              loader={wsrvLoader}
+              loading='lazy'
               src='/images/icons/logo.svg'
               alt='기본로고'
               width={146}
@@ -193,7 +196,14 @@ export default function NavMobileView() {
                             setPlaceInput(p.name);
                           }}
                         >
-                          <Image src={p.src} alt={p.name} width={56} height={56} />
+                          <Image
+                            loader={wsrvLoader}
+                            loading='lazy'
+                            src={p.src}
+                            alt={p.name}
+                            width={56}
+                            height={56}
+                          />
                           <div className='flex flex-col justify-center min-w-0'>
                             <span className='text-14-regular text-title truncate'>{p.name}</span>
                             <span className='block text-12-regular text-grayscale-500 truncate'>
diff --git a/src/components/home/RecentView.tsx b/src/components/home/RecentView.tsx
@@ -5,6 +5,7 @@ import { useUserStore } from '@/store/userStore';
 import { ChevronLeft } from 'lucide-react';
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
+import { wsrvLoader } from '../common/wsrvLoader';
 import Image from 'next/image';
 import ActivityCard from './ActivityCard';
 
@@ -34,13 +35,17 @@ export default function RecentView() {
         </div>
         <div className='flex flex-col items-center justify-center'>
           <Image
+            loader={wsrvLoader}
+            loading='lazy'
             src={'/images/icons/Logo_top.svg'}
             alt='빈 체험 로고'
             width={234}
             height={337}
             className='animate-bounce w-[234px] h-auto'
           />
           <Image
+            loader={wsrvLoader}
+            loading='lazy'
             src={'/images/icons/Logo_bottom.svg'}
             alt='빈 체험 로고'
             width={45}
diff --git a/src/components/home/RecnetViewPage.tsx b/src/components/home/RecnetViewPage.tsx
@@ -3,8 +3,9 @@
 import { useRecentViewedStore } from '@/store/recentlyWatched';
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import Image from 'next/image';
 import { ChevronRight } from 'lucide-react';
+import { wsrvLoader } from '../common/wsrvLoader';
+import Image from 'next/image';
 
 export default function RecentViewPage() {
   const [mounted, setMounted] = useState(false);
@@ -51,6 +52,8 @@ export default function RecentViewPage() {
               }}
             >
               <Image
+                loader={wsrvLoader}
+                loading='lazy'
                 src={a.bannerImageUrl || '/fallback.png'}
                 alt={a.title}
                 fill
diff --git a/src/components/home/SearchFilters.tsx b/src/components/home/SearchFilters.tsx
@@ -11,10 +11,11 @@ import {
   MotionValue,
 } from 'framer-motion';
 import { X, SearchIcon } from 'lucide-react';
-import PriceFilter from './PriceFilter';
+import { useScreenSize } from '@/hooks/useScreenSize';
 import { PLACES } from './Constants';
+import { wsrvLoader } from '../common/wsrvLoader';
+import PriceFilter from './PriceFilter';
 import Image from 'next/image';
-import { useScreenSize } from '@/hooks/useScreenSize';
 
 type Props = {
   scrollY: MotionValue<number>;
@@ -368,7 +369,14 @@ export default function SearchFilters({ scrollY, isSearching, setIsSearching }:
                       setFilteredPlaces(PLACES);
                     }}
                   >
-                    <Image src={place.src} alt={place.name} width={56} height={56} />
+                    <Image
+                      loader={wsrvLoader}
+                      loading='lazy'
+                      src={place.src}
+                      alt={place.name}
+                      width={56}
+                      height={56}
+                    />
                     <div className='flex flex-col justify-center min-w-0'>
                       <span className='text-14-regular text-title truncate'>{place.name}</span>
                       <span className='block text-12-regular text-grayscale-500 truncate'>

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`const nextConfig = {`
`2`	`2`	`images: {`
	`3`	`+ unoptimized: true,`
`3`	`4`	`remotePatterns: [`
`4`	`5`	`{`
`5`	`6`	`protocol: 'https',`