@uniai-fe/ui-legacy 0.1.1

package/src/icon/components/arrow/dropdown/Breadcrumb.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { clsx } from "clsx";
+
+import BreadcrumbIcon from "../../../svg/arrow/dropdown/breadcrumb.svg";
+import StyledIconArrow from "../../../styles/styled/arrow";
+
+export default function IconArrowDropdownBreadcrumb({
+  className,
+}: {
+  className?: string;
+}) {
+  return (
+    <StyledIconArrow.container
+      className={clsx("icon-arrow icon-arrow-dropdown-breadcrumb", className)}
+    >
+      <BreadcrumbIcon viewBox="0 0 11 6" width={11} height={6} />
+    </StyledIconArrow.container>
+  );
+}

package/src/icon/components/arrow/dropdown/Select.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { clsx } from "clsx";
+
+import SelectIcon from "../../../svg/arrow/dropdown/select.svg";
+import StyledIconArrow from "../../../styles/styled/arrow";
+
+export default function IconArrowDropdownSelect({
+  className,
+}: {
+  className?: string;
+}) {
+  return (
+    <StyledIconArrow.container
+      className={clsx("icon-arrow icon-arrow-dropdown-select", className)}
+    >
+      <SelectIcon viewBox="0 0 12 7" width={12} height={7} />
+    </StyledIconArrow.container>
+  );
+}

package/src/icon/components/arrow/index.tsx

@@ -0,0 +1,11 @@
+import IconArrowDropdownBreadcrumb from "./dropdown/Breadcrumb";
+import IconArrowDropdownSelect from "./dropdown/Select";
+
+const IconArrow = {
+  Dropdown: {
+    Breadcrumb: IconArrowDropdownBreadcrumb,
+    Select: IconArrowDropdownSelect,
+  },
+};
+
+export default IconArrow;

package/src/icon/components/button/Close.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledIconCommon from "../../styles/styled/common";
+import CloseIcon from "../../svg/button/close.svg";
+
+export default function IconButtonClose({
+  className,
+  size = 18,
+}: Partial<{ className: string; size: number }>) {
+  return (
+    <StyledIconCommon.figure
+      className={clsx("icon-button icon-button-close", className)}
+      $width={size || 18}
+      $height={size || 18}
+    >
+      <CloseIcon viewBox="0 0 18 18" width={size} height={size} />
+    </StyledIconCommon.figure>
+  );
+}

package/src/icon/components/button/Filter.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledIconCommon from "../../styles/styled/common";
+import FilterIcon from "../../svg/button/filter.svg";
+
+export default function IconButtonFilter({
+  className,
+}: Partial<{ className: string }>) {
+  return (
+    <StyledIconCommon.figure
+      className={clsx("icon-button icon-button-refresh", className)}
+      $width={14}
+      $height={14}
+    >
+      <FilterIcon viewBox="0 0 14 14" width={14} height={14} />
+    </StyledIconCommon.figure>
+  );
+}

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

@@ -0,0 +1,18 @@
+import { clsx } from "clsx";
+import StyledIconCommon from "../../styles/styled/common";
+import RefreshIcon from "../../svg/button/refresh.svg";
+
+export default function IconButtonRefresh({
+  className,
+  size,
+}: Partial<{ className: string; size: number }>) {
+  return (
+    <StyledIconCommon.figure
+      className={clsx("icon-button icon-button-refresh", className)}
+      $width={size || 24}
+      $height={size || 24}
+    >
+      <RefreshIcon viewBox="0 0 24 24" />
+    </StyledIconCommon.figure>
+  );
+}

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

@@ -0,0 +1,18 @@
+import { clsx } from "clsx";
+import StyledIconCommon from "../../styles/styled/common";
+import ResetIcon from "../../svg/button/reset.svg";
+
+export default function IconButtonReset({
+  className,
+  size,
+}: Partial<{ className: string; size: number }>) {
+  return (
+    <StyledIconCommon.figure
+      className={clsx("icon-button icon-button-reset", className)}
+      $width={size || 24}
+      $height={size || 24}
+    >
+      <ResetIcon viewBox="0 0 24 24" width={size} height={size} />
+    </StyledIconCommon.figure>
+  );
+}

