[2주차] 송유선 미션 제출합니다.

package.json

@@ -6,9 +6,12 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "pretendard": "^1.3.9",
     "react": "^18.3.1",
+    "react-datepicker": "^7.3.0",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.13",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,8 +1,34 @@
+import React, { useState, useEffect } from "react";
+import TodoDate from "./components/TodoDate";
+import TodoContent from "./components/TodoContent";
+import GlobalStyle from "./style/GlobalStyle";
+import "./style/normalize.css";
+
 function App() {
+  const [todos, setTodos] = useState([]);
+  const [date, setDate] = useState("");
+
+  useEffect(() => {
+    const storedTodos = JSON.parse(localStorage.getItem("todos")) || [];
+    const filteredTodos = storedTodos.filter((todo) => todo.date === date);
+    setTodos(filteredTodos);
+  }, [date]);
+
+  useEffect(() => {
+    const storedTodos = JSON.parse(localStorage.getItem("todos")) || [];
+    const updatedTodos = [
+      ...storedTodos.filter((todo) => todo.date !== date),
+      ...todos,
+    ];
+    localStorage.setItem("todos", JSON.stringify(updatedTodos));
+  }, [todos, date]);
+
   return (
-    <div className="App">
-      <h1>🐶CEOS 20기 프론트엔드 최고🐶</h1>
-    </div>
+    <>
+      <GlobalStyle />
+      <TodoDate setDate={setDate} />
+      <TodoContent todos={todos} setTodos={setTodos} date={date} />
+    </>
   );
 }
 

src/components/ProgressBar.jsx

@@ -0,0 +1,6 @@
+import React from "react";
+import styled from "styled-components";
+
+const ProgressBar = () => {};
+
+export default ProgressBar;

src/components/TodoContent.jsx

@@ -0,0 +1,88 @@
+import React, { useMemo } from "react";
+import styled from "styled-components";
+import TodoForm from "./TodoForm";
+import TodoItem from "./TodoItem";
+
+const TodoContent = ({ todos, setTodos, date }) => {
+  const addTodo = (text) => {
+    setTodos((prevTodos) => [
+      ...prevTodos,
+      { id: Date.now(), text, done: false, date: date },
+    ]);
+  };
+
+  const todoCount = useMemo(() => {
+    const doneCount = todos.filter((todo) => todo.done).length;
+    return `${doneCount} / ${todos.length}`;
+  }, [todos]);
+
+  const sortedTodos = useMemo(() => {
+    return [...todos].sort((a, b) => a.done - b.done);
+  }, [todos]);
+
+  return (
+    <Container>
+      <Title>
+        <h2>To-Do</h2>
+        <div id="todo-count">{todoCount}</div>
+      </Title>
+      <TodoForm addTodo={addTodo} />
+      <TodoList>
+        {sortedTodos.map((todo) => (
+          <TodoItem
+            key={todo.id}
+            todo={todo}
+            todos={todos}
+            setTodos={setTodos}
+          />
+        ))}
+      </TodoList>
+    </Container>
+  );
+};
+
+export default TodoContent;
+
+const Container = styled.div`
+  width: 60%;
+  max-width: 550px;
+  height: 60%;
+  border: 0.3px solid #ff3898;
+  background: #ffffff1a;
+  box-shadow: 0 0 70px #691940;
+  border-radius: 40px;
+  display: flex;
+  flex-direction: column;
+  padding: 40px 30px 40px 40px;
+  animation: fadeInUp 1s ease forwards;
+`;
+
+const Title = styled.div`
+  padding: 0 10px 20px 0;
+  display: flex;
+  justify-content: space-between;
+
+  h2 {
+    color: #24d46d;
+    font-size: 50px;
+    font-weight: 800;
+    margin: 0;
+    text-shadow: 0px 0px 10px #24d46d;
+  }
+
+  #todo-count {
+    color: #24d46d;
+    font-size: 50px;
+    font-weight: 800;
+    margin: 0;
+    text-shadow: 0px 0px 10px #24d46d;
+  }
+`;
+
+const TodoList = styled.ul`
+  overflow: auto;
+  list-style: none;
+  margin: 0;
+  padding: 0 10px 0 0;
+  animation: fadeInDown 1.5s ease forwards;
+`;

src/components/TodoDate.jsx

