Merge remote-tracking branch 'origin/main' into iipbs/common/main

packages/common/assets/src/styles/components.css

@@ -0,0 +1,87 @@
+.card {
+  position: relative;
+  margin: 0.6rem;
+  box-sizing: border-box;
+  min-height: 2rem;
+  border-radius: 0.5rem;
+  padding: 0.6rem;
+  font-size: 1.3rem;
+  color: #666;
+}
+
+.card_width10 {width:calc(10% - 12px);}
+
+.card_width20 {width:calc(20% - 12px);}
+
+.card_width25 {width:calc(25% - 12px);}
+
+.card_width30 {width:calc(30% - 12px);}
+
+.card_width33 {width:calc(33.333% - 12px);}
+
+.card_width40 {width:calc(40% - 12px);}
+
+.card_width45 {width:calc(45% - 12px);}
+
+.card_width50 {width:calc(50% - 12px);}
+
+.card_width60 {width:calc(60% - 12px);}
+
+.card_width66 {width:calc(66.666% - 12px);}
+
+.card_width70 {width:calc(70% - 12px);}
+
+.card_width75 {width:calc(75% - 12px);}
+
+.card_width80 {width:calc(80% - 12px);}
+
+.card_width90 {width:calc(90% - 12px);}
+
+.card_width100 {width:calc(100% - 12px);}
+
+.card_nopadding {padding:0 !important;}
+
+.card_nomargin {width:100%;margin:0 !important;padding:0 !important;}
+
+.topline {border-top: 1px solid #ccc;}
+
+.bottomline {border-bottom: 1px solid #e6eef3;background: #fff;}
+
+.card-border {
+  border: 1px solid #dbe2e6;
+  background-color: rgba(255, 255, 255, 0.6);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  margin-left: -0.6rem;
+  margin-right: -0.6rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #e1e7eb;
+  padding: 1rem;
+}
+
+.card-footer {
+  margin-left: -0.6rem;
+  margin-right: -0.6rem;
+  margin-top: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: 1px solid #e1e7eb;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+/* 블랙 테마 */
+[data-theme="black"] {
+  .card-border {
+    border-color: #3f4042;
+    background-color: rgba(255, 255, 255, 0.065);
+  }
+  .card-header {
+    border-bottom-color: #3f4042;
+  }
+}

packages/common/assets/src/styles/index.ts

@@ -2,6 +2,7 @@ export const styles = {
   base: require("./base.css"),
   diveicon: require("./diveicon.css"),
   grid: require("./grid.css"),
+  components: require("./components.css"),
 } as const;
 
 export type StyleType = keyof typeof styles;

packages/common/assets/tsup.config.ts

@@ -6,6 +6,7 @@ export default defineConfig({
     "src/styles/base.css",
     "src/styles/diveicon.css",
     "src/styles/grid.css",
+    "src/styles/components.css",
   ],
   format: ["cjs", "esm"],
   dts: true,

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

@@ -1,19 +1,35 @@
 import { useState } from "react";
-import { Button } from "../button";
-import { Dialog, DialogContent, DialogTrigger } from "../dialog";
 import { cn } from "../../lib";
+import { Button } from "../button";
+import {
+  Dialog,
+  DialogClose,
+  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,18 +40,34 @@ const IconFinder = ({ handleClick }: IconFinderProps) => {
           아이콘 찾기
         </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-6 text-[2.4rem]">
-            {iconNames.map((icon) => (
-              <IconItem
-                key={icon}
-                icon={icon}
-                selectedIcon={selectedIcon}
-                handleClick={handleIconClick}
-              />
-            ))}
-          </div>
+      <DialogContent className="flex h-[65rem] max-w-[65rem] flex-col items-start overflow-y-auto">
+        <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="mt-6 !text-[1.3rem] text-foreground"
+            placeholder="아이콘 이름 검색"
+          />
+        </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>
@@ -65,8 +97,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,15 +3,13 @@ import * as React from "react";
 import { cn } from "../../lib/utils";
 
 const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-  ({ className, type, value, ...props }, ref) => {
+  ({ className, ...props }, ref) => {
     return (
       <input
-        type={type}
         className={cn(
           "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}
       />