@uniai-fe/ui-legacy-template 0.1.0

package/LICENSE

@@ -0,0 +1,27 @@
+MIT License
+
+Copyright (c) 2025 UNIAI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+---
+
+This project includes third-party software governed by additional licenses,
+including Apache License 2.0. Refer to `THIRD_PARTY_NOTICES.md` for the full
+text of those notices and any required attributions.

package/README.md

@@ -0,0 +1,5 @@
+# client / ui-legacy-template
+
+`deprecated`
+스타일링 도구와 토큰, 디자인 시스템, 컴포넌트 등 관리
+-> `design/*`로 이동

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@uniai-fe/ui-legacy-template",
+  "version": "0.1.0",
+  "description": "Legacy UI Templates Toolkit for UNIAI FE Projects",
+  "type": "module",
+  "private": false,
+  "sideEffects": false,
+  "license": "MIT",
+  "homepage": "https://www.uniai.co.kr/",
+  "publishConfig": {
+    "access": "public"
+  },
+  "packageManager": "pnpm@10.23.0",
+  "engines": {
+    "node": ">=24",
+    "pnpm": ">=10"
+  },
+  "author": {
+    "name": "GraffitoRyu",
+    "email": "yth4135@naver.com",
+    "url": "https://github.com/GraffitoRyu"
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "lint": "eslint . --max-warnings=0",
+    "typecheck": "tsc --project tsconfig.build.json --noEmit",
+    "build": "pnpm typecheck",
+    "dev": "tsc --project tsconfig.build.json --watch --noEmit",
+    "module:lint": "pnpm lint",
+    "module:typecheck": "pnpm typecheck",
+    "module:build": "pnpm build",
+    "ui-legacy-template:build": "pnpm run build",
+    "ui-legacy-template:dev": "pnpm run dev"
+  },
+  "module": "./src/index.tsx",
+  "main": "./src/index.tsx",
+  "types": "./src/types/index.d.ts",
+  "exports": {
+    ".": "./src/index.tsx",
+    "./types": "./src/types/index.d.ts",
+    "./components": "./src/components.tsx"
+  },
+  "peerDependencies": {
+    "jotai": ">= 2",
+    "next": ">= 15",
+    "react": ">= 19",
+    "react-dom": ">= 19",
+    "sass": ">= 15",
+    "styled-components": ">= 6",
+    "react-hook-form": ">= 7",
+    "@uniai-fe/chart-legacy": ">= 0.1.0",
+    "@uniai-fe/ui-legacy": ">= 0.1.7"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@uniai-fe/chart-legacy": "workspace:*",
+    "@uniai-fe/eslint-config": "workspace:*",
+    "@uniai-fe/next-devkit": "workspace:*",
+    "@uniai-fe/react-hooks": "workspace:*",
+    "@uniai-fe/tsconfig": "workspace:*",
+    "@uniai-fe/ui-legacy": "workspace:*",
+    "@uniai-fe/util-functions": "workspace:*",
+    "@uniai-fe/util-react": "workspace:*",
+    "autoprefixer": "^10.4.22",
+    "clsx": "^2.1.1",
+    "eslint": "^9.39.1",
+    "jotai": "^2.15.1",
+    "prettier": "^3.6.2",
+    "next": "^15.5.6",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-hook-form": "^7.66.1",
+    "sass": "^1.94.2",
+    "styled-components": "^6.1.19",
+    "typescript": "~5.9.3"
+  }
+}

package/src/asset-url.ts

@@ -0,0 +1,7 @@
+/**
+ * 이미지 호스팅 경로
+ */
+const assetUrl: string =
+  "https://raw.githubusercontent.com/uniai-corp/makeup/refs/heads/main/assets";
+
+export default assetUrl;

package/src/compare/compare.scss

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

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

