과제9

20_한상아/session08/components/inputs/Input.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+const Input = ({ label, type, value, onChange, disabled }) => {
+    return (
+        <div>
+            <label>{label}</label>
+            <input
+                type={type}
+                value={value}
+                onChange={onChange}
+                disabled={disabled}
+            />
+        </div>
+    );
+};
+
+export default Input;
+
+// import Input from '../inputs/Input';
+// <Input
+//     id="email"
+//     label="Email"
+//     disabled={isLoading}
+//     register={register}
+//     errors={errors}
+//     required
+// />

20_한상아/session08/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+//import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+import Login from './session08/login';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <Login />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

20_한상아/session08/login.jsx

@@ -0,0 +1,98 @@
+import React, { useState } from "react";
+import Input from "./components/inputs/Input";
+import styled from "styled-components";
+
+const StyledDiv = styled.div`
+    display: flex;
+    justify-content: center;
+`;
+
+const MyH1 = styled.h1`
+  color: green;
+  text-align: center;
+  font-size: 40px;
+  padding: 0px;
+`;
+
+const MyLabel = styled.label`
+  margin-right: 20px;
+  margin-top: 10px;
+  height: auto;
+`;
+
+const InputDiv = styled.div`
+  width: flex;
+`;
+
+const StyledForm = styled.form`
+    display: flex;
+    width: flex;
+    flex-direction: column;
+    padding: 10px 20px;
+    border: 1px solid #ccc;
+    font-size: 20px;
+`;
+
+const StyledButton = styled.button`
+    background-color: gray;
+    color: white;
+    padding: 10px 15px;
+    border: 1px solid #ccc;
+
+`;
+
+function Login() {
+    const [id, setId] = useState("");
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+
+    const submitHandler = (event) => {
+        event.preventDefault();
+        setId("");
+        setEmail("");
+        setPassword("");
+    };
+
+    const changeId = (event) => {
+        setId(event.target.value)
+    }
+    const changeEmail = (event) => {
+        setEmail(event.target.value)
+    }
+    const changePassword = (event) => {
+        setPassword(event.target.value)
+    }
+
+    return (
+        <StyledDiv>
+            <StyledForm onSubmit={submitHandler}>
+                <h1>Login</h1>
+                <label className="id">ID</label>
+                <Input
+                    type="text"
+                    value={id}
+                    onChange={changeId}
+                    disabled />
+
+
+                <label className="email">Email</label>
+                <Input
+                    type="email"
+                    value={email}
+                    onChange={changeEmail} />
+
+
+                <label className="pw">Password</label>
+                <Input
+                    type="password"
+                    value={password}
+                    onChange={changePassword} />
+
+                <br></br>
+                <StyledButton type="submit">button</StyledButton>
+            </StyledForm>
+        </StyledDiv>
+    );
+}
+
+export default Login;

20_한상아/session09/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+//import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+import Login from './session09/login';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <Login />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

20_한상아/session09/login.jsx

@@ -0,0 +1,106 @@
+import React, { useState, useEffect } from "react";
+import Input from "../session08/components/inputs/Input";
+import useInput from "./useInput";
+import styled from "styled-components";
+
+const StyledDiv = styled.div`
+    display: flex;
+    justify-content: center;
+`;
+
+const MyH1 = styled.h1`
+  color: green;
+  text-align: center;
+  font-size: 40px;
+  padding: 0px;
+`;
+
+const MyLabel = styled.label`
+  margin-right: 20px;
+  margin-top: 10px;
+  height: auto;
+  margin-left: 35px;
+`;
+
+const InputDiv = styled.div`
+  width: 200px;
+  margin-left: 35px;
+`;
+
+const StyledForm = styled.form`
+    display: flex;
+    width: flex;
+    flex-direction: column;
+    padding: 10px 20px;
+    border: 1px solid #ccc;
+    font-size: 20px;
+    margin-top: 200px;
+`;
+
+const StyledButton = styled.button`
+    background-color: gray;
+    color: white;
+    padding: 10px 15px;
+    border: 1px solid #ccc;
+
+`;
+
+function Login() {
+
+    const [username, onChangeUsername, resetusername] = useInput("");
+    const [password, onChangePw, resetpassword] = useInput("");
+    const [email, onChangeEmail, resetemail] = useInput("");
+
+    const submitHandler = (event) => {
+        event.preventDefault();
+        console.log("아이디:", username);
+        console.log("비밀번호:", password);
+        console.log("이메일:", email);
+        console.log("=======================");
+        resetemail();
+        resetpassword();
+        resetusername();
+    }
+
+    return (
+        <StyledDiv>
+            <StyledForm onSubmit={submitHandler}>
+                <MyH1>Login</MyH1>
+                <MyLabel className="id">ID</MyLabel>
+                <InputDiv>
+                    <Input
+                        type="text"
+                        className="username"
+                        value={username}
+                        onChange={onChangeUsername}
+                    />
+                </InputDiv>
+
+
+                <MyLabel className="email">Email</MyLabel>
+                <InputDiv>
+                    <Input
+                        type="email"
+                        className="userEmail"
+                        value={email}
+                        onChange={onChangeEmail} />
+                </InputDiv>
+
+
+                <MyLabel className="pw">Password</MyLabel>
+                <InputDiv>
+                    <Input
+                        type="password"
+                        className="userPw"
+                        value={password}
+                        onChange={onChangePw} />
+                </InputDiv>
+
+                <br></br>
+                <StyledButton type="submit">button</StyledButton>
+            </StyledForm>
+        </StyledDiv>
+    );
+}
+
+export default Login;

20_한상아/session09/useInput.jsx

@@ -0,0 +1,13 @@
+import { useState } from 'react'
+
+function useInput() {
+    const [value, setValue] = useState('');
+    const onChange = (event) => setValue(event.target.value);
+    const reset = () => {
+        setValue('');
+    };
+
+    return [value, onChange, reset];
+}
+
+export default useInput;