From 9afa794f384a93d1749a658ae251e91079e3b2e6 Mon Sep 17 00:00:00 2001
From: dykim <drdragon777@whatap.io>
Date: Mon, 5 Aug 2024 20:58:46 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20client=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../event-participant-floating-button.tsx     | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/event-participant-floating-button.tsx b/apps/web/src/components/event-participant-floating-button.tsx
index 53777e4..b1bd622 100644
--- a/apps/web/src/components/event-participant-floating-button.tsx
+++ b/apps/web/src/components/event-participant-floating-button.tsx
@@ -1,10 +1,26 @@
-import React from "react";
+"use client";
+
+import { Prize } from "@daily-phrase/api";
+import React, { useEffect, useState } from "react";
 import { apis } from "~/apis";
 
-const EventParticipantFloatingButton = async () => {
-  const res = await apis.eventApi.getPrizeList();
-  const eventList = res.result;
-  const eventMainItem = eventList.prizeList[0];
+const EventParticipantFloatingButton = () => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [eventList, setEventList] = useState<Array<Prize>>([]);
+  const eventMainItem = eventList?.[0];
+
+  const getPrizeList = async () => {
+    const res = await apis.eventApi.getPrizeList();
+    setIsLoading(false);
+    setEventList(res.result.prizeList);
+  };
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    getPrizeList();
+  }, []);
+
+  if (isLoading || !("totalParticipantCount" in eventMainItem)) return null;
   return (
     <div className="w-fit bg-[#ffffff] py-[5px] px-[12px] rounded-[20px] border-[1px] border-solid border-[#FF7900] shadow-[0_4px_10px_0px_#0000001A]">
       <span className="text-[16px] font-semibold leading-[19.2px] whitespace-pre-wrap">