박은진 week3

src/App.css

@@ -33,7 +33,7 @@ body {
   margin-bottom: 33px;
 }
 
-.text {
+.name {
   color: #1F2937;
   font-weight: 700;
   line-height: 36px; /* 150% */
@@ -76,6 +76,52 @@ body {
   line-height: 21px;
 }
 
+.toDoInputContainer {
+  display: flex;
+  align-items: center;
+  width: 640px;
+  height: 46.6px;
+  padding-right: 0;
+  gap: 12px;
+  padding-bottom: 24px;
+
+}
+
+.toDoInput {
+  padding: 12px 16px;
+  align-items: center;
+  flex: 1 0 0;
+  border-radius: 8px;
+  border: 0.8px solid #E5E7EB;
+  background: transparent;
+  box-sizing: border-box;
+}
+
+.toDoInput:focus {
+  border: 2px solid #3B82F6;
+  box-shadow: 0 0 0 4px #3B82F6;
+  background: rgba(255, 255, 255, 0.00);
+  outline: none;
+}
+
+.toDoInputBtn {
+  display: flex;
+  width: 72.2px;
+  padding: 12.8px 23.2px 12.8px 24px;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: #3B82F6;
+  border: none;
+
+  color: white;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 21px;
+}
+
 .toDoList {
   display: flex;
   flex-direction: column;
@@ -85,20 +131,47 @@ body {
 .item {
   display: flex;
   align-items: center;
+  align-self: stretch;
+  flex-shrink: 0;
+
   padding: 16px;
   background-color: #FFF;
   font-size: 14px;
   color: #1F2937;
   border-radius: 12px;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10);
   gap: 12px;
+
 }
 
 .item.checked {
   opacity: 0.5;
-  text-decoration-line: line-through;
 }
 
+.delBtn {
+  display: flex;
+  width: 40px;
+  height: 40px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  margin-left: auto;
+
+  color: #0A0A0A;
+  text-align: center;
+  font-family: Pretendard;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 30px; /* 150% */
+
+  border: none;
+  background: transparent;
+
+  cursor: pointer;
+}
+
+
 .CheckedBox {
   display: flex;
   justify-content: center;
@@ -120,6 +193,7 @@ body {
 .UncheckedBox {
   width: 24px;
   height: 24px;
-  border-radius: 13421800px;
+  border-radius: 50%;
   border: 2px solid #E5E7EB;
 }
+

src/App.tsx

@@ -1,16 +1,37 @@
-// import { useState } from 'react'
-
+import { useState } from "react";
 import "./App.css";
-import { TodoHeader } from "./components/TodoHeader";
+import  TodoHeader  from "./components/TodoHeader";
+import TodoInput from "./components/TodoInput";
 import TodoList from "./components/TodoList";
 
 function App() {
 
+  const [todos, setTodos] = useState([
+    { id: 0, text: "리액트 공식문서 읽기", completed: true},
+    { id: 1, text: "알고리즘 문제 풀기", completed: true},
+    { id: 2, text: "운동 30분 하기", completed: false},
+    { id: 3, text: "프로젝트 회의 준비", completed: false},
+    { id: 4, text: "장보기 하기", completed: false}
+  ]);
+
+  function deleteTodo(id: number) {
+    const result = [];
+
+    for (let i = 0; i < todos.length; i++) {
+      if (todos[i].id !== id) {
+        result.push(todos[i]);
+      }
+    }
+
+    setTodos(result); 
+  }
+
   return (
     <>
       <div className="container">
         <TodoHeader />
-        <TodoList />
+        <TodoInput todos={todos} setTodos={setTodos} />
+        <TodoList todos={todos} onDelete={deleteTodo}/>
 
       </div>
     </>

src/components/TodoCard.tsx

@@ -1,46 +1,43 @@
-interface CardProps {
-  name: string;
-  isChecked: boolean;
+import checkedIcon from "../assets/icons/checkedIcon.svg";
+
+interface TodoCardProps {
+  id: number;
+  text: string;
+  completed: boolean;
+  onDelete: (id: number) => void;
 }
 
-export function Card({ name, isChecked }: CardProps) {
-  if (isChecked) {
+export default function TodoCard({
+  id,
+  text,
+  completed,
+  onDelete,
+}: TodoCardProps) {
+  function handleClick() {
+    onDelete(id);
+  }
+
+  if (completed) {
     return (
       <li className={`item checked`}>
         <div className="CheckedBox">
-          <svg
-            className="CheckedIcon"
-            xmlns="http://www.w3.org/2000/svg"
-            width="14"
-            height="10"
-            viewBox="0 0 14 10"
-            fill="none"
-          >
-            <g clip-path="url(#clip0_16_101)">
-              <path
-                d="M1 5L5 9L13 1"
-                stroke="white"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </g>
-            <defs>
-              <clipPath id="clip0_16_101">
-                <rect width="14" height="10" fill="white" />
-              </clipPath>
-            </defs>
-          </svg>
+          <img src={checkedIcon} alt="checked" />
+        </div>
+        <div className="text">
+          <del>{text}</del>
         </div>
-        {name}
+        <button className="delBtn">🗑</button>
       </li>
     );
   }
 
   return (
     <li className="item">
       <div className="UncheckedBox"></div>
-      {name}
+      <div className="text">{text}</div>
+      <button className="delBtn" onClick={handleClick}>
+        🗑
+      </button>
     </li>
   );
 }

src/components/TodoHeader.tsx

@@ -1,10 +1,10 @@
-export function TodoHeader() {
-    return (
-        <>
-            <div className="title">
-                <div className="icon">✅</div>
-                <div className="text">오늘의 할 일</div>
-            </div>
-        </>
-    );
-}
+export default function TodoHeader() {
+  return (
+    <>
+      <h1 className="title">
+        <div className="icon">✅</div>
+        <div className="text">오늘의 할 일</div>
+      </h1>
+    </>
+  );
+}