@uniai-fe/ui-legacy 0.1.1

package/src/button/components/base/Default.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useMemo } from "react";
+import { clsx } from "clsx";
+
+import ButtonIconLoading from "../../icons/Loading";
+import StyledButtonBase from "../../styles/styled-components/button";
+import type { ButtonDefaultPropsType } from "../../../types";
+
+/**
+ * 버튼 컴포넌트; 범용 버튼
+ * @component
+ * @param {ButtonDefaultPropsType} props
+ * @param {ButtonAttrType} [props.buttonType] button(기본값), submit
+ * @param {ButtonStateType} [props.state] active(기본값), loading, readonly, disabled, empty, view-selected, view-saved, edit-selected, edit-saved, new-selected, new-saved
+ * @param {string} [props.className]
+ * @param {React.ReactNode} props.children
+ * @param {Function} [props.clickEvent]
+ * @param {Function} [props.mouseDownEvent]
+ * @param {Function} [props.mouseUpEvent]
+ * @param {ButtonStyleOptionsType} props.styleOptions 버튼 디자인시스템 옵션
+ * @param {ButtonPriorityType} props.styleOptions.priorityType primary, secondary, neutral, custom
+ * @param {ButtonFillType} props.styleOptions.fillType solid, outline
+ * @param {ButtonSizeType} props.styleOptions.sizeType large, medium, small
+ * @param {string} props.styleOptions.widthType fit, wide, normal
+ */
+export default function ButtonDefault({
+  buttonType = "button",
+  state = "active",
+  className,
+  children,
+  clickEvent,
+  mouseDownEvent,
+  mouseUpEvent,
+  styleOptions,
+  ...htmlAttrs
+}: ButtonDefaultPropsType) {
+  const attr = useMemo(() => {
+    const output = {
+      type: buttonType,
+      className: clsx("button", className),
+      onClick: clickEvent,
+      onMouseDown: mouseDownEvent,
+      onMouseUp: mouseUpEvent,
+      ...htmlAttrs,
+    };
+    if (["readonly", "disabled"].includes(state)) {
+      Object.assign(output, { disabled: true });
+    }
+    return output;
+  }, [
+    htmlAttrs,
+    buttonType,
+    clickEvent,
+    mouseDownEvent,
+    mouseUpEvent,
+    state,
+    className,
+  ]);
+
+  return (
+    <StyledButtonBase.basic
+      {...attr}
+      $priority={styleOptions.priorityType}
+      $fill={styleOptions.fillType}
+      $size={styleOptions.sizeType}
+      $width={styleOptions.widthType || "normal"}
+      $state={state}
+    >
+      {typeof children === "string" ? <span>{children}</span> : children}
+      {state === "loading" && (
+        <ButtonIconLoading sizeType={styleOptions.sizeType} />
+      )}
+    </StyledButtonBase.basic>
+  );
+}

package/src/button/components/base/Expand.tsx

@@ -0,0 +1,39 @@
+import Image from "next/image";
+import type { ButtonExpandPropsType } from "../../../types";
+import { clsx } from "clsx";
+import assetUrl from "../../../asset-url";
+
+/**
+ * 버튼 컴포넌트; 확장 버튼
+ * @component
+ * @param {ButtonExpandPropsType} props
+ * @param {ButtonExpandStateType} [props.expandState] open, close(기본값)
+ * @param {string} [props.className]
+ * @param {React.ReactNode} props.children
+ * @param {Function} [props.clickEvent]
+ */
+export default function ButtonExpand({
+  expandState = "close",
+  className,
+  children,
+  clickEvent,
+}: ButtonExpandPropsType) {
+  return (
+    <button
+      type="button"
+      className={clsx("button-expand", className)}
+      expand-state={expandState}
+      onClick={clickEvent}
+    >
+      {children}
+      <figure>
+        <Image
+          src={`${assetUrl}/img/button/select-arrow.svg`}
+          alt="펼침/닫힘 버튼"
+          width={12}
+          height={7}
+        />
+      </figure>
+    </button>
+  );
+}

