테마 적용

This commit is contained in:
2026-02-11 14:06:06 +09:00
parent def87bd47a
commit 95291e6922
30 changed files with 1209 additions and 496 deletions

View File

@@ -114,10 +114,10 @@ export function KisAuthForm() {
}
return (
<Card className="border-brand-200 bg-linear-to-r from-brand-50/60 to-background">
<Card className="border-brand-200 bg-linear-to-r from-brand-50/60 to-background dark:border-brand-700/50 dark:from-brand-900/35 dark:to-background">
<CardHeader>
<CardTitle>KIS API </CardTitle>
<CardDescription>
<CardTitle className="text-foreground dark:text-brand-50">KIS API </CardTitle>
<CardDescription className="text-muted-foreground dark:text-brand-100/80">
, API .
.
</CardDescription>
@@ -127,7 +127,7 @@ export function KisAuthForm() {
{/* ========== CREDENTIAL INPUTS ========== */}
<div className="grid gap-3 md:grid-cols-3">
<div>
<label className="mb-1 block text-xs text-muted-foreground">
<label className="mb-1 block text-xs text-muted-foreground dark:text-brand-100/72">
</label>
<div className="flex gap-2">
@@ -135,10 +135,11 @@ export function KisAuthForm() {
type="button"
variant={kisTradingEnvInput === "real" ? "default" : "outline"}
className={cn(
"flex-1",
"flex-1 border transition-all",
"dark:border-brand-700/70 dark:bg-black/20 dark:text-brand-100/80 dark:hover:bg-brand-900/45",
kisTradingEnvInput === "real"
? "bg-brand-600 hover:bg-brand-700"
: "",
? "bg-brand-600 text-white shadow-sm ring-2 ring-brand-300/45 hover:bg-brand-500 dark:bg-brand-500 dark:text-white dark:ring-brand-300/55"
: "text-brand-700 hover:text-brand-800 dark:text-brand-100/80",
)}
onClick={() => setKisTradingEnvInput("real")}
>
@@ -148,10 +149,11 @@ export function KisAuthForm() {
type="button"
variant={kisTradingEnvInput === "mock" ? "default" : "outline"}
className={cn(
"flex-1",
"flex-1 border transition-all",
"dark:border-brand-700/70 dark:bg-black/20 dark:text-brand-100/80 dark:hover:bg-brand-900/45",
kisTradingEnvInput === "mock"
? "bg-brand-600 hover:bg-brand-700"
: "",
? "bg-brand-600 text-white shadow-sm ring-2 ring-brand-300/45 hover:bg-brand-500 dark:bg-brand-500 dark:text-white dark:ring-brand-300/55"
: "text-brand-700 hover:text-brand-800 dark:text-brand-100/80",
)}
onClick={() => setKisTradingEnvInput("mock")}
>
@@ -166,6 +168,7 @@ export function KisAuthForm() {
</label>
<Input
type="password"
className="dark:border-brand-700/60 dark:bg-black/20 dark:text-brand-50 dark:placeholder:text-brand-200/55"
value={kisAppKeyInput}
onChange={(e) => setKisAppKeyInput(e.target.value)}
placeholder="App Key 입력"
@@ -179,6 +182,7 @@ export function KisAuthForm() {
</label>
<Input
type="password"
className="dark:border-brand-700/60 dark:bg-black/20 dark:text-brand-50 dark:placeholder:text-brand-200/55"
value={kisAppSecretInput}
onChange={(e) => setKisAppSecretInput(e.target.value)}
placeholder="App Secret 입력"
@@ -205,14 +209,14 @@ export function KisAuthForm() {
variant="outline"
onClick={handleRevoke}
disabled={isRevoking || !isKisVerified || !verifiedCredentials}
className="border-brand-200 text-brand-700 hover:bg-brand-50 hover:text-brand-800"
className="border-brand-200 text-brand-700 hover:bg-brand-50 hover:text-brand-800 dark:border-brand-700/60 dark:text-brand-200 dark:hover:bg-brand-900/35 dark:hover:text-brand-100"
>
{isRevoking ? "해제 중..." : "연결 끊기"}
</Button>
{isKisVerified ? (
<span className="flex items-center text-sm font-medium text-green-600">
<span className="mr-1.5 h-2 w-2 rounded-full bg-green-500 ring-2 ring-green-100" />
<span className="flex items-center text-sm font-medium text-brand-700 dark:text-brand-200">
<span className="mr-1.5 h-2 w-2 rounded-full bg-brand-500 ring-2 ring-brand-100 dark:ring-brand-900" />
({verifiedCredentials?.tradingEnv === "real" ? "실전" : "모의"})
</span>
) : (
@@ -223,7 +227,9 @@ export function KisAuthForm() {
{errorMessage && (
<div className="text-sm font-medium text-destructive">{errorMessage}</div>
)}
{statusMessage && <div className="text-sm text-blue-600">{statusMessage}</div>}
{statusMessage && (
<div className="text-sm text-brand-700 dark:text-brand-200">{statusMessage}</div>
)}
</CardContent>
</Card>
);