JNU-econovation · kanghaeun · May 6, 2024 · May 13, 2024 · May 13, 2024 · May 13, 2024
diff --git a/index.html b/index.html
@@ -1,8 +1,12 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React</title>
   </head>

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,35 +1,11 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
-
-function App() {
-  const [count, setCount] = useState(0)
+import TypingArea from "./components/TypingArea";
 
+const App = () => {
   return (
     <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
+      <TypingArea></TypingArea>
     </>
-  )
-}
+  );
+};
 
-export default App
+export default App;
diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/components/TypingArea.jsx b/src/components/TypingArea.jsx
@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react";
+import styled from "styled-components";
+import TypingInput from "./TypingInput";
+import words from "../data/words.json";
+const TypingArea = () => {
+  const word = words.words;
+  const [wordList, setWordList] = useState([]);
+  const callBackWordList = () => {
+    setWordList((prevWordList) => {
+      if (prevWordList.length < 10) {
+        return [...prevWordList, word[Math.floor(Math.random() * word.length)]];
+      } else {
+        alert("game over");
+        return [];
+      }
+    });
+  };
+  useEffect(() => {
+    const interval = setInterval(callBackWordList, 3000);
+    return () => clearInterval(interval);
+  }, []);
+  return (
+    <>
+      <TypingLayout>
+        <WordsLayout>
+          {wordList.map((word, index) => (
+            <div key={index}>{word}</div>
+          ))}
+        </WordsLayout>
+      </TypingLayout>
+      <TypingInput
+        wordList={wordList}
+        setWordList={setWordList}
+        callBackWordList={callBackWordList}
+      ></TypingInput>
+    </>
+  );
+};
+
+export default TypingArea;
+
+const TypingLayout = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: auto;
+  height: 20rem;
+  background-color: #e1e1f3;
+`;
+
+const WordsLayout = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
+`;
diff --git a/src/components/TypingInput.jsx b/src/components/TypingInput.jsx
@@ -0,0 +1,46 @@
+import styled from "styled-components";
+import { useState } from "react";
+
+const TypingInput = ({ wordList, setWordList }) => {
+  const [contents, setContents] = useState("");
+
+  const onSubmit = () => {
+    let found = false;
+    const updateWords = wordList.filter((content) => {
+      if (!found && content === contents) {
+        found = true;
+        return false;
+      }
+      return true;
+    });
+
+    setWordList(updateWords);
+    setContents("");
+  };
+
+  return (
+    <>
+      <TypingInputLayout>
+        <input
+          value={contents}
+          onChange={(e) => {
+            setContents(e.target.value);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              onSubmit();
+            }
+          }}
+        />
+      </TypingInputLayout>
+    </>
+  );
+};
+
+export default TypingInput;
+
+const TypingInputLayout = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+`;
diff --git a/src/data/words.json b/src/data/words.json
@@ -0,0 +1,17 @@
+{
+  "words": [
+    "patent",
+    "diverse",
+    "install",
+    "arise",
+    "expand",
+    "significant",
+    "undermine",
+    "tremendous",
+    "practice",
+    "deny",
+    "imagine",
+    "yesterday",
+    "monday"
+  ]
+}
diff --git a/src/index.css b/src/index.css
diff --git a/src/main.jsx b/src/main.jsx
@@ -1,10 +1,9 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);