@uniai-fe/ui-legacy 0.1.6 → 0.1.7

package/src/chart/index.tsx

@@ -1,17 +0,0 @@
-import ChartContents from "./components/Contents";
-import ChartControl from "./components/control";
-import ChartActivePieSector from "./components/custom/ActivePieSector";
-import ChartGraph from "./components/graphs";
-import ChartTick from "./components/ticks";
-
-const Chart = {
-  ContentsContainer: ChartContents,
-  Graph: ChartGraph,
-  Tick: ChartTick,
-  Control: ChartControl,
-  Custom: {
-    ActivePieSector: ChartActivePieSector,
-  },
-};
-
-export default Chart;

package/src/chart/styled.tsx

@@ -1,3 +0,0 @@
-const StyledChart = {};
-
-export default StyledChart;

package/src/chart/styles/scss/arc-gauge.scss

@@ -1,11 +0,0 @@
-:root {
-  --chart-arc-gauge-text-color: var(--color_90);
-  --chart-arc-gauge-text-weight: 600;
-
-  --chart-arc-gauge-value-size: 46px;
-  --chart-arc-gauge-unit-size: 30px;
-
-  --chart-arc-gauge-point-size: 22px;
-  --chart-arc-gauge-point-color: var(--color_90);
-  --chart-arc-gauge-point-border-width: 5px;
-}

package/src/chart/styles/scss/arc-meter.scss

@@ -1,6 +0,0 @@
-:root {
-  --chart-arc-meter-text-weight: 600;
-
-  --chart-arc-meter-text-value-size: 46px;
-  --chart-arc-meter-text-unit-size: 30px;
-}

package/src/chart/styles/scss/control.scss

@@ -1,34 +0,0 @@
-:root {
-  --chart-control-button-margin: 0.4rem;
-}
-// .charts-zoom-pan-control-container {
-//   display: flex;
-//   align-items: center;
-//   .chart-zoom-pan-button {
-//     margin-left: 6px;
-//     svg {
-//       rect {
-//         stroke: var(--color_40);
-//         transition: stroke 0.12s;
-//       }
-//       path {
-//         fill: var(--color_40);
-//         transition: fill 0.12s;
-//       }
-//     }
-//     &:not([disabled]):hover {
-//       svg {
-//         rect {
-//           stroke: var(--color_60);
-//         }
-//         path {
-//           fill: var(--color_60);
-//         }
-//       }
-//     }
-//     &[disabled] {
-//       opacity: 0.5;
-//       cursor: default;
-//     }
-//   }
-// }

package/src/chart/styles/scss/graph.scss

@@ -1,3 +0,0 @@
-:root {
-  --chart-data-line-width: 1.4px;
-}

package/src/chart/styles/scss/legend.scss

@@ -1,35 +0,0 @@
-:root {
-  --chart-legend-gap: 10px;
-
-  --chart-legend-text-size: 12px;
-  --chart-legend-text-color: var(--color_90);
-  --chart-legend-text-weight: 400;
-
-  --chart-legend-point-margin: 3px;
-  --chart-legend-point-size: 10px;
-}
-
-.recharts-legend-wrapper {
-  width: 100% !important;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  .recharts-default-legend {
-    display: flex;
-    align-items: center;
-    .recharts-legend-item {
-      margin-right: 0 !important;
-      margin-left: var(--chart-legend-gap);
-      display: flex !important;
-      align-items: center;
-      user-select: none;
-    }
-    .recharts-legend-item-text {
-      font-size: var(--chart-legend-text-size);
-      font-weight: 400;
-      color: var(--color_90) !important;
-      user-select: none;
-      cursor: pointer;
-    }
-  }
-}

package/src/chart/styles/scss/level.color.scss

@@ -1,7 +0,0 @@
-:root {
-  --chart-level-color-0: var(--color_20);
-  --chart-level-color-1: var(--red);
-  --chart-level-color-2: var(--orange);
-  --chart-level-color-3: var(--green);
-  --chart-level-color-4: var(--color-light-blue-600);
-}

package/src/chart/styles/scss/tick.scss

