Feat: 로그인 화면 개발

1. 로그인 화면 퍼블리싱 2. 로그인 버튼 mock 이벤트 바인딩 3. 비밀번호를 잊으셨습니까 클릭시 비밀번호 찾기로 이동 Resolve: #11
DuckOriDuck · Apr 26, 2024 · 0569674 · 0569674
1 parent b71c77e
commit 0569674
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 34 deletions.
diff --git a/src/front/src/components/Layout/LabelSection.jsx 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>
+    );
+}
diff --git 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
@@ -16,12 +16,12 @@ const Main = () =>{
     },[isLogin]);
 
     const doLogin = () =>{
-            setLogin(true);
-        }
+        nevigate("/login");
+    }
 
     const goSignup = () =>{
-            nevigate("/signup");
-        }
+        nevigate("/signup");
+    }
 
     return (
         isLogin ?