@uniai-fe/ui-legacy 0.1.1

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

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

package/src/icon/components/nav/farm-service/Analysis.tsx

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

package/src/icon/components/nav/farm-service/Control.tsx

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

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

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

package/src/icon/components/nav/farm-service/Eggs.tsx

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

package/src/icon/components/nav/farm-service/Feeding.tsx

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

package/src/icon/components/nav/farm-service/Feeds.tsx

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

package/src/icon/components/nav/farm-service/Flock.tsx

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

package/src/icon/components/nav/farm-service/Medicine.tsx

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

package/src/icon/components/nav/farm-service/Summary.tsx

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

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

@@ -0,0 +1,44 @@
+import IconNavFarm from "./common/Farm";
+import IconNavAnalysis from "./farm-service/Analysis";
+import IconNavControl from "./farm-service/Control";
+import IconNavDashboard from "./farm-service/Dashboard";
+import IconNavEggs from "./farm-service/Eggs";
+import IconNavFeeding from "./farm-service/Feeding";
+import IconNavFeeds from "./farm-service/Feeds";
+import IconNavFlock from "./farm-service/Flock";
+import IconNavMedicine from "./farm-service/Medicine";
+import IconNavSummary from "./farm-service/Summary";
+import IconNavFactoryDashboard from "./factory-service/Dashboard";
+import IconNavHome from "./factory-service/Home";
+import IconNavMessage from "./factory-service/Message";
+import IconNavProductivity from "./factory-service/Productivity";
+import IconNavCctv from "./factory-service/CCTV";
+
+const FarmService = {
+  Summary: IconNavSummary,
+  Dashboard: IconNavDashboard,
+  Analysis: IconNavAnalysis,
+  Feeding: IconNavFeeding,
+  Control: IconNavControl,
+  Eggs: IconNavEggs,
+  Feeds: IconNavFeeds,
+  Medicine: IconNavMedicine,
+  Flock: IconNavFlock,
+  Farm: IconNavFarm,
+};
+
+const FactoryService = {
+  Dashboard: IconNavFactoryDashboard,
+  Home: IconNavHome,
+  Farm: IconNavFarm,
+  Productivity: IconNavProductivity,
+  Message: IconNavMessage,
+  CCTV: IconNavCctv,
+};
+
+const IconNav = {
+  FarmService,
+  FactoryService,
+};
+
+export default IconNav;

package/src/icon/components/page-header/Check.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import StyledIconPageHeader from "../../styles/styled/page-header";
+import CheckIcon from "../../svg/page-header/check.svg";
+
+export default function IconCheck() {
+  return (
+    <StyledIconPageHeader.check>
+      <CheckIcon />
+    </StyledIconPageHeader.check>
+  );
+}

package/src/icon/components/page-header/index.tsx

@@ -0,0 +1,5 @@
+import IconCheck from "./Check";
+
+const IconPageHeader = { Check: IconCheck };
+
+export default IconPageHeader;

package/src/icon/components/tab-menu/Graph.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import StyledIconCommon from "../../styles/styled/common";
+import GraphIcon from "../../svg/tab-menu/graph.svg";
+
+export default function IconTabMenuGraph() {
+  return (
+    <StyledIconCommon.figure $width={12} $height={14}>
+      <GraphIcon viewBox="0 0 12 14" width={12} height={14} />
+    </StyledIconCommon.figure>
+  );
+}

package/src/icon/components/tab-menu/Table.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import StyledIconCommon from "../../styles/styled/common";
+import TableIcon from "../../svg/tab-menu/table.svg";
+
+export default function IconTabMenuTable() {
+  return (
+    <StyledIconCommon.figure className="icon-tab-menu" $width={16} $height={12}>
+      <TableIcon viewBox="0 0 16 12" width={16} height={12} />
+    </StyledIconCommon.figure>
+  );
+}

package/src/icon/components/tab-menu/index.tsx

@@ -0,0 +1,9 @@
+import IconTabMenuGraph from "./Graph";
+import IconTabMenuTable from "./Table";
+
+const IconTabMenu = {
+  Graph: IconTabMenuGraph,
+  Table: IconTabMenuTable,
+};
+
+export default IconTabMenu;

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

@@ -0,0 +1,9 @@
+import IconTablePagination from "./pagination";
+import IconTableSort from "./sort";
+
+const IconTable = {
+  Pagination: IconTablePagination,
+  Sort: IconTableSort,
+};
+
+export default IconTable;

package/src/icon/components/table/pagination/First.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledIconTable from "../../../styles/styled/table";
+import FirstIcon from "../../../svg/table/pagination/first.svg";
+
+export default function IconTablePagerFirst({
+  className,
+  size = 40,
+}: Partial<{ className: string; size: number }>) {
+  return (
+    <StyledIconTable.pagination
+      className={clsx("icon-table icon-table-pager-first", className)}
+    >
+      <FirstIcon viewBox="0 0 40 40" width={size} height={size} />
+    </StyledIconTable.pagination>
+  );
+}

