CEOS-Developers · oyatplum · Mar 20, 2023 · Mar 21, 2023 · Mar 21, 2023 · Mar 22, 2023
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,8 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
+    "styled-components": "^5.3.9",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/src/App.js b/src/App.js
@@ -1,9 +1,49 @@
+import React, { useState } from 'react';
+import styled, { createGlobalStyle } from 'styled-components';
+import Form from './components/Form';
+import Todo from './components/Todo';
+import Done from './components/Done';
+
 function App() {
+  const [list, setList] = useState([]);
+
+  const getTodo = (value) => {
+    const newTodo = {
+      id: Date.now(),
+      title: value,
+      completed: false,
+    };
+    setList((prev) => [...prev, newTodo]);
+  };
+
   return (
-    <div>
-      <h1>17기 프론트 화이팅~ 우하하</h1>
-    </div>
+    <>
+      <GlobalStyle />
+      <Conatiner>
+        <Form getTodo={getTodo}></Form>
+        <Todo></Todo>
+        <Done></Done>
+      </Conatiner>
+    </>
   );
 }
+const GlobalStyle = createGlobalStyle`
+  body {
+    background-color: rgb(186, 191, 225);
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  `;
+const Conatiner = styled.div`
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  height: 650px;
+  width: 350px;
+  border-radius: 20px;
+  box-shadow: 1px 1px 15px rgba(73, 71, 71, 0.5);
+`;
 
-export default App;
+export default App;
diff --git a/src/components/Done.js b/src/components/Done.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+function Done() {
+  return <div>Done</div>;
+}
+
+export default Done;
diff --git a/src/components/Form.js b/src/components/Form.js
@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+function Form({ getTodo }) {
+  const [value, setValue] = useState('');
+
+  const submitTodo = (e) => {
+    e.preventDefault();
+
+    if (value.trim()) {
+      getTodo(value);
+      console.log(value);
+      setValue('');
+    } else {
+      alert('Enter your todo');
+    }
+  };
+  const handleChange = (e) => {
+    setValue(e.target.value);
+  };
+  return (
+    <div>
+      <Enter>
+        <form onSubmit={submitTodo}>
+          <h2>Todo List ✔</h2>
+          <input
+            type="text"
+            value={value}
+            placeholder=" Enter your to do"
+            onChange={handleChange}
+            id="input-todo"
+          />
+          <button type="submit" id="button">
+            ➕
+          </button>
+        </form>
+      </Enter>
+    </div>
+  );
+}
+const Enter = styled.div`
+  padding: 0px 20px 15px 20px;
+  #input-todo {
+    border: none;
+    background-color: rgb(205, 222, 241);
+    border-radius: 20px;
+    height: 35px;
+    font-size: 15px;
+    width: 85%;
+  }
+  #button {
+    border: none;
+    background: none;
+    font-size: 18px;
+    width: 30px;
+  }
+`;
+
+export default Form;
diff --git a/src/components/Todo.js b/src/components/Todo.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+function Todo() {
+  return <div>Todo</div>;
+}
+
+export default Todo;
diff --git a/src/index.js b/src/index.js
@@ -7,4 +7,4 @@ ReactDOM.render(
     <App />
   </React.StrictMode>,
   document.getElementById('root')
-);
+);
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,4 +7,4 @@ ReactDOM.render( @@
         <App />
       </React.StrictMode>,
       document.getElementById('root')
-    );
+    );