하드코딩된 부분 삭제

frontend/components/report/designer/TemplatePalette.tsx

@@ -8,13 +8,7 @@ import { reportApi } from "@/lib/api/reportApi";
 import { useToast } from "@/hooks/use-toast";
 import { Badge } from "@/components/ui/badge";
 
-const SYSTEM_TEMPLATES = [
-  { id: "order", name: "발주서", icon: "📋" },
-  { id: "invoice", name: "청구서", icon: "💰" },
-  { id: "basic", name: "기본", icon: "📄" },
-];
-
-interface CustomTemplate {
+interface Template {
   template_id: string;
   template_name_kor: string;
   template_name_eng: string | null;
@@ -23,27 +17,35 @@ interface CustomTemplate {
 
 export function TemplatePalette() {
   const { applyTemplate } = useReportDesigner();
-  const [customTemplates, setCustomTemplates] = useState<CustomTemplate[]>([]);
+  const [systemTemplates, setSystemTemplates] = useState<Template[]>([]);
+  const [customTemplates, setCustomTemplates] = useState<Template[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [deletingId, setDeletingId] = useState<string | null>(null);
   const { toast } = useToast();
 
-  const fetchCustomTemplates = async () => {
+  const fetchTemplates = async () => {
     setIsLoading(true);
     try {
       const response = await reportApi.getTemplates();
       if (response.success && response.data) {
-        setCustomTemplates(response.data.custom || []);
+        setSystemTemplates(Array.isArray(response.data.system) ? response.data.system : []);
+        setCustomTemplates(Array.isArray(response.data.custom) ? response.data.custom : []);
       }
     } catch (error) {
       console.error("템플릿 조회 실패:", error);
+      toast({
+        title: "오류",
+        description: "템플릿 목록을 불러올 수 없습니다.",
+        variant: "destructive",
+      });
     } finally {
       setIsLoading(false);
     }
   };
 
   useEffect(() => {
-    fetchCustomTemplates();
+    fetchTemplates();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleApplyTemplate = async (templateId: string) => {
@@ -63,7 +65,7 @@ export function TemplatePalette() {
           title: "성공",
           description: "템플릿이 삭제되었습니다.",
         });
-        fetchCustomTemplates();
+        fetchTemplates();
       }
     } catch (error: any) {
       toast({
@@ -78,30 +80,31 @@ export function TemplatePalette() {
 
   return (
     <div className="space-y-4">
-      {/* 시스템 템플릿 */}
-      <div className="space-y-2">
-        <div className="flex items-center justify-between">
-          <p className="text-xs font-semibold text-gray-600">시스템 템플릿</p>
+      {/* 시스템 템플릿 (DB에서 조회) */}
+      {systemTemplates.length > 0 && (
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <p className="text-xs font-semibold text-gray-600">시스템 템플릿</p>
+          </div>
+          {systemTemplates.map((template) => (
+            <Button
+              key={template.template_id}
+              variant="outline"
+              size="sm"
+              className="w-full justify-start gap-2 text-sm"
+              onClick={() => handleApplyTemplate(template.template_id)}
+            >
+              <span>{template.template_name_kor}</span>
+            </Button>
+          ))}
         </div>
-        {SYSTEM_TEMPLATES.map((template) => (
-          <Button
-            key={template.id}
-            variant="outline"
-            size="sm"
-            className="w-full justify-start gap-2 text-sm"
-            onClick={() => handleApplyTemplate(template.id)}
-          >
-            <span>{template.icon}</span>
-            <span>{template.name}</span>
-          </Button>
-        ))}
-      </div>
+      )}
 
       {/* 사용자 정의 템플릿 */}
       <div className="space-y-2">
         <div className="flex items-center justify-between">
           <p className="text-xs font-semibold text-gray-600">사용자 정의 템플릿</p>
-          <Button variant="ghost" size="sm" onClick={fetchCustomTemplates} disabled={isLoading} className="h-6 w-6 p-0">
+          <Button variant="ghost" size="sm" onClick={fetchTemplates} disabled={isLoading} className="h-6 w-6 p-0">
             <RefreshCw className={`h-3 w-3 ${isLoading ? "animate-spin" : ""}`} />
           </Button>
         </div>