@uniai-fe/ui-legacy 0.1.1

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

@@ -0,0 +1,123 @@
+"use client";
+
+import { styled, css } from "styled-components";
+
+const topLine = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  z-index: 50;
+  background-color: var(--color_90);
+`;
+
+const container = styled.table`
+  background-color: var(--color_0);
+`;
+
+const row = styled.tr``;
+
+type CellProps = Partial<{
+  $isClickable: boolean;
+}>;
+const cell = styled.div<CellProps>`
+  width: 100%;
+  height: 100%;
+  padding: var(--table-cell-padding-vertical)
+    var(--table-cell-padding-horizontal);
+
+  border-bottom: 1px solid var(--color_30);
+
+  display: flex;
+  align-items: var(--table-cell-align-items);
+  justify-content: var(--table-cell-justify-content);
+  flex-direction: var(--table-cell-flex-direction);
+  flex-wrap: var(--table-cell-flex-wrap);
+
+  ${({ $isClickable }) =>
+    $isClickable &&
+    css`
+      cursor: pointer;
+      user-select: none;
+    `}
+
+  span {
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+
+const th = styled.th`
+  height: var(--table-row-height-head);
+  padding: 0;
+
+  color: var(--color_90);
+  background-color: var(--table-head-bg);
+
+  span {
+    font-size: var(--table-head-text-size);
+    font-weight: 600;
+  }
+
+  &[data-sorted="true"] {
+    --table-head-bg: var(--theme-background-30);
+    color: var(--color-light-blue-600);
+    svg path {
+      stroke: var(--color-light-blue-600);
+    }
+  }
+`;
+
+const td = styled.td`
+  height: var(--table-row-height-body);
+  padding: 0;
+
+  color: var(--color_70);
+  ${cell} > span:not(.empty-text) {
+    font-size: var(--table-body-text-size);
+  }
+`;
+
+const head = styled.thead``;
+
+type StyledTBodyProps = Partial<{
+  $isBorderBottom: boolean;
+}>;
+const body = styled.tbody<StyledTBodyProps>`
+  ${({ $isBorderBottom }) =>
+    typeof $isBorderBottom === "boolean" && $isBorderBottom === false
+      ? css`
+          tr:last-child {
+            ${cell} {
+              border-bottom: 0px;
+            }
+          }
+        `
+      : undefined}
+`;
+
+const foot = styled.tfoot`
+  box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.06);
+  z-index: 50;
+
+  ${cell} {
+    border-top: 1px solid var(--color_30);
+  }
+`;
+
+const StyledTableCommon = {
+  topLine,
+  container,
+  head,
+  body,
+  foot,
+  row,
+  th,
+  td,
+  cell,
+};
+
+export default StyledTableCommon;

package/src/table/styles/styled/grid.ts

@@ -0,0 +1,62 @@
+"use client";
+
+import { styled } from "styled-components";
+
+const gridCell = styled.div`
+  min-height: 65px;
+  padding: 10px;
+  border-right: 1px solid var(--color_30);
+  dl {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    dt,
+    dd {
+      font-size: 18px;
+    }
+    dt {
+      color: var(--color_60);
+      display: flex;
+      align-items: center;
+    }
+    dd {
+      color: var(--color_80);
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+    }
+  }
+`;
+
+const container = styled.div`
+  width: 100%;
+  height: 100%;
+  padding: 12px;
+  border-radius: 8px;
+  border: 1px solid var(--color_30);
+  background-color: var(--color_0);
+`;
+const wrapper = styled.div<{ $columnLength: number }>`
+  width: 100%;
+  height: 100%;
+  min-height: 65px;
+  display: grid;
+  grid-template-columns: repeat(${({ $columnLength }) => $columnLength}, 1fr);
+  ${gridCell}:nth-child(${({ $columnLength }) => $columnLength}n) {
+    border-right: 0;
+  }
+  ${gridCell}:nth-child(n + ${({ $columnLength }) => $columnLength + 1}) {
+    border-top: 1px solid var(--color_30);
+  }
+`;
+
+const StyledTableGrid = {
+  container,
+  wrapper,
+  cell: gridCell,
+};
+
+export default StyledTableGrid;

package/src/table/styles/styled/index.ts

@@ -0,0 +1,20 @@
+import StyledTableCommon from "./common";
+import StyledTableBasic from "./basic";
+import StyledTableList from "./list";
+import StyledTableGrid from "./grid";
+import StyledTableSpreadsheet from "./spreadsheet";
+import StyledTablePagination from "./pagination";
+import StyledTableSort from "./sort";
+
+const StyledTable = {
+  common: StyledTableCommon, // 기초 마크업
+  basic: StyledTableBasic, // 기본형
+  list: StyledTableList, // 리스트형 (헤더 셀 보더 없음, 최상단 테두리선 없음)
+  grid: StyledTableGrid, // 그리드형 (최상단 테두리선 없음)
+  sheet: StyledTableSpreadsheet, // 스프레드시트 타입
+  pagination: StyledTablePagination,
+  sort: StyledTableSort,
+  // 기타 변형은 각 서비스 각 컴포넌트에서 적용함.
+};
+
+export default StyledTable;

package/src/table/styles/styled/list.ts

@@ -0,0 +1,38 @@
+"use client";
+
+import { styled } from "styled-components";
+import StyledTableCommon from "./common";
+
+const { container: _Container, head, row } = StyledTableCommon;
+
+const container = styled(_Container)`
+  --table-head-bg: var(--color_5);
+
+  --table-head-text-size: 1.4rem;
+  --table-body-text-size: 1.4rem;
+
+  --table-row-height-head: 4rem;
+  --table-row-height-body: 4rem;
+
+  --table-cell-padding-vertical: 1.1rem;
+  --table-cell-padding-horizontal: 1.5rem;
+
+  ${head} {
+    ${row} {
+      th:first-child {
+        border-top-left-radius: 0.8rem;
+        border-bottom-left-radius: 0.8rem;
+      }
+      th:last-child {
+        border-top-right-radius: 0.8rem;
+        border-bottom-right-radius: 0.8rem;
+      }
+    }
+  }
+`;
+
+const StyledTableList = {
+  container,
+};
+
+export default StyledTableList;

package/src/table/styles/styled/pagination.ts

@@ -0,0 +1,77 @@
+"use client";
+
+import { styled } from "styled-components";
+
+const container = styled.nav`
+  width: 100%;
+  margin-top: var(--table-pagination-margin-top);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const item = styled.button`
+  width: var(--table-pagination-button-size);
+  height: var(--table-pagination-button-size);
+  border-radius: var(--table-pagination-button-radius);
+
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+
+  span {
+    font-size: 1.4rem;
+    color: var(--table-pagination-text-color);
+  }
+
+  &.now {
+    --table-pagination-text-color: var(--color_90);
+
+    background: var(--table-pagination-bg-color);
+    cursor: default;
+
+    span {
+      font-weight: 600;
+    }
+  }
+  &.disabled {
+    cursor: default;
+    &:before {
+      background: var(--table-pagination-disabled-cover);
+    }
+  }
+  &:before {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 5;
+    transition: background-color 0.16s;
+  }
+  &:not(.now).active {
+    &:hover {
+      background: var(--table-pagination-bg-color);
+      &:before {
+        background: rgba(0, 0, 0, 0.06);
+      }
+    }
+    &:active {
+      &:before {
+        background: rgba(0, 0, 0, 0.12);
+      }
+    }
+  }
+`;
+
+const StyledTablePagination = {
+  container,
+  item,
+};
+
+export default StyledTablePagination;

package/src/table/styles/styled/sort.ts

@@ -0,0 +1,25 @@
+"use client";
+
+import { styled } from "styled-components";
+import { StyledIcon } from "../../../styled.components";
+
+type StyledSortProps = Partial<{
+  direction: "asc" | "desc";
+}>;
+const button = styled.button<StyledSortProps>`
+  margin-right: calc(var(--table-cell-padding-horizontal) / -1);
+  display: flex;
+  align-items: center;
+
+  cursor: pointer;
+
+  ${StyledIcon.table.sort} {
+    margin-left: 0.2rem;
+  }
+`;
+
+const StyledTableSort = {
+  button,
+};
+
+export default StyledTableSort;

package/src/table/styles/styled/spreadsheet.ts

@@ -0,0 +1,86 @@
+"use client";
+
+import { styled, css } from "styled-components";
+import StyledTableCommon from "./common";
+
+const { container: _Container, head, body, th, td, cell } = StyledTableCommon;
+
+type StyledTableBasicProps = Partial<{
+  $isBorderTop: boolean;
+  $sideBorder: boolean;
+}>;
+const container = styled(_Container)<StyledTableBasicProps>`
+  --table-head-bg: var(--theme-background-30);
+
+  --table-head-text-size: 1.6rem;
+  --table-body-text-size: 1.6rem;
+
+  --table-row-height-head: 5.4rem;
+  --table-row-height-body: 5.4rem;
+
+  --table-cell-padding-vertical: 0.9rem;
+  --table-cell-padding-horizontal: 1.2rem;
+
+  ${({ $isBorderTop }) =>
+    $isBorderTop &&
+    css`
+      border-top: 1px solid transparent;
+    `}
+  ${({ $sideBorder }) =>
+    $sideBorder &&
+    css`
+      border-left: 1px solid var(--color_30);
+      border-right: 1px solid var(--color_30);
+    `}
+
+  ${cell} {
+    border-right: 1px solid var(--color_30);
+  }
+
+  ${th} {
+    ${cell} {
+      /* border-left: 1px solid var(--color_30); */
+    }
+    &:last-child {
+      ${cell} {
+        border-right: 0;
+      }
+    }
+  }
+
+  ${td} {
+    ${cell} {
+      /* border-left: 1px solid var(--color_30); */
+    }
+    &:last-child {
+      ${cell} {
+        border-right: 0;
+      }
+    }
+  }
+
+  ${head} {
+    position: sticky;
+    top: 0;
+    left: 0;
+    ${th} {
+      ${cell} {
+        border-bottom: 1px solid var(--color_30);
+      }
+    }
+  }
+
+  ${body} {
+    ${th} {
+      ${cell} {
+        /* border-bottom: 1px solid var(--color_30); */
+      }
+    }
+  }
+`;
+
+const StyledTableSpreadsheet = {
+  container,
+};
+
+export default StyledTableSpreadsheet;

package/src/table/table.scss

@@ -0,0 +1,3 @@
+@use "./styles/scss/reset.scss";
+@use "./styles/scss/common.scss";
+@use "./styles/scss/pagination.scss";

package/src/table/util.ts

@@ -0,0 +1 @@
+export * from "./hooks";

package/src/template/compare/compare.scss

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

package/src/template/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 "../../../../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>
+  );
+}

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

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

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

@@ -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/template/compare/components/button/Remove.tsx

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

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

package/src/template/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 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

@@ -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/template/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/template/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/template/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>
+  );
+}