@@ -1,48 +0,0 @@
-:root {
-  --chart-tick-text-size: 1.1rem;
-  --chart-tick-text-weight: 500;
-  --chart-tick-text-color: var(--color_50);
-
-  --chart-tick-line-color: var(--color_20);
-
-  --chart-axis-label-color: var(--color_40);
-}
-
-.recharts-cartesian-axis-line {
-  stroke: var(--chart-tick-line-color);
-}
-.recharts-cartesian-axis-tick-line {
-  stroke: var(--chart-tick-line-color);
-}
-
-.recharts-cartesian-grid-horizontal,
-.recharts-cartesian-grid-vertical {
-  line {
-    stroke: var(--chart-tick-line-color);
-  }
-}
-
-.recharts-text {
-  tspan {
-    fill: var(--chart-tick-text-color);
-    font-size: var(--chart-tick-text-size);
-    font-weight: var(--chart-tick-text-weight);
-  }
-}
-
-.recharts-label {
-  --chart-tick-text-weight: 400;
-  tspan {
-    fill: var(--chart-axis-label-color);
-  }
-}
-
-.recharts-yAxis {
-  --chart-tick-text-weight: 400;
-}
-
-.recharts-layer {
-  text {
-    user-select: none;
-  }
-}

package/src/chart/styles/scss/tooltip.scss

@@ -1,70 +0,0 @@
-:root {
-  --chart-tooltip-cursor-line-color: #838588;
-
-  --chart-tooltip-point-size: 0.6rem;
-  --chart-tooltip-point-border-color: #fff;
-
-  --chart-tooltip-box-radius: 0.6rem;
-  --chart-tooltip-box-color: var(--color-blue-gray-700);
-  --chart-tooltip-box-point-margin: 0.5rem;
-  --chart-tooltip-box-legend-margin: 0.5rem;
-  --chart-tooltip-box-legend-text-size: 1.4rem;
-  --chart-tooltip-box-legend-text-color: var(--color_70);
-  --chart-tooltip-box-legend-text-weight: 500;
-  --chart-tooltip-box-legend-line-height: 1em;
-
-  --chart-tooltip-text-color: var(--color_70);
-
-  &.dark-mode {
-    --chart-tooltip-cursor-line-color: #dbdbdb;
-
-    --chart-tooltip-box-color: var(--color_theme_dark_30);
-  }
-}
-
-.recharts-tooltip-wrapper {
-  z-index: 100;
-  user-select: none;
-  pointer-events: none;
-  & > * {
-    user-select: none;
-    pointer-events: none;
-  }
-}
-
-.recharts-tooltip-cursor {
-  stroke: var(--chart-tooltip-cursor-line-color);
-}
-.recharts-dot {
-  stroke: var(--chart-tooltip-point-border-color);
-}
-.recharts-tooltip-label {
-  display: none;
-}
-.recharts-tooltip-dot {
-  width: var(--chart-tooltip-point-size);
-  height: var(--chart-tooltip-point-size);
-  margin-right: var(--chart-tooltip-box-point-margin);
-  border-radius: 50%;
-  background: var(--color_60);
-}
-.recharts-tooltip-item {
-  margin: var(--chart-tooltip-box-legend-margin) 0;
-  display: flex;
-  align-items: center;
-  span {
-    font-size: var(--chart-tooltip-box-legend-text-size);
-    color: var(--chart-tooltip-box-legend-text-color);
-    line-height: var(--chart-tooltip-box-legend-line-height);
-    font-weight: var(--chart-tooltip-box-legend-text-weight);
-  }
-}
-
-.charts-custom-tooltip-title {
-  font-weight: var(--chart-tooltip-box-legend-text-weight);
-}
-
-.recharts-default-tooltip {
-  padding: 0 10px !important;
-  border-radius: var(--chart-tooltip-box-radius);
-}

package/src/chart/styles/styled/arc-gauge.ts

