From 8f4dc1bd34732d4d77fc9ac5cd5f947e46e6da6b Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 25 Mar 2025 09:48:14 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20icon=20finder=20=EA=B2=80=EC=83=89=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/src/ui/icon-finder/index.tsx   | 42 +++++++++++++++----
 .../common/components/src/ui/input/index.tsx  |  3 +-
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/packages/common/components/src/ui/icon-finder/index.tsx b/packages/common/components/src/ui/icon-finder/index.tsx
index 62e6e195a..db8f6d1bd 100644
--- a/packages/common/components/src/ui/icon-finder/index.tsx
+++ b/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>
   );
 };
diff --git a/packages/common/components/src/ui/input/index.tsx b/packages/common/components/src/ui/input/index.tsx
index a980f0ebd..d53c6a199 100644
--- a/packages/common/components/src/ui/input/index.tsx
+++ b/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}
       />