Design/main#11

src/app/page.tsx

@@ -1,12 +1,9 @@
-import Landing from '@/domains/shared/components/3d/Landing';
-
-import MainSlide from '@/domains/main/components/mainSlide/components/MainSlide';
+import FinalLanding from '@/domains/main/components/FinalLanding';
 
 export default function Home() {
   return (
     <div className="page-layout max-w-full">
-      <Landing />
-      <MainSlide />
+      <FinalLanding />
     </div>
   );
 }

src/domains/main/cocktailDrop/CocktailDrop.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import Image from 'next/image';
+import Cocktailcup from '../../../../public/CocktailDrop_4x.webp';
+import { useLayoutEffect, useRef } from 'react';
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/all';
+
+gsap.registerPlugin(ScrollTrigger);
+
+function CocktailDrop() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const logoRef = useRef<HTMLDivElement>(null);
+  const line1Ref = useRef<HTMLDivElement>(null);
+  const line2Ref = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    const ctx = gsap.context(() => {
+      // 양쪽 대각선 줄 들어오기 (line1, line2)
+      gsap.fromTo(
+        [line1Ref.current, line2Ref.current],
+        {
+          x: (i) => (i === 0 ? '-100%' : '100%'),
+          opacity: 0,
+        },
+        {
+          x: '0%',
+          opacity: 1,
+          ease: 'power4.out',
+          duration: 1.2,
+          stagger: 0.2,
+          scrollTrigger: {
+            trigger: containerRef.current,
+            // markers: true, // ✅ 디버
+            start: 'top 95%',
+            toggleActions: 'restart none none none',
+            once: false,
+          },
+        }
+      );
+
+      // 로고 위에서 아래로 자연스럽게 등장
+      gsap.fromTo(
+        logoRef.current,
+        { y: -300, opacity: 0 },
+        {
+          y: -40,
+          opacity: 1,
+          duration: 3,
+          ease: 'power3.out',
+          scrollTrigger: {
+            trigger: containerRef.current,
+            // markers: true, // ✅ 디버
+            start: 'top 90%',
+            toggleActions: 'restart none none none',
+            once: false,
+          },
+        }
+      );
+      ScrollTrigger.refresh();
+    }, containerRef);
+
+    return () => ctx.revert();
+  }, [containerRef]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="relative w-full min-h-[110vh] flex flex-col justify-center items-center mt-10"
+      id="scroll-fixed"
+    >
+      {/* 대각선 줄 1 */}
+      <div
+        ref={line1Ref}
+        className="absolute top-[80px] left-[-50%] w-[200%] h-[40px] bg-secondary/80 rotate-[8deg] z-10"
+      />
+      {/* 대각선 줄 2 */}
+      <div
+        ref={line2Ref}
+        className="absolute top-[140px] left-[-50%] w-[200%] h-[40px] bg-secondary rotate-[8deg] z-10"
+      />
+
+      {/* 로고 */}
+      <div ref={logoRef} className="absolute z-20">
+        <Image
+          src="/logo.svg"
+          alt="로고 이미지"
+          width={600}
+          height={600}
+          className="rotate-[-9deg]"
+        />
+      </div>
+
+      <div className="w-full h-90"></div>
+
+      {/* 컵 이미지 */}
+      <div className="z-10">
+        <Image src={Cocktailcup} alt="칵테일 컵" width={800} height={800} priority />
+      </div>
+    </div>
+  );
+}
+
+export default CocktailDrop;

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

@@ -0,0 +1,14 @@
+import Image from 'next/image';
+
+function HomeLogo({ isDesktop }: { isDesktop: boolean }) {
+  return (
+    <div
+      className="z-5 absolute md:top-8 md:left-10 md:translate-none top-13 left-1/2 -translate-x-1/2"
+      style={{ width: !isDesktop ? 400 : 700, height: !isDesktop ? 70 : 240 }}
+    >
+      <Image src={'/logo.svg'} alt="로고 이미지" fill priority className="object-contain" />
+    </div>
+  );
+}
+
+export default HomeLogo;

