prgrms-web-devcourse-final-project · ahk0413 · Oct 15, 2025 · Oct 15, 2025 · Oct 15, 2025 · Oct 15, 2025
diff --git a/src/domains/main/components/mainSlide/components/MainSlide.tsx b/src/domains/main/components/mainSlide/components/MainSlide.tsx
@@ -1,13 +1,13 @@
 'use client';
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import MainSlideAbv from './MainSlideAbv';
 
 import gsap from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import MobileSlide from './mobile/MobileSlide';
 import MainSlideIntro from './MainSlideIntro';
-import MainSlideTest from './MainSlideTest';
-import MainSlideCommunity from './MainSlideCommunity';
+import MainSlideTest from './pc/MainSlideTest';
+import MainSlideCommunity from './pc/MainSlideCommunity';
+import MainSlideAbv from './pc/MainSlideAbv';
 
 gsap.registerPlugin(ScrollTrigger);
 
@@ -128,7 +128,7 @@ function MainSlide({ isDesktop }: { isDesktop: boolean }) {
       ) : (
         <div ref={initialRoot} className="w-full overflow-hidden">
           <section key="desktop" ref={root} className="w-full stage h-screen" id="scroll-fixed">
-            <div className="stage relative w-full h-full overflow-hidden bg-secondary/90 rounded-tl-4xl rounded-tr-4xl">
+            <div className="stage relative w-full h-full overflow-hidden bg-secondary">
               <div className="panel absolute inset-0 overflow-hidden">
                 <MainSlideIntro />
               </div>

diff --git a/src/domains/main/components/mainSlide/components/MainSlideCommunity.tsx b/src/domains/main/components/mainSlide/components/MainSlideCommunity.tsx
diff --git a/src/domains/main/components/mainSlide/components/MainSlideDummyCard.tsx b/src/domains/main/components/mainSlide/components/MainSlideDummyCard.tsx
@@ -9,13 +9,13 @@ interface Props {
 
 function MainSlideDummyCard({ src, cocktailName }: Props) {
   return (
-    <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 flex flex-col w-full min-w-[120px] md:max-w-[160px] rounded-2xl overflow-hidden bg-white">
       <div className="relative w-full h-[100px]">
         <Image src={src} fill className="object-cover" alt="" sizes="100px" priority />
       </div>
 
       <div className="p-3 flex flex-col gap-1 text-center">
-        <strong className="text-black text-lg">{cocktailName}</strong>
+        <strong className="text-black text-base">{cocktailName}</strong>
         <span className="text-gray-500 text-sm">+ 상세보기</span>
       </div>
       <Keep className="absolute top-2 right-2" fill="transparent" />

diff --git a/src/domains/main/components/mainSlide/components/MainSlideIntro.tsx b/src/domains/main/components/mainSlide/components/MainSlideIntro.tsx
@@ -2,7 +2,7 @@ function MainSlideIntro() {
   return (
     <article className="relative w-full p-12 h-full">
       <header className="flex flex-col gap-8 items-start justify-center h-full">
-        <h2 className="text-3xl lg:text-[5rem] font-extrabold leading-[1.2] text-primary text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
+        <h2 className="text-3xl lg:text-[5rem] font-extrabold leading-[1.2] text-primary">
           칵테일 <br /> 누구나 쉽게 즐길 수 있어요
         </h2>
         <p className="text-2xl font-normal text-primary/80">

diff --git a/src/domains/main/components/mainSlide/components/MainSsuryDrunk.tsx b/src/domains/main/components/mainSlide/components/MainSsuryDrunk.tsx
@@ -26,9 +26,9 @@ function MainSsuryDrunk({ src, abv }: Props) {
       <p className={`text-lg sm:text-3xl font-bold ${className(abv)}`}>
         {abv}
         {abv !== 86 ? (
-          <span className="text-xs text-primary">%</span>
+          <span className="text-xs text-white">%</span>
         ) : (
-          <span className="text-xs text-primary">%~</span>
+          <span className="text-xs text-white">%~</span>
         )}
       </p>
       <Image src={src} alt="" width={60} height={60} className="object-contain" />

diff --git a/src/domains/main/components/mainSlide/components/MainTestDummy.tsx b/src/domains/main/components/mainSlide/components/MainTestDummy.tsx
@@ -48,8 +48,8 @@ function MainTestDummy({ message, option, type }: Props) {
         <p className="tesx-xs">쑤리</p>
       </header>
       {message && (
-        <section className="flex flex-col w-[215px] h-43.5 p-3 rounded-2xl rounded-tl-none bg-white text-black gap-2">
-          <p className="text-xs">{message}</p>
+        <section className="flex flex-col w-[260px] p-3 rounded-2xl rounded-tl-none bg-white text-black gap-2">
+          <p className="text-sm">{message}</p>
 
           <div className="flex flex-col gap-2">
             {type == 'option' &&
@@ -58,11 +58,13 @@ function MainTestDummy({ message, option, type }: Props) {
                 <span
                   key={id}
                   className={clsx(
-                    'w-full rounded-3xl px-2 py-1 text-center',
-                    active ? 'bg-secondary' : 'bg-gray-light'
+                    'w-full rounded-3xl px-2 py-1 text-center text-sm',
+                    active
+                      ? 'bg-secondary shadow-[inset_0_0_6px_rgba(255,196,1,1)]'
+                      : 'bg-gray-light'
                   )}
                 >
-                  <span className="text-xs">{message}</span>
+                  {message}
                 </span>
               ))}
           </div>

diff --git a/src/domains/main/components/mainSlide/components/mobile/MobileAbv.tsx b/src/domains/main/components/mainSlide/components/mobile/MobileAbv.tsx
@@ -45,14 +45,12 @@ function MobileAbv() {
   ];
 
   return (
-    <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>
+    <article className="p-4 sm:p-8 bg-primary rounded-2xl flex flex-col sm:justify-center gap-2">
+      <div className="flex flex-col gap-5 lg:gap-0">
+        <p className="hidden sm:block text-xl md:text-2xl text-white">3</p>
         <div className="flex flex-col gap-5">
-          <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>
+          <header className="flex justify-between items-center">
+            <h2 className="text-xl sm:text-2xl font-black text-white">내 알콜도수 UP</h2>
             <button
               type="button"
               className={clsx(`block duration-300 sm:hidden`, isClick ? 'rotate-135' : 'rotate-0')}
@@ -69,26 +67,26 @@ function MobileAbv() {
                 : '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]">
+            <p className="text-sm sm:text-md leading-[1.5] font-normal text-white">
               5도 부터 시작하는 내 알콜도수 <br />글 작성,댓글,좋아요 / 킵으로 알콜도수 UP! <br />
               알콜도수에 따라 변하는 쑤리(SSURY)를 보는 재미도 있어요.
             </p>
             <div className="mt-4 flex flex-col gap-2">
-              <ul className="flex gap-[5%] md:gap-[8%]">
+              <ul className="flex justify-between">
                 {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>
+                <span className="absolute top-0 left-0 h-full rounded-full bg-gradient-to-r from-[#FFCA8D] to-[#FA2424] w-7/8"></span>
               </div>
             </div>
           </div>
         </div>
-      </article>
-    </section>
+      </div>
+    </article>
   );
 }
 export default MobileAbv;
diff --git a/src/domains/main/components/mainSlide/components/mobile/MobileSlide.tsx b/src/domains/main/components/mainSlide/components/mobile/MobileSlide.tsx
@@ -4,11 +4,11 @@ import MobileAbv from './MobileAbv';
 
 function MobileSlide() {
   return (
-    <section className="py-8 px-6 sm:p-12 bg-secondary/90 w-full rounded-4xl" id="scroll-fixed">
-      <h2 className="text-2xl md:text-3xl font-bold leading-[1.5] text-primary text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
+    <section className="py-8 px-3 sm:p-12 bg-secondary/90 w-full" id="scroll-fixed">
+      <h2 className="text-2xl md:text-3xl font-bold leading-[1.5] text-primary">
         칵테일 <br /> 누구나 쉽게 즐길 수 있어요
       </h2>
-      <p className="text-md md:text-2xl font-normal mt-2 text-primary">
+      <p className="text-md md:text-base font-normal mt-2 text-primary">
         SSOUL의 재밌고 다양한 기능들로 더 친근하게 접해보세요
       </p>
       <div className="flex flex-col gap-10 mt-8">

diff --git a/src/domains/main/components/mainSlide/components/mobile/MobileSlideCommunity.tsx b/src/domains/main/components/mainSlide/components/mobile/MobileSlideCommunity.tsx
@@ -1,18 +1,19 @@
 import Add from '@/shared/assets/icons/add_24.svg';
 import clsx from 'clsx';
 import { useState } from 'react';
+import Image from 'next/image';
+import Community01 from '@/shared/assets/images/community_01.webp';
+import Community02 from '@/shared/assets/images/community_02.webp';
 
 function MobileSlideCommunity() {
   const [isClick, setIsClick] = useState(false);
   return (
-    <section className="p-4 sm:p-12 bg-[#77688d] rounded-2xl sm:rounded-[30px] flex flex-col justify-center">
-      <article className="flex flex-col gap-5">
-        <span className="hidden sm:block text-xl md:text-2xl font-black">2</span>
-        <article className="flex flex-col gap-5">
-          <header className="flex justify-between">
-            <h2 className="text-xl sm:text-2xl md:text-3xl text-secondary font-black text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
-              술술 즐기는, 커뮤니티
-            </h2>
+    <article className="p-4 sm:p-8 bg-primary rounded-2xl flex flex-col sm:justify-center gap-2">
+      <div className="flex flex-col gap-5">
+        <p className="hidden sm:block text-xl md:text-2xl text-white">2</p>
+        <div className="flex flex-col gap-5">
+          <header className="flex justify-between items-center">
+            <h2 className="text-xl sm:text-2xl font-black text-white">함께 나누는 칵테일 이야기</h2>
             <button
               type="button"
               className={clsx(`block duration-300 sm:hidden`, isClick ? 'rotate-135' : 'rotate-0')}
@@ -21,22 +22,43 @@ function MobileSlideCommunity() {
               <Add />
             </button>
           </header>
-          <p
+          <div
             className={clsx(
-              `overflow-hidden text-md md:text-xl text-secondary font-normal leading-[1.5] flex flex-col gap-5 transition-all duration-500 `,
+              `overflow-hidden flex flex-col gap-3 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'
             )}
           >
-            칵테일에 대해 물어볼 곳이 없어 목이 마른 당신! <br />
-            초보자부터 애호가까지, Ssoul에서는 누구나 칵테일 이야기를 나눌 수 있어요.
-            <br />
-            회원들과 소통하면 내 칵테일 솜씨를 뽐내보세요.
-          </p>
-        </article>
-      </article>
-    </section>
+            <p className="text-sm sm:text-md leading-[1.5] font-normal text-white">
+              다양한 칵테일 레시피들을 SNS로 공유하고
+              <br />
+              커뮤니티에서 누구나 칵테일 관련 이야기를 나눌 수 있어요.
+            </p>
+            <div className="flex flex-col md:flex-row w-full gap-2 mt-4" aria-hidden>
+              <div className="relative w-full max-w-[12.5rem] aspect-[0.96] overflow-hidden">
+                <Image
+                  src={Community01}
+                  alt=""
+                  fill
+                  priority
+                  className="object-contain object-left-bottom"
+                />
+              </div>
+              <div className="relative w-full md:w-[75%] aspect-[2.09] overflow-hidden">
+                <Image
+                  src={Community02}
+                  alt=""
+                  fill
+                  priority
+                  className="object-contain object-left-bottom"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
   );
 }
 export default MobileSlideCommunity;
diff --git a/src/domains/main/components/mainSlide/components/mobile/MobileSlideTest.tsx b/src/domains/main/components/mainSlide/components/mobile/MobileSlideTest.tsx
@@ -18,55 +18,49 @@ const DUMMY_TEST = [
 function MobileSlideTest() {
   const [isClick, setIsClick] = useState(false);
   return (
-    <section className="p-4 sm:p-12 bg-[#645a72] rounded-2xl sm:rounded-[30px] flex flex-col sm:justify-center">
-      <span className=" hidden sm:text-xl sm:block md:text-2xl font-black text-secondary">1</span>
-      <div className="flex flex-col gap-3">
-        <article className="flex flex-col gap-5">
-          <header className="flex justify-between items-center">
-            <h2 className="text-xl sm:text-2xl md:text-3xl font-black text-secondary text-shadow-[0_4px_6px_rgb(255_255_255_/0.25)]">
-              AI기반 취향테스트
-            </h2>
-            <button
-              type="button"
-              className={clsx(`block duration-300 sm:hidden`, isClick ? 'rotate-135' : 'rotate-0')}
-              onClick={() => setIsClick(!isClick)}
-            >
-              <Add />
-            </button>
-          </header>
-          <article
-            className={clsx(
-              `overflow-hidden flex flex-col gap-3 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'
-            )}
+    <article className="p-4 sm:p-8 bg-primary rounded-2xl flex flex-col sm:justify-center gap-2">
+      <p className="hidden sm:block text-xl md:text-2xl text-white">1</p>
+      <div className="flex flex-col gap-5">
+        <header className="flex justify-between items-center">
+          <h2 className="text-xl sm:text-2xl font-black text-white">AI기반 취향테스트</h2>
+          <button
+            type="button"
+            className={clsx(`block duration-300 sm:hidden`, isClick ? 'rotate-135' : 'rotate-0')}
+            onClick={() => setIsClick(!isClick)}
           >
-            <div>
-              <p className="text-md sm:text-md leading-[1.5] font-normal text-secondary">
-                복잡한 이름과 긴 설명 때문에 내 취향 칵테일 찾기 어려우셨나요? <br />
-                AI쑤리가 당신에게 딱 맞는 칵테일을 추천해 드려요!
-              </p>
-            </div>
-            <ul className="flex flex-col mt-4 lg:flex-row gap-5">
-              <MainTestDummy
-                message={
-                  <>
-                    안녕하세요! 🍹바텐더 쑤리에요.
-                    <br />
-                    취향에 맞는 칵테일을 추천해드릴게요. <br />
-                    어떤 유형으로 찾아드릴까요?
-                  </>
-                }
-                option={DUMMY_TEST}
-                type="option"
-              />
-              <MainTestDummy type="text" />
-            </ul>
-          </article>
-        </article>
+            <Add />
+          </button>
+        </header>
+        <div
+          className={clsx(
+            `overflow-hidden flex flex-col gap-3 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-sm sm:text-md leading-[1.5] font-normal text-white">
+            내 취향 칵테일 찾기 어려우셨나요? <br />
+            AI쑤리가 당신에게 딱 맞는 칵테일을 추천해 드려요!
+          </p>
+          <ul className="flex flex-col mt-4 lg:flex-row gap-5">
+            <MainTestDummy
+              message={
+                <>
+                  안녕하세요! 🍹바텐더 쑤리에요.
+                  <br />
+                  취향에 맞는 칵테일을 추천해드릴게요. <br />
+                  어떤 유형으로 찾아드릴까요?
+                </>
+              }
+              option={DUMMY_TEST}
+              type="option"
+            />
+            <MainTestDummy type="text" />
+          </ul>
+        </div>
       </div>
-    </section>
+    </article>
   );
 }
 export default MobileSlideTest;