package/src/button/components/base/Link.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import StyledButtonBase from "../../styled";
+import { ButtonLinkPropsType } from "../../../types";
+
+/**
+ * 버튼 컴포넌트; 링크 버튼
+ * @component
+ * @param {ButtonLinkPropsType} props
+ * @param {ButtonStateType} [props.state] active(기본값), loading, readonly, disabled, empty, view-selected, view-saved, edit-selected, edit-saved, new-selected, new-saved
+ * @param {string} [props.className]
+ * @param {React.ReactNode} props.children
+ * @param {LinkProps} props.linkOptions Next.js Link props 옵션
+ * @param {ButtonStyleOptionsType} props.styleOptions 버튼 디자인시스템 옵션
+ * @param {ButtonPriorityType} props.styleOptions.priorityType primary, secondary, neutral, custom
+ * @param {ButtonFillType} props.styleOptions.fillType solid, outline
+ * @param {ButtonSizeType} props.styleOptions.sizeType large, medium, small
+ * @param {string} props.styleOptions.widthType fit, wide, normal
+ */
+export default function ButtonLink({
+  className,
+  children,
+  state = "active",
+  linkOptions,
+  styleOptions,
+}: ButtonLinkPropsType) {
+  return (
+    <StyledButtonBase.link
+      {...linkOptions}
+      className={className}
+      $priority={styleOptions.priorityType}
+      $fill={styleOptions.fillType}
+      $size={styleOptions.sizeType}
+      $width={styleOptions.widthType || "normal"}
+      $state={state}
+    >
+      {children}
+    </StyledButtonBase.link>
+  );
+}

package/src/button/components/base/Refresh.tsx

@@ -0,0 +1,43 @@
+import { clsx } from "clsx";
+import ButtonDefault from "./Default";
+import ButtonIconRefresh from "../../icons/Refresh";
+import type { ButtonTemplatePropsType } from "../../../types";
+
+/**
+ * 버튼 컴포넌트; 새로고침 버튼
+ * @component
+ * @param {ButtonDefaultPropsType} props
+ * @param {ButtonStateType} [props.state] active(기본값), loading, readonly, disabled, empty, view-selected, view-saved, edit-selected, edit-saved, new-selected, new-saved
+ * @param {React.ReactNode} props.children
+ * @param {Function} [props.clickEvent]
+ * @param {Function} [props.mouseDownEvent]
+ * @param {Function} [props.mouseUpEvent]
+ * @param {ButtonStyleOptionsType} props.styleOptions 버튼 디자인시스템 옵션
+ * @param {string} [props.styleOptions.className]
+ * @param {ButtonPriorityType} props.styleOptions.priorityType primary, secondary, neutral, custom
+ * @param {ButtonFillType} props.styleOptions.fillType solid, outline
+ * @param {ButtonSizeType} props.styleOptions.sizeType large, medium, small
+ * @param {string} props.styleOptions.widthType fit, wide, normal
+ */
+export default function ButtonRefresh({
+  className,
+  styleOptions,
+  children,
+  ...props
+}: ButtonTemplatePropsType) {
+  return (
+    <ButtonDefault
+      className={clsx("button-refresh", className)}
+      styleOptions={{
+        ...styleOptions,
+        priorityType: styleOptions?.priorityType || "pale",
+        sizeType: styleOptions?.sizeType || "chip",
+        fillType: styleOptions?.fillType || "outline",
+      }}
+      {...props}
+    >
+      {children}
+      <ButtonIconRefresh sizeType={styleOptions?.sizeType || "chip"} />
+    </ButtonDefault>
+  );
+}

package/src/button/components/base/Reset.tsx

