diff --git a/src/app/typingV2/page.tsx b/src/app/typingV2/page.tsx
index f84e4f4..0a1cb20 100644
--- a/src/app/typingV2/page.tsx
+++ b/src/app/typingV2/page.tsx
@@ -1,203 +1,173 @@
-"use client";
+// "use client";
 
-import { useEffect, useState } from "react";
-import { quotes } from "@/app/quotes";
-import Image from "next/image";
-import { Poppins, Hahmlet } from "next/font/google";
-import chevLeft from "../../public/chev-left.svg";
-import chevRight from "../../public/chev-right.svg";
-import Link from "next/link";
-import IdStore from ".././store";
+// import { useEffect, useRef, useState } from "react";
+// import { quotes } from "@/app/quotes";
+// import Image from "next/image";
+// import chevLeft from "../../../public/chevron-left.svg";
+// import chevRight from "../../../public/chevron-right.svg";
+// import Link from "next/link";
 
-interface Word {
-  content: string;
-  sentenceIndex: number;
-}
+// interface Word {
+//   content: string;
+//   sentenceIndex: number;
+// }
 
-interface Letter extends Word {
-  wordIndex: number;
-  letters: string[];
-}
-type QUOTE = {
-  title: string;
-  author: string;
-  content: string;
-};
+// interface Letter extends Word {
+//   wordIndex: number;
+// }
+// type QUOTE = {
+//   title: string;
+//   author: string;
+//   content: string;
+// };
 
