Merge branch 'main' of http://39.117.244.52:3000/kjs/ERP-node into feature/report

2025-10-02 18:01:14 +09:00
parent a219878288 9223a50672
commit 57c4e8317d
183 changed files with 2927 additions and 1109 deletions
--- a/frontend/lib/api/client.ts
+++ b/frontend/lib/api/client.ts
@@ -1,7 +1,13 @@
 import axios, { AxiosResponse, AxiosError } from "axios";

-// API URL 동적 설정 - 환경별 명확한 분리
+// API URL 동적 설정 - 환경변수 우선 사용
 const getApiBaseUrl = (): string => {
+  // 1. 환경변수가 있으면 우선 사용
+  if (process.env.NEXT_PUBLIC_API_URL) {
+    return process.env.NEXT_PUBLIC_API_URL;
+  }
+
+  // 2. 클라이언트 사이드에서 동적 설정
  if (typeof window !== "undefined") {
    const currentHost = window.location.hostname;
    const currentPort = window.location.port;
@@ -13,18 +19,10 @@ const getApiBaseUrl = (): string => {
    ) {
      return "http://localhost:8080/api";
    }
-
-    // 서버 환경에서 localhost:5555 → 39.117.244.52:8080
-    if ((currentHost === "localhost" || currentHost === "127.0.0.1") && currentPort === "5555") {
-      return "http://39.117.244.52:8080/api";
-    }
-
-    // 기타 서버 환경 (내부/외부 IP): → 39.117.244.52:8080
-    return "http://39.117.244.52:8080/api";
  }

-  // 서버 사이드 렌더링 기본값
-  return "http://39.117.244.52:8080/api";
+  // 3. 기본값
+  return "http://localhost:8080/api";
 };

 export const API_BASE_URL = getApiBaseUrl();
--- a/frontend/lib/api/company.ts
+++ b/frontend/lib/api/company.ts
@@ -5,7 +5,7 @@
 import { Company, CompanyFormData } from "@/types/company";
 import { apiClient } from "./client";

