모바일 이미지

Author: EunbinJung

package-lock.json

@@ -20,7 +20,6 @@
   "dependencies": {
     "@react-three/drei": "^10.7.6",
     "@react-three/fiber": "^9.3.0",
-    "@react-three/gltfjsx": "^4.3.4",
     "@react-three/postprocessing": "^3.0.4",
     "@tanstack/react-query": "^5.90.2",
     "@tanstack/react-virtual": "^3.13.12",

package.json

@@ -44,7 +44,7 @@ function CocktailDrop() {
         logoRef.current,
         { y: -300, opacity: 0 },
         {
-          y: isMobile ? -140 : -40, // 모바일에서는 더 위로
+          y: isMobile ? -140 : -18, // 모바일에서는 더 위로
           opacity: 1,
           duration: 3,
           ease: 'power3.out',

public/mobileCocktail.webp

@@ -1,4 +1,6 @@
 import { useEffect } from 'react';
+import MobileCocktailDrop from '../../../../../public/mobileCocktail.webp';
+import Image from 'next/image';
 
 interface Props {
   onLoaded: () => void;
@@ -8,7 +10,20 @@ function ModelImage({ onLoaded }: Props) {
   useEffect(() => {
     onLoaded();
   });
-  return <div className="w-full"></div>;
+  return (
+    <div className="w-full flex justify-center items-center absolute bottom-20 left-1/2 -translate-x-1/2">
+      <div className="rounded-tr-4xl rounded-tl-4xl overflow-hidden">
+        <Image
+          src={MobileCocktailDrop}
+          alt="모바일 칵테일 드랍"
+          width={280}
+          height={360}
+          style={{ width: 'auto', height: 'auto' }}
+          className="object-cover"
+        />
+      </div>
+    </div>
+  );
 }
 
 export default ModelImage;