chore : zustand_setting

package.json

@@ -16,7 +16,8 @@
     "@vercel/postgres": "^0.8.0",
     "next": "14.2.3",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@types/node": "^20",

src/app/page.tsx

@@ -6,6 +6,7 @@ import Image from "next/image";
 import chevLeft from "../../public/chevron-left.svg";
 import chevRight from "../../public/chevron-right.svg";
 import Link from "next/link";
+import IdStore from "./store";
 
 interface Word {
   content: string;
@@ -28,10 +29,18 @@ export default function Home() {
   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";
+
   useEffect(() => {
     setTextValue("");
     setQuote(quotes[quoteNumber]);
-  }, [quoteNumber]);
+    setId(testName);
+    setUserName(id);
+  }, [quoteNumber, id, setId]);
+
+  console.log(userName);
 
   const sentences = quote.content.split("\n");
 
@@ -138,15 +147,12 @@ export default function Home() {
   };
 
   const handleNextClick = () => {
-    console.log("clicked");
     if (quoteNumber + 1 >= quotes.length) {
       setQuoteNumber(0);
     } else setQuoteNumber((prev) => ++prev);
     setQuote(quotes[quoteNumber]);
   };
-  console.log(quotes.length);
   const handlePrevClick = () => {
-    console.log("clicked");
     if (quoteNumber <= 0) {
       setQuoteNumber(quotes.length - 1);
     } else setQuoteNumber((prev) => --prev);

src/app/store/index.ts

@@ -0,0 +1,16 @@
+import { create } from "zustand";
+
+// 초기 상태 정의
+interface ID {
+  id: string;
+  setId: (id: string) => void;
+}
+
+const IdStore = create<ID>((set) => ({
+  id: "init",
+  setId: (id) => {
+    set(() => ({ id: id }));
+  },
+}));
+
+export default IdStore;