diff --git a/frontend/src/pages/StrategySettings.tsx b/frontend/src/pages/StrategySettings.tsx index adb7188..5c23ddc 100644 --- a/frontend/src/pages/StrategySettings.tsx +++ b/frontend/src/pages/StrategySettings.tsx @@ -11,7 +11,7 @@ import { getPresetDiff, } from '../utils/strategyPresets' -// ── 타입 ────────────────────────────────────── +// ── 타입 ────────────────────────────────────────────── interface StrategyConfig { id: number @@ -28,7 +28,7 @@ interface StrategyConfig { updated_by: string | null } -// ── 그룹 한글 레이블 ──────────────────────────── +// ── 그룹 한글 레이블 ──────────────────────────────────────── const GROUP_LABELS: Record = { INDICATOR: '기술 지표', @@ -59,7 +59,7 @@ const CORE_PARAMS = [ 'DAY_TRADE_ENABLED', ] -// ── 프리셋 카드 컴포넌트 ──────────────────────────── +// ── 프리셋 카드 컴포넌트 ──────────────────────────────────────── interface PresetCardProps { presetKey: PresetKey @@ -113,7 +113,7 @@ function PresetCard({ presetKey, isSelected, onSelect }: PresetCardProps) { ) } -// ── 개별 파라미터 행 컴포넌트 ──────────────────────── +// ── 개별 파라미터 행 컴포넌트 ──────────────────────────────── interface ConfigRowProps { cfg: StrategyConfig @@ -233,7 +233,7 @@ function ConfigRow({ cfg, onSave, onToggle, onReset, isSaving }: ConfigRowProps) ) } -// ── 그룹 섹션 컴포넌트 ────────────────────────────── +// ── 그룹 섹션 컴포넌트 ────────────────────────────────────────────── interface GroupSectionProps { groupKey: string @@ -242,19 +242,33 @@ interface GroupSectionProps { onToggle: (key: string) => void onReset: (key: string) => void isSaving: boolean - defaultExpanded?: boolean + isExpanded: boolean + onToggleExpand: () => void } -function GroupSection({ groupKey, configs, onSave, onToggle, onReset, isSaving, defaultExpanded = false }: GroupSectionProps) { - const [collapsed, setCollapsed] = useState(!defaultExpanded) +function GroupSection({ + groupKey, + configs, + onSave, + onToggle, + onReset, + isSaving, + isExpanded, + onToggleExpand +}: GroupSectionProps) { const modifiedCount = configs.filter(c => c.value !== c.default_value).length return (
{/* 그룹 헤더 */} {/* 파라미터 카드 그리드 */} - {!collapsed && ( + {isExpanded && (
{configs.map((cfg) => ( { const queryClient = useQueryClient() const [notification, setNotification] = useState<{ type: 'success' | 'error'; msg: string } | null>(null) const [showPresets, setShowPresets] = useState(true) + const [expandedGroups, setExpandedGroups] = useState>(new Set()) const showNotification = (type: 'success' | 'error', msg: string) => { setNotification({ type, msg }) setTimeout(() => setNotification(null), 3000) } + const toggleGroupExpand = (groupKey: string) => { + setExpandedGroups(prev => { + const next = new Set(prev) + if (next.has(groupKey)) { + next.delete(groupKey) + } else { + next.add(groupKey) + } + return next + }) + } + // 전략 파라미터 목록 조회 const { data: configs = [], isLoading, refetch } = useQuery({ queryKey: ['strategy-config'], @@ -558,7 +585,8 @@ const StrategySettings = () => { onToggle={(key) => toggleMutation.mutate(key)} onReset={(key) => resetOneMutation.mutate(key)} isSaving={updateMutation.isPending} - defaultExpanded={false} + isExpanded={expandedGroups.has(groupKey)} + onToggleExpand={() => toggleGroupExpand(groupKey)} /> ))}