[4주차] 강태이/todolist Edit, localStorage 기능 구현

README.md

@@ -1,4 +1,3 @@
-<<<<<<< HEAD
 # 🖥️ Mission-FE-Zero100
 FE Zero100 미션을 위한 레포지토리입니다.
 

package.json

@@ -8,13 +8,11 @@
     "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"
-
-
-
   },
   "dependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.4.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

src/App.jsx

@@ -1,23 +1,62 @@
-import "./index.css";
-import Text from "./component/Text";
-import Input from "./component/Input";
-import Button from "./component/Button";
-import Checkbox from "./component/Checkbox";
+import styled from "styled-components";
+import Header from "./component/Header";
+import AddTodo from "./component/AddTodo";
+import Category from "./component/Category";
+import TodoList from "./component/TodoList";
+import { useState } from "react";
+import { useEffect } from "react";
+
+const Container = styled.div`
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: #f9f9f9;
+
+  @media (max-width: 768px) and (orientation: portrait) {
+    max-width: 90%;
+    padding: 1.5rem;
+  }
+
+  @media (max-width: 480px) and (orientation: portrait) {
+    padding: 1rem;
+  }
+`;
 
 function App() {
+  const [todos, setTodos] = useState([]);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [activeCategory, setActiveCategory] = useState("All");
+
+  useEffect(() => {
+    const savedTodos = localStorage.getItem("tasks");
+    if (savedTodos) {
+      setTodos(JSON.parse(savedTodos));
+    }
+    setIsLoaded(true);
+  }, []);
+
+  useEffect(() =>{
+    if (isLoaded) {
+      localStorage.setItem("tasks", JSON.stringify(todos));
+    }
+  }, [todos, isLoaded]);
+
+  const handleAddTodo = (text) => {
+    if (text.trim() === "") return;
+    const newTodo = { id: Date.now(), text, completed: false, isEditing: false };
+    setTodos([...todos, newTodo]);
+  };
+
+  if (!isLoaded) return <div>Loading... </div>;
+
   return (
-    <div className="app-container">
-      {/* text part */}
-      <Text />
-
-      {/* input part */}
-      <Input />
-     {/* button part */}
-      <Button />
-      {/* checkbox part */}
-      <Checkbox />
-    </div>
+    <Container>
+      <Header />
+      <AddTodo onAddTodo={handleAddTodo} />
+      <Category activeCategory={activeCategory} setActiveCategory={setActiveCategory} />
+      <TodoList todos={todos} setTodos={setTodos} activeCategory={activeCategory} />
+    </Container>
   );
-}
+};
 
 export default App;

src/component/AddTodo.jsx

@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import styled from "styled-components";
+
+const AddTodoContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+`;
+
+const StyledText = styled.h2`
+  text-align: center;
+  display: flex;
+`;
+
+const StyledInput = styled.input`
+  width: 500px;
+  padding: 14px;
+  border-radius: 0px;
+  margin-bottom: 8px;
+`;
+
+const StyledButton = styled.button`
+  background-color: black;
+  color: white;
+  width: 532px;
+  padding: 9px;
+  border: none;
+  border-radius: 0px;
+  margin-bottom: 8px;
+`;
+
+const AddTodo = ({ onAddTodo }) => {
+    const [inputValue, setInputValue] = useState("");
+
+    const handleInputChange = (e) => {
+      setInputValue(e.target.value);
+    };
+
+    const handleAddClick = () => {
+      onAddTodo(inputValue);
+      setInputValue(""); 
+    };
+
+    return(
+        <AddTodoContainer>
+            <StyledText>What needs to be done?</StyledText>
+            <StyledInput 
+                type="text" 
+                placeholder="Add a task"
+                value={inputValue}
+                onChange={handleInputChange} 
+            />
+            <StyledButton onClick={handleAddClick}>Add</StyledButton>
+        </AddTodoContainer>
+    )
+}
+
+export default AddTodo;

src/component/Button.jsx

@@ -1,13 +0,0 @@
-import React from 'react'
-
-const Button = ({label, onClick}) => {
-  return (
-    <div className="filters">
-        <button>Show all tasks</button>
-        <button>Show active tasks</button>
-        <button>Show completed tasks</button>
-      </div>
-  )
-}
-
-export default Button;

src/component/Category.jsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import styled from "styled-components";
+
+const CategoryContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+`;
+
+const StyledButton = styled.button`
+  width: 130px;
+  padding: 7px;
+  background-color: white;
+  border: 2px solid ${(props) => (props.active ? "black" : "#ccc")};
+  border-radius: 0px;
+  font-size: 14px;
+`;
+
+const Category = ({ activeCategory, setActiveCategory }) => {
+  return (
+    <CategoryContainer>
+      {["All", "Active", "Completed"].map((label) => (
+        <StyledButton
+          key={label}
+          active={activeCategory === label}
+          onClick={() => setActiveCategory(label)}
+        >
+          {label}
+        </StyledButton>
+      ))}
+    </CategoryContainer>
+  );
+};
+
+export default Category;