Manchui · edhcoding · Feb 22, 2025 · Feb 22, 2025
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,6 +1,5 @@
 import CompressionPlugin from 'compression-webpack-plugin';
 import withBundleAnalyzer from '@next/bundle-analyzer';
-import withPlaiceholder from '@plaiceholder/next';
 
 const bundleAnalyzer = withBundleAnalyzer({
   enabled: process.env.ANALYZE === 'true',
@@ -38,4 +37,4 @@ const nextConfig = {
   },
 };
 
-export default bundleAnalyzer(withPlaiceholder(nextConfig));
+export default bundleAnalyzer(nextConfig);
diff --git a/package.json b/package.json
@@ -16,7 +16,6 @@
     "analyze": "ANALYZE=true next build"
   },
   "dependencies": {
-    "@plaiceholder/next": "^3.0.0",
     "@stomp/stompjs": "^7.0.0",
     "@svgr/webpack": "^8.1.0",
     "@tanstack/react-query": "^5.59.16",
@@ -30,12 +29,10 @@
     "json-server": "^1.0.0-beta.3",
     "lottie-light-react": "^2.4.0",
     "next": "14.2.15",
-    "plaiceholder": "^3.0.0",
     "pretendard": "^1.3.9",
     "react": "^18",
     "react-dom": "^18",
     "react-toastify": "^10.0.6",
-    "sharp": "0.32",
     "tailwind-merge": "^2.5.4",
     "zustand": "^5.0.1"
   },

diff --git a/src/components/main/Carousel/PopularCategorySlide.tsx b/src/components/main/Carousel/PopularCategorySlide.tsx
@@ -2,21 +2,13 @@ import { useCallback } from 'react';
 import Image from 'next/image';
 import { useSetCategory } from '@/store/useFilterStore';
 
-interface PopularCategorySlideProps {
-  base64: {
-    develop: string;
-    food: string;
-    study: string;
-  };
-}
-
 const categories = [
-  { rank: 1, category: '개발', img: 'develop', imageSrc: '/images/main/develop.webp' },
-  { rank: 2, category: '공부', img: 'study', imageSrc: '/images/main/study.webp' },
-  { rank: 3, category: '맛집', img: 'food', imageSrc: '/images/main/food.webp' },
+  { rank: 1, category: '개발', imageSrc: '/images/main/develop.webp' },
+  { rank: 2, category: '공부', imageSrc: '/images/main/study.webp' },
+  { rank: 3, category: '맛집', imageSrc: '/images/main/food.webp' },
 ];
 
