CEOS-Developers · flowerseok · Sep 21, 2023 · Sep 21, 2023 · Sep 21, 2023 · Sep 21, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.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
@@ -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>Song Seok TODO</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,95 @@
+import React, { useState, useEffect } from "react";
+import TodoList from "./components/todoList";
+import DoneList from "./components/doneList";
+import InputTodo from "./components/inputTodo";
+import { createGlobalStyle } from 'styled-components'
+
+const GlobalStyle = createGlobalStyle`
+  html{ font-size: 62.5%; }
+
+  main {
+    display: flex;
+    flex-direction: column;
+    width: 40rem;
+    height: 62rem;
+    margin: 3rem auto;
+    padding: 2.5rem;
+    background-color: #ffffff;
+    box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1);
+    border-radius: 1.5rem;
+  }
+
+  h1 {
+    font-size: 3.5rem;
+    color: #000000;
+    text-align: center;
+    margin-bottom: 2rem;
+  }
+`;
+
 function App() {
-	return (
-		<div>
-			<h1>18기 프론트 화이팅~ 푸하항ㅋ</h1>
-		</div>
-	);
+  const [todos, setTodos] = useState([]);
+  const [dones, setDones] = useState([]);
+
+  useEffect(() => {
+    const savedTodos = localStorage.getItem("todos");
+    const savedDones = localStorage.getItem("dones");
+    if (savedTodos) setTodos(JSON.parse(savedTodos));
+    if (savedDones) setDones(JSON.parse(savedDones));
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem("todos", JSON.stringify(todos));
+    localStorage.setItem("dones", JSON.stringify(dones));
+  }, [todos, dones]);
+
+  const addTodo = (item) => {
+    setTodos([...todos, { id: new Date().getTime(), text: item }]);
+  };
+
+  const deleteItem = (listName, index) => {
+    const list = listName === "todos" ? todos : dones;
+    const newList = [...list];
+    newList.splice(index, 1);
+    listName === "todos" ? setTodos(newList) : setDones(newList);
+  };
+
+  const switchList = (fromListName, index) => {
+    let fromList, toList, setFromList, setToList;
+
+    if (fromListName === "todos") {
+      fromList = todos;
+      toList = dones;
+      setFromList = setTodos;
+      setToList = setDones;
+    } else {
+      fromList = dones;
+      toList = todos;
+      setFromList = setDones;
+      setToList = setTodos;
+    }
+
+    const itemToMove = fromList[index];
+    const newFromList = [...fromList];
+    newFromList.splice(index, 1);
+    setFromList(newFromList);
+
+    const newToList = [...toList, itemToMove];
+    setToList(newToList);
+  };
+
+  return (
+    <>
+      <GlobalStyle />
+      <main>
+        <h1>할 일</h1>
+        <InputTodo addTodo={addTodo} />
+        <TodoList todos={todos} switchList={switchList} deleteItem={deleteItem} />
+        <DoneList dones={dones} switchList={switchList} deleteItem={deleteItem} />
+      </main>
+    </>
+  );
 }
 
 export default App;
