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/favicon.ico b/public/favicon.ico
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="oyat_favicon.jpg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Todo List ✔</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/oyat_favicon.jpg b/public/oyat_favicon.jpg
diff --git a/src/App.js b/src/App.js
@@ -1,9 +1,99 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import Form from './components/Form';
+import Todo from './components/Todo';
+import Done from './components/Done';
+import GlobalStyle from './styles/GloalStyle';
+
+const initialTodoData = localStorage.getItem('list')
+  ? JSON.parse(localStorage.getItem('list'))
+  : [];
-const initialTodoData = localStorage.getItem('list')
-  ? JSON.parse(localStorage.getItem('list'))
-  : [];
+const initialTodoData = localStorage.getItem('list')??[];
-const initialTodoData = localStorage.getItem('list')
-  ? JSON.parse(localStorage.getItem('list'))
-  : [];
+const initialTodoData = localStorage.getItem('list')||[];
-const initialTodoData = localStorage.getItem('list')
-  ? JSON.parse(localStorage.getItem('list'))
-  : [];
+const initialTodoData = JSON.parse(localStorage.getItem('list')||"null")??[];
-const initialTodoData = localStorage.getItem('list')
-  ? JSON.parse(localStorage.getItem('list'))
-  : [];
+const initialTodoData = localStorage.getItem('list')??[];
-const initialTodoData = localStorage.getItem('list')
-  ? JSON.parse(localStorage.getItem('list'))
-  : [];
+const initialTodoData = localStorage.getItem('list')||[];
-const initialTodoData = localStorage.getItem('list')
-  ? JSON.parse(localStorage.getItem('list'))
-  : [];
+const initialTodoData = JSON.parse(localStorage.getItem('list')||"null")??[];
+
 function App() {
+  const [list, setList] = useState(initialTodoData);
+  const [value, setValue] = useState('');
+
+  const getTodo = (todo) => {
+    const newTodo = {
+      id: Date.now(),
+      title: todo,
+      completed: false,
+    };
+    setList([...list, newTodo]);
+    localStorage.setItem('list', JSON.stringify([...list, newTodo]));
+  };
+
+  const toggleTodo = (id) => {
+    let toggledTodo = list.map((data) =>
+      data.id === id ? { ...data, completed: !data.completed } : data
+    );
+    setList(toggledTodo);
+    localStorage.setItem('list', JSON.stringify(toggledTodo));
+  };
+
+  const deleteTodo = (id) => {
+    let deletedTodo = list.filter((data) => data.id !== id);
+    setList(deletedTodo);
+    localStorage.setItem('list', JSON.stringify(deletedTodo));
+  };
+
+  let countTodo = 0;
+  list.map((data) => (data.completed ? data : countTodo++));
-  let countTodo = 0;
-  list.map((data) => (data.completed ? data : countTodo++));
+let countTodo = list.filter((data) => {data.completed}).length;
-  let countTodo = 0;
-  list.map((data) => (data.completed ? data : countTodo++));
+let countTodo = list.filter((data) => {data.completed}).length;
+
   return (
-    <div>
-      <h1>17기 프론트 화이팅~ 우하하</h1>
-    </div>
+    <>
+      <GlobalStyle />
+      <Conatiner>
+        <Form getTodo={getTodo} value={value} setValue={setValue}></Form>
+        <Section>
+          <h3>To do...😿{countTodo}</h3>
+          {list.map((data) =>
+            data.completed ? (
+              <></>
+            ) : (
+              <Todo
+                Todo={data}
+                list={list}
+                setList={setList}
+                toggleTodo={toggleTodo}
+                deleteTodo={deleteTodo}
+              ></Todo>
+            )
+          )}
+        </Section>
+        <Section>
+          <h3>Done..!😻{list.length - countTodo}</h3>
+          {list.map((data) =>
+            data.completed ? (
+              <Done
+                Todo={data}
+                toggleTodo={toggleTodo}
+                deleteTodo={deleteTodo}
+              ></Done>
+            ) : (
+              <></>
+            )
+          )}
+        </Section>
+      </Conatiner>
+    </>
   );
 }
