feat: 메뉴 유형별 폼 작업

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

@@ -1,18 +1,39 @@
+import { useState } from "react";
 import { Button } from "../button";
 import { Dialog, DialogContent, DialogTrigger } from "../dialog";
+import { cn } from "../../lib";
 import iconNames from "./data";
 
-const IconFinder = () => {
+type IconFinderProps = {
+  handleClick: (icon: string) => void;
+};
+
+const IconFinder = ({ handleClick }: IconFinderProps) => {
+  const [selectedIcon, setSelectedIcon] = useState("");
+
+  const handleIconClick = (icon: string) => {
+    setSelectedIcon(icon);
+    handleClick(icon);
+  };
+
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button>아이콘 찾기</Button>
+        <Button className="leading-none">
+          <i className="diveicon di-search" />
+          아이콘 찾기
+        </Button>
       </DialogTrigger>
       <DialogContent className="max-h-[65rem] max-w-[65rem] overflow-y-auto p-12">
         <div className="py-4">
-          <div className="grid grid-cols-5 gap-10 text-[2.4rem]">
+          <div className="grid grid-cols-5 gap-6 text-[2.4rem]">
             {iconNames.map((icon) => (
-              <IconItem key={icon} icon={icon} />
+              <IconItem
+                key={icon}
+                icon={icon}
+                selectedIcon={selectedIcon}
+                handleClick={handleIconClick}
+              />
             ))}
           </div>
         </div>
@@ -21,9 +42,29 @@ const IconFinder = () => {
   );
 };
 
-const IconItem = ({ icon }: { icon: string }) => {
+const IconItem = ({
+  icon,
+  selectedIcon,
+  handleClick,
+}: {
+  icon: string;
+  selectedIcon: string;
+  handleClick: (icon: string) => void;
+}) => {
   return (
-    <div className="flex flex-col items-center gap-2">
+    <div
+      className={cn(
+        "relative flex cursor-pointer flex-col items-center gap-2 rounded-md p-4",
+        selectedIcon === icon && "bg-accent",
+      )}
+      onClick={() => handleClick(icon)}
+    >
+      <i
+        className={cn(
+          "diveicon di-check absolute left-4 top-4 text-[1rem] text-primary",
+          selectedIcon !== icon && "hidden",
+        )}
+      />
       <i className={`diveicon di-${icon}`} />
       <span className="text-center text-[1.2rem]">{icon}</span>
     </div>

packages/common/components/src/ui/index.ts

@@ -7,8 +7,8 @@ export * from "./data-table";
 export * from "./date-picker";
 export * from "./dialog";
 export * from "./dropdown-menu";
-export * from "./input";
 export * from "./file-search";
+export * from "./icon-finder";
 export * from "./input";
 export * from "./label";
 export * from "./layout";