[st] design: 검증 항목 등록 다이얼로그 ui 수정

apps/st/src/components/statistics/verification/VerificationTargetDialog.tsx

@@ -7,11 +7,11 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { Search } from "lucide-react";
 
 import { CodeSelect } from "@/entities/code/ui/code-select";
+import { verificationTargetManagementApi } from "@/entities/statistics/api/verification-target-management-service";
 import type {
     NumericColumnDto,
     VerificationTargetManagementResponse,
 } from "@/entities/statistics/model/verification-target-management-interface";
-import { verificationTargetManagementApi } from "@/entities/statistics/api/verification-target-management-service";
 import {
     type VerificationTargetManagementFormData,
     verificationTargetManagementSchema,
@@ -51,7 +51,7 @@ export function VerificationTargetDialog({
     onSave,
     onDelete,
 }: VerificationTargetDialogProps) {
-    const { control, handleSubmit, reset, getValues, setValue } =
+    const { control, handleSubmit, reset, watch, getValues, setValue } =
         useForm<VerificationTargetManagementFormData>({
             resolver: zodResolver(verificationTargetManagementSchema),
             defaultValues: data || {
@@ -65,6 +65,7 @@ export function VerificationTargetDialog({
                 useYn: "Y",
             },
         });
+    const watchStatsCd = watch("statsCd");
 
     const [isColumnDialogOpen, setIsColumnDialogOpen] = useState(false);
     const [numericColumns, setNumericColumns] = useState<NumericColumnDto[]>(
@@ -103,7 +104,8 @@ export function VerificationTargetDialog({
         }
     }
 
-    async function handleSearchTableMetadata() {
+    async function handleSearchTableMetadata(e?: React.MouseEvent) {
+        e?.preventDefault();
         const statsCd = getValues("statsCd");
         if (!statsCd) {
             alert("통계항목을 선택해주세요.");
@@ -131,7 +133,8 @@ export function VerificationTargetDialog({
         }
     }
 
-    function handleOpenColumnDialog() {
+    function handleOpenColumnDialog(e?: React.MouseEvent) {
+        e?.preventDefault();
         if (numericColumns.length === 0) {
             handleSearchTableMetadata();
         } else {
@@ -156,6 +159,12 @@ export function VerificationTargetDialog({
 
                     <form onSubmit={handleSubmit(onSubmit)}>
                         <Table variant="secondary">
+                            <colgroup>
+                                <col style={{ width: "20%" }} />
+                                <col style={{ width: "30%" }} />
+                                <col style={{ width: "20%" }} />
+                                <col style={{ width: "30%" }} />
+                            </colgroup>
                             <TableBody>
                                 <TableRow>
                                     <TableHead
@@ -182,15 +191,12 @@ export function VerificationTargetDialog({
                                                 )}
                                             />
                                             <Button
-                                                type="button"
-                                                color="gray"
-                                                variant="outline"
+                                                className="px-4"
                                                 onClick={
                                                     handleSearchTableMetadata
                                                 }
-                                                className="px-3"
+                                                disabled={!watchStatsCd}
                                             >
-                                                <Search className="mr-1 h-4 w-4" />
                                                 조회
                                             </Button>
                                         </div>
@@ -280,10 +286,10 @@ export function VerificationTargetDialog({
                                                 )}
                                             />
                                             <Button
-                                                type="button"
-                                                variant="outline"
-                                                className="whitespace-nowrap px-3"
+                                                color="white"
+                                                className="whitespace-nowrap px-4"
                                                 onClick={handleOpenColumnDialog}
+                                                disabled={!watchStatsCd}
                                             >
                                                 목록보기
                                             </Button>
@@ -542,16 +548,14 @@ export function VerificationTargetDialog({
                                             </TableCell>
                                             <TableCell className="text-center">
                                                 <Button
-                                                    type="button"
                                                     size="sm"
-                                                    variant="outline"
                                                     onClick={() =>
                                                         handleSelectColumn(
                                                             col.columnName,
                                                         )
                                                     }
                                                 >
-                                                    입력
+                                                    입력하기
                                                 </Button>
                                             </TableCell>
                                         </TableRow>