fix: client 컴포넌트로 변경

Nexters · Aug 5, 2024 · 9afa794 · 9afa794
1 parent e49b566
commit 9afa794
Showing 1 changed file with 21 additions and 5 deletions.
diff --git 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">