@uniai-fe/ui-legacy 0.1.1

package/src/frame/components/header/util/profile/Container.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useCallback, useMemo } from "react";
+import { useOpenDropdown } from "@uniai-fe/react-hooks";
+import type { SelectOptionType } from "../../../../../types";
+import PageHeaderProfileDropdown from "./Dropdown";
+import PageHeaderProfileSelected from "./Selected";
+import PageHeaderUtilityItem from "../Item";
+
+import { StyledProfile } from "../../../../styles/styled-components/page/util.profile";
+import Dropdown from "../../../../../dropdown";
+
+export default function PageHeaderProfileContainer({
+  service = "farm",
+  isDropdown,
+  list,
+}: Partial<{
+  service: "farm" | "harim";
+  isDropdown: boolean;
+  list: SelectOptionType[];
+}>) {
+  const selected = useMemo(
+    (): SelectOptionType | undefined => list?.find(({ selected }) => selected),
+    [list],
+  );
+
+  const { isOpen, setOpen, ref } = useOpenDropdown();
+  const onOpen = useCallback(() => {
+    setOpen(prev => !prev);
+  }, [setOpen]);
+
+  const onSelect = useCallback(
+    (key: string) => {
+      if (!isDropdown) return;
+      console.log(key);
+      setOpen(false);
+    },
+    [isDropdown, setOpen],
+  );
+
+  return (
+    <PageHeaderUtilityItem>
+      <StyledProfile.container ref={ref}>
+        <PageHeaderProfileSelected
+          service={service}
+          optionName={selected?.optionName}
+          onOpen={onOpen}
+        />
+        {isDropdown && Array.isArray(list) && list.length > 0 && (
+          <Dropdown.Container isOpen={isOpen}>
+            <PageHeaderProfileDropdown
+              list={list}
+              onSelect={onSelect}
+              alt="농장을 등록해 주세요."
+            />
+          </Dropdown.Container>
+        )}
+      </StyledProfile.container>
+    </PageHeaderUtilityItem>
+  );
+}

package/src/frame/components/header/util/profile/Dropdown.tsx

@@ -0,0 +1,30 @@
+import PageHeaderProfileDropdownButton from "./DropdownButton";
+import { SelectOptionType } from "../../../../../types";
+
+export default function PageHeaderProfileDropdown({
+  list,
+  onSelect,
+  alt = "데이터가 없습니다.",
+}: {
+  list: SelectOptionType[];
+  onSelect: (key: string) => void;
+  alt?: string;
+}) {
+  return (
+    <ul>
+      {list.length === 0 ? (
+        <li>{alt}</li>
+      ) : (
+        list.map(({ key, optionName, selected }, i) => (
+          <li key={`${key}/${i}`}>
+            <PageHeaderProfileDropdownButton
+              selected={selected}
+              clickEvent={() => onSelect(key)}
+              optionName={optionName}
+            />
+          </li>
+        ))
+      )}
+    </ul>
+  );
+}

package/src/frame/components/header/util/profile/DropdownButton.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import Icon from "../../../../../icon";
+import StyledPageHeader from "../../../../styles/styled-components/page/header";
+
+export default function PageHeaderProfileDropdownButton({
+  selected,
+  clickEvent,
+  optionName,
+}: {
+  selected: boolean;
+  clickEvent: () => void;
+  optionName: React.ReactNode;
+}) {
+  return (
+    <StyledPageHeader.Profile.dropdown.button
+      type="button"
+      className={selected ? "selected" : undefined}
+      onClick={clickEvent}
+    >
+      <StyledPageHeader.Profile.dropdown.info>
+        {optionName}
+      </StyledPageHeader.Profile.dropdown.info>
+      {selected && <Icon.PageHeader.Check />}
+    </StyledPageHeader.Profile.dropdown.button>
+  );
+}