@@ -0,0 +1,43 @@
+import { clsx } from "clsx";
+import ButtonDefault from "./Default";
+import ButtonIconReset from "../../icons/Reset";
+import type { ButtonTemplatePropsType } from "../../../types";
+
+/**
+ * 버튼 컴포넌트; 초기화 버튼
+ * @component
+ * @param {ButtonDefaultPropsType} props
+ * @param {ButtonStateType} [props.state] active(기본값), loading, readonly, disabled, empty, view-selected, view-saved, edit-selected, edit-saved, new-selected, new-saved
+ * @param {React.ReactNode} props.children
+ * @param {Function} [props.clickEvent]
+ * @param {Function} [props.mouseDownEvent]
+ * @param {Function} [props.mouseUpEvent]
+ * @param {ButtonStyleOptionsType} props.styleOptions 버튼 디자인시스템 옵션
+ * @param {string} [props.styleOptions.className]
+ * @param {ButtonPriorityType} props.styleOptions.priorityType primary, secondary, neutral, custom
+ * @param {ButtonFillType} props.styleOptions.fillType solid, outline
+ * @param {ButtonSizeType} props.styleOptions.sizeType large, medium, small
+ * @param {string} props.styleOptions.widthType fit, wide, normal
+ */
+export default function ButtonReset({
+  className,
+  styleOptions,
+  children,
+  ...props
+}: ButtonTemplatePropsType) {
+  return (
+    <ButtonDefault
+      className={clsx("button-reset", className)}
+      styleOptions={{
+        ...styleOptions,
+        priorityType: styleOptions?.priorityType || "pale",
+        sizeType: styleOptions?.sizeType || "extra-small",
+        fillType: styleOptions?.fillType || "outline",
+      }}
+      {...props}
+    >
+      <ButtonIconReset sizeType={styleOptions?.sizeType || "extra-small"} />
+      {typeof children === "string" ? <span>{children}</span> : children}
+    </ButtonDefault>
+  );
+}

package/src/button/components/base/ResetSelected.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledButtonTemplate from "../../styles/styled-components/template";
+import ButtonIconResetSelected from "../../icons/ResetSelected";
+
+import type { ButtonTextPropsType } from "../../../types";
+import ButtonText from "./Text";
+
+/**
+ * 버튼 컴포넌트; 선택 초기화 버튼
+ * @component
+ * @param {ButtonDefaultPropsType} props
+ * @param {ButtonStateType} [props.state] active(기본값), loading, readonly, disabled, empty, view-selected, view-saved, edit-selected, edit-saved, new-selected, new-saved
+ * @param {React.ReactNode} props.children
+ * @param {Function} [props.clickEvent]
+ * @param {Function} [props.mouseDownEvent]
+ * @param {Function} [props.mouseUpEvent]
+ */
+export default function ButtonResetSelected({
+  className,
+  children,
+  ...props
+}: ButtonTextPropsType) {
+  return (
+    <StyledButtonTemplate.resetSelected
+      as={ButtonText}
+      className={clsx("button-reset-filter", className)}
+      {...props}
+    >
+      {typeof children === "string" ? <span>{children}</span> : children}
+      <ButtonIconResetSelected />
+    </StyledButtonTemplate.resetSelected>
+  );
+}

package/src/button/components/base/Text.tsx

@@ -0,0 +1,35 @@
+import { clsx } from "clsx";
+import StyledButtonTemplate from "../../styles/styled-components/template";
+import type { ButtonTextPropsType } from "../../../types";
+
+/**
+ * 버튼 컴포넌트; 텍스트 버튼
+ * @component
+ * @param {ButtonTextPropsType} props
+ * @param {ButtonAttrType} [props.buttonType] button(기본값), submit
+ * @param {string} [props.className]
+ * @param {React.ReactNode} props.children
+ * @param {Function} [props.clickEvent]
+ */
+export default function ButtonText({
+  buttonType = "button",
+  state,
+  color,
+  size,
+  className,
+  children,
+  clickEvent,
+}: ButtonTextPropsType) {
+  return (
+    <StyledButtonTemplate.textButton
+      type={buttonType}
+      className={clsx("button-text", className)}
+      onClick={clickEvent}
+      $size={size}
+      $color={color}
+      $state={state}
+    >
+      {children}
+    </StyledButtonTemplate.textButton>
+  );
+}

