@uniai-fe/ui-legacy 0.1.1

package/src/frame/styles/styled-components/breadcrumb/base.ts

@@ -0,0 +1,126 @@
+"use client";
+
+import { styled } from "styled-components";
+import StyledDropdown from "../../../../dropdown/styles/styled-components/dropdown";
+
+const Container = styled.nav`
+  display: flex;
+  align-items: center;
+`;
+
+const ContextChain = styled.ol`
+  display: flex;
+  align-items: center;
+`;
+
+const Item = styled.li`
+  display: flex;
+  align-items: center;
+`;
+
+const ItemText = styled.span`
+  font-size: 1.6rem;
+  color: var(--color_70);
+`;
+
+const Arrow = styled.figure`
+  width: 2rem;
+  height: 2rem;
+  margin: 0 0.4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const SelectBoxContainer = styled(StyledDropdown.parent)`
+  --dropdown-padding-vertical: 1rem;
+  --dropdown-padding-horizontal: 1rem;
+
+  --dropdown-border-top-radius: 8px;
+  --dropdown-border-bottom-radius: 8px;
+
+  --dropdown-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.08);
+
+  ${StyledDropdown.container} {
+    min-width: 10rem;
+  }
+`;
+
+const SelectBoxSelected = styled.button`
+  /* min-width: 10rem; */
+  height: var(--breadcrumb-select-box-height);
+  padding: 0 1.2rem;
+  border-radius: 0.6rem;
+  background: var(--color_10);
+  display: flex;
+  align-items: center;
+  span {
+    font-size: 1.6rem;
+    color: var(--color_80);
+    font-weight: 600;
+  }
+  figure {
+    margin-left: 0.6rem;
+  }
+`;
+
+const DropdownButton = styled(StyledDropdown.button)`
+  --dropdown-button-padding-horizontal: 0.8rem;
+
+  width: 100%;
+
+  display: flex;
+  align-items: center;
+
+  span {
+    font-size: 1.4rem;
+    color: var(--color_80);
+    white-space: nowrap;
+  }
+`;
+
+const DropdownItem = styled.li`
+  height: 3.2rem;
+  margin-top: 0.2rem;
+  border-radius: 0.6rem;
+  overflow: hidden;
+  &:first-child {
+    margin-top: 0;
+  }
+  &.selected,
+  &:hover {
+    background: var(--color-light-blue-600-008);
+    a${DropdownButton} {
+      span {
+        color: var(--color-light-blue-600);
+      }
+    }
+  }
+`;
+
+const ExtraInfo = styled.div`
+  margin-left: 1rem;
+`;
+
+const Dropdown = {
+  Item: DropdownItem,
+  Button: DropdownButton,
+};
+
+const SelectBox = {
+  Container: SelectBoxContainer,
+  Selected: SelectBoxSelected,
+  Dropdown,
+};
+
+const StyledBreadcrumb = {
+  Container,
+  ContextChain,
+  Item,
+  ItemText,
+  Arrow,
+  SelectBox,
+  ExtraInfo,
+};
+
+export default StyledBreadcrumb;

package/src/frame/styles/styled-components/index.ts

@@ -0,0 +1,13 @@
+import StyledBreadcrumb from "./breadcrumb/base";
+import StyledPageCommon from "./page/common";
+import StyledPageHeader from "./page/header";
+import StyledPopup from "./popup/popup";
+
+const StyledFrame = {
+  common: StyledPageCommon,
+  header: StyledPageHeader,
+  breadcrumb: StyledBreadcrumb,
+  popup: StyledPopup,
+};
+
+export default StyledFrame;

package/src/frame/styles/styled-components/page/common.ts

@@ -0,0 +1,66 @@
+"use client";
+
+import { css, styled } from "styled-components";
+import {
+  stylePaddingSize,
+  type StyleSpacingType,
+} from "@uniai-fe/util-functions";
+
+const container = styled.main`
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  /* min-width: 1680px; */
+`;
+
+const serviceFrame = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+`;
+
+const serviceMain = styled.div`
+  width: calc(100% - var(--page-nav-width));
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+`;
+
+type StyledWrapperProps = Partial<{
+  $noPadding: boolean;
+  /**
+   * padding
+   * - number | string: 일괄 적용
+   * - (number | string)[]: 개별 지정
+   *   - [top, right, bottom, left]
+   *   - [vertical, horizontal]
+   */
+  $padding: StyleSpacingType;
+}>;
+const serviceMainWrapper = styled.div<StyledWrapperProps>`
+  width: 100%;
+  height: calc(100% - var(--page-header-height));
+  ${({ $noPadding }) =>
+    // 기본값
+    !$noPadding &&
+    css`
+      padding: var(--page-service-main-wrapper-padding);
+      background-color: ${!$noPadding ? "var(--color_5)" : "var(--color_0)"};
+    `}
+
+  ${({ $noPadding, $padding }) =>
+    !$noPadding &&
+    typeof $padding !== "undefined" &&
+    css`
+      padding: ${stylePaddingSize("rem", $padding)};
+    `}
+`;
+
+const StyledPageCommon = {
+  container,
+  serviceFrame,
+  serviceMain,
+  serviceMainWrapper,
+};
+
+export default StyledPageCommon;

