[#165] 이미지 최적화, 토스트 메시지 수정, 확인 모달 수정

src/app/layout.tsx

@@ -7,7 +7,6 @@ import getMe from "@/api/user/get-me";
 import KaKaoInitializer from "@/lib/kakao-initializer";
 import ToastProvider from "@/providers/toast/toast-provider";
 import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
-import { ToastContainer } from "react-toastify";
 
 export function generateMetadata() {
   return METADATA;
@@ -33,7 +32,6 @@ export default async function RootLayout({
           <ToastProvider />
         </QueryProvider>
         <KaKaoInitializer />
-        <ToastContainer position="top-right" autoClose={1500} />
       </body>
     </html>
   );

src/app/myprofile/_components/review-item/review-info.tsx

@@ -4,7 +4,6 @@ import { cn, isValidImageSrc } from "@/lib/utils";
 import Image from "next/image";
 import { WineType } from "../../_types/review-type";
 import { useState } from "react";
-import PlaceholderImgWine from "@/../public/images/placeholder/img-wine.svg";
 
 const PLACEHOLDER = "/images/placeholder/img-wine.svg";
 
@@ -29,10 +28,12 @@ const ReviewInfo = ({ info }: { info: WineType }) => {
           onError={() => setImgSrc(PLACEHOLDER)}
         />
       ) : (
-        <PlaceholderImgWine
+        <Image
+          src={"/images/placeholder/img-wine.svg"}
+          width={60}
+          height={60}
           className="h-[60px] w-[46px] tablet:h-[80px] tablet:w-[60px] pc:h-[80px] pc:w-[60px]"
-          role="img"
-          aria-label={`${info.name} 이미지 불러오기 실패`}
+          alt={`${info.name} 이미지 불러오기 실패`}
         />
       )}
       <div

src/app/wines/[id]/_components/wine-header/wine-header.tsx

@@ -1,5 +1,4 @@
 import Image from "next/image";
-import PlaceholderImgWine from "@/../public/images/placeholder/img-wine.svg";
 import Rating from "@/components/rating/rating";
 import type { WineDetail } from "@/types/wine";
 import { cn, isValidImageSrc } from "@/lib/utils";
@@ -45,8 +44,8 @@ const WineHeader = ({ wine }: WineHeaderProps) => {
               "pc:h-[320px] pc:w-[320px] pc:max-w-none"
             )}
           >
-            {isValidImageSrc(wine.image) ? (
-              <div className="relative h-full w-full">
+            <div className="relative h-full w-full">
+              {isValidImageSrc(wine.image) ? (
                 <Image
                   src={wine.image}
                   alt={wine.name}
@@ -57,14 +56,16 @@ const WineHeader = ({ wine }: WineHeaderProps) => {
                   sizes="(max-width: 743px) 220px, (max-width: 1279px) 280px, 320px"
                   className="object-contain"
                 />
-              </div>
-            ) : (
-              <PlaceholderImgWine
-                className="h-full w-auto object-contain"
-                role="img"
-                aria-label={`${wine.name} 이미지 불러오기 실패`}
-              />
-            )}
+              ) : (
+                <Image
+                  src={"/images/placeholder/img-wine.svg"}
+                  fill
+                  sizes="(max-width: 743px) 220px, (max-width: 1279px) 280px, 320px"
+                  className="object-contain"
+                  alt={`${name} 이미지 불러오기 실패`}
+                />
+              )}
+            </div>
           </div>
         </div>
 

src/app/wines/[id]/_components/wine-info.tsx

@@ -1,5 +1,4 @@
 import Image from "next/image";
-import PlaceholderImgWine from "@/../public/images/placeholder/img-wine.svg";
 import { isValidImageSrc } from "@/lib/utils";
 
 interface WineInfoProps {
@@ -12,23 +11,24 @@ const WineInfo = ({ name, region, image }: WineInfoProps) => {
   return (
     <div className="flex items-center gap-4">
       <div className="flex-center h-[96px] w-[62px] flex-shrink-0 bg-gray-200">
-        {isValidImageSrc(image) ? (
-          <div className="relative h-full w-full">
+        <div className="relative h-full w-full">
+          {isValidImageSrc(image) ? (
             <Image
               src={image}
               alt={name}
               fill
               className="object-contain"
               sizes="62px"
             />
-          </div>
-        ) : (
-          <PlaceholderImgWine
-            className="h-full w-auto object-contain"
-            role="img"
-            aria-label={`${name} 이미지 불러오기 실패`}
-          />
-        )}
+          ) : (
+            <Image
+              src={"/images/placeholder/img-wine.svg"}
+              fill
+              className="object-contain"
+              alt={`${name} 이미지 불러오기 실패`}
+            />
+          )}
+        </div>
       </div>
       <div className="flex min-w-0 flex-col gap-1">
         <h3

src/components/card/card-img.tsx

@@ -5,7 +5,6 @@ import { SVGProps } from "react";
 import { cn } from "@/lib/utils";
 import Image from "next/image";
 import BASE64_IMAGES from "@/constants/base64-images";
-import PlaceholderImgWine from "@/../public/images/placeholder/img-wine.svg";
 
 const { WINE_BASE64 } = BASE64_IMAGES;
 
@@ -33,7 +32,6 @@ const CardImage = ({
   alt,
   blurDataURL,
   fallbackBlurDataURL = WINE_BASE64,
-  fallbackImage: FallbackImage = PlaceholderImgWine,
   className,
   imageClassName,
 }: CardImageProps) => {
@@ -79,11 +77,7 @@ const CardImage = ({
             onError={() => setHasError(true)}
           />
         ) : (
-          <FallbackImage
-            className="relative left-[50%] h-full w-auto translate-x-[-50%] object-contain"
-            role="img"
-            aria-label={`${alt} 이미지 불러오기 실패`}
-          />
+          <Image src={"/images/placeholder/img-wine.svg"} fill alt={alt} />
         )}
       </span>
     </div>

src/components/modal/confirm-modal.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { ReactNode, useEffect, useLayoutEffect, useRef } from "react";
+import { ReactNode, useEffect, useRef } from "react";
 import Button from "../button/basic-button";
 import Modal from "./modal";
-import { allowScroll, cn, lockingScroll } from "@/lib/utils";
+import { cn } from "@/lib/utils";
 
 interface ModalProps {
   isOpen: boolean;
@@ -35,23 +35,28 @@ const ConfirmModal = ({
 }: ModalProps) => {
   const dialogRef = useRef<HTMLDialogElement>(null);
 
-  useLayoutEffect(() => {
-    const currentScrollY = window.scrollY;
-
-    if (isOpen) lockingScroll(currentScrollY);
+  const lockingConfirmModal = () => {
+    const scrollbarWidth = window.innerWidth - document.body.clientWidth;
+    document.body.style.paddingRight = `${scrollbarWidth}px`;
+    document.body.style.overflow = "hidden";
+  };
 
-    return () => {
-      allowScroll(currentScrollY);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const unlockConfirmModal = () => {
+    document.body.style.paddingRight = "0px";
+    document.body.style.overflow = "unset";
+  };
 
   useEffect(() => {
     if (!dialogRef.current?.open && isOpen) {
+      lockingConfirmModal();
       dialogRef.current?.showModal();
     } else {
       dialogRef.current?.close();
     }
+
+    return () => {
+      unlockConfirmModal();
+    };
   }, [isOpen]);
 
   if (!isOpen) return null;
@@ -65,7 +70,7 @@ const ConfirmModal = ({
       <p
         className={cn(
           "text-heading-sm font-semibold tracking-[-0.02em] text-gray-950",
-          "whitespace-pre-wrap text-center",
+          "whitespace-pre-wrap break-words text-center",
           "tablet:text-heading-md",
           "pc:text-heading-md"
         )}