@uniai-fe/ui-legacy 0.1.6 → 0.1.8

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

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

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

@@ -1,11 +0,0 @@
-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/template/compare/components/button/Remove.tsx

@@ -1,28 +0,0 @@
-"use client";
-
-import Icon from "../../../../icon";
-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/template/compare/components/button/index.tsx

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

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

@@ -1,33 +0,0 @@
-"use client";
-
-import type { CompareChartLegendCategoryDataType } from "../../../../types";
-import StyledCompare from "../../styled";
-import CompareChartLegendContainer from "./legend/Container";
-import CompareChartGraphContainer from "./graph/Container";
-import ScrollbarContainer from "../../../../scrollbar/components/Container";
-
-export default function CompareChartContainer({
-  leftWidth,
-  legendCategoryData,
-  children: graphItems,
-}: {
-  legendCategoryData: CompareChartLegendCategoryDataType[];
-  children: React.ReactNode;
-} & Partial<{ leftWidth: number | string }>) {
-  return (
-    <StyledCompare.chart.container>
-      <ScrollbarContainer>
-        <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>
-      </ScrollbarContainer>
-    </StyledCompare.chart.container>
-  );
-}

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

@@ -1,15 +0,0 @@
-"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/template/compare/components/chart/graph/Item.tsx

@@ -1,13 +0,0 @@
-"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/template/compare/components/chart/index.tsx

@@ -1,16 +0,0 @@
-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/template/compare/components/chart/legend/Container.tsx

@@ -1,23 +0,0 @@
-"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/template/compare/components/chart/legend/Section.tsx

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

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

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

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

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

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

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

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

@@ -1,17 +0,0 @@
-: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

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

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

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

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

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

@@ -1,39 +0,0 @@
-"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>
-  );
-}