From 5df4f6dd1591da824c4eab95c15cfa4ee74b3b7d Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 25 Mar 2025 15:06:55 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20icon=20finder=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/src/ui/icon-finder/index.tsx   | 38 +++++++++++--------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/packages/common/components/src/ui/icon-finder/index.tsx b/packages/common/components/src/ui/icon-finder/index.tsx
index db8f6d1bd..326eb7be8 100644
--- a/packages/common/components/src/ui/icon-finder/index.tsx
+++ b/packages/common/components/src/ui/icon-finder/index.tsx
@@ -3,6 +3,7 @@ import { cn } from "../../lib";
 import { Button } from "../button";
 import {
   Dialog,
+  DialogClose,
   DialogContent,
   DialogHeader,
   DialogTitle,
@@ -40,26 +41,33 @@ const IconFinder = ({ handleClick }: IconFinderProps) => {
         </Button>
       </DialogTrigger>
       <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">
+        <div className="sticky top-0 z-10 w-full bg-background">
+          <DialogHeader className="w-full">
+            <DialogTitle className="-mt-6 flex items-center justify-between bg-background pt-6">
+              아이콘 찾기
+              <DialogClose asChild>
+                <button className="flex size-6 items-center justify-center rounded-full">
+                  <i className="diveicon di-x text-base text-muted-foreground" />
+                </button>
+              </DialogClose>
+            </DialogTitle>
+          </DialogHeader>
           <Input
             value={inputValue}
             onChange={handleInputChange}
-            className="!text-[1.3rem] text-foreground"
+            className="mt-6 !text-[1.3rem] text-foreground"
             placeholder="아이콘 이름 검색"
           />
-          <div className="grid grid-cols-5 gap-6 text-[2.4rem]">
-            {filteredIconNames.map((icon) => (
-              <IconItem
-                key={icon}
-                icon={icon}
-                selectedIcon={selectedIcon}
-                handleClick={handleIconClick}
-              />
-            ))}
-          </div>
+        </div>
+        <div className="grid grid-cols-5 gap-6 text-[2.4rem]">
+          {filteredIconNames.map((icon) => (
+            <IconItem
+              key={icon}
+              icon={icon}
+              selectedIcon={selectedIcon}
+              handleClick={handleIconClick}
+            />
+          ))}
         </div>
       </DialogContent>
     </Dialog>