package/src/frame/styles/styled-components/page/header.ts

@@ -0,0 +1,44 @@
+"use client";
+
+import Link from "next/link";
+import { styled } from "styled-components";
+import { StyledUtil } from "./util.common";
+import { StyledProfile } from "./util.profile";
+
+const container = styled.header`
+  width: 100%;
+  height: var(--page-header-height);
+  padding: 0 var(--page-padding-default);
+  background: var(--color_0);
+  border-bottom: 1px solid var(--color_30);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  z-index: 500;
+`;
+const logo = styled.h1`
+  display: flex;
+  align-items: center;
+`;
+
+const utilTime = styled.time`
+  font-size: 1.4rem;
+  color: var(--color_90);
+  line-height: 1em;
+`;
+
+const utilLogout = styled(Link)`
+  font-size: 0;
+`;
+
+const StyledPageHeader = {
+  container,
+  logo,
+  Util: StyledUtil,
+  Profile: StyledProfile,
+  time: utilTime,
+  logout: utilLogout,
+};
+
+export default StyledPageHeader;

package/src/frame/styles/styled-components/page/nav.ts

@@ -0,0 +1,127 @@
+"use client";
+
+import Link from "next/link";
+import { styled } from "styled-components";
+
+const container = styled.nav`
+  width: var(--page-nav-width);
+  height: 100%;
+  position: relative;
+  background-color: var(--page-nav-bg);
+`;
+
+const logo = styled.button`
+  width: var(--page-nav-width);
+  height: var(--page-nav-width);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  figure {
+    width: 3.4rem;
+    height: 3.7rem;
+    position: relative;
+  }
+`;
+
+const list = styled.ul`
+  width: 100%;
+  height: calc(100% - var(--page-nav-width));
+  /* padding: var(--page-padding-default) 0; */
+`;
+
+const categoryButton = styled(Link)`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  figure {
+    width: 2.4rem;
+    height: 2.4rem;
+    margin-bottom: 1rem;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    svg {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      object-fit: contain;
+      path {
+        fill: var(--page-nav-contents);
+      }
+    }
+  }
+  span {
+    font-size: 1.2rem;
+    color: var(--page-nav-contents);
+    line-height: 1.2rem;
+  }
+`;
+
+const depthItem = styled(Link)`
+  display: block;
+  width: 100%;
+  height: 2.4rem;
+  display: flex;
+  align-items: center;
+  span {
+    font-size: 1.2rem;
+    color: white;
+    white-space: nowrap;
+  }
+`;
+
+const depthContainer = styled.div`
+  display: none;
+  width: fit-content;
+  min-height: 100%;
+  padding: 1.1rem 1.6rem;
+  background: var(--page-nav-bg-active);
+  position: absolute;
+  top: 0;
+  left: 100%;
+  z-index: 1000;
+  flex-direction: column;
+  justify-content: center;
+`;
+
+const listItem = styled.li`
+  width: var(--page-nav-width);
+  height: var(--page-nav-width);
+  margin-bottom: 0.5rem;
+  position: relative;
+  &.selected,
+  &:hover {
+    a${categoryButton} {
+      background: var(--page-nav-bg-active);
+      svg path {
+        fill: var(--page-nav-contents-active);
+      }
+      span {
+        color: var(--page-nav-contents-active);
+      }
+    }
+  }
+  &:hover {
+    div${depthContainer} {
+      display: flex;
+    }
+  }
+`;
+
+const Nav = {
+  container,
+  logo,
+  list,
+  listItem,
+  categoryButton,
+  depthContainer,
+  depthItem,
+};
+
+export default Nav;

