아래칵테일잔수정

Author: EunbinJung

src/domains/main/cocktailDrop/CocktailDrop.tsx

@@ -44,12 +44,23 @@ function CocktailDrop({ isDesktop = false }: CocktailDropProps) {
       );
 
       // 로고 위에서 아래로 자연스럽게 등장
-      const isMobile = window.innerWidth < 768;
+      const screenWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const isTablet = screenWidth >= 640 && screenWidth < 1024;
+      const isMobile = screenWidth < 640;
+
+      // 뷰포트 높이 기반으로 로고 위치 계산
+      const logoFinalY = isMobile
+        ? `-${viewportHeight * 0.3}px`
+        : isTablet
+          ? `-${viewportHeight * -0.8}px`
+          : '0px';
+
       gsap.fromTo(
         logoRef.current,
         { y: -300, opacity: 0 },
         {
-          y: isMobile ? -140 : -40, // 모바일에서는 더 위로
+          y: logoFinalY, // 뷰포트 높이 기반 계산
           opacity: 1,
           duration: 3,
           ease: 'power3.out',
@@ -70,7 +81,7 @@ function CocktailDrop({ isDesktop = false }: CocktailDropProps) {
   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-[120vh] md:min-h-[95vh] min-h-[87vh] flex flex-col lg:justify-center md:justify-center justify-end items-center mt-10 overflow-hidden"
       id="scroll-fixed"
     >
       {/* 대각선 줄 1 */}
@@ -85,7 +96,7 @@ function CocktailDrop({ isDesktop = false }: CocktailDropProps) {
       />
 
       {/* 로고 */}
-      <div ref={logoRef} className="absolute z-20 md:w-115 w-65 md:h-90 h-40">
+      <div ref={logoRef} className="absolute z-4 md:w-115 w-65 md:h-90 h-40">
         <Image
           src="/logo.svg"
           alt="로고 이미지"
@@ -97,18 +108,16 @@ function CocktailDrop({ isDesktop = false }: CocktailDropProps) {
       </div>
 
       {/* 컵 이미지 - 모바일에서 바닥에 붙도록 */}
-      <div className="z-10 md:relative absolute bottom-0">
+      <div className="z-5 absolute bottom-0">
         <Image
           src={Cocktailcup}
           alt="칵테일 컵"
-          width={900}
-          height={800}
           priority
-          style={{ width: 'auto', height: 'auto' }}
-          className="md:w-auto md:h-auto w-[300px] h-[300px] object-contain"
+          style={{ height: 'auto' }}
+          className="md:w-[700px] w-[500px] object-contain"
         />
       </div>
-      <div className="absolute md:bottom-35 bottom-20 flex items-center justify-center z-3 w-full">
+      <div className="absolute md:bottom-35 bottom-20 flex items-center justify-center z-10 w-full">
         <PassBtn />
       </div>
     </div>