[fix] scroll 위치이동

Author: ahk0413

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

@@ -3,7 +3,6 @@
 import HomeModel from './HomeModel';
 import HomeLogo from './HomeLogo';
 import HomeText from './HomeText';
-import Scroll from './Scroll';
 import { useEffect, useState } from 'react';
 import ModelImage from './ModelImage';
 
@@ -30,7 +29,6 @@ function Landing({ setIsLoading, isDesktop }: Props) {
             <>
               <HomeLogo isDesktop={isDesktop} />
               <HomeText isDesktop={isDesktop} />
-              <Scroll isDesktop={isDesktop} />
             </>
           )}
         </div>

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

@@ -1,20 +1,20 @@
 import Lottie from 'lottie-react';
 import scroll from '@/shared/assets/lottie/ScrollDownAnimation.json';
 
-function Scroll({ isDesktop }: { isDesktop: boolean }) {
-  const style = !isDesktop
-    ? {
-        width: 45,
-        height: 45,
-      }
-    : {
-        width: 60,
-        height: 60,
-      };
+function Scroll() {
+  // const style = !isDesktop
+  //   ? {
+  //       width: 45,
+  //       height: 45,
+  //     }
+  //   : {
+  //       width: 60,
+  //       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="z-11">
-        <Lottie animationData={scroll} style={style} aria-hidden loop={true} />
+        <Lottie animationData={scroll} aria-hidden loop={true} />
       </div>
     </div>
   );

src/domains/main/components/FinalLanding.tsx

@@ -7,6 +7,7 @@ import gsap from 'gsap';
 import { ScrollSmoother, ScrollTrigger } from 'gsap/all';
 import StarMain from './3d/StarMain';
 import CocktailDrop from '../cocktailDrop/CocktailDrop';
+import Scroll from './3d/Scroll';
 
 function FinalLanding() {
   const [isLoading, setIsLoading] = useState(true);
@@ -86,6 +87,8 @@ function FinalLanding() {
           )}
         </div>
       )}
+
+      <Scroll />
     </div>
   );
 }

src/domains/main/components/mainSlide/components/pc/MainSlideAbv.tsx

@@ -42,12 +42,12 @@ function MainSlideAbv() {
 
   return (
     <article className="slide-content invisible w-[61%] h-full bg-primary rounded-tl-[30px] rounded-bl-[30px] p-12 flex flex-col">
-      <div className="flex flex-col gap-20 h-full">
+      <div className="flex flex-col gap-[4%] h-full">
         <p className="text-[32px] font-bold ">3</p>
         <div className="flex flex-col gap-5 h-full justify-between">
           <header className="flex flex-col gap-10">
             <h2 className="text-5xl text-white font-bold">내 알콜도수 UP</h2>
-            <p className="text-xl xl:text-2xl font-normal leading-[1.5]">
+            <p className="text-xl leading-[1.5] font-normal text-white">
               5도 부터 시작하는 내 알콜도수 <br />내 참여에 따라 알콜도수 UP! <br />
               알콜도수에 따라 변하는 쑤리(SSURY)를 보는 재미도 있어요.
             </p>

src/domains/main/components/mainSlide/components/pc/MainSlideCommunity.tsx

@@ -5,22 +5,19 @@ import Community02 from '@/shared/assets/images/community_02.webp';
 function MainSlideCommunity() {
   return (
     <article className="slide-content invisible w-[71%] h-full p-12 bg-[#333333] rounded-tl-[30px] rounded-bl-[30px] flex flex-col ">
-      <div className="flex flex-col gap-20 h-full">
+      <div className="flex flex-col gap-[4%] h-full">
         <p className="text-[32px] text-white font-bold">2</p>
         <div className="flex flex-col h-full justify-between">
           <header className="flex flex-col gap-10">
-            <h2 className="text-5xl text-white font-bold">술술 즐기는, 커뮤니티</h2>
-            <p className="text-xl pb-[250px] xl:text-2xl text-white font-normal leading-[1.5]">
-              칵테일에 대해 물어볼 곳이 없어 목이 마른 당신! <br />
-              초보자부터 애호가까지
+            <h2 className="text-5xl text-white font-bold">함께 나누는 칵테일 이야기</h2>
+            <p className="text-xl leading-[1.5] font-normal text-white">
+              다양한 칵테일 레시피들을 SNS로 공유하고
               <br />
-              Ssoul에서는 누구나 칵테일 이야기를 나눌 수 있어요.
-              <br />
-              회원들과 소통하면 내 칵테일 솜씨를 뽐내보세요.
+              커뮤니티에서 누구나 칵테일 관련 이야기를 나눌 수 있어요.
             </p>
           </header>
-          <div className="flex flex-col w-full gap-5" aria-hidden>
-            <div className="relative w-full max-w-[13.75rem] rounded-2xl aspect-[0.96] overflow-hidden">
+          <div className="flex flex-col w-full gap-5 mt-5" aria-hidden>
+            <div className="relative w-[25%] rounded-2xl aspect-[0.96] overflow-hidden">
               <Image
                 src={Community01}
                 alt=""
@@ -29,7 +26,7 @@ function MainSlideCommunity() {
                 className="object-contain object-left-bottom"
               />
             </div>
-            <div className="relative w-[90%] rounded-2xl aspect-[2.09] overflow-hidden">
+            <div className="relative w-[70%] rounded-2xl aspect-[2.09] overflow-hidden">
               <Image
                 src={Community02}
                 alt=""

src/domains/main/components/mainSlide/components/pc/MainSlideTest.tsx

@@ -16,7 +16,7 @@ const DUMMY_TEST = [
 function MainSlideTest() {
   return (
     <article className="slide-content invisible w-[80%] p-12 h-full bg-[#4D4D4D] rounded-tl-[30px] rounded-bl-[30px] flex flex-col">
-      <div className="flex flex-col gap-20 h-full">
+      <div className="flex flex-col gap-[4%] h-full">
         <p className="text-[32px] text-white font-bold">1</p>
         <div className="flex flex-col justify-between h-full">
           <header className="flex flex-col gap-10">