jihoon87/auto-trade
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

테마 적용

Browse Source
This commit is contained in:
jihoon87.lee
2026-02-11 14:06:06 +09:00
parent def87bd47a
commit 95291e6922
30 changed files with 1209 additions and 496 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
features/dashboard/components/order/OrderForm.tsx
View File

@@ -1,71 +1,70 @@
import { useState } from "react";
import { Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import type {
DashboardStockItem,
DashboardOrderSide,
} from "@/features/dashboard/types/dashboard.types";
import { useOrder } from "@/features/dashboard/hooks/useOrder";
import { useKisRuntimeStore } from "@/features/dashboard/store/use-kis-runtime-store";
import { Loader2 } from "lucide-react";
import type {
DashboardOrderSide,
DashboardStockItem,
} from "@/features/dashboard/types/dashboard.types";
interface OrderFormProps {
stock?: DashboardStockItem;
}
/**
* @description 대시보드 주문 패널에서 매수/매도 주문을 입력하고 전송합니다.
* @see features/dashboard/hooks/useOrder.ts placeOrder - 주문 API 호출
* @see features/dashboard/components/DashboardContainer.tsx OrderForm - 우측 주문 패널 렌더링
*/
export function OrderForm({ stock }: OrderFormProps) {
const verifiedCredentials = useKisRuntimeStore(
(state) => state.verifiedCredentials,
);
const { placeOrder, isLoading, error } = useOrder();
// Form State
// Initial price set from stock current price if available, relying on component remount (key) for updates
const [price, setPrice] = useState<string>(
stock?.currentPrice.toString() || "",
);
// ========== FORM STATE ==========
const [price, setPrice] = useState<string>(stock?.currentPrice.toString() || "");
const [quantity, setQuantity] = useState<string>("");
const [activeTab, setActiveTab] = useState("buy");
const [activeTab, setActiveTab] = useState<"buy" | "sell">("buy");
// ========== ORDER HANDLER ==========
const handleOrder = async (side: DashboardOrderSide) => {
if (!stock || !verifiedCredentials) return;
const priceNum = parseInt(price.replace(/,/g, ""), 10);
const qtyNum = parseInt(quantity.replace(/,/g, ""), 10);
if (isNaN(priceNum) || priceNum <= 0) {
alert("가격을 올바르게 입력해주세요.");
if (Number.isNaN(priceNum) || priceNum <= 0) {
alert("가격을 올바르게 입력해 주세요.");
return;
}
if (isNaN(qtyNum) || qtyNum <= 0) {
alert("수량을 올바르게 입력해주세요.");
if (Number.isNaN(qtyNum) || qtyNum <= 0) {
alert("수량을 올바르게 입력해 주세요.");
return;
}
if (!verifiedCredentials.accountNo) {
alert(
"계좌번호가 설정되지 않았습니다. 설정에서 계좌번호를 입력해주세요.",
);
alert("계좌번호가 없습니다. 설정에서 계좌번호를 입력해 주세요.");
return;
}
const response = await placeOrder(
{
symbol: stock.symbol,
side: side,
orderType: "limit", // 지정가 고정
side,
orderType: "limit",
price: priceNum,
quantity: qtyNum,
accountNo: verifiedCredentials.accountNo,
accountProductCode: "01", // Default to '01' (위탁)
accountProductCode: "01",
},
verifiedCredentials,
);
if (response && response.orderNo) {
alert(`주문 전송 완료! 주문번호: ${response.orderNo}`);
if (response?.orderNo) {
alert(`주문 전송 완료: ${response.orderNo}`);
setQuantity("");
}
};
@@ -75,34 +74,36 @@ export function OrderForm({ stock }: OrderFormProps) {
parseInt(quantity.replace(/,/g, "") || "0", 10);
const setPercent = (pct: string) => {
// Placeholder logic for percent click
// TODO: 계좌 잔고 연동 시 퍼센트 자동 계산으로 교체
console.log("Percent clicked:", pct);
};
const isMarketDataAvailable = !!stock;
const isMarketDataAvailable = Boolean(stock);
return (
<div className="h-full border-l border-border bg-background p-3 sm:p-4">
<div className="h-full border-l border-border bg-background p-3 dark:border-brand-800/45 dark:bg-brand-950/55 sm:p-4">
<Tabs
value={activeTab}
onValueChange={setActiveTab}
className="w-full h-full flex flex-col"
onValueChange={(value) => setActiveTab(value as "buy" | "sell")}
className="flex h-full w-full flex-col"
>
<TabsList className="mb-3 grid w-full grid-cols-2 sm:mb-4">
{/* ========== ORDER SIDE TABS ========== */}
<TabsList className="mb-3 grid h-10 w-full grid-cols-2 gap-1 border border-brand-200/70 bg-muted/35 p-1 dark:border-brand-700/50 dark:bg-brand-900/28 sm:mb-4">
<TabsTrigger
value="buy"
className="data-[state=active]:bg-red-600 data-[state=active]:text-white transition-colors"
className="!h-full rounded-md border border-transparent text-foreground/75 transition-colors dark:text-brand-100/75 data-[state=active]:border-red-400/60 data-[state=active]:bg-red-600 data-[state=active]:text-white data-[state=active]:shadow-[0_0_0_1px_rgba(248,113,113,0.45)]"
>
매수
</TabsTrigger>
<TabsTrigger
value="sell"
className="data-[state=active]:bg-blue-600 data-[state=active]:text-white transition-colors"
className="!h-full rounded-md border border-transparent text-foreground/75 transition-colors dark:text-brand-100/75 data-[state=active]:border-blue-400/65 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-[0_0_0_1px_rgba(96,165,250,0.45)]"
>
매도
</TabsTrigger>
</TabsList>
{/* ========== BUY TAB ========== */}
<TabsContent
value="buy"
className="flex flex-1 flex-col space-y-3 data-[state=inactive]:hidden sm:space-y-4"
@@ -115,21 +116,20 @@ export function OrderForm({ stock }: OrderFormProps) {
setQuantity={setQuantity}
totalPrice={totalPrice}
disabled={!isMarketDataAvailable}
hasError={!!error}
hasError={Boolean(error)}
errorMessage={error}
/>
<PercentButtons onSelect={setPercent} />
<Button
className="mt-auto h-11 w-full bg-red-600 text-base hover:bg-red-700 sm:h-12 sm:text-lg"
className="mt-auto h-11 w-full bg-red-600 text-base text-white shadow-sm ring-1 ring-red-300/35 hover:bg-red-700 dark:bg-red-500 dark:ring-red-300/45 dark:hover:bg-red-400 sm:h-12 sm:text-lg"
disabled={isLoading || !isMarketDataAvailable}
onClick={() => handleOrder("buy")}
>
{isLoading ? <Loader2 className="animate-spin mr-2" /> : "매수하기"}
{isLoading ? <Loader2 className="mr-2 animate-spin" /> : "매수하기"}
</Button>
</TabsContent>
{/* ========== SELL TAB ========== */}
<TabsContent
value="sell"
className="flex flex-1 flex-col space-y-3 data-[state=inactive]:hidden sm:space-y-4"
@@ -142,18 +142,16 @@ export function OrderForm({ stock }: OrderFormProps) {
setQuantity={setQuantity}
totalPrice={totalPrice}
disabled={!isMarketDataAvailable}
hasError={!!error}
hasError={Boolean(error)}
errorMessage={error}
/>
<PercentButtons onSelect={setPercent} />
<Button
className="mt-auto h-11 w-full bg-blue-600 text-base hover:bg-blue-700 sm:h-12 sm:text-lg"
className="mt-auto h-11 w-full bg-blue-600 text-base text-white shadow-sm ring-1 ring-blue-300/35 hover:bg-blue-700 dark:bg-blue-500 dark:ring-blue-300/45 dark:hover:bg-blue-400 sm:h-12 sm:text-lg"
disabled={isLoading || !isMarketDataAvailable}
onClick={() => handleOrder("sell")}
>
{isLoading ? <Loader2 className="animate-spin mr-2" /> : "매도하기"}
{isLoading ? <Loader2 className="mr-2 animate-spin" /> : "매도하기"}
</Button>
</TabsContent>
</Tabs>
@@ -161,6 +159,10 @@ export function OrderForm({ stock }: OrderFormProps) {
);
}
/**
* @description 주문 입력 영역(가격/수량/총액)을 렌더링합니다.
* @see features/dashboard/components/order/OrderForm.tsx OrderForm - 매수/매도 탭에서 공용 호출
*/
function OrderInputs({
type,
price,
@@ -190,7 +192,7 @@ function OrderInputs({
</div>
{hasError && (
<div className="p-2 bg-destructive/10 text-destructive text-xs rounded break-keep">
<div className="rounded bg-destructive/10 p-2 text-xs text-destructive break-keep">
{errorMessage}
</div>
)}
@@ -200,27 +202,29 @@ function OrderInputs({
{type === "buy" ? "매수가격" : "매도가격"}
</span>
<Input
className="col-span-3 text-right font-mono"
className="col-span-3 text-right font-mono dark:border-brand-700/55 dark:bg-black/25 dark:text-brand-100"
placeholder="0"
value={price}
onChange={(e) => setPrice(e.target.value)}
disabled={disabled}
/>
</div>
<div className="grid grid-cols-4 items-center gap-2">
<span className="text-xs font-medium sm:text-sm">주문수량</span>
<Input
className="col-span-3 text-right font-mono"
className="col-span-3 text-right font-mono dark:border-brand-700/55 dark:bg-black/25 dark:text-brand-100"
placeholder="0"
value={quantity}
onChange={(e) => setQuantity(e.target.value)}
disabled={disabled}
/>
</div>
<div className="grid grid-cols-4 items-center gap-2">
<span className="text-xs font-medium sm:text-sm">주문총액</span>
<Input
className="col-span-3 text-right font-mono bg-muted/50"
className="col-span-3 bg-muted/50 text-right font-mono dark:border-brand-700/55 dark:bg-black/20 dark:text-brand-100"
value={totalPrice.toLocaleString()}
readOnly
disabled={disabled}
@@ -230,9 +234,13 @@ function OrderInputs({
);
}
/**
* @description 주문 비율(10/25/50/100%) 단축 버튼을 표시합니다.
* @see features/dashboard/components/order/OrderForm.tsx setPercent - 버튼 클릭 이벤트 처리
*/
function PercentButtons({ onSelect }: { onSelect: (pct: string) => void }) {
return (
<div className="grid grid-cols-4 gap-2 mt-2">
<div className="mt-2 grid grid-cols-4 gap-2">
{["10%", "25%", "50%", "100%"].map((pct) => (
<Button
key={pct}