CEOS-Developers · kyuhho · Sep 19, 2023 · Sep 19, 2023 · Sep 20, 2023 · Sep 20, 2023
diff --git a/.gitignore b/.gitignore
@@ -1 +1 @@
-node_modules
+node_modules
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.0.8",
+    "styled-reset": "^4.5.1",
     "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>TODO</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,87 @@
+@font-face {
+    font-family: 'GmarketSansMedium';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/GmarketSansMedium.woff') format('woff');
+    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: 480px;
+    align-items: center;
+
+}
+.logo{
+    display: flex;
+    font-size: 2em;
+    font-weight: 700;
+    width: 300px;
+}
+.detail{
+    font-size: 1em;
+    width: 180px;
+}
+#clock-js{
+    padding-top: 5px;
+}
+.todoList{
+    display:flex;
+    flex-direction: column;
+    text-align: center;
+    width: 28em;
+}
+.todoInput{/*input container*/
+    display:flex;
+    height:35px;   
+    padding-bottom: 5px;
+}
+input[type=text]{/*input 태그 따로 설정*/
+    background-color: var(--bg-color);
+    color: var(--card-color);
+    border: solid 2px var(--card-color);
+    border-radius: 6px;
+    width: 400px;
+}
+#plusButton{
+    background-color: var(--bg-color);
+    color: var(--card-color);
+    border: solid 2px var(--card-color);
+    border-radius: 6px;
+    width: 35px;
+    margin-left: 5px;
+    transition : border 0.3s, color 0.3s;
+    cursor: pointer;
+}
+#plusButton:hover{
+    border : solid 2px #5f5f5f;
+    color : #5f5f5f;
+}
+
+input[type=checkbox]{
+    position:absolute; /*checkbox 위치 고정 (코드리뷰 반영)*/
+    top : 40px;
+    right : 15px;
+    cursor: pointer;
+}
+.todoDelete{
+    border: none;
+    margin-bottom: 80px;
+    margin-right: 7px;
+    font-size: 7px;
+    border-radius: 2px;
+    transition : background-color 0.3s;
+    cursor: pointer;
+}
+.todoDelete:hover{
+    background-color: #b1b1b1;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,9 +1,77 @@
+import "./App.css";
+import { useState, useEffect } from "react";
+import Cards from "./components/Cards.js";
+import Clock from "./components/Clock.js";
 function App() {
-	return (
-		<div>
-			<h1>18기 프론트 화이팅~ 푸하항ㅋ</h1>
-		</div>
-	);
+  const storedTodo = JSON.parse(localStorage.getItem("data")) || [];
+  const [todo, setTodo] = useState(storedTodo);
+  const [newTodo, setNewTodo] = useState("");
+  //count로 수 올려가면서 차례로 색 지정
+  const [cardColor, setCardColor] = useState([
+    "#ECECEC",
+    "#A6DDF5",
+    "#F5AEAE",
+    "#87DDCE",
+    "#F5EDB6",
+  ]);
+  const [colorCnt, setColorCnt] = useState(0);
+  //todo 변경 시 localStorage 저장
+  useEffect(() => {
+    localStorage.setItem("data", JSON.stringify(todo));
+  }, [todo]);
+  //input handler
+  const handleInputChange = (e) => {
+    setNewTodo(e.target.value);
+  };
+  // submit 시 todo 추가
+  const handleAddTodo = () => {
+    if (newTodo.trim() !== "") {
+      const newTodoItem = {
+        content: newTodo,
+        checked: false,
+        color: cardColor[colorCnt % 5],
+      };
+      setTodo([newTodoItem, ...todo]);
+      setColorCnt((colorCnt + 1) % 5);
+      setNewTodo("");
+    }
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (newTodo.length >= 80) {
+      alert("80자 이하로 입력해주세요");
+    } else {
+      handleAddTodo();
+    }
+  };
+  return (
+    <div className="wrapper">
+      <header className="header">
+        <div className="logo">TODO-list</div>
+        <div className="detail">
+          <div>
+            투두리스트를 작성하고
+            <br /> 오늘 하루를 기록해요
+          </div>
+          <Clock />
+        </div>
+      </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} setTodo={setTodo}></Cards>
+      </main>
+    </div>
+  );
 }
 
 export default App;
