{/* 대각선 줄 1 */}
@@ -80,7 +84,7 @@ function CocktailDrop() {
/>
{/* 로고 */}
-
+
{/* 컵 이미지 - 모바일에서 바닥에 붙도록 */}
-
);
}
diff --git a/src/domains/main/cocktailDrop/PassBtn.tsx b/src/domains/main/cocktailDrop/PassBtn.tsx
new file mode 100644
index 00000000..7dc9ac89
--- /dev/null
+++ b/src/domains/main/cocktailDrop/PassBtn.tsx
@@ -0,0 +1,20 @@
+import { useRouter } from 'next/navigation';
+
+function PassBtn() {
+ const router = useRouter();
+ const handleClick = () => {
+ router.push('/recommend');
+ };
+ return (
+
+ );
+}
+
+export default PassBtn;
diff --git a/src/domains/main/components/3d/HomeModel.tsx b/src/domains/main/components/3d/HomeModel.tsx
index fdc2a2d6..de0eac93 100644
--- a/src/domains/main/components/3d/HomeModel.tsx
+++ b/src/domains/main/components/3d/HomeModel.tsx
@@ -1,9 +1,9 @@
'use client';
import { Environment, OrbitControls, useGLTF } from '@react-three/drei';
-import { Canvas, useFrame, useThree } from '@react-three/fiber';
+import { Canvas } from '@react-three/fiber';
import { Bloom, EffectComposer } from '@react-three/postprocessing';
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
import * as THREE from 'three';
interface Props {
@@ -42,7 +42,7 @@ function Model({ onLoaded }: Props) {
return (
diff --git a/src/domains/main/components/3d/ModelImage.tsx b/src/domains/main/components/3d/ModelImage.tsx
index 1f37f1e6..f6a4ddf3 100644
--- a/src/domains/main/components/3d/ModelImage.tsx
+++ b/src/domains/main/components/3d/ModelImage.tsx
@@ -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
;
+ return (
+
+ );
}
export default ModelImage;
diff --git a/src/domains/main/components/3d/Scroll.tsx b/src/domains/main/components/3d/Scroll.tsx
index 0f289fe2..45dcc584 100644
--- a/src/domains/main/components/3d/Scroll.tsx
+++ b/src/domains/main/components/3d/Scroll.tsx
@@ -12,7 +12,7 @@ function Scroll({ isDesktop }: { isDesktop: boolean }) {
height: 60,
};
return (
-
+
diff --git a/src/domains/main/components/FinalLanding.tsx b/src/domains/main/components/FinalLanding.tsx
index a9da9b46..4416a7fc 100644
--- a/src/domains/main/components/FinalLanding.tsx
+++ b/src/domains/main/components/FinalLanding.tsx
@@ -13,6 +13,7 @@ function FinalLanding() {
const smootherRef = useRef
(null);
const [isDesktop, setIsDesktop] = useState(false);
+ const [hasMounted, setHasMounted] = useState(false);
useEffect(() => {
const checkViewport = () => {
@@ -20,6 +21,7 @@ function FinalLanding() {
};
checkViewport();
+ setHasMounted(true);
window.addEventListener('resize', checkViewport);
@@ -58,6 +60,8 @@ function FinalLanding() {
};
}, [isDesktop]);
+ if (!hasMounted) return null;
+
return (
@@ -69,7 +73,7 @@ function FinalLanding() {
{!isLoading && (
<>
-
+
>
)}
@@ -81,7 +85,7 @@ function FinalLanding() {
{!isLoading && (
<>
-
+
>
)}
diff --git a/src/domains/main/components/mainSlide/components/MainSlide.tsx b/src/domains/main/components/mainSlide/components/MainSlide.tsx
index 90ba087e..eba27a4c 100644
--- a/src/domains/main/components/mainSlide/components/MainSlide.tsx
+++ b/src/domains/main/components/mainSlide/components/MainSlide.tsx
@@ -127,7 +127,7 @@ function MainSlide({ isDesktop }: { isDesktop: boolean }) {
) : (