package/src/button/components/base/Tooltip.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import Icon from "../../../icon";
+import StyledButtonBase from "../../styles/styled-components/button";
+import type { ButtonFillType, ButtonPriorityType } from "../../../types";
+
+export default function ButtonTooltip({
+  size = 20,
+  priorityType = "neutral",
+  fillType = "outline",
+  clickEvent,
+}: Partial<{
+  size: number;
+  priorityType: ButtonPriorityType;
+  fillType: ButtonFillType;
+  clickEvent: () => void;
+}>) {
+  return (
+    <StyledButtonBase.tooltip
+      type="button"
+      $priority={priorityType}
+      $fill={fillType}
+      $size={size}
+      onClick={clickEvent}
+    >
+      <figure>
+        {fillType === "solid" ? (
+          <Icon.Tooltip.Solid />
+        ) : (
+          <Icon.Tooltip.Outline />
+        )}
+      </figure>
+    </StyledButtonBase.tooltip>
+  );
+}

package/src/button/components/multiple/Container.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import type { ButtonMultipleDataType } from "../../../types";
+import StyledButtonMultiple from "../../styles/styled-components/multiple";
+import Alternate from "../../../alternate";
+
+/**
+ * 버튼 컴포넌트; 다중선택 버튼 컨테이너
+ * @component
+ * @param {ComponentBaseProps} props
+ * @param {string} [props.className]
+ * @param {number} [props.columnLength] 기본값 1
+ * @param {ButtonMultipleDataType[]} props.data 버튼 데이터
+ * @property {string} props.data.key
+ * @property {React.ReactNode} props.data.name
+ * @property {boolean} props.data.isSelected
+ * @param {boolean} props.isFetching
+ * @param {Function} props.onSelect
+ */
+export default function ButtonMultipleContainer({
+  className,
+  data,
+  columnLength = 1,
+  isFetching,
+  onSelect,
+}: {
+  data: ButtonMultipleDataType[];
+  isFetching: boolean;
+  onSelect: (data: ButtonMultipleDataType) => void;
+} & Partial<{
+  className: string;
+  columnLength: number;
+}>) {
+  return (
+    <StyledButtonMultiple.container
+      className={className}
+      $empty={isFetching || data.length === 0}
+    >
+      <StyledButtonMultiple.list
+        $columnLength={
+          isFetching || data.length === 0 ? undefined : columnLength
+        }
+      >
+        {isFetching ? (
+          <StyledButtonMultiple.item $isAlternate={true}>
+            <Alternate.LoadingDefault />
+          </StyledButtonMultiple.item>
+        ) : data.length === 0 ? (
+          <StyledButtonMultiple.item $isAlternate={true}>
+            <Alternate.EmptyData />
+          </StyledButtonMultiple.item>
+        ) : (
+          data.map(d => (
+            <StyledButtonMultiple.item key={`button/multiple/${d.key}`}>
+              <StyledButtonMultiple.button
+                type="button"
+                $selected={d.isSelected}
+                onClick={() => {
+                  onSelect(d);
+                }}
+              >
+                <span>{d.name}</span>
+              </StyledButtonMultiple.button>
+            </StyledButtonMultiple.item>
+          ))
+        )}
+      </StyledButtonMultiple.list>
+    </StyledButtonMultiple.container>
+  );
+}

package/src/button/components/select/SelectBox.tsx

@@ -0,0 +1,37 @@
+import ButtonIconArrow from "../../icons/Expand";
+import ButtonDefault from "../base/Default";
+import type { ButtonSelectBoxPropsType } from "../../../types";
+
+/**
+ * 버튼 컴포넌트; 셀렉트 박스 버튼
+ * @component
+ * @param {ButtonSelectBoxPropsType} props
+ * @param {string} [props.className]
+ * @param {ButtonStateType} [props.state] 기본값: active
+ * @param {React.ReactNode} props.children
+ * @param {Function} [props.clickEvent]
+ */
+export default function ButtonSelectBox({
+  className,
+  state = "active",
+  children,
+  clickEvent,
+  ...htmlAttrs
+}: ButtonSelectBoxPropsType) {
+  return (
+    <ButtonDefault
+      state={state}
+      className={className}
+      clickEvent={clickEvent}
+      styleOptions={{
+        priorityType: "pale",
+        fillType: "outline",
+        sizeType: "small",
+      }}
+      {...htmlAttrs}
+    >
+      {children}
+      <ButtonIconArrow />
+    </ButtonDefault>
+  );
+}