+const Section = styled.div`
+  flex: 0.5;
+  border-top: 2px solid rgb(177, 171, 171);
+  overflow: auto;
+  padding-left: 10px;
+  padding: 0px 20px 15px 20px;
+`;
+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,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Done = ({ Todo, toggleTodo, deleteTodo }) => {
+  return (
+    <DoneList>
+      <div id="done-title">{Todo.title}</div>
+      <Button onClick={() => toggleTodo(Todo.id)}>🔙</Button>
+      <Button onClick={() => deleteTodo(Todo.id)}>✖</Button>
+    </DoneList>
+  );
+};
+
+const DoneList = styled.div`
+  display: flex;
+  #done-title {
+    text-decoration: line-through;
+    color: gray;
+  }
+`;
+const Button = styled.button`
+  border: none;
+  background: none;
+  color: rgb(104, 87, 134);
+  font-size: 18px;
+`;
+export default Done;
diff --git a/src/components/Form.js b/src/components/Form.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Form = ({ getTodo, value, setValue }) => {
+  const submitTodo = (e) => {
+    e.preventDefault();
+
+    if (value.trim()) {
+      getTodo(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: 40px;
+  }
+`;
+
+export default Form;
diff --git a/src/components/Todo.js b/src/components/Todo.js
@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+const Todo = ({ Todo, toggleTodo, deleteTodo, title, list, setList }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedTitle, setEditedTitle] = useState(title);
+
+  const editTodo = (e) => {
+    setEditedTitle(e.target.value);
+  };
+
+  const submitEditedTodo = (event) => {
+    event.preventDefault();
+
+    let editedTodo = list.map((data) => {
+      if (data.id === Todo.id) {
+        data.title = editedTitle;
+      }
+      return data;
+    });
+
+    setList(editedTodo);
+    setIsEditing(false);
+    localStorage.setItem('list', JSON.stringify(editedTodo));
+  };
+
+  if (isEditing) {
+    return (
+      <TodoList>
+        <div>
+          <form onSubmit={submitEditedTodo}>
+            <input value={editedTitle} onChange={editTodo} id="edit-todo" />
+          </form>
+        </div>
+      </TodoList>
+    );
+  } else {
+    return (
+      <TodoList>
+        <div>
+          {Todo.title}
+          <Button onClick={() => toggleTodo(Todo.id)}>✔</Button>
+          <Button onClick={() => deleteTodo(Todo.id)}>✖</Button>
+          <Button onClick={() => setIsEditing(true)}>🛠</Button>
+        </div>
+      </TodoList>
+    );
+  }
+};
+
+const TodoList = styled.div`
+  display: flex;
+  #edit-todo {
+    height: 20px;
+    font-size: 15px;
+  }
+`;
+
+const Button = styled.button`
+  border: none;
+  background: none;
+  color: rgb(104, 87, 134);
+  font-size: 18px;
+`;
+
+export default Todo;
diff --git a/src/index.js b/src/index.js
@@ -1,10 +1,7 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import App from './App';
+import { createRoot } from 'react-dom/client';
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
+const rootElement = document.getElementById('root');
+const root = createRoot(rootElement);
+root.render(<App />);
diff --git a/src/styles/GloalStyle.js b/src/styles/GloalStyle.js
@@ -0,0 +1,21 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+@font-face {
+    font-family: 'GangwonEdu_OTFBoldA';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/GangwonEdu_OTFBoldA.woff')
+      format('woff');
+    font-weight: normal;
+    font-style: normal;
+  }
+  body {
+    background-color: rgb(186, 191, 225);
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: 'GangwonEdu_OTFBoldA'
+  }
+  `;
+
+export default GlobalStyle;