-export default function PopularCategorySlide({ base64 }: PopularCategorySlideProps) {
+export default function PopularCategorySlide() {
   const setCategory = useSetCategory();
 
   const handleCategoryClick = useCallback(
@@ -31,7 +23,7 @@ export default function PopularCategorySlide({ base64 }: PopularCategorySlidePro
       <h1 className="text-2xl text-lightred">🔥 인기 카테고리 🔥</h1>
       <h3 className="text-base font-semibold">실시간으로 모임수가 증가하고 있어요!</h3>
       <div className="mx-4 mt-5 flex justify-center gap-3 tablet:gap-6">
-        {categories.map(({ rank, category, img, imageSrc }) => (
+        {categories.map(({ rank, category, imageSrc }) => (
           <div
             key={rank}
             onClick={() => handleCategoryClick(category)}
@@ -40,15 +32,7 @@ export default function PopularCategorySlide({ base64 }: PopularCategorySlidePro
             <div className="absolute left-0 top-0 flex h-6 w-11 items-center justify-center rounded-br-md rounded-tl-md bg-lightred text-sm font-semibold text-blue-800">
               {rank}위
             </div>
-            <Image
-              src={imageSrc}
-              alt={category}
-              width={200}
-              height={150}
-              placeholder="blur"
-              blurDataURL={base64[img as keyof typeof base64]}
-              className="h-full rounded-md object-cover"
-            />
+            <Image src={imageSrc} alt={category} width={200} height={150} className="h-full rounded-md object-cover" />
             <h2 className="text-base">{category} 카테고리</h2>
           </div>
         ))}

diff --git a/src/components/main/Carousel/index.tsx b/src/components/main/Carousel/index.tsx
@@ -7,20 +7,9 @@ const IntroduceSlide = dynamic(() => import('@/components/main/Carousel/Introduc
 const NoticeBoardSlide = dynamic(() => import('@/components/main/Carousel/NoticeBoardSlide'), { loading: () => <CarouselSkeleton />, ssr: true });
 const FAQSlide = dynamic(() => import('@/components/main/Carousel/FAQSlide'), { loading: () => <CarouselSkeleton />, ssr: true });
 
-interface CarouselProps {
-  base64: {
-    design: string;
-    develop: string;
-    food: string;
-    server: string;
-    study: string;
-    web: string;
-  };
-}
-
 const TOTAL_SLIDES = 4;
 
-function Carousel({ base64 }: CarouselProps) {
+function Carousel() {
   const [currentIndex, setCurrentIndex] = useState(0);
 
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -46,12 +35,12 @@ function Carousel({ base64 }: CarouselProps) {
 
   const slides = useMemo(
     () => ({
-      0: <PopularCategorySlide base64={base64} />,
+      0: <PopularCategorySlide />,
       1: <IntroduceSlide />,
       2: <NoticeBoardSlide />,
       3: <FAQSlide />,
     }),
-    [base64],
+    [],
   );
 
   useEffect(() => {

diff --git a/src/pages/main/index.tsx b/src/pages/main/index.tsx
@@ -8,27 +8,18 @@ import RootLayout from '@/components/shared/RootLayout';
 import { SEO } from '@/components/shared/SEO';
 import useInternalRouter from '@/hooks/useInternalRouter';
 import { useResetFilters } from '@/store/useFilterStore';
-import getBase64 from '@/utils/getBase64';
 import { dehydrate, QueryClient } from '@tanstack/react-query';
 
 const Carousel = dynamic(() => import('@/components/main/Carousel'), { loading: () => <CarouselSkeleton />, ssr: false });
 const CardSection = dynamic(() => import('@/components/main/CardSection'), { loading: () => <CardSkeleton />, ssr: true });
 
 interface MainPageProps {
-  base64: {
-    design: string;
-    develop: string;
-    food: string;
-    server: string;
-    study: string;
-    web: string;
-  };
   seo: {
     title: string;
   };
 }
 
-export default function MainPage({ base64, seo }: MainPageProps) {
+export default function MainPage({ seo }: MainPageProps) {
   const router = useInternalRouter();
 
   const resetFilters = useResetFilters();
@@ -48,7 +39,7 @@ export default function MainPage({ base64, seo }: MainPageProps) {
   return (
     <>
       <SEO title={seo.title} />
-      <Carousel base64={base64} />
+      <Carousel />
       <RootLayout>
         <HeaderSection />
         <CardSection />
@@ -58,10 +49,6 @@ export default function MainPage({ base64, seo }: MainPageProps) {
 }
 
 export async function getServerSideProps() {
-  const base64Develop = await getBase64('/images/main/develop.webp');
-  const base64Study = await getBase64('/images/main/study.webp');
-  const base64Food = await getBase64('/images/main/food.webp');
-
   const queryClient = new QueryClient();
 
   await queryClient.prefetchInfiniteQuery({
@@ -73,11 +60,6 @@ export async function getServerSideProps() {
   return {
     props: {
       dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))),
-      base64: {
-        develop: base64Develop.base64,
-        study: base64Study.base64,
-        food: base64Food.base64,
-      },
       seo: {
         title: '만취 - 랜딩 페이지',
       },

diff --git a/src/utils/getBase64.ts b/src/utils/getBase64.ts