Merge remote-tracking branch 'origin/main' into dev

Author: mtm-git1018

public/1Stars.png

@@ -9,6 +9,8 @@ interface Props {
   onClose: () => void;
   setIsModal: Dispatch<SetStateAction<boolean>>;
   type: 'myBar' | 'myAlarm';
+  setIsModal: Dispatch<SetStateAction<boolean>>;
+  type: 'myBar' | 'myAlarm';
 }
 
 function DeleteAllModal({ open, onClose, setIsModal, type }: Props) {
@@ -40,6 +42,8 @@ function DeleteAllModal({ open, onClose, setIsModal, type }: Props) {
       onClose={onClose}
       onConfirm={type == 'myBar' ? handleBarDelete : handleAlarmDelete}
       onCancel={onClose}
+      onConfirm={type == 'myBar' ? handleBarDelete : handleAlarmDelete}
+      onCancel={onClose}
     ></ConfirmModal>
   );
 }

public/2Stars.png

@@ -1,5 +1,6 @@
 'use client';
 import { useState } from 'react';
+import { useState } from 'react';
 import Alarm from '../../Alarm';
 import { getApi } from '@/app/api/config/appConfig';
 import TextButton from '@/shared/components/button/TextButton';
@@ -19,6 +20,14 @@ interface MyAlarm {
   postTitle: string;
   read: boolean;
   type: string;
+  id: number;
+  message: string;
+  postCategoryName: string;
+  postId: number;
+  postThumbnailUrl: string | null;
+  postTitle: string;
+  read: boolean;
+  type: string;
 }
 
 function MyAlarm() {
@@ -45,6 +54,7 @@ function MyAlarm() {
     });
   };
   const items = data?.items ?? [];