package/src/frame/styles/styled-components/page/util.common.ts

@@ -0,0 +1,48 @@
+"use client";
+
+import { styled } from "styled-components";
+
+const container = styled.ul`
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+`;
+
+const size = (v: string | number) => (typeof v === "number" ? `${v}px` : v);
+
+type StyledItemProps = Partial<{
+  $margin: string | number;
+}>;
+const item = styled.li<StyledItemProps>`
+  display: flex;
+  align-items: center;
+  margin-left: ${({ $margin }) =>
+    typeof $margin !== "undefined" ? size($margin) : "1rem"};
+  &:first-child {
+    margin-left: 0;
+  }
+`;
+const button = styled.button`
+  width: fit-content;
+  min-width: var(--page-header-util-button-height);
+  height: var(--page-header-util-button-height);
+  border-radius: var(--page-header-util-button-radius);
+  padding: 0 var(--page-header-util-button-padding);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  white-space: nowrap;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--page-header-util-button-bg-active);
+  }
+`;
+
+export const StyledUtil = {
+  container,
+  item,
+  button,
+};

package/src/frame/styles/styled-components/page/util.notify.ts

@@ -0,0 +1,116 @@
+"use client";
+
+import { styled, keyframes } from "styled-components";
+import StyledPageHeader from "./header";
+import StyledDropdown from "../../../../dropdown/styles/styled-components/dropdown";
+
+const container = styled(StyledDropdown.parent)`
+  ${StyledPageHeader.Util.button} {
+    // 알림
+    &.new {
+      figure {
+        position: relative;
+        &:before {
+          content: "NEW";
+          display: block;
+          width: 12px;
+          height: 12px;
+          border: 2px solid var(--color_0);
+          border-radius: 50%;
+          background: var(--color-red-600);
+          font-size: 0;
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
+      }
+    }
+  }
+  ${StyledDropdown.wrapper} {
+    min-width: var(--page-header-notify-dropdown-min-width);
+    li {
+      border-bottom: 1px solid var(--color_30);
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+  }
+`;
+
+const dropdownHeader = styled.header`
+  height: var(--page-header-notify-dropdown-item-height);
+  border-bottom: 1px solid var(--color_30);
+  padding: 0 12px;
+  background-color: var(--theme-background-30);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  h6 {
+    font-size: 16px;
+    color: var(--color_90);
+  }
+`;
+const loading = keyframes`
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }`;
+
+const refreshButton = styled.button`
+  width: fit-content;
+  height: fit-content;
+  font-size: 0;
+  &[disabled] {
+    opacity: 0.2;
+    cursor: default;
+  }
+  &.loading {
+    figure {
+      animation: ${loading} 1s linear infinite;
+    }
+  }
+`;
+const dropdownItem = styled(StyledDropdown.button)`
+  --dropdown-button-height: var(--page-header-notify-dropdown-item-height);
+  --dropdown-button-padding-vertical: 8px;
+  --dropdown-button-padding-horizontal: 12px;
+
+  cursor: default;
+  flex-direction: column;
+  align-items: start;
+  justify-content: center;
+
+  span {
+    margin-bottom: 4px;
+    font-size: 16px;
+    color: var(--color_90);
+  }
+  time {
+    font-size: 12px;
+    color: var(--page-header-notify-time);
+  }
+  &[disabled] {
+    justify-content: center;
+    span {
+      color: var(--page-header-notify-time);
+    }
+    &:hover {
+      background-color: transparent;
+    }
+  }
+`;
+
+const dropdown = {
+  header: dropdownHeader,
+  refreshButton,
+  item: dropdownItem,
+};
+
+const StyledNotify = {
+  container,
+  dropdown,
+};
+
+export default StyledNotify;

package/src/frame/styles/styled-components/page/util.profile.ts

