[style] 배경

Author: EunbinJung

public/1Stars.png

@@ -1,7 +1,9 @@
+import StarMain from '@/domains/shared/components/3d/StarMain';
+
 export default function Home() {
   return (
     <div className="page-layout max-w-full">
-      <h1>메인페이지</h1>
+      <StarMain />
     </div>
   );
 }

public/2Stars.png

@@ -0,0 +1,85 @@
+'use client';
+
+import Image from 'next/image';
+import foreStar from '../../../../../public/1Stars.png';
+import backStar from '../../../../../public/2Stars.png';
+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, 'x', '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 * -10);
+      bgY(y * -10);
+      bgRotate(x * -5);
+
+      fgX(x * 20);
+      fgY(y * 20);
+      fgRotate(y * 5);
+
+      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 (
+    <div>
+      <div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
+        <div
+          ref={background}
+          className="absolute w-screen h-screen top-0 left-0 will-change-transform"
+        >
+          <Image src={foreStar} alt="앞쪽 별" fill className="object-cover object-center" />
+        </div>
+        <div
+          ref={foreground}
+          className="absolute w-screen h-screen top-0 left-0  will-change-transform"
+        >
+          <Image src={backStar} alt="뒤쪽 별" fill className="object-cover object-center" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default StarMain;

src/app/page.tsx

@@ -2,7 +2,7 @@ import Github from './Github';
 
 function Footer() {
   return (
-    <footer className="w-full bg-primary flex items-center justify-between p-[12px] font-serif font-light shadow-footer">
+    <footer className="w-full bg-primary flex items-center justify-between p-[12px] font-serif font-light shadow-footer z-10">
       <div className="flex flex-col gap-1">
         <p className="text-sm md:text-base">Cocktail Discovery Service, SSOUL </p>
         <div className="flex flex-col sm:flex-row gap-0.5 sm:gap-2 text-sm md:text-base">