+
diff --git a/src/components/doneList.js b/src/components/doneList.js
@@ -0,0 +1,44 @@
+import React from "react";
+import ItemList from "./itemList";
+import styled from 'styled-components';
+
+
+const ListSection = styled.section`
+    display: flex;
+    flex-direction: column; 
+    height: 17rem; 
+    overflow-y: auto;
+    margin-bottom: 2rem; 
+    word-break: break-all;
+`;
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    width: 100%; 
+     
+    h2 {
+      font-size: 2rem;
+    }
+`;
+
+function DoneList({ dones, switchList, deleteItem }) {
+  return (
+    <Container>
+      <h2>Done</h2>
+      <ListSection>
+        {dones.map((done, index) => (
+          <ItemList
+            key={index}
+            item={done.text}
+            index={index}
+            switchList={() => switchList("dones", index)}
+            deleteItem={() => deleteItem("dones", index)}
+          />
+        ))}
+      </ListSection>
+    </Container>
+  );
+}
+
+export default DoneList;
diff --git a/src/components/inputTodo.js b/src/components/inputTodo.js
@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+const AddButton = styled.button`
+  width: 9rem;
+  padding: 1.3rem;
+  margin-left: 2.5rem;
+  border: none;
+  background-color: #000000;
+  color: #fff;
+  border-radius: 0.5rem;
+  line-height: 1.8rem;
+
+  &:hover {
+    background-color: #FF2D00;
+  }
+`;
+
+const TodoInput = styled.input`
+  width: 24rem;
+  padding: 1rem;
+  border: 0.2rem solid #ddd;
+  border-radius: 0.5rem;
+  font-size: 1.8rem;
+  line-height: 1.8rem;
+
+  &:focus {
+    border-color: #007bff;
+  }
+`;
+
+const TodoContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+`;
+
+function InputTodo({ addTodo }) {
+  const [input, setInput] = useState('');
+
+  const addTodoTrim = () => {
+    if (input.trim().length > 0) {
+      addTodo(input.trim());
+      setInput('');
+    }
+  };
+
+  const enterKey = (e) => {
+    if (e.key === 'Enter') {
+      addTodoTrim();
+    }
+  };
+
+  return (
+    <TodoContainer>
+      <TodoInput 
+        type="text" 
+        value={input} 
+        onChange={(e) => setInput(e.target.value)}
+        onKeyPress={enterKey} 
+      />
+      <AddButton onClick={addTodoTrim}>Add</AddButton>
+    </TodoContainer>
+  );
+}
+
+export default InputTodo;
diff --git a/src/components/itemList.js b/src/components/itemList.js
@@ -0,0 +1,57 @@
+import React from "react";
+import styled from 'styled-components';
+
+const DeleteButton = styled.button`
+  background-color: #FFB6C1;
+  color: white;
+  border: none;
+  box-sizing: border-box;
+  padding: 0.6rem 0.5rem;
+  width: 6rem;
+  font-size: 1.4rem;
+  border-radius: 2rem;
+  box-shadow: 0 0.4rem 1rem rgba(255, 182, 193, 0.2);
+  margin-right: 0.5rem;
+
+  &:hover {
+    background-color: #FF69B4;
+    box-shadow: 0 0.4rem 1rem rgba(255, 105, 180, 0.4);
+  }
+
+  &:active {
+    box-shadow: 0 0.4rem 1rem rgba(255, 105, 180, 0.2);
+  }
+`;
+
+const TodoItemContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.8rem;
+  margin: 0.8rem 0;
+  cursor: pointer;
+`;
+
+const TodoText = styled.span`
+  flex-grow: 1;
+  margin-right: 1rem;
+  font-size : 1.6rem;
+`;
+
+const ActionsContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+function ItemList({ item, index, switchList, deleteItem }) {
+  return (
+    <TodoItemContainer onClick={switchList}>
+      <TodoText>{item}</TodoText>
+      <ActionsContainer>
+        <DeleteButton onClick={(e) => { e.stopPropagation(); deleteItem(); }}>x</DeleteButton>
+      </ActionsContainer>
+    </TodoItemContainer>
+  );
+}
+
+export default ItemList;
diff --git a/src/components/todoList.js b/src/components/todoList.js
@@ -0,0 +1,44 @@
+import React from "react";
+import ItemList from "./itemList";
+import styled from 'styled-components';
+
+
+const ListSection = styled.section`
+    display: flex;
+    flex-direction: column; 
+    height: 17rem; 
+    overflow-y: auto;
+    margin-bottom: 2rem; 
+    word-break: break-all;
+`;
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    h2 {
+      font-size: 2rem;
+    }
+`;
+
+function TodoList({ todos, switchList, deleteItem }) {
+  return (
+    <Container>
+      <h2>Todo</h2>
+      <ListSection>
+        {todos.map((todo, index) => (
+          <ItemList
+            key={index}
+            item={todo.text}
+            index={index}
+            switchList={() => switchList("todos", index)}
+            deleteItem={() => deleteItem("todos", index)}
+          />
+        ))}
+      </ListSection>
+    </Container>
+  );
+}
+
+export default TodoList;