@@ -0,0 +1,78 @@
+"use client";
+
+import { styled, css } from "styled-components";
+import { StyledUtil } from "./util.common";
+import StyledDropdown from "../../../../dropdown/styles/styled-components/dropdown";
+// import StyledIconPageHeader from "../../../../icon/styles/styled/page-header";
+
+const name = (startIndex: number) => css`
+  font-size: 14px;
+  color: var(--color_60);
+  &:nth-child(${startIndex}) {
+    color: var(--color_90);
+  }
+`;
+
+const container = styled(StyledDropdown.parent)`
+  margin-left: 10px;
+  ${StyledDropdown.wrapper} {
+    min-width: var(--page-header-profile-dropdown-min-width);
+    max-height: calc(
+      (var(--page-header-profile-dropdown-item-height) + 1px) * 3 - 1px
+    ); // button height + border-bottom
+    li {
+      border-bottom: 1px solid var(--color_30);
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+  }
+`;
+
+const selected = styled(StyledUtil.button)`
+  figure {
+    margin-right: 5px;
+  }
+  span {
+    ${name(2)}
+    &:nth-child(3) {
+      margin-left: 4px;
+    }
+  }
+`;
+
+const dropdownButton = styled(StyledDropdown.button)`
+  --dropdown-button-height: var(--page-header-profile-dropdown-item-height);
+  --dropdown-button-padding-horizontal: 12px;
+
+  justify-content: space-between;
+`;
+/* ${StyledIconPageHeader.check} {
+    margin-left: 10px;
+  }
+`; */
+
+const dropdownButtonInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  span {
+    ${name(1)}
+    line-height: 20px;
+    font-weight: 400;
+    &:first-child {
+    }
+  }
+`;
+
+const dropdown = {
+  button: dropdownButton,
+  info: dropdownButtonInfo,
+};
+
+export const StyledProfile = {
+  container,
+  name,
+  selected,
+  dropdown,
+};

package/src/frame/styles/styled-components/popup/popup.ts

@@ -0,0 +1,66 @@
+"use client";
+
+import { styled } from "styled-components";
+import { styleBaseSize } from "@uniai-fe/util-functions";
+
+const container = styled.main`
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--color_0);
+`;
+
+type StyledContainerProps = Partial<{
+  $minWidth: number | string;
+}>;
+const frameContainer = styled.div<StyledContainerProps>`
+  width: 100%;
+  height: 100%;
+  min-width: ${({ $minWidth }) => styleBaseSize("px", $minWidth, 1280)};
+  overflow: hidden;
+`;
+
+const frameHeader = styled.header`
+  width: 100%;
+  position: relative;
+  z-index: 500;
+`;
+
+const frameTitleContainer = styled.div`
+  width: 100%;
+  height: var(--popup-title-height);
+  border-bottom: 1px solid var(--color_20);
+  padding: 0 var(--page-padding-default);
+  background: var(--color_5);
+  display: flex;
+  align-items: center;
+`;
+const frameTitleText = styled.h2`
+  font-size: 20px;
+  color: var(--color_90);
+  font-weight: 600;
+`;
+const frameHeaderUtil = styled.div`
+  margin-left: auto;
+`;
+
+const frameBody = styled.div`
+  width: 100%;
+  height: 100%;
+  padding: var(--page-padding-default);
+`;
+
+const frame = {
+  container: frameContainer,
+  header: {
+    container: frameHeader,
+    titleContainer: frameTitleContainer,
+    titleText: frameTitleText,
+    util: frameHeaderUtil,
+  },
+  body: frameBody,
+};
+
+const StyledPopup = { container, frame };
+
+export default StyledPopup;

package/src/icon/components/alternate/Loading.tsx

@@ -0,0 +1,15 @@
+import LoadingIcon from "../../svg/button/loading.svg";
+
+/**
+ * 로딩 아이콘
+ * @component
+ * @param {object} props
+ * @param {number} [props.size] 아이콘 크기
+ */
+export default function IconAlternateLoading({ size = 24 }: { size?: number }) {
+  return (
+    <figure className="alternate-icon loading-icon">
+      <LoadingIcon viewBox="0 0 24 24" width={size} height={size} />
+    </figure>
+  );
+}

package/src/icon/components/alternate/index.tsx

@@ -0,0 +1,7 @@
+import IconAlternateLoading from "./Loading";
+
+const IconAlternate = {
+  Loading: IconAlternateLoading,
+};
+
+export default IconAlternate;