[2주차] 송지석 미션 제출합니다.

src/App.js

@@ -2,7 +2,28 @@ 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`
+  main {
+    display: flex;
+    flex-direction: column;
+    width: 400px;
+    height: 620px;
+    margin: 30px auto;
+    padding: 25px;
+    background-color: #ffffff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    border-radius: 15px;
+  }
+
+  h1 {
+    font-size: 35px;
+    color: #000000;
+    text-align: center;
+    margin-bottom: 20px;
+  }
+`;
 function App() {
   const [todos, setTodos] = useState([]);
   const [dones, setDones] = useState([]);
@@ -45,6 +66,7 @@ function App() {
 
   return (
     <>
+    <GlobalStyle />
       <main>
         <h1>할 일</h1>
         <InputTodo addTodo={addTodo} />

src/components/doneList.js

@@ -0,0 +1,38 @@
+import React from "react";
+import ItemList from "./itemList";
+import styled from 'styled-components';
+
+const ListSection = styled.section`
+    display: flex;
+    flex-direction: column; 
+    height: 170px; 
+    overflow-y: auto;
+    margin-bottom: 20px; 
+`;
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    width: 100%;  
+`;
+
+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;

src/components/inputTodo.js

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+const AddButton = styled.button`
+  width: 90px;
+  padding: 13px;
+  margin-left: 25px;
+  border: none;
+  background-color: #000000;
+  color: #fff;
+  border-radius: 5px;
+  line-height: 18px;
+
+  &:hover {
+    background-color: #FF2D00;
+  }
+`;
+
+const TodoInput = styled.input`
+  width: 240px;
+  padding: 10px;
+  border: 2px solid #ddd;
+  border-radius: 5px;
+  font-size: 18px;
+  line-height: 18px;
+
+  &: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;

src/components/itemList.js

@@ -0,0 +1,56 @@
+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: 6px 5px;
+  width: 60px;
+  font-size: 14px;
+  border-radius: 20px;
+  box-shadow: 0 4px 10px rgba(255, 182, 193, 0.2);
+  margin-right: 5px;
+
+  &:hover {
+    background-color: #FF69B4;
+    box-shadow: 0 4px 10px rgba(255, 105, 180, 0.4);
+  }
+
+  &:active {
+    box-shadow: 0 4px 10px rgba(255, 105, 180, 0.2);
+  }
+`;
+
+const TodoItemContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+  margin: 8px 0;
+  cursor: pointer;
+`;
+
+const TodoText = styled.span`
+  flex-grow: 1;
+  margin-right: 10px;
+`;
+
+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;

src/components/todoList.js

@@ -0,0 +1,38 @@
+import React from "react";
+import ItemList from "./itemList";
+import styled from 'styled-components';
+
+const ListSection = styled.section`
+    display: flex;
+    flex-direction: column; 
+    height: 170px; 
+    overflow-y: auto;
+    margin-bottom: 20px; 
+`;
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    width: 100%;  
+`;
+
+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;