feat: icon finder 검색 기능 추가

packages/common/components/src/ui/icon-finder/index.tsx

@@ -1,19 +1,34 @@
 import { useState } from "react";
-import { Button } from "../button";
-import { Dialog, DialogContent, DialogTrigger } from "../dialog";
 import { cn } from "../../lib";
+import { Button } from "../button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../dialog";
+import { Input } from "../input";
 import iconNames from "./data";
 
 type IconFinderProps = {
-  handleClick: (icon: string) => void;
+  handleClick?: (icon: string) => void;
 };
 
 const IconFinder = ({ handleClick }: IconFinderProps) => {
   const [selectedIcon, setSelectedIcon] = useState("");
+  const [inputValue, setInputValue] = useState("");
+  const [filteredIconNames, setFilteredIconNames] = useState(iconNames);
 
   const handleIconClick = (icon: string) => {
     setSelectedIcon(icon);
-    handleClick(icon);
+    handleClick?.(icon);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setInputValue(value);
+    setFilteredIconNames(iconNames.filter((icon) => icon.includes(value)));
   };
 
   return (
@@ -24,10 +39,19 @@ const IconFinder = ({ handleClick }: IconFinderProps) => {
           아이콘 찾기
         </Button>
       </DialogTrigger>
-      <DialogContent className="max-h-[65rem] max-w-[65rem] overflow-y-auto p-12">
-        <div className="py-4">
+      <DialogContent className="flex h-[65rem] max-w-[65rem] flex-col items-start overflow-y-auto">
+        <DialogHeader className="w-full">
+          <DialogTitle>아이콘 찾기</DialogTitle>
+        </DialogHeader>
+        <div className="flex w-full flex-col gap-4">
+          <Input
+            value={inputValue}
+            onChange={handleInputChange}
+            className="!text-[1.3rem] text-foreground"
+            placeholder="아이콘 이름 검색"
+          />
           <div className="grid grid-cols-5 gap-6 text-[2.4rem]">
-            {iconNames.map((icon) => (
+            {filteredIconNames.map((icon) => (
               <IconItem
                 key={icon}
                 icon={icon}
@@ -65,8 +89,8 @@ const IconItem = ({
           selectedIcon !== icon && "hidden",
         )}
       />
-      <i className={`diveicon di-${icon}`} />
-      <span className="text-center text-[1.2rem]">{icon}</span>
+      <i className={`diveicon di-${icon} text-foreground`} />
+      <span className="text-center text-[1.2rem] text-foreground">{icon}</span>
     </div>
   );
 };

packages/common/components/src/ui/input/index.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import { cn } from "../../lib/utils";
 
 const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-  ({ className, type, value, ...props }, ref) => {
+  ({ className, type, ...props }, ref) => {
     return (
       <input
         type={type}
@@ -11,7 +11,6 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
           "flex h-[3.2rem] w-full rounded-md border border-input bg-form px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-placeholder focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className,
         )}
-        value={value ?? ""}
         ref={ref}
         {...props}
       />