From da00bbf203534b2663289d6fe45b6ed8663e7e11 Mon Sep 17 00:00:00 2001
From: dujinkim <dujin.kim@dtsolution.co.kr>
Date: Tue, 23 Sep 2025 02:44:05 +0000
Subject: (최겸) 구매 인포메이션, 공지사항 수정
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/notice/notice-create-dialog.tsx | 107 +++++++++++++++++++++--------
 1 file changed, 79 insertions(+), 28 deletions(-)

(limited to 'components/notice/notice-create-dialog.tsx')

diff --git a/components/notice/notice-create-dialog.tsx b/components/notice/notice-create-dialog.tsx
index 591b2bc7..98c66c99 100644
--- a/components/notice/notice-create-dialog.tsx
+++ b/components/notice/notice-create-dialog.tsx
@@ -7,7 +7,7 @@ import { useForm } from "react-hook-form"
 import { useParams } from "next/navigation"
 import { useTranslation } from "@/i18n/client"
 import { toast } from "sonner"
-import { Loader } from "lucide-react"
+import { Loader, Check, ChevronsUpDown } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import {
   Dialog,
@@ -25,13 +25,9 @@ import {
 } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
 import { Switch } from "@/components/ui/switch"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@/components/ui/command"
+import { cn } from "@/lib/utils"
 import TiptapEditor from "@/components/qna/tiptap-editor"
 import { createNotice } from "@/lib/notice/service"
 import { createNoticeSchema, type CreateNoticeSchema } from "@/lib/notice/validations"
@@ -135,26 +131,81 @@ export function NoticeCreateDialog({
               <FormField
                 control={form.control}
                 name="pagePath"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>페이지 경로 *</FormLabel>
-                    <Select onValueChange={field.onChange} value={field.value}>
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue placeholder="페이지를 선택하세요" />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        {pagePathOptions.map((option) => (
-                          <SelectItem key={option.value} value={option.value}>
-                            {safeTranslate(option.label)} - {option.value}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
+                render={({ field }) => {
+                  const [open, setOpen] = useState(false)
+                  const [searchTerm, setSearchTerm] = useState("")
+
+                  const filteredOptions = React.useMemo(() => {
+                    if (!searchTerm.trim()) return pagePathOptions
+
+                    const lowerSearch = searchTerm.toLowerCase()
+                    return pagePathOptions.filter(
+                      (option) =>
+                        safeTranslate(option.label).toLowerCase().includes(lowerSearch) ||
+                        option.value.toLowerCase().includes(lowerSearch)
+                    )
+                  }, [pagePathOptions, searchTerm])
+
+                  const selectedOption = pagePathOptions.find(option => option.value === field.value)
+
+                  return (
+                    <FormItem>
+                      <FormLabel>페이지 경로 *</FormLabel>
+                      <Popover open={open} onOpenChange={setOpen}>
+                        <PopoverTrigger asChild>
+                          <FormControl>
+                            <Button
+                              variant="outline"
+                              role="combobox"
+                              aria-expanded={open}
+                              className="w-full justify-between"
+                            >
+                              {selectedOption
+                                ? `${safeTranslate(selectedOption.label)} - ${selectedOption.value}`
+                                : "페이지를 선택하세요"}
+                              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                            </Button>
+                          </FormControl>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-full p-0" align="start">
+                          <Command>
+                            <CommandInput
+                              placeholder="페이지명 또는 경로 검색..."
+                              onValueChange={setSearchTerm}
+                            />
+                            <CommandList className="max-h-[300px]">
+                              <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
+                              <CommandGroup>
+                                {filteredOptions.map((option) => (
+                                  <CommandItem
+                                    key={option.value}
+                                    value={`${safeTranslate(option.label)} ${option.value}`}
+                                    onSelect={() => {
+                                      field.onChange(option.value)
+                                      setOpen(false)
+                                    }}
+                                  >
+                                    <Check
+                                      className={cn(
+                                        "mr-2 h-4 w-4",
+                                        field.value === option.value
+                                          ? "opacity-100"
+                                          : "opacity-0"
+                                      )}
+                                    />
+                                    <span className="font-medium">{safeTranslate(option.label)}</span>
+                                    <span className="ml-2 text-gray-500 truncate">- {option.value}</span>
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                      <FormMessage />
+                    </FormItem>
+                  )
+                }}
               />
 
               <FormField
-- 
cgit v1.2.3