Dobbymin · Dobbymin · Nov 9, 2025 · Nov 9, 2025 · Nov 9, 2025 · Nov 9, 2025
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,36 @@
+name: lint & Build Test
+
+on:
+  pull_request:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+          run_install: false
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Lint Code
+        run: pnpm lint
+
+      - name: Build Test
+        run: pnpm run build
diff --git a/.gitignore b/.gitignore
@@ -42,4 +42,5 @@ next-env.d.ts
 
 # local env files
 .env.local
-/.vscode
+/.vscode
+/docs
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
+    "@tanstack/react-query": "^5.90.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.553.0",
@@ -26,6 +27,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@tanstack/react-query-devtools": "^5.90.2",
     "@trivago/prettier-plugin-sort-imports": "^6.0.0",
     "@types/node": "^20",
     "@types/react": "^19",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/api/market/route.ts b/src/app/api/market/route.ts
@@ -0,0 +1,13 @@
+import { NextResponse } from "next/server";
+
+import { marketInfoHandler } from "@/entities";
+
+export async function GET() {
+  try {
+    const data = await marketInfoHandler();
+    return NextResponse.json({ status: "success", data });
+  } catch (error) {
+    console.error("Market API error:", error);
+    return NextResponse.json({ status: "error", error: "Failed to fetch market data" }, { status: 500 });
-    return NextResponse.json({ status: "error", error: "Failed to fetch market data" }, { status: 500 });
+    return NextResponse.json({ status: "error", data: "Failed to fetch market data" }, { status: 500 });
-    return NextResponse.json({ status: "error", error: "Failed to fetch market data" }, { status: 500 });
+    return NextResponse.json({ status: "error", data: "Failed to fetch market data" }, { status: 500 });
+  }
+}
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -47,9 +47,13 @@
   --color-text-light: var(--text-light);
   --color-negative: var(--negative);
   --color-positive: var(--positive);