+  const items = data?.items ?? [];
 
   return (
     <section>
@@ -60,6 +70,30 @@ function MyAlarm() {
         <TextButton className="my-5" onClick={handleDelete}>
           전체삭제
         </TextButton>
+        {isModal && (
+          <DeleteAllModal
+            open={isModal}
+            onClose={() => setIsModal(!isModal)}
+            setIsModal={setIsModal}
+            type="myAlarm"
+          />
+        )}
+        <TextButton className="my-5" onClick={handleDelete}>
+          전체삭제
+        </TextButton>
+      </div>
+      <div className="flex flex-col gap-3">
+        {items.length !== 0 ? (
+          items.map(({ id, postId, postTitle, read, message, createdAt }: MyAlarm) => (
+            <Link href={`/community/${postId}`} key={id} onClick={() => handleRead(id)}>
+              <Alarm title={postTitle} content={message} createdAt={createdAt} read={read} />
+            </Link>
+          ))
+        ) : (
+          <div className="flex justify-center">
+            <p>알림이 없습니다.</p>
+          </div>
+        )}
       </div>
       <div className="flex flex-col gap-3">
         {items.length !== 0 ? (

src/domains/mypage/components/DeleteAllModal.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+
 import { abvMap } from '@/domains/mypage/utills/abvMap';
 import CocktailCard from '@/domains/shared/components/cocktail-card/CocktailCard';
 import TextButton from '@/shared/components/button/TextButton';
@@ -37,6 +38,7 @@ function MyBar() {
     setIsModal(!isModal);
   };
 
+  const items = data?.items ?? [];
   const items = data?.items ?? [];
 
   return (
@@ -53,7 +55,19 @@ function MyBar() {
         <TextButton className="my-5" onClick={handleDelete}>
           전체삭제
         </TextButton>
+        {isModal && (
+          <DeleteAllModal
+            open={isModal}
+            onClose={() => setIsModal(!isModal)}
+            setIsModal={setIsModal}
+            type="myBar"
+          />
+        )}
+        <TextButton className="my-5" onClick={handleDelete}>
+          전체삭제
+        </TextButton>
       </div>
+      {items.length > 0 ? (
       {items.length > 0 ? (
         <div
           className="
@@ -63,6 +77,14 @@ function MyBar() {
            md:[grid-template-columns:repeat(3,minmax(0,250px))]
            "
         >
+          {items.map(
+            ({
+              cocktailId,
+              cocktailName,
+              imageUrl,
+              cocktailNameKo,
+              alcoholStrength,
+            }: MyCocktail) => {
           {items.map(
             ({
               cocktailId,

src/domains/mypage/components/pages/my-alarm/MyAlarm.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react';
+
+function HomeBackground() {
+  const bgRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      const x = e.clientX / window.innerWidth;
+      const percentage = 6 + x * 70;
+      if (bgRef.current) {
+        bgRef.current.style.background = `linear-gradient(128deg, rgba(26, 26, 26, 0.7) ${percentage}%, rgba(42, 42, 42, 0.3) ${percentage + 10}%, rgba(60, 70, 78, 0) 100%)`;
+      }
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    return () => window.removeEventListener('mousemove', handleMouseMove);
+  }, []);
+
+  return (
+    <div
+      ref={bgRef}
+      className="absolute inset-0 z-1 top-0 left-0 transition-all duration-100 will-change-auto"
+    />
+  );
+}
+
+export default HomeBackground;

src/domains/mypage/components/pages/my-bar/MyBar.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+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 * as THREE from 'three';
+
+function Model({ onLoaded }: { onLoaded: () => void }) {
+  const { scene } = useGLTF('/3d/model/scene.gltf');
+  const [scale, setScale] = useState(13);
+
+  useEffect(() => {
+    const isMobile = window.innerWidth < 768; // 모바일 기준 너비
+    setScale(isMobile ? 3.8 : 11.5); // 모바일이면 작게
+  }, []);
+
+  useEffect(() => {
+    if (scene) {
+      onLoaded(); // 모델이 로드되면 부모에게 알림
+    }
+  }, [scene]);
+
+  if (!scene) return null; // 로딩 전 대기 처리
+
+  scene.traverse((child) => {
+    if ((child as THREE.Mesh).isMesh) {
+      const mesh = child as THREE.Mesh;
+      const material = mesh.material as THREE.MeshPhysicalMaterial;
+
+      material.envMapIntensity = 3;
+      material.metalness = 1;
+      material.roughness = 0.3;
+      material.emissiveIntensity = 2;
+      material.clearcoat = 1;
+      material.clearcoatRoughness = 0.2;
+      material.needsUpdate = true;
+      material.opacity = 0.35;
+      material.bumpScale = 0.3;
+      material.thickness = 0.1;
+    }
+  });
+
+  return <primitive object={scene} scale={scale} />;
+}
+
+function CameraAnimation() {
+  const { camera } = useThree();
+  const targetPosition = new THREE.Vector3(5, 10, 10); // 최종 위치
+  const startPosition = new THREE.Vector3(0, 15, 6); // 시작 위치
+  const progress = useRef(0);
+
+  useFrame((state, delta) => {
+    if (progress.current < 1) {
+      progress.current += delta / 5; // 3초 동안
+      const t = Math.min(progress.current, 1);
+      camera.position.lerpVectors(startPosition, targetPosition, t);
+    }
+  });
+
+  return null;
+}
+
+function HomeModel({ onLoaded }: { onLoaded: () => void }) {
+  return (
+    <Canvas className="z-10 w-full" camera={{ position: [5, 20, 10], fov: 30 }} dpr={[1, 1.5]}>
+      <ambientLight intensity={0.5} />
+      <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]} />
+      <Environment files={`/hdri/footprint_court.hdr`} background={false} />
+      <Model onLoaded={onLoaded} />
+      <CameraAnimation />
+      <OrbitControls
+        enablePan={false}
+        enableZoom={false}
+        enableRotate={true}
+        autoRotate={true}
+        autoRotateSpeed={-0.4}
+        target={[0, 0, 0]}
+      />
+
+      <EffectComposer multisampling={0}>
+        <Bloom
+          intensity={0.65}
+          luminanceThreshold={0.9}
+          luminanceSmoothing={0.2}
+          luminanceColor={new THREE.Color(1, 1, 1)}
+          mipmapBlur
+        />
+      </EffectComposer>
+    </Canvas>
+  );
+}
+
+export default HomeModel;

src/domains/shared/components/3d/HomeBackground.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { useState } from 'react';
+import HomeModel from './HomeModel';
+import StarMain from './StarMain';
+import Spinner from '@/shared/components/spinner/Spinner';
+
+function Landing() {
+  const [isLoading, setIsLoading] = useState(true);
+
+  return (
+    <>
+      {isLoading && <Spinner />}
+      <div className="page-layout max-w-full">
+        <div className="relative w-full h-[1000px]">
+          <HomeModel onLoaded={() => setIsLoading(false)} />
+          {!isLoading && <StarMain />}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Landing;

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

@@ -0,0 +1,102 @@
+'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, '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="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"
+              priority
+              quality={100}
+            />
+          </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"
+              priority
+              quality={100}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default StarMain;