(대표님) 20250627 오전 10시 작업사항

1 files changed, 291 insertions, 0 deletions

diff --git a/lib/vendor-users/table/add-ausers-dialog.tsx b/lib/vendor-users/table/add-ausers-dialog.tsx
new file mode 100644
index 00000000..632adb7f
--- /dev/null
+++ b/lib/vendor-users/table/add-ausers-dialog.tsx
@@ -0,0 +1,291 @@
+"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+
+// react-hook-form + shadcn/ui Form
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormDescription,
+} from "@/components/ui/form"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Role, userRoles } from "@/db/schema/users"
+import { type Company } from "@/db/schema/companies"
+import { MultiSelect } from "@/components/ui/multi-select"
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "@/components/ui/popover"
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandGroup,
+  CommandItem,
+  CommandEmpty,
+} from "@/components/ui/command"
+import { Check, ChevronsUpDown, Loader } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { toast } from "sonner"
+import { Vendor } from "@/db/schema/vendors"
+import { CreateVendorUserSchema, createVendorUserSchema } from "../validations"
+import { createVendorUser, getAllRolesbyVendor } from "../service"
+
+const languageOptions = [
+  { value: "ko", label: "한국어" },
+  { value: "en", label: "English" },
+]
+
+
+// Phone validation helper
+const validatePhoneNumber = (phone: string): boolean => {
+  if (!phone) return false;
+  // Basic international phone number validation
+  const cleanPhone = phone.replace(/[\s\-\(\)]/g, '');
+  return /^\+\d{10,15}$/.test(cleanPhone);
+};
+
+// Get phone placeholder based on common patterns
+const getPhonePlaceholder = (): string => {
+  return "+82 010-1234-5678"; // Default to Korean format
+};
+
+// Get phone description
+const getPhoneDescription = (): string => {
+  return "국제 전화번호를 입력하세요. (예: +82 010-1234-5678)";
+};
+
+export function AddUserDialog() {
+  const [open, setOpen] = React.useState(false)
+  const [roles, setRoles] = React.useState<Role[]>([]) 
+  const [isAddPending, startAddTransition] = React.useTransition()
+
+  React.useEffect(() => {
+    getAllRolesbyVendor().then((res) => {
+      setRoles(res)
+    })
+  }, [])
+
+  // react-hook-form 세팅
+  const form = useForm<CreateVendorUserSchema & { language?: string; phone?: string }>({
+    resolver: zodResolver(createVendorUserSchema),
+    defaultValues: {
+      name: "",
+      email: "",
+      phone: "", // Add phone field
+      companyId: null,
+      language: 'en',
+      roles: ["Vendor Admin"],
+      domain: 'partners'
+    },
+  })
+
+  async function onSubmit(data: CreateVendorUserSchema & { language?: string; phone?: string }) {
+    data.domain = "partners"
+
+    // Validate phone number if provided
+    if (data.phone && !validatePhoneNumber(data.phone)) {
+      toast.error("올바른 국제 전화번호 형식이 아닙니다.")
+      return
+    }
+
+    startAddTransition(async () => {
+      const result = await createVendorUser(data)
+      if (result.error) {
+        toast.error(`에러: ${result.error}`)
+        return
+      }
+      form.reset()
+      setOpen(false)
+      toast.success("User added")
+    })
+  }
+
+  function handleDialogOpenChange(nextOpen: boolean) {
+    if (!nextOpen) {
+      form.reset()
+    }
+    setOpen(nextOpen)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+      {/* 모달을 열기 위한 버튼 */}
+      <DialogTrigger asChild>
+        <Button variant="default" size="sm">
+          Add User
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Create New User</DialogTitle>
+          <DialogDescription>
+            새 User 정보를 입력하고 <b>Create</b> 버튼을 누르세요.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* shadcn/ui Form을 이용해 react-hook-form과 연결 */}
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="space-y-4 py-4">
+              {/* 사용자 이름 */}
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>User Name</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="e.g. dujin"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* 이메일 */}
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Email</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="e.g. user@example.com"
+                        type="email"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* 전화번호 - 새로 추가 */}
+              <FormField
+                control={form.control}
+                name="phone"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Phone Number</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder={getPhonePlaceholder()}
+                        {...field}
+                        className={cn(
+                          field.value && !validatePhoneNumber(field.value) && "border-red-500"
+                        )}
+                      />
+                    </FormControl>
+                    <FormDescription className="text-xs text-muted-foreground">
+                      {getPhoneDescription()}
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* Role (Vendor Admin) - 읽기 전용 */}
+              <FormField
+                control={form.control}
+                name="roles"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Role</FormLabel>
+                    <FormControl>
+                      <Input
+                        readOnly
+                        disabled
+                        value="Vendor Admin"
+                        className="bg-gray-50 text-gray-500"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* language Select */}
+              <FormField
+                control={form.control}
+                name="language"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Language</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={field.onChange}
+                        value={field.value}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select language" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {languageOptions.map((v, index) => (
+                            <SelectItem key={index} value={v.value}>
+                              {v.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setOpen(false)}
+                disabled={isAddPending}
+              >
+                {isAddPending && (
+                  <Loader
+                    className="mr-2 size-4 animate-spin"
+                    aria-hidden="true"
+                  />
+                )}
+                Cancel
+              </Button>
+              <Button type="submit" disabled={form.formState.isSubmitting || isAddPending}>
+                {isAddPending && (
+                  <Loader
+                    className="mr-2 size-4 animate-spin"
+                    aria-hidden="true"
+                  />
+                )}
+                Create
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file