[style] MainSlide 사진 추가

Author: ahk0413

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

@@ -1,6 +1,9 @@
 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);
@@ -10,7 +13,7 @@ function MobileSlideCommunity() {
         <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>
+            <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')}
@@ -28,11 +31,30 @@ function MobileSlideCommunity() {
             )}
           >
             <p className="text-sm sm:text-md leading-[1.5] font-normal text-white">
-              칵테일에 대해 물어볼 곳이 없어 목이 마른 당신! <br />
-              초보자부터 애호가까지, Ssoul에서는 누구나 칵테일 이야기를 나눌 수 있어요.
+              다양한 칵테일 레시피들을 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>

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

@@ -42,7 +42,7 @@ function MainSlideAbv() {
 
   return (
     <article className="slide-content invisible w-[61%] h-full bg-primary rounded-tl-[30px] rounded-bl-[30px] p-12 flex flex-col">
-      <div className="flex flex-col gap-30 h-full">
+      <div className="flex flex-col gap-20 h-full">
         <p className="text-[32px] font-bold ">3</p>
         <div className="flex flex-col gap-5 h-full justify-between">
           <header className="flex flex-col gap-10">
@@ -52,7 +52,7 @@ function MainSlideAbv() {
               알콜도수에 따라 변하는 쑤리(SSURY)를 보는 재미도 있어요.
             </p>
           </header>
-          <div className=" h-[190px] flex flex-col gap-2">
+          <div className="h-[190px] flex flex-col gap-2">
             <ul className="flex gap-[5%] xl:gap-[10%]">
               {SSURY_DRUNK.map(({ id, src, abv }) => (
                 <li key={id}>

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

@@ -1,9 +1,13 @@
+import Image from 'next/image';
+import Community01 from '@/shared/assets/images/community_01.webp';
+import Community02 from '@/shared/assets/images/community_02.webp';
+
 function MainSlideCommunity() {
   return (
-    <section className="slide-content invisible w-[71%] h-full p-12 bg-[#333333] rounded-tl-[30px] rounded-bl-[30px] flex flex-col">
-      <div className="flex flex-col gap-30 h-full">
+    <article className="slide-content invisible w-[71%] h-full p-12 bg-[#333333] rounded-tl-[30px] rounded-bl-[30px] flex flex-col ">
+      <div className="flex flex-col gap-20 h-full">
         <p className="text-[32px] text-white font-bold">2</p>
-        <div className="flex flex-col justify-between h-full">
+        <div className="flex flex-col h-full justify-between">
           <header className="flex flex-col gap-10">
             <h2 className="text-5xl text-white font-bold">술술 즐기는, 커뮤니티</h2>
             <p className="text-xl pb-[250px] xl:text-2xl text-white font-normal leading-[1.5]">
@@ -15,9 +19,29 @@ function MainSlideCommunity() {
               회원들과 소통하면 내 칵테일 솜씨를 뽐내보세요.
             </p>
           </header>
+          <div className="flex flex-col w-full gap-5" aria-hidden>
+            <div className="relative w-full max-w-[13.75rem] rounded-2xl aspect-[0.96] overflow-hidden">
+              <Image
+                src={Community01}
+                alt=""
+                fill
+                priority
+                className="object-contain object-left-bottom"
+              />
+            </div>
+            <div className="relative w-[90%] rounded-2xl aspect-[2.09] overflow-hidden">
+              <Image
+                src={Community02}
+                alt=""
+                fill
+                priority
+                className="object-contain object-left-bottom"
+              />
+            </div>
+          </div>
         </div>
       </div>
-    </section>
+    </article>
   );
 }
 export default MainSlideCommunity;

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

@@ -16,7 +16,7 @@ const DUMMY_TEST = [
 function MainSlideTest() {
   return (
     <article className="slide-content invisible w-[80%] p-12 h-full bg-[#4D4D4D] rounded-tl-[30px] rounded-bl-[30px] flex flex-col">
-      <div className="flex flex-col gap-30 h-full">
+      <div className="flex flex-col gap-20 h-full">
         <p className="text-[32px] text-white font-bold">1</p>
         <div className="flex flex-col justify-between h-full">
           <header className="flex flex-col gap-10">