@@ -0,0 +1,33 @@
+"use client";
+
+import CompareRemoveButton from "../button/Remove";
+import StyledCompareCommon from "../../styles/styled-components/common";
+import type { ComponentBaseProps } from "@uniai-fe/ui-legacy";
+
+/**
+ * 비교 템플릿; 박스
+ * @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>
+  );
+}

package/src/compare/components/box/TextStrong.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import type { ComponentBaseProps } from "@uniai-fe/ui-legacy";
+import StyledCompareCommon from "../../styles/styled-components/common";
+
+export default function CompareTextStrong({
+  className,
+  children,
+}: ComponentBaseProps) {
+  return (
+    <StyledCompareCommon.text.strong className={className}>
+      {children}
+    </StyledCompareCommon.text.strong>
+  );
+}

package/src/compare/components/box/TextSub.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import type { ComponentBaseProps } from "@uniai-fe/ui-legacy";
+import StyledCompareCommon from "../../styles/styled-components/common";
+
+export default function CompareTextSub({
+  className,
+  children,
+}: ComponentBaseProps) {
+  return (
+    <StyledCompareCommon.text.sub className={className}>
+      {children}
+    </StyledCompareCommon.text.sub>
+  );
+}

package/src/compare/components/box/index.tsx

@@ -0,0 +1,11 @@
+import CompareBoxContainer from "./Container";
+import CompareTextStrong from "./TextStrong";
+import CompareTextSub from "./TextSub";
+
+const CompareBox = {
+  Container: CompareBoxContainer,
+  TextStrong: CompareTextStrong,
+  TextSub: CompareTextSub,
+};
+
+export default CompareBox;

package/src/compare/components/button/Remove.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { Icon } from "@uniai-fe/ui-legacy";
+import StyledCompareCommon from "../../styles/styled-components/common";
+
+/**
+ * 비교 템플릿; 선택해제 버튼
+ * @component
+ * @param {object} props
+ * @param {Function} props.onRemove 선택해제 이벤트
+ */
+export default function CompareRemoveButton({
+  className,
+  onRemove,
+}: {
+  className?: string;
+  onRemove: () => void;
+}) {
+  return (
+    <StyledCompareCommon.button.remove
+      type="button"
+      className={className}
+      onClick={onRemove}
+    >
+      <Icon.Button.Remove.Solid />
+    </StyledCompareCommon.button.remove>
+  );
+}

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

@@ -0,0 +1,5 @@
+import CompareRemoveButton from "./Remove";
+
+const CompareButton = { Remove: CompareRemoveButton };
+
+export default CompareButton;

package/src/compare/components/chart/Container.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import type { CompareChartLegendCategoryDataType } from "../../../types";
+import StyledCompare from "../../styled";
+import CompareChartLegendContainer from "./legend/Container";
+import CompareChartGraphContainer from "./graph/Container";
+import { Scrollbar } from "@uniai-fe/ui-legacy";
+
+export default function CompareChartContainer({
+  leftWidth,
+  legendCategoryData,
+  children: graphItems,
+}: {
+  legendCategoryData: CompareChartLegendCategoryDataType[];
+  children: React.ReactNode;
+} & Partial<{ leftWidth: number | string }>) {
+  return (
+    <StyledCompare.chart.container>
+      <Scrollbar.Container>
+        <StyledCompare.chart.wrapper>
+          <StyledCompare.chart.left $leftWidth={leftWidth}>
+            <CompareChartLegendContainer categoryData={legendCategoryData} />
+          </StyledCompare.chart.left>
+          <StyledCompare.chart.right $leftWidth={leftWidth}>
+            <CompareChartGraphContainer>
+              {graphItems}
+            </CompareChartGraphContainer>
+          </StyledCompare.chart.right>
+        </StyledCompare.chart.wrapper>
+      </Scrollbar.Container>
+    </StyledCompare.chart.container>
+  );
+}

package/src/compare/components/chart/graph/Container.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import StyledCompareChartGraph from "../../../styles/styled-components/chart/graph";
+
+export default function CompareChartGraphContainer({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <StyledCompareChartGraph.container>
+      {children}
+    </StyledCompareChartGraph.container>
+  );
+}