src/domains/shared/components/3d/HomeModel.tsx → src/domains/main/components/3d/HomeModel.tsx

@@ -3,17 +3,15 @@
 import { Environment, OrbitControls, useGLTF } from '@react-three/drei';
 import { Canvas, useFrame, useThree } from '@react-three/fiber';
 import { Bloom, EffectComposer } from '@react-three/postprocessing';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import * as THREE from 'three';
 
-function Model({ onLoaded }: { onLoaded: () => void }) {
-  const { scene } = useGLTF('/3d/model/scene.gltf');
-  const [scale, setScale] = useState(13);
+interface Props {
+  onLoaded: () => void;
+}
 
-  useEffect(() => {
-    const isMobile = window.innerWidth < 768; // 모바일 기준 너비
-    setScale(isMobile ? 3.8 : 11.5); // 모바일이면 작게
-  }, []);
+function Model({ onLoaded }: Props) {
+  const { scene } = useGLTF('/3d/model/scene.gltf');
 
   useEffect(() => {
     if (scene) {
@@ -41,7 +39,7 @@ function Model({ onLoaded }: { onLoaded: () => void }) {
     }
   });
 
-  return <primitive object={scene} scale={scale} />;
+  return <primitive object={scene} scale={18} position={[0, -1.2, 0]} />;
 }
 
 function CameraAnimation() {
@@ -61,16 +59,20 @@ function CameraAnimation() {
   return null;
 }
 
-function HomeModel({ onLoaded }: { onLoaded: () => void }) {
+function HomeModel({ onLoaded }: Props) {
   return (
-    <Canvas className="z-10 w-full" camera={{ position: [5, 20, 10], fov: 30 }} dpr={[1, 1.5]}>
-      <ambientLight intensity={0.5} />
+    <Canvas
+      className="z-10 w-full pointer-none"
+      camera={{ position: [10, 40, 9], fov: 26 }}
+      dpr={[1, 1.5]}
+    >
+      <ambientLight intensity={1} />
       <pointLight position={[10, 30, 40]} intensity={1} />
       <spotLight position={[0, 10, 10]} angle={0.2} penumbra={1} intensity={15} castShadow />
-      <directionalLight intensity={6} color={0xffffff} position={[10, 40, 100]} />
+      <directionalLight intensity={8} color={0xffffff} position={[10, 40, 100]} />
       <Environment files={`/hdri/footprint_court.hdr`} background={false} />
       <Model onLoaded={onLoaded} />
-      <CameraAnimation />
+      {/* <CameraAnimation /> */}
       <OrbitControls
         enablePan={false}
         enableZoom={false}

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

@@ -0,0 +1,17 @@
+function HomeText({ isDesktop }: { isDesktop: boolean }) {
+  return (
+    <>
+      {!isDesktop ? (
+        <p className="absolute top-32 text-sm left-1/2 -translate-x-1/2 whitespace-nowrap">
+          어떤 칵테일이 끌리시나요? SSoul이 쉽게 골라드릴게요.
+        </p>
+      ) : (
+        <p className="absolute bottom-45 right-12 font-serif text-xl text-right font-normal z-20">
+          어떤 칵테일이 끌리시나요? SSoul이 쉽게 골라드릴게요.
+        </p>
+      )}
+    </>
+  );
+}
+
+export default HomeText;

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

@@ -0,0 +1,42 @@
+'use client';
+
+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';
+
+interface Props {
+  setIsLoading: (value: boolean) => void;
+  isDesktop: boolean;
+}
+
+function Landing({ setIsLoading, isDesktop }: Props) {
+  const [modelLoaded, setModelLoaded] = useState(false);
+  useEffect(() => {
+    if (modelLoaded) setIsLoading(false);
+  }, [modelLoaded, setIsLoading]);
+  return (
+    <>
+      <div className="page-layout max-w-full">
+        <div className="relative w-full h-screen">
+          {isDesktop ? (
+            <HomeModel onLoaded={() => setModelLoaded(true)} />
+          ) : (
+            <ModelImage onLoaded={() => setModelLoaded(true)} />
+          )}
+          {modelLoaded && (
+            <>
+              <HomeLogo isDesktop={isDesktop} />
+              <HomeText isDesktop={isDesktop} />
+              <Scroll isDesktop={isDesktop} />
+            </>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Landing;

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

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+
+interface Props {
+  onLoaded: () => void;
+}
+
+function ModelImage({ onLoaded }: Props) {
+  useEffect(() => {
+    onLoaded();
+  });
+  return <div className="w-full"></div>;
+}
+
+export default ModelImage;

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

@@ -0,0 +1,23 @@
+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,
+      };
+  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} />
+      </div>
+    </div>
+  );
+}
+
+export default Scroll;

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

@@ -0,0 +1,96 @@
+'use client';
+
+import Image from 'next/image';
+import foreStar from '../../../../../public/1Stars.webp';
+import backStar from '../../../../../public/2Stars.webp';
+import { useEffect, useRef } from 'react';
+import gsap from 'gsap';
+
+function StarMain() {
+  // const background = useRef<HTMLDivElement>(null);
+  // const foreground = useRef<HTMLDivElement>(null);
+  // const mouse = useRef({ x: 0, y: 0 });
+  // const rafId = useRef<number | null>(null);
+
+  // useEffect(() => {
+  //   if (!background.current || !foreground.current) return;
+
+  //   const bgX = gsap.quickSetter(background.current, 'x', 'px');
+  //   const bgY = gsap.quickSetter(background.current, 'y', 'px');
+  //   const bgRotate = gsap.quickSetter(background.current, 'rotate', 'deg');
+
+  //   const fgX = gsap.quickSetter(foreground.current, 'x', 'px');
+  //   const fgY = gsap.quickSetter(foreground.current, 'y', 'px');
+  //   const fgRotate = gsap.quickSetter(foreground.current, 'rotate', 'deg');
+
+  //   const update = () => {
+  //     const { x, y } = mouse.current;
+
+  //     bgX(x * -2);
+  //     bgY(y * -2);
+  //     bgRotate(x * -0.2);
+
+  //     fgX(x * 3);
+  //     fgY(y * 3);
+  //     fgRotate(y * 0.2);
+
+  //     rafId.current = requestAnimationFrame(update);
+  //   };
+
+  //   const handleMouseMove = (e: MouseEvent) => {
+  //     // 화면 중앙 기준으로 얼마나 벗어났는지 (-1 ~ 1 범위)
+  //     const x = (e.clientX / window.innerWidth - 0.5) * 2;
+  //     const y = (e.clientY / window.innerHeight - 0.5) * 2;
+  //     mouse.current = { x, y };
+  //   };
+
+  //   const handleTouchMove = (e: TouchEvent) => {
+  //     const touch = e.touches[0];
+  //     const x = (touch.clientX / window.innerWidth - 0.5) * 2;
+  //     const y = (touch.clientY / window.innerHeight - 0.5) * 2;
+  //     mouse.current = { x, y };
+  //   };
+
+  //   window.addEventListener('mousemove', handleMouseMove);
+  //   window.addEventListener('touchmove', handleTouchMove);
+  //   rafId.current = requestAnimationFrame(update);
+
+  //   return () => {
+  //     window.removeEventListener('mousemove', handleMouseMove);
+  //     window.removeEventListener('touchmove', handleTouchMove);
+  //     if (rafId.current) cancelAnimationFrame(rafId.current);
+  //   };
+  // }, []);
+
+  return (
+    <>
+      {/* <HomeBackground /> */}
+      <div>
+        <div className="fixed top-0 left-0 w-full h-full overflow-hidden">
+          <div className="absolute w-full h-full top-0 left-0 will-change-transform">
+            <Image
+              src={foreStar}
+              alt="앞쪽 별"
+              fill
+              className="object-cover object-center"
+              priority
+              sizes="100vw"
+            />
+          </div>
+          <div className="fixed w-full h-full top-0 left-0  will-change-transform">
+            <Image
+              src={backStar}
+              alt="뒤쪽 별"
+              fill
+              className="object-cover object-center"
+              priority
+              sizes="100vw"
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default StarMain;