package/src/icon/components/button/add/Outline.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledIconCommon from "../../../styles/styled/common";
+import IconOutline from "../../../svg/button/add-outline.svg";
+
+export default function IconButtonAddOutline({
+  className,
+  size = 24,
+}: Partial<{
+  className: string;
+  size: number;
+}>) {
+  return (
+    <StyledIconCommon.figure
+      className={clsx("icon-button icon-button-add", className)}
+      $width={size || 24}
+      $height={size || 24}
+    >
+      <IconOutline viewBox="0 0 24 24" width={size} height={size} />
+    </StyledIconCommon.figure>
+  );
+}

package/src/icon/components/button/add/Solid.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledIconCommon from "../../../styles/styled/common";
+import IconSolid from "../../../svg/button/add-solid.svg";
+
+export default function IconButtonAddSolid({
+  className,
+  size = 24,
+}: Partial<{
+  className: string;
+  size: number;
+}>) {
+  return (
+    <StyledIconCommon.figure
+      className={clsx("icon-button icon-button-add", className)}
+      $width={size || 16}
+      $height={size || 16}
+    >
+      <IconSolid viewBox="0 0 16 16" width={size} height={size} />
+    </StyledIconCommon.figure>
+  );
+}

package/src/icon/components/button/add/index.tsx

@@ -0,0 +1,9 @@
+import IconButtonAddOutline from "./Outline";
+import IconButtonAddSolid from "./Solid";
+
+const IconButtonAdd = {
+  Solid: IconButtonAddSolid,
+  Outline: IconButtonAddOutline,
+};
+
+export default IconButtonAdd;

package/src/icon/components/button/index.tsx

@@ -0,0 +1,17 @@
+import IconButtonAdd from "./add";
+import IconButtonClose from "./Close";
+import IconButtonFilter from "./Filter";
+import IconButtonRefresh from "./Refresh";
+import IconButtonRemove from "./remove";
+import IconButtonReset from "./Reset";
+
+const IconButton = {
+  Add: IconButtonAdd,
+  Refresh: IconButtonRefresh,
+  Reset: IconButtonReset,
+  Remove: IconButtonRemove,
+  Close: IconButtonClose,
+  Filter: IconButtonFilter,
+};
+
+export default IconButton;

package/src/icon/components/button/remove/Outline.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledIconCommon from "../../../styles/styled/common";
+import IconOutline from "../../../svg/button/remove-outline.svg";
+
+export default function IconButtonRemoveOutline({
+  className,
+  size = 24,
+}: Partial<{
+  className: string;
+  size: number;
+}>) {
+  return (
+    <StyledIconCommon.figure
+      className={clsx("icon-button icon-button-remove", className)}
+      $width={size || 24}
+      $height={size || 24}
+    >
+      <IconOutline viewBox="0 0 24 24" width={size} height={size} />
+    </StyledIconCommon.figure>
+  );
+}

package/src/icon/components/button/remove/Solid.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledIconCommon from "../../../styles/styled/common";
+import IconSolid from "../../../svg/button/remove-solid.svg";
+
+export default function IconButtonRemoveSolid({
+  className,
+  size = 24,
+}: Partial<{
+  className: string;
+  size: number;
+}>) {
+  return (
+    <StyledIconCommon.figure
+      className={clsx("icon-button icon-button-remove", className)}
+      $width={size || 24}
+      $height={size || 24}
+    >
+      <IconSolid viewBox="0 0 24 24" width={size} height={size} />
+    </StyledIconCommon.figure>
+  );
+}

package/src/icon/components/button/remove/index.tsx

@@ -0,0 +1,9 @@
+import IconButtonRemoveOutline from "./Outline";
+import IconButtonRemoveSolid from "./Solid";
+
+const IconButtonRemove = {
+  Solid: IconButtonRemoveSolid,
+  Outline: IconButtonRemoveOutline,
+};
+
+export default IconButtonRemove;

