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);
 
@@ -161,24 +162,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 />
+        <StarBg className="bg-fixed">
+          <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 />
+              </div>
             </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>
-        </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;

src/domains/main/components/mainSlide/components/mobile/MobileAbv.tsx

@@ -5,8 +5,12 @@ import Ssury4 from '@/shared/assets/ssury/ssury_level4.webp';
 import Ssury5 from '@/shared/assets/ssury/ssury_level5.webp';
 import Ssury6 from '@/shared/assets/ssury/ssury_level6.webp';
 import MainSsuryDrunk from '../MainSsuryDrunk';
+import Add from '@/shared/assets/icons/add_24.svg';
+import clsx from 'clsx';
+import { useState } from 'react';
 
 function MobileAbv() {
+  const [isClick, setIsClick] = useState(false);
   const SSURY_DRUNK = [
     {
       id: 1,
@@ -41,31 +45,49 @@ function MobileAbv() {
   ];
 
   return (
-    <section className="bg-[#84739e] rounded-[30px] p-12 flex flex-col justify-center">
-      <div className="flex flex-col gap-5 lg:gap-0">
-        <span className="font-black text-xl md:text-2xl">3</span>
+    <section className="bg-[#84739e] rounded-2xl sm:rounded-[30px] p-4 sm:p-12 flex flex-col justify-center">
+      <article className="flex flex-col gap-5 lg:gap-0">
+        <span className="hidden sm:block font-black text-xl md:text-2xl">3</span>
         <div className="flex flex-col gap-5">
-          <h2 className="text-2xl md:text-3xl font-black text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
-            내 알콜도수 UP
-          </h2>
-          <p className="text-md md:text-xl  font-normal leading-[1.5]">
-            5도 부터 시작하는 내 알콜도수 <br />글 작성,댓글,좋아요 / 킵으로 알콜도수 UP! <br />
-            알콜도수에 따라 변하는 쑤리(SSURY)를 보는 재미도 있어요.
-          </p>
-        </div>
-        <div className="flex flex-col gap-2">
-          <ul className="flex gap-[5%] xl:gap-[10%]">
-            {SSURY_DRUNK.map(({ id, src, abv }) => (
-              <li key={id}>
-                <MainSsuryDrunk src={src} abv={abv} />
-              </li>
-            ))}
-          </ul>
-          <div className="w-full h-3 border border-gray rounded-full relative">
-            <span className="absolute top-0 left-0 h-full rounded-full bg-gradient-to-r from-[#FFCA8D] to-[#FA2424] w-1/2"></span>
+          <header className="flex justify-between">
+            <h2 className="text-xl sm:text-2xl md:text-3xl font-black text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
+              내 알콜도수 UP
+            </h2>
+            <button
+              type="button"
+              className={clsx(`block duration-300 sm:hidden`, isClick ? 'rotate-135' : 'rotate-0')}
+              onClick={() => setIsClick(!isClick)}
+            >
+              <Add />
+            </button>
+          </header>
+          <div
+            className={clsx(
+              `overflow-hidden flex flex-col gap-5 transition-all duration-500 `,
+              isClick
+                ? 'opacity-100 max-h-[1000px] sm:opacity-100 sm:max-h-none sm:block'
+                : 'opacity-0 max-h-0 hidden sm:opacity-100 sm:max-h-none sm:block'
+            )}
+          >
+            <p className="text-md md:text-xl  font-normal leading-[1.5]">
+              5도 부터 시작하는 내 알콜도수 <br />글 작성,댓글,좋아요 / 킵으로 알콜도수 UP! <br />
+              알콜도수에 따라 변하는 쑤리(SSURY)를 보는 재미도 있어요.
+            </p>
+            <div className="mt-4 flex flex-col gap-2">
+              <ul className="flex gap-[5%] md:gap-[8%]">
+                {SSURY_DRUNK.map(({ id, src, abv }) => (
+                  <li key={id}>
+                    <MainSsuryDrunk src={src} abv={abv} />
+                  </li>
+                ))}
+              </ul>
+              <div className="w-full h-3 border border-gray rounded-full relative">
+                <span className="absolute top-0 left-0 h-full rounded-full bg-gradient-to-r from-[#FFCA8D] to-[#FA2424] w-1/2"></span>
+              </div>
+            </div>
           </div>
         </div>
-      </div>
+      </article>
     </section>
   );
 }

src/domains/main/components/mainSlide/components/mobile/MobileSlide.tsx

@@ -1,17 +1,24 @@
-import Image from 'next/image';
-import background from '@/shared/assets/images/main_slide.webp';
+import background from '@/shared/assets/images/cocktailBg.webp';
 import MobileSlideTest from './MobileSlideTest';
 import MobileSlideCommunity from './MobileSlideCommunity';
 import MobileAbv from './MobileAbv';
 
 function MobileSlide() {
   return (
-    <div>
-      <Image src={background} alt="" fill className="-z-1"></Image>
-      <h2 className="md:text-3xl font-bold leading-[1.5] text-secondary text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
+    <div
+      className="sticky p-4 sm:p-12"
+      style={{
+        backgroundImage: `url(${background.src})`,
+        backgroundAttachment: 'fixed',
+        backgroundSize: 'contain',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+      }}
+    >
+      <h2 className="text-xl md:text-3xl font-bold leading-[1.5] text-secondary text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
         칵테일 <br /> 누구나 쉽게 즐길 수 있어요
       </h2>
-      <p className="md:text-2xl font-normal">
+      <p className="text-md md:text-2xl font-normal">
         SSOUL의 재밌고 다양한 기능들로 더 친근하게 접해보세요
       </p>
       <div className="flex flex-col gap-10 mt-8">