diff --git a/frontend/src/pages/admin/SampleCodePage.tsx b/frontend/src/pages/admin/SampleCodePage.tsx new file mode 100644 index 0000000..774b9b2 --- /dev/null +++ b/frontend/src/pages/admin/SampleCodePage.tsx @@ -0,0 +1,107 @@ +import { useState, useEffect } from 'react'; +import { getSystemConfig, updateSystemConfig } from '../../services/configService'; + +const COMMON_SAMPLE_CODE_KEY = 'COMMON_SAMPLE_CODE'; + +const INPUT_CLS = + 'w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none text-sm font-mono'; + +const SampleCodePage = () => { + const [sampleCode, setSampleCode] = useState(''); + const [loading, setLoading] = useState(true); + const [saving, setSaving] = useState(false); + const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null); + + useEffect(() => { + const fetchConfig = async () => { + try { + const res = await getSystemConfig(COMMON_SAMPLE_CODE_KEY); + if (res.success && res.data?.configValue != null) { + setSampleCode(res.data.configValue); + } + } catch { + setMessage({ type: 'error', text: '샘플 코드를 불러오는데 실패했습니다.' }); + } finally { + setLoading(false); + } + }; + + fetchConfig(); + }, []); + + const handleSave = async () => { + setSaving(true); + setMessage(null); + try { + const res = await updateSystemConfig(COMMON_SAMPLE_CODE_KEY, sampleCode); + if (res.success) { + setMessage({ type: 'success', text: '저장되었습니다.' }); + } else { + setMessage({ type: 'error', text: res.message || '저장에 실패했습니다.' }); + } + } catch { + setMessage({ type: 'error', text: '저장 중 오류가 발생했습니다.' }); + } finally { + setSaving(false); + setTimeout(() => setMessage(null), 3000); + } + }; + + if (loading) { + return ( +
+
+
+ ); + } + + return ( +
+
+
+

공통 샘플 코드 관리

+

+ API HUB 상세 페이지에 공통으로 표시되는 샘플 코드를 관리합니다. +

+
+ +
+ + {message && ( +
+ {message.text} +
+ )} + +
+ +