♻️ refactor : Modify the login modal exit method and login component CSS

- Improved the way the login modal exits, removed unnecessary buttons from the login component, and modified the CSS to improve the user experience.
- Deleting interface files that have become obsolete due to a change in exit method

Related issue: YJU-OKURA#66

src/app/intro/components/login/Login.tsx

@@ -1,56 +1,58 @@
 import Image from 'next/image';
-import {ModalProps} from '@/src/interfaces/intro';
 import svgs from '@/public/svgs/login';
 
-const Login = ({onClose}: ModalProps) => {
+const Login = () => {
   return (
     <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
-      <div className=" bg-white rounded-lg w-1/2 h-3/5 py-10 box-border">
-        <div className="w-full h-full flex items-center box-border">
+      <div
+        className=" bg-white rounded-lg w-1/2 h-4/6 py-10 box-border"
+        id="modal-container"
+      >
+        <div className="w-full h-full flex items-center box-border py-8">
           {/* LEFT */}
-          <div className="w-3/5 text-center">
-            <div className="text-3xl font-semibold">Welcome to Minori</div>
-            <div className="text-sm text-neutral-400 my-2">
-              Get started - it free. No credit card needed.
+          <div className="w-3/5 h-full text-center flex flex-col justify-between ">
+            <div>
+              <div className="text-4xl font-semibold pt-4">
+                Welcome to Minori
+              </div>
+              <div className="text-sm text-neutral-400 my-2">
+                Get started - it free. No credit card needed.
+              </div>
             </div>
             <Image
               src={svgs.login}
               alt="logo"
               width={450}
               height={450}
-              className="m-auto mb-0"
+              className="w-full"
             />
           </div>
           {/* RIGHT */}
-          <div className="w-2/5">
-            <div className="w-4/5 text-sm">
-              <Image
-                src={svgs.logo}
-                alt="logo"
-                width={250}
-                height={250}
-                className="m-auto w-4/5 "
-              />
+          <div className="w-2/5 h-full flex justify-center">
+            <div className="w-4/5 text-sm h-full flex flex-col justify-between">
+              <div className="flex justify-center">
+                <Image
+                  src={svgs.logo}
+                  alt="logo"
+                  width={250}
+                  height={250}
+                  className="w-full "
+                />
+              </div>
               <div className="my-5">
-                <button className="block m-auto border-2 w-full flex items-center justify-between px-10 py-2 m-auto my-3">
+                <button className="block border-2 w-full flex items-center justify-between px-6 py-2 m-auto my-3 rounded-lg">
                   <Image
                     src={svgs.google}
                     alt="google"
-                    width={15}
-                    height={15}
+                    width={25}
+                    height={25}
                   />
                   <div className="ml-2 text-center w-full">
                     Continue with Google
                   </div>
                 </button>
-                <button className="block m-auto border-2 w-full flex items-center justify-between px-10 py-2 m-auto my-3">
-                  <Image src={svgs.yahoo} alt="google" width={15} height={15} />
-                  <div className="ml-2 text-center w-full">
-                    Continue with Yahoo
-                  </div>
-                </button>
-                <button className="block m-auto border-2 w-full flex items-center justify-between px-10 py-2 m-auto my-3">
-                  <Image src={svgs.line} alt="google" width={15} height={15} />
+                <button className="block border-2 w-full flex items-center justify-between px-6 py-2 m-auto my-3 rounded-lg">
+                  <Image src={svgs.line} alt="google" width={25} height={25} />
                   <div className="ml-2 text-center w-full">
                     Continue with Line
                   </div>
@@ -60,12 +62,6 @@ const Login = ({onClose}: ModalProps) => {
             </div>
           </div>
         </div>
-        <button
-          onClick={onClose}
-          className="px-4 py-2 bg-blue-500 text-white rounded"
-        >
-          닫기
-        </button>
       </div>
     </div>
   );

src/app/intro/page.tsx

@@ -1,5 +1,5 @@
 'use client';
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 import Image from 'next/image';
 import {Login} from './components/login';
 import intro from '@/public/svgs/intro';
@@ -14,6 +14,20 @@ const Page = () => {
   const onClose = () => {
     setIsOpen(false);
   };
+
+  const handleOutsideClick = (event: MouseEvent) => {
+    const modalContainer = document.getElementById('modal-container');
+    if (modalContainer && !modalContainer.contains(event.target as Node)) {
+      onClose();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleOutsideClick);
+    return () => {
+      document.removeEventListener('mousedown', handleOutsideClick);
+    };
+  }, []);
   return (
     <main className="flex min-h-screen flex-col items-center p-24">
       <div className="text-5xl font-semibold text-center">
@@ -31,7 +45,7 @@ const Page = () => {
       >
         Get Start
       </button>
-      {isOpen && <Login onClose={onClose} />}
+      {isOpen && <Login />}
     </main>
   );
 };