CEOS-Developers · leejin-rho · Sep 19, 2023 · Sep 19, 2023 · Sep 21, 2023 · Sep 21, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
-node_modules
+/node_modules
+package-lock.json
+.DS_Store
diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/assets/fonts/Pretendard-Black.otf b/assets/fonts/Pretendard-Black.otf
diff --git a/assets/fonts/Pretendard-Bold.otf b/assets/fonts/Pretendard-Bold.otf
diff --git a/assets/fonts/Pretendard-ExtraBold.otf b/assets/fonts/Pretendard-ExtraBold.otf
diff --git a/assets/fonts/Pretendard-ExtraLight.otf b/assets/fonts/Pretendard-ExtraLight.otf
diff --git a/assets/fonts/Pretendard-Light.otf b/assets/fonts/Pretendard-Light.otf
diff --git a/assets/fonts/Pretendard-Medium.otf b/assets/fonts/Pretendard-Medium.otf
diff --git a/assets/fonts/Pretendard-Regular.otf b/assets/fonts/Pretendard-Regular.otf
diff --git a/assets/fonts/Pretendard-SemiBold.otf b/assets/fonts/Pretendard-SemiBold.otf
diff --git a/assets/fonts/Pretendard-Thin.otf b/assets/fonts/Pretendard-Thin.otf
diff --git a/assets/fonts/PretendardVariable.ttf b/assets/fonts/PretendardVariable.ttf
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,12 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/free-regular-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@react-navigation/native": "^6.1.7",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "date-fns": "^2.30.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.16.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>react-todo-18th</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,9 @@
+import React from "react";
+import Todo from "./components/Todo";
+import "./index.css";
+
 function App() {
-	return (
-		<div>
-			<h1>18기 프론트 화이팅~ 푸하항ㅋ</h1>
-		</div>
-	);
+  return <Todo />;
 }
 
 export default App;
diff --git a/src/components/Clock.js b/src/components/Clock.js
@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+import { format } from "date-fns";
+
+const ClockText = styled.span`
+  font-family: "Pretendard-SemiBold";
+  font-size: 13px;
+  text-align: center;
+  line-height: 1.5em;
+  margin-top: 5px;
+`;
+
+export default function Clock() {
+  const [now, setNow] = useState(new Date());
+
+  //1초마다 now 다시 set
+  useEffect(() => {
+    const time = setInterval(() => {
+      setNow(new Date());
+    }, 1000);
+    return () => clearInterval(time);
+  }, []);
+
+  let clockFormat = format(now, "hh:mm aa");
+
+  return <ClockText>{clockFormat}</ClockText>;
+}
diff --git a/src/components/DailyDate.js b/src/components/DailyDate.js
@@ -0,0 +1,41 @@
+import React from "react";
+import styled from "styled-components";
+import { format } from "date-fns";
+
+const DateField = styled.div`
+  display: flex;
+  width: 100%;
+  height: 10%;
+  background-color: #e0e0e0;
+  color: #302e2e;
+  border: 0.5px solid #736e6e;
+  margin-bottom: 5px;
+  border-radius: 10px;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+`;
+
+const DateText = styled.span`
+  font-family: "Pretendard-SemiBold";
+  letter-spacing: 1px;
+  font-size: 13px;
+  padding-top: 3px;
+`;
+
+export default function DailyDate() {
+  const week = new Array("sun", "mon", "tue", "wed", "thu", "fri", "sat");
+
+  const now = new Date();
+  const day = week[now.getDay()];
+
+  let formatDate = format(now, "yyyy-MM-dd");
+
+  return (
+    <DateField>
+      <DateText>
+        {formatDate} {day}
+      </DateText>
+    </DateField>
+  );
+}
diff --git a/src/components/InputItem.js b/src/components/InputItem.js
@@ -0,0 +1,79 @@
+import React from "react";
+import styled from "styled-components";
+import { useState, useCallback } from "react";
+
+const Container = styled.form`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 5px;
+  background-color: #e0e0e0;
+  border-radius: 10px;
+  padding: 5px;
+  height: 10%;
+  box-sizing: border-box;
+  border: 0.5px solid #736e6e;
+`;
+
+const InputField = styled.input`
+  width: 90%;
+  padding: 3px;
+  border: none;
+  border-bottom: 1px solid #555252;
+  background-color: transparent;
+  color: #555252;
+  font-family: "Pretendard-Regular";
+  margin-left: 3px;
+  box-sizing: border-box;
+  &:focus {
+    outline-style: none;
+  }
+`;
+
+const AddButton = styled.button`
+  margin-top: 3px;
+  width: 20px;
+  height: 30px;
+  background-color: transparent;
+  color: #555252;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+`;
+
+export default function TodoInput({ createTodo }) {
+  const [value, setValue] = useState("");
+
+  const onChange = useCallback(
+    (e) => {
+      setValue(e.target.value);
+    },
+    [value]
+  );
+
+  const onSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+
+      //입력한 값이 없을 때 alert 추가
+      if (value.trim() == "") {
+        alert("할일을 입력해주세요.");
+      } else {
+        createTodo(value);
+        setValue("");
+      }
+    },
+    [value]
+  );
+
+  return (
+    <Container onSubmit={onSubmit}>
+      <InputField
+        onChange={onChange}
+        value={value}
+        placeholder="할 일을 입력하세요"
+      />
+      <AddButton type="submit">+</AddButton>
+    </Container>
+  );
+}
diff --git a/src/components/ListItem.js b/src/components/ListItem.js
@@ -0,0 +1,81 @@
+import React from "react";
+import styled from "styled-components";
+import { faCircle, faCircleCheck } from "@fortawesome/free-regular-svg-icons";
+import { faTrashCan, faRotateLeft } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const Item = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 5px;
+  width: 100%;
+  box-sizing: border-box;
+  cursor: pointer;
+`;
+
+const ItemText = styled.span`
+  font-family: "Pretendard-Regular";
+  font-size: 13px;
+  margin: 3px 8px 0px 8px;
+`;
+
+const ClickedText = styled.span`
+  font-family: "Pretendard-Regular";
+  font-size: 13px;
+  margin: 3px 8px 0px 8px;
+  text-decoration: line-through;
+`;
+
+const IconBox = styled.div`
+  display: flex;
+`;
+
+export default function ListItem({ input, onClick, isClicked, deleteList }) {
+  //삭제할 때 alert
+  const OpenConfirm = () => {
+    if (window.confirm("정말 삭제하시겠습니까?")) {
+      deleteList();
+    }
+  };
+
+  return (
+    <Item>
+      {isClicked ? (
+        <FontAwesomeIcon icon={faCircleCheck} style={{ height: 13 }} />
+      ) : (
+        <FontAwesomeIcon
+          onClick={onClick}
+          icon={faCircle}
+          style={{ height: 13 }}
+        />
+      )}
+      {isClicked ? (
+        <ClickedText>{input}</ClickedText>
+      ) : (
+        <ItemText>{input}</ItemText>
+      )}
+
+      {isClicked ? (
+        <IconBox>
+          <FontAwesomeIcon
+            icon={faRotateLeft}
+            style={{ height: 13, marginRight: 3 }}
+            onClick={onClick}
+          />
+          <FontAwesomeIcon
+            icon={faTrashCan}
+            style={{ height: 13 }}
+            onClick={OpenConfirm}
+          />
+        </IconBox>
+      ) : (
+        <FontAwesomeIcon
+          icon={faTrashCan}
+          style={{ height: 13 }}
+          onClick={OpenConfirm}
+        />
+      )}
+    </Item>
+  );
+}