수정

Author: EunbinJung

src/domains/main/cocktailDrop/CocktailDrop.tsx

@@ -64,6 +64,7 @@ function CocktailDrop({ isDesktop = false }: CocktailDropProps) {
         if (width >= 1400) return 10;
         if (width >= 1024) return 295;
         if (width >= 800) return 50;
+        if (width === 768) return -30;
         return -235;
       };
 

src/domains/main/components/3d/HomeLogo.tsx

@@ -3,7 +3,7 @@ import Image from 'next/image';
 function HomeLogo({ isDesktop }: { isDesktop: boolean }) {
   return (
     <div
-      className="z-5 absolute md:top-22 md:left-10 md:translate-none top-30 left-1/2 -translate-x-1/2"
+      className="z-5 absolute top-30 left-1/2 -translate-x-1/2 lg:absolute lg:top-20 lg:left-10 lg:translate-none md:relative md:top-30 md:left-auto md:translate-none flex justify-center items-center"
       style={{ width: !isDesktop ? 400 : 580, height: !isDesktop ? 70 : 210 }}
     >
       <Image src={'/logo.svg'} alt="로고 이미지" fill priority className="object-contain" />

src/domains/main/components/3d/Landing.tsx

@@ -19,7 +19,7 @@ function Landing({ setIsLoading, isDesktop }: Props) {
   return (
     <>
       <div className="page-layout max-w-full">
-        <div className="relative w-full h-screen">
+        <div className="relative w-full h-screen flex flex-col md:items-center">
           {isDesktop ? (
             <HomeModel onLoaded={() => setModelLoaded(true)} />
           ) : (

src/domains/main/components/3d/ModelImage.tsx

@@ -11,15 +11,14 @@ function ModelImage({ onLoaded }: Props) {
     onLoaded();
   });
   return (
-    <div className="w-full flex justify-center items-center absolute bottom-13 left-1/2 -translate-x-1/2">
-      <div className="rounded-tr-4xl rounded-tl-4xl overflow-hidden">
+    <div className="w-full flex justify-center items-center absolute bottom-0 left-1/2 -translate-x-1/2">
+      <div className="relative w-[85%] h-[60vh] rounded-tr-4xl rounded-tl-4xl overflow-hidden">
         <Image
           src={MobileCocktailDrop}
           alt="모바일 칵테일 드랍"
-          width={260}
-          height={290}
+          fill
           priority
-          className="object-cover w-[300px] h-[350px]"
+          className="object-cover"
         />
       </div>
     </div>