From 38862e5857b3eb437bc2aaecdfbb12bd45c30588 Mon Sep 17 00:00:00 2001 From: shinwokkang <120699742+shinwokkang@users.noreply.github.com> Date: Wed, 22 Jan 2025 18:16:03 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 5 +- src/components/login/Button.tsx | 26 +++++++++++ src/components/login/Input.tsx | 73 ++++++++++++++++++++++++++++++ src/components/login/InputItem.tsx | 43 ++++++++++++++++++ src/components/pages/LoginPage.tsx | 68 ++++++++++++++++++++++++++++ 5 files changed, 213 insertions(+), 2 deletions(-) create mode 100644 src/components/login/Button.tsx create mode 100644 src/components/login/Input.tsx create mode 100644 src/components/login/InputItem.tsx create mode 100644 src/components/pages/LoginPage.tsx diff --git a/src/App.tsx b/src/App.tsx index 7e1d97e..494fe01 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,6 +2,7 @@ import { BrowserRouter, Route, Routes } from "react-router-dom"; import HomePage from "./components/pages/Homepage.tsx"; import NavBar from "./components/nav/NavBar.tsx"; import GlobalStyle from "./components/style/GlobalStyle.tsx"; +import LoginPage from "./components/pages/LoginPage.tsx"; function App() { return ( @@ -10,8 +11,8 @@ function App() { - } /> - + } /> + } /> diff --git a/src/components/login/Button.tsx b/src/components/login/Button.tsx new file mode 100644 index 0000000..7862b3e --- /dev/null +++ b/src/components/login/Button.tsx @@ -0,0 +1,26 @@ +/** @jsxImportSource @emotion/react */ +import styled from "@emotion/styled"; +import { useNavigate } from "react-router-dom"; // navigate 훅 사용 + +const ButtonStyle = styled.button` + cursor: pointer; + color: white; + background-color: rgb(0, 0, 128); + font-weight: bold; + font-size: large; + border: none; + border-radius: 10px; + height: 50px; + width: 100%; + margin-top: 30px; +`; + +const Button = () => { + const navigate = useNavigate(); + const handleContinueLogin = () => { + navigate("/home"); // 로그인 후 이동할 경로 + }; + return 로그인; +}; + +export default Button; diff --git a/src/components/login/Input.tsx b/src/components/login/Input.tsx new file mode 100644 index 0000000..c566c8c --- /dev/null +++ b/src/components/login/Input.tsx @@ -0,0 +1,73 @@ +// src/components/login/Input.tsx +/** @jsxImportSource @emotion/react */ +import styled from "@emotion/styled"; +import InputItem from "./InputItem"; +import { useState } from "react"; + +interface InputProps { + id: string; + setId: React.Dispatch>; + pw: string; + setPw: React.Dispatch>; + handlePw?: (e: React.ChangeEvent) => void; +} + +const InputStyle = styled.div` + display: flex; + flex-direction: column; +`; + +const InputWrapStyle = styled.div` + display: flex; + flex-direction: column; + gap: 20px; +`; + +const ErrorMessageStyle = styled.div` + color: #ef0000; + font-size: 12px; +`; + +const Input = ({ id, setId, pw, setPw }: InputProps) => { + const [pwValid, setPwValid] = useState(false); + + const handlePw = (e: React.ChangeEvent) => { + setPw(e.target.value); + const regex = + /^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/; + if (regex.test(pw)) { + setPwValid(true); + } else { + setPwValid(false); + } + }; + + return ( + + + { + setId(e.target.value); + }} + /> + + + + + {!pwValid && pw.length > 0 && ( +
영문, 숫자, 특수문자 포함 8자 이상 입력해주세요.
+ )} + + + ); +}; + +export default Input; diff --git a/src/components/login/InputItem.tsx b/src/components/login/InputItem.tsx new file mode 100644 index 0000000..db1df74 --- /dev/null +++ b/src/components/login/InputItem.tsx @@ -0,0 +1,43 @@ +// src/components/login/InputItem.tsx +/** @jsxImportSource @emotion/react */ +import styled from "@emotion/styled"; + +interface InputItemProps { + content: string; + type: string; + value: string; + onChange: (e: React.ChangeEvent) => void; +} + +const InputStyle = styled.input` + border-radius: 5px; + width: 100%; + height: 40px; + background-color: #e3e3e3; + border: none; + outline: none; + font-size: 15px; + font-weight: 400; +`; + +const InputItemStyle = styled.div` + display: flex; + border-radius: 8px; + background-color: #e3e3e3; + padding: 5px; +`; + +const InputItem = ({ content, type, value, onChange }: InputItemProps) => { + return ( + + + + ); +}; + +export default InputItem; diff --git a/src/components/pages/LoginPage.tsx b/src/components/pages/LoginPage.tsx new file mode 100644 index 0000000..95165b1 --- /dev/null +++ b/src/components/pages/LoginPage.tsx @@ -0,0 +1,68 @@ +// src/components/login/Main.tsx +/** @jsxImportSource @emotion/react */ +import styled from "@emotion/styled"; +import { useState } from "react"; +import Input from "../login/Input"; +import Button from "../login/Button"; + +const WrapperStyle = styled.div` + display: flex; + flex-direction: column; + gap: 10px; + justify-content: center; + width: 100%; +`; +const MainContainerStyle = styled.div` + display: flex; + flex-direction: column; + gap: 20px; + width: 25%; + height: 60%; + justify-content: center; + align-items: center; + + /* 페이지 전체 화면에서 중앙 정렬 */ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + h1 { + font-size: 40px; + } + + p { + cursor: pointer; + justify-content: center; + width: auto; + } +`; +const LoginPage = () => { + const [id, setId] = useState(""); + const [pw, setPw] = useState(""); + // const handlePw = (e: React.ChangeEvent) => { + // setPw(e.target.value); + // }; + console.log("로그인 페이지 렌더링"); + return ( + <> + +

로그인

+ + +