From 5f5267e000c11c5119d0a2760aea431f69f0c0aa Mon Sep 17 00:00:00 2001 From: hansanga Date: Mon, 10 Jul 2023 01:57:18 +0900 Subject: [PATCH 1/4] =?UTF-8?q?=EA=B3=BC=EC=A0=9C8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../session08/components/inputs/Input.jsx" | 27 +++++++ .../session08/index.js" | 19 +++++ .../session08/login.jsx" | 78 +++++++++++++++++++ 3 files changed, 124 insertions(+) create mode 100644 "20_\355\225\234\354\203\201\354\225\204/session08/components/inputs/Input.jsx" create mode 100644 "20_\355\225\234\354\203\201\354\225\204/session08/index.js" create mode 100644 "20_\355\225\234\354\203\201\354\225\204/session08/login.jsx" diff --git "a/20_\355\225\234\354\203\201\354\225\204/session08/components/inputs/Input.jsx" "b/20_\355\225\234\354\203\201\354\225\204/session08/components/inputs/Input.jsx" new file mode 100644 index 0000000..9ee7224 --- /dev/null +++ "b/20_\355\225\234\354\203\201\354\225\204/session08/components/inputs/Input.jsx" @@ -0,0 +1,27 @@ +import React from "react"; + +const Input = ({ label, type, value, onChange, disabled }) => { + return ( +
+ + +
+ ); +}; + +export default Input; + +// import Input from '../inputs/Input'; +// \ No newline at end of file diff --git "a/20_\355\225\234\354\203\201\354\225\204/session08/index.js" "b/20_\355\225\234\354\203\201\354\225\204/session08/index.js" new file mode 100644 index 0000000..c5d8b63 --- /dev/null +++ "b/20_\355\225\234\354\203\201\354\225\204/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( + + + +); + +// 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(); diff --git "a/20_\355\225\234\354\203\201\354\225\204/session08/login.jsx" "b/20_\355\225\234\354\203\201\354\225\204/session08/login.jsx" new file mode 100644 index 0000000..5ef1390 --- /dev/null +++ "b/20_\355\225\234\354\203\201\354\225\204/session08/login.jsx" @@ -0,0 +1,78 @@ +import React, { useState } from "react"; +import Input from "./components/inputs/Input"; +import styled from "styled-components"; + +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) + } + + const StyledDiv = styled.div` + display: flex; + justify-content: center; + `; + + const StyledForm = styled.form` + display: flex; + flex-direction: column; + padding: 10px 20px; + border: 1px solid #ccc; + `; + + const StyledButton = styled.button` + background-color: gray; + color: white; + padding: 10px 15px; + border: 1px solid #ccc; + `; + + return ( + + +

Login

+ + + + + + + + + + + +

+ button + + + ); +} + +export default Login; \ No newline at end of file From 574a833bada82978f554ffd845af7cd78ac6ac28 Mon Sep 17 00:00:00 2001 From: hansanga Date: Mon, 10 Jul 2023 01:57:34 +0900 Subject: [PATCH 2/4] =?UTF-8?q?=EA=B3=BC=EC=A0=9C9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../session09/index.js" | 19 ++++ .../session09/login.jsx" | 106 ++++++++++++++++++ .../session09/useInput.jsx" | 13 +++ 3 files changed, 138 insertions(+) create mode 100644 "20_\355\225\234\354\203\201\354\225\204/session09/index.js" create mode 100644 "20_\355\225\234\354\203\201\354\225\204/session09/login.jsx" create mode 100644 "20_\355\225\234\354\203\201\354\225\204/session09/useInput.jsx" diff --git "a/20_\355\225\234\354\203\201\354\225\204/session09/index.js" "b/20_\355\225\234\354\203\201\354\225\204/session09/index.js" new file mode 100644 index 0000000..d58bc90 --- /dev/null +++ "b/20_\355\225\234\354\203\201\354\225\204/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( + + + +); + +// 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(); diff --git "a/20_\355\225\234\354\203\201\354\225\204/session09/login.jsx" "b/20_\355\225\234\354\203\201\354\225\204/session09/login.jsx" new file mode 100644 index 0000000..59b1a97 --- /dev/null +++ "b/20_\355\225\234\354\203\201\354\225\204/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 ( + + + Login + ID + + + + + + Email + + + + + + Password + + + + +

+ button + + + ); +} + +export default Login; \ No newline at end of file diff --git "a/20_\355\225\234\354\203\201\354\225\204/session09/useInput.jsx" "b/20_\355\225\234\354\203\201\354\225\204/session09/useInput.jsx" new file mode 100644 index 0000000..243fd2b --- /dev/null +++ "b/20_\355\225\234\354\203\201\354\225\204/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; \ No newline at end of file From 9f70836903660aeb66654b15c3648daf21132c8b Mon Sep 17 00:00:00 2001 From: hansanga Date: Mon, 10 Jul 2023 02:00:14 +0900 Subject: [PATCH 3/4] =?UTF-8?q?=EA=B3=BC=EC=A0=9C8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../session08/login.jsx" | 58 +++++++++++++------ 1 file changed, 39 insertions(+), 19 deletions(-) diff --git "a/20_\355\225\234\354\203\201\354\225\204/session08/login.jsx" "b/20_\355\225\234\354\203\201\354\225\204/session08/login.jsx" index 5ef1390..93fc146 100644 --- "a/20_\355\225\234\354\203\201\354\225\204/session08/login.jsx" +++ "b/20_\355\225\234\354\203\201\354\225\204/session08/login.jsx" @@ -2,6 +2,45 @@ 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(""); @@ -24,25 +63,6 @@ function Login() { setPassword(event.target.value) } - const StyledDiv = styled.div` - display: flex; - justify-content: center; - `; - - const StyledForm = styled.form` - display: flex; - flex-direction: column; - padding: 10px 20px; - border: 1px solid #ccc; - `; - - const StyledButton = styled.button` - background-color: gray; - color: white; - padding: 10px 15px; - border: 1px solid #ccc; - `; - return ( From 611944e66ff2d296711fd872547302869d3fcb02 Mon Sep 17 00:00:00 2001 From: hansanga Date: Mon, 10 Jul 2023 02:02:05 +0900 Subject: [PATCH 4/4] =?UTF-8?q?=EA=B3=BC=EC=A0=9C9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "20_\355\225\234\354\203\201\354\225\204/session09/login.jsx" | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git "a/20_\355\225\234\354\203\201\354\225\204/session09/login.jsx" "b/20_\355\225\234\354\203\201\354\225\204/session09/login.jsx" index 59b1a97..0b10a10 100644 --- "a/20_\355\225\234\354\203\201\354\225\204/session09/login.jsx" +++ "b/20_\355\225\234\354\203\201\354\225\204/session09/login.jsx" @@ -56,7 +56,7 @@ function Login() { console.log("아이디:", username); console.log("비밀번호:", password); console.log("이메일:", email); - console.log("======================"); + console.log("======================="); resetemail(); resetpassword(); resetusername();