dogVelopers · hanseulhee · May 28, 2022 · May 28, 2022 · May 28, 2022 · May 28, 2022
diff --git a/README.md b/README.md
@@ -3,3 +3,7 @@
 2022년도 개발자들 FE - 리액트 03
 
 > 6주차 과제 repo
+
+## Result
+
+![ezgif com-gif-maker (4)](https://user-images.githubusercontent.com/63100352/170821552-5fc38705-3830-4a3f-a53c-4e31a703bcbd.gif)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.9.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",

diff --git a/public/index.html b/public/index.html
@@ -26,7 +26,7 @@
     -->
     <title>React App</title>
   </head>
-  <body>
+  <body style="margin: 0">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,15 +1,25 @@
-import CommentSection from "./components/CommentSection";
-import Introduce from "./components/Introduce";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import Clock from "./components/Clock";
+import CountUp from "./components/CountUp";
+import WaitMessage from "./components/WaitMessage";
 
 function App() {
   return (
-    <main>
-      <h1>안녕하세요! 저는 오혜성이에여</h1>
-
-      <Introduce />
-      <CommentSection />
-    </main>
+    <section css={sortItem}>
+      <CountUp />
+      <WaitMessage />
+      <Clock />
+    </section>
   );
 }
 
 export default App;
+
+const sortItem = css`
+  display: flex;
+  flex-direction: column;
+  padding: 30px;
+  font-size: 22px;
+  font-weight: 700;
+`;
diff --git a/src/components/Clock.tsx b/src/components/Clock.tsx
@@ -0,0 +1,21 @@
+function Clock() {
+  const clock = document.querySelector<HTMLSpanElement>(".clock");
+
+  const currentTime = new Date();
+  const currentHour = currentTime.getHours();
+  const currentMinutes = String(currentTime.getMinutes()).padStart(2, "0");
+  const currentSecond = String(currentTime.getSeconds()).padStart(2, "0");
+
+  if (clock) {
+    clock.innerText = `${currentHour} : ${currentMinutes} : ${currentSecond}`;
+  }
+  setInterval(Clock);
+
+  return (
+    <>
+      <span className="clock">00 : 00 : 00</span>
+    </>
+  );
+}
+
+export default Clock;
diff --git a/src/components/CountUp.tsx b/src/components/CountUp.tsx
@@ -0,0 +1,37 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import { useState } from "react";
+
+function Count() {
+  const [count, setCount] = useState<number>(0);
+  function CountUp() {
+    setCount((prev) => prev + 1);
+  }
+  return (
+    <div css={sortItem}>
+      <span>{count}</span>
+      <button css={increaseButton} onClick={CountUp}>
+        더하기
+      </button>
+    </div>
+  );
+}
+
+export default Count;
+
+const sortItem = css`
+  display: flex;
+  flex-direction: column;
+`;
+
+const increaseButton = css`
+  all: unset;
+  width: fit-content;
+  height: fit-content;
+  padding: 10px 14px;
+  border-radius: 5px;
+  background-color: #e84393;
+  font-weight: 400;
+  font-size: 13px;
+  cursor: pointer;
+`;
diff --git a/src/components/WaitMessage.tsx b/src/components/WaitMessage.tsx
@@ -0,0 +1,32 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import { useEffect, useState } from "react";
+
+function WaitMessage() {
+  const [textState, setTextState] = useState<string>("잠시만 기다려주세요!!");
+
+  useEffect(() => {
+    const timeout = setTimeout(() => setTextState("거의 다 됐어요!"), 3000);
+    return () => clearTimeout(timeout);
+  }, []);
+
+  useEffect(() => {
+    const timeout = setTimeout(
+      () => setTextState("정보가 확인됐어요 :D"),
+      8000
+    );
+    return () => clearTimeout(timeout);
+  }, []);
+
+  return (
+    <div css={itemWrapper}>
+      <span>{textState}</span>
+    </div>
+  );
+}
+
+export default WaitMessage;
+
+const itemWrapper = css`
+  margin: 20px 0;
+`;