-const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://39.117.244.52:8080/api";
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8080/api";

 // API 응답 타입 정의
 interface ApiResponse<T = any> {
--- a/frontend/lib/api/externalCall.ts
+++ b/frontend/lib/api/externalCall.ts
@@ -34,6 +34,12 @@ export interface ValidationResult {
 */
 // API URL 동적 설정 - 기존 client.ts와 동일한 로직
 const getApiBaseUrl = (): string => {
+  // 1. 환경변수가 있으면 우선 사용
+  if (process.env.NEXT_PUBLIC_API_URL) {
+    return process.env.NEXT_PUBLIC_API_URL;
+  }
+
+  // 2. 클라이언트 사이드에서 동적 설정
  if (typeof window !== "undefined") {
    const currentHost = window.location.hostname;
    const currentPort = window.location.port;
@@ -45,18 +51,10 @@ const getApiBaseUrl = (): string => {
    ) {
      return "http://localhost:8080/api";
    }
-
-    // 서버 환경에서 localhost:5555 → 39.117.244.52:8080
-    if ((currentHost === "localhost" || currentHost === "127.0.0.1") && currentPort === "5555") {
-      return "http://39.117.244.52:8080/api";
-    }
-
-    // 기타 서버 환경 (내부/외부 IP): → 39.117.244.52:8080
-    return "http://39.117.244.52:8080/api";
  }

-  // 서버 사이드 렌더링 기본값
-  return "http://39.117.244.52:8080/api";
+  // 3. 기본값
+  return "http://localhost:8080/api";
 };

 export class ExternalCallAPI {
--- a/frontend/lib/api/mail.ts
+++ b/frontend/lib/api/mail.ts
@@ -86,33 +86,34 @@ export interface MailSendResult {
 // API 기본 설정
 // ============================================

-const API_BASE_URL = '/api/mail';
+import { apiClient } from './client';

 async function fetchApi<T>(
  endpoint: string,
-  options: RequestInit = {}
+  options: { method?: string; data?: unknown } = {}
 ): Promise<T> {
-  const response = await fetch(`${API_BASE_URL}${endpoint}`, {
-    ...options,
-    headers: {
-      'Content-Type': 'application/json',
-      ...options.headers,
-    },
-  });
-
-  if (!response.ok) {
-    const error = await response.json().catch(() => ({ message: 'Unknown error' }));
-    throw new Error(error.message || `HTTP ${response.status}`);
-  }
-
-  const result = await response.json();
+  const { method = 'GET', data } = options;
  
-  // 백엔드가 { success: true, data: ... } 형식으로 반환하는 경우 처리
-  if (result.success && result.data !== undefined) {
-    return result.data as T;
+  try {
+    const response = await apiClient({
+      url: `/mail${endpoint}`,
+      method,
+      data,
+    });
+
+    // 백엔드가 { success: true, data: ... } 형식으로 반환하는 경우 처리
+    if (response.data.success && response.data.data !== undefined) {
+      return response.data.data as T;
+    }
+    
+    return response.data as T;
+  } catch (error: unknown) {
+    if (error && typeof error === 'object' && 'response' in error) {
+      const axiosError = error as { response?: { data?: { message?: string }; status?: number } };
+      throw new Error(axiosError.response?.data?.message || `HTTP ${axiosError.response?.status}`);
+    }
+    throw new Error('Unknown error');
  }
-  
-  return result as T;
 }

 // ============================================
@@ -141,7 +142,7 @@ export async function createMailAccount(
 ): Promise<MailAccount> {
  return fetchApi<MailAccount>('/accounts', {
    method: 'POST',
-    body: JSON.stringify(data),
+    data,
  });
 }

@@ -154,7 +155,7 @@ export async function updateMailAccount(
 ): Promise<MailAccount> {
  return fetchApi<MailAccount>(`/accounts/${id}`, {
    method: 'PUT',
-    body: JSON.stringify(data),
+    data,
  });
 }

@@ -167,6 +168,15 @@ export async function deleteMailAccount(id: string): Promise<{ success: boolean
  });
 }

+/**
+ * SMTP 연결 테스트
+ */
+export async function testMailAccountConnection(id: string): Promise<{ success: boolean; message: string }> {
+  return fetchApi<{ success: boolean; message: string }>(`/accounts/${id}/test-connection`, {
+    method: 'POST',
+  });
+}
+
 /**
 * SMTP 연결 테스트
 */
@@ -208,7 +218,7 @@ export async function createMailTemplate(
 ): Promise<MailTemplate> {
  return fetchApi<MailTemplate>('/templates-file', {
    method: 'POST',
-    body: JSON.stringify(data),
+    data,
  });
 }

@@ -221,7 +231,7 @@ export async function updateMailTemplate(
 ): Promise<MailTemplate> {
  return fetchApi<MailTemplate>(`/templates-file/${id}`, {
    method: 'PUT',
-    body: JSON.stringify(data),
+    data,
  });
 }

@@ -243,7 +253,7 @@ export async function previewMailTemplate(
 ): Promise<{ html: string }> {
  return fetchApi<{ html: string }>(`/templates-file/${id}/preview`, {
    method: 'POST',
-    body: JSON.stringify({ sampleData }),
+    data: { sampleData },
  });
 }

@@ -257,7 +267,7 @@ export async function previewMailTemplate(
 export async function sendMail(data: SendMailDto): Promise<MailSendResult> {
  return fetchApi<MailSendResult>('/send/simple', {
    method: 'POST',
-    body: JSON.stringify(data),
+    data,
  });
 }

--- a/frontend/lib/registry/AutoRegisteringComponentRenderer.ts
+++ b/frontend/lib/registry/AutoRegisteringComponentRenderer.ts
@@ -217,7 +217,7 @@ export class AutoRegisteringComponentRenderer {
      top: "-25px",
      left: "0px",
      fontSize: component.style?.labelFontSize || "14px",
-      color: component.style?.labelColor || "#3b83f6",
+      color: component.style?.labelColor || "#212121",
      marginBottom: component.style?.labelMarginBottom || "4px",
      fontWeight: "500",
    };
--- a/frontend/lib/registry/components/accordion-basic/AccordionBasicComponent.tsx
+++ b/frontend/lib/registry/components/accordion-basic/AccordionBasicComponent.tsx
@@ -95,7 +95,7 @@ const CustomAccordion: React.FC<CustomAccordionProps> = ({
              borderLeft: "1px solid #e5e7eb",
              borderRight: "1px solid #e5e7eb",
              borderBottom: openItems.has(item.id) ? "none" : index === items.length - 1 ? "1px solid #e5e7eb" : "none",
-              backgroundColor: openItems.has(item.id) ? "#fef3c7" : "#f9fafb",
+              backgroundColor: openItems.has(item.id) ? "#fef8f0" : "#f9fafb",
              cursor: "pointer",
              display: "flex",
              justifyContent: "space-between",
@@ -107,12 +107,12 @@ const CustomAccordion: React.FC<CustomAccordionProps> = ({
              boxShadow: openItems.has(item.id) ? "0 2px 4px rgba(0, 0, 0, 0.1)" : "none",
            }}
            onMouseEnter={(e) => {
-              e.currentTarget.style.backgroundColor = openItems.has(item.id) ? "#fde68a" : "#f3f4f6";
+              e.currentTarget.style.backgroundColor = openItems.has(item.id) ? "#fef5e7" : "#f3f4f6";
              e.currentTarget.style.transform = "translateY(-1px)";
              e.currentTarget.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.15)";
            }}
            onMouseLeave={(e) => {
-              e.currentTarget.style.backgroundColor = openItems.has(item.id) ? "#fef3c7" : "#f9fafb";
+              e.currentTarget.style.backgroundColor = openItems.has(item.id) ? "#fef8f0" : "#f9fafb";
              e.currentTarget.style.transform = "translateY(0)";
              e.currentTarget.style.boxShadow = openItems.has(item.id) ? "0 2px 4px rgba(0, 0, 0, 0.1)" : "none";
            }}
@@ -670,7 +670,7 @@ export const AccordionBasicComponent: React.FC<AccordionBasicComponentProps> = (
            top: "-25px",
            left: "0px",
            fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
            fontWeight: "500",
          }}
        >
--- a/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
+++ b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
@@ -127,7 +127,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
    if (isDeleteAction()) {
      return component.style?.labelColor || '#ef4444'; // 빨간색 기본값 (Tailwind red-500)
    }
-    return component.style?.labelColor || '#3b83f6'; // 기본 파란색 (Tailwind blue-500)
+    return component.style?.labelColor || '#212121'; // 검은색 기본값 (shadcn/ui primary)
  };

  const buttonColor = getLabelColor();
@@ -265,6 +265,30 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
      }

      console.log("✅ 버튼 액션 실행 성공:", actionConfig.type);
+
+      // 저장/수정 성공 시 자동 처리
+      if (actionConfig.type === "save" || actionConfig.type === "edit") {
+        if (typeof window !== 'undefined') {
+          // 1. 테이블 새로고침 이벤트 먼저 발송 (모달이 닫히기 전에)
+          console.log("🔄 저장/수정 후 테이블 새로고침 이벤트 발송");
+          window.dispatchEvent(new CustomEvent('refreshTable'));
+          
+          // 2. 모달 닫기 (약간의 딜레이)
+          setTimeout(() => {
+            // EditModal 내부인지 확인 (isInModal prop 사용)
+            const isInEditModal = (props as any).isInModal;
+            
+            if (isInEditModal) {
+              console.log("🚪 EditModal 닫기 이벤트 발송");
+              window.dispatchEvent(new CustomEvent('closeEditModal'));
+            }
+            
+            // ScreenModal은 항상 닫기
+            console.log("🚪 ScreenModal 닫기 이벤트 발송");
+            window.dispatchEvent(new CustomEvent('closeSaveModal'));
+          }, 100);
+        }
+      }
    } catch (error) {
      console.log("❌ executeAction catch 블록 진입:", error);

@@ -296,6 +320,12 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
  // 이벤트 핸들러
  const handleClick = async (e: React.MouseEvent) => {
    e.stopPropagation();
+    console.log("🖱️ 버튼 클릭 이벤트 발생", {
+      isDesignMode,
+      isInteractive,
+      hasAction: !!processedConfig.action,
+      processedConfig,
+    });

    // 디자인 모드에서는 기본 onClick만 실행
    if (isDesignMode) {
@@ -303,8 +333,20 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
      return;
    }

+    console.log("🔍 조건 체크:", {
+      isInteractive,
+      hasProcessedConfig: !!processedConfig,
+      hasAction: !!processedConfig.action,
+      actionType: processedConfig.action?.type,
+    });
+
    // 인터랙티브 모드에서 액션 실행
    if (isInteractive && processedConfig.action) {
+      console.log("✅ 액션 실행 조건 통과", {
+        actionType: processedConfig.action.type,
+        requiresConfirmation: confirmationRequiredActions.includes(processedConfig.action.type),
+      });
+
      const context: ButtonActionContext = {
        formData: formData || {},
        originalData: originalData || {}, // 부분 업데이트용 원본 데이터 추가
@@ -320,6 +362,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({

      // 확인이 필요한 액션인지 확인
      if (confirmationRequiredActions.includes(processedConfig.action.type)) {
+        console.log("📋 확인 다이얼로그 표시 중...");
        // 확인 다이얼로그 표시
        setPendingAction({
          type: processedConfig.action.type,
@@ -328,10 +371,16 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
        });
        setShowConfirmDialog(true);
      } else {
+        console.log("🚀 액션 바로 실행 중...");
        // 확인이 필요하지 않은 액션은 바로 실행
        await executeAction(processedConfig.action, context);
      }
    } else {
+      console.log("⚠️ 액션 실행 조건 불만족:", {
+        isInteractive,
+        hasAction: !!processedConfig.action,
+        "이유": !isInteractive ? "인터랙티브 모드 아님" : "액션 없음",
+      });
      // 액션이 설정되지 않은 경우 기본 onClick 실행
      onClick?.();
    }
@@ -460,9 +509,9 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
        </button>
      </div>

-      {/* 확인 다이얼로그 */}
+      {/* 확인 다이얼로그 - EditModal보다 위에 표시하도록 z-index 최상위로 설정 */}
      <AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
-        <AlertDialogContent>
+        <AlertDialogContent className="z-[99999]">
          <AlertDialogHeader>
            <AlertDialogTitle>{getConfirmTitle()}</AlertDialogTitle>
            <AlertDialogDescription>{getConfirmMessage()}</AlertDialogDescription>
--- a/frontend/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx
+++ b/frontend/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx
@@ -84,7 +84,7 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
            top: "-25px",
            left: "0px",
            fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
            fontWeight: "500",
            // isInteractive 모드에서는 사용자 스타일 우선 적용
            ...(isInteractive && component.style ? component.style : {}),
@@ -155,7 +155,7 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
        />
        <span
          style={{
-            color: "#3b83f6",
+            color: "#212121",
            // isInteractive 모드에서는 사용자 스타일 우선 적용
            ...(isInteractive && component.style ? component.style : {}),
          }}
--- a/frontend/lib/registry/components/date-input/DateInputComponent.tsx
+++ b/frontend/lib/registry/components/date-input/DateInputComponent.tsx
@@ -298,7 +298,7 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
            top: "-25px",
            left: "0px",
            fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
            fontWeight: "500",
          }}
        >
--- a/frontend/lib/registry/components/divider-line/DividerLineComponent.tsx
+++ b/frontend/lib/registry/components/divider-line/DividerLineComponent.tsx
@@ -81,7 +81,7 @@ export const DividerLineComponent: React.FC<DividerLineComponentProps> = ({
            top: "-25px",
            left: "0px",
            fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
            fontWeight: "500",
          }}
        >
--- a/frontend/lib/registry/components/image-display/ImageDisplayComponent.tsx
+++ b/frontend/lib/registry/components/image-display/ImageDisplayComponent.tsx
@@ -81,7 +81,7 @@ export const ImageDisplayComponent: React.FC<ImageDisplayComponentProps> = ({
            top: "-25px",
            left: "0px",
            fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
            fontWeight: "500",
          }}
        >
--- a/frontend/lib/registry/components/number-input/NumberInputComponent.tsx
+++ b/frontend/lib/registry/components/number-input/NumberInputComponent.tsx
@@ -91,7 +91,7 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
            top: "-25px",
            left: "0px",
            fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
            fontWeight: "500",
          }}
        >
--- a/frontend/lib/registry/components/radio-basic/RadioBasicComponent.tsx
+++ b/frontend/lib/registry/components/radio-basic/RadioBasicComponent.tsx
@@ -84,7 +84,7 @@ export const RadioBasicComponent: React.FC<RadioBasicComponentProps> = ({
            top: "-25px",
            left: "0px",
            fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
            fontWeight: "500",
            // isInteractive 모드에서는 사용자 스타일 우선 적용
            ...(isInteractive && component.style ? component.style : {}),
@@ -168,7 +168,7 @@ export const RadioBasicComponent: React.FC<RadioBasicComponentProps> = ({
            />
            <span
              style={{
-                color: "#3b83f6",
+                color: "#212121",
                // isInteractive 모드에서는 사용자 스타일 우선 적용
                ...(isInteractive && component.style ? component.style : {}),
              }}
--- a/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
+++ b/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
@@ -316,7 +316,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
            top: "-25px",
            left: "0px",
            fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
            fontWeight: "500",
            // isInteractive 모드에서는 사용자 스타일 우선 적용
            ...(isInteractive && component.style ? component.style : {}),
--- a/frontend/lib/registry/components/slider-basic/SliderBasicComponent.tsx
+++ b/frontend/lib/registry/components/slider-basic/SliderBasicComponent.tsx
@@ -84,7 +84,7 @@ export const SliderBasicComponent: React.FC<SliderBasicComponentProps> = ({
            top: "-25px",
            left: "0px",
            fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
            fontWeight: "500",
            // isInteractive 모드에서는 사용자 스타일 우선 적용
            ...(isInteractive && component.style ? component.style : {}),
@@ -149,7 +149,7 @@ export const SliderBasicComponent: React.FC<SliderBasicComponentProps> = ({
            width: "30%",
            textAlign: "center",
            fontSize: "14px",
-            color: "#3b83f6",
+            color: "#212121",
            fontWeight: "500",
            // isInteractive 모드에서는 사용자 스타일 우선 적용
            ...(isInteractive && component.style ? component.style : {}),
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -164,7 +164,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
  } as TableListConfig;

  // 🎨 동적 색상 설정 (속성편집 모달의 "색상" 필드와 연동)
-  const buttonColor = component.style?.labelColor || "#3b83f6"; // 기본 파란색
+  const buttonColor = component.style?.labelColor || "#212121"; // 기본 파란색
  const buttonTextColor = component.config?.buttonTextColor || "#ffffff";
  const buttonStyle = {
    backgroundColor: buttonColor,
@@ -977,6 +977,27 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
    }
  }, [refreshKey]);

+  // 🆕 전역 테이블 새로고침 이벤트 리스너
+  useEffect(() => {
+    const handleRefreshTable = () => {
+      console.log("🔄 TableListComponent: 전역 새로고침 이벤트 수신");
+      if (tableConfig.selectedTable && !isDesignMode) {
+        // 선택된 행 상태 초기화
+        setSelectedRows(new Set());
+        setIsAllSelected(false);
+        onSelectedRowsChange?.([], []);
+        // 테이블 데이터 새로고침
+        fetchTableDataDebounced();
+      }
+    };
+
+    window.addEventListener("refreshTable", handleRefreshTable);
+    
+    return () => {
+      window.removeEventListener("refreshTable", handleRefreshTable);
+    };
+  }, [tableConfig.selectedTable, isDesignMode, fetchTableDataDebounced, onSelectedRowsChange]);
+
  // 상세설정에서 페이지네이션 설정 변경 시 로컬 상태 동기화
  useEffect(() => {
    // 페이지 크기 동기화
@@ -1234,7 +1255,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
    dragImage.style.position = "absolute";
    dragImage.style.top = "-1000px";
    dragImage.style.left = "-1000px";
-    dragImage.style.background = "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)";
+    dragImage.style.background = "linear-gradient(135deg, #212121 0%, #000000 100%)";
    dragImage.style.color = "white";
    dragImage.style.padding = "12px 16px";
    dragImage.style.borderRadius = "8px";
--- a/frontend/lib/registry/components/table-list/index.ts
+++ b/frontend/lib/registry/components/table-list/index.ts
@@ -95,7 +95,7 @@ export const TableListDefinition = createComponentDefinition({
    // 데이터 로딩
    autoLoad: true,
  },
-  defaultSize: { width: 120, height: 200 }, // 그리드 1컬럼 크기로 축소
+  defaultSize: { width: 120, height: 600 }, // 테이블 리스트 기본 높이
  configPanel: TableListConfigPanel,
  icon: "Table",
  tags: ["테이블", "데이터", "목록", "그리드"],
--- a/frontend/lib/registry/components/test-input/TestInputComponent.tsx
+++ b/frontend/lib/registry/components/test-input/TestInputComponent.tsx
@@ -81,7 +81,7 @@ export const TestInputComponent: React.FC<TestInputComponentProps> = ({
            top: "-25px",
            left: "0px",
            fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
            fontWeight: "500",
          }}
        >
--- a/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx
+++ b/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx
@@ -72,7 +72,7 @@ export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
  const textStyle: React.CSSProperties = {
    fontSize: componentConfig.fontSize || "14px",
    fontWeight: componentConfig.fontWeight || "normal",
-    color: componentConfig.color || "#3b83f6",
+    color: componentConfig.color || "#212121",
    textAlign: componentConfig.textAlign || "left",
    backgroundColor: componentConfig.backgroundColor || "transparent",
    padding: componentConfig.padding || "8px 12px",
@@ -104,7 +104,7 @@ export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
            top: "-25px",
            left: "0px",
            fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
            fontWeight: "500",
          }}
        >
--- a/frontend/lib/registry/components/text-display/TextDisplayConfigPanel.tsx
+++ b/frontend/lib/registry/components/text-display/TextDisplayConfigPanel.tsx
@@ -85,7 +85,7 @@ export const TextDisplayConfigPanel: React.FC<TextDisplayConfigPanelProps> = ({
        <Input
          id="color"
          type="color"
-          value={config.color || "#3b83f6"}
+          value={config.color || "#212121"}
          onChange={(e) => handleChange("color", e.target.value)}
        />
      </div>
--- a/frontend/lib/registry/components/text-display/index.ts
+++ b/frontend/lib/registry/components/text-display/index.ts
@@ -24,7 +24,7 @@ export const TextDisplayDefinition = createComponentDefinition({
    text: "텍스트를 입력하세요",
    fontSize: "14px",
    fontWeight: "normal",
-    color: "#3b83f6",
+    color: "#212121",
    textAlign: "left",
  },
  defaultSize: { width: 150, height: 24 },
--- a/frontend/lib/registry/components/text-input/TextInputComponent.tsx
+++ b/frontend/lib/registry/components/text-input/TextInputComponent.tsx
@@ -191,7 +191,7 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
            top: "-25px",
            left: "0px",
            fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
            fontWeight: "500",
          }}
        >
--- a/frontend/lib/registry/components/textarea-basic/TextareaBasicComponent.tsx
+++ b/frontend/lib/registry/components/textarea-basic/TextareaBasicComponent.tsx
@@ -84,7 +84,7 @@ export const TextareaBasicComponent: React.FC<TextareaBasicComponentProps> = ({
            top: "-25px",
            left: "0px",
            fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
            fontWeight: "500",
            // isInteractive 모드에서는 사용자 스타일 우선 적용
            ...(isInteractive && component.style ? component.style : {}),
--- a/frontend/lib/registry/components/toggle-switch/ToggleSwitchComponent.tsx
+++ b/frontend/lib/registry/components/toggle-switch/ToggleSwitchComponent.tsx
@@ -84,7 +84,7 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
            top: "-25px",
            left: "0px",
            fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
            fontWeight: "500",
            // isInteractive 모드에서는 사용자 스타일 우선 적용
            ...(isInteractive && component.style ? component.style : {}),
@@ -187,7 +187,7 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
        </div>
        <span
          style={{
-            color: "#3b83f6",
+            color: "#212121",
            // isInteractive 모드에서는 사용자 스타일 우선 적용
            ...(isInteractive && component.style ? component.style : {}),
          }}
--- a/frontend/lib/registry/layouts/AutoRegisteringLayoutRenderer.tsx
+++ b/frontend/lib/registry/layouts/AutoRegisteringLayoutRenderer.tsx
@@ -308,7 +308,7 @@ export class AutoRegisteringLayoutRenderer {
          style: {
            labelDisplay: true,
            labelFontSize: "14px",
-            labelColor: "#3b83f6",
+            labelColor: "#212121",
            labelFontWeight: "500",
            labelMarginBottom: "4px",
          },
--- a/frontend/lib/registry/layouts/accordion/AccordionLayout.tsx
+++ b/frontend/lib/registry/layouts/accordion/AccordionLayout.tsx
@@ -148,7 +148,7 @@ const AccordionSection: React.FC<{
  const headerStyle: React.CSSProperties = {
    padding: "12px 16px",
    backgroundColor: isDesignMode ? "#3b82f6" : "#f8fafc",
-    color: isDesignMode ? "white" : "#3b83f6",
+    color: isDesignMode ? "white" : "#212121",
    border: "1px solid #e2e8f0",
    borderBottom: isExpanded ? "none" : "1px solid #e2e8f0",
    cursor: "pointer",