date/timezone 한 줄 정렬

devfront/src/features/clients/ClientConsentsPage.test.tsx

@@ -201,4 +201,85 @@ describe("ClientConsentsPage RP custom claims", () => {
       }),
     );
   });
+
+  it("keeps date claim inputs and timezone selectors on the same row", async () => {
+    fetchClientMock.mockResolvedValue({
+      ...clientDetail,
+      client: {
+        ...clientDetail.client,
+        metadata: {
+          id_token_claims: [
+            {
+              namespace: "rp_claims",
+              key: "contract_date",
+              value: "",
+              valueType: "date",
+              readPermission: "admin_only",
+              writePermission: "admin_only",
+            },
+          ],
+        },
+      },
+    });
+    fetchConsentsMock.mockResolvedValue({
+      items: [
+        {
+          subject: "user-1",
+          userName: "Consent User",
+          clientId: "client-a",
+          clientName: "Claims App",
+          grantedScopes: ["openid", "profile"],
+          authenticatedAt: "2026-06-11T09:00:00Z",
+          createdAt: "2026-06-10T09:00:00Z",
+          status: "active",
+          tenantId: "tenant-1",
+          tenantName: "Hanmac",
+          rpMetadata: {
+            contract_date: 1781017200,
+            contract_date_permissions: {
+              readPermission: "admin_only",
+              writePermission: "admin_only",
+            },
+          },
+        },
+      ],
+    });
+    fetchRPUserMetadataMock.mockResolvedValue({
+      clientId: "client-a",
+      userId: "user-1",
+      metadata: {
+        contract_date: 1781017200,
+        contract_date_permissions: {
+          readPermission: "admin_only",
+          writePermission: "admin_only",
+        },
+      },
+    });
+
+    const { container } = await renderPage();
+
+    const editButton = Array.from(container.querySelectorAll("button")).find(
+      (button) =>
+        button.textContent?.includes("사용자 Claim 설정") ||
+        button.textContent?.includes("User Claim Settings"),
+    );
+
+    await act(async () => {
+      editButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+    await flush();
+
+    const dateInput = container.querySelector(
+      'input[aria-label="contract_date date"]',
+    );
+    const timeZoneSelect = container.querySelector(
+      'select[aria-label="contract_date timezone"]',
+    );
+
+    expect(dateInput).not.toBeNull();
+    expect(timeZoneSelect).not.toBeNull();
+    expect(dateInput?.parentElement).toBe(timeZoneSelect?.parentElement);
+    expect(dateInput?.parentElement?.className).toContain("items-center");
+    expect(dateInput?.parentElement?.className).not.toContain("flex-col");
+  });
 });

devfront/src/features/clients/ClientConsentsPage.tsx

@@ -1060,7 +1060,15 @@ function ClientConsentsPage() {
                       aria-label={`${row.key} ${row.valueType}`}
                     />
                   ) : (
-                    <div className="flex flex-col gap-2">
+                    <div
+                      className={cn(
+                        "flex gap-2",
+                        row.valueType === "date" ||
+                          row.valueType === "datetime"
+                          ? "items-center"
+                          : "flex-col",
+                      )}
+                    >
                       <Input
                         type={rpClaimInputType(row.valueType)}
                         inputMode={rpClaimInputMode(row.valueType)}
@@ -1087,7 +1095,7 @@ function ClientConsentsPage() {
                               timeZone: event.target.value,
                             })
                           }
-                          className="h-10 rounded-md border border-input bg-background px-3 font-mono text-xs shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                          className="h-10 min-w-[160px] rounded-md border border-input bg-background px-3 font-mono text-xs shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                           aria-label={`${row.key} timezone`}
                         >
                           {timeZoneOptions.map((timeZone) => (