+  --color-increase: var(--increase);
+  --color-decrease: var(--decrease);
 }
 
 :root {
+  --decrease: #1375ec;
+  --increase: #dd3c44;
   --positive: #00b15d;
   --negative: #ff4136;
   --text-dark: #e0e0e0;

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,6 @@
-import { Geist_Mono, Noto_Sans, Roboto } from "next/font/google";
+import { Noto_Sans, Roboto } from "next/font/google";
 
+import { AppProvider } from "@/shared";
 import { AppLayout } from "@/widgets";
 import type { Metadata } from "next";
 
@@ -28,7 +29,9 @@ export default function RootLayout({
   return (
     <html lang='en'>
       <body className={`${roboto.variable} ${notoSans.variable} antialiased`}>
-        <AppLayout>{children}</AppLayout>
+        <AppProvider>
+          <AppLayout>{children}</AppLayout>
+        </AppProvider>
       </body>
     </html>
   );

diff --git a/src/entities/index.ts b/src/entities/index.ts
@@ -0,0 +1 @@
+export * from "./market";
diff --git a/src/entities/market/handler/index.ts b/src/entities/market/handler/index.ts
@@ -0,0 +1 @@
+export * from "./market-info.handler";
diff --git a/src/entities/market/handler/market-info.handler.ts b/src/entities/market/handler/market-info.handler.ts
@@ -0,0 +1,32 @@
+import { marketAllAPI, tickerAPI } from "../model";
+
+export const marketInfoHandler = async () => {
+  const marketData = await marketAllAPI();
+
+  const krwMarketMap = new Map<string, { korean_name: string }>();
+  marketData.forEach((item) => {
+    if (item.market.startsWith("KRW-")) {
+      krwMarketMap.set(item.market, { korean_name: item.korean_name });
+    }
+  });
+
+  const krwMarketCodes = Array.from(krwMarketMap.keys());
+  if (krwMarketCodes.length === 0) {
+    return [];
+  }
+
+  const tickerData = await tickerAPI(krwMarketCodes);
+
+  const result = tickerData.map((ticker) => {
+    const marketInfo = krwMarketMap.get(ticker.market);
+
+    return {
+      market: ticker.market,
+      koreanName: marketInfo?.korean_name || "",
+      tradePrice: ticker.trade_price,
+      changeRate: parseFloat((ticker.signed_change_rate * 100).toFixed(2)), // 퍼센트로 변환 & 소수 둘째자리
-      changeRate: parseFloat((ticker.signed_change_rate * 100).toFixed(2)), // 퍼센트로 변환 & 소수 둘째자리
+      changeRate: ticker.signed_change_rate * 100, // 퍼센트로 변환, 소수 둘째자리 포맷은 컴포넌트에서 처리
-      changeRate: parseFloat((ticker.signed_change_rate * 100).toFixed(2)), // 퍼센트로 변환 & 소수 둘째자리
+      changeRate: ticker.signed_change_rate * 100, // 퍼센트로 변환, 소수 둘째자리 포맷은 컴포넌트에서 처리
+    };
+  });
+
+  return result;
+};
diff --git a/src/entities/market/index.ts b/src/entities/market/index.ts
@@ -0,0 +1,2 @@
+export * from "./handler";
+export * from "./model";
diff --git a/src/entities/market/model/apis/index.ts b/src/entities/market/model/apis/index.ts
@@ -0,0 +1,2 @@
+export * from "./market-all.api";
+export * from "./ticker.api";
diff --git a/src/features/home/apis/market-all.api.ts → ...ities/market/model/apis/market-all.api.ts b/src/features/home/apis/market-all.api.ts → ...ities/market/model/apis/market-all.api.ts
@@ -8,7 +8,7 @@ export interface MarketAllItem {
 }
 
 export const marketAllAPI = async (): Promise<MarketAllItem[]> => {
-  const response = await fetch(`${UPBIT_URL}/market/all?isDetails=true`, {
+  const response = await fetch(`${UPBIT_URL}/market/all?isDetails=false`, {
     next: { revalidate: 60 }, // 60초 캐시 (서버 컴포넌트 환경에서)
   });
 

diff --git a/src/features/home/apis/ticker.api.ts → src/entities/market/model/apis/ticker.api.ts b/src/features/home/apis/ticker.api.ts → src/entities/market/model/apis/ticker.api.ts
diff --git a/src/entities/market/model/index.ts b/src/entities/market/model/index.ts
@@ -0,0 +1,2 @@
+export * from "./apis";
+export * from "./types";
diff --git a/src/entities/market/model/types/index.ts b/src/entities/market/model/types/index.ts
@@ -0,0 +1 @@
+export * from "./market-info.type";
diff --git a/src/entities/market/model/types/market-info.type.ts b/src/entities/market/model/types/market-info.type.ts
@@ -0,0 +1,6 @@
+export type MarketInfoType = {
+  market: string;
+  koreanName: string;
+  tradePrice: number;
+  changeRate: number;
+};
diff --git a/src/features/home/apis/index.ts b/src/features/home/apis/index.ts
@@ -1,2 +1 @@
-export * from "./market-all.api";
-export * from "./ticker.api";
+export * from "./market.api";
diff --git a/src/features/home/apis/market.api.ts b/src/features/home/apis/market.api.ts
@@ -0,0 +1,12 @@
+import { MarketInfoType } from "@/entities";
+import { APIResponse } from "@/shared";
+
+export const marketAPI = async (): Promise<MarketInfoType[]> => {
+  const response = await fetch("/api/market", { cache: "no-store" });
+  if (!response.ok) {
+    throw new Error(`Market API failed: ${response.status} ${response.statusText}`);
+  }
+  const json: APIResponse<MarketInfoType[]> = await response.json();
+
+  return json.data;
+};
diff --git a/src/features/home/components/features/coin-info/CoinInfoTable.tsx b/src/features/home/components/features/coin-info/CoinInfoTable.tsx
@@ -1,39 +1,34 @@
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared";
+"use client";
 
-import { marketAllAPI, tickerAPI } from "../../../apis";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, cn } from "@/shared";
 
-export const CoinInfoTable = async () => {
-  const marketData = await marketAllAPI();
-  const marketList = marketData.map((item) => item.market);
-  // console.log(marketData);
-  const tickerData = await tickerAPI(marketList);
+import { useGetMarketInfo } from "../../../hooks";
+
+export const CoinInfoTable = () => {
+  const { data: marketInfoData } = useGetMarketInfo();
+  const rateColor = (rate: number) => {
+    return rate >= 0 ? "text-increase" : "text-decrease";
+  };
   return (
     <div className='flex-1 overflow-y-auto'>
       <Table>
         <TableHeader>
           <TableRow className='sticky top-0 border-none bg-surface-dark/30'>
             <TableHead className='text-text-muted-dark'>마켓</TableHead>
-            <TableHead className='text-text-muted-dark'>가격</TableHead>
-            <TableHead className='text-text-muted-dark'>24시간 변동률</TableHead>
+            <TableHead className='text-text-muted-dark'>현재가</TableHead>
+            <TableHead className='text-text-muted-dark'>변동률</TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>
-          {/* <tr className='cursor-pointer border-l-2 border-primary bg-primary/10 hover:bg-primary/20'>
-            <td className='px-4 py-3 font-medium whitespace-nowrap text-text-dark'>BTC/USD</td>
-            <td className='px-4 py-3 text-right font-mono whitespace-nowrap text-text-dark'>68,450.25</td>
-            <td className='px-4 py-3 text-right font-mono whitespace-nowrap text-positive'>+2.15%</td>
-          </tr>
-          <tr className='cursor-pointer border-l-2 border-transparent hover:bg-white/5'>
-            <td className='px-4 py-3 font-medium whitespace-nowrap text-text-dark'>ETH/USD</td>
-            <td className='px-4 py-3 text-right font-mono whitespace-nowrap text-text-dark'>3,550.78</td>
-            <td className='px-4 py-3 text-right font-mono whitespace-nowrap text-positive'>+1.80%</td>
-          </tr> */}
-          {tickerData.map((ticker) => (
+          {marketInfoData?.map((ticker) => (
             <TableRow key={ticker.market} className='cursor-pointer border-l-2 border-transparent hover:bg-white/5'>
-              <TableCell className='font-medium'>{ticker.market}</TableCell>
-              <TableCell>{ticker.trade_price.toLocaleString()}</TableCell>
-              <TableCell className={`${ticker.signed_change_rate >= 0 ? "text-positive" : "text-destructive"}`}>
-                {(ticker.signed_change_rate * 100).toFixed(2)}%
+              <TableCell className='flex flex-col font-medium'>
+                <p className='font-sans text-xs font-semibold'>{ticker.koreanName}</p>
+                <p className='font-roboto text-[10px] font-light'>{ticker.market}</p>
+              </TableCell>
+              <TableCell className='text-xs'>{Number(ticker.tradePrice).toLocaleString("ko-KR")}</TableCell>
+              <TableCell className={cn(rateColor(ticker.changeRate), "font-roboto text-xs")}>
+                {ticker.changeRate.toFixed(2)}%
               </TableCell>
             </TableRow>
           ))}

diff --git a/src/features/home/hooks/index.ts b/src/features/home/hooks/index.ts
@@ -0,0 +1 @@
+export * from "./useGetMarketInfo";
diff --git a/src/features/home/hooks/useGetMarketInfo.ts b/src/features/home/hooks/useGetMarketInfo.ts
@@ -0,0 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { marketAPI } from "../apis";
+
+export const useGetMarketInfo = () => {
+  return useQuery({
+    queryKey: ["market-info"],
+    queryFn: marketAPI,
+    refetchInterval: 10000, // 10초 폴링
+  });
+};
diff --git a/src/features/home/ui/CoinInfoSection.tsx b/src/features/home/ui/CoinInfoSection.tsx
@@ -2,7 +2,7 @@ import { CoinInfoTable, CoinSearchInput } from "../components";
 
 export const CoinInfoSection = () => {
   return (
-    <aside className='flex w-[20%] min-w-64 flex-col border-r border-white/10 bg-surface-dark/20'>
+    <aside className='flex w-[30%] min-w-64 flex-col border-r border-white/10 bg-surface-dark/20'>
       <CoinSearchInput />
       <CoinInfoTable />
     </aside>

diff --git a/src/shared/components/ui/index.ts b/src/shared/components/ui/index.ts
@@ -7,3 +7,4 @@ export * from "./select";
 export * from "./separator";
 export * from "./table";
 export * from "./textarea";
+export * from "./sonner";
diff --git a/src/shared/index.ts b/src/shared/index.ts
@@ -1,3 +1,5 @@
 export * from "./components";
 export * from "./constants";
 export * from "./utils";
+export * from "./provider";
+export * from "./types";
diff --git a/src/shared/libs/index.ts b/src/shared/libs/index.ts
@@ -0,0 +1 @@
+export * from "./query-client";
diff --git a/src/shared/libs/query-client.ts b/src/shared/libs/query-client.ts
@@ -0,0 +1,12 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      staleTime: 5000,
+
+      refetchOnWindowFocus: false,
+    },
+  },
+});
diff --git a/src/shared/provider/AppProvider.tsx b/src/shared/provider/AppProvider.tsx
@@ -0,0 +1,16 @@
+import { Toaster } from "../components";
+
+import { QueryProvider } from "./components";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const AppProvider = ({ children }: Props) => {
+  return (
+    <QueryProvider>
+      {children}
+      <Toaster />
+    </QueryProvider>
+  );
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from "./handler";
		export * from "./model";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from "./market-all.api";
		export * from "./ticker.api";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from "./apis";
		export * from "./types";