From 05696749a1ab5f462dda8a2d11218609f8073b5a Mon Sep 17 00:00:00 2001
From: lth01 <dlxogml11235@naver.com>
Date: Fri, 26 Apr 2024 15:39:58 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=20=EA=B0=9C=EB=B0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 로그인 화면 퍼블리싱
2. 로그인 버튼 mock 이벤트 바인딩
3. 비밀번호를 잊으셨습니까 클릭시 비밀번호 찾기로 이동

Resolve: #11
---
 .../src/components/Layout/LabelSection.jsx    | 19 +++++++
 src/front/src/routes/Login.jsx                | 49 +++++++------------
 src/front/src/routes/Main.jsx                 |  8 +--
 3 files changed, 42 insertions(+), 34 deletions(-)
 create mode 100644 src/front/src/components/Layout/LabelSection.jsx

diff --git a/src/front/src/components/Layout/LabelSection.jsx b/src/front/src/components/Layout/LabelSection.jsx
new file mode 100644
index 0000000..a5b85bc
--- /dev/null
+++ b/src/front/src/components/Layout/LabelSection.jsx
@@ -0,0 +1,19 @@
+export default function LabelSection({className, id, label, isRequire = false, asChild = false, children, ...props}){
+    const wrapperClassName = `flex flex-col gap-2 items-center w-full ${className}`;
+    return (
+        <div
+        className={wrapperClassName}>
+            <div className="flex justify-start items-center w-full gap-x-1">
+                <span className="font-medium">
+                    {label}
+                </span>
+                {
+                    isRequire ?
+                    <span className="text-rose-600">*</span>
+                    : <></>
+                }
+            </div>
+            {asChild ? children : <></>}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/front/src/routes/Login.jsx b/src/front/src/routes/Login.jsx
index 7d273a9..56ba049 100644
--- a/src/front/src/routes/Login.jsx
+++ b/src/front/src/routes/Login.jsx
@@ -1,7 +1,10 @@
-import { Button } from "@/components/ui/button";
 import { useContext } from "react";
 import { useNavigate } from "react-router-dom";
 import { GlobalContext } from "..";
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import LabelSection from "@/components/Layout/LabelSection";
 
 const Login = () =>{
     //라우팅 네비게이터
@@ -14,37 +17,23 @@ const Login = () =>{
         setLogin(true);
         nevigate("/");
     }
-
-    const goSignup = () =>{
-        nevigate("/signup")
-    }
+    
 
     return (
-        <main className="flex h-screen">
-            <section className=" flex-grow-[6] bg-[#6866EB] px-16 py-24 text-white ">
-                <h1 className="text-6xl font-bold">About Us</h1>
-                <p className="mt-48 text-4xl font-bold grid gap-4">
-                    <h2>1</h2>
-                    <h2>2</h2>
-                    <h2>3</h2>
-                    <h2>4</h2>
-                </p>
-            </section>
-            <section className="flex-grow-[4] login flex flex-col items-center justify-center">
-                <div className="w-full text-4xl font-bold text-white">
-                    <h2 className="text-center text-black">Get Started</h2>
-                    <div className="flex justify-center gap-4 mt-4">
-                        <Button className="bg-[#6866EB] w-48 hover:bg-violet-600">
-                            <div onClick={doLogin}>
-                                Login
-                            </div>
-                        </Button>
-                        <Button className="bg-[#6866EB] w-48 hover:bg-violet-600">
-                            <div onClick={goSignup}>
-                                Signup
-                            </div>
-                        </Button>
-                    </div>
+        <main id="login-wrap" className="flex flex-col min-h-screen items-center">
+            <section className="w-500 py-20 px-10 mt-60 bg-white border">
+                <LabelSection asChild label="Email">
+                    <Input id="tBox_email" type="email" placeholder="Email Address"></Input>
+                </LabelSection>
+                <LabelSection asChild label="Password" className="mt-4">
+                    <Input id="tBox_pwd" type="password" placeholder="password"></Input>
+                </LabelSection>
+                {/* 버튼은 onClick 콜백 동작 불가 */}
+                <Button asChild className="bg-[#6866EB] mt-4 w-full hover:bg-violet-600">
+                    <div onClick={doLogin}>로그인</div>
+                </Button>
+                <div className="flex justify-center mt-4">
+                    <Link to="/findPassword" className="text-black/65">비밀번호를 잊으셨나요?</Link>
                 </div>
             </section>
         </main>
diff --git a/src/front/src/routes/Main.jsx b/src/front/src/routes/Main.jsx
index 30395b1..3d5e0f8 100644
--- a/src/front/src/routes/Main.jsx
+++ b/src/front/src/routes/Main.jsx
@@ -16,12 +16,12 @@ const Main = () =>{
     },[isLogin]);
 
     const doLogin = () =>{
-            setLogin(true);
-        }
+        nevigate("/login");
+    }
 
     const goSignup = () =>{
-            nevigate("/signup");
-        }
+        nevigate("/signup");
+    }
 
     return (
         isLogin ?