package/src/icon/components/cage/Fan.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import Image from "next/image";
+import { useMemo } from "react";
+import assetsUrl from "../../../asset-url";
+import type { FanLayoutType, FanStateType } from "../../../types";
+
+/**
+ * 종합현황 - 사육동 모니터; 사이드팬 아이콘 컴포넌트
+ * @component
+ * @route /dashboard/**
+ * @param {object} props
+ * @param {FanStateType} props.state 사이드팬 상태
+ */
+export default function IconFan({
+  type,
+  state,
+  size,
+}: {
+  type: FanLayoutType;
+  state: FanStateType;
+  size?: number;
+}) {
+  const fanSize = useMemo((): number => {
+    if (typeof size !== "undefined" && !isNaN(Number(size)) && size > 0)
+      return size;
+
+    switch (type) {
+      case "side":
+        return 22;
+      case "tunnel":
+        return 26;
+      default:
+        return 22;
+    }
+  }, [size, type]);
+
+  return (
+    <figure>
+      <Image
+        src={`${assetsUrl}/cage/fan/${type}/${state}.svg`}
+        alt={state}
+        width={fanSize}
+        height={fanSize}
+      />
+    </figure>
+  );
+}

package/src/icon/components/cage/index.tsx

@@ -0,0 +1,7 @@
+import IconFan from "./Fan";
+
+const IconCage = {
+  Fan: IconFan,
+};
+
+export default IconCage;

package/src/icon/components/chart/Control.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledIconChart from "../../styles/styled/chart";
+
+import ZoomInIcon from "../../svg/chart/control/zoom-in.svg";
+import ZoomOutIcon from "../../svg/chart/control/zoom-out.svg";
+import PanLeftIcon from "../../svg/chart/control/pan-left.svg";
+import PanRightIcon from "../../svg/chart/control/pan-right.svg";
+
+/**
+ * 차트 인터렉션 컨트롤 버튼 아이콘
+ * @component
+ * @param
+ */
+export default function IconChartControl({
+  className,
+  role,
+  width = 20,
+  height = 20,
+}: {
+  role: "zoom-in" | "zoom-out" | "pan-left" | "pan-right";
+} & Partial<{
+  className: string;
+  width: number;
+  height: number;
+}>) {
+  return (
+    <StyledIconChart.container
+      className={clsx("icon-chart-control", className)}
+      $width={width}
+      $height={height}
+    >
+      {role === "zoom-in" && <ZoomInIcon viewBox="0 0 20 20" />}
+      {role === "zoom-out" && <ZoomOutIcon viewBox="0 0 20 20" />}
+      {role === "pan-left" && <PanLeftIcon viewBox="0 0 20 20" />}
+      {role === "pan-right" && <PanRightIcon viewBox="0 0 20 20" />}
+    </StyledIconChart.container>
+  );
+}

package/src/icon/components/chart/index.tsx

@@ -0,0 +1,7 @@
+import IconChartControl from "./Control";
+
+const IconChart = {
+  Control: IconChartControl,
+};
+
+export default IconChart;