@@ -1,65 +0,0 @@
-"use client";
-
-import { styled } from "styled-components";
-
-const container = styled.div`
-  width: 100%;
-  height: fit-content;
-  position: relative;
-  z-index: 0;
-`;
-const track = styled.div`
-  width: fit-content;
-  height: fit-content;
-  font-size: 0;
-  margin: 0 auto;
-  position: relative;
-`;
-const point = styled.div<{ $level: number; $degree: number }>`
-  width: calc(
-    100% + var(--chart-arc-gauge-point-size) -
-      (var(--chart-arc-gauge-point-border-width) * 2)
-  );
-  height: var(--chart-arc-gauge-point-size);
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translate(-50%, calc(var(--chart-arc-gauge-point-size) / 2))
-    rotate(${({ $degree }) => $degree}deg);
-
-  &:before {
-    content: "게이지 포인트";
-    display: block;
-    font-size: 0;
-    width: var(--chart-arc-gauge-point-size);
-    height: var(--chart-arc-gauge-point-size);
-    border-radius: 50%;
-    border: var(--chart-arc-gauge-point-border-width) solid
-      var(--chart-level-color-${({ $level }) => $level});
-    background-color: #fff;
-  }
-`;
-const value = styled.div`
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  color: var(--chart-arc-gauge-text-color);
-  strong {
-    font-size: var(--chart-arc-gauge-value-size);
-    font-weight: var(--chart-arc-gauge-text-weight);
-  }
-  span {
-    font-size: var(--chart-arc-gauge-unit-size);
-    font-weight: var(--chart-arc-gauge-text-weight);
-  }
-`;
-
-const StyledArcGauge = {
-  container,
-  track,
-  point,
-  value,
-};
-
-export default StyledArcGauge;

package/src/chart/styles/styled/arc-meter.ts

@@ -1,42 +0,0 @@
-"use client";
-
-import { styled } from "styled-components";
-
-const container = styled.div<{ $height?: number }>`
-  width: 100%;
-  height: ${({ $height }) => ($height ? `${$height}px` : "100%")};
-  position: relative;
-  display: flex;
-  justify-content: center;
-
-  svg {
-    overflow: visible;
-  }
-`;
-
-const text = styled.div<{ $color: string }>`
-  color: ${({ $color }) => $color};
-
-  display: flex;
-  align-items: baseline;
-
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-
-  strong {
-    font-size: var(--chart-arc-meter-text-value-size);
-    font-weight: var(--chart-arc-meter-text-weight);
-  }
-  span {
-    font-size: var(--chart-arc-meter-text-unit-size);
-    font-weight: var(--chart-arc-meter-text-weight);
-  }
-`;
-const StyledArcMeter = {
-  container,
-  text,
-};
-
-export default StyledArcMeter;

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

@@ -1,14 +0,0 @@
-"use client";
-
-import { styled } from "styled-components";
-
-const container = styled.figure`
-  width: 100%;
-  height: 100%;
-`;
-
-const StyledChartCommon = {
-  container,
-};
-
-export default StyledChartCommon;

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

@@ -1,31 +0,0 @@
-"use client";
-
-import styled from "styled-components";
-
-const button = styled.button`
-  width: fit-content;
-  height: fit-content;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  &[disabled] {
-    opacity: 0.4;
-  }
-`;
-
-const container = styled.div`
-  width: fit-content;
-  height: fit-content;
-  display: flex;
-  align-items: center;
-  ${button} {
-    margin: 0 var(--chart-control-button-margin);
-  }
-`;
-
-const StyledChartControl = {
-  container,
-  button,
-};
-
-export default StyledChartControl;

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

@@ -1,11 +0,0 @@
-"use client";
-
-import { styled } from "styled-components";
-
-const container = styled.div``;
-
-const StyledChartLegend = {
-  container,
-};
-
-export default StyledChartLegend;

package/src/chart/svg/gauge-track.min.svg

