CEOS-Developers · geeoneee · Sep 20, 2023 · Sep 20, 2023 · Sep 20, 2023 · Sep 21, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.0.8",
     "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>To-Do list</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,9 +1,43 @@
+import TodoList from "./TodoList";
+import { styled, createGlobalStyle } from "styled-components";
+
 function App() {
-	return (
-		<div>
-			<h1>18기 프론트 화이팅~ 푸하항ㅋ</h1>
-		</div>
-	);
+  return (
+    <>
+      <GlobalStyle />
+      <Wrapper>
+        <TodoList />
+      </Wrapper>
+    </>
+  );
 }
 
 export default App;
+
+//CSS
+
+const GlobalStyle = createGlobalStyle`
+@font-face{
+  font-family: "양진체";
+  src: url("https://cdn.jsdelivr.net/gh/supernovice-lab/[email protected]/yangjin.woff")
+    format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+  html, body, #root{
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }
+`;
+const Wrapper = styled.div`
+  background-image: url("https://www.10wallpaper.com/wallpaper/1366x768/2106/Macos_Monterey_2021_Apple_WWDC_5K_Poster_1366x768.jpg");
+  height: 100%;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  font-family: "양진체";
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+`;
diff --git a/src/Clock.js b/src/Clock.js
@@ -0,0 +1,37 @@
+import { useState, useEffect } from "react";
+import { styled } from "styled-components";
+
+//화면 상단 시계
+
+const Clock = () => {
+  const [time, setTime] = useState(new Date());
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setTime(new Date());
+    }, 1000);
+    return () => clearInterval(id);
+  }, []);
+
+  const timeOptions = {
+    hour12: false, // 24 시간 형식 사용
+    hour: "2-digit", // 항상 두자릿수로 표현
+    minute: "2-digit",
+    second: "2-digit",
+  };
+
+  return (
+    <SectionName>
+      <h1>{time.toLocaleTimeString([], timeOptions)}</h1>
+    </SectionName>
+  );
+};
+
+export default Clock;
+
+//CSS
+const SectionName = styled.div`
+  font-size: 30px;
+  display: flex;
+  justify-content: center;
+`;
diff --git a/src/ListContainer.js b/src/ListContainer.js
@@ -0,0 +1,90 @@
+import TodoItem from "./TodoItem";
+import { styled } from "styled-components";
+
+const ListContainer = ({ onEdit, onDelete, moveItem, data }) => {
+  // isDone 값이 false인 데이터만 필터링 (todo container에 띄우기)
+  const todoData = data.filter((item) => !item.isDone);
+
+  // isDone 값이 true인 데이터만 필터링 (done container에 띄우기)
+  const doneData = data.filter((item) => item.isDone);
+
+  return (
+    <div className="ListContainer">
+      <Container>
+        <TitleContainer>
+          <Subtitle>"Todo 🟡"</Subtitle>
+          <CountTitle>
+            You have <CountNum>{todoData.length}</CountNum> things to do.
+          </CountTitle>
+        </TitleContainer>
+        <div>
+          {todoData &&
+            todoData.map((it) => (
+              <TodoItem
+                key={it.id}
+                {...it}
+                onDelete={onDelete}
+                onEdit={onEdit}
+                moveItem={moveItem}
+              />
+            ))}
+        </div>
+      </Container>
+      <Container>
+        <TitleContainer>
+          <Subtitle>"Done 🔵"</Subtitle>
+          <CountTitle>
+            You completed <CountNum>{doneData.length}</CountNum> things.
+          </CountTitle>
+        </TitleContainer>
+        <div>
+          {doneData &&
+            doneData.map((it) => (
+              <TodoItem
+                key={it.id}
+                {...it}
+                onEdit={onEdit}
+                onDelete={onDelete}
+                moveItem={moveItem}
+              />
+            ))}
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default ListContainer;
+
+//CSS
+const Container = styled.div`
+  width: 20rem;
+  height: 10rem;
+  background-color: rgba(255, 255, 255, 0.5);
+  padding: 2rem;
+  padding-bottom: 1rem;
+  margin-bottom: 2.5rem;
+  border-radius: 20px;
+  overflow-y: auto;
+  max-height: 130px;
+`;
+
+const TitleContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+`;
+
+const Subtitle = styled.div`
+  font-size: 20px;
+`;
+
+const CountTitle = styled.div`
+  font-size: 13px;
+  color: grey;
+`;
+
+const CountNum = styled.span`
+  color: black;
+`;
diff --git a/src/TodoInput.js b/src/TodoInput.js
@@ -0,0 +1,76 @@
+import { useState } from "react";
+import { styled } from "styled-components";
+
+const TodoInput = ({ onCreate }) => {
+  const [content, setContent] = useState("");
+
+  //input_box에 엔터키 입력시 함수
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      if (e.nativeEvent.isComposing) return;
+      handleSubmit();
+    }
+  };
+
+  //새로운 데이터가 입력될 때의 함수
+  const handleSubmit = () => {
+    if (content.trim() !== "") {
+      onCreate(content);
+      setContent("");
+    } else {
+      alert("할 일을 1자 이상 입력하세요.");
+      return;
+    }
+  };
+
+  return (
+    <Container>
+      <InputBox
+        name="input_box"
+        value={content}
+        placeholder="type here..."
+        onChange={(e) => {
+          setContent(e.target.value);
+        }}
+        onKeyDown={handleKeyDown}
+      />
+      <InputBtn onClick={handleSubmit}>✚</InputBtn>
+    </Container>
+  );
+};
+export default TodoInput;
+
+//CSS
+
+const Container = styled.div`
+  width: 380px;
+  padding: 0.5rem;
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const InputBox = styled.input`
+  width: 200px;
+  flex: 1;
+  padding: 0.8rem;
+  border: none;
+  outline: none;
+  border-radius: 10px;
+`;
+
+const InputBtn = styled.button`
+  width: 40px;
+  background-color: black;
+  color: #ffffff;
+  border: none;
+  border-radius: 10px;
+  padding: 0.8rem;
+  cursor: pointer;
+  margin-left: 10px;
+  &:hover {
+    background-color: gray; /* 마우스 호버 시 배경색 변경 */
+  }
+`;