package/src/icon/components/table/pagination/Last.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledIconTable from "../../../styles/styled/table";
+import LastIcon from "../../../svg/table/pagination/last.svg";
+
+export default function IconTablePagerLast({
+  className,
+  size = 40,
+}: Partial<{ className: string; size: number }>) {
+  return (
+    <StyledIconTable.pagination
+      className={clsx("icon-table icon-table-pager-last", className)}
+    >
+      <LastIcon viewBox="0 0 40 40" width={size} height={size} />
+    </StyledIconTable.pagination>
+  );
+}

package/src/icon/components/table/pagination/Next.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledIconTable from "../../../styles/styled/table";
+import NextIcon from "../../../svg/table/pagination/next.svg";
+
+export default function IconTablePagerNext({
+  className,
+  size = 40,
+}: Partial<{ className: string; size: number }>) {
+  return (
+    <StyledIconTable.pagination
+      className={clsx("icon-table icon-table-pager-next", className)}
+    >
+      <NextIcon viewBox="0 0 40 40" width={size} height={size} />
+    </StyledIconTable.pagination>
+  );
+}

package/src/icon/components/table/pagination/Prev.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledIconTable from "../../../styles/styled/table";
+import PrevIcon from "../../../svg/table/pagination/prev.svg";
+
+export default function IconTablePagerPrev({
+  className,
+  size = 40,
+}: Partial<{ className: string; size: number }>) {
+  return (
+    <StyledIconTable.pagination
+      className={clsx("icon-table icon-table-pager-prev", className)}
+    >
+      <PrevIcon viewBox="0 0 40 40" width={size} height={size} />
+    </StyledIconTable.pagination>
+  );
+}

package/src/icon/components/table/pagination/index.tsx

@@ -0,0 +1,13 @@
+import IconTablePagerFirst from "./First";
+import IconTablePagerLast from "./Last";
+import IconTablePagerNext from "./Next";
+import IconTablePagerPrev from "./Prev";
+
+const IconTablePagination = {
+  First: IconTablePagerFirst,
+  Last: IconTablePagerLast,
+  Next: IconTablePagerNext,
+  Prev: IconTablePagerPrev,
+};
+
+export default IconTablePagination;

package/src/icon/components/table/sort/Asc.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import StyledIconTable from "../../../styles/styled/table";
+import AscIcon from "../../../svg/table/sort/asc.svg";
+
+export default function IconTableSortAsc() {
+  return (
+    <StyledIconTable.sort>
+      <AscIcon viewBox="0 0 20 20" width={20} height={20} />
+    </StyledIconTable.sort>
+  );
+}

package/src/icon/components/table/sort/Common.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import StyledIconTable from "../../../styles/styled/table";
+import SortIcon from "../../../svg/table/sort/common.svg";
+
+export default function IconTableSortCommon() {
+  return (
+    <StyledIconTable.sort>
+      <SortIcon viewBox="0 0 20 20" width={20} height={20} />
+    </StyledIconTable.sort>
+  );
+}

package/src/icon/components/table/sort/Desc.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import StyledIconTable from "../../../styles/styled/table";
+import DescIcon from "../../../svg/table/sort/desc.svg";
+
+export default function IconTableSortDesc() {
+  return (
+    <StyledIconTable.sort>
+      <DescIcon viewBox="0 0 20 20" width={20} height={20} />
+    </StyledIconTable.sort>
+  );
+}

package/src/icon/components/table/sort/index.tsx

@@ -0,0 +1,11 @@
+import IconTableSortAsc from "./Asc";
+import IconTableSortCommon from "./Common";
+import IconTableSortDesc from "./Desc";
+
+const IconTableSort = {
+  Asc: IconTableSortAsc,
+  Desc: IconTableSortDesc,
+  Common: IconTableSortCommon,
+};
+
+export default IconTableSort;

package/src/icon/components/tooltip/Outline.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import IconOutline from "../../svg/tooltip/outline.svg";
+
+export default function IconTooltipOutline() {
+  return <IconOutline viewBox="0 0 24 24" />;
+}

package/src/icon/components/tooltip/Solid.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import IconSolid from "../../svg/tooltip/solid.svg";
+
+export default function IconTooltipSolid() {
+  return <IconSolid viewBox="0 0 24 24" />;
+}

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

@@ -0,0 +1,9 @@
+import IconTooltipOutline from "./Outline";
+import IconTooltipSolid from "./Solid";
+
+const IconTooltip = {
+  Solid: IconTooltipSolid,
+  Outline: IconTooltipOutline,
+};
+
+export default IconTooltip;

package/src/icon/icon.scss

@@ -0,0 +1,5 @@
+@use "./styles/scss/arrow.scss";
+@use "./styles/scss/input.scss";
+@use "./styles/scss/table.scss";
+@use "./styles/scss/chart.scss";
+@use "./styles/scss/page-header.scss";

package/src/icon/index.tsx