-export default function Home() {
-  const [sentenceCurrent, setSentenceCurrent] = useState(0); //sentence Current position
-  const [textValue, setTextValue] = useState(""); //for the print text
-  const [inputCollection, setInputCollection] = useState<string[]>([]);
-  const [quoteNumber, setQuoteNumber] = useState<number>(0);
-  const [quote, setQuote] = useState<QUOTE>(quotes[0]);
-  const [userName, setUserName] = useState("");
-  const { id, setId } = IdStore();
-  const testName = "test";
+// export default function Home() {
+//   const [textValue, setTextValue] = useState(""); //for the print text
+//   const [quoteNumber, setQuoteNumber] = useState<number>(0);
+//   const [quote, setQuote] = useState<QUOTE>(quotes[0]);
+//   const [letterIndex, setLetterIndex] = useState(0);
+//   useEffect(() => {
+//     setQuote(quotes[quoteNumber]);
+//   }, [quoteNumber]);
+//   // const quote = {
+//   //   title: "작별하지 않는다",
+//   //   author: "한강",
+//   //   content: "상대의 가장 연한 부분을 베기 위해.",
+//   // };
 
-  useEffect(() => {
-    setTextValue("");
-    setQuote(quotes[quoteNumber]);
-    setId(testName);
-    setUserName(id);
-  }, [quoteNumber, id, setId]);
+//   const textAreaRef = useRef<HTMLTextAreaElement>(null);
 
-  console.log(userName);
+//   const handleTextArea = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+//     setTextValue(e.currentTarget.value);
+//     setLetterIndex(e.currentTarget.value.length);
+//   };
 
-  const sentences = quote.content.split("\n");
+//   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+//     const key = e.key;
+//     if (letterIndex == quote.content.length) {
+//       alert("End");
+//     }
+//     if (key == " " || key == "Spacebar") {
+//     }
+//     if (key == "Backspace") {
+//       if (textValue == "") {
+//         e.preventDefault();
+//         return;
+//       }
+//     }
+//     if (key == "Enter") {
+//       e.preventDefault();
+//       alert("You Cannot Skip the line");
+//     }
+//   };
 
-  const handleTextArea = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    let targetValue = e.currentTarget.value.split("\n");
-    let targetLength = targetValue[sentenceCurrent].length;
-    if (targetLength == sentences[sentenceCurrent].length) {
-      setInputCollection((prev: string[]) => {
-        if (prev[sentenceCurrent] == undefined || prev.length == 0) {
-          return [...prev, targetValue[sentenceCurrent]];
-        } else {
-          let newInputCollection: string[] = [...prev];
-          newInputCollection[sentenceCurrent] = targetValue[sentenceCurrent];
-          return newInputCollection;
-        }
-      });
-      e.currentTarget.value += "\n";
-      if (sentenceCurrent + 1 >= sentences.length) {
-        alert("The End");
-      }
-      setSentenceCurrent((prev) => ++prev);
-    }
-    setTextValue(e.currentTarget.value);
-  };
+//   const LetterGenerator = ({ wordIndex, content, sentenceIndex }: Letter) => {
+//     if (wordIndex != 0 && content == " ") {
+//       return <span>&nbsp;</span>;
+//     }
+//     let testInput = textValue.split("");
+//     return (
+//       <span className="flex flex-col">
+//         {testInput[wordIndex] ? (
+//           testInput[wordIndex] != content && wordIndex !== letterIndex ? (
+//             <span className="text-red-300 text-center">
+//               {testInput[wordIndex]}
+//             </span>
+//           ) : (
+//             <span className="text-white text-center">{content}</span>
+//           )
+//         ) : (
+//           <span className="text-[#818181] text-center">{content}</span>
+//         )}
+//         {letterIndex == wordIndex && (
+//           <span className=" bg-white animate-blink h-[0.1px]"></span>
+//         )}
+//       </span>
+//     );
+//   };
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    const key = e.key;
-    if (key == " " || key == "Spacebar") {
-    }
-    if (key == "Backspace") {
-      //Prevent From going over empty text area
-      if (textValue == "") {
-        e.preventDefault();
-        return;
-      }
-      //if the whole length is smaller
-      let inputSentence = textValue.split("\n");
-      //If current Sentence Have Empty string
-      //then Skip to the previous sentence
-      if (inputSentence[sentenceCurrent] == "") {
-        setTextValue((prev) => {
-          return prev.slice(0, -1);
-        });
-        setSentenceCurrent((prev) => (prev -= 1));
-      }
-    }
-    if (key == "Enter") {
-      e.preventDefault();
-      alert("You Cannot Skip the line");
-    }
-  };
-  const LetterGenerator = ({
-    wordIndex,
-    content,
-    sentenceIndex,
-    letters,
-  }: Letter) => {
-    if (wordIndex != 0 && content == " ") {
-      return <span>&nbsp;</span>;
-    }
-    if (sentenceIndex < sentenceCurrent) {
-      let previousInputValue = inputCollection[sentenceIndex].split("");
-      return previousInputValue[wordIndex] == content ? (
-        <span className="text-white">{content}</span>
-      ) : (
-        <span className="text-red-800">{previousInputValue[wordIndex]}</span>
-      );
-    }
-    let testInput = textValue.split("\n");
-    let testInputLetter = testInput[sentenceCurrent].split("");
+//   const WordGenerator = ({ content, sentenceIndex }: Word) => {
+//     let letters = content.split("");
+//     return (
+//       <div className="flex flex-wrap justify-start items-start gap-[0.06rem]">
+//         {letters.map((value, index) => {
+//           return (
+//             <LetterGenerator
+//               key={index}
+//               wordIndex={index}
+//               sentenceIndex={sentenceIndex}
+//               content={value}
+//             ></LetterGenerator>
+//           );
+//         })}
+//       </div>
+//     );
+//   };
 
-    return sentenceCurrent == sentenceIndex && testInputLetter[wordIndex] ? (
-      testInputLetter[wordIndex] == content ? (
-        <span className="text-white">{content}</span>
-      ) : testInputLetter[wordIndex] == " " ? (
-        <span className="text-red-600">{content}</span>
-      ) : (
-        <span className="text-red-600">{testInputLetter[wordIndex]}</span>
-      )
-    ) : (
-      <span className="text-[#818181]">{content}</span>
-    );
-  };
+//   const handleNextClick = () => {
+//     if (quoteNumber + 1 >= quotes.length) {
+//       setQuoteNumber(0);
+//     } else setQuoteNumber((prev) => ++prev);
+//     setQuote(quotes[quoteNumber]);
+//   };
 
-  const WordGenerator = ({ content, sentenceIndex }: Word) => {
-    //Split into letters
-    let letters = content.split("");
-    return (
-      <div className="flex flex-row gap-[0.06rem]">
-        {letters.map((value, index) => {
-          //Generate Each Letters
-          return (
-            <LetterGenerator
-              key={index}
-              wordIndex={index}
-              sentenceIndex={sentenceIndex}
-              content={value}
-              letters={letters}
-            ></LetterGenerator>
-          );
-        })}
-      </div>
-    );
-  };
+//   const handlePrevClick = () => {
+//     if (quoteNumber <= 0) {
+//       setQuoteNumber(quotes.length - 1);
+//     } else setQuoteNumber((prev) => --prev);
+//     setQuote(quotes[quoteNumber]);
+//   };
+//   const handlePrintClick = () => {
+//     if (textAreaRef.current) {
+//       textAreaRef.current.focus();
+//     }
+//   };
 
