From 068c9dc292baf1dace03c4b735c4e8aee1e3999d Mon Sep 17 00:00:00 2001 From: seoyeon-jung Date: Thu, 12 Oct 2023 15:39:27 +0900 Subject: [PATCH 1/4] =?UTF-8?q?design:=20loginform=20=EB=A7=8C=EB=93=A4?= =?UTF-8?q?=EA=B8=B0=20#6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/login/LoginForm.jsx | 17 ++++++++++++++++ src/pages/Login.jsx | 31 ++++++++++++++++++++++-------- 2 files changed, 40 insertions(+), 8 deletions(-) create mode 100644 src/components/login/LoginForm.jsx diff --git a/src/components/login/LoginForm.jsx b/src/components/login/LoginForm.jsx new file mode 100644 index 0000000..598fb08 --- /dev/null +++ b/src/components/login/LoginForm.jsx @@ -0,0 +1,17 @@ +export default function LoginForm() { + return ( +
+
+
아이디
+ +
+ +
+
비밀번호
+ +
+ + +
+ ); +} diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx index ce4454f..8bb8ee0 100644 --- a/src/pages/Login.jsx +++ b/src/pages/Login.jsx @@ -1,9 +1,24 @@ +import styled from "styled-components"; +import LoginForm from "../components/login/LoginForm"; + const Login = () => { - return ( -
- Login 페이지입니다 -
- ) -} - -export default Login; \ No newline at end of file + return ( + + 로그인 + + + ); +}; + +export default Login; + +const Wrapper = styled.div` + max-width: 900px; + margin: 0 auto; +`; + +const Title = styled.div` + color: #5263ff; + font-size: 40px; + font-weight: 600; +`; From 1a077c0e436d37c571faa339ae8492e716749a29 Mon Sep 17 00:00:00 2001 From: seoyeon-jung Date: Thu, 12 Oct 2023 15:56:00 +0900 Subject: [PATCH 2/4] =?UTF-8?q?chore:=20circle=20check=20icon=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20#6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 로그인 상태 유지하기에 필요한 아이콘을 추가했습니다 --- src/assets/circle check_.png | Bin 0 -> 771 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/assets/circle check_.png diff --git a/src/assets/circle check_.png b/src/assets/circle check_.png new file mode 100644 index 0000000000000000000000000000000000000000..51445b6edc4a9b424e7482c0517df90845f63762 GIT binary patch literal 771 zcmV+e1N{7nP)leK~#7F#aDrK z8ZivjWr5xX^#%nND4n2mf?g*moq)>(B@={B5HdlX1%PbeZomfgi<3B`+?^fBd(nHs zHn#O8S(1H3??grJ!p&y$xhRSmx>K+Nm(lbN9KdVv<9IyYr{pDpx7+PcG_?U5qQD9q z4u|DrGWkcZ1qPr)^8g;nUu?w+{0#OoCQ*pjeg)5@uL{(#{!cbAK)<6|iqO6E?{Zuy zd+SI62ER=LV8IG*l|ORr7JA{L06CgpF`fA&fS=`e+ATE z3(6!`)-tS-86RH&%h@<^VE57+k$`(}iFB-A0LPkLa;8HBLu%<(YV{GAivx+Zec_)= zkoC#_2Sc8yv6^6YbpqCbPF_klt_R54NoH75gJvgSYKz30E(cwxP`Gy2u|#E$u(niS zC+$UN8%pqo%Sk)p4$N(5cMcP=eSkd~RTG!MWhz ze|6!yt2FiipBE6E&4->10qkOMR*0H{<77Uk;FK0P@DBu!>`FPCFCF0b)E1m+>H-l( zoeXyh?4_M{ZGzBXz&UC)f@e7e2kSJyxmN5I_(|HTZ=(TMmvIC?QwG^up}-s#^czQO(*jm;*29jYw|2iu>`c zcLEj*bz&|axQc9XiG%Pgj{*Kj(e-!@I9tl8NA1I+|LGHLik~dUJk7nMC0~D2>pc(t zW@BdPd28R(EMNsCyj6n1I8WulUqySC0Q}V@zes5Bs0p;nOtJPM0&r&DgKq)qsfV&Y zVMGD;z?9m%+ftzR6UI}5vcH`oB}xN+wEneu{~xa#H*G>ojSm0-002ovPDHLkV1hNH BRGR<* literal 0 HcmV?d00001 From 3e342980f1465bcca1110648662f80dc23a2054e Mon Sep 17 00:00:00 2001 From: seoyeon-jung Date: Thu, 12 Oct 2023 16:34:48 +0900 Subject: [PATCH 3/4] =?UTF-8?q?design:=20LoginForm=20UI=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=20#6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 아이디 input - 비밀번호 input - 로그인 유지하기 (클릭 시 style 변경) - 로그인 버튼 --- src/components/login/LoginForm.jsx | 112 ++++++++++++++++++++++++++--- src/pages/Login.jsx | 1 + 2 files changed, 104 insertions(+), 9 deletions(-) diff --git a/src/components/login/LoginForm.jsx b/src/components/login/LoginForm.jsx index 598fb08..e8be901 100644 --- a/src/components/login/LoginForm.jsx +++ b/src/components/login/LoginForm.jsx @@ -1,17 +1,111 @@ +import styled from "styled-components"; +import CheckIcon from "../../assets/circle check_.png"; +import { useState } from "react"; + export default function LoginForm() { + const [isChecked, setIsChecked] = useState(false); // 로그인 유지하기 버튼 클릭 상태관리 + + // 로그인 유지하기 기능 구현 필요 + const handleCheckClick = () => { + setIsChecked(!isChecked); + }; + return (
-
-
아이디
- -
+ + + + + + + + + -
-
비밀번호
- -
+ + + check + 로그인 상태 유지하기 + + - + 로그인
); } + +const Label = styled.div` + font-size: 16px; + font-weight: 600; + margin-bottom: 20px; + + span { + color: #ff0000; + } +`; + +const IDContaner = styled.div` + margin-bottom: 75px; +`; + +const Input = styled.input` + width: 866px; + height: 42px; + background-color: #3f424e; + border: none; + border-radius: 6px; + color: #ffffff; + padding: 5px; + + &::placeholder { + color: #ffffff; + font-size: 14px; + font-weight: 400; + padding: 5px; + } +`; + +const PWContainer = styled.div` + margin-bottom: 40px; +`; + +const LoginBtn = styled.button` + width: 877px; + height: 47px; + background-color: #5263ff; + color: #ffffff; + font-size: 15px; + font-weight: 600; + border: none; + border-radius: 6px; + margin-top: 30px; + align-items: center; +`; + +const CheckContainer = styled.button` + font-size: 15px; + font-weight: 400; + margin-top: 30px; + margin-bottom: 30px; + background-color: transparent; + border: none; + color: ${(props) => (props.isChecked ? "#5263ff" : "inherit")}; +`; + +const Img = styled.img` + margin-right: 10px; + filter: ${(props) => (props.isChecked ? "invert(100%)" : "inherit")}; +`; + +const CheckLabel = styled.label` + display: flex; + align-items: center; + color: ${(props) => (props.isChecked ? "#5263ff" : "inherit")}; +`; diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx index 8bb8ee0..a016c44 100644 --- a/src/pages/Login.jsx +++ b/src/pages/Login.jsx @@ -21,4 +21,5 @@ const Title = styled.div` color: #5263ff; font-size: 40px; font-weight: 600; + margin-bottom: 30px; `; From ed3169e5c5917768fba056f0067de11e49ffe94b Mon Sep 17 00:00:00 2001 From: seoyeon-jung Date: Thu, 12 Oct 2023 16:38:48 +0900 Subject: [PATCH 4/4] =?UTF-8?q?design:=20error=20message=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20#6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 아이디, 비밀번호가 다를 시 나오는 error message를 추가했습니다 --- src/components/login/LoginForm.jsx | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/components/login/LoginForm.jsx b/src/components/login/LoginForm.jsx index e8be901..7022fa1 100644 --- a/src/components/login/LoginForm.jsx +++ b/src/components/login/LoginForm.jsx @@ -4,12 +4,19 @@ import { useState } from "react"; export default function LoginForm() { const [isChecked, setIsChecked] = useState(false); // 로그인 유지하기 버튼 클릭 상태관리 + const [isError, setIsError] = useState(false); // 에러 상태 관리 // 로그인 유지하기 기능 구현 필요 const handleCheckClick = () => { setIsChecked(!isChecked); }; + // 로그인 버튼 클릭 시 기능 구현 예정 + const handleLoginClick = () => { + // 아이디, 비밀번호 일치하지 않을 떄 error message 구현 + setIsError(true); + }; + return (
@@ -36,7 +43,14 @@ export default function LoginForm() { - 로그인 + {isError && ( + + 아이디(이메일) 또는 비밀번호를 잘못 입력했습니다. 입력하신 내용을 다시 + 확인해주세요. + + )} + + 로그인
); } @@ -89,11 +103,18 @@ const LoginBtn = styled.button` align-items: center; `; +const ErrorMessage = styled.div` + color: #ff0000; + font-size: 15px; + font-weight: 400; + margin-bottom: 20px; +`; + const CheckContainer = styled.button` font-size: 15px; font-weight: 400; margin-top: 30px; - margin-bottom: 30px; + margin-bottom: 20px; background-color: transparent; border: none; color: ${(props) => (props.isChecked ? "#5263ff" : "inherit")};