[style] 메인페이지 반응형

Author: mtm-git1018

src/app/page.tsx

@@ -1,12 +1,12 @@
 import Landing from '@/domains/shared/components/3d/Landing';
 
-import MainSlide from "@/domains/main/components/mainSlide/components/MainSlide";
-
+import MainSlide from '@/domains/main/components/mainSlide/components/MainSlide';
 
 export default function Home() {
   return (
     <div className="page-layout max-w-full">
-      <h1>메인페이지</h1>
+      <Landing />
+      <MainSlide />
     </div>
   );
 }

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

@@ -7,37 +7,36 @@ import Ssury6 from '@/shared/assets/ssury/ssury_level6.webp';
 import MainSsuryDrunk from './MainSsuryDrunk';
 
 function MainSlideAbv() {
-
   const SSURY_DRUNK = [
     {
       id: 1,
       src: Ssury1,
-      abv:5
+      abv: 5,
     },
     {
       id: 2,
       src: Ssury2,
-      abv:11
+      abv: 11,
     },
     {
       id: 3,
       src: Ssury3,
-      abv:26
+      abv: 26,
     },
     {
       id: 4,
       src: Ssury4,
-      abv:46
+      abv: 46,
     },
     {
       id: 5,
       src: Ssury5,
-      abv:66
+      abv: 66,
     },
     {
       id: 6,
       src: Ssury6,
-      abv:86
+      abv: 86,
     },
   ];
 
@@ -70,4 +69,4 @@ function MainSlideAbv() {
     </div>
   );
 }
-export default MainSlideAbv
+export default MainSlideAbv;

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

@@ -1,7 +1,6 @@
 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">
-
       <div className="flex flex-col justify-center">
         <div className="flex flex-col gap-15">
           <span className="text-[32px] font-black">2</span>
@@ -19,8 +18,7 @@ function MainSlideCommunity() {
         </div>
         <span className="h-[250px]"></span>
       </div>
-
     </div>
   );
 }
-export default MainSlideCommunity
+export default MainSlideCommunity;

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

@@ -1,31 +1,24 @@
 import Keep from '@/shared/assets/icons/keep_36.svg';
-import Image from 'next/image'
+import Image from 'next/image';
 
 interface Props {
-  id:number
-  src: string
-  cocktailName:string
+  id: number;
+  src: string;
+  cocktailName: string;
 }
 
-function MainSlideDummyCard({ src,cocktailName}: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 w-full h-[100px]">
-        <Image
-          src={src}
-          fill
-          className="object-cover"
-          alt=""
-          sizes="100px"
-          priority
-        />
+        <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>
         <span className="text-gray-500 text-sm">+ 상세보기</span>
       </div>
-      <Keep className="absolute top-2 right-2" fill='transparent'/>
+      <Keep className="absolute top-2 right-2" fill="transparent" />
     </div>
   );
 }

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

@@ -1,17 +1,19 @@
-import background from '@/shared/assets/images/main_slide.webp'
-import Image from 'next/image'
+import background from '@/shared/assets/images/main_slide.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'/>
+      <Image src={background} alt="" fill className="-z-1" />
       <div 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>
+        <p className="text-2xl font-normal">
+          SSOUL의 재밌고 다양한 기능들로 더 친근하게 접해보세요
+        </p>
       </div>
     </div>
   );
 }
-export default MainSlideIntro
+export default MainSlideIntro;

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

@@ -1,55 +1,51 @@
-import MainTestDummy from "./MainTestDummy";
+import MainTestDummy from './MainTestDummy';
 
 const DUMMY_TEST = [
   {
     id: 1,
     message: '질문형 취향 찾기',
-    active:false
+    active: false,
   },
   {
     id: 2,
-    message:'단계별 취향 찾기',
-    active:true
-  }
-]
-
-
+    message: '단계별 취향 찾기',
+    active: true,
+  },
+];
 
 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 ">
-      
+      <div className="flex flex-col gap-15">
+        <span className="text-[32px] font-black text-secondary">1</span>
         <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">
