[design] 웰컴모달 ui 구현

Author: ahk0413

src/app/login/SocialLogin.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import Naver from '@/shared/assets/icons/naver.svg';
+import Kakao from '@/shared/assets/icons/kakao.svg';
+import Google from '@/shared/assets/icons/google.svg';
+import tw from '@/shared/utills/tw';
+import Welcome from './Welcome';
+import { useState } from 'react';
+
+function SocialLogin() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const socialButtons = [
+    {
+      id: 'naver',
+      label: 'Naver 로그인',
+      icon: <Naver />,
+      style: 'bg-[#00C73C]',
+    },
+    {
+      id: 'kakao',
+      label: 'Kakao 로그인',
+      icon: <Kakao />,
+      style: 'bg-[#FEE500] text-primary',
+    },
+    {
+      id: 'google',
+      label: 'Google 로그인',
+      icon: <Google />,
+      style: 'bg-[#EBEBEB] text-primary',
+    },
+  ];
+
+  // TODO: 백엔드 연동 로직 구현 필요
+  const handleLogin = (id: string) => {
+    console.log(id);
+    setIsModalOpen(true);
+  };
+
+  return (
+    <>
+      <div className="flex flex-col gap-5 mt-12 px-3 w-full max-w-[23.75rem]">
+        {socialButtons.map(({ id, label, icon, style }) => (
+          <button
+            key={id}
+            type="button"
+            onClick={() => handleLogin(id)}
+            className={tw('flex-center gap-2 px-5 py-1 w-full rounded-lg', style)}
+          >
+            {icon}
+            <span className="text-xl">{label}</span>
+          </button>
+        ))}
+      </div>
+
+      {/* 웰컴 모달 (임시) */}
+      <Welcome open={isModalOpen} onClose={() => setIsModalOpen(false)} />
+    </>
+  );
+}
+export default SocialLogin;

src/app/login/SocialLoginButtons.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import Image from 'next/image';
+
+import Button from '@/shared/components/button/Button';
+import ModalLayout from '@/shared/components/modalPop/ModalLayout';
+import Ssury from '@/shared/assets/ssury/ssury_jump.webp';
+import { useRouter } from 'next/navigation';
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+function Welcome({ open, onClose }: Props) {
+  const router = useRouter();
+
+  return (
+    <ModalLayout
+      open={open}
+      onClose={onClose}
+      title="환영합니다!"
+      description="바텐더 쑤리가 안내해드릴게요"
+      buttons={
+        <>
+          <Button
+            type="button"
+            color="purple"
+            onClick={() => {
+              onClose();
+              router.push('/recipe');
+            }}
+          >
+            칵테일 레시피 보러가기
+          </Button>
+          <Button
+            type="button"
+            onClick={() => {
+              onClose();
+              router.push('/recommend');
+            }}
+          >
+            칵테일 취향 추천받기
+          </Button>
+        </>
+      }
+    >
+      <div className="flex-center">
+        <div className="relative w-32 h-32" aria-hidden>
+          <Image src={Ssury} alt="" fill className="object-contain" />
+        </div>
+      </div>
+    </ModalLayout>
+  );
+}
+export default Welcome;

src/app/login/Welcome.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import type { Metadata } from 'next';
-import SocialLoginButtons from './SocialLoginButtons';
 import loginBg from '@/shared/assets/images/login_bg.webp';
+import SocialLogin from './SocialLogin';
 
 export const metadata: Metadata = {
   title: 'SSOUL | 로그인',
@@ -17,11 +17,13 @@ function Page() {
       >
         <Image src={loginBg} alt="" fill className="object-cover md:object-contain object-bottom" />
       </div>
+
       <div className="flex flex-col gap-3 text-center">
         <h1 className="text-4xl font-bold">로그인</h1>
         <p>3초 로그인으로 SSOUL을 가볍게 즐겨보세요🍸</p>
       </div>
-      <SocialLoginButtons />
+
+      <SocialLogin />
     </div>
   );
 }

src/app/login/page.tsx

@@ -75,7 +75,12 @@ function ModalLayout({
           {children && <div className="mt-5 py-2 text-white">{children}</div>}
 
           {buttons && (
-            <div className={tw('flex justify-center gap-2 pt-8', size === 'sm' && 'pt-5')}>
+            <div
+              className={tw(
+                'flex flex-col md:flex-row justify-center gap-2 pt-8',
+                size === 'sm' && 'pt-5'
+              )}
+            >
               {buttons}
             </div>
           )}