package/src/compare/components/chart/graph/Item.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import StyledCompareChartGraph from "../../../styles/styled-components/chart/graph";
+
+export default function CompareChartGraphItem({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <StyledCompareChartGraph.item>{children}</StyledCompareChartGraph.item>
+  );
+}

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

@@ -0,0 +1,16 @@
+import CompareChartContainer from "./Container";
+import CompareChartGraphContainer from "./graph/Container";
+import CompareChartGraphItem from "./graph/Item";
+import CompareChartLegendContainer from "./legend/Container";
+import CompareChartLegendSectionContainer from "./legend/Section";
+
+const CompareChart = {
+  Container: CompareChartContainer,
+  Legend: {
+    Container: CompareChartLegendContainer,
+    Section: CompareChartLegendSectionContainer,
+  },
+  Graph: { Container: CompareChartGraphContainer, Item: CompareChartGraphItem },
+};
+
+export default CompareChart;

package/src/compare/components/chart/legend/Container.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import type { CompareChartLegendCategoryDataType } from "../../../../types";
+import StyledCompare from "../../../styled";
+import CompareChartLegendSectionContainer from "./Section";
+
+export default function CompareChartLegendContainer({
+  categoryData,
+}: {
+  categoryData: CompareChartLegendCategoryDataType[];
+}) {
+  return (
+    <StyledCompare.chart.legend.container>
+      {categoryData.map(({ key, title, legend }) => (
+        <CompareChartLegendSectionContainer
+          key={key}
+          dataName={title}
+          legendData={legend}
+        />
+      ))}
+    </StyledCompare.chart.legend.container>
+  );
+}

package/src/compare/components/chart/legend/Section.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import type { ChartLegendBaseType } from "@uniai-fe/chart-legacy";
+import StyledCompare from "../../../styled";
+
+export default function CompareChartLegendSectionContainer({
+  dataName,
+  legendData,
+}: {
+  dataName: React.ReactNode;
+  legendData: ChartLegendBaseType[];
+}) {
+  return (
+    <StyledCompare.chart.legend.section.container>
+      <StyledCompare.chart.legend.section.header>
+        <h4>{dataName}</h4>
+      </StyledCompare.chart.legend.section.header>
+      <StyledCompare.chart.legend.section.contents>
+        {legendData.map(({ key, name, color }) => (
+          <StyledCompare.chart.legend.section.legendItem
+            key={key}
+            $color={color}
+          >
+            <figure></figure>
+            <span>{name}</span>
+          </StyledCompare.chart.legend.section.legendItem>
+        ))}
+      </StyledCompare.chart.legend.section.contents>
+    </StyledCompare.chart.legend.section.container>
+  );
+}

package/src/compare/components/select-list/Container.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import type { ComponentBaseProps } from "@uniai-fe/ui-legacy";
+import StyledCompareSelect from "../../styles/styled-components/select-list";
+
+export default function CompareSelectContainer({
+  className,
+  children,
+}: ComponentBaseProps) {
+  return (
+    <StyledCompareSelect.container className={className}>
+      {children}
+    </StyledCompareSelect.container>
+  );
+}

package/src/compare/components/select-list/Header.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import type { ComponentBaseProps } from "@uniai-fe/ui-legacy";
+import StyledCompareSelect from "../../styles/styled-components/select-list";
+
+export default function CompareSelectHeader({
+  className,
+  children,
+}: ComponentBaseProps) {
+  return (
+    <StyledCompareSelect.header className={className}>
+      {children}
+    </StyledCompareSelect.header>
+  );
+}

package/src/compare/components/select-list/Item.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import type { ComponentBaseProps } from "@uniai-fe/ui-legacy";
+import StyledCompareSelect from "../../styles/styled-components/select-list";
+
+export default function CompareSelectListItem({
+  className,
+  children,
+}: ComponentBaseProps) {
+  return (
+    <StyledCompareSelect.item className={className}>
+      {children}
+    </StyledCompareSelect.item>
+  );
+}

