CEOS-Developers · wokbjso · Sep 18, 2023 · Sep 19, 2023 · Sep 19, 2023 · Sep 19, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,10 @@
     "@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",
+    "styled-reset": "^4.5.1",
     "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
@@ -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>My-Todos</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,9 +1,13 @@
+import { Route, Routes, Navigate } from "react-router-dom";
+import Todo from "./pages/Todo";
+
 function App() {
-	return (
-		<div>
-			<h1>18기 프론트 화이팅~ 푸하항ㅋ</h1>
-		</div>
-	);
+  return (
+    <Routes>
+      <Route path="/" element={<Todo />} />
+      <Route path="/*" element={<Navigate to="/" />} />
+    </Routes>
+  );
 }
 
 export default App;
diff --git a/src/components/EachTodo.js b/src/components/EachTodo.js
@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+import { setTodo } from "../hooks/setTodo";
+
+function EachTodo({ index, todo, todoLists, setTodoLists }) {
+  const [checkState, setCheckState] = useState(todo.checked);
+  const checkboxChanged = (e) => {
+    const updatedTodoLists = [...todoLists];
+    updatedTodoLists[index] = {
+      ...updatedTodoLists[index],
+      checked: !updatedTodoLists[index].checked,
+    };
+    setTodoLists(updatedTodoLists);
+    setCheckState((prev) => !prev);
+  };
-  const [checkState, setCheckState] = useState(todo.checked);
-  const checkboxChanged = (e) => {
-    const updatedTodoLists = [...todoLists];
-    updatedTodoLists[index] = {
-      ...updatedTodoLists[index],
-      checked: !updatedTodoLists[index].checked,
-    };
-    setTodoLists(updatedTodoLists);
-    setCheckState((prev) => !prev);
-  };
+  const checkboxChanged = () => {
+    const updatedTodoLists = [...todoLists];
+    updatedTodoLists[index].checked = !updatedTodoLists[index].checked;
+    setTodoLists(updatedTodoLists);
+  };
-  const [checkState, setCheckState] = useState(todo.checked);
-  const checkboxChanged = (e) => {
-    const updatedTodoLists = [...todoLists];
-    updatedTodoLists[index] = {
-      ...updatedTodoLists[index],
-      checked: !updatedTodoLists[index].checked,
-    };
-    setTodoLists(updatedTodoLists);
-    setCheckState((prev) => !prev);
-  };
+  const checkboxChanged = () => {
+    const updatedTodoLists = [...todoLists];
+    updatedTodoLists[index].checked = !updatedTodoLists[index].checked;
+    setTodoLists(updatedTodoLists);
+  };
+  const deleteTodo = () => {
+    const updatedTodoLists = [...todoLists];
+    updatedTodoLists.splice(index, 1);
-    const updatedTodoLists = [...todoLists];
-    updatedTodoLists.splice(index, 1);
+    const updatedTodoLists = todoLists.filter((_, idx) => idx !== index);
-    const updatedTodoLists = [...todoLists];
-    updatedTodoLists.splice(index, 1);
+    const updatedTodoLists = todoLists.filter((_, idx) => idx !== index);
+    setTodoLists(updatedTodoLists);
+  };
+  useEffect(() => {
+    setTodo(todoLists);
+  }, [todoLists]);
+  return (
+    <EachTodoWrapper>
+      <CheckBox
+        type="checkbox"
+        checked={checkState}
+        onChange={checkboxChanged}
+      />
+      <TodoText $checked={todo.checked}>
+        <span>{todo.todoText}</span>
+      </TodoText>
+      <DeleteBtn onClick={deleteTodo}>X</DeleteBtn>
+    </EachTodoWrapper>
+  );
+}
+
+const EachTodoWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 3rem;
+`;
+
+const CheckBox = styled.input`
+  margin-right: 1.2rem;
+  width: 3rem;
+  height: 3rem;
+`;
+
+const TodoText = styled.div`
+  span {
+    font-size: 6rem;
+    font-family: "GangwonState";
+    text-decoration: ${(props) => (props.$checked ? "line-through" : null)};
+  }
+`;
+
+const DeleteBtn = styled.div`
+  background-color: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 1rem;
+  border: none;
+  font-size: 4rem;
+  color: gray;
+`;
+
+export default React.memo(EachTodo);
diff --git a/src/components/TodoCountBtn.js b/src/components/TodoCountBtn.js
@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+export default function TodoCountBtn({ btnState, addClass, todoLists }) {
+  return (
+    <BtnWrapper $bgColor={btnState.bgColor} $addClass={addClass}>
+      <span>
+        {btnState.text}: {btnState.getBtnNum(todoLists)}
+      </span>
+    </BtnWrapper>
+  );
+}
+
+const BtnWrapper = styled.div`
+  width: 22rem;
+  height: 9rem;
+  padding: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 1rem;
+  background-color: ${(props) => props.$bgColor};
+  ${(props) => props.$addClass}
+  span {
+    font-size: 3.5rem;
+    font-weight: 500;
+    font-weight: 600;
+    font-family: "Giants-Inline";
+  }
+`;
diff --git a/src/hooks/calculateTodo.js b/src/hooks/calculateTodo.js
@@ -0,0 +1,11 @@
+export const getTotalTodos = (todoLists) => {
+  return todoLists.length;
+};
+
+export const getCheckedTodos = (todoLists) => {
+  return todoLists.filter((todoList) => todoList.checked).length;
+};
+
+export const getProceedingTodos = (todoLists) => {
+  return getTotalTodos(todoLists) - getCheckedTodos(todoLists);
+};
-export const getTotalTodos = (todoLists) => {
-  return todoLists.length;
-};
-
-export const getCheckedTodos = (todoLists) => {
-  return todoLists.filter((todoList) => todoList.checked).length;
-};
-
-export const getProceedingTodos = (todoLists) => {
-  return getTotalTodos(todoLists) - getCheckedTodos(todoLists);
-};
+export const getTotalTodos = (todoLists) => todoLists.length;
+
+export const getCheckedTodos = (todoLists) => todoLists.filter((todoList) => todoList.checked).length;
+
+export const getProceedingTodos = (todoLists) => getTotalTodos(todoLists) - getCheckedTodos(todoLists);
-export const getTotalTodos = (todoLists) => {
-  return todoLists.length;
-};
-
-export const getCheckedTodos = (todoLists) => {
-  return todoLists.filter((todoList) => todoList.checked).length;
-};
-
-export const getProceedingTodos = (todoLists) => {
-  return getTotalTodos(todoLists) - getCheckedTodos(todoLists);
-};
+export const getTotalTodos = (todoLists) => todoLists.length;
+
+export const getCheckedTodos = (todoLists) => todoLists.filter((todoList) => todoList.checked).length;
+
+export const getProceedingTodos = (todoLists) => getTotalTodos(todoLists) - getCheckedTodos(todoLists);
diff --git a/src/hooks/getTodo.js b/src/hooks/getTodo.js
@@ -0,0 +1,3 @@
+export const getTodo = () => {
+  return JSON.parse(localStorage.getItem("todoList")) || [];
+};
diff --git a/src/hooks/setTodo.js b/src/hooks/setTodo.js
@@ -0,0 +1,3 @@
+export const setTodo = (todoList) => {
+  localStorage.setItem("todoList", JSON.stringify(todoList));
+};
diff --git a/src/index.js b/src/index.js
@@ -1,10 +1,19 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import { ThemeProvider } from "styled-components";
+import theme from "./styles/theme";
+import GlobalStyles from "./styles/GlobalStyle";
+import { BrowserRouter } from "react-router-dom";
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <ThemeProvider theme={theme}>
+      <GlobalStyles />
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </ThemeProvider>
   </React.StrictMode>,
-  document.getElementById('root')
-);
+  document.getElementById("root")
+);
diff --git a/src/pages/Todo.js b/src/pages/Todo.js
@@ -0,0 +1,151 @@
+import styled from "styled-components";
+import TodoCountBtn from "../components/TodoCountBtn";
+import { useEffect, useState } from "react";
+import { headerBtnState } from "../state/headerBtnState";
+import EachTodo from "../components/EachTodo";
+import { getTodo } from "../hooks/getTodo";
+import { setTodo } from "../hooks/setTodo";
+
+export default function Todo() {
+  const [todoText, setTodoText] = useState("");
+  const [todoLists, setTodoLists] = useState(getTodo());
+  const todoInputChanged = (e) => {
+    setTodoText(e.target.value);
+  };
+  const enterPressed = (e) => {
+    if (e.key === "Enter") {
+      addTodoClicked();
+    }
+  };
+  const addTodoClicked = () => {
+    if (todoText.trim() === "") {
+      alert("todo를 입력하세요");
+      setTodoText("");
+      return;
+    }
+    setTodoLists((prev) => [
+      ...prev,
+      { todoText: todoText.trim(), checked: false },
+    ]);
+    setTodoText("");
+  };
+  useEffect(() => {
+    setTodo(todoLists);
+  }, [todoLists]);
+  return (
+    <TodoWrapper>
+      <TodoHeader>
+        <HeaderTitle>
+          <span>TO-DO LIST</span>
+        </HeaderTitle>
+        <HeaderBtnWrapper>
+          {headerBtnState.map((btnState) => (
+            <TodoCountBtn
+              key={btnState.text}
+              btnState={btnState}
+              addClass="margin:0 1.5rem;"
+              todoLists={todoLists}
+            />
+          ))}
+        </HeaderBtnWrapper>
+      </TodoHeader>
+      <TodoMainBoard>
+        <AddTodoWrapper>
+          <AddTodoInput
+            placeholder="입력하세요"
+            value={todoText}
+            onChange={todoInputChanged}
+            onKeyDown={enterPressed}
+          />
+          <AddTodoBtn onClick={addTodoClicked}>
+            <span>+</span>
+          </AddTodoBtn>
+        </AddTodoWrapper>
+        <TodoListWrapper>
+          {todoLists.map((todo, index) => (
+            <EachTodo
+              key={todo.todoText + index}
+              index={index}
+              todo={todo}
+              todoLists={todoLists}
+              setTodoLists={setTodoLists}
+            />
+          ))}
+        </TodoListWrapper>
+      </TodoMainBoard>
+    </TodoWrapper>
+  );
+}
+
+const TodoWrapper = styled.div`
+  padding-top: 6rem;
+  min-width: 370px;
+  min-height: 100vh;
+  background: linear-gradient(to right, #dddddd, #ffffff, #dddddd);
+`;
+
+const TodoHeader = styled.header`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  padding: 5rem;
+`;
+
+const HeaderTitle = styled.header`
+  margin-bottom: 4rem;
+  span {
+    font-size: 10rem;
+    font-weight: 500;
+    font-weight: 600;
+    font-family: "Giants-Inline";
+  }
+`;
+
+const HeaderBtnWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin: 2rem 0;
+`;
+
+const TodoMainBoard = styled.div`
+  width: 100%;
+  padding: 5rem 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const AddTodoWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 5rem;
+`;
+
+const AddTodoInput = styled.input`
+  width: 60rem;
+  padding: 1rem;
+  margin-right: 2rem;
+  font-size: 3.5rem;
+  border: none;
+  border-bottom: 1px solid transparent;
+  border-image: linear-gradient(to left, white, black);
+  border-image-slice: 1;
+  background-color: transparent;
+`;
+
+const AddTodoBtn = styled.button`
+  width: 8rem;
+  height: 7rem;
+  padding: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  background-color: transparent;
+  span {
+    font-size: 8rem;
+  }
+`;
+
+const TodoListWrapper = styled.div``;
-const TodoListWrapper = styled.div``;
+const TodoListWrapper = styled.div`
+    word-break : break-all;
+`;
-const TodoListWrapper = styled.div``;
+const TodoListWrapper = styled.div`
+    word-break : break-all;
+`;
diff --git a/src/state/headerBtnState.js b/src/state/headerBtnState.js
@@ -0,0 +1,24 @@
+import {
+  getCheckedTodos,
+  getProceedingTodos,
+  getTotalTodos,
+} from "../hooks/calculateTodo";
+import theme from "../styles/theme";
+
+export const headerBtnState = [
+  {
+    text: "할 일",
+    bgColor: `${theme.colors.allBtn}`,
+    getBtnNum: getTotalTodos,
+  },
+  {
+    text: "진행 중",
+    bgColor: `${theme.colors.doingBtn}`,
+    getBtnNum: getProceedingTodos,
+  },
+  {
+    text: "완료",
+    bgColor: `${theme.colors.doneBtn}`,
+    getBtnNum: getCheckedTodos,
+  },
+];