feat(tradeHistry): 거래 통장 추가

app/coin/page.tsx

@@ -1,9 +1,15 @@
 import { coinQuery } from "@/services/coin/coin.query";
 import React from "react";
 import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
+import { generateOpenGraph } from "@/utils";
 import getQueryClient from "../getQueryClient";
 import Coin from "./Coin";
 
+export const metadata = generateOpenGraph({
+  title: "코인",
+  description: `부마코인 투자 페이지입니다.`,
+});
+
 const Page = async () => {
   const queryClient = getQueryClient();
   const graphList = ["full", "halfMonth", "week", "day", "halfDay", "threeHours"].map((cycle) =>

app/coin/rank/CoinRanking.tsx

@@ -24,7 +24,11 @@ const CoinRanking = () => {
           const tierStyle = rank <= 2 ? rank : "default";
 
           return (
-            <li key={index} className={styles.rankingListItem}>
+            <Link
+              href={`/coin/trade/${ranking.coinAccountId}`}
+              key={index}
+              className={styles.rankingListItem}
+            >
               <Image
                 src={`/assets/tier/${tierIconMaker(rankingListMax, rank)}.png`}
                 width={999}
@@ -53,7 +57,7 @@ const CoinRanking = () => {
                   총 이익 · {moneyText(ranking.totalMoney)}₩
                 </span>
               </div>
-            </li>
+            </Link>
           );
         })}
       </ul>

app/coin/trade/[accountId]/TradeHistory.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import React, { FC } from "react";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { coinQuery } from "@/services/coin/coin.query";
+import { dateText, moneyText, tradeStatusText } from "@/utils";
+import Image from "next/image";
+import Container from "@/components/Container";
+import * as styles from "../../TradeHistory.css";
+
+const Trade: FC<{ accountId: number }> = ({ accountId }) => {
+  const { data: tradeList } = useSuspenseQuery(coinQuery.trade(accountId));
+  return (
+    <Container docsType="코인" title={`통장#${accountId}`}>
+      {tradeList.map((trade) => (
+        <div className={styles.tradeListBox} key={trade.id}>
+          <div className={styles.hgroup}>
+            <div className={styles.tradeStatusCircle[trade.tradeStatus]} />
+            <h1 className={styles.tradeId}>
+              {tradeStatusText(trade.tradeStatus)}#{trade.id}
+            </h1>
+            {trade.tradedTime && (
+              <span className={styles.createdAt}>
+                거래일 ·&nbsp;
+                {dateText(trade.tradedTime)}
+              </span>
+            )}
+          </div>
+          <div className={styles.informationBox}>
+            <span className={styles.informationText}>
+              <Image src="/assets/bumamoney.png" alt="money" width={30} height={15} />
+              {moneyText(trade.coinPrice)}
+            </span>
+            <span className={styles.informationText}>
+              <Image src="/assets/bumacoin.png" alt="money" width={18} height={18} />
+              {moneyText(trade.coinCount)}
+            </span>
+          </div>
+          <span className={styles.informationText}>
+            총 거래 금액 · {moneyText(trade.usedMoney)}
+          </span>
+        </div>
+      ))}
+    </Container>
+  );
+};
+
+export default Trade;

app/coin/trade/[accountId]/page.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
+import getQueryClient from "@/app/getQueryClient";
+import { coinQuery } from "@/services/coin/coin.query";
+import { generateOpenGraph } from "@/utils";
+import TradeHistory from "./TradeHistory";
+
+interface PageProps {
+  params: {
+    accountId: string;
+  };
+}
+
+export const metadata = generateOpenGraph({
+  title: "코인 거래 내역",
+  description: `부마코인 거래 내역 페이지입니다.`,
+});
+
+const Page = async ({ params: { accountId } }: PageProps) => {
+  const queryClient = getQueryClient();
+  await queryClient.prefetchQuery(coinQuery.trade(Number(accountId)));
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <TradeHistory accountId={Number(accountId)} />
+    </HydrationBoundary>
+  );
+};
+
+export default Page;