package/src/compare/components/select-list/List.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import type { ComponentBaseProps } from "@uniai-fe/ui-legacy";
+import StyledCompareSelect from "../../styles/styled-components/select-list";
+
+export default function CompareSelectList({
+  className,
+  columnLength,
+  children,
+}: {
+  columnLength: number;
+} & ComponentBaseProps) {
+  return (
+    <StyledCompareSelect.list className={className} $length={columnLength}>
+      {children}
+    </StyledCompareSelect.list>
+  );
+}

package/src/compare/components/select-list/index.tsx

@@ -0,0 +1,13 @@
+import CompareSelectContainer from "./Container";
+import CompareSelectHeader from "./Header";
+import CompareSelectList from "./List";
+import CompareSelectListItem from "./Item";
+
+const CompareSelect = {
+  Container: CompareSelectContainer,
+  Header: CompareSelectHeader,
+  List: CompareSelectList,
+  Item: CompareSelectListItem,
+};
+
+export default CompareSelect;

package/src/compare/index.tsx

@@ -0,0 +1,13 @@
+import CompareBox from "./components/box";
+import CompareButton from "./components/button";
+import CompareChart from "./components/chart";
+import CompareSelect from "./components/select-list";
+
+const Compare = {
+  Select: CompareSelect,
+  Button: CompareButton,
+  Box: CompareBox,
+  Chart: CompareChart,
+};
+
+export default Compare;

package/src/compare/styled.tsx

@@ -0,0 +1,17 @@
+import StyledCompareChartGraph from "./styles/styled-components/chart/graph";
+import StyledCompareChartLayout from "./styles/styled-components/chart/layout";
+import StyledCompareChartLegend from "./styles/styled-components/chart/legend";
+import StyledCompareCommon from "./styles/styled-components/common";
+import StyledCompareSelect from "./styles/styled-components/select-list";
+
+const StyledCompare = {
+  ...StyledCompareCommon,
+  select: StyledCompareSelect,
+  chart: {
+    ...StyledCompareChartLayout,
+    legend: StyledCompareChartLegend,
+    graph: StyledCompareChartGraph,
+  },
+};
+
+export default StyledCompare;

package/src/compare/styles/scss/variables.scss

@@ -0,0 +1,17 @@
+:root {
+  --compare-select-list-item-margin: 3rem;
+
+  --compare-box-padding: 1.5rem;
+  --compare-box-text-margin: 1rem;
+  --compare-box-text-strong-size: 1.8rem;
+  --compare-box-text-sub-size: 1.6rem;
+
+  --compare-box-height: 2px + var(--compare-box-padding) * 2 +
+    var(--compare-box-text-strong-size) + var(--compare-box-text-sub-size) +
+    var(--compare-box-text-margin);
+
+  --compare-chart-item-padding: 2rem;
+  --compare-chart-legend-header-height: 3.5rem;
+  --compare-chart-legend-header-margin: 1.5rem;
+  --compare-chart-legend-contents-height: 8rem;
+}

package/src/compare/styles/styled-components/chart/graph.ts

@@ -0,0 +1,26 @@
+"use client";
+
+import { styled } from "styled-components";
+
+const container = styled.div`
+  width: 100%;
+  height: 100%;
+  padding: 0 var(--page-padding-default);
+`;
+const item = styled.div`
+  width: 100%;
+  height: calc(
+    var(--compare-chart-item-padding) +
+      var(--compare-chart-legend-header-height) +
+      var(--compare-chart-legend-header-margin) +
+      var(--compare-chart-legend-contents-height)
+  );
+  margin-top: var(--compare-chart-item-padding);
+  background-color: var(--theme-background-20);
+`;
+const StyledCompareChartGraph = {
+  container,
+  item,
+};
+
+export default StyledCompareChartGraph;

package/src/compare/styles/styled-components/chart/layout.ts

