拆分解耦

src/app/word-board/WordBoard.tsx

@@ -1,14 +1,29 @@
 'use client';
 
+import Word from "@/interfaces/Word";
+import inspect from "@/utilities";
+import { Dispatch, SetStateAction } from "react";
+
+function DraggableWord({ word }: { word: Word }) {
+    return ((<span
+        style={{
+            left: `${Math.floor(word.x * (1000 - 18 * word.word.length))}px`,
+            top: `${Math.floor(word.y * (600 - 30))}px`,
+        }}
+        className={`select-none cursor-pointer absolute font-mono text-[30px] border-amber-100 border-1`}
+        onClick={inspect(word.word)}>{word.word}</span>))
+}
+
 export default function WordBoard(
-    { words }: {
+    { words, setWords }: {
         words: [
             {
                 word: string,
                 x: number,
                 y: number
             }
-        ]
+        ],
+        setWords: Dispatch<SetStateAction<Word[]>>
     }
 ) {
     const inspect = (word: string) => {
@@ -28,14 +43,7 @@ export default function WordBoard(
                     x: number,
                     y: number
                 }, i: number) => {
-                    return (<span
-                        style={{
-                            left: `${Math.floor(v.x * (1000 - 18 * v.word.length))}px`,
-                            top: `${Math.floor(v.y * (600 - 30))}px`,
-                        }}
-                        className={`select-none cursor-pointer absolute font-mono text-[30px] border-amber-100 border-1`}
-                        key={i}
-                        onClick={inspect(v.word)}>{v.word}</span>)
+                    return (<DraggableWord word={v} key={i}></DraggableWord>)
                 })}
         </div>
     )