From 8980e8e0edc497a5b1868f1a2df0376435db5757 Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Thu, 28 Mar 2024 16:54:27 +0900
Subject: [PATCH 1/2] =?UTF-8?q?chore(graph):=20=EA=B7=B8=EB=9E=98=ED=94=84?=
 =?UTF-8?q?=EB=8F=84=20=EC=8B=A4=EC=8B=9C=EA=B0=84=EC=9C=BC=EB=A1=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/coin/Coin.tsx  | 22 +++++++++-------------
 app/coin/Graph.tsx | 17 ++++++++++++++---
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/app/coin/Coin.tsx b/app/coin/Coin.tsx
index 0515c2e..af949cf 100644
--- a/app/coin/Coin.tsx
+++ b/app/coin/Coin.tsx
@@ -46,8 +46,8 @@ const tradeText: Record<
 
 const Coin = () => {
   const queryClient = useQueryClient();
-  const { data: market, refetch: marketRefetch } = useSuspenseQuery(coinQuery.price());
-  const { data: wallet, error, refetch: walletRefetch } = useQuery(coinQuery.myWallet());
+  const { data: market, refetch } = useSuspenseQuery(coinQuery.price());
+  const { data: wallet, error } = useQuery(coinQuery.myWallet());
 
   const { mutate: dailyReward } = useDailyRewardMutation();
   const { mutate: buy } = useBuyCoinMutation();
@@ -57,16 +57,6 @@ const Coin = () => {
   const [tradeMode, setTradeMode] = useState("BUY");
   const [requestAmount, setRequestAmount] = useState(0);
 
-  const differenceInSeconds = dayjs().diff(dayjs(market.startedTime), "second");
-  const remainingSeconds = 3 * 60 - differenceInSeconds;
-
-  useEffect(() => {
-    setInterval(() => {
-      marketRefetch();
-      walletRefetch();
-    }, remainingSeconds * 1000);
-  }, [market.startedTime]);
-
   if (isAxiosError(error) && error.response?.data.status === 404) {
     openModal({
       component: <CreateCoinAccount />,
@@ -254,7 +244,13 @@ const Coin = () => {
           )}
         </div>
       </div>
-      <Graph updatedAt={market.startedTime} marketPrice={market.price} />
+      <Graph
+        refetch={() => {
+          refetch();
+        }}
+        updatedAt={market.startedTime}
+        marketPrice={market.price}
+      />
       <Accordion title="거래 내역 보기" open={false}>
         <TradeHistory id={wallet.id} />
       </Accordion>
diff --git a/app/coin/Graph.tsx b/app/coin/Graph.tsx
index 347aff6..bc50ed6 100644
--- a/app/coin/Graph.tsx
+++ b/app/coin/Graph.tsx
@@ -2,7 +2,7 @@
 
 import { coinQuery } from "@/services/coin/coin.query";
 import { useSuspenseQuery } from "@tanstack/react-query";
-import React, { FC, useState } from "react";
+import React, { FC, useEffect, useState } from "react";
 import Image from "next/image";
 import { Line } from "react-chartjs-2";
 import dayjs from "dayjs";
@@ -52,17 +52,28 @@ const cycleList = [
 interface GraphProps {
   updatedAt: Date;
   marketPrice: number;
+  refetch: () => void;
 }
 
-const Graph: FC<GraphProps> = ({ updatedAt, marketPrice }) => {
+const Graph: FC<GraphProps> = ({ updatedAt, marketPrice, refetch }) => {
   const [cycle, setCycle] = useState("threeHours");
-  const { data: coin } = useSuspenseQuery(coinQuery.graph(cycle));
+  const { data: coin, refetch: graphRefetch } = useSuspenseQuery(coinQuery.graph(cycle));
 
   const labels = coin.map(({ startedTime }: { startedTime: Date }) =>
     dayjs(startedTime).format("M/D H:m"),
   );
   const data = coin.map(({ price }: { price: string }) => price);
 
+  const differenceInSeconds = dayjs().diff(dayjs(updatedAt), "second");
+  const remainingSeconds = 3 * 60 - differenceInSeconds;
+
+  useEffect(() => {
+    setInterval(() => {
+      refetch();
+      graphRefetch();
+    }, remainingSeconds * 1000);
+  }, [updatedAt]);
+
   return (
     <div className={styles.chartContainer}>
       <div className={styles.chartHeader}>

From d36557fd92b9af3ce8939ebed3021db090e509c0 Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Thu, 28 Mar 2024 17:03:21 +0900
Subject: [PATCH 2/2] =?UTF-8?q?chore(coin):=20setTimeout=EC=9C=BC=EB=A1=9C?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/coin/Graph.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/coin/Graph.tsx b/app/coin/Graph.tsx
index bc50ed6..5440019 100644
--- a/app/coin/Graph.tsx
+++ b/app/coin/Graph.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { coinQuery } from "@/services/coin/coin.query";
-import { useSuspenseQuery } from "@tanstack/react-query";
+import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import React, { FC, useEffect, useState } from "react";
 import Image from "next/image";
 import { Line } from "react-chartjs-2";
@@ -57,7 +57,7 @@ interface GraphProps {
 
 const Graph: FC<GraphProps> = ({ updatedAt, marketPrice, refetch }) => {
   const [cycle, setCycle] = useState("threeHours");
-  const { data: coin, refetch: graphRefetch } = useSuspenseQuery(coinQuery.graph(cycle));
+  const { data: coin, refetch: graphRefetch } = useQuery(coinQuery.graph(cycle));
 
   const labels = coin.map(({ startedTime }: { startedTime: Date }) =>
     dayjs(startedTime).format("M/D H:m"),
@@ -68,7 +68,7 @@ const Graph: FC<GraphProps> = ({ updatedAt, marketPrice, refetch }) => {
   const remainingSeconds = 3 * 60 - differenceInSeconds;
 
   useEffect(() => {
-    setInterval(() => {
+    setTimeout(() => {
       refetch();
       graphRefetch();
     }, remainingSeconds * 1000);