URECA-ReCoder · ZUITOPIA · Sep 2, 2024 · Sep 2, 2024 · Sep 2, 2024 · Sep 2, 2024
diff --git a/.prettierrc b/.prettierrc
@@ -2,5 +2,5 @@
   "trailingComma": "es5",
   "tabWidth": 2,
   "semi": true,
-  "singleQuote": true
+  "singleQuote": false
 }
diff --git a/eslint.config.js b/eslint.config.js
@@ -1,8 +1,8 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import react from 'eslint-plugin-react'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
+import js from '@eslint/js';
+import globals from 'globals';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
 
 export default [
   { ignores: ['dist'] },
@@ -33,6 +33,7 @@ export default [
         'warn',
         { allowConstantExport: true },
       ],
+      'react/prop-types': 'off', // prop-types 규칙 비활성화
     },
   },
-]
+];
diff --git a/index.html b/index.html
@@ -1,10 +1,10 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/check.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>React Todo</title>
+    <title>Schedule</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -10,8 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "prop-types": "^15.8.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

diff --git a/public/arcade.png b/public/arcade.png
diff --git a/public/check.png b/public/check.png
diff --git a/public/check.svg b/public/check.svg
diff --git a/public/delete.png b/public/delete.png
diff --git a/public/emoji.png b/public/emoji.png
diff --git a/public/game.png b/public/game.png
diff --git a/public/game2.png b/public/game2.png
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,214 @@
-function App() {
-  return <div>React Todo</div>;
-}
+import TodoSection from "./components/shared/TodoSection";
+import useLocalStorage from "./components/hooks/useLocalStorage";
+import { Style } from "./components/styles/App.styles";
+import Header from "./Header";
+import { Global, css } from "@emotion/react";
+
+export default function App() {
+  const [todos, setTodos] = useLocalStorage("todos", []);
+  const [completed, setCompleted] = useLocalStorage("completed", []);
+
+  const handleFormSubmit = (todo) => {
+    setTodos((prev) => [todo, ...prev]);
+  };
+
+  const handleToggleTodo = (index, isCompleted) => {
+    if (isCompleted) {
+      const newCompleted = completed.filter((_, i) => i !== index);
+      const todoToMove = completed[index];
+      setCompleted(newCompleted);
+      setTodos((prev) => [todoToMove, ...prev]);
+    } else {
+      const newTodos = todos.filter((_, i) => i !== index);
+      const completedTodo = todos[index];
+      setTodos(newTodos);
+      setCompleted((prev) => [completedTodo, ...prev]);
+    }
+  };
+
+  const deleteTodo = (index) => {
+    const newTodos = todos.filter((_, i) => i !== index);
+    setTodos(newTodos);
+  };
+
+  const deleteDone = (index) => {
+    const newCompleted = completed.filter((_, i) => i !== index);
+    setCompleted(newCompleted);
+  };
 
-export default App;
+  return (
+    <div>
+      <Global
+        styles={css`
+          @font-face {
+            font-family: "DungGeunMo";
+            src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/DungGeunMo.woff")
+              format("woff");
+            font-weight: normal;
+            font-style: normal;
+          }
+
+          html,
+          body,
+          div,
+          span,
+          applet,
+          object,
+          iframe,
+          h1,
+          h2,
+          h3,
+          h4,
+          h5,
+          h6,
+          p,
+          blockquote,
+          pre,
+          a,
+          abbr,
+          acronym,
+          address,
+          big,
+          cite,
+          code,
+          del,
+          dfn,
+          em,
+          img,
+          ins,
+          kbd,
+          q,
+          s,
+          samp,
+          small,
+          strike,
+          strong,
+          sub,
+          sup,
+          tt,
+          var,
+          b,
+          u,
+          i,
+          center,
+          dl,
+          dt,
+          dd,
+          ol,
+          ul,
+          li,
+          fieldset,
+          form,
+          label,
+          legend,
+          table,
+          caption,
+          tbody,
+          tfoot,
+          thead,
+          tr,
+          th,
+          td,
+          article,
+          aside,
+          canvas,
+          details,
+          embed,
+          figure,
+          figcaption,
+          footer,
+          header,
+          hgroup,
+          menu,
+          nav,
+          output,
+          ruby,
+          section,
+          summary,
+          time,
+          mark,
+          audio,
+          video {
+            margin: 0;
+            padding: 0;
+            border: 0;
+            font-size: 100%;
+            font: inherit;
+            vertical-align: baseline;
+          }
+
+          article,
+          aside,
+          details,
+          figcaption,
+          figure,
+          footer,
+          header,
+          hgroup,
+          menu,
+          nav,
+          section {
+            display: block;
+          }
+          body {
+            font-family: "DungGeunMo";
+            width: 100%;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: #595ca1;
+            background-image: url("/public/arcade.png");
+            background-size: 1430px;
+            background-position: 49%;
+            background-repeat: no-repeat;
+          }
+          input {
+            font-family: "DungGeunMo";
+          }
+          ol,
+          ul {
+            list-style: none;
+          }
+          blockquote,
+          q {
+            quotes: none;
+          }
+          blockquote:before,
+          blockquote:after,
+          q:before,
+          q:after {
+            content: "";
+            content: none;
+          }
+          table {
+            border-collapse: collapse;
+            border-spacing: 0;
+          }
+        `}
+      />
+
+      <Style.AppWrapper>
+        <Header handleFormSubmit={handleFormSubmit} />
+
+        <Style.TodoSectionWrapper>
+          <TodoSection
+            title="IN PROGRESS"
+            items={todos}
+            onToggle={handleToggleTodo}
+            onDelete={deleteTodo}
+            isCompleted={false}
+          />
+
+          <TodoSection
+            title="COMPLETED"
+            items={completed}
+            onToggle={handleToggleTodo}
+            onDelete={deleteDone}
+            isCompleted={true}
+          />
+        </Style.TodoSectionWrapper>
+      </Style.AppWrapper>
+    </div>
+  );
+}
diff --git a/src/Header.jsx b/src/Header.jsx
@@ -0,0 +1,15 @@
+import Input from "./components/shared/Input";
+import { Text } from "./components/shared/UI";
+import { Style } from "./components/styles/App.styles";
+
+export default function Header({ handleFormSubmit }) {
+  return (
+    <Style.Header>
+      <Style.TitleWrapper>
+        <Style.GameIcon src="game2.png" alt="game" />
+        <Text.Title>SCHEDULE</Text.Title>
+      </Style.TitleWrapper>
+      <Input addTodo={handleFormSubmit} />
+    </Style.Header>
+  );
+}
diff --git a/src/components/hooks/useInput.js b/src/components/hooks/useInput.js
@@ -0,0 +1,11 @@
+import { useState, useCallback } from "react";
+
+export default function useInput() {
+  const [value, setValue] = useState("");
+
+  const handleChange = useCallback((event) => {
+    setValue(event.target.value);
+  }, []);
+
+  return [value, handleChange, setValue];
+}
diff --git a/src/components/hooks/useLocalStorage.js b/src/components/hooks/useLocalStorage.js
@@ -0,0 +1,16 @@
+import { useState, useEffect } from "react";
+
+function useLocalStorage(key, initialValue) {
+  const [storedValue, setStoredValue] = useState(() => {
+    const item = localStorage.getItem(key);
+    return item ? JSON.parse(item) : initialValue;
+  });
+
+  useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(storedValue));
+  }, [key, storedValue]);
+
+  return [storedValue, setStoredValue];
+}
+
+export default useLocalStorage;
diff --git a/src/components/shared/Input.jsx b/src/components/shared/Input.jsx
@@ -0,0 +1,30 @@
+import useInput from "../hooks/useInput";
+import { Style } from "../styles/Input.styles";
+
+export default function Input({ addTodo }) {
+  const [inputValue, handleChange, setInputValue] = useInput("");
+
+  const handleFormSubmit = (event) => {
+    event.preventDefault();
+    if (inputValue.trim() !== "") {
+      addTodo(inputValue);
+      setInputValue("");
+    } else {
+      alert("입력된 할 일이 없어요, 다시 확인해주세요!");
+    }
+  };
+
+  return (
+    <form onSubmit={handleFormSubmit}>
+      <Style.InputWrapper>
+        <Style.Input
+          type="text"
+          value={inputValue}
+          onChange={handleChange}
+          placeholder="할 일을 입력해주세요."
+        />
+        <Style.Button type="submit">+</Style.Button>
+      </Style.InputWrapper>
+    </form>
+  );
+}
diff --git a/src/components/shared/Todo.jsx b/src/components/shared/Todo.jsx
@@ -0,0 +1,18 @@
+import TodoItem from "./TodoItem";
+import { Style } from "../styles/Todo.styles";
+
+export default function Todo({ items, onToggle, onDelete, isCompleted }) {
+  return (
+    <Style.Wrapper>
+      {items.map((todo, index) => (
+        <TodoItem
+          key={index}
+          todo={todo}
+          isCompleted={isCompleted}
+          onToggle={() => onToggle(index, isCompleted)}
+          onDelete={() => onDelete(index)}
+        />
+      ))}
+    </Style.Wrapper>
+  );
+}