@uniai-fe/ui-legacy 0.1.1

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

@@ -0,0 +1,31 @@
+"use client";
+
+import type { ChartLegendBaseType } from "../../../../../types";
+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/template/compare/components/select-list/Container.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import type { ComponentBaseProps } from "../../../../types";
+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/template/compare/components/select-list/Header.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import type { ComponentBaseProps } from "../../../../types";
+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/template/compare/components/select-list/Item.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import type { ComponentBaseProps } from "../../../../types";
+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/template/compare/components/select-list/List.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import type { ComponentBaseProps } from "../../../../types";
+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/template/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/template/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/template/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/template/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/template/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/template/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/template/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/template/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/template/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/template/filter/components/Container.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+
+import DropdownContainer from "../../../dropdown/components/Container";
+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} />
+      <DropdownContainer isOpen={isOpen} horizontal="right" gap={7}>
+        {group.map(d => (
+          <FilterGroup {...d} key={d.groupKey} />
+        ))}
+      </DropdownContainer>
+    </StyledFilter.Parent>
+  );
+}

package/src/template/filter/components/Group.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { useCallback } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+
+import InputCheckbox from "../../../form-field/input/components/click/Checkbox";
+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>
+        <InputCheckbox
+          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}`}>
+          <InputCheckbox
+            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/template/filter/components/ToggleButton.tsx

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

package/src/template/filter/index.tsx

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

package/src/template/filter/styled.tsx

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

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

@@ -0,0 +1,66 @@
+"use client";
+
+import { styled } from "styled-components";
+import StyledDropdown from "../../../../dropdown/styled";
+import Button from "../../../../button";
+
+const FilterButton = styled(Button.Default)`
+  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/template/health-score/components/Chart.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useCallback } from "react";
+import Chart from "../../../chart";
+import StyledHealthScore from "../styles/styled/chart";
+import Button from "../../../button";
+
+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/template/health-score/index.tsx

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

package/src/template/health-score/styled.tsx

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