@@ -0,0 +1,29 @@
+import React, { useEffect } from "react";
+import styled from "styled-components";
+
+const TodoDate = ({ setDate }) => {
+  const today = new Date();
+  const year = today.getFullYear();
+  const month = today.getMonth() + 1;
+  const day = today.getDate();
+  const titleDate = `⊹ ⋆ ${year}. ${month}. ${day}. ⋆ ⊹`;
+
+  const textDate = `${year}-${month}-${day}`;
+  useEffect(() => {
+    setDate(textDate);
+  }, [setDate, textDate]);
+
+  return <DateWrapper>{titleDate}</DateWrapper>;
+};
+
+export default TodoDate;
+
+const DateWrapper = styled.div`
+  font-weight: 800;
+  font-size: 40px;
+  width: 100%;
+  text-align: center;
+  color: #ffffff;
+  margin-bottom: 25px;
+  text-shadow: 0px 0px 15px #ff3898;
+`;

src/components/TodoForm.jsx

@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+const TodoForm = ({ addTodo }) => {
+  const [newTodo, setNewTodo] = useState("");
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (newTodo.trim() === "") {
+      alert("할 일을 입력해주세요!");
+      return;
+    }
+    addTodo(newTodo);
+    setNewTodo("");
+  };
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      <input
+        type="text"
+        placeholder="오늘 해야 할 일은?"
+        value={newTodo}
+        onChange={(e) => setNewTodo(e.target.value)}
+      />
+    </Form>
+  );
+};
+
+export default TodoForm;
+
+const Form = styled.form`
+  input {
+    all: unset;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 15px 5px;
+    border-bottom: 1px solid hsl(0, 0%, 100%);
+    font-size: 18px;
+    margin-bottom: 20px;
+  }
+
+  input:focus,
+  input:hover {
+    border-bottom: 1px solid #f854a3a2;
+  }
+`;

src/components/TodoItem.jsx

@@ -0,0 +1,72 @@
+import React from "react";
+import styled from "styled-components";
+
+const TodoItem = React.memo(({ todo, todos, setTodos }) => {
+  const toggleTodo = () => {
+    setTodos((todos) =>
+      todos.map((t) => (t.id === todo.id ? { ...t, done: !t.done } : t))
+    );
+  };
+
+  const deleteTodo = () => {
+    setTodos((todos) => todos.filter((t) => t.id !== todo.id));
+  };
+
+  return (
+    <ListItem done={todo.done}>
+      <DoneBtn done={todo.done} onClick={toggleTodo} />
+      <span>{todo.text}</span>
+      <DelBtn onClick={deleteTodo}>×</DelBtn>
+    </ListItem>
+  );
+});
+
+export default TodoItem;
+
+const ListItem = styled.li`
+  display: flex;
+  align-items: center;
+  border: 1px solid #ffffff85;
+  border-radius: 20px;
+  margin-bottom: 13px;
+  padding: 5px;
+  background-color: #ffffff11;
+
+  span {
+    font-size: 18px;
+    color: ${({ done }) => (done ? "#a3a3a3" : "white")};
+    text-decoration: ${({ done }) => (done ? "line-through" : "none")};
+  }
+`;
+
+const DoneBtn = styled.button`
+  all: unset;
+  font-size: 25px;
+  color: #ff3898;
+  margin: 0 10px;
+  cursor: pointer;
+  text-shadow: 0px 0px 5px #ff3898;
+
+  &::before {
+    content: "${(props) => (props.done ? "♥" : "♡")}";
+  }
+
+  &:hover::before {
+    content: "♥";
+  }
+`;
+
+const DelBtn = styled.button`
+  all: unset;
+  margin: 0 10px 0 auto;
+  padding-bottom: 3px;
+  color: #29e678;
+  font-size: 30px;
+  text-shadow: 0px 0px 10px #ffffff;
+  cursor: pointer;
+  display: flex;
+
+  &:hover {
+    text-shadow: 0px 0px 13px #ff3898;
+  }
+`;

src/style/GlobalStyle.js

@@ -0,0 +1,55 @@
+import { createGlobalStyle } from "styled-components";
+
+const GlobalStyle = createGlobalStyle`
+
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes fadeInDown {
+    from {
+      opacity: 0;
+      transform: translateY(-14px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+
+  #root {
+    background-color: #0a0a0a;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-family: 'Pretendard';
+    color: white;
+    height: 100vh;
+    width: 100%;
+  }
+
+  ::-webkit-scrollbar {
+    width: 7px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: hsla(0, 0%, 100%, 0.158);
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: #e640916b;
+    border-radius: 4px;
+  }
+`;
+
+export default GlobalStyle;