Style/메인페이지 슬라이드영역

src/domains/community/api/fetchComment.ts

@@ -32,7 +32,6 @@ export const postComments = async (postId: number | ParamValue, content: string)
       credentials: 'include',
       body: JSON.stringify({ content }),
     });
-
     const text = await res.text();
 
     if (!res.ok) {

src/domains/main/components/mainSlide/components/MainSlide.tsx

@@ -8,6 +8,7 @@ import MobileSlide from './mobile/MobileSlide';
 import MainSlideIntro from './MainSlideIntro';
 import MainSlideTest from './MainSlideTest';
 import MainSlideCommunity from './MainSlideCommunity';
+import StarBg from '@/domains/shared/components/star-bg/StarBg';
 
 gsap.registerPlugin(ScrollTrigger);
 
@@ -18,7 +19,6 @@ function MainSlide() {
   const cleanupFnRef = useRef<(() => void) | null>(null);
   const resizeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
-  // 초기 마운트
   useEffect(() => {
     setIsMobile(window.innerWidth < 1024);
     setMounted(true);
@@ -42,6 +42,9 @@ function MainSlide() {
 
           // 상태 업데이트
           setIsMobile(newIsMobile);
+        } else if (!newIsMobile) {
+          // 데스크탑 내에서의 리사이즈 - ScrollTrigger refresh
+          ScrollTrigger.refresh(true);
         }
       }, 200);
     };
@@ -68,27 +71,29 @@ function MainSlide() {
     const stage = el.querySelector('.stage') as HTMLElement;
     if (!stage) return;
 
-    // 약간의 지연을 줘서 DOM이 안정화되도록
     const timer = setTimeout(() => {
       if (!root.current) return;
 
       const ctx = gsap.context(() => {
         const panels = Array.from(el.querySelectorAll<HTMLElement>('.panel'));
-        const tl = gsap.timeline({ paused: true, defaults: { ease: 'none' } });
+        const tl = gsap.timeline({ paused: true, defaults: { ease: 'power3.inOut' } });
 
         panels.forEach((panel, i) => {
           const c = panel.querySelector<HTMLElement>('.slide-content');
           if (!c) return;
           const stageW = () => stage.clientWidth;
           const contentW = () => c.getBoundingClientRect().width;
 
-          gsap.set(c, { x: stageW() });
+          gsap.set(c, {
+            x: () => stageW(),
+            immediateRender: false,
+          });
 
           tl.to(
             c,
             {
               x: () => stageW() - contentW(),
-              duration: 1,
+              duration: 2,
               immediateRender: false,
               onStart: () => c.classList.remove('invisible'),
             },
@@ -109,36 +114,26 @@ function MainSlide() {
         ScrollTrigger.refresh();
       }, root);
 
-      // cleanup 함수를 ref에 저장
       cleanupFnRef.current = () => {
-        // ScrollTrigger를 먼저 완전히 제거
         const allTriggers = ScrollTrigger.getAll();
         allTriggers.forEach((st) => {
           if (st.trigger === el || el.contains(st.trigger as Node)) {
             st.kill(true);
           }
         });
 
-        // GSAP context revert
         try {
           ctx.revert();
-        } catch (e) {
-          // 무시
-        }
+        } catch {}
 
-        // 혹시 남아있는 pin-spacer 수동 제거
         const pinSpacers = document.querySelectorAll('.pin-spacer');
         pinSpacers.forEach((spacer) => {
           if (spacer.contains(el) || el.contains(spacer)) {
-            try {
-              const child = spacer.querySelector('section');
-              if (child && spacer.parentElement) {
-                spacer.parentElement.appendChild(child);
-              }
-              spacer.remove();
-            } catch (e) {
-              // 무시
+            const child = spacer.querySelector('section');
+            if (child && spacer.parentElement) {
+              spacer.parentElement.appendChild(child);
             }
+            spacer.remove();
           }
         });
       };
@@ -152,7 +147,6 @@ function MainSlide() {
       }
     };
   }, [isMobile, mounted]);
-
   // SSR 방지
   if (!mounted) {
     return null;
@@ -161,24 +155,28 @@ function MainSlide() {
   return (
     <>
       {isMobile ? (
-        <MobileSlide key="mobile" />
+        <StarBg className="">
+          <MobileSlide key="mobile" />
+        </StarBg>
       ) : (
-        <section key="desktop" ref={root} className="h-screen">
-          <div className="stage relative w-full h-full overflow-hidden">
-            <div className="panel absolute inset-0">
-              <MainSlideIntro />
-            </div>
-            <div className="panel absolute inset-0">
-              <MainSlideTest />
-            </div>
-            <div className="panel absolute inset-0">
-              <MainSlideCommunity />
-            </div>
-            <div className="panel absolute inset-0">
-              <MainSlideAbv />
+        <StarBg className="bg-fixed">
+          <section key="desktop" ref={root} className="stage h-screen">
+            <div className="stage relative w-full h-full overflow-hidden">
+              <div className="panel absolute inset-0">
+                <MainSlideIntro />
+              </div>
+              <div className="panel absolute inset-0">
+                <MainSlideTest />
+              </div>
+              <div className="panel absolute inset-0">
+                <MainSlideCommunity />
+              </div>
+              <div className="panel absolute inset-0">
+                <MainSlideAbv />
+              </div>
             </div>
-          </div>
-        </section>
+          </section>
+        </StarBg>
       )}
     </>
   );

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

@@ -41,7 +41,7 @@ function MainSlideAbv() {
   ];
 
   return (
-    <div className="slide-content w-1/2 h-full bg-[#84739e] rounded-tl-[30px] rounded-bl-[30px] p-15 flex flex-col justify-center">
+    <section className="slide-content invisible w-1/2 h-full bg-[#84739e] rounded-tl-[30px] rounded-bl-[30px] p-15 flex flex-col justify-center">
       <div className="flex flex-col gap-15">
         <span className="font-black text-[32px]">3</span>
         <div className="flex flex-col gap-5">
@@ -66,7 +66,7 @@ function MainSlideAbv() {
           </div>
         </div>
       </div>
-    </div>
+    </section>
   );
 }
 export default MainSlideAbv;

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

@@ -1,24 +1,23 @@
 function MainSlideCommunity() {
   return (
-    <div className="slide-content w-3/5 h-full p-15 bg-[#77688d] rounded-tl-[30px] rounded-bl-[30px] flex flex-col justify-center">
+    <section className="slide-content invisible w-3/5 h-full p-15 bg-[#77688d] rounded-tl-[30px] rounded-bl-[30px] flex flex-col justify-center">
       <div className="flex flex-col justify-center">
         <div className="flex flex-col gap-15">
           <span className="text-[32px] font-black">2</span>
-          <div className="flex flex-col gap-5">
+          <header className="flex flex-col gap-5">
             <h2 className="text-5xl text-secondary font-black text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
               술술 즐기는, 커뮤니티
             </h2>
-            <p className="text-xl xl:text-2xl text-secondary font-normal leading-[1.5]">
+            <p className="text-xl pb-[250px] xl:text-2xl text-secondary font-normal leading-[1.5]">
               칵테일에 대해 물어볼 곳이 없어 목이 마른 당신! <br />
               초보자부터 애호가까지, Ssoul에서는 누구나 칵테일 이야기를 나눌 수 있어요.
               <br />
               회원들과 소통하면 내 칵테일 솜씨를 뽐내보세요.
             </p>
-          </div>
+          </header>
         </div>
-        <span className="h-[250px]"></span>
       </div>
-    </div>
+    </section>
   );
 }
 export default MainSlideCommunity;

src/domains/main/components/mainSlide/components/MainSlideDummyCard.tsx

@@ -9,7 +9,7 @@ interface Props {
 
 function MainSlideDummyCard({ src, cocktailName }: Props) {
   return (
-    <div className="relative flex flex-col w-full min-w-[150px] rounded-2xl overflow-hidden bg-white shadow-[0_0_12px_rgba(255,255,255,0.4)]">
+    <div className="relative flex flex-col w-50 sm:w-full min-w-[150px] rounded-2xl overflow-hidden bg-white shadow-[0_0_12px_rgba(255,255,255,0.4)]">
       <div className="relative w-full h-[100px]">
         <Image src={src} fill className="object-cover" alt="" sizes="100px" priority />
       </div>

src/domains/main/components/mainSlide/components/MainSlideIntro.tsx

@@ -1,19 +1,19 @@
-import background from '@/shared/assets/images/main_slide.webp';
+import background from '@/shared/assets/images/cocktailBg.webp';
 import Image from 'next/image';
 
 function MainSlideIntro() {
   return (
-    <div className="relative w-full p-12 h-full">
-      <Image src={background} alt="" fill className="-z-1" />
-      <div className="flex flex-col gap-8">
+    <article className="relative w-full p-12 h-full">
+      <Image src={background} alt="" fill className="-z-1  object-right object-contain" />
+      <header className="flex flex-col gap-8">
         <h2 className="text-3xl lg:text-5xl font-bold leading-[1.5] text-secondary text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
           칵테일 <br /> 누구나 쉽게 즐길 수 있어요
         </h2>
         <p className="text-2xl font-normal">
           SSOUL의 재밌고 다양한 기능들로 더 친근하게 접해보세요
         </p>
-      </div>
-    </div>
+      </header>
+    </article>
   );
 }
 export default MainSlideIntro;

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

@@ -15,37 +15,41 @@ const DUMMY_TEST = [
 
 function MainSlideTest() {
   return (
-    <div className="slide-content w-3/4 p-12 h-full bg-[#645a72] rounded-tl-[30px] rounded-bl-[30px] flex flex-col justify-center ">
+    <section className="slide-content invisible w-3/4 p-12 h-full bg-[#645a72] rounded-tl-[30px] rounded-bl-[30px] flex flex-col justify-center ">
       <div className="flex flex-col gap-15">
         <span className="text-[32px] font-black text-secondary">1</span>
         <div className="flex flex-col gap-15">
-          <div className="flex flex-col gap-5">
+          <header className="flex flex-col gap-5">
             <h2 className=" text-5xl font-black text-secondary text-shadow  text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
               AI기반 취향테스트
             </h2>
             <p className="text-2xl leading-[1.5] font-normal text-secondary">
               복잡한 이름과 긴 설명 때문에 내 취향 칵테일 찾기 어려우셨나요? <br />
               AI쑤리가 당신에게 딱 맞는 칵테일을 추천해 드려요!
             </p>
-          </div>
+          </header>
           <ul className="flex gap-8">
-            <MainTestDummy
-              message={
-                <>
-                  안녕하세요! 🍹바텐더 쑤리에요.
-                  <br />
-                  취향에 맞는 칵테일을 추천해드릴게요. <br />
-                  어떤 유형으로 찾아드릴까요?
-                </>
-              }
-              option={DUMMY_TEST}
-              type="option"
-            />
-            <MainTestDummy type="text" />
+            <li>
+              <MainTestDummy
+                message={
+                  <>
+                    안녕하세요! 🍹바텐더 쑤리에요.
+                    <br />
+                    취향에 맞는 칵테일을 추천해드릴게요. <br />
+                    어떤 유형으로 찾아드릴까요?
+                  </>
+                }
+                option={DUMMY_TEST}
+                type="option"
+              />
+            </li>
+            <li>
+              <MainTestDummy type="text" />
+            </li>
           </ul>
         </div>
       </div>
-    </div>
+    </section>
   );
 }
 export default MainSlideTest;

src/domains/main/components/mainSlide/components/MainSsuryDrunk.tsx

@@ -31,7 +31,7 @@ function MainSsuryDrunk({ src, abv }: Props) {
           <span className="text-xs text-primary">%~</span>
         )}
       </p>
-      <Image src={src} alt="" width={60} height={60} className="w-15 h-15 object-contain"></Image>
+      <Image src={src} alt="" width={60} height={60} className="object-contain" />
     </div>
   );
 }

src/domains/main/components/mainSlide/components/MainTestDummy.tsx

@@ -34,7 +34,7 @@ const DUMMY_CARD = [
 
 function MainTestDummy({ message, option, type }: Props) {
   return (
-    <li className="flex flex-col justify-end gap-2">
+    <section className="flex flex-col justify-end gap-2">
       <header className="flex items-end">
         <div className="relative ">
           <Image
@@ -48,7 +48,7 @@ function MainTestDummy({ message, option, type }: Props) {
         <p className="tesx-xs">쑤리</p>
       </header>
       {message && (
-        <div className="flex flex-col w-fit  min-w-[120px] p-3 rounded-2xl rounded-tl-none bg-white text-black gap-2">
+        <section className="flex flex-col w-[215px] p-3 rounded-2xl rounded-tl-none bg-white text-black gap-2">
           <p className="text-xs">{message}</p>
 
           <div className="flex flex-col gap-2">
@@ -66,7 +66,7 @@ function MainTestDummy({ message, option, type }: Props) {
                 </span>
               ))}
           </div>
-        </div>
+        </section>
       )}
       {type == 'text' && (
         <div className="flex flex-col sm:flex-row gap-2">
@@ -75,7 +75,7 @@ function MainTestDummy({ message, option, type }: Props) {
           ))}
         </div>
       )}
-    </li>
+    </section>
   );
 }
 export default MainTestDummy;