diff --git a/src/GlobalStyle.js b/src/GlobalStyle.js
@@ -0,0 +1,12 @@
+import { createGlobalStyle } from "styled-components";
+import reset from "styled-reset";
+
+const GlobalStyle = createGlobalStyle`
+    ${reset};
+    body{
+        background-color: black;
+        color : #ECECEC;
+        font-family: 'GmarketSansMedium';
+    }
+`;
+export default GlobalStyle;
diff --git a/src/components/Cards.js b/src/components/Cards.js
@@ -0,0 +1,90 @@
+import "../App";
+import styled, { css } from "styled-components";
+import { useEffect, useState } from "react";
+const TodoCard = styled.div`
+  background-color: ${(props) => props.color};
+  color: var(--bg-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100px;
+  margin: 5px 0;
+  border-radius: 8px;
+  position: relative;
+  transition: opacity 0.3s;
+  opacity: ${(props) => (props.checked ? "0.5" : "1")};
+  &:hover {
+    opacity: ${(props) => (props.checked ? "0.6" : "1")};
+  }
+`;
+const TodoElem = styled.div`
+  margin-left: 30px;
+  text-decoration: ${(props) => (props.checked ? "line-through" : "none")};
+  max-width: 350px;
+  word-wrap: break-word;
+`;
+function Cards({ todo, setTodo }) {
+  //checked card 구분
+  const unCheckedTodo = todo.filter((element) => !element.checked);
+  const checkedTodo = todo.filter((element) => element.checked);
+
+  //todo state 에서 삭제
+  const handleOnClick = (element) => {
+    const copyTodo = [...todo];
+    const index = copyTodo.findIndex((e) => e === element);
+    copyTodo.splice(index, 1);
+    setTodo(copyTodo);
+  };
+  //element에 해당하는 index를 찾아서 checked 바꿔주고 state 변경
+  const handleChecked = (element) => {
+    const copyTodo = [...todo];
+    const index = copyTodo.findIndex((e) => e === element);
+    copyTodo[index].checked = !copyTodo[index].checked;
+    setTodo(copyTodo);
+  };
+
+  return (
+    <>
+      <div className="todoList">
+        {unCheckedTodo.map((element, i) => {
+          return (
+            <TodoCard color={element.color}>
+              <TodoElem>{element.content}</TodoElem>
+              <input
+                type="checkbox"
+                checked={element.checked}
+                onChange={() => handleChecked(element)}
+              ></input>
+              <div
+                className="todoDelete"
+                onClick={() => handleOnClick(element)}
+              >
+                x
+              </div>
+            </TodoCard>
+          );
+        })}
+        {checkedTodo.map((element, i) => {
+          return (
+            <TodoCard checked color={element.color}>
+              <TodoElem checked>{element.content}</TodoElem>
+              <input
+                type="checkbox"
+                checked={element.checked}
+                onChange={() => handleChecked(element)}
+              ></input>
+              <div
+                className="todoDelete"
+                onClick={() => handleOnClick(element)}
+              >
+                x
+              </div>
+            </TodoCard>
+          );
+        })}
+      </div>
+    </>
+  );
+}
+
+export default Cards;
diff --git a/src/components/Clock.js b/src/components/Clock.js
@@ -0,0 +1,34 @@
+import "../App.css";
+import { useState, useEffect } from "react";
+
+function Clock() {
+  const [currentTime, setCurrentTime] = useState(new Date());
+
+  // 시간 업데이트
+  const updateClock = () => {
+    setCurrentTime(new Date());
+  };
+
+  useEffect(() => {
+    //mount 시 timer 셋팅
+    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 처리
+  };
+  //string으로 만들어 변수로 변환한다.
+  const stringTime = currentTime.toLocaleDateString("ko-KR", options);
+
+  return <div id="clock-js">{stringTime}</div>;
+}
+
+export default Clock;
diff --git a/src/index.js b/src/index.js
@@ -1,10 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-ReactDOM.render(
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import GlobalStyle from "./GlobalStyle";
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
   <React.StrictMode>
+    <GlobalStyle />
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
+  </React.StrictMode>
+);