package/src/icon/components/delta/Delta.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { useMemo } from "react";
+import { clsx } from "clsx";
+
+import DeltaFlatUpIcon from "../../svg/delta/up-flat.svg";
+import DeltaFlatDownIcon from "../../svg/delta/down-flat.svg";
+import DeltaRoundedUpIcon from "../../svg/delta/up-rounded.svg";
+import DeltaRoundedDownIcon from "../../svg/delta/down-rounded.svg";
+import DeltaArrowUpIcon from "../../svg/delta/up-arrow.svg";
+import DeltaArrowDownIcon from "../../svg/delta/down-arrow.svg";
+import StyledIconDelta from "../../styles/styled/delta";
+
+import type { IconDeltaProps } from "../../../types";
+
+/**
+ * 변화량 아이콘 컴포넌트
+ * @component
+ * @param {object} props
+ * @param {"up" | "increase" | "down" | "decrease" | ""} props.direction
+ * @param {string} [props.className]
+ * @param {number} [props.size]
+ * @param {"triangle" | "arrow"} [props.shape]
+ * @param {"flat" | "rounded"} [props.edge]
+ * @param {boolean} [props.disabled]
+ */
+export default function IconDelta({
+  className,
+  width,
+  height,
+  shape,
+  edge,
+  direction,
+  disabled,
+}: IconDeltaProps) {
+  const shapeType = useMemo((): "arrow" | "rounded" | "flat" => {
+    if (shape === "arrow") return "arrow";
+    if (edge && edge === "rounded") return "rounded";
+    return "flat";
+  }, [edge, shape]);
+
+  return (
+    !disabled && (
+      <StyledIconDelta.figure
+        className={clsx("icon-delta", className)}
+        $width={
+          width || shapeType === "arrow" ? 12 : shapeType === "rounded" ? 8 : 13
+        }
+        $height={
+          height || shapeType === "arrow"
+            ? 12
+            : shapeType === "rounded"
+              ? 6
+              : 10
+        }
+      >
+        {["up", "increase"].includes(direction) ? (
+          shapeType === "arrow" ? (
+            <DeltaArrowUpIcon viewBox="0 0 12 12" />
+          ) : shapeType === "rounded" ? (
+            <DeltaRoundedUpIcon viewBox="0 0 8 6" />
+          ) : (
+            <DeltaFlatUpIcon viewBox="0 0 13 10" />
+          )
+        ) : ["down", "decrease"].includes(direction) ? (
+          shapeType === "arrow" ? (
+            <DeltaArrowDownIcon viewBox="0 0 12 12" />
+          ) : shapeType === "rounded" ? (
+            <DeltaRoundedDownIcon viewBox="0 0 8 6" />
+          ) : (
+            <DeltaFlatDownIcon viewBox="0 0 13 10" />
+          )
+        ) : (
+          <figcaption>-</figcaption>
+        )}
+      </StyledIconDelta.figure>
+    )
+  );
+}

package/src/icon/components/delta/index.tsx

@@ -0,0 +1,3 @@
+import IconDelta from "./Delta";
+
+export default IconDelta;

package/src/icon/components/health-score/HealthScore.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import Image from "next/image";
+import { useMemo } from "react";
+import assetsUrl from "../../../asset-url";
+
+/**
+ * 건강도 아이콘 컴포넌트
+ * @component
+ * @param {object} props
+ * @param {boolean} props.isFlockExist 활성화 계군 존재여부
+ * @param {number|""} props.healthScore 건강도 값
+ */
+export default function IconHealthScore({
+  size = 45,
+  isFlockExist,
+  healthScore,
+}: {
+  size?: number;
+  isFlockExist: boolean;
+  healthScore: number | "";
+}) {
+  const iconName = useMemo(() => {
+    if (typeof healthScore === "undefined" || !isFlockExist) return "empty";
+
+    if (isNaN(Number(healthScore)) || healthScore === "") return "gray";
+
+    if (healthScore < 25) return "red";
+    else if (25 <= healthScore && healthScore < 50) return "yellow";
+    else if (50 <= healthScore && healthScore < 75) return "green";
+    else if (75 <= healthScore) return "blue";
+
+    return "gray";
+  }, [healthScore, isFlockExist]);
+
+  return (
+    <figure>
+      <Image
+        src={`${assetsUrl}/img/health-score/${iconName}.svg`}
+        alt="건강"
+        width={size}
+        height={size}
+      />
+    </figure>
+  );
+}

package/src/icon/components/health-score/index.tsx

@@ -0,0 +1,3 @@
+import IconHealthScore from "./HealthScore";
+
+export default IconHealthScore;