package/src/button/icons/Expand.tsx

@@ -0,0 +1,16 @@
+import { clsx } from "clsx";
+import Image from "next/image";
+import assetUrl from "../../asset-url";
+
+export default function ButtonIconArrow({ className }: { className?: string }) {
+  return (
+    <figure className={clsx("expand-icon", className)}>
+      <Image
+        src={`${assetUrl}/img/button/select-arrow.svg`}
+        alt="선택메뉴"
+        width={12}
+        height={7}
+      />
+    </figure>
+  );
+}

package/src/button/icons/Loading.tsx

@@ -0,0 +1,20 @@
+import IconAlternate from "../../icon/components/alternate";
+import type { ButtonSizeType } from "../../types";
+
+/**
+ * 버튼 컴포넌트; 로딩 아이콘
+ * @component
+ * @param {object} props
+ * @param {ButtonSizeType} props.sizeType large, medium, small, chip
+ */
+export default function ButtonIconLoading({
+  sizeType,
+}: {
+  sizeType: ButtonSizeType;
+}) {
+  return (
+    <IconAlternate.Loading
+      size={["small", "extra-small", "chip"].includes(sizeType) ? 16 : 24}
+    />
+  );
+}

package/src/button/icons/Refresh.tsx

@@ -0,0 +1,20 @@
+import Icon from "../../icon";
+import type { ButtonSizeType } from "../../types";
+
+/**
+ * 버튼 컴포넌트; 새로고침 아이콘
+ * @component
+ * @param {object} props
+ * @param {ButtonSizeType} props.sizeType large, medium, small, chip
+ */
+export default function ButtonIconRefresh({
+  sizeType,
+}: {
+  sizeType: ButtonSizeType;
+}) {
+  return (
+    <Icon.Button.Refresh
+      size={["small", "extra-small", "chip"].includes(sizeType) ? 16 : 24}
+    />
+  );
+}

package/src/button/icons/Reset.tsx

@@ -0,0 +1,20 @@
+import Icon from "../../icon";
+import type { ButtonSizeType } from "../../types";
+
+/**
+ * 버튼 컴포넌트; 초기화 아이콘
+ * @component
+ * @param {object} props
+ * @param {ButtonSizeType} props.sizeType large, medium, small, chip
+ */
+export default function ButtonIconReset({
+  sizeType,
+}: {
+  sizeType: ButtonSizeType;
+}) {
+  return (
+    <Icon.Button.Reset
+      size={["small", "extra-small", "chip"].includes(sizeType) ? 16 : 24}
+    />
+  );
+}

package/src/button/icons/ResetSelected.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import Image from "next/image";
+import assetUrl from "../../asset-url";
+import StyledButtonIcon from "../styles/styled-components/icon";
+
+export default function ButtonIconResetSelected() {
+  return (
+    <StyledButtonIcon.resetSelected>
+      <div className="icon-wrapper">
+        <Image
+          src={`${assetUrl}/img/icon/reset-selected.svg`}
+          // width={10}
+          // height={11}
+          alt="선택 초기화"
+          fill={true}
+        />
+      </div>
+    </StyledButtonIcon.resetSelected>
+  );
+}

package/src/button/index.tsx

