날짜 입력 시 하루 밀리는 타임존 버그 수정

frontend/lib/registry/components/date-input/DateInputComponent.tsx

@@ -166,8 +166,13 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
     }
 
     // ISO 8601 날짜 (2023-12-31T00:00:00.000Z 등)
+    // 🆕 UTC 시간을 로컬 시간으로 변환하여 날짜 추출 (타임존 이슈 해결)
     if (/^\d{4}-\d{2}-\d{2}T/.test(dateStr)) {
-      return dateStr.split("T")[0];
+      const date = new Date(dateStr);
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, "0");
+      const day = String(date.getDate()).padStart(2, "0");
+      return `${year}-${month}-${day}`;
     }
 
     // 다른 형식의 날짜 문자열이나 Date 객체 처리
@@ -276,7 +281,7 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
       <div className={`relative h-full w-full ${className || ""}`} {...safeDomProps}>
         {/* 라벨 렌더링 */}
         {component.label && component.style?.labelDisplay !== false && (
-          <label className="absolute -top-6 left-0 text-sm font-medium text-muted-foreground">
+          <label className="text-muted-foreground absolute -top-6 left-0 text-sm font-medium">
             {component.label}
             {component.required && <span className="text-destructive">*</span>}
           </label>
@@ -299,16 +304,18 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
             }}
             className={cn(
               "h-full min-h-full flex-1 rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
               "placeholder:text-muted-foreground",
-              isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
-              componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
-              "disabled:cursor-not-allowed"
+              isSelected ? "border-ring ring-ring/50 ring-2" : "border-input",
+              componentConfig.disabled
+                ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50"
+                : "bg-background text-foreground",
+              "disabled:cursor-not-allowed",
             )}
           />
 
           {/* 구분자 */}
-          <span className="text-base font-medium text-muted-foreground">~</span>
+          <span className="text-muted-foreground text-base font-medium">~</span>
 
           {/* 종료일 */}
           <input
@@ -326,11 +333,13 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
             }}
             className={cn(
               "h-full min-h-full flex-1 rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
               "placeholder:text-muted-foreground",
-              isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
-              componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
-              "disabled:cursor-not-allowed"
+              isSelected ? "border-ring ring-ring/50 ring-2" : "border-input",
+              componentConfig.disabled
+                ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50"
+                : "bg-background text-foreground",
+              "disabled:cursor-not-allowed",
             )}
           />
         </div>
@@ -344,7 +353,7 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
       <div className={`relative h-full w-full ${className || ""}`} {...safeDomProps}>
         {/* 라벨 렌더링 */}
         {component.label && component.style?.labelDisplay !== false && (
-          <label className="absolute -top-6 left-0 text-sm font-medium text-muted-foreground">
+          <label className="text-muted-foreground absolute -top-6 left-0 text-sm font-medium">
             {component.label}
             {component.required && <span className="text-destructive">*</span>}
           </label>
@@ -368,11 +377,13 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
           }}
           className={cn(
             "box-border h-full min-h-full w-full rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
             "placeholder:text-muted-foreground",
-            isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
-            componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
-            "disabled:cursor-not-allowed"
+            isSelected ? "border-ring ring-ring/50 ring-2" : "border-input",
+            componentConfig.disabled
+              ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50"
+              : "bg-background text-foreground",
+            "disabled:cursor-not-allowed",
           )}
         />
       </div>
@@ -400,14 +411,16 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
         disabled={componentConfig.disabled || false}
         required={componentConfig.required || false}
         readOnly={componentConfig.readonly || finalAutoGeneration?.enabled || false}
-          className={cn(
-            "box-border h-full min-h-full w-full rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-            "placeholder:text-muted-foreground",
-            isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
-            componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
-            "disabled:cursor-not-allowed"
-          )}
+        className={cn(
+          "box-border h-full min-h-full w-full rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
+          "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+          "placeholder:text-muted-foreground",
+          isSelected ? "border-ring ring-ring/50 ring-2" : "border-input",
+          componentConfig.disabled
+            ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50"
+            : "bg-background text-foreground",
+          "disabled:cursor-not-allowed",
+        )}
         onClick={handleClick}
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}