Design/main#11 (#138)

* [style] 배경

* [design] 랜딩페이지 3d모델

* 3d 렌더링

* 로고,텍스트 추가

* 패키지제이슨

* 메인작업

* 카메라액션 취소

* 별 애니메이션 취소

* 대문자

Author: EunbinJung

public/1Stars.png

@@ -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>
   );
 }

public/1Stars.webp

@@ -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;

public/2Stars.png

@@ -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;

public/2Stars.webp

@@ -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}