메인 수정

Author: EunbinJung

src/domains/main/cocktailDrop/CocktailDrop.tsx

@@ -5,10 +5,15 @@ import Cocktailcup from '../../../../public/CocktailDrop.webp';
 import { useLayoutEffect, useRef } from 'react';
 import gsap from 'gsap';
 import { ScrollTrigger } from 'gsap/all';
+import PassBtn from './PassBtn';
 
 gsap.registerPlugin(ScrollTrigger);
 
-function CocktailDrop() {
+interface CocktailDropProps {
+  isDesktop?: boolean;
+}
+
+function CocktailDrop({ isDesktop = false }: CocktailDropProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const logoRef = useRef<HTMLDivElement>(null);
   const line1Ref = useRef<HTMLDivElement>(null);
@@ -39,12 +44,11 @@ function CocktailDrop() {
       );
 
       // 로고 위에서 아래로 자연스럽게 등장
-      const isMobile = window.innerWidth < 768;
       gsap.fromTo(
         logoRef.current,
         { y: -300, opacity: 0 },
         {
-          y: isMobile ? -140 : -18, // 모바일에서는 더 위로
+          y: !isDesktop ? -230 : -18, // 데스크톱이 아닐 때 더 위로
           opacity: 1,
           duration: 3,
           ease: 'power3.out',
@@ -60,12 +64,12 @@ function CocktailDrop() {
     }, containerRef);
 
     return () => ctx.revert();
-  }, [containerRef]);
+  }, [containerRef, isDesktop]);
 
   return (
     <div
       ref={containerRef}
-      className="relative w-full md:min-h-[110vh] min-h-[74vh] flex flex-col md:justify-center justify-end items-center mt-10 overflow-hidden"
+      className="relative w-full lg:min-h-[110vh] min-h-[89vh] flex flex-col md:justify-center justify-end items-center mt-10 overflow-hidden"
       id="scroll-fixed"
     >
       {/* 대각선 줄 1 */}
@@ -80,7 +84,7 @@ function CocktailDrop() {
       />
 
       {/* 로고 */}
-      <div ref={logoRef} className="absolute z-20 md:w-115 w-65 md:h-90 h-40">
+      <div ref={logoRef} className="absolute md:w-115 w-85 md:h-90 h-40">
         <Image
           src="/logo.svg"
           alt="로고 이미지"
@@ -94,17 +98,19 @@ function CocktailDrop() {
       <div className="w-full md:h-90 h-30"></div>
 
       {/* 컵 이미지 - 모바일에서 바닥에 붙도록 */}
-      <div className="z-10 md:relative absolute bottom-0">
+      <div className="md:relative absolute bottom-0">
         <Image
           src={Cocktailcup}
           alt="칵테일 컵"
           width={900}
-          height={800}
+          height={700}
           priority
-          style={{ width: 'auto', height: 'auto' }}
-          className="md:w-auto md:h-auto w-[300px] h-[300px] object-contain"
+          className="md:w-auto md:h-auto w-[500px] h-[400px] object-cover"
         />
       </div>
+      <div className="absolute md:bottom-35 bottom-20 flex items-center justify-center z-3 w-full">
+        <PassBtn />
+      </div>
     </div>
   );
 }

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 (
+    <button
+      onClick={handleClick}
+      className="w-[90%] md:w-120 py-5 md:px-20 px-5 md:text-2xl text-lg rounded-xl flex items-center justify-center bg-tertiary/70"
+    >
+      <span className="text-primary font-serif whitespace-nowrap">
+        칵테일 취향추천 <span className="text-secondary font-serif">바로가기</span>
+      </span>
+    </button>
+  );
+}
+
+export default PassBtn;

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

@@ -11,15 +11,15 @@ function ModelImage({ onLoaded }: Props) {
     onLoaded();
   });
   return (
-    <div className="w-full flex justify-center items-center absolute bottom-20 left-1/2 -translate-x-1/2">
+    <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">
         <Image
           src={MobileCocktailDrop}
           alt="모바일 칵테일 드랍"
-          width={280}
-          height={360}
-          style={{ width: 'auto', height: 'auto' }}
-          className="object-cover"
+          width={260}
+          height={290}
+          priority
+          className="object-cover w-[300px] h-[390px]"
         />
       </div>
     </div>

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

@@ -12,7 +12,7 @@ function Scroll({ isDesktop }: { isDesktop: boolean }) {
         height: 60,
       };
   return (
-    <div className="absolute bottom-18 left-1/2 -translate-x-1/2 rounded-full bg-secondary/10 z-11 md:w-[60px] md:h-[60px] w-[45px] h-[45px]">
+    <div className="absolute bottom-18 left-1/2 -translate-x-1/2 rounded-full md:bg-secondary/10 bg-primary/30 z-11 md:w-[60px] md:h-[60px] w-[45px] h-[45px]">
       <div className="z-11">
         <Lottie animationData={scroll} style={style} aria-hidden loop={true} />
       </div>

src/domains/main/components/FinalLanding.tsx

@@ -13,13 +13,15 @@ function FinalLanding() {
   const smootherRef = useRef<ScrollSmoother | null>(null);
 
   const [isDesktop, setIsDesktop] = useState(false);
+  const [hasMounted, setHasMounted] = useState(false);
 
   useEffect(() => {
     const checkViewport = () => {
       setIsDesktop(window.innerWidth >= 1024);
     };
 
     checkViewport();
+    setHasMounted(true);
 
     window.addEventListener('resize', checkViewport);
 
@@ -58,6 +60,8 @@ function FinalLanding() {
     };
   }, [isDesktop]);
 
+  if (!hasMounted) return null;
+
   return (
     <div className="overflow-x-hidden">
       <StarMain />
@@ -69,7 +73,7 @@ function FinalLanding() {
             {!isLoading && (
               <>
                 <MainSlide isDesktop={isDesktop} />
-                <CocktailDrop />
+                <CocktailDrop isDesktop={isDesktop} />
               </>
             )}
           </div>
@@ -81,7 +85,7 @@ function FinalLanding() {
           {!isLoading && (
             <>
               <MainSlide isDesktop={isDesktop} />
-              <CocktailDrop />
+              <CocktailDrop isDesktop={isDesktop} />
             </>
           )}
         </div>

src/domains/main/components/mainSlide/components/MainSlide.tsx

@@ -127,7 +127,7 @@ function MainSlide({ isDesktop }: { isDesktop: boolean }) {
         <MobileSlide key="mobile" />
       ) : (
         <div ref={initialRoot} className="w-full overflow-hidden">
-          <section key="desktop" ref={root} className="w-full stage h-screen" id="scroll-fixed">
+          <section key="desktop" ref={root} className="w-full stage h-screen " id="scroll-fixed">
             <div className="stage relative w-full h-full overflow-hidden bg-secondary">
               <div className="panel absolute inset-0 overflow-hidden">
                 <MainSlideIntro />