diff --git a/frontend/src/pages/StrategySettings.tsx b/frontend/src/pages/StrategySettings.tsx
new file mode 100644
index 0000000..7d477ec
--- /dev/null
+++ b/frontend/src/pages/StrategySettings.tsx
@@ -0,0 +1,398 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import api from '../lib/api'
+import { useState, useMemo } from 'react'
+import HtsPage from '../components/HtsPage'
+import { RotateCcw, Save, Power, PowerOff, ChevronDown, ChevronRight, RefreshCw } from 'lucide-react'
+
+// ── 타입 ─────────────────────────────────────────────────────────────────────
+
+interface StrategyConfig {
+ id: number
+ key: string
+ group: string
+ label: string
+ description: string | null
+ value_type: string // 'float' | 'int' | 'bool' | 'str'
+ value: string
+ default_value: string
+ min_value: string | null
+ max_value: string | null
+ is_active: boolean
+ updated_by: string | null
+}
+
+// ── 그룹 한글 레이블 ──────────────────────────────────────────────────────────
+
+const GROUP_LABELS: Record = {
+ INDICATOR: '기술 지표',
+ RISK: '리스크 관리',
+ FILTER: '진입 필터',
+ DAY_TRADE: '데이트레이딩',
+ MEAN_REVERSION: '평균회귀 전략',
+ GENERAL: '일반 설정',
+}
+
+const GROUP_ORDER = ['GENERAL', 'RISK', 'FILTER', 'INDICATOR', 'MEAN_REVERSION', 'DAY_TRADE']
+
+// ── 개별 파라미터 행 컴포넌트 ─────────────────────────────────────────────────
+
+interface ConfigRowProps {
+ cfg: StrategyConfig
+ onSave: (key: string, value: string) => void
+ onToggle: (key: string) => void
+ onReset: (key: string) => void
+ isSaving: boolean
+}
+
+function ConfigRow({ cfg, onSave, onToggle, onReset, isSaving }: ConfigRowProps) {
+ const [editValue, setEditValue] = useState(cfg.value)
+ const [dirty, setDirty] = useState(false)
+
+ const isDefault = cfg.value === cfg.default_value
+ const isModified = !isDefault && !dirty
+
+ const handleChange = (val: string) => {
+ setEditValue(val)
+ setDirty(val !== cfg.value)
+ }
+
+ const handleSave = () => {
+ onSave(cfg.key, editValue)
+ setDirty(false)
+ }
+
+ const handleReset = () => {
+ setEditValue(cfg.default_value)
+ setDirty(cfg.default_value !== cfg.value)
+ onReset(cfg.key)
+ }
+
+ const isBool = cfg.value_type === 'bool'
+ const isTrue = cfg.value === 'true' || cfg.value === 'True' || cfg.value === '1'
+
+ return (
+ = {
+ GENERAL: '⚙️',
+ RISK: '🛡️',
+ FILTER: '🔍',
+ INDICATOR: '📊',
+ MEAN_REVERSION: '↩️',
+ DAY_TRADE: '⚡',
+}
+
+interface GroupSectionProps {
+ groupKey: string
+ configs: StrategyConfig[]
+ onSave: (key: string, value: string) => void
+ onToggle: (key: string) => void
+ onReset: (key: string) => void
+ isSaving: boolean
+}
+
+function GroupSection({ groupKey, configs, onSave, onToggle, onReset, isSaving }: GroupSectionProps) {
+ const [collapsed, setCollapsed] = useState(false)
+ const modifiedCount = configs.filter(c => c.value !== c.default_value).length
+
+ return (
+ ({
+ queryKey: ['strategy-config'],
+ queryFn: async () => {
+ const res = await api.get('/strategy-config')
+ return res.data
+ },
+ staleTime: 10_000,
+ })
+
+ // 단일 파라미터 수정
+ const updateMutation = useMutation({
+ mutationFn: async ({ key, value }: { key: string; value: string }) => {
+ return api.put(`/strategy-config/${key}`, { value, updated_by: 'ui' })
+ },
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['strategy-config'] })
+ showNotification('success', '저장 완료')
+ },
+ onError: (err: any) => {
+ showNotification('error', `저장 실패: ${err.response?.data?.detail || err.message}`)
+ },
+ })
+
+ // 활성화 토글
+ const toggleMutation = useMutation({
+ mutationFn: async (key: string) => {
+ return api.patch(`/strategy-config/${key}/toggle`)
+ },
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['strategy-config'] })
+ },
+ onError: (err: any) => {
+ showNotification('error', `토글 실패: ${err.message}`)
+ },
+ })
+
+ // 단일 기본값 리셋
+ const resetOneMutation = useMutation({
+ mutationFn: async (key: string) => {
+ return api.post(`/strategy-config/${key}/reset`)
+ },
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['strategy-config'] })
+ showNotification('success', '기본값으로 초기화 완료')
+ },
+ })
+
+ // 전체 기본값 리셋
+ const resetAllMutation = useMutation({
+ mutationFn: async () => {
+ return api.post('/strategy-config/reset-all')
+ },
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['strategy-config'] })
+ showNotification('success', '전체 파라미터가 기본값으로 초기화되었습니다.')
+ },
+ onError: (err: any) => {
+ showNotification('error', `초기화 실패: ${err.message}`)
+ },
+ })
+
+ // 그룹별 분류
+ const grouped = useMemo(() => {
+ const map: Record = {}
+ for (const cfg of configs) {
+ if (!map[cfg.group]) map[cfg.group] = []
+ map[cfg.group].push(cfg)
+ }
+ return map
+ }, [configs])
+
+ // 수정된 파라미터 수
+ const totalModified = configs.filter(c => c.value !== c.default_value).length
+
+ if (isLoading) {
+ return (
+
+
+ )
+ }
+
+ return (
+
+
+ )
+}
+
+export default StrategySettings
+ {/* 상태 뱃지 */}
+ {(isModified || dirty) && (
+
+ {dirty ? '미저장' : '수정됨'}
+
+ )}
+
+ {/* 레이블 + 설명 */}
+
+ )
+}
+
+// ── 그룹 섹션 컴포넌트 ────────────────────────────────────────────────────────
+
+const GROUP_ICONS: Record{cfg.label}
+ {cfg.description && ( +{cfg.description}
+ )} + + {/* 컨트롤 영역 */} +
+ {isBool ? (
+
+ ) : (
+
+
+ handleChange(e.target.value)}
+ disabled={!cfg.is_active}
+ step={cfg.value_type === 'float' ? '0.001' : '1'}
+ min={cfg.min_value ?? undefined}
+ max={cfg.max_value ?? undefined}
+ className="w-20 px-2 py-1 text-xs bg-slate-800 border border-slate-700 rounded text-white text-right
+ focus:outline-none focus:border-blue-500 disabled:opacity-40"
+ />
+ / {cfg.default_value}
+
+ )}
+
+ {/* 액션 버튼 */}
+
+ {!isBool && (
+
+ )}
+
+
+
+
+ {/* 그룹 헤더 */}
+
+
+ {/* 파라미터 카드 그리드 */}
+ {!collapsed && (
+
+ )
+}
+
+// ── 메인 페이지 ───────────────────────────────────────────────────────────────
+
+const StrategySettings = () => {
+ const queryClient = useQueryClient()
+ const [notification, setNotification] = useState<{ type: 'success' | 'error'; msg: string } | null>(null)
+
+ const showNotification = (type: 'success' | 'error', msg: string) => {
+ setNotification({ type, msg })
+ setTimeout(() => setNotification(null), 3000)
+ }
+
+ // 전략 파라미터 목록 조회
+ const { data: configs = [], isLoading, refetch } = useQuery
+ {configs.map((cfg) => (
+
+ )}
+
+ 로딩 중...
+
+
+ {/* 헤더 */}
+
+
+
+
+ {/* 알림 배너 */}
+ {notification && (
+
+
+ 전략 설정
++ 변경 즉시 캐시 무효화 → 30초 이내 전략 코드에 반영됩니다. + 비활성화 시 config.py 기본값이 사용됩니다. +
+
+
+
+
+
+ {notification.msg}
+
+ )}
+
+ {/* 파라미터 없음 */}
+ {configs.length === 0 && (
+
+
+ )}
+
+ {/* 그룹별 섹션 — 2열 그리드 */}
+ 전략 파라미터가 없습니다.
+DB 마이그레이션 후 서버를 재시작하면 기본값이 자동 생성됩니다.
+
+ {[
+ ...GROUP_ORDER.filter(g => grouped[g]?.length),
+ ...Object.keys(grouped).filter(g => !GROUP_ORDER.includes(g) && grouped[g]?.length),
+ ].map(groupKey => (
+
+
+ updateMutation.mutate({ key, value })}
+ onToggle={(key) => toggleMutation.mutate(key)}
+ onReset={(key) => resetOneMutation.mutate(key)}
+ isSaving={updateMutation.isPending}
+ />
+
+ ))}
+