[송현명] 회원가입 과제 제출

package.json

@@ -8,7 +8,10 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.1",
     "react-scripts": "5.0.1",
+    "styled-component": "^2.8.0",
+    "styled-components": "^6.1.8",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,24 +1,17 @@
-import logo from './logo.svg';
-import './App.css';
+import { Route, Routes } from "react-router-dom";
+import MainPage from "./pages/MainPage";
+import SignUpPage from "./pages/SignUpPage";
+import { Header } from "./components/header/Header";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <>
+      <Header />
+      <Routes>
+        <Route path="/" element={<MainPage />} />
+        <Route path="/signup" element={<SignUpPage />} />
+      </Routes>
+    </>
   );
 }
 

src/components/header/Header.element.jsx

@@ -0,0 +1,65 @@
+import styled from "styled-components";
+import palette from "../../styles/palette";
+
+export const HeaderBlock = styled.header`
+  border-bottom: 1px gray solid;
+
+  width: 100%;
+  height: 4.2rem;
+  line-height: 1rem;
+
+  display: flex;
+  justify-content: space-between;
+  padding: 1.6rem 1.2rem;
+`;
+export const Div = styled.div`
+  display: flex;
+  gap:1rem;
+`
+
+export const Logo = styled.span`
+  font-size: 1.5rem;
+  font-weight: 700;
+  padding: 0 1.2rem;
+`;
+
+export const Version = styled.span`
+  padding: 0 0.7rem;
+  height: 2rem;
+  line-height: 2rem;
+
+  position:relative;
+  bottom:0.5rem;
+  background-color: ${palette.backGray};
+  color: ${palette.fontGray};
+
+  border-radius: 1rem;
+`;
+
+export const SubTitle = styled.span`
+  padding: 0 0.7rem;
+  height: 2rem;
+  line-height: 2rem;
+
+  position:relative;
+  bottom:0.5rem;
+
+  color:${palette.fontBlue};
+  background-color:${palette.backBlue};
+
+  border-radius: 1rem;
+`;
+
+export const Button = styled.button`
+  color:white;
+  background-color: black;
+
+  padding: 0 1.5rem;
+  height: 2.5rem;
+  line-height: 2.5rem;
+
+  position:relative;
+  bottom: 0.8rem;
+
+  border-radius: 0.3rem;
+`

src/components/header/Header.jsx

@@ -0,0 +1,13 @@
+import { HeaderBlock, Version,Logo,SubTitle,Div,Button } from "./Header.element"
+import { Link } from "react-router-dom"
+
+export const Header = () => {
+    return <HeaderBlock>
+        <Div>
+            <Link to="/"><Logo>폼나는 싸패</Logo></Link>
+            <Version> v 3.4.1 24/02/13</Version>
+            <SubTitle>2024 SAFFE FORM PROJECT Create your own Form</SubTitle>
+        </Div>
+        <Button>바로 작성하기</Button>
+    </HeaderBlock>
+}

src/components/signupform/SignUpForm.element.jsx

@@ -0,0 +1,77 @@
+import styled,{css} from "styled-components";
+import palette from "../../styles/palette";
+import openEye from "../../assets/openeye.svg";
+import closeEye from "../../assets/closeeye.svg";
+
+export const SignUpFormBlock = styled.form`
+    height:100%;
+    width:30rem;
+
+    display:flex;
+    flex-direction:column;
+    align-items: center;
+    justify-content:center;
+    gap: 1.8rem;
+`
+
+export const InputGroup = styled.div`
+    display:flex;
+    flex-direction: column;
+    width:85%;
+
+    label{
+        padding-left:0.8rem;
+        margin-bottom: 0.5rem;
+
+        font-weight: 600;
+    }
+
+    input{
+        padding: 0.8rem 1rem;
+        line-height: 1.2rem;
+        position: relative;
+
+        border: solid 1px grey;
+        border-radius: 2rem;
+
+        background-image: ${closeEye};
+        &:focus{
+            outline:none;
+            border: solid 1px ${palette.skyblue};
+        }
+    }
+    img{
+        cursor: pointer;
+        width: 2rem;
+        height:2rem;
+        position:absolute;
+        margin-left: 22.5rem;
+        margin-top: 2.2rem;
+    }
+
+    span{
+        height: 0.5rem;
+        padding-left:0.8rem;
+        margin-top: 0.3rem;
+
+        color:red;
+    }
+`
+
+export const Button = styled.button`
+    width:85%;
+    height: 3 rem;
+    padding: 0.8rem 0.8rem;
+    margin-top: 3rem;
+
+    border-radius: 2rem;     
+    border:none;
+
+    background-color:${(props)=>props.active?palette.btnBlue:palette.backGray};
+    color:white;
+
+    font-weight:700;
+    font-size:1.4rem;
+
+    cursor:pointer;
+`

src/components/signupform/SignUpFrom.jsx

