[2주차] 이규호 미션 제출합니다.

src/App.css

@@ -4,18 +4,25 @@
     font-weight: normal;
     font-style: normal;
 }
+/* 색상 변수 (코드리뷰 반영) */
 :root{
     --card-color: #ECECEC;
     --bg-color: black;
 }
+.wrapper{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
 .header{
     display: flex;
     height: 150px;
-    width: 500px;
+    width: 480px;
     align-items: center;
-    justify-content: center;
+
 }
 .logo{
+    display: flex;
     font-size: 2em;
     font-weight: 700;
     width: 300px;
@@ -30,14 +37,15 @@
 .todoList{
     display:flex;
     flex-direction: column;
+    text-align: center;
     width: 28em;
 }
 .todoInput{/*input container*/
     display:flex;
     height:35px;   
     padding-bottom: 5px;
 }
-input{/*input 태그 따로 설정*/
+input[type=text]{/*input 태그 따로 설정*/
     background-color: var(--bg-color);
     color: var(--card-color);
     border: solid 2px var(--card-color);
@@ -66,6 +74,7 @@ input{/*input 태그 따로 설정*/
     height: 100px;
     margin : 7px 0;
     border-radius: 8px;
+    position: relative;
 }
 .todoCard.checked{
     transition : opacity 0.3s;
@@ -75,11 +84,12 @@ input{/*input 태그 따로 설정*/
     opacity: 0.6;
 }
 .todoElem{
-    flex:1; /*여백 다 채우게끔*/
     margin-left:30px;
 }
 input[type=checkbox]{
-    margin-left: 20px;
+    position:absolute; /*checkbox 위치 고정 (코드리뷰 반영)*/
+    top : 40px;
+    right : 15px;
 }
 .todoDelete{
     border: none;

src/App.js

@@ -1,50 +1,50 @@
 import "./App.css";
 import { useState, useEffect } from "react";
 import Cards from "./components/Cards.js";
+import Clock from "./components/Clock.js";
 function App() {
-  const [todo, setTodo] = useState(["운동하기", "밥먹기"]);
-  const [currentTime, setCurrentTime] = useState(new Date());
-
-  // 시간 업데이트
-  const updateClock = () => {
-    setCurrentTime(new Date());
+  const [todo, setTodo] = useState([]);
+  const [newTodo, setNewTodo] = useState("");
+  //input handler
+  const handleInputChange = (e) => {
+    setNewTodo(e.target.value);
   };
 
-  useEffect(() => {
-    const timer = setInterval(updateClock, 1000);
-
-    return () => {
-      clearInterval(timer);
-    };
-  }, []);
-
-  const options = {
-    weekday: "long",
-    month: "numeric",
-    day: "numeric",
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-    hour12: false, //오전 오후 나누는거 false 처리
+  // + 누르거나 enter 둘다 해당함수 호출
+  const handleAddTodo = () => {
+    if (newTodo.trim() !== "") {
+      setTodo([newTodo, ...todo]);
+      setNewTodo("");
+    }
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    handleAddTodo();
   };
-  //string으로 만들어 변수로 변환한다.
-  const stringTime = currentTime.toLocaleDateString("ko-KR", options);
-
   return (
-    <>
-      <div className="header">
+    <div className="wrapper">
+      <header className="header">
         <div className="logo">TODO-list</div>
         <div className="detail">
           <div>투두리스트를 작성하고 오늘 하루를 기록해요</div>
-          <div id="clock-js">{stringTime}</div>
+          <Clock />
         </div>
-      </div>
-      <div className="todoInput">
-        <input placeholder=" ADD TODO"></input>
-        <button id="plusButton">+</button>
-      </div>
-      <Cards todo={todo}></Cards>
-    </>
+      </header>
+      <form className="todoInput" onSubmit={handleSubmit}>
+        <input
+          type="text"
+          placeholder=" ADD TODO"
+          value={newTodo}
+          onChange={handleInputChange}
+        />
+        <button id="plusButton" type="submit">
+          +
+        </button>
+      </form>
+      <main>
+        <Cards todo={todo}></Cards>
+      </main>
+    </div>
   );
 }