@@ -0,0 +1,38 @@
+"use client";
+
+import { styled } from "styled-components";
+import { styleBaseSize } from "@uniai-fe/util-functions";
+
+type StyledLayoutProps = Partial<{
+  $leftWidth: number | string;
+}>;
+const size = ({ $leftWidth }: StyledLayoutProps) =>
+  styleBaseSize("px", $leftWidth, 300);
+const container = styled.div`
+  width: 100%;
+  height: 100%;
+  border: 1px solid var(--color_30);
+  background-color: var(--color_0);
+  display: flex;
+`;
+const wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+`;
+const left = styled.div<StyledLayoutProps>`
+  width: ${size};
+`;
+const right = styled.div<StyledLayoutProps>`
+  width: calc(100% - ${size});
+  border-left: 1px solid var(--color_30);
+`;
+
+const StyledCompareChartLayout = {
+  container,
+  wrapper,
+  left,
+  right,
+};
+
+export default StyledCompareChartLayout;

package/src/compare/styles/styled-components/chart/legend.ts

@@ -0,0 +1,64 @@
+"use client";
+
+import { styled } from "styled-components";
+
+const container = styled.ul`
+  width: 100%;
+  height: 100%;
+`;
+
+const sectionContainer = styled.li`
+  width: 100%;
+  padding: var(--compare-chart-item-padding);
+`;
+const sectionHeader = styled.header`
+  height: var(--compare-chart-legend-header-height);
+  border-bottom: 1px solid var(--color_30);
+  margin-bottom: var(--compare-chart-legend-header-margin);
+
+  h4 {
+    font-size: 18px;
+    color: var(--color_90);
+    font-weight: 600;
+    line-height: 1em;
+  }
+`;
+type StyledLegendItemProps = Partial<{
+  $color: string;
+}>;
+const sectionContents = styled.ul<StyledLegendItemProps>`
+  width: 100%;
+  height: var(--compare-chart-legend-contents-height);
+`;
+const sectionLegendItem = styled.li<StyledLegendItemProps>`
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+
+  figure {
+    width: 12px;
+    height: 12px;
+    margin-right: 8px;
+    border-radius: 4px;
+    background-color: ${({ $color }) => ($color ? $color : "var(--color_40)")};
+  }
+
+  span {
+    font-size: 16px;
+    color: var(--color_80);
+  }
+`;
+
+const section = {
+  container: sectionContainer,
+  header: sectionHeader,
+  contents: sectionContents,
+  legendItem: sectionLegendItem,
+};
+
+const StyledCompareChartLegend = {
+  container,
+  section,
+};
+
+export default StyledCompareChartLegend;

package/src/compare/styles/styled-components/common.ts

@@ -0,0 +1,57 @@
+"use client";
+
+import { styled } from "styled-components";
+
+const box = styled.div<{ $isDashed?: boolean }>`
+  width: 100%;
+  height: 100%;
+  padding: var(--compare-box-padding);
+  border-radius: 0.8rem;
+  border: 1px ${({ $isDashed }) => ($isDashed ? "dashed" : "solid")}
+    var(--color_30);
+  position: relative;
+`;
+
+const boxText = styled.span`
+  display: block;
+`;
+
+const textStrong = styled(boxText)`
+  font-size: var(--compare-box-text-strong-size);
+  color: var(--color_90);
+`;
+
+const textSub = styled(boxText)`
+  font-size: var(--compare-box-text-sub-size);
+  color: var(--color_60);
+`;
+
+const text = {
+  common: boxText,
+  strong: textStrong,
+  sub: textSub,
+};
+
+const remove = styled.button`
+  width: fit-content;
+  height: fit-content;
+  font-size: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+`;
+
+const button = {
+  remove,
+};
+
+const StyledCompareCommon = {
+  box,
+  text,
+  button,
+};
+
+export default StyledCompareCommon;

package/src/compare/styles/styled-components/select-list.ts

@@ -0,0 +1,36 @@
+"use client";
+
+import { styled } from "styled-components";
+
+const container = styled.div`
+  width: calc(100% + var(--compare-select-list-item-margin));
+  margin: 0 calc(var(--compare-select-list-item-margin) / -2);
+`;
+
+const header = styled.header`
+  width: 100%;
+  margin-bottom: 2rem;
+  display: flex;
+  align-items: center;
+`;
+
+const item = styled.li`
+  padding: 0 calc(var(--compare-select-list-item-margin) / 2);
+`;
+
+const list = styled.ul<{ $length: number }>`
+  width: 100%;
+  display: flex;
+  ${item} {
+    width: calc(100% / ${({ $length }) => $length});
+  }
+`;
+
+const StyledCompareSelect = {
+  container,
+  header,
+  list,
+  item,
+};
+
+export default StyledCompareSelect;

package/src/components.tsx

@@ -0,0 +1,5 @@
+import HealthScoreChart from "./health-score";
+import Compare from "./compare";
+import Filter from "./filter";
+
+export { HealthScoreChart, Compare, Filter };

package/src/filter/components/Container.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+
+import { Dropdown } from "@uniai-fe/ui-legacy";
+import FilterGroup from "./Group";
+import FilterToggleButton from "./ToggleButton";
+
+import StyledFilter from "../styles/styled-components/filter";
+import type { FilterGroupDataType } from "../../types";
+import { useClickOutside } from "@uniai-fe/react-hooks";
+
+export default function FilterContainer({
+  group,
+}: {
+  group: FilterGroupDataType[];
+}) {
+  const [isOpen, setOpen] = useState<boolean>(false);
+  const onToggle = useCallback(() => {
+    setOpen(prev => !prev);
+  }, []);
+  const onClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  useClickOutside(dropdownRef, onClose);
+
+  return (
+    <StyledFilter.Parent ref={dropdownRef}>
+      <FilterToggleButton clickEvent={onToggle} />
+      <Dropdown.Container isOpen={isOpen} horizontal="right" gap={7}>
+        {group.map(d => (
+          <FilterGroup {...d} key={d.groupKey} />
+        ))}
+      </Dropdown.Container>
+    </StyledFilter.Parent>
+  );
+}

package/src/filter/components/Group.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { useCallback } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+
+import { Input } from "@uniai-fe/ui-legacy";
+import StyledFilter from "../styles/styled-components/filter";
+
+import type { FilterGroupDataType, FilterStateFormType } from "../../types";
+
+export default function FilterGroup({
+  groupKey,
+  categoryKey,
+  categoryName,
+  items,
+}: FilterGroupDataType) {
+  const { register, control, getValues, setValue } =
+    useFormContext<FilterStateFormType>();
+
+  // 현재 그룹 선택 현황
+  const checkState = useWatch({ control, name: `filter.${categoryKey}` });
+
+  // 전체선택 클릭 이벤트
+  const onCheckAll = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const { checked } = e.target;
+      setValue(`filter.${categoryKey}.all`, checked);
+
+      // 하위항목에 all check상태 일괄 적용
+      const keys = items.map(({ value }) => value);
+
+      keys.forEach(dataKey => {
+        setValue(`filter.${categoryKey}.${dataKey}`, checked);
+      });
+    },
+    [categoryKey, items, setValue],
+  );
+
+  // 하위항목 선택 클릭 이벤트
+  const onCheckEach = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>, dataKey: string) => {
+      // 클릭한 항목 선택 업데이트
+      const { checked: thisChecked } = e.target;
+      setValue(`filter.${categoryKey}.${dataKey}`, thisChecked);
+
+      // 전체 선택상태
+      const currentCheckedAll = getValues(`filter.${categoryKey}.all`);
+
+      // 나머지 하위항목 선택상태
+      const others = Object.fromEntries(
+        Object.entries(checkState).filter(
+          ([key]) => !["all", dataKey].includes(key),
+        ),
+      );
+      // 현재 항목을 클릭함으로써, 모든 하위항목이 모두 체크되었는지 확인
+      const isCheckedAllByEach =
+        thisChecked && Object.values(others).every(checked => checked);
+
+      // 현재 전체선택 체크상태와 다르면 업데이트
+      if (currentCheckedAll !== isCheckedAllByEach)
+        setValue(`filter.${categoryKey}.all`, isCheckedAllByEach);
+    },
+    [categoryKey, checkState, getValues, setValue],
+  );
+
+  return (
+    <StyledFilter.Group.Container>
+      <StyledFilter.Group.Title>
+        <Input.Checkbox
+          label={{
+            name: <span>{categoryName}</span>,
+            position: "right",
+            hide: false,
+          }}
+          selectorId={`${categoryKey}/all`}
+          dataKey={`${categoryKey}/all`}
+          register={register(`filter.${categoryKey}.all`)}
+          state={{ checked: checkState.all }}
+          onCustomChange={onCheckAll}
+        />
+      </StyledFilter.Group.Title>
+      {items.map(({ value: dataKey, name }) => (
+        <StyledFilter.Group.Item key={`${groupKey}/${dataKey}`}>
+          <Input.Checkbox
+            label={{
+              name: <span>{name}</span>,
+              position: "right",
+              hide: false,
+            }}
+            selectorId={`${categoryKey}/${dataKey}`}
+            dataKey={`${categoryKey}/${dataKey}`}
+            register={register(`filter.${categoryKey}.${dataKey}`)}
+            state={{ checked: checkState[dataKey] }}
+            onCustomChange={e => onCheckEach(e, dataKey)}
+          />
+        </StyledFilter.Group.Item>
+      ))}
+    </StyledFilter.Group.Container>
+  );
+}

package/src/filter/components/ToggleButton.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { Button, Icon } from "@uniai-fe/ui-legacy";
+import StyledFilter from "../styles/styled-components/filter";
+
+export default function FilterToggleButton({
+  clickEvent,
+}: {
+  clickEvent: () => void;
+}) {
+  return (
+    <StyledFilter.Button
+      as={Button.Default}
+      className="filter-button"
+      styleOptions={{
+        priorityType: "pale",
+        fillType: "outline",
+        sizeType: "small",
+      }}
+      clickEvent={clickEvent}
+    >
+      <Icon.Button.Filter />
+      <span>필터</span>
+    </StyledFilter.Button>
+  );
+}

package/src/filter/index.tsx

@@ -0,0 +1,5 @@
+import FilterContainer from "./components/Container";
+
+const Filter = FilterContainer;
+
+export default Filter;

package/src/filter/styled.tsx

@@ -0,0 +1,3 @@
+import StyledFilter from "./styles/styled-components/filter";
+
+export default StyledFilter;

package/src/filter/styles/styled-components/filter.ts

@@ -0,0 +1,66 @@
+"use client";
+
+import React from "react";
+import { Button, StyledDropdown } from "@uniai-fe/ui-legacy";
+import { styled } from "styled-components";
+
+const FilterButton = styled(Button.Default as React.FC)`
+  margin: 0;
+  figure {
+    margin-right: 4px;
+  }
+`;
+const Parent = styled(StyledDropdown.parent)`
+  --dropdown-padding-vertical: 15px;
+  --dropdown-padding-horizontal: 15px;
+
+  --dropdown-border-top-radius: 4px;
+  --dropdown-border-bottom-radius: 4px;
+
+  --field-item-width: fit-content;
+  --field-item-wrapper-width: fit-content;
+  --field-item-flex-wrap: nowrap;
+
+  ${StyledDropdown.wrapper} {
+    display: flex;
+  }
+`;
+
+const GroupContainer = styled.dl`
+  width: fit-content;
+  margin-right: 15px;
+  padding-right: 15px;
+  border-right: 1px solid var(--color_30);
+
+  &:last-child {
+    margin-right: 0;
+    padding-right: 0;
+    border-right: 0;
+  }
+`;
+
+const GroupTitle = styled.dt`
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--color_30);
+  span {
+    font-size: 16px;
+  }
+`;
+
+const GroupItem = styled.dd`
+  margin-top: 5px;
+`;
+
+const Group = {
+  Container: GroupContainer,
+  Title: GroupTitle,
+  Item: GroupItem,
+};
+
+const StyledFilter = {
+  Parent,
+  Button: FilterButton,
+  Group,
+};
+
+export default StyledFilter;

package/src/health-score/components/Chart.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { useCallback } from "react";
+import { Chart } from "@uniai-fe/chart-legacy";
+import StyledHealthScore from "../styles/styled/chart";
+import { Button } from "@uniai-fe/ui-legacy";
+// import Button from "@uniai-fe/ui-legacy";
+
+export default function HealthScoreChart({
+  title,
+  score,
+  details,
+}: {
+  title: string;
+  score: number | "";
+  details?: React.ReactNode[];
+}) {
+  const onOpen = useCallback(() => {
+    console.log(details);
+  }, [details]);
+
+  return (
+    <StyledHealthScore.container>
+      <Chart.Graph.ArcMeter
+        data={{ name: title, value: score || "" }}
+        max={100}
+      />
+      <StyledHealthScore.title>
+        <h5>{title}</h5>
+        <Button.Tooltip
+          size={18}
+          priorityType="primary"
+          fillType="solid"
+          clickEvent={onOpen}
+        />
+      </StyledHealthScore.title>
+    </StyledHealthScore.container>
+  );
+}

package/src/health-score/icon/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/health-score/icon/index.tsx

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

package/src/health-score/index.tsx

@@ -0,0 +1,3 @@
+import HealthScoreChart from "./components/Chart";
+
+export default HealthScoreChart;

package/src/health-score/styled.tsx

@@ -0,0 +1,3 @@
+import StyledHealthScore from "./styles/styled/chart";
+
+export default StyledHealthScore;

package/src/health-score/styles/styled/chart.ts

@@ -0,0 +1,27 @@
+"use client";
+
+import React from "react";
+import { Chart } from "@uniai-fe/chart-legacy";
+import { styled } from "styled-components";
+
+const container = styled(Chart.ContentsContainer as React.FC)``;
+
+const title = styled.div`
+  width: 100%;
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  h5 {
+    font-size: 20px;
+    color: var(--color_90);
+    font-weight: 600;
+  }
+`;
+
+const StyledHealthScore = {
+  container,
+  title,
+};
+
+export default StyledHealthScore;

package/src/index.scss

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

package/src/index.tsx

@@ -0,0 +1,6 @@
+import "./index.scss";
+
+export * from "./components";
+export * from "./styled";
+
+export type * from "./types";

package/src/styled.tsx

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

package/src/types/compare/chart.d.ts

@@ -0,0 +1,8 @@
+import type { ChartLegendBaseType } from "@uniai-fe/chart-legacy";
+
+export type CompareChartLegendCategoryDataType = {
+  [categoryDataKey: string]: string | ChartLegendBaseType[];
+  key: string;
+  title: string;
+  legend: ChartLegendBaseType[];
+};

package/src/types/filter.d.ts

@@ -0,0 +1,39 @@
+/**
+ * 템플릿; 필터 그룹 하위 데이터
+ * @property {string} dataKey 데이터 키
+ * @property {string} name 이름
+ */
+export type FilterGroupItemDataType = {
+  /**
+   * register data key
+   * categoryKey 프로퍼티의 값
+   * - string 값이 아닌 경우, `{categoryKey}_{value}` 형태로 사용
+   */
+  value: string;
+  name: string;
+};
+
+/**
+ * 템플릿; 필터 그룹 데이터
+ * @property {string} key 렌더링 키
+ * @property {string} categoryKey 그룹 카테고리 키 (컬럼 또는 차트 레전드 데이터 키)
+ * @property {string} categoryName 그룹 카테고리 이름
+ * @property {FilterGroupItemDataType[]} items 필터그룹 하위 아이템 데이터
+ */
+export type FilterGroupDataType = {
+  groupKey: string;
+  categoryKey: string;
+  categoryName: string;
+  items: FilterGroupItemDataType[];
+};
+
+export type FilterStateItemDataType = {
+  [itemKey: string]: boolean;
+  all: boolean;
+};
+export type FilterGroupStateDataType = {
+  [categoryKey: string]: FilterStateItemDataType;
+};
+export type FilterStateFormType = {
+  filter: FilterGroupStateDataType;
+};

package/src/types/index.d.ts

@@ -0,0 +1,2 @@
+export type * from "./filter";
+export type * from "./compare/chart";