@@ -0,0 +1,31 @@
+import IconArrow from "./components/arrow";
+import IconDelta from "./components/delta";
+import IconNav from "./components/nav";
+import IconHealthScore from "./components/health-score";
+import IconCage from "./components/cage";
+import IconPageHeader from "./components/page-header";
+import IconTooltip from "./components/tooltip";
+import IconAlternate from "./components/alternate";
+import IconButton from "./components/button";
+import IconTable from "./components/table";
+import IconInput from "./components/input";
+import IconTabMenu from "./components/tab-menu";
+import IconChart from "./components/chart";
+
+const Icon = {
+  Arrow: IconArrow,
+  Delta: IconDelta,
+  Nav: IconNav,
+  HealthScore: IconHealthScore,
+  Cage: IconCage,
+  PageHeader: IconPageHeader,
+  Tooltip: IconTooltip,
+  Alternate: IconAlternate,
+  Button: IconButton,
+  Table: IconTable,
+  Input: IconInput,
+  TabMenu: IconTabMenu,
+  Chart: IconChart,
+};
+
+export default Icon;

package/src/icon/styled.tsx

@@ -0,0 +1,17 @@
+import StyledIconChart from "./styles/styled/chart";
+import StyledIconCommon from "./styles/styled/common";
+import StyledIconDelta from "./styles/styled/delta";
+import StyledIconInput from "./styles/styled/input";
+import StyledIconPageHeader from "./styles/styled/page-header";
+import StyledIconTable from "./styles/styled/table";
+
+const StyledIcon = {
+  common: StyledIconCommon,
+  delta: StyledIconDelta,
+  pageHeader: StyledIconPageHeader,
+  table: StyledIconTable,
+  input: StyledIconInput,
+  chart: StyledIconChart,
+};
+
+export default StyledIcon;

package/src/icon/styles/scss/arrow.scss

@@ -0,0 +1,6 @@
+:root {
+  --icon-arrow-color: var(--color-blue-gray-500);
+  &.dark-mode {
+    --icon-arrow-color: var(--color-blue-gray-400);
+  }
+}

package/src/icon/styles/scss/chart.scss

@@ -0,0 +1,3 @@
+:root {
+  --icon-chart-control-color-default: var(--color_40);
+}

package/src/icon/styles/scss/input.scss

@@ -0,0 +1,11 @@
+:root {
+  --icon-input-border-width: 0.2rem;
+
+  --icon-input-check-radius: 0.4rem;
+  --icon-input-check-bg: var(--color_0);
+  --icon-input-check-base: var(--color-blue-gray-400);
+  --icon-input-check-selected: var(--theme-blue-main);
+
+  --icon-input-radio-point: 1rem;
+  --icon-input-radio-gap: 0.5rem;
+}

package/src/icon/styles/scss/page-header.scss

@@ -0,0 +1,6 @@
+:root {
+  --icon-page-header-check-color: var(--color-blue-500);
+  &.dark-mode {
+    --icon-page-header-check-color: var(--color-light-blue-600);
+  }
+}

package/src/icon/styles/scss/table.scss

@@ -0,0 +1,6 @@
+:root {
+  --icon-table-pagination-color: var(--color-blue-gray-600);
+  &.dark-mode {
+    --icon-table-pagination-color: #e5e7eb;
+  }
+}

package/src/icon/styles/styled/arrow.ts

@@ -0,0 +1,18 @@
+"use client";
+
+import { styled } from "styled-components";
+import StyledIconCommon from "./common";
+
+const container = styled(StyledIconCommon.figure)`
+  margin-left: auto;
+  padding-left: 1rem;
+  svg path {
+    fill: var(--icon-arrow-color);
+  }
+`;
+
+const StyledIconArrow = {
+  container,
+};
+
+export default StyledIconArrow;

package/src/icon/styles/styled/chart.ts

@@ -0,0 +1,17 @@
+"use client";
+
+import { styled } from "styled-components";
+import StyledIconCommon from "./common";
+
+// 인터랙션에 따른 스타일 변화는, 상위 요소인 button에서 처리
+const container = styled(StyledIconCommon.figure)`
+  svg path {
+    fill: var(--icon-chart-control-color-default);
+  }
+`;
+
+const StyledIconChart = {
+  container,
+};
+
+export default StyledIconChart;

package/src/icon/styles/styled/common.ts

@@ -0,0 +1,27 @@
+"use client";
+
+import { styled } from "styled-components";
+import { styleBaseSize } from "@uniai-fe/util-functions";
+
+type StyledFigureProps = Partial<{
+  $width: number | string;
+  $height: number | string;
+}>;
+const figure = styled.figure<StyledFigureProps>`
+  width: ${({ $width }) => styleBaseSize("rem", $width, "fit-content")};
+  height: ${({ $height }) => styleBaseSize("rem", $height, "fit-content")};
+  font-size: 0;
+
+  user-select: none;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+const StyledIconCommon = {
+  figure,
+};
+
+export default StyledIconCommon;

package/src/icon/styles/styled/delta.ts

@@ -0,0 +1,25 @@
+"use client";
+
+import { styled } from "styled-components";
+import StyledIconCommon from "./common";
+
+const figure = styled(StyledIconCommon.figure)`
+  svg {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+  figcaption {
+    display: flex;
+    font-size: 1.6rem;
+    color: var(--color_60);
+    line-height: 1.4rem;
+    font-weight: 700;
+  }
+`;
+
+const StyledIconDelta = {
+  figure,
+};
+
+export default StyledIconDelta;