세부타입설정

2025-10-14 16:45:30 +09:00
parent 8bc8df4eb8
commit a2c3737f7a
25 changed files with 1724 additions and 306 deletions
--- a/frontend/lib/registry/components/accordion-basic/index.ts
+++ b/frontend/lib/registry/components/accordion-basic/index.ts
@@ -50,7 +50,7 @@ export const AccordionBasicDefinition = createComponentDefinition({
    collapsible: true,
    defaultValue: "item-1",
  },
-  defaultSize: { width: 300, height: 200 },
+  defaultSize: { width: 400, height: 200 },
  configPanel: AccordionBasicConfigPanel,
  icon: "ChevronDown",
  tags: ["아코디언", "접기", "펼치기", "콘텐츠", "섹션"],
--- a/frontend/lib/registry/components/button-primary/index.ts
+++ b/frontend/lib/registry/components/button-primary/index.ts
@@ -30,7 +30,7 @@ export const ButtonPrimaryDefinition = createComponentDefinition({
      errorMessage: "저장 중 오류가 발생했습니다.",
    },
  },
-  defaultSize: { width: 120, height: 36 },
+  defaultSize: { width: 120, height: 40 },
  configPanel: ButtonPrimaryConfigPanel,
  icon: "MousePointer",
  tags: ["버튼", "액션", "클릭"],
--- a/frontend/lib/registry/components/checkbox-basic/index.ts
+++ b/frontend/lib/registry/components/checkbox-basic/index.ts
@@ -23,7 +23,7 @@ export const CheckboxBasicDefinition = createComponentDefinition({
  defaultConfig: {
    placeholder: "입력하세요",
  },
-  defaultSize: { width: 120, height: 24 },
+  defaultSize: { width: 150, height: 32 },
  configPanel: CheckboxBasicConfigPanel,
  icon: "Edit",
  tags: [],
--- a/frontend/lib/registry/components/common/inputStyles.ts
+++ b/frontend/lib/registry/components/common/inputStyles.ts
@@ -12,6 +12,7 @@ export const INPUT_CLASSES = {
    focus:border-orange-500 focus:ring-2 focus:ring-orange-100
    disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed
    placeholder:text-gray-400
+    max-w-full overflow-hidden
  `,

  // 선택된 상태
@@ -31,7 +32,7 @@ export const INPUT_CLASSES = {

  // 컨테이너
  container: `
-    relative w-full
+    relative w-full max-w-full overflow-hidden
  `,

  // textarea
@@ -43,6 +44,7 @@ export const INPUT_CLASSES = {
    focus:border-orange-500 focus:ring-2 focus:ring-orange-100
    disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed
    resize-vertical
+    max-w-full overflow-hidden
  `,

  // select
@@ -54,11 +56,12 @@ export const INPUT_CLASSES = {
    focus:border-orange-500 focus:ring-2 focus:ring-orange-100
    disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed
    cursor-pointer
+    max-w-full overflow-hidden
  `,

  // flex 컨테이너 (email, tel, url 등)
  flexContainer: `
-    flex items-center gap-2 w-full h-10
+    flex items-center gap-2 w-full h-10 max-w-full overflow-hidden
  `,

  // 구분자 (@ , ~ 등)
--- a/frontend/lib/registry/components/date-input/index.ts
+++ b/frontend/lib/registry/components/date-input/index.ts
@@ -23,7 +23,7 @@ export const DateInputDefinition = createComponentDefinition({
  defaultConfig: {
    placeholder: "입력하세요",
  },
-  defaultSize: { width: 180, height: 36 },
+  defaultSize: { width: 220, height: 40 },
  configPanel: DateInputConfigPanel,
  icon: "Edit",
  tags: [],
--- a/frontend/lib/registry/components/divider-line/index.ts
+++ b/frontend/lib/registry/components/divider-line/index.ts
@@ -24,7 +24,7 @@ export const DividerLineDefinition = createComponentDefinition({
    placeholder: "텍스트를 입력하세요",
    maxLength: 255,
  },
-  defaultSize: { width: 200, height: 36 },
+  defaultSize: { width: 400, height: 2 },
  configPanel: DividerLineConfigPanel,
  icon: "Layout",
  tags: [],
--- a/frontend/lib/registry/components/file-upload/index.ts
+++ b/frontend/lib/registry/components/file-upload/index.ts
@@ -23,7 +23,7 @@ export const FileUploadDefinition = createComponentDefinition({
  defaultConfig: {
    placeholder: "입력하세요",
  },
-  defaultSize: { width: 250, height: 36 },
+  defaultSize: { width: 350, height: 40 },
  configPanel: FileUploadConfigPanel,
  icon: "Edit",
  tags: [],
--- a/frontend/lib/registry/components/image-display/index.ts
+++ b/frontend/lib/registry/components/image-display/index.ts
@@ -23,7 +23,7 @@ export const ImageDisplayDefinition = createComponentDefinition({
  defaultConfig: {
    placeholder: "입력하세요",
  },
-  defaultSize: { width: 200, height: 36 },
+  defaultSize: { width: 200, height: 200 },
  configPanel: ImageDisplayConfigPanel,
  icon: "Eye",
  tags: [],
--- a/frontend/lib/registry/components/number-input/index.ts
+++ b/frontend/lib/registry/components/number-input/index.ts
@@ -25,7 +25,7 @@ export const NumberInputDefinition = createComponentDefinition({
    max: 999999,
    step: 1,
  },
-  defaultSize: { width: 150, height: 36 },
+  defaultSize: { width: 200, height: 40 },
  configPanel: NumberInputConfigPanel,
  icon: "Edit",
  tags: [],
--- a/frontend/lib/registry/components/radio-basic/index.ts
+++ b/frontend/lib/registry/components/radio-basic/index.ts
@@ -23,7 +23,7 @@ export const RadioBasicDefinition = createComponentDefinition({
  defaultConfig: {
    placeholder: "입력하세요",
  },
-  defaultSize: { width: 120, height: 24 },
+  defaultSize: { width: 150, height: 32 },
  configPanel: RadioBasicConfigPanel,
  icon: "Edit",
  tags: [],
--- a/frontend/lib/registry/components/select-basic/index.ts
+++ b/frontend/lib/registry/components/select-basic/index.ts
@@ -24,7 +24,7 @@ export const SelectBasicDefinition = createComponentDefinition({
    options: [],
    placeholder: "선택하세요",
  },
-  defaultSize: { width: 200, height: 36 },
+  defaultSize: { width: 250, height: 40 },
  configPanel: SelectBasicConfigPanel,
  icon: "Edit",
  tags: [],
--- a/frontend/lib/registry/components/slider-basic/index.ts
+++ b/frontend/lib/registry/components/slider-basic/index.ts
@@ -25,7 +25,7 @@ export const SliderBasicDefinition = createComponentDefinition({
    max: 999999,
    step: 1,
  },
-  defaultSize: { width: 200, height: 36 },
+  defaultSize: { width: 250, height: 40 },
  configPanel: SliderBasicConfigPanel,
  icon: "Edit",
  tags: [],
--- a/frontend/lib/registry/components/text-input/TextInputComponent.tsx
+++ b/frontend/lib/registry/components/text-input/TextInputComponent.tsx
@@ -7,6 +7,9 @@ import { TextInputConfig } from "./types";
 import { filterDOMProps } from "@/lib/utils/domPropsFilter";
 import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";
 import { INPUT_CLASSES, cn, getInputClasses } from "../common/inputStyles";
+import { ChevronDown, Check, ChevronsUpDown } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";

 export interface TextInputComponentProps extends ComponentRendererProps {
  config?: TextInputConfig;
@@ -234,7 +237,7 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
  // 이메일 입력 상태 (username@domain 분리)
  const [emailUsername, setEmailUsername] = React.useState("");
  const [emailDomain, setEmailDomain] = React.useState("gmail.com");
-  const [isCustomDomain, setIsCustomDomain] = React.useState(false);
+  const [emailDomainOpen, setEmailDomainOpen] = React.useState(false);

  // 전화번호 입력 상태 (3개 부분으로 분리)
  const [telPart1, setTelPart1] = React.useState("");
@@ -257,13 +260,7 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
      if (currentValue && typeof currentValue === "string" && currentValue.includes("@")) {
        const [username, domain] = currentValue.split("@");
        setEmailUsername(username || "");
-        if (domain && emailDomains.includes(domain)) {
-          setEmailDomain(domain);
-          setIsCustomDomain(false);
-        } else {
-          setEmailDomain(domain || "");
-          setIsCustomDomain(true);
-        }
+        setEmailDomain(domain || "gmail.com");
      }
    }
  }, [webType, component.value, formData, component.columnName, isInteractive]);
@@ -341,58 +338,74 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
          {/* @ 구분자 */}
          <span className="text-base font-medium text-gray-500">@</span>

-          {/* 도메인 선택/입력 */}
-          {isCustomDomain ? (
-            <input
-              type="text"
-              value={emailDomain}
-              placeholder="도메인"
-              disabled={componentConfig.disabled || false}
-              readOnly={componentConfig.readonly || false}
-              onChange={(e) => {
-                const newDomain = e.target.value;
-                setEmailDomain(newDomain);
-                const fullEmail = `${emailUsername}@${newDomain}`;
+          {/* 도메인 선택/입력 (Combobox) */}
+          <Popover open={emailDomainOpen} onOpenChange={setEmailDomainOpen}>
+            <PopoverTrigger asChild>
+              <button
+                type="button"
+                role="combobox"
+                aria-expanded={emailDomainOpen}
+                disabled={componentConfig.disabled || false}
+                className={cn(
+                  "flex h-full flex-1 items-center justify-between rounded-md border px-3 py-2 text-sm transition-all duration-200",
+                  isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300",
+                  componentConfig.disabled ? "cursor-not-allowed bg-gray-100 text-gray-400" : "bg-white text-gray-900",
+                  "hover:border-orange-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 focus:outline-none",
+                  emailDomainOpen && "border-orange-500 ring-2 ring-orange-100",
+                )}
+              >
+                <span className={cn("truncate", !emailDomain && "text-gray-400")}>{emailDomain || "도메인 선택"}</span>
+                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </button>
+            </PopoverTrigger>
+            <PopoverContent className="w-[200px] p-0" align="start">
+              <Command>
+                <CommandInput
+                  placeholder="도메인 검색 또는 입력..."
+                  value={emailDomain}
+                  onValueChange={(value) => {
+                    setEmailDomain(value);
+                    const fullEmail = `${emailUsername}@${value}`;

-                if (isInteractive && formData && onFormDataChange && component.columnName) {
-                  onFormDataChange({
-                    ...formData,
-                    [component.columnName]: fullEmail,
-                  });
-                }
-              }}
-              className={`h-full flex-1 rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
-            />
-          ) : (
-            <select
-              value={emailDomain}
-              disabled={componentConfig.disabled || false}
-              onChange={(e) => {
-                const newDomain = e.target.value;
-                if (newDomain === "직접입력") {
-                  setIsCustomDomain(true);
-                  setEmailDomain("");
-                } else {
-                  setEmailDomain(newDomain);
-                  const fullEmail = `${emailUsername}@${newDomain}`;
+                    if (isInteractive && formData && onFormDataChange && component.columnName) {
+                      onFormDataChange({
+                        ...formData,
+                        [component.columnName]: fullEmail,
+                      });
+                    }
+                  }}
+                />
+                <CommandList>
+                  <CommandEmpty>직접 입력한 도메인: {emailDomain}</CommandEmpty>
+                  <CommandGroup>
+                    {emailDomains
+                      .filter((d) => d !== "직접입력")
+                      .map((domain) => (
+                        <CommandItem
+                          key={domain}
+                          value={domain}
+                          onSelect={(currentValue) => {
+                            setEmailDomain(currentValue);
+                            const fullEmail = `${emailUsername}@${currentValue}`;

-                  if (isInteractive && formData && onFormDataChange && component.columnName) {
-                    onFormDataChange({
-                      ...formData,
-                      [component.columnName]: fullEmail,
-                    });
-                  }
-                }
-              }}
-              className={`h-full flex-1 cursor-pointer rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
-            >
-              {emailDomains.map((domain) => (
-                <option key={domain} value={domain}>
-                  {domain}
-                </option>
-              ))}
-            </select>
-          )}
+                            if (isInteractive && formData && onFormDataChange && component.columnName) {
+                              onFormDataChange({
+                                ...formData,
+                                [component.columnName]: fullEmail,
+                              });
+                            }
+                            setEmailDomainOpen(false);
+                          }}
+                        >
+                          <Check className={cn("mr-2 h-4 w-4", emailDomain === domain ? "opacity-100" : "opacity-0")} />
+                          {domain}
+                        </CommandItem>
+                      ))}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
        </div>
      </div>
    );
@@ -589,14 +602,14 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
              });
            }
          }}
-          className={`min-h-[80px] w-full resize-y rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} placeholder:text-gray-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
+          className={`min-h-[80px] w-full max-w-full resize-y rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} placeholder:text-gray-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
        />
      </div>
    );
  }

  return (
-    <div className={`relative w-full ${className || ""}`} {...safeDomProps}>
+    <div className={`relative w-full max-w-full overflow-hidden ${className || ""}`} {...safeDomProps}>
      {/* 라벨 렌더링 */}
      {component.label && component.style?.labelDisplay !== false && (
        <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
@@ -640,7 +653,7 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
        disabled={componentConfig.disabled || false}
        required={componentConfig.required || false}
        readOnly={componentConfig.readonly || (testAutoGeneration.enabled && testAutoGeneration.type !== "none")}
-        className={`h-10 w-full rounded-md border px-3 py-2 text-sm shadow-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} placeholder:text-gray-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
+        className={`h-10 w-full max-w-full rounded-md border px-3 py-2 text-sm shadow-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} placeholder:text-gray-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
        onClick={handleClick}
        onDragStart={onDragStart}
        onDragEnd={onDragEnd}
--- a/frontend/lib/registry/components/text-input/index.ts
+++ b/frontend/lib/registry/components/text-input/index.ts
@@ -24,7 +24,7 @@ export const TextInputDefinition = createComponentDefinition({
    placeholder: "텍스트를 입력하세요",
    maxLength: 255,
  },
-  defaultSize: { width: 200, height: 36 },
+  defaultSize: { width: 300, height: 40 },
  configPanel: TextInputConfigPanel,
  icon: "Edit",
  tags: ["텍스트", "입력", "폼"],
--- a/frontend/lib/registry/components/textarea-basic/index.ts
+++ b/frontend/lib/registry/components/textarea-basic/index.ts
@@ -25,7 +25,7 @@ export const TextareaBasicDefinition = createComponentDefinition({
    rows: 3,
    maxLength: 1000,
  },
-  defaultSize: { width: 200, height: 80 },
+  defaultSize: { width: 400, height: 100 },
  configPanel: TextareaBasicConfigPanel,
  icon: "Edit",
  tags: [],
--- a/frontend/lib/registry/components/toggle-switch/index.ts
+++ b/frontend/lib/registry/components/toggle-switch/index.ts
@@ -23,7 +23,7 @@ export const ToggleSwitchDefinition = createComponentDefinition({
  defaultConfig: {
    placeholder: "입력하세요",
  },
-  defaultSize: { width: 200, height: 36 },
+  defaultSize: { width: 180, height: 40 },
  configPanel: ToggleSwitchConfigPanel,
  icon: "Edit",
  tags: [],