@@ -1 +0,0 @@
-<svg width="190" height="95" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><path fill-rule="evenodd" clip-rule="evenodd" d="M30.054 32.816a4.98 4.98 0 01.491 7.026 85.32 85.32 0 00-20.604 48.54 4.98 4.98 0 01-9.922-.869 95.282 95.282 0 0123.009-54.206 4.98 4.98 0 017.026-.49z" fill="#E22A21"/><path fill-rule="evenodd" clip-rule="evenodd" d="M30.054 32.816a4.98 4.98 0 01.491 7.026 85.32 85.32 0 00-20.604 48.54 4.98 4.98 0 01-9.922-.869 95.282 95.282 0 0123.009-54.206 4.98 4.98 0 017.026-.49z" fill="#fff" fill-opacity=".2"/><path fill-rule="evenodd" clip-rule="evenodd" d="M93.607 5.39a4.98 4.98 0 01-4.62 5.314 85.321 85.321 0 00-48.893 19.754 4.98 4.98 0 01-6.402-7.63 95.281 95.281 0 0154.6-22.06 4.98 4.98 0 015.315 4.621z" fill="#F86800"/><path fill-rule="evenodd" clip-rule="evenodd" d="M93.607 5.39a4.98 4.98 0 01-4.62 5.314 85.321 85.321 0 00-48.893 19.754 4.98 4.98 0 01-6.402-7.63 95.281 95.281 0 0154.6-22.06 4.98 4.98 0 015.315 4.621z" fill="#fff" fill-opacity=".2"/><path fill-rule="evenodd" clip-rule="evenodd" d="M97.847 5.426A4.98 4.98 0 01103.242.9a95.288 95.288 0 0154.207 23.01 4.981 4.981 0 01-6.535 7.517 85.323 85.323 0 00-48.54-20.604 4.98 4.98 0 01-4.527-5.396z" fill="#00AA02"/><path fill-rule="evenodd" clip-rule="evenodd" d="M97.847 5.426A4.98 4.98 0 01103.242.9a95.288 95.288 0 0154.207 23.01 4.981 4.981 0 01-6.535 7.517 85.323 85.323 0 00-48.54-20.604 4.98 4.98 0 01-4.527-5.396z" fill="#fff" fill-opacity=".2"/><path fill-rule="evenodd" clip-rule="evenodd" d="M160.911 33.959a4.981 4.981 0 017.017.613 95.283 95.283 0 0122.059 54.6 4.98 4.98 0 11-9.936.695 85.32 85.32 0 00-19.753-48.892 4.98 4.98 0 01.613-7.017z" fill="#007CDB"/><path fill-rule="evenodd" clip-rule="evenodd" d="M160.911 33.959a4.981 4.981 0 017.017.613 95.283 95.283 0 0122.059 54.6 4.98 4.98 0 11-9.936.695 85.32 85.32 0 00-19.753-48.892 4.98 4.98 0 01.613-7.016z" fill="#fff" fill-opacity=".2"/><path fill-rule="evenodd" clip-rule="evenodd" d="M94.077 18.275c-.329 0-.658.002-.987.006l-.013-.996a75.718 75.718 0 012 0l-.013.996a75.477 75.477 0 00-.987-.006zm4.93.16a75.404 75.404 0 00-1.97-.102l.038-.996a76.48 76.48 0 011.996.105l-.065.994zm-7.889-.102c-.657.026-1.314.06-1.97.103l-.065-.994c.664-.044 1.33-.078 1.996-.105l.04.996zm11.817.464a75.799 75.799 0 00-1.962-.206l.091-.992c.664.06 1.327.13 1.988.209l-.117.989zm-15.753-.206c-.656.06-1.31.128-1.962.206l-.117-.99a76.405 76.405 0 011.988-.208l.09.992zm19.657.772a74.953 74.953 0 00-1.949-.309l.143-.985c.66.095 1.318.2 1.974.312l-.168.982zm-23.575-.309c-.651.095-1.3.198-1.948.309l-.169-.982a76.301 76.301 0 011.974-.313l.143.986zm-3.888.668c-.645.129-1.288.265-1.93.41l-.22-.971a76.43 76.43 0 011.956-.416l.194.977zm31.332.41a74.694 74.694 0 00-1.93-.41l.195-.977c.654.13 1.305.269 1.955.416l-.22.971zm-35.18.461c-.637.162-1.273.332-1.905.51l-.27-.958c.64-.18 1.284-.353 1.93-.517l.245.965zm39.004.51a75.32 75.32 0 00-1.906-.51l.245-.965c.646.164 1.29.336 1.931.517l-.27.959zm-42.8.561c-.629.195-1.254.398-1.877.61l-.32-.944a76.58 76.58 0 011.9-.617l.296.951zm46.567.61a74.73 74.73 0 00-1.876-.61l.296-.951c.636.197 1.27.403 1.9.618l-.32.943zm-50.303.658c-.617.228-1.231.464-1.842.707l-.37-.925c.62-.247 1.242-.486 1.867-.716l.345.934zM122 23.64c-.61-.243-1.224-.48-1.841-.707l.345-.934c.625.23 1.247.47 1.866.716l-.37.925zm-57.669.755c-.604.26-1.205.527-1.802.803l-.417-.905a76.26 76.26 0 011.826-.813l.393.915zm61.294.803a75.054 75.054 0 00-1.802-.803l.393-.915a76.26 76.26 0 011.826.813l-.417.904zm-64.876.849c-.59.29-1.176.59-1.758.895l-.464-.881a76.57 76.57 0 011.781-.908l.44.894zm68.414.895a76.313 76.313 0 00-1.757-.895l.44-.893c.598.294 1.191.597 1.781.907l-.464.881zm-71.906.942c-.573.32-1.143.65-1.708.986l-.51-.856c.573-.34 1.15-.674 1.731-1l.487.87zm75.349.986a75.622 75.622 0 00-1.709-.986l.487-.87c.581.326 1.158.66 1.731 1l-.509.856zm-78.74 1.03c-.555.351-1.107.71-1.654 1.075l-.553-.828a76.05 76.05 0 011.676-1.089l.532.843zm82.076 1.075a76.943 76.943 0 00-1.654-1.074l.531-.843c.563.356 1.122.719 1.676 1.089l-.553.828zm-85.356 1.117c-.536.38-1.068.766-1.596 1.16l-.596-.798a76.46 76.46 0 011.617-1.175l.575.813zm88.578 1.16c-.528-.394-1.06-.78-1.596-1.16l.575-.813c.543.384 1.082.776 1.617 1.175l-.596.798zm-91.738 1.2c-.516.407-1.028.821-1.534 1.242l-.636-.765c.512-.427 1.03-.846 1.553-1.258l.617.782zm94.836 1.242a74.858 74.858 0 00-1.533-1.241l.616-.782a76.21 76.21 0 011.554 1.258l-.637.765zm-97.87 1.281c-.493.434-.982.874-1.465 1.32l-.677-.73c.49-.454.985-.9 1.486-1.338l.657.748zm100.836 1.32a79.7 79.7 0 00-1.466-1.32l.656-.748c.501.438.996.884 1.486 1.337l-.676.731zM41.496 39.652a75.229 75.229 0 00-1.396 1.396l-.714-.695a78.52 78.52 0 011.415-1.414l.695.713zm105.865.694a71.778 71.778 0 00-.703-.694l.696-.713a88.73 88.73 0 011.414 1.414l-.714.695c-.229-.235-.46-.47-.693-.702zM38.742 42.479c-.447.483-.887.972-1.32 1.466l-.749-.657c.439-.5.885-.995 1.338-1.485l.731.676zm111.99 1.466a74.708 74.708 0 00-1.32-1.466l.732-.676c.452.49.898.985 1.337 1.485l-.749.657zm2.523 3.033a75.839 75.839 0 00-1.242-1.533l.766-.637c.427.513.846 1.03 1.258 1.553l-.782.617zM36.141 45.445c-.421.506-.835 1.017-1.242 1.533l-.782-.617c.412-.522.832-1.04 1.258-1.553l.766.637zm119.474 4.694a73.673 73.673 0 00-1.159-1.596l.798-.596c.399.534.79 1.073 1.175 1.617l-.814.575zM33.698 48.543c-.393.527-.78 1.06-1.16 1.596l-.812-.575c.384-.544.775-1.083 1.174-1.617l.798.596zm124.109 4.876a78.443 78.443 0 00-1.074-1.654l.828-.554c.37.555.733 1.113 1.088 1.677l-.842.531zM31.422 51.765a75.036 75.036 0 00-1.075 1.654l-.842-.531a76.05 76.05 0 011.088-1.677l.829.554zm128.402 5.045a75.89 75.89 0 00-.986-1.709l.856-.51c.341.574.674 1.15.999 1.732l-.869.487zM29.316 55.1a75.15 75.15 0 00-.986 1.709l-.869-.487c.326-.581.659-1.158 1-1.731l.856.51zm132.345 5.2a73.285 73.285 0 00-.896-1.758l.882-.463c.31.59.613 1.183.907 1.78l-.893.441zM27.389 58.543a75.354 75.354 0 00-.896 1.758l-.893-.44c.295-.598.597-1.192.907-1.781l.882.463zm135.924 5.34a74.478 74.478 0 00-.803-1.801l.905-.417c.279.605.55 1.214.813 1.826l-.915.393zM25.644 62.083a75.642 75.642 0 00-.802 1.802l-.915-.393c.263-.612.534-1.221.813-1.826l.904.417zm139.131 5.466a79.953 79.953 0 00-.707-1.842l.925-.369c.247.619.485 1.241.716 1.866l-.934.345zM24.087 65.706c-.244.611-.48 1.225-.707 1.842l-.935-.345c.231-.625.47-1.247.717-1.866l.925.37zm141.956 5.578a72.49 72.49 0 00-.61-1.877l.943-.32c.215.631.42 1.265.618 1.901l-.951.296zM22.721 69.408a75.565 75.565 0 00-.61 1.876l-.95-.296c.197-.636.403-1.27.617-1.9l.943.32zm144.393 5.673a73.238 73.238 0 00-.511-1.906l.959-.27c.181.64.353 1.284.517 1.93l-.965.246zM21.551 73.175a74.87 74.87 0 00-.51 1.906l-.966-.245c.164-.647.337-1.29.518-1.931l.958.27zm146.434 5.754a78.31 78.31 0 00-.41-1.93l.971-.22c.147.65.286 1.301.416 1.955l-.977.195zM20.58 76.999a75.295 75.295 0 00-.41 1.93l-.977-.195c.13-.654.269-1.305.416-1.955l.971.22zm148.073 5.818c-.095-.652-.197-1.301-.309-1.949l.982-.168c.113.656.217 1.314.313 1.974l-.986.143zM19.81 80.868a75.11 75.11 0 00-.308 1.949l-.986-.143c.096-.66.2-1.318.313-1.975l.981.17zm149.307 5.866a75.29 75.29 0 00-.207-1.962l.989-.117c.079.661.148 1.324.209 1.988l-.991.091zM19.244 84.772a75.323 75.323 0 00-.206 1.962l-.992-.09c.061-.665.131-1.328.21-1.989l.988.117zm150.13 5.899a71.647 71.647 0 00-.103-1.97l.994-.065c.044.664.079 1.33.105 1.996l-.996.039zM18.884 88.7a75.389 75.389 0 00-.104 1.97l-.995-.04c.026-.666.061-1.331.105-1.995l.994.065zm150.548 4.929c0-.33-.002-.658-.006-.987l.996-.013c.004.333.007.666.007 1h-.997zm-150.703-.987a75.45 75.45 0 00-.007.987h-.996c0-.334.002-.667.007-1l.996.013z" fill="var(--color_90)" fill-opacity=".2"/></svg>