-  const handleNextClick = () => {
-    if (quoteNumber + 1 >= quotes.length) {
-      setQuoteNumber(0);
-    } else setQuoteNumber((prev) => ++prev);
-    setQuote(quotes[quoteNumber]);
-  };
-  const handlePrevClick = () => {
-    if (quoteNumber <= 0) {
-      setQuoteNumber(quotes.length - 1);
-    } else setQuoteNumber((prev) => --prev);
-    setQuote(quotes[quoteNumber]);
-  };
-
-  return (
-    <div className="flex flex-col items-start w-[50%] m-32">
-      <div id="print" className="flex  w-[36rem] h-[13rem] gap-1  p-10">
-        <div className="flex flex-col">
-          {sentences.map((value, index) => {
-            return (
-              //Each Word generate
-              <WordGenerator
-                key={index}
-                content={value}
-                sentenceIndex={index}
-              ></WordGenerator>
-            );
-          })}
-        </div>
-        <textarea
-          className="absolute top-[8rem] left-[8rem] bg-transparent text-transparent w-[36rem] h-[13rem] focus:outline-none p-10 resize-none caret-white tracking-[0.06rem]"
-          onChange={handleTextArea}
-          value={textValue}
-          onKeyDown={handleKeyDown}
-        ></textarea>
-      </div>
-      <hr className=" w-[150%] h-[0.75px] bg-white"></hr>
-      <div className="flex flex-row gap-4 mt-2 ml-2">
-        <button onClick={handlePrevClick}>
-          <Image src={chevLeft} alt="chevLeft" width={20} />
-        </button>
-        <div className="flex flex-col ">
-          <div className=" h-[20px]">{"저자 :  " + quote.author}</div>
-          <div className=" h-[20px]">{"제목 :  " + quote.title}</div>
-        </div>
-        <button className="" onClick={handleNextClick}>
-          <Image src={chevRight} alt="chevLeft" width={20} />
-        </button>
-        <div className="ml-12 mt-4 text-white">
-          <Link href={"/userfeed"}>Leave Us a feedback===</Link>
-        </div>
-      </div>
-    </div>
-  );
-}
+//   return (
+//     <div className="flex flex-col items-start w-[50%] m-32">
+//       <div
+//         id="print"
+//         onClick={handlePrintClick}
+//         className="flex  w-[36rem] h-[13rem] gap-1  p-10"
+//       >
+//         <div className="flex flex-wrap">
+//           <WordGenerator
+//             key={0}
+//             content={quote.content}
+//             sentenceIndex={0}
+//           ></WordGenerator>
+//         </div>
+//         <textarea
+//           className="absolute -z-10 bg-transparent text-transparent outline-none resize-none  caret-transparent"
+//           onChange={handleTextArea}
+//           value={textValue}
+//           ref={textAreaRef}
+//           onKeyDown={handleKeyDown}
+//           spellCheck="false"
+//         ></textarea>
+//       </div>
+//       <hr className=" w-[100%] h-[0.75px] bg-white"></hr>
+//       <div className="flex flex-row gap-4 mt-2 ml-2">
+//         <button onClick={handlePrevClick}>
+//           <Image src={chevLeft} alt="chevLeft" width={20} />
+//         </button>
+//         <div className="flex flex-col ">
+//           <div className="flex flex-wrap">
+//             <div className=" h-[20px]">저자 :</div>
+//             <div>{quote.author}</div>
+//           </div>
+//           <div className="flex flex-wrap">
+//             <div className=" h-[20px]">제목 :</div>
+//             <div>{quote.title}</div>
+//           </div>
+//         </div>
+//         <button className="" onClick={handleNextClick}>
+//           <Image src={chevRight} alt="chevLeft" width={20} />
+//         </button>
+//         <div className="ml-12 mt-4 text-white">
+//           <Link href={"/userfeed"}>Leave Us a feedback===</Link>
+//         </div>
+//       </div>
+//     </div>
+//   );
+// }