@@ -0,0 +1,29 @@
+import ButtonDefault from "./components/base/Default";
+import ButtonExpand from "./components/base/Expand";
+import ButtonSelectBox from "./components/select/SelectBox";
+import ButtonLink from "./components/base/Link";
+import ButtonText from "./components/base/Text";
+import ButtonAddArray from "./components/array/Add";
+import ButtonRemoveArray from "./components/array/Remove";
+import ButtonTooltip from "./components/base/Tooltip";
+import ButtonRefresh from "./components/base/Refresh";
+import ButtonReset from "./components/base/Reset";
+import ButtonMultipleContainer from "./components/multiple/Container";
+import ButtonResetSelected from "./components/base/ResetSelected";
+
+const Button = {
+  Default: ButtonDefault,
+  Expand: ButtonExpand,
+  Link: ButtonLink,
+  Text: ButtonText,
+  Tooltip: ButtonTooltip,
+  ArrayAdd: ButtonAddArray,
+  ArrayRemove: ButtonRemoveArray,
+  SelectBox: ButtonSelectBox,
+  Refresh: ButtonRefresh,
+  Reset: ButtonReset,
+  ResetSelected: ButtonResetSelected,
+  Multiple: ButtonMultipleContainer,
+};
+
+export default Button;

package/src/button/styled.tsx

@@ -0,0 +1,12 @@
+import StyledButtonBase from "./styles/styled-components/button";
+import StyledButtonIcon from "./styles/styled-components/icon";
+import StyledButtonMultiple from "./styles/styled-components/multiple";
+import StyledButtonTemplate from "./styles/styled-components/template";
+
+const StyledButton = {
+  ...StyledButtonBase,
+  ...StyledButtonTemplate,
+  multiple: StyledButtonMultiple,
+  icon: StyledButtonIcon,
+};
+export default StyledButton;

package/src/button/styles/scss/multiple.scss

@@ -0,0 +1,17 @@
+:root {
+  --button-multiple-list-gap-horizontal: 0.5rem;
+  --button-multiple-list-gap-vertical: 0.6rem;
+
+  --button-multiple-item-height: 2.4rem;
+  --button-multiple-item-bg-selected: var(--theme-background-70);
+
+  --button-multiple-item-padding-vertical: 0px;
+  --button-multiple-item-padding-horizontal: 0.8rem;
+
+  --button-multiple-text-size: 1.4rem;
+  --button-multiple-text-color-default: var(--color_70);
+  --button-multiple-text-color-selected: var(--theme-blue-main);
+
+  --button-multiple-align-items: center;
+  --button-multiple-justify-content: center;
+}

package/src/button/styles/scss/size.scss

@@ -0,0 +1,46 @@
+:root {
+  --button-margin-vertical: 0px;
+  --button-margin-horizontal: 0.4rem;
+
+  --button-border-width: 1px;
+
+  // 모서리
+  --button-top-radius: 0.4rem;
+  --button-bottom-radius: 0.4rem;
+
+  // size; large
+  --button-height-large: 5.2rem;
+  --button-padding-large: 2rem;
+  --button-loading-size-large: 2.4rem;
+  --button-name-size-large: 1.6rem;
+
+  // size; medium
+  --button-height-medium: 4rem;
+  --button-padding-medium: 1.6rem;
+  --button-loading-size-medium: 2.4rem;
+  --button-name-size-medium: 1.6rem;
+
+  // size; small
+  --button-height-small: 3.6rem;
+  --button-padding-small: 1.2rem;
+  --button-loading-size-small: 1.6rem;
+  --button-name-size-small: 1.4rem;
+
+  // size; extra-small
+  --button-height-extra-small: 3.2rem;
+  --button-padding-extra-small: 1rem;
+  --button-loading-size-extra-small: 1.6rem;
+  --button-name-size-extra-small: 1.2rem;
+
+  // size; modal
+  --button-height-modal: 4rem;
+  --button-padding-modal: 1.6rem;
+  --button-loading-size-modal: 2.4rem;
+  --button-name-size-modal: 1.6rem;
+
+  // size; chip
+  --button-height-chip: 3rem;
+  --button-padding-chip: 1.2rem;
+  --button-loading-size-chip: 1.6rem;
+  --button-name-size-chip: 1.4rem;
+}