@@ -0,0 +1,125 @@
+import { useEffect, useState } from "react";
+import {SignUpFormBlock, InputGroup, Button } from "./SignUpForm.element"
+import { checkEmail,checkPassword } from "../../utils/validator";
+import { useNavigate } from "react-router-dom";
+import openEye from "../../assets/openeye.svg";
+import closeEye from "../../assets/closeeye.svg";
+
+export const SignUpForm = () => {
+    const navigator = useNavigate()
+    //이메일
+    const [email,setEmail] = useState("");
+    const [isEmailValid,setIsEmailValid] = useState(false);
+
+    const handleEmailChange = (e) => {
+      setEmail(e.target.value);
+    }
+    useEffect(()=>{
+        if(!checkEmail(email)){
+            setIsEmailValid(false);
+        }
+        if(checkEmail(email)||!email){
+            setIsEmailValid(true);
+        }
+    },[email])
+
+    //패스워드
+    const [password,setPassword] = useState("");
+    const [isPasswordValid,setIsPasswordValid] = useState(false);
+    const [isPasswordVisible,setIsPasswordVisible] = useState(false);
+
+    const handlePasswordChange = (e) => {
+      setPassword(e.target.value);
+    }
+    useEffect(()=>{
+        if(!checkPassword(password)){
+            setIsPasswordValid(false);
+        }
+        if(checkPassword(password)||!password){
+            setIsPasswordValid(true);
+        }
+    },[password])
+    const handlePasswordVisibleClick = () => {
+        setIsPasswordVisible(!isPasswordVisible);
+    }
+
+    //패스워드 확인
+    const [passwordConfirm,setPasswordConfirm] = useState("");
+    const [isPasswordConfirmValid,setIsPasswordConfirmValid] = useState(false);
+    const [isPasswordConfirmVisible,setIsPasswordConfirmVisible] = useState(false);
+    const handlePasswordConfirmChange = (e) => {
+        setPasswordConfirm(e.target.value);
+    }
+    useEffect(()=>{
+        if(password!==passwordConfirm){
+            setIsPasswordConfirmValid(false);
+        }
+        if(password===passwordConfirm||!passwordConfirm){
+            setIsPasswordConfirmValid(true);
+        }
+    },[password,passwordConfirm]); 
+    const handlePasswordConfirmVisibleClick = () => {
+        setIsPasswordConfirmVisible(!isPasswordConfirmVisible);
+    }
+
+
+    const [isActive,setIsActive] = useState(false);
+
+    useEffect(()=>{
+        if(isEmailValid&&isPasswordValid&&isPasswordConfirmValid){
+            setIsActive(true);
+        } 
+        if(!isEmailValid||!isPasswordValid||!isPasswordConfirmValid){
+            setIsActive(false);
+        } 
+        if(!email||!password||!passwordConfirm){
+            setIsActive(false);
+        }      
+    },[isEmailValid,isPasswordValid,isPasswordConfirmValid])
+
+    const handleBtnClick=(e)=>{
+        e.preventDefault();
+        if(isActive){
+            alert("회원가입을 축하합니다.");
+            navigator('/');
+        }
+        if(!isActive){
+            alert("아직 입력하지 않은 정보가 있어요.");
+        }
+    }
+
+    return <SignUpFormBlock>
+        <InputGroup>
+            <label htmlFor="email">이메일</label>
+            <input 
+                name="email"
+                placeholder="ssafe11@gmail.com"
+                onChange={handleEmailChange}
+            />
+            <span>{!isEmailValid&&"유효하지 않은 이메일 형식입니다."}</span>
+        </InputGroup>
+        <InputGroup>
+            <label htmlFor="password">비밀번호</label>
+            <input 
+                name="password"
+                placeholder="비밀번호를 입력하세요."
+                type = {isPasswordVisible?"text":"password"}
+                onChange={handlePasswordChange}
+            />
+            <img src={isPasswordVisible?openEye:closeEye} onClick={handlePasswordVisibleClick} alt=""/>
+            <span>{!isPasswordValid&&"유효하지 않은 비밀번호 형식입니다."}</span>
+        </InputGroup>
+        <InputGroup>
+            <label htmlFor="passwordConfirm">비밀번호 확인</label>
+            <input 
+                name="passwordConfirm"
+                placeholder="비밀번호를 다시 입력해주세요."
+                type = {isPasswordConfirmVisible?"text":"password"}
+                onChange={handlePasswordConfirmChange}
+            />
+            <img src={isPasswordConfirmVisible?openEye:closeEye} onClick={handlePasswordConfirmVisibleClick} alt=""/>
+            <span>{!isPasswordConfirmValid&&"비밀번호가 일치하지 않습니다."}</span>
+        </InputGroup>
+        <Button active={isActive} onClick={handleBtnClick}>회원가입</Button>
+    </SignUpFormBlock>
+}