package/src/chart/utils/getLevel.ts

@@ -1,23 +0,0 @@
-/**
- * 스코어 레벨 추출 (4단계)
- * @param {number | ""} value
- * @param {number} [max] 최대값 (기본값 100)
- */
-export default function getChartLevel(
-  value: number | "",
-  max: number = 100,
-): number {
-  if (value === "") return 0;
-
-  const stepAmount = max / 4;
-  const danger = stepAmount;
-  const warning = stepAmount * 2;
-  const caution = stepAmount * 3;
-
-  if (value < danger) return 1;
-  else if (danger <= value && value < caution) return 2;
-  else if (caution <= value && value < warning) return 3;
-  else if (value >= warning) return 4;
-
-  return 0;
-}

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

@@ -1,40 +0,0 @@
-"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

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

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

@@ -1,46 +0,0 @@
-"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

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

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

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

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

@@ -1,17 +0,0 @@
-"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/svg/chart/control/pan-left.svg

@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="1" y="1" width="18" height="18" rx="3" stroke="#A8B3BD" stroke-width="2"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.41071 5.24418C9.73612 4.91877 10.2637 4.91877 10.5891 5.24418C10.9146 5.5696 10.9146 6.0972 10.5891 6.42262L7.84494 9.16682H14.1667C14.6269 9.16682 15 9.53989 15 10.0001C15 10.4603 14.6269 10.8334 14.1667 10.8334H7.84514L10.5891 13.5774C10.9146 13.9028 10.9146 14.4304 10.5891 14.7558C10.2637 15.0812 9.73612 15.0812 9.41071 14.7558L5.25367 10.5988C5.09724 10.4473 5 10.235 5 10.0001C5 9.88349 5.02395 9.77249 5.0672 9.67172C5.10778 9.57694 5.16675 9.48814 5.24411 9.41078L9.41071 5.24418Z" fill="#A8B3BD"/>
-</svg>

