CEOS-Developers · hmuri · Mar 23, 2023 · Mar 23, 2023 · Mar 23, 2023 · Mar 23, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,9 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.8.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^5.3.9",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,3 @@
+body{
+    background-color: black;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,8 +1,180 @@
+import {React, useState} from 'react'
+import './App.css'
+import styled from 'styled-components';
+import TodoInput from "./components/TodoInput.js";
+import TodoList from "./components/TodoList.js";
+import DoneList from "./components/DoneList.js";
+let getId = 1;
+
+const Container = styled.div`
+    background-color: black;
+    width: 30rem;
+    margin: auto;
+    height: 50rem;
+    border-style: solid;
+    border-radius: 2%;
+    border-color: white;
+`
+
+const Title = styled.div`
+    width: 90%;
+    margin-left: 5%;
+    margin-top: 3rem;
+    margin-bottom: 1.5rem;
+    height: 5vh;
+    color: white;
+    font-size: 30px;
+    text-align: center;
+    font-weight: 800;
+
+    border-bottom: solid;
+    border-radius: 2%;
+`
+
+const TodoTitle = styled. div`
+    width: 82%;
+    height: 32px;
+    color: white;
+    font-size: 28px;
+    text-align: left;
+    font-weight: bold;
+    margin-left : 15%;
+    margin-top : 1.5rem;
+    margin-bottom: 4px;
+    display: flex;
+`
+const DoneTitle = styled. div`
+    width: 82%;
+    height: 32px;
+    color: white;
+    font-size: 28px;
+    text-align: left;
+    font-weight: bold;
+    margin-left : 15%;
+    margin-top : 1.5rem;
+    margin-bottom: 4px;
+    display: flex;
+`
+const TodoBox = styled.div`
+    position: relative;
+    width: 82%;
+    height: 30%;
+    margin-left: 8%;
+    margin-top: 1rem;
+`
+
+const DoneBox = styled.div`
+    position: relative;
+    width: 82%;
+    height: 30%;
+    margin-left: 8%;
+    margin-top: 1rem;
+`
+const TodoRldBtn = styled.button`
+    margin-left: 50%;
+    border: none;
+    width: 60px;
+    font-size : 25px;
+    background-color : black;
+`
+const DoneRldBtn = styled.button`
+    margin-left: 50%;
+    border: none;
+    width: 60px;
+    font-size : 25px;
+    background-color : black;
+`
+
 function App() {
+  const [todos, setTodos] = useState([]);
+  const addTodoList = (text) => {
+    if (text === ""){ //trim 나중에 적용시키기
+      return alert("입력된 내용이 없습니다.");
+    } else{
+      const todo = {
+        id: getId,
+        text,
+        checked: false
+      }
+      setTodos(todos => todos.concat(todo));
-      setTodos(todos => todos.concat(todo));
+      setTodos([...todos,todo]);
-      setTodos(todos => todos.concat(todo));
+      setTodos([...todos,todo]);
+      getId++;
+    }
+  };
+  const [dones, setDones] = useState([]);
+  const addDoneList = (id, text) => {
+      const done = {
+        id,
+        text,
+        checked: false
+      }
+      setDones(dones => dones.concat(done));
+  }
+  const onRemove = id => {
+    setTodos(todos => todos.filter(todo => todo.id !==id))
+  }
+  const onRemove_dn = id =>{
+    setDones(dones => dones.filter(done => done.id !==id))
+  }
+// const [virtuals, setVirtuals] = useState([]);
+//   const virtualList = (id, text, checked) =>{
+//     const virtual = {
+//       id,
+//       text,
+//       checked
+//     }
+//     setVirtuals(virtuals => virtuals.concat(virtual));
+//   }
+
+  const onChecked = (id) =>{
+    setTodos(todos => 
+      todos.map(todo => 
+        todo.id===id ? {...todo, checked: !todo.checked} : todo,
+      )
+    );
+  //  reArray(todos);
+
+
+
+  };
+
+  const reArray = (todos) =>{
+  //  const virtuals = todos;
+  //  setVirtuals(virtuals => virtuals.filter(virtual=> virtual.checked !==true))
+  //  console.log(virtuals);
+  //  setTodos(todos => todos.filter(todo => todo.checked !== false))
+  //  console.log(todos);
+  //  setTodos(todos => 
+  //    todos.map(todo => 
+  //      todo.checked===true ? {...todo, id: id+5} : todo,
+  //    )
+  //  );
+  //  setTodos(todos => todos.concat(virtuals))
+  //  console.log(todos);
+  //  setVirtuals([])
+  }
+
   return (
-    <div>
-      <h1>17기 프론트 화이팅~ 우하하</h1>
-    </div>
+    <body>
+      <Container>
+        <Title>T O - D O &ensp;L I S T</Title>
+        <TodoInput
+        addTodoList={addTodoList}
+        />
+        <TodoTitle>To-Do ({todos.length})<TodoRldBtn onClick = {() => {setTodos([])}}>🔄</TodoRldBtn></TodoTitle>
+        <TodoBox>
+          <TodoList todos={todos}
+                    onRemove={onRemove}
+                    addDoneList={addDoneList}
+                    onChecked = {onChecked}/>
+        </TodoBox>
+        <DoneTitle>Done ({dones.length})<DoneRldBtn onClick = {() => {setDones([])}}>🔄</DoneRldBtn></DoneTitle>
+        <DoneBox>
+          <DoneList dones={dones}
+                    onRemove_dn={onRemove_dn}
+                    addTodoList={addTodoList}/>
+        </DoneBox>
+      </Container>
+    </body>
   );
 }
 

diff --git a/src/components/DoneItem.js b/src/components/DoneItem.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const TextBox = styled.div`
+    width: 100%;
+    border-color: white;
+    color: white;
+    font-size: 22px;
+    font-weight: medium;
+    height: 23px;
+    margin: 0;
+`
+const DoneBox = styled.div`
+    position: relative;
+    display: flex;
+    width: 90%;
+    margin-left: 10%;
+    margin-top: 0.7rem;
+`
+const RtnBtn = styled.div`
+    background-color: black;
+    border: 1.5px solid red;
+    border-radius: 5%;
+    height: 23px;
+    width: 60px;
+    color : red;
+    font-size: 19px;
+    font-weight: medium;
+    margin-right: 25px;
+    text-align: center;
+`
+const DltBtn = styled.div`
+    background-color: black;
+    border: none;
+    border-radius: 5%;
+    height: 22px;
+    width: 22px;
+    color : white;
+    font-size: 20px;
+    font-weight: medium;
+    margin-left : 10px;
+`
+
+const DoneItem = ({done, onRemove_dn, addTodoList})=>{
+    const {id, text} = done;
+    const onReturn = (id, text) =>{
+        onRemove_dn(id);
+        addTodoList(text);
+
+    }
+
+    return (
+    <DoneBox>
+        <RtnBtn onClick={() => onReturn(id, text)}>복귀</RtnBtn>
+        <TextBox>{text}</TextBox>
+        <DltBtn onClick={() => onRemove_dn(id)}>X</DltBtn>
+    </DoneBox>
+    );
+
+}
+
+export default DoneItem;
diff --git a/src/components/DoneList.js b/src/components/DoneList.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import DoneItem from './DoneItem';
+
+const DoneList = ({dones, onRemove_dn, addTodoList}) =>{
+    return (
+        <div>
+            {dones.map(done =>(
+                <DoneItem done={done} key = {done.id} onRemove_dn = {onRemove_dn} addTodoList={addTodoList}/>
+                // 아 뭔가 이렇게 이중으로 안 넘기고 바로 지우는 방법도 있을 것 같은데...
+            ))}
+        </div>
+    );
+}
+
+export default DoneList;
diff --git a/src/components/TodoInput.js b/src/components/TodoInput.js
@@ -0,0 +1,61 @@
+import {React, useState} from 'react';
+import styled from 'styled-components';
+
+const InputBox = styled.div`
+    margin-left: 10%;
+    margin-top: 1rem;
+    width:80%;
+    height: 35px;
+    border-style: solid;
+    border-width: 1px;
+    border-color: white;
-    border-style: solid;
-    border-width: 1px;
-    border-color: white;
+    border: 1px solid white;
-    border-style: solid;
-    border-width: 1px;
-    border-color: white;
+    border: 1px solid white;
+    position: relative;
+    display: flex;
+`
+const TextInput = styled.input`
+    width: 90%;
+    height: 32px;
+    text-align: center;
+    background-color: black;
+    font-size: 15px;
+    color: gray;
+    border-style:none; 
+`
+const InputButton = styled.button`
+    position: relative;
+    background-color: white;
+    border: solid 0.5px white;
+    width: 10%;
+    height: 35px;
+    text-align: center;
+    color: black;
+    font-size: 28px;
+`
+
+
+const TodoInput = ({addTodoList}) => {
+    const [value, setValue] = useState("");
+    const onChange = e => {
+        setValue(e.target.value);
+    }
+
+    const onSubmit = (e) =>{
+        e.preventDefault();
+        addTodoList(value);
+        setValue("");
+    }
+    return(
+        <form onSubmit={onSubmit}>
+            <InputBox>
+                <TextInput 
+                placeholder="&emsp;할 일을 입력해주세요" 
+                value={value}
+                onChange={onChange}
+                ></TextInput>
+                <InputButton>+</InputButton>
+            </InputBox>
+        </form>
+    );
+}
+
+export default TodoInput;