과제9

21_김민/session01/session09/App.js

@@ -0,0 +1,11 @@
+import React, { useRef, useState } from 'react';
+import Signup from './Signup';
+import './index.css';
+
+function App() {
+  return(
+    <Signup />
+  )
+};
+
+export default App;

21_김민/session01/session09/Signup.js

@@ -0,0 +1,72 @@
+import React, { useState, useRef, useEffect } from 'react';
+// import useCounter from './custom_hook/useCounter';
+
+
+
+function Signup() {
+
+    const [inputs, setInputs] = useState({
+        text : '',
+        Email : '',
+        pw : '',
+    });
+
+    const { text, Email, pw } = inputs; // 비구조화 할당
+
+    const onChange = (e) => {
+        const { value, name } = e.target; 
+        setInputs({
+            ...inputs, // 기존의 input 객체 복사
+            [name]: value,
+        });
+    };
+
+    const onReset = () => {
+        console.log('Username:', text);
+        console.log('Email:', Email);
+        console.log('Password:', pw);
+
+        setInputs({
+            text : '',
+            Email : '',
+            pw : '',
+        })
+    };
+
+    return(
+    <div>
+        <h1>멋 사</h1>
+        <form>
+            <p>  
+              <label htmlFor="text">id  </label>
+              <input name='text' 
+              type="text" 
+              value={text} 
+              onChange={onChange} 
+              />
+            </p>
+
+            <p>
+              <label htmlFor="Email">email</label>
+              <input name='Email' 
+              type="email" 
+              value={Email} 
+              onChange={onChange}
+              />
+            </p>
+
+            <p>
+              <label htmlFor="password">Pw </label>
+              <input name='pw' 
+              type="password" 
+              value={pw} 
+              onChange={onChange}/>
+            </p>
+          </form>
+
+          <button className="B" onClick={onReset}>login</button>
+    </div>
+  )
+}
+
+export default Signup;

21_김민/session01/session09/index.css

@@ -0,0 +1,86 @@
+body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+      sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+      monospace;
+  }
+
+  body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+      sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+      monospace;
+  }
+
+  .input {
+    text-align: center;
+  }
+
+  @font-face {
+    font-family: 'DOSSaemmul';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/DOSSaemmul.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+  }
+
+  h1, label {
+    font-family: 'DOSSaemmul';
+  }
+
+  .B {
+    box-sizing: border-box;
+    appearance: none;
+    background-color: transparent;
+    border: 2px solid #e74c3c;
+    cursor: pointer;
+    /* display: flex; */
+    align-self: center;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1;
+    margin: 10px;
+    padding: 0.6em 1.2em;
+    color: #e74c3c;
+    text-decoration: none;
+    text-align: center;
+    text-transform: uppercase;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 700;
+
+    &:hover,
+    &:focus {
+      color:#5f5f5f;
+      border: #5f5f5f;
+      outline: 100%;
+    }
+  }
+
+   input {
+    width: 500px;
+    height: 32px;
+    font-size: 15px;
+    border: 0;
+    border-radius: 15px;
+    outline: none;
+    padding-left: 10px;
+    background-color: rgb(233, 233, 233);
+    margin-top: 1%;
+    ; }
+
+  div { 
+    text-align: center;
+  }