package/src/icon/components/input/Checkbox.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledIconInput from "../../styles/styled/input";
+import Image from "next/image";
+import assetUrl from "../../../asset-url";
+
+export default function IconCheckbox({
+  checked,
+  disabled,
+  size = 20,
+}: {
+  checked: boolean;
+  disabled: boolean;
+  size?: number;
+}) {
+  return (
+    <StyledIconInput.checkbox
+      className={clsx("input-icon input-icon-check", { checked, disabled })}
+      $size={size}
+    >
+      <div className="icon-wrapper">
+        <Image
+          src={`${assetUrl}/img/icon/checkbox-check.svg`}
+          // width={10}
+          // height={8}
+          alt="checked"
+          fill={true}
+        />
+      </div>
+    </StyledIconInput.checkbox>
+  );
+}

package/src/icon/components/input/Radio.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import StyledIconInput from "../../styles/styled/input";
+
+export default function IconRadio({
+  value,
+  size = 20,
+}: {
+  value: string | number;
+  size?: number;
+}) {
+  return (
+    <StyledIconInput.radio className="input-icon input-icon-radio" $size={size}>
+      <span>{value}</span>
+    </StyledIconInput.radio>
+  );
+}

package/src/icon/components/input/Search.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import SearchIcon from "../../svg/input/search.svg";
+import StyledIconInput from "../../styles/styled/input";
+
+export default function IconSearch() {
+  return (
+    <StyledIconInput.container className="input-icon input-icon-search">
+      <SearchIcon viewBox="0 0 12 12" width={12} height={12} />
+    </StyledIconInput.container>
+  );
+}

package/src/icon/components/input/index.tsx

@@ -0,0 +1,11 @@
+import IconCheckbox from "./Checkbox";
+import IconRadio from "./Radio";
+import IconSearch from "./Search";
+
+const IconInput = {
+  Checkbox: IconCheckbox,
+  Radio: IconRadio,
+  Search: IconSearch,
+};
+
+export default IconInput;

package/src/icon/components/nav/common/Farm.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import StyledIconCommon from "../../../styles/styled/common";
+import FarmIcon from "../../../svg/nav/farm.svg";
+
+export default function IconNavFarm() {
+  return (
+    <StyledIconCommon.figure className="icon-nav" $width={24} $height={19}>
+      <FarmIcon viewBox="0 0 24 19" />
+    </StyledIconCommon.figure>
+  );
+}

package/src/icon/components/nav/factory-service/CCTV.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import StyledIconCommon from "../../../styles/styled/common";
+import CCTVIcon from "../../../svg/nav/factory-service/cctv.svg";
+
+export default function IconNavCctv() {
+  return (
+    <StyledIconCommon.figure className="icon-nav" $width={24} $height={25}>
+      <CCTVIcon viewBox="0 0 24 25" />
+    </StyledIconCommon.figure>
+  );
+}

package/src/icon/components/nav/factory-service/Dashboard.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import StyledIconCommon from "../../../styles/styled/common";
+import DashboardIcon from "../../../svg/nav/factory-service/dashboard.svg";
+
+export default function IconNavFactoryDashboard() {
+  return (
+    <StyledIconCommon.figure className="icon-nav" $width={20} $height={19}>
+      <DashboardIcon viewBox="0 0 20 19" />
+    </StyledIconCommon.figure>
+  );
+}

package/src/icon/components/nav/factory-service/Home.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import StyledIconCommon from "../../../styles/styled/common";
+import HomeIcon from "../../../svg/nav/factory-service/home.svg";
+
+export default function IconNavHome() {
+  return (
+    <StyledIconCommon.figure className="icon-nav" $width={20} $height={17}>
+      <HomeIcon viewBox="0 0 20 17" />
+    </StyledIconCommon.figure>
+  );
+}

package/src/icon/components/nav/factory-service/Message.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import StyledIconCommon from "../../../styles/styled/common";
+import MessageIcon from "../../../svg/nav/factory-service/message.svg";
+
+export default function IconNavMessage() {
+  return (
+    <StyledIconCommon.figure className="icon-nav" $width={24} $height={25}>
+      <MessageIcon viewBox="0 0 24 25" />
+    </StyledIconCommon.figure>
+  );
+}