package/src/frame/components/header/util/profile/Selected.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import Icon from "../../../../../icon";
+import StyledPageHeader from "../../../../styles/styled-components/page/header";
+import PageHeaderProfileAvatar from "./Avatar";
+
+export default function PageHeaderProfileSelected({
+  service = "farm",
+  optionName,
+  isDropdown,
+  onOpen,
+}: Partial<{
+  service: "farm" | "harim";
+  optionName: React.ReactNode;
+  isDropdown: boolean;
+  onOpen: () => void;
+}>) {
+  return (
+    <StyledPageHeader.Profile.selected type="button" onClick={onOpen}>
+      <PageHeaderProfileAvatar isCircle={service !== "harim"} />
+      {["string", "number"].includes(typeof optionName) ? (
+        <span>{optionName}</span>
+      ) : (
+        optionName || <span>-</span>
+      )}
+      {isDropdown && <Icon.Arrow.Dropdown.Breadcrumb />}
+    </StyledPageHeader.Profile.selected>
+  );
+}

package/src/frame/components/header/util/setting/Button.tsx

@@ -0,0 +1,39 @@
+import Image from "next/image";
+import assetUrl from "../../../../../asset-url";
+import PageHeaderUtilityItem from "../Item";
+import PageHeaderUtilityButton from "../Button";
+
+/**
+ * 페이지 header; 환경설정 버튼 컴포넌트
+ * - 페이지 프레임 구성요소 > pageHeader
+ * @component
+ * @description
+ * - 테마 설정
+ * - 날씨 알림 설정
+ * - 시세 알림 설정
+ * - 이상감지 알림 설정
+ * - SNS 메시지 알림 설정
+ * - 비밀번호 재설정
+ */
+export default function PageHeaderSettingButton({
+  className,
+  onOpen,
+}: {
+  className?: string;
+  onOpen: () => void;
+}) {
+  return (
+    <PageHeaderUtilityItem>
+      <PageHeaderUtilityButton className={className} clickEvent={onOpen}>
+        <figure>
+          <Image
+            src={`${assetUrl}/img/page-header/setting.svg`}
+            alt="설정"
+            width={24}
+            height={24}
+          />
+        </figure>
+      </PageHeaderUtilityButton>
+    </PageHeaderUtilityItem>
+  );
+}

package/src/frame/components/header/util/time/Container.tsx

@@ -0,0 +1,13 @@
+import { memo } from "react";
+import PageHeaderTime from "./Time";
+import PageHeaderUtilityItem from "../Item";
+
+const PageHeaderTimeContainer = memo(({ time }: { time: string }) => {
+  return (
+    <PageHeaderUtilityItem margin={20}>
+      <PageHeaderTime>{time || "----. --. --. --:--:--"}</PageHeaderTime>
+    </PageHeaderUtilityItem>
+  );
+});
+
+export default PageHeaderTimeContainer;