package/src/icon/svg/chart/control/pan-right.svg

@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="1" y="1" width="18" height="18" rx="3" stroke="#A8B3BD" stroke-width="2"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5893 14.7558C10.2639 15.0812 9.73625 15.0812 9.41081 14.7558C9.08537 14.4304 9.08537 13.9027 9.41081 13.5773L12.1548 10.8332H5.83335C5.3731 10.8332 5 10.4601 5 9.9999C5 9.53966 5.3731 9.16656 5.83335 9.16656H12.1546L9.41081 6.42274C9.08537 6.0973 9.08537 5.56966 9.41081 5.24421C9.73625 4.91877 10.2639 4.91877 10.5893 5.24421L14.7463 9.4012C14.9028 9.55269 15 9.76494 15 9.9999C15 10.116 14.9762 10.2266 14.9333 10.3271C14.8927 10.4223 14.8336 10.5116 14.7559 10.5893L10.5893 14.7558Z" fill="#A8B3BD"/>
-</svg>

package/src/icon/svg/chart/control/zoom-in.svg

@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="1" y="1" width="18" height="18" rx="3" stroke="#A8B3BD" stroke-width="2"/>
-<path d="M10 5C10.5523 5 11 5.44772 11 6L11 9H14C14.5523 9 15 9.44771 15 10C15 10.5523 14.5523 11 14 11H11L11 14C11 14.5523 10.5523 15 10 15C9.44771 15 9 14.5523 9 14L9 11H6C5.44771 11 5 10.5523 5 10C5 9.44771 5.44771 9 6 9H9L9 6C9 5.44772 9.44771 5 10 5Z" fill="#A8B3BD"/>
-</svg>

