@uniai-fe/ui-legacy 0.1.18 → 0.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/ui-legacy",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "description": "Legacy UI Toolkit for UNIAI FE Projects",
   "type": "module",
   "private": false,

package/src/form-field/select/index.tsx

@@ -1,8 +1,10 @@
+import SelectContainer from "./components/assets/Container";
 import SelectDefault from "./components/Default";
 import SelectMultipleCategoryList from "./components/MultipleCategoryList";
 import SelectMultipleDefault from "./components/MultipleDefault";
 
 const Select = {
+  Container: SelectContainer,
   Default: SelectDefault,
   Multiple: {
     Default: SelectMultipleDefault,

package/src/modal/components/assets/layout/Body.tsx

@@ -3,5 +3,9 @@
 import StyledModalLayout from "../../../styles/styled-components/layout";
 
 export default function ModalBody({ body }: { body: React.ReactNode }) {
-  return <StyledModalLayout.body>{body}</StyledModalLayout.body>;
+  return (
+    <StyledModalLayout.body className="modal-body">
+      {body}
+    </StyledModalLayout.body>
+  );
 }

package/src/modal/components/assets/layout/Footer.tsx

@@ -10,7 +10,7 @@ export default function ModalFooter({
   btns: (ModalFooterButtonType | null)[];
 }) {
   return (
-    <StyledModalLayout.footer>
+    <StyledModalLayout.footer className="modal-footer">
       {btns.map(
         (btn, index) =>
           btn !== null && (

package/src/modal/components/assets/layout/Header.tsx

@@ -24,16 +24,18 @@ export default function ModalHeader({
 
   return (
     <StyledModalLayout.header.container
+      className="modal-header-container"
       $isAlert={isAlert}
       $isNoTitle={isNoTitle}
     >
       {!isAlert && (
-        <StyledModalLayout.header.title>
+        <StyledModalLayout.header.title className="modal-header-title">
           {typeof title === "string" ? <span>{title ?? ""}</span> : title}
         </StyledModalLayout.header.title>
       )}
       {isCloseBtn && (
         <StyledModalLayout.header.closeButton
+          className="modal-header-close-button"
           type="button"
           onClick={() => closeModal({ stackKey })}
         >

package/src/modal/components/basic/Container.tsx

@@ -30,6 +30,7 @@ export default function ModalBasicContainer({
 
   return (
     <StyledModalBasic.container
+      className="modal-basic-container"
       $width={width}
       $layout={layoutType}
       $isFooter={typeof data?.footerBtns !== "undefined"}

package/src/tooltip/components/Help.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import clsx from "clsx";
 import Button from "../../button";
 import StyledTooltipHelp from "../styles/styled-components/help";
 import TooltipWrapper from "./Wrapper";
@@ -13,17 +14,20 @@ import TooltipWrapper from "./Wrapper";
  * @param {"bottom"|"top"} [props.vertical] 툴팁 세로 위치
  */
 export default function TooltipHelp({
+  className,
   children: message,
   horizontal = "left",
   vertical = "bottom",
 }: {
   children: React.ReactNode;
 } & Partial<{
+  className: string;
   horizontal: "left" | "right";
   vertical: "bottom" | "top";
 }>) {
   return (
     <StyledTooltipHelp.container
+      className={clsx("tooltip-container tooltip-help", className)}
       as={TooltipWrapper}
       message={message}
       horizontal={horizontal}

package/src/tooltip/components/MessageBox.tsx

@@ -16,6 +16,7 @@ export default function TooltipMessageBox({
 }>) {
   return (
     <StyledTooltipMessageBox.container
+      className="tooltip-message-box"
       $horizontal={horizontal}
       $vertical={vertical}
       $bgColor={bgColor}

package/src/tooltip/components/Wrapper.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import clsx from "clsx";
 import StyledTooltipBase from "../styles/styled-components/base";
 import TooltipMessageBox from "./MessageBox";
 
@@ -12,6 +13,7 @@ import TooltipMessageBox from "./MessageBox";
  * @param {"bottom"|"top"} [props.vertical] 툴팁 세로 위치
  */
 export default function TooltipWrapper({
+  className,
   children,
   message,
   horizontal = "left",
@@ -20,11 +22,12 @@ export default function TooltipWrapper({
   children: React.ReactNode;
   message: React.ReactNode;
 } & Partial<{
+  className: string;
   horizontal: "left" | "right";
   vertical: "bottom" | "top";
 }>) {
   return (
-    <StyledTooltipBase.parent>
+    <StyledTooltipBase.parent className={clsx("tooltip-wrapper", className)}>
       {children}
       <TooltipMessageBox horizontal={horizontal} vertical={vertical}>
         {message}