-              <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>
-            <ul className="flex gap-8">
-              <MainTestDummy
-                message={
-                  <>
-                    안녕하세요! 🍹바텐더 쑤리에요.
-                    <br />
-                    취향에 맞는 칵테일을 추천해드릴게요. <br />
-                    어떤 유형으로 찾아드릴까요?
-                  </>
-                }
-                option={DUMMY_TEST}
-                type="option"
-              />
-              <MainTestDummy type="text" />
-            </ul>
+          <div 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>
+          <ul className="flex gap-8">
+            <MainTestDummy
+              message={
+                <>
+                  안녕하세요! 🍹바텐더 쑤리에요.
+                  <br />
+                  취향에 맞는 칵테일을 추천해드릴게요. <br />
+                  어떤 유형으로 찾아드릴까요?
+                </>
+              }
+              option={DUMMY_TEST}
+              type="option"
+            />
+            <MainTestDummy type="text" />
+          </ul>
         </div>
-    
+      </div>
     </div>
   );
 }
-export default MainSlideTest
+export default MainSlideTest;

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

@@ -1,20 +1,26 @@
-import Image, { StaticImageData } from 'next/image'
+import Image, { StaticImageData } from 'next/image';
 
-interface Props{
-  src: StaticImageData
-  abv:number
+interface Props {
+  src: StaticImageData;
+  abv: number;
 }
 function MainSsuryDrunk({ src, abv }: Props) {
-  const className = (abv:number) => {
+  const className = (abv: number) => {
     switch (abv) {
-      case 5: return 'text-stone-100'
-      case 11: return 'text-rose-100'
-      case 26: return 'text-rose-50'
-      case 46: return 'text-rose-200'
-      case 66 : return 'text-rose-300'
-      case 86 : return 'text-red-600'
+      case 5:
+        return 'text-stone-100';
+      case 11:
+        return 'text-rose-100';
+      case 26:
+        return 'text-rose-50';
+      case 46:
+        return 'text-rose-200';
+      case 66:
+        return 'text-rose-300';
+      case 86:
+        return 'text-red-600';
     }
-  }
+  };
   return (
     <div className="flex flex-col items-center gap-1">
       <p className={`text-lg sm:text-3xl font-bold ${className(abv)}`}>
@@ -29,4 +35,4 @@ function MainSsuryDrunk({ src, abv }: Props) {
     </div>
   );
 }
-export default MainSsuryDrunk
+export default MainSsuryDrunk;

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

@@ -3,15 +3,15 @@ import Ssury from '@/shared/assets/ssury/ssury_shaker.webp';
 import clsx from 'clsx';
 import MainSlideDummyCard from './MainSlideDummyCard';
 type Dummy = {
-  id: number,
-  message: string,
-  active:boolean
-}
+  id: number;
+  message: string;
+  active: boolean;
+};
 
-interface Props{
-  message?: React.ReactNode
-  option?: Dummy[]
-  type:'text'|'option'
+interface Props {
+  message?: React.ReactNode;
+  option?: Dummy[];
+  type: 'text' | 'option';
 }
 
 const DUMMY_CARD = [
@@ -32,7 +32,7 @@ const DUMMY_CARD = [
   },
 ];
 
-function MainTestDummy({ message, option, type}:Props) {
+function MainTestDummy({ message, option, type }: Props) {
   return (
     <li className="flex flex-col justify-end gap-2">
       <header className="flex items-end">

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

@@ -6,7 +6,6 @@ import Ssury5 from '@/shared/assets/ssury/ssury_level5.webp';
 import Ssury6 from '@/shared/assets/ssury/ssury_level6.webp';
 import MainSsuryDrunk from '../MainSsuryDrunk';
 
-
 function MobileAbv() {
   const SSURY_DRUNK = [
     {

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

@@ -1,10 +1,9 @@
-import Image from 'next/image'
+import Image from 'next/image';
 import background from '@/shared/assets/images/main_slide.webp';
 import MobileSlideTest from './MobileSlideTest';
 import MobileSlideCommunity from './MobileSlideCommunity';
 import MobileAbv from './MobileAbv';
 
-
 function MobileSlide() {
   return (
     <div>
@@ -15,12 +14,12 @@ function MobileSlide() {
       <p className="md:text-2xl font-normal">
         SSOUL의 재밌고 다양한 기능들로 더 친근하게 접해보세요
       </p>
-      <div className='flex flex-col gap-10 mt-8'>
+      <div className="flex flex-col gap-10 mt-8">
         <MobileSlideTest />
         <MobileSlideCommunity />
-        <MobileAbv/>
+        <MobileAbv />
       </div>
     </div>
   );
 }
-export default MobileSlide
+export default MobileSlide;