package/src/frame/components/header/util/time/Time.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import StyledPageHeader from "../../../../styles/styled-components/page/header";
+
+export default function PageHeaderTime({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <StyledPageHeader.time>{children}</StyledPageHeader.time>;
+}

package/src/frame/components/index.tsx

@@ -0,0 +1,17 @@
+import Page from "./page";
+import Nav from "./nav";
+import Header from "./header";
+import Breadcrumb from "./breadcrumb";
+import Popup from "./popup";
+
+const Frame = {
+  Page: {
+    ...Page,
+    Nav,
+    Header,
+    Breadcrumb,
+  },
+  Popup,
+};
+
+export default Frame;

package/src/frame/components/nav/Button.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import Nav from "../../styles/styled-components/page/nav";
+
+export default function PageNavButton({
+  path,
+  icon,
+  menuName,
+  isHideName,
+}: {
+  path: string;
+  icon?: React.ReactNode;
+  menuName: React.ReactNode;
+  isHideName?: boolean;
+}) {
+  return (
+    <Nav.categoryButton href={path}>
+      {icon}
+      {!isHideName && <span>{menuName}</span>}
+    </Nav.categoryButton>
+  );
+}

package/src/frame/components/nav/Container.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { useCallback } from "react";
+
+import Nav from "../../styles/styled-components/page/nav";
+import PageNavButton from "./Button";
+import PageNavLogo from "./Logo";
+
+import type { SitemapDataType } from "../../../types";
+
+export default function PageNavContainer({
+  mainHref,
+  sitemap,
+}: {
+  mainHref: string;
+  sitemap: SitemapDataType[];
+}) {
+  const pathname = usePathname();
+  const getSelected = useCallback(
+    (path: string): string => (pathname.startsWith(path) ? "selected" : ""),
+    [pathname],
+  );
+
+  const wrapper = useCallback(
+    (routes?: SitemapDataType[]) =>
+      typeof routes === "undefined" || !Array.isArray(routes)
+        ? []
+        : routes.map(route => ({
+            ...route,
+            routeKey: `nav/${route.routeKey}`,
+          })),
+    [],
+  );
+
+  return (
+    <Nav.container>
+      <PageNavLogo href={mainHref} />
+      <Nav.list>
+        {wrapper(sitemap).map(
+          ({ routeKey, icon, name, path, depth, navDepthDisabled }) => (
+            <Nav.listItem key={routeKey} className={getSelected(path)}>
+              <PageNavButton
+                key={routeKey}
+                icon={icon}
+                menuName={name}
+                path={path}
+              />
+              {!navDepthDisabled && depth.length > 0 && (
+                <Nav.depthContainer>
+                  {wrapper(depth).map(({ routeKey, path, name }) => (
+                    <Nav.depthItem key={routeKey} href={path}>
+                      <span>{name}</span>
+                    </Nav.depthItem>
+                  ))}
+                </Nav.depthContainer>
+              )}
+            </Nav.listItem>
+          ),
+        )}
+      </Nav.list>
+    </Nav.container>
+  );
+}

package/src/frame/components/nav/Logo.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import assetsUrl from "../../../asset-url";
+import Nav from "../../styles/styled-components/page/nav";
+
+export default function PageNavLogo({ href }: { href: string }) {
+  return (
+    <Nav.logo type="button">
+      <Link href={href}>
+        <figure>
+          <Image
+            src={`${assetsUrl}/img/logo/chicken_monger_logo_symbol.svg`}
+            alt="asd"
+            // width={34}
+            // height={37}
+            fill={true}
+          />
+        </figure>
+      </Link>
+    </Nav.logo>
+  );
+}

package/src/frame/components/nav/index.tsx

@@ -0,0 +1,5 @@
+import PageNavContainer from "./Container";
+
+const Nav = PageNavContainer;
+
+export default Nav;

package/src/frame/components/page/Container.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import StyledPageCommon from "../../styles/styled-components/page/common";
+
+export default function PageContainer({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <StyledPageCommon.container>{children}</StyledPageCommon.container>;
+}

package/src/frame/components/page/ServiceFrame.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import StyledPageCommon from "../../styles/styled-components/page/common";
+
+export default function PageServiceFrame({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <StyledPageCommon.serviceFrame>{children}</StyledPageCommon.serviceFrame>
+  );
+}

package/src/frame/components/page/ServiceMain.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import StyledPageCommon from "../../styles/styled-components/page/common";
+
+export default function PageServiceMain({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <StyledPageCommon.serviceMain>{children}</StyledPageCommon.serviceMain>
+  );
+}

package/src/frame/components/page/ServiceMainWrapper.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import type { StyleSpacingType } from "@uniai-fe/util-functions";
+import type { ComponentBaseProps } from "../../../types";
+import StyledPageCommon from "../../styles/styled-components/page/common";
+
+export default function PageServiceMainWrapper({
+  className,
+  noPadding,
+  padding,
+  children,
+}: ComponentBaseProps &
+  Partial<{
+    noPadding: boolean;
+    padding: StyleSpacingType;
+  }>) {
+  return (
+    <StyledPageCommon.serviceMainWrapper
+      className={className}
+      $noPadding={noPadding}
+      $padding={padding}
+    >
+      {children}
+    </StyledPageCommon.serviceMainWrapper>
+  );
+}

package/src/frame/components/page/index.tsx

@@ -0,0 +1,14 @@
+import PageContainer from "./Container";
+import PageServiceFrame from "./ServiceFrame";
+import PageServiceMain from "./ServiceMain";
+import PageServiceMainWrapper from "./ServiceMainWrapper";
+
+const Page = {
+  Container: PageContainer,
+  Service: {
+    Frame: PageServiceFrame,
+    Main: PageServiceMain,
+    MainWrapper: PageServiceMainWrapper,
+  },
+};
+export default Page;

package/src/frame/components/popup/Container.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledPopup from "../../styles/styled-components/popup/popup";
+
+export default function PopupContainer({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <StyledPopup.container
+      id="pagePopup"
+      className={clsx("popup-container", className)}
+    >
+      {children}
+    </StyledPopup.container>
+  );
+}

package/src/frame/components/popup/frame/Body.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import StyledPopup from "../../../styles/styled-components/popup/popup";
+
+export default function PopupFrameBody({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <StyledPopup.frame.body className={className}>
+      {children}
+    </StyledPopup.frame.body>
+  );
+}

package/src/frame/components/popup/frame/Container.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import StyledPopup from "../../../styles/styled-components/popup/popup";
+
+export default function PopupFrameContainer({
+  className,
+  children,
+  minWidth,
+}: {
+  children: React.ReactNode;
+} & Partial<{
+  className: string;
+  minWidth: number | string;
+}>) {
+  return (
+    <StyledPopup.frame.container className={className} $minWidth={minWidth}>
+      {children}
+    </StyledPopup.frame.container>
+  );
+}

package/src/frame/components/popup/frame/Header.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import StyledPopup from "../../../styles/styled-components/popup/popup";
+
+export default function PopupFrameHeader({
+  title,
+  util,
+  children,
+}: {
+  title: React.ReactNode;
+  util?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <StyledPopup.frame.header.container>
+      <StyledPopup.frame.header.titleContainer>
+        <StyledPopup.frame.header.titleText>
+          {title}
+        </StyledPopup.frame.header.titleText>
+        {util && (
+          <StyledPopup.frame.header.util>{util}</StyledPopup.frame.header.util>
+        )}
+      </StyledPopup.frame.header.titleContainer>
+      {children}
+    </StyledPopup.frame.header.container>
+  );
+}

package/src/frame/components/popup/frame/index.tsx

@@ -0,0 +1,11 @@
+import PopupFrameContainer from "./Container";
+import PopupFrameHeader from "./Header";
+import PopupFrameBody from "./Body";
+
+const PopupPageFrame = {
+  Container: PopupFrameContainer,
+  Header: PopupFrameHeader,
+  Body: PopupFrameBody,
+};
+
+export default PopupPageFrame;

package/src/frame/components/popup/index.tsx

@@ -0,0 +1,9 @@
+import PopupContainer from "./Container";
+import PopupPageFrame from "./frame";
+
+const Popup = {
+  Container: PopupContainer,
+  Frame: PopupPageFrame,
+};
+
+export default Popup;

package/src/frame/frame.scss

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

package/src/frame/index.tsx

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

package/src/frame/styled.tsx

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

package/src/frame/styles/scss/size.variables.scss

@@ -0,0 +1,28 @@
+:root {
+  // 헤더
+  --page-header-height: 7rem;
+
+  // 헤더 유틸리티
+  --page-header-util-button-radius: 0.8rem;
+  --page-header-util-button-height: var(--button-height-small);
+  --page-header-util-button-padding: 0.6rem;
+
+  // 프로필 드롭다운
+  --page-header-profile-dropdown-min-width: 20rem;
+  --page-header-profile-dropdown-item-height: 5.6rem;
+  // 이상감지 알림 드롭다운
+  --page-header-notify-dropdown-min-width: 2.8rem;
+  --page-header-notify-dropdown-item-height: 5rem;
+
+  // 내비게이션
+  --page-nav-width: 7rem;
+
+  // 브레드크럼
+  --breadcrumb-select-box-height: 2.8rem;
+
+  // 페이지 컨텐츠 영역
+  --page-service-main-wrapper-padding: var(--page-padding-default);
+
+  // 팝업 프레임
+  --popup-title-height: 6rem;
+}

package/src/frame/styles/scss/theme.variables.scss

@@ -0,0 +1,23 @@
+:root {
+  // 헤더 프로필
+  --page-header-util-button-bg-active: var(--theme-background-30);
+
+  // 헤더 알람
+  --page-header-notify-time: var(--color-gray-300);
+
+  // 내비게이션
+  --page-nav-border: transparent;
+  --page-nav-bg: var(--color_theme_dark_10);
+  --page-nav-bg-active: var(--theme-blue-main);
+  --page-nav-contents: var(--color_40);
+  --page-nav-contents-active: var(--color_0);
+
+  &.dark-mode {
+    // 헤더 알람
+    --page-header-notify-time: #c9cacd;
+
+    // 내비게이션
+    --page-nav-contents: var(--color_60);
+    --page-nav-contents-active: var(--color_90);
+  }
+}