From bae6e6a8cd4561766690dab446e2c7dc7ed01042 Mon Sep 17 00:00:00 2001
From: ijun17 <ijun17@naver.com>
Date: Wed, 6 Nov 2024 22:57:42 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=94=8C=EB=A0=88=EC=9D=B4=EC=96=B4=20?=
 =?UTF-8?q?=EB=B3=B4=EB=93=9C=EC=97=90=20=EB=9D=84=EC=9B=80=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FE/src/components/Player.tsx          | 19 +++++++++++++++++
 FE/src/components/QuizOptionBoard.tsx | 30 ++++++++++++++++++---------
 2 files changed, 39 insertions(+), 10 deletions(-)
 create mode 100644 FE/src/components/Player.tsx

diff --git a/FE/src/components/Player.tsx b/FE/src/components/Player.tsx
new file mode 100644
index 0000000..313d406
--- /dev/null
+++ b/FE/src/components/Player.tsx
@@ -0,0 +1,19 @@
+type Props = {
+  name: string;
+  position: [number, number];
+};
+
+export const Player = ({ name, position }: Props) => {
+  const [xPos, yPos] = position;
+  //   const randomX = xPos + Math.floor(Math.random() * 100) + 1; // 1~100 범위의 랜덤값을 xPos에 추가
+  //   const randomY = yPos + Math.floor(Math.random() * 100) + 1;
+
+  const top = xPos * 100 + '%';
+  const left = yPos * 100 + '%';
+  console.log(top, left);
+  return (
+    <div className="absolute transition-all" style={{ top, left }}>
+      {'😀' + name}
+    </div>
+  );
+};
diff --git a/FE/src/components/QuizOptionBoard.tsx b/FE/src/components/QuizOptionBoard.tsx
index 8db97cf..1ac3e43 100644
--- a/FE/src/components/QuizOptionBoard.tsx
+++ b/FE/src/components/QuizOptionBoard.tsx
@@ -1,3 +1,5 @@
+import { usePlayerStore } from '@/store/usePlayerStore';
+import { Player } from './Player';
 type Params = {
   options: string[];
 };
@@ -16,17 +18,25 @@ const optionColors = [
 ];
 
 export const QuizOptionBoard = ({ options }: Params) => {
+  const players = usePlayerStore((state) => state.players);
   return (
-    <div className="component-default grid grid-cols-2 h-[100%] gap-4 p-4">
-      {options.map((option, i) => (
-        <div
-          className="rounded-s flex justify-center items-center"
-          key={i}
-          style={{ background: optionColors[i] }}
-        >
-          {i + 1 + '. ' + option}
-        </div>
-      ))}
+    <div className="relative component-default h-[100%]">
+      <div className="absolute h-[100%] w-[100%]">
+        {players.map((player) => (
+          <Player name={player.playerName} position={player.playerPosition} />
+        ))}
+      </div>
+      <div className="grid grid-cols-2 gap-4 p-4 h-[100%] w-[100%]">
+        {options.map((option, i) => (
+          <div
+            className="rounded-s flex justify-center items-center"
+            key={i}
+            style={{ background: optionColors[i] }}
+          >
+            {i + 1 + '. ' + option}
+          </div>
+        ))}
+      </div>
     </div>
   );
 };