package/src/icon/svg/chart/control/zoom-out.svg

@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="1" y="1" width="18" height="18" rx="3" stroke="#A8B3BD" stroke-width="2"/>
-<path d="M14 11C14.5523 11 15 10.5523 15 10C15 9.44771 14.5523 9 14 9H6C5.44771 9 5 9.44771 5 10C5 10.5523 5.44771 11 6 11H14Z" fill="#A8B3BD"/>
-</svg>

package/src/styled.template.tsx

@@ -1,5 +0,0 @@
-import StyledCompare from "./template/compare/styled";
-import StyledFilter from "./template/filter/styled";
-import StyledHealthScore from "./template/health-score/styled";
-
-export { StyledCompare, StyledHealthScore, StyledFilter };

package/src/template/compare/compare.scss

@@ -1 +0,0 @@
-@use "./styles/scss/variables.scss";

package/src/template/compare/components/box/Container.tsx

@@ -1,33 +0,0 @@
-"use client";
-
-import CompareRemoveButton from "../button/Remove";
-import StyledCompareCommon from "../../styles/styled-components/common";
-import type { ComponentBaseProps } from "../../../../types";
-
-/**
- * 비교 템플릿; 박스
- * @component
- * @param {object} props
- * @param {boolean} [props.isDashed] 테두리 점선 여부
- * @param {boolean} [props.isSelected] 선택 여부
- * @param {Function} props.onRemove 선택해제 이벤트
- */
-export default function CompareBoxContainer({
-  className,
-  isDashed,
-  isSelected,
-  onRemove,
-  children,
-}: ComponentBaseProps &
-  Partial<{
-    isDashed: boolean;
-    isSelected: boolean;
-    onRemove: () => void;
-  }>) {
-  return (
-    <StyledCompareCommon.box $isDashed={isDashed} className={className}>
-      {children}
-      {isSelected && onRemove && <CompareRemoveButton onRemove={onRemove} />}
-    </StyledCompareCommon.box>
-  );
-}