CEOS-Developers · mod-siw · Sep 22, 2023 · Sep 22, 2023 · Sep 22, 2023 · Sep 22, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,9 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.0.8",
     "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
@@ -15,29 +15,10 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      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>TODOLIST</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.js b/src/App.js
@@ -1,9 +1,13 @@
+import React from "react";
+import styled from "styled-components";
+import TodoTemplate from "./TodoTemplate";
+
 function App() {
-	return (
-		<div>
-			<h1>18기 프론트 화이팅~ 푸하항ㅋ</h1>
-		</div>
-	);
+  return (
+    <>
+      <TodoTemplate />
+    </>
+  );
 }
 
 export default App;
diff --git a/src/TodoTemplate.js b/src/TodoTemplate.js
@@ -0,0 +1,125 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import GlobalStyle from "./styles/GlobalStyle";
+
+import TodoTopbar from "./components/TodoTopbar";
+import TodoListItem from "./components/TodoListItem";
+
+function TodoTemplate() {
+  //todo
+  const initialTodoData = localStorage.getItem("list")
+    ? JSON.parse(localStorage.getItem("list"))
+    : [];
+
+  const [list, setList] = useState(initialTodoData);
+  const [value, setValue] = useState("");
+
+  const deleteTodo = (id) => {
+    let deletedTodo = list.filter((data) => data.id !== id);
+    setList(deletedTodo);
+    localStorage.setItem("list", JSON.stringify(deletedTodo));
+  };
+
+  const toggleTodo = (id) => {
+    let toggledTodo = list.map((data) =>
+      data.id === id ? { ...data, completed: !data.completed } : data
+    );
+    setList(toggledTodo);
+    localStorage.setItem("list", JSON.stringify(toggledTodo));
+  };
+
+  return (
+    <>
+      <GlobalStyle />
+      <TodoTopbar
+        list={list}
+        value={value}
+        setList={setList}
+        setValue={setValue}
+      />
+      <TodoContainer>
+        <article>
+          <h3 class="list-title">TODO</h3>
+          <div class="todo-list">
+            {list.map((data) =>
+              data.completed ? (
+                <></>
+              ) : (
+                <TodoListItem
+                  key={data.id}
+                  todo={data}
+                  deleteTodo={deleteTodo}
+                  toggleTodo={toggleTodo}
+                />
+              )
+            )}
+          </div>
+        </article>
+        <article>
+          <h3 class="list-title">DONE</h3>
+          <div class="done-list">
+            {list.map((data) =>
+              data.completed ? (
+                <TodoListItem
+                  key={data.id}
+                  todo={data}
+                  deleteTodo={deleteTodo}
+                  toggleTodo={toggleTodo}
+                />
+              ) : (
+                <></>
+              )
+            )}
+          </div>
+        </article>
+      </TodoContainer>
+    </>
+  );
+}
+
+export default TodoTemplate;
+
+const TodoContainer = styled.section`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  justify-content: center;
+
+  min-height: 18.75em;
+  max-width: 60%;
+
+  border-radius: 2.125em;
+  border: 0.1875em solid #7adb84;
+  padding: 0.3125em 0.625em;
+  margin: 0.625em auto;
+
+  position: relative;
+
+  .list-title {
+    margin: 0.625em 0 0.625em 0.3125em;
+    font-family: "Pretendard-Regular";
+    color: #00c013;
+  }
+
+  .todo-list,
+  .done-list {
+    list-style: none;
+    margin: 0 0 0.625em;
+    padding: 0 1.875em 0 0.625em;
+
+    max-height: 18em;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #7adb84;
+      border-radius: 1.875em;
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+  }
+`;
diff --git a/src/components/TodoListItem.js b/src/components/TodoListItem.js
@@ -0,0 +1,72 @@
+import React from "react";
+import styled from "styled-components";
+
+import del from "../images/delete.png";
+import check from "../images/checkbox.png";
+import done from "../images/donebox.png";
+
+function TodoListItem({ todo, deleteTodo, toggleTodo }) {
+  return (
+    <ListItem>
+      <IsDoneBox
+        onClick={() => toggleTodo(todo.id)}
+        src={todo.completed ? done : check}
+      ></IsDoneBox>
+      <TodoText onClick={() => toggleTodo(todo.id)}>{todo.title}</TodoText>
+      <TodoDel src={del} onClick={() => deleteTodo(todo.id)} />
+    </ListItem>
+  );
+}
+
+export default TodoListItem;
+
+const ListItem = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  padding: 0.1875em 0;
+  transition: color 0.3s;
+  color: #000;
+  font-family: "SUITE-Regular";
+  font-size: 0.75em;
+  cursor: pointer;
+
+  &:hover {
+    color: #4caf50;
+  }
+`;
+
+const TodoText = styled.span`
+  width: 100%;
+  max-width: 100%;
+  white-space: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const IsDoneBox = styled.img`
+  width: 1.25em;
+  height: 1.25em;
+  padding-right: 1em;
+  border: none;
+  border-radius: 0.3125em;
+  background-color: transparent;
+  cursor: pointer;
+`;
+
+const TodoDel = styled.img`
+  width: 1.25em;
+  height: 1.25em;
+  padding: 0;
+  border: none;
+  border-radius: 0.3125em;
+  background-color: transparent;
+  cursor: pointer;
+
+  opacity: 0;
+  transition: opacity 0.3s;
+  ${ListItem}:hover & {
+    opacity: 1;
+  }
+`;