대시보드 구현
This commit is contained in:
86
features/dashboard/apis/dashboard.api.ts
Normal file
86
features/dashboard/apis/dashboard.api.ts
Normal file
@@ -0,0 +1,86 @@
|
||||
import type { KisRuntimeCredentials } from "@/features/settings/store/use-kis-runtime-store";
|
||||
import type {
|
||||
DashboardBalanceResponse,
|
||||
DashboardIndicesResponse,
|
||||
} from "@/features/dashboard/types/dashboard.types";
|
||||
|
||||
/**
|
||||
* @file features/dashboard/apis/dashboard.api.ts
|
||||
* @description 대시보드 잔고/지수 API 클라이언트
|
||||
*/
|
||||
|
||||
/**
|
||||
* 계좌 잔고/보유종목을 조회합니다.
|
||||
* @param credentials KIS 인증 정보
|
||||
* @returns 잔고 응답
|
||||
* @see app/api/kis/domestic/balance/route.ts 서버 라우트
|
||||
*/
|
||||
export async function fetchDashboardBalance(
|
||||
credentials: KisRuntimeCredentials,
|
||||
): Promise<DashboardBalanceResponse> {
|
||||
const response = await fetch("/api/kis/domestic/balance", {
|
||||
method: "GET",
|
||||
headers: buildKisRequestHeaders(credentials),
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
const payload = (await response.json()) as
|
||||
| DashboardBalanceResponse
|
||||
| { error?: string };
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
"error" in payload ? payload.error : "잔고 조회 중 오류가 발생했습니다.",
|
||||
);
|
||||
}
|
||||
|
||||
return payload as DashboardBalanceResponse;
|
||||
}
|
||||
|
||||
/**
|
||||
* 시장 지수(KOSPI/KOSDAQ)를 조회합니다.
|
||||
* @param credentials KIS 인증 정보
|
||||
* @returns 지수 응답
|
||||
* @see app/api/kis/domestic/indices/route.ts 서버 라우트
|
||||
*/
|
||||
export async function fetchDashboardIndices(
|
||||
credentials: KisRuntimeCredentials,
|
||||
): Promise<DashboardIndicesResponse> {
|
||||
const response = await fetch("/api/kis/domestic/indices", {
|
||||
method: "GET",
|
||||
headers: buildKisRequestHeaders(credentials),
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
const payload = (await response.json()) as
|
||||
| DashboardIndicesResponse
|
||||
| { error?: string };
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
"error" in payload ? payload.error : "지수 조회 중 오류가 발생했습니다.",
|
||||
);
|
||||
}
|
||||
|
||||
return payload as DashboardIndicesResponse;
|
||||
}
|
||||
|
||||
/**
|
||||
* 대시보드 API 공통 헤더를 구성합니다.
|
||||
* @param credentials KIS 인증 정보
|
||||
* @returns KIS 전달 헤더
|
||||
* @see features/dashboard/apis/dashboard.api.ts fetchDashboardBalance/fetchDashboardIndices
|
||||
*/
|
||||
function buildKisRequestHeaders(credentials: KisRuntimeCredentials) {
|
||||
const headers: Record<string, string> = {
|
||||
"x-kis-app-key": credentials.appKey,
|
||||
"x-kis-app-secret": credentials.appSecret,
|
||||
"x-kis-trading-env": credentials.tradingEnv,
|
||||
};
|
||||
|
||||
if (credentials.accountNo?.trim()) {
|
||||
headers["x-kis-account-no"] = credentials.accountNo.trim();
|
||||
}
|
||||
|
||||
return headers;
|
||||
}
|
||||
37
features/dashboard/components/DashboardAccessGate.tsx
Normal file
37
features/dashboard/components/DashboardAccessGate.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
interface DashboardAccessGateProps {
|
||||
canAccess: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description KIS 인증 여부에 따라 대시보드 접근 가이드를 렌더링합니다.
|
||||
* @param canAccess 대시보드 접근 가능 여부
|
||||
* @see features/dashboard/components/DashboardContainer.tsx 인증되지 않은 경우 이 컴포넌트를 렌더링합니다.
|
||||
*/
|
||||
export function DashboardAccessGate({ canAccess }: DashboardAccessGateProps) {
|
||||
if (canAccess) return null;
|
||||
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center p-6">
|
||||
<section className="w-full max-w-xl rounded-2xl border border-brand-200 bg-background p-6 shadow-sm dark:border-brand-800/45 dark:bg-brand-900/18">
|
||||
{/* ========== UNVERIFIED NOTICE ========== */}
|
||||
<h2 className="text-lg font-semibold text-foreground">
|
||||
대시보드를 보려면 KIS API 인증이 필요합니다.
|
||||
</h2>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
설정 페이지에서 App Key/App Secret(그리고 계좌번호)을 입력하고 연결을
|
||||
완료해 주세요.
|
||||
</p>
|
||||
|
||||
{/* ========== ACTION ========== */}
|
||||
<div className="mt-4">
|
||||
<Button asChild className="bg-brand-600 hover:bg-brand-700">
|
||||
<Link href="/settings">설정 페이지로 이동</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
115
features/dashboard/components/DashboardContainer.tsx
Normal file
115
features/dashboard/components/DashboardContainer.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo } from "react";
|
||||
import { useShallow } from "zustand/react/shallow";
|
||||
import { LoadingSpinner } from "@/components/ui/loading-spinner";
|
||||
import { DashboardAccessGate } from "@/features/dashboard/components/DashboardAccessGate";
|
||||
import { DashboardSkeleton } from "@/features/dashboard/components/DashboardSkeleton";
|
||||
import { HoldingsList } from "@/features/dashboard/components/HoldingsList";
|
||||
import { MarketSummary } from "@/features/dashboard/components/MarketSummary";
|
||||
import { StatusHeader } from "@/features/dashboard/components/StatusHeader";
|
||||
import { StockDetailPreview } from "@/features/dashboard/components/StockDetailPreview";
|
||||
import { useDashboardData } from "@/features/dashboard/hooks/use-dashboard-data";
|
||||
import { useKisRuntimeStore } from "@/features/settings/store/use-kis-runtime-store";
|
||||
|
||||
/**
|
||||
* @description 대시보드 메인 컨테이너입니다.
|
||||
* @remarks UI 흐름: 대시보드 진입 -> useDashboardData API 호출 -> StatusHeader/MarketSummary/HoldingsList/StockDetailPreview 순으로 렌더링
|
||||
* @see app/(main)/dashboard/page.tsx 로그인 완료 후 이 컴포넌트를 렌더링합니다.
|
||||
* @see features/dashboard/hooks/use-dashboard-data.ts 대시보드 데이터 조회/갱신 상태를 관리합니다.
|
||||
*/
|
||||
export function DashboardContainer() {
|
||||
const {
|
||||
verifiedCredentials,
|
||||
isKisVerified,
|
||||
_hasHydrated,
|
||||
wsApprovalKey,
|
||||
wsUrl,
|
||||
} = useKisRuntimeStore(
|
||||
useShallow((state) => ({
|
||||
verifiedCredentials: state.verifiedCredentials,
|
||||
isKisVerified: state.isKisVerified,
|
||||
_hasHydrated: state._hasHydrated,
|
||||
wsApprovalKey: state.wsApprovalKey,
|
||||
wsUrl: state.wsUrl,
|
||||
})),
|
||||
);
|
||||
|
||||
const canAccess = isKisVerified && Boolean(verifiedCredentials);
|
||||
|
||||
const {
|
||||
balance,
|
||||
indices,
|
||||
selectedHolding,
|
||||
selectedSymbol,
|
||||
setSelectedSymbol,
|
||||
isLoading,
|
||||
isRefreshing,
|
||||
balanceError,
|
||||
indicesError,
|
||||
lastUpdatedAt,
|
||||
refresh,
|
||||
} = useDashboardData(canAccess ? verifiedCredentials : null);
|
||||
|
||||
const isKisRestConnected = useMemo(() => {
|
||||
if (indices.length > 0) return true;
|
||||
if (balance && !balanceError) return true;
|
||||
return false;
|
||||
}, [balance, balanceError, indices.length]);
|
||||
|
||||
if (!_hasHydrated) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center p-6">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!canAccess) {
|
||||
return <DashboardAccessGate canAccess={canAccess} />;
|
||||
}
|
||||
|
||||
if (isLoading && !balance && indices.length === 0) {
|
||||
return <DashboardSkeleton />;
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="mx-auto flex w-full max-w-7xl flex-col gap-4 p-4 md:p-6">
|
||||
{/* ========== STATUS HEADER ========== */}
|
||||
<StatusHeader
|
||||
summary={balance?.summary ?? null}
|
||||
isKisRestConnected={isKisRestConnected}
|
||||
isWebSocketReady={Boolean(wsApprovalKey && wsUrl)}
|
||||
isRefreshing={isRefreshing}
|
||||
lastUpdatedAt={lastUpdatedAt}
|
||||
onRefresh={() => {
|
||||
void refresh();
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* ========== MAIN CONTENT GRID ========== */}
|
||||
<div className="grid gap-4 lg:grid-cols-[1.15fr_1fr]">
|
||||
<HoldingsList
|
||||
holdings={balance?.holdings ?? []}
|
||||
selectedSymbol={selectedSymbol}
|
||||
isLoading={isLoading}
|
||||
error={balanceError}
|
||||
onSelect={setSelectedSymbol}
|
||||
/>
|
||||
|
||||
<div className="grid gap-4">
|
||||
<MarketSummary
|
||||
items={indices}
|
||||
isLoading={isLoading}
|
||||
error={indicesError}
|
||||
/>
|
||||
|
||||
<StockDetailPreview
|
||||
holding={selectedHolding}
|
||||
totalAmount={balance?.summary.totalAmount ?? 0}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
59
features/dashboard/components/DashboardSkeleton.tsx
Normal file
59
features/dashboard/components/DashboardSkeleton.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
/**
|
||||
* @description 대시보드 초기 로딩 스켈레톤 UI입니다.
|
||||
* @see features/dashboard/components/DashboardContainer.tsx isLoading 상태에서 렌더링합니다.
|
||||
*/
|
||||
export function DashboardSkeleton() {
|
||||
return (
|
||||
<div className="mx-auto flex w-full max-w-7xl flex-col gap-4 p-4 md:p-6">
|
||||
{/* ========== HEADER SKELETON ========== */}
|
||||
<Card className="border-brand-200 dark:border-brand-800/50">
|
||||
<CardContent className="grid gap-3 p-4 md:grid-cols-4">
|
||||
<Skeleton className="h-20 w-full" />
|
||||
<Skeleton className="h-20 w-full" />
|
||||
<Skeleton className="h-20 w-full" />
|
||||
<Skeleton className="h-20 w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* ========== BODY SKELETON ========== */}
|
||||
<div className="grid gap-4 lg:grid-cols-[1.15fr_1fr]">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<Skeleton className="h-5 w-28" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{Array.from({ length: 6 }).map((_, index) => (
|
||||
<Skeleton key={index} className="h-14 w-full" />
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid gap-4">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<Skeleton className="h-5 w-24" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<Skeleton className="h-16 w-full" />
|
||||
<Skeleton className="h-16 w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<Skeleton className="h-5 w-40" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<Skeleton className="h-14 w-full" />
|
||||
<Skeleton className="h-14 w-full" />
|
||||
<Skeleton className="h-14 w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
123
features/dashboard/components/HoldingsList.tsx
Normal file
123
features/dashboard/components/HoldingsList.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import { AlertCircle, Wallet2 } from "lucide-react";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import type { DashboardHoldingItem } from "@/features/dashboard/types/dashboard.types";
|
||||
import {
|
||||
formatCurrency,
|
||||
formatPercent,
|
||||
getChangeToneClass,
|
||||
} from "@/features/dashboard/utils/dashboard-format";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface HoldingsListProps {
|
||||
holdings: DashboardHoldingItem[];
|
||||
selectedSymbol: string | null;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
onSelect: (symbol: string) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 보유 종목 리스트 카드입니다.
|
||||
* @see features/dashboard/components/DashboardContainer.tsx 좌측 메인 영역에서 호출합니다.
|
||||
*/
|
||||
export function HoldingsList({
|
||||
holdings,
|
||||
selectedSymbol,
|
||||
isLoading,
|
||||
error,
|
||||
onSelect,
|
||||
}: HoldingsListProps) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
{/* ========== TITLE ========== */}
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Wallet2 className="h-4 w-4 text-brand-600 dark:text-brand-400" />
|
||||
보유 종목
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
현재 보유 중인 종목을 선택하면 우측 상세가 갱신됩니다.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
{isLoading && holdings.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">보유 종목을 불러오는 중입니다.</p>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<p className="mb-2 flex items-start gap-1.5 text-sm text-red-600 dark:text-red-400">
|
||||
<AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
|
||||
<span>{error}</span>
|
||||
</p>
|
||||
)}
|
||||
|
||||
{!isLoading && holdings.length === 0 && !error && (
|
||||
<p className="text-sm text-muted-foreground">보유 종목이 없습니다.</p>
|
||||
)}
|
||||
|
||||
{holdings.length > 0 && (
|
||||
<ScrollArea className="h-[420px] pr-3">
|
||||
<div className="space-y-2">
|
||||
{holdings.map((holding) => {
|
||||
const isSelected = selectedSymbol === holding.symbol;
|
||||
const toneClass = getChangeToneClass(holding.profitLoss);
|
||||
|
||||
return (
|
||||
<button
|
||||
key={holding.symbol}
|
||||
type="button"
|
||||
onClick={() => onSelect(holding.symbol)}
|
||||
className={cn(
|
||||
"w-full rounded-xl border px-3 py-3 text-left transition-all",
|
||||
isSelected
|
||||
? "border-brand-400 bg-brand-50/60 ring-1 ring-brand-300 dark:border-brand-600 dark:bg-brand-900/20 dark:ring-brand-700"
|
||||
: "border-border/70 bg-background hover:border-brand-200 hover:bg-brand-50/30 dark:hover:border-brand-700 dark:hover:bg-brand-900/15",
|
||||
)}
|
||||
>
|
||||
{/* ========== ROW TOP ========== */}
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-foreground">
|
||||
{holding.name}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{holding.symbol} · {holding.market} · {holding.quantity}주
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm font-semibold text-foreground">
|
||||
{formatCurrency(holding.currentPrice)}원
|
||||
</p>
|
||||
<p className={cn("text-xs font-medium", toneClass)}>
|
||||
{formatPercent(holding.profitRate)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ========== ROW BOTTOM ========== */}
|
||||
<div className="mt-2 flex items-center justify-between text-xs">
|
||||
<span className="text-muted-foreground">
|
||||
평가금액 {formatCurrency(holding.evaluationAmount)}원
|
||||
</span>
|
||||
<span className={cn("font-medium", toneClass)}>
|
||||
손익 {formatCurrency(holding.profitLoss)}원
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
85
features/dashboard/components/MarketSummary.tsx
Normal file
85
features/dashboard/components/MarketSummary.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
import { AlertCircle, BarChart3 } from "lucide-react";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import type { DashboardMarketIndexItem } from "@/features/dashboard/types/dashboard.types";
|
||||
import {
|
||||
formatCurrency,
|
||||
formatSignedCurrency,
|
||||
formatSignedPercent,
|
||||
getChangeToneClass,
|
||||
} from "@/features/dashboard/utils/dashboard-format";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface MarketSummaryProps {
|
||||
items: DashboardMarketIndexItem[];
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 코스피/코스닥 지수 요약 카드입니다.
|
||||
* @see features/dashboard/components/DashboardContainer.tsx 우측 상단 영역에서 호출합니다.
|
||||
*/
|
||||
export function MarketSummary({ items, isLoading, error }: MarketSummaryProps) {
|
||||
return (
|
||||
<Card className="border-brand-200/80 dark:border-brand-800/45">
|
||||
<CardHeader className="pb-3">
|
||||
{/* ========== TITLE ========== */}
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<BarChart3 className="h-4 w-4 text-brand-600 dark:text-brand-400" />
|
||||
시장 요약
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
KOSPI/KOSDAQ 주요 지수 변동을 보여줍니다.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-2">
|
||||
{isLoading && items.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">지수 데이터를 불러오는 중입니다.</p>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<p className="flex items-center gap-1.5 text-sm text-red-600 dark:text-red-400">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{items.map((item) => {
|
||||
const toneClass = getChangeToneClass(item.change);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.code}
|
||||
className="rounded-xl border border-border/70 bg-background/70 px-3 py-2"
|
||||
>
|
||||
<div className="flex items-end justify-between">
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">{item.market}</p>
|
||||
<p className="text-sm font-semibold text-foreground">{item.name}</p>
|
||||
</div>
|
||||
<p className="text-lg font-semibold tracking-tight">
|
||||
{formatCurrency(item.price)}
|
||||
</p>
|
||||
</div>
|
||||
<div className={cn("mt-1 flex items-center gap-2 text-xs font-medium", toneClass)}>
|
||||
<span>{formatSignedCurrency(item.change)}</span>
|
||||
<span>{formatSignedPercent(item.changeRate)}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{!isLoading && items.length === 0 && !error && (
|
||||
<p className="text-sm text-muted-foreground">표시할 지수 데이터가 없습니다.</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
128
features/dashboard/components/StatusHeader.tsx
Normal file
128
features/dashboard/components/StatusHeader.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
import Link from "next/link";
|
||||
import { Activity, RefreshCcw, Settings2, Wifi } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import type { DashboardBalanceSummary } from "@/features/dashboard/types/dashboard.types";
|
||||
import {
|
||||
formatCurrency,
|
||||
formatPercent,
|
||||
getChangeToneClass,
|
||||
} from "@/features/dashboard/utils/dashboard-format";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface StatusHeaderProps {
|
||||
summary: DashboardBalanceSummary | null;
|
||||
isKisRestConnected: boolean;
|
||||
isWebSocketReady: boolean;
|
||||
isRefreshing: boolean;
|
||||
lastUpdatedAt: string | null;
|
||||
onRefresh: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 대시보드 상단 상태 헤더(총자산/손익/연결상태/빠른액션) 컴포넌트입니다.
|
||||
* @see features/dashboard/components/DashboardContainer.tsx 대시보드 루트에서 상태 값을 전달받아 렌더링합니다.
|
||||
*/
|
||||
export function StatusHeader({
|
||||
summary,
|
||||
isKisRestConnected,
|
||||
isWebSocketReady,
|
||||
isRefreshing,
|
||||
lastUpdatedAt,
|
||||
onRefresh,
|
||||
}: StatusHeaderProps) {
|
||||
const toneClass = getChangeToneClass(summary?.totalProfitLoss ?? 0);
|
||||
const updatedLabel = lastUpdatedAt
|
||||
? new Date(lastUpdatedAt).toLocaleTimeString("ko-KR", {
|
||||
hour12: false,
|
||||
})
|
||||
: "--:--:--";
|
||||
|
||||
return (
|
||||
<Card className="relative overflow-hidden border-brand-200 shadow-sm dark:border-brand-800/50">
|
||||
{/* ========== BACKGROUND DECORATION ========== */}
|
||||
<div className="pointer-events-none absolute inset-x-0 top-0 h-20 bg-linear-to-r from-brand-100/70 via-brand-50/50 to-transparent dark:from-brand-900/35 dark:via-brand-900/20" />
|
||||
|
||||
<CardContent className="relative grid gap-3 p-4 md:grid-cols-[1fr_1fr_1fr_auto]">
|
||||
{/* ========== TOTAL ASSET ========== */}
|
||||
<div className="rounded-xl border border-border/70 bg-background/90 px-4 py-3">
|
||||
<p className="text-xs font-medium text-muted-foreground">총 자산</p>
|
||||
<p className="mt-1 text-xl font-semibold tracking-tight">
|
||||
{summary ? `${formatCurrency(summary.totalAmount)}원` : "-"}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
예수금 {summary ? `${formatCurrency(summary.cashBalance)}원` : "-"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* ========== PROFIT/LOSS ========== */}
|
||||
<div className="rounded-xl border border-border/70 bg-background/90 px-4 py-3">
|
||||
<p className="text-xs font-medium text-muted-foreground">실시간 손익</p>
|
||||
<p className={cn("mt-1 text-xl font-semibold tracking-tight", toneClass)}>
|
||||
{summary ? `${formatCurrency(summary.totalProfitLoss)}원` : "-"}
|
||||
</p>
|
||||
<p className={cn("mt-1 text-xs font-medium", toneClass)}>
|
||||
{summary ? formatPercent(summary.totalProfitRate) : "-"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* ========== CONNECTION STATUS ========== */}
|
||||
<div className="rounded-xl border border-border/70 bg-background/90 px-4 py-3">
|
||||
<p className="text-xs font-medium text-muted-foreground">시스템 상태</p>
|
||||
<div className="mt-2 flex flex-wrap items-center gap-2 text-xs font-medium">
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1 rounded-full px-2 py-1",
|
||||
isKisRestConnected
|
||||
? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
|
||||
: "bg-red-500/10 text-red-600 dark:text-red-400",
|
||||
)}
|
||||
>
|
||||
<Wifi className="h-3.5 w-3.5" />
|
||||
REST {isKisRestConnected ? "연결됨" : "연결 끊김"}
|
||||
</span>
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1 rounded-full px-2 py-1",
|
||||
isWebSocketReady
|
||||
? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
|
||||
: "bg-muted text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
<Activity className="h-3.5 w-3.5" />
|
||||
WS {isWebSocketReady ? "준비됨" : "미연결"}
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-2 text-xs text-muted-foreground">
|
||||
마지막 갱신 {updatedLabel}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* ========== QUICK ACTIONS ========== */}
|
||||
<div className="flex items-end gap-2 md:flex-col md:items-stretch md:justify-between">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onRefresh}
|
||||
disabled={isRefreshing}
|
||||
className="w-full border-brand-200 text-brand-700 hover:bg-brand-50 dark:border-brand-700 dark:text-brand-300 dark:hover:bg-brand-900/30"
|
||||
>
|
||||
<RefreshCcw
|
||||
className={cn("h-4 w-4", isRefreshing ? "animate-spin" : "")}
|
||||
/>
|
||||
새로고침
|
||||
</Button>
|
||||
<Button
|
||||
asChild
|
||||
className="w-full bg-brand-600 text-white hover:bg-brand-700"
|
||||
>
|
||||
<Link href="/settings">
|
||||
<Settings2 className="h-4 w-4" />
|
||||
자동매매 설정
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
141
features/dashboard/components/StockDetailPreview.tsx
Normal file
141
features/dashboard/components/StockDetailPreview.tsx
Normal file
@@ -0,0 +1,141 @@
|
||||
import { BarChartBig, MousePointerClick } from "lucide-react";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import type { DashboardHoldingItem } from "@/features/dashboard/types/dashboard.types";
|
||||
import {
|
||||
formatCurrency,
|
||||
formatPercent,
|
||||
getChangeToneClass,
|
||||
} from "@/features/dashboard/utils/dashboard-format";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface StockDetailPreviewProps {
|
||||
holding: DashboardHoldingItem | null;
|
||||
totalAmount: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 선택 종목 상세 요약 카드입니다.
|
||||
* @see features/dashboard/components/DashboardContainer.tsx HoldingsList 선택 결과를 전달받아 렌더링합니다.
|
||||
*/
|
||||
export function StockDetailPreview({
|
||||
holding,
|
||||
totalAmount,
|
||||
}: StockDetailPreviewProps) {
|
||||
if (!holding) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<BarChartBig className="h-4 w-4 text-brand-600 dark:text-brand-400" />
|
||||
종목 상세 미리보기
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
보유 종목을 선택하면 상세 요약이 표시됩니다.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
왼쪽 보유 종목 리스트에서 종목을 선택해 주세요.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const profitToneClass = getChangeToneClass(holding.profitLoss);
|
||||
const allocationRate =
|
||||
totalAmount > 0 ? Math.min((holding.evaluationAmount / totalAmount) * 100, 100) : 0;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
{/* ========== TITLE ========== */}
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<BarChartBig className="h-4 w-4 text-brand-600 dark:text-brand-400" />
|
||||
종목 상세 미리보기
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{holding.name} ({holding.symbol}) · {holding.market}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-4">
|
||||
{/* ========== PRIMARY METRICS ========== */}
|
||||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||
<Metric label="보유 수량" value={`${holding.quantity.toLocaleString("ko-KR")}주`} />
|
||||
<Metric label="매입 평균가" value={`${formatCurrency(holding.averagePrice)}원`} />
|
||||
<Metric label="현재가" value={`${formatCurrency(holding.currentPrice)}원`} />
|
||||
<Metric
|
||||
label="수익률"
|
||||
value={formatPercent(holding.profitRate)}
|
||||
valueClassName={profitToneClass}
|
||||
/>
|
||||
<Metric
|
||||
label="평가손익"
|
||||
value={`${formatCurrency(holding.profitLoss)}원`}
|
||||
valueClassName={profitToneClass}
|
||||
/>
|
||||
<Metric
|
||||
label="평가금액"
|
||||
value={`${formatCurrency(holding.evaluationAmount)}원`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* ========== ALLOCATION BAR ========== */}
|
||||
<div className="rounded-xl border border-border/70 bg-background/70 p-3">
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<span>총 자산 대비 비중</span>
|
||||
<span>{formatPercent(allocationRate)}</span>
|
||||
</div>
|
||||
<div className="mt-2 h-2 rounded-full bg-muted">
|
||||
<div
|
||||
className="h-2 rounded-full bg-linear-to-r from-brand-500 to-brand-700"
|
||||
style={{ width: `${allocationRate}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ========== QUICK ORDER PLACEHOLDER ========== */}
|
||||
<div className="rounded-xl border border-dashed border-border/80 bg-muted/30 p-3">
|
||||
<p className="flex items-center gap-1.5 text-sm font-medium text-foreground/80">
|
||||
<MousePointerClick className="h-4 w-4 text-brand-500" />
|
||||
간편 주문(준비 중)
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
향후 이 영역에서 선택 종목의 빠른 매수/매도 기능을 제공합니다.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
interface MetricProps {
|
||||
label: string;
|
||||
value: string;
|
||||
valueClassName?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 상세 카드에서 공통으로 사용하는 지표 행입니다.
|
||||
* @param label 지표명
|
||||
* @param value 지표값
|
||||
* @param valueClassName 값 텍스트 색상 클래스
|
||||
* @see features/dashboard/components/StockDetailPreview.tsx 종목 상세 지표 표시
|
||||
*/
|
||||
function Metric({ label, value, valueClassName }: MetricProps) {
|
||||
return (
|
||||
<div className="rounded-xl border border-border/70 bg-background/70 p-3">
|
||||
<p className="text-xs text-muted-foreground">{label}</p>
|
||||
<p className={cn("mt-1 text-sm font-semibold text-foreground", valueClassName)}>
|
||||
{value}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
182
features/dashboard/hooks/use-dashboard-data.ts
Normal file
182
features/dashboard/hooks/use-dashboard-data.ts
Normal file
@@ -0,0 +1,182 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import type { KisRuntimeCredentials } from "@/features/settings/store/use-kis-runtime-store";
|
||||
import {
|
||||
fetchDashboardBalance,
|
||||
fetchDashboardIndices,
|
||||
} from "@/features/dashboard/apis/dashboard.api";
|
||||
import type {
|
||||
DashboardBalanceResponse,
|
||||
DashboardHoldingItem,
|
||||
DashboardIndicesResponse,
|
||||
} from "@/features/dashboard/types/dashboard.types";
|
||||
|
||||
interface UseDashboardDataResult {
|
||||
balance: DashboardBalanceResponse | null;
|
||||
indices: DashboardIndicesResponse["items"];
|
||||
selectedHolding: DashboardHoldingItem | null;
|
||||
selectedSymbol: string | null;
|
||||
setSelectedSymbol: (symbol: string) => void;
|
||||
isLoading: boolean;
|
||||
isRefreshing: boolean;
|
||||
balanceError: string | null;
|
||||
indicesError: string | null;
|
||||
lastUpdatedAt: string | null;
|
||||
refresh: () => Promise<void>;
|
||||
}
|
||||
|
||||
const POLLING_INTERVAL_MS = 60_000;
|
||||
|
||||
/**
|
||||
* @description 대시보드 잔고/지수 상태를 관리하는 훅입니다.
|
||||
* @param credentials KIS 인증 정보
|
||||
* @returns 대시보드 데이터/로딩/오류 상태
|
||||
* @remarks UI 흐름: 대시보드 진입 -> refresh("initial") -> balance/indices API 병렬 호출 -> 카드별 상태 반영
|
||||
* @see features/dashboard/components/DashboardContainer.tsx 대시보드 루트 컨테이너
|
||||
* @see features/dashboard/apis/dashboard.api.ts 실제 API 호출 함수
|
||||
*/
|
||||
export function useDashboardData(
|
||||
credentials: KisRuntimeCredentials | null,
|
||||
): UseDashboardDataResult {
|
||||
const [balance, setBalance] = useState<DashboardBalanceResponse | null>(null);
|
||||
const [indices, setIndices] = useState<DashboardIndicesResponse["items"]>([]);
|
||||
const [selectedSymbol, setSelectedSymbolState] = useState<string | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
const [balanceError, setBalanceError] = useState<string | null>(null);
|
||||
const [indicesError, setIndicesError] = useState<string | null>(null);
|
||||
const [lastUpdatedAt, setLastUpdatedAt] = useState<string | null>(null);
|
||||
|
||||
const requestSeqRef = useRef(0);
|
||||
|
||||
const hasAccountNo = Boolean(credentials?.accountNo?.trim());
|
||||
|
||||
/**
|
||||
* @description 잔고/지수 데이터를 병렬로 갱신합니다.
|
||||
* @param mode 초기 로드/수동 새로고침/주기 갱신 구분
|
||||
* @see features/dashboard/hooks/use-dashboard-data.ts useEffect 초기 호출/폴링/수동 새로고침
|
||||
*/
|
||||
const refreshInternal = useCallback(
|
||||
async (mode: "initial" | "manual" | "polling") => {
|
||||
if (!credentials) return;
|
||||
|
||||
const requestSeq = ++requestSeqRef.current;
|
||||
const isInitial = mode === "initial";
|
||||
|
||||
if (isInitial) {
|
||||
setIsLoading(true);
|
||||
} else {
|
||||
setIsRefreshing(true);
|
||||
}
|
||||
|
||||
const tasks: [
|
||||
Promise<DashboardBalanceResponse | null>,
|
||||
Promise<DashboardIndicesResponse>,
|
||||
] = [
|
||||
hasAccountNo
|
||||
? fetchDashboardBalance(credentials)
|
||||
: Promise.resolve(null),
|
||||
fetchDashboardIndices(credentials),
|
||||
];
|
||||
|
||||
const [balanceResult, indicesResult] = await Promise.allSettled(tasks);
|
||||
if (requestSeq !== requestSeqRef.current) return;
|
||||
|
||||
let hasAnySuccess = false;
|
||||
|
||||
if (!hasAccountNo) {
|
||||
setBalance(null);
|
||||
setBalanceError(
|
||||
"계좌번호가 없어 잔고를 조회할 수 없습니다. 설정에서 계좌번호(8-2)를 입력해 주세요.",
|
||||
);
|
||||
setSelectedSymbolState(null);
|
||||
} else if (balanceResult.status === "fulfilled") {
|
||||
hasAnySuccess = true;
|
||||
setBalance(balanceResult.value);
|
||||
setBalanceError(null);
|
||||
|
||||
setSelectedSymbolState((prev) => {
|
||||
const nextHoldings = balanceResult.value?.holdings ?? [];
|
||||
if (nextHoldings.length === 0) return null;
|
||||
if (prev && nextHoldings.some((item) => item.symbol === prev)) {
|
||||
return prev;
|
||||
}
|
||||
return nextHoldings[0]?.symbol ?? null;
|
||||
});
|
||||
} else {
|
||||
setBalanceError(balanceResult.reason instanceof Error ? balanceResult.reason.message : "잔고 조회에 실패했습니다.");
|
||||
}
|
||||
|
||||
if (indicesResult.status === "fulfilled") {
|
||||
hasAnySuccess = true;
|
||||
setIndices(indicesResult.value.items);
|
||||
setIndicesError(null);
|
||||
} else {
|
||||
setIndicesError(indicesResult.reason instanceof Error ? indicesResult.reason.message : "시장 지수 조회에 실패했습니다.");
|
||||
}
|
||||
|
||||
if (hasAnySuccess) {
|
||||
setLastUpdatedAt(new Date().toISOString());
|
||||
}
|
||||
|
||||
if (isInitial) {
|
||||
setIsLoading(false);
|
||||
} else {
|
||||
setIsRefreshing(false);
|
||||
}
|
||||
},
|
||||
[credentials, hasAccountNo],
|
||||
);
|
||||
|
||||
/**
|
||||
* @description 대시보드 수동 새로고침 핸들러입니다.
|
||||
* @see features/dashboard/components/StatusHeader.tsx 새로고침 버튼 onClick
|
||||
*/
|
||||
const refresh = useCallback(async () => {
|
||||
await refreshInternal("manual");
|
||||
}, [refreshInternal]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!credentials) return;
|
||||
|
||||
const timeout = window.setTimeout(() => {
|
||||
void refreshInternal("initial");
|
||||
}, 0);
|
||||
|
||||
return () => window.clearTimeout(timeout);
|
||||
}, [credentials, refreshInternal]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!credentials) return;
|
||||
|
||||
const interval = window.setInterval(() => {
|
||||
void refreshInternal("polling");
|
||||
}, POLLING_INTERVAL_MS);
|
||||
|
||||
return () => window.clearInterval(interval);
|
||||
}, [credentials, refreshInternal]);
|
||||
|
||||
const selectedHolding = useMemo(() => {
|
||||
if (!selectedSymbol || !balance) return null;
|
||||
return balance.holdings.find((item) => item.symbol === selectedSymbol) ?? null;
|
||||
}, [balance, selectedSymbol]);
|
||||
|
||||
const setSelectedSymbol = useCallback((symbol: string) => {
|
||||
setSelectedSymbolState(symbol);
|
||||
}, []);
|
||||
|
||||
return {
|
||||
balance,
|
||||
indices,
|
||||
selectedHolding,
|
||||
selectedSymbol,
|
||||
setSelectedSymbol,
|
||||
isLoading,
|
||||
isRefreshing,
|
||||
balanceError,
|
||||
indicesError,
|
||||
lastUpdatedAt,
|
||||
refresh,
|
||||
};
|
||||
}
|
||||
66
features/dashboard/types/dashboard.types.ts
Normal file
66
features/dashboard/types/dashboard.types.ts
Normal file
@@ -0,0 +1,66 @@
|
||||
/**
|
||||
* @file features/dashboard/types/dashboard.types.ts
|
||||
* @description 대시보드(잔고/지수/보유종목) 전용 타입 정의
|
||||
*/
|
||||
|
||||
import type { KisTradingEnv } from "@/features/trade/types/trade.types";
|
||||
|
||||
export type DashboardMarket = "KOSPI" | "KOSDAQ";
|
||||
|
||||
/**
|
||||
* 대시보드 잔고 요약
|
||||
*/
|
||||
export interface DashboardBalanceSummary {
|
||||
totalAmount: number;
|
||||
cashBalance: number;
|
||||
totalProfitLoss: number;
|
||||
totalProfitRate: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 대시보드 보유 종목 항목
|
||||
*/
|
||||
export interface DashboardHoldingItem {
|
||||
symbol: string;
|
||||
name: string;
|
||||
market: DashboardMarket;
|
||||
quantity: number;
|
||||
averagePrice: number;
|
||||
currentPrice: number;
|
||||
evaluationAmount: number;
|
||||
profitLoss: number;
|
||||
profitRate: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 계좌 잔고 API 응답 모델
|
||||
*/
|
||||
export interface DashboardBalanceResponse {
|
||||
source: "kis";
|
||||
tradingEnv: KisTradingEnv;
|
||||
summary: DashboardBalanceSummary;
|
||||
holdings: DashboardHoldingItem[];
|
||||
fetchedAt: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 시장 지수 항목
|
||||
*/
|
||||
export interface DashboardMarketIndexItem {
|
||||
market: DashboardMarket;
|
||||
code: string;
|
||||
name: string;
|
||||
price: number;
|
||||
change: number;
|
||||
changeRate: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 시장 지수 API 응답 모델
|
||||
*/
|
||||
export interface DashboardIndicesResponse {
|
||||
source: "kis";
|
||||
tradingEnv: KisTradingEnv;
|
||||
items: DashboardMarketIndexItem[];
|
||||
fetchedAt: string;
|
||||
}
|
||||
66
features/dashboard/utils/dashboard-format.ts
Normal file
66
features/dashboard/utils/dashboard-format.ts
Normal file
@@ -0,0 +1,66 @@
|
||||
/**
|
||||
* @file features/dashboard/utils/dashboard-format.ts
|
||||
* @description 대시보드 숫자/색상 표현 유틸
|
||||
*/
|
||||
|
||||
const KRW_FORMATTER = new Intl.NumberFormat("ko-KR");
|
||||
const PERCENT_FORMATTER = new Intl.NumberFormat("ko-KR", {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
});
|
||||
|
||||
/**
|
||||
* 원화 금액을 포맷합니다.
|
||||
* @param value 숫자 값
|
||||
* @returns 쉼표 포맷 문자열
|
||||
* @see features/dashboard/components/StatusHeader.tsx 자산/손익 금액 표시
|
||||
*/
|
||||
export function formatCurrency(value: number) {
|
||||
return KRW_FORMATTER.format(value);
|
||||
}
|
||||
|
||||
/**
|
||||
* 퍼센트 값을 포맷합니다.
|
||||
* @param value 숫자 값
|
||||
* @returns 소수점 2자리 퍼센트 문자열
|
||||
* @see features/dashboard/components/StatusHeader.tsx 수익률 표시
|
||||
*/
|
||||
export function formatPercent(value: number) {
|
||||
return `${PERCENT_FORMATTER.format(value)}%`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 값의 부호를 포함한 금액 문자열을 만듭니다.
|
||||
* @param value 숫자 값
|
||||
* @returns + 또는 - 부호가 포함된 금액 문자열
|
||||
* @see features/dashboard/components/MarketSummary.tsx 전일 대비 수치 표시
|
||||
*/
|
||||
export function formatSignedCurrency(value: number) {
|
||||
if (value > 0) return `+${formatCurrency(value)}`;
|
||||
if (value < 0) return `-${formatCurrency(Math.abs(value))}`;
|
||||
return "0";
|
||||
}
|
||||
|
||||
/**
|
||||
* 값의 부호를 포함한 퍼센트 문자열을 만듭니다.
|
||||
* @param value 숫자 값
|
||||
* @returns + 또는 - 부호가 포함된 퍼센트 문자열
|
||||
* @see features/dashboard/components/MarketSummary.tsx 전일 대비율 표시
|
||||
*/
|
||||
export function formatSignedPercent(value: number) {
|
||||
if (value > 0) return `+${formatPercent(value)}`;
|
||||
if (value < 0) return `-${formatPercent(Math.abs(value))}`;
|
||||
return "0.00%";
|
||||
}
|
||||
|
||||
/**
|
||||
* 숫자 값의 상승/하락/보합 텍스트 색상을 반환합니다.
|
||||
* @param value 숫자 값
|
||||
* @returns Tailwind 텍스트 클래스
|
||||
* @see features/dashboard/components/HoldingsList.tsx 수익률/손익 색상 적용
|
||||
*/
|
||||
export function getChangeToneClass(value: number) {
|
||||
if (value > 0) return "text-red-600 dark:text-red-400";
|
||||
if (value < 0) return "text-blue-600 dark:text-blue-400";
|
||||
return "text-muted-foreground";
|
||||
}
|
||||
Reference in New Issue
Block a user