@uniai-fe/uds-templates 0.1.18 → 0.1.20

package/dist/styles.css

@@ -50,7 +50,7 @@
 /* namespace 충돌을 막기 위해 모든 @use 경로에 고유 alias를 부여한다. */
 
 
-.page-frame-container {
+.page-frame-mobile-shell {
   display: grid;
   grid-template-rows: auto 1fr auto;
   width: min(100%, var(--uds-page-frame-max-width));
@@ -60,22 +60,22 @@
   color: inherit;
 }
 
-.page-frame-header,
-.page-frame-body,
-.page-frame-footer {
+.page-frame-mobile-shell-header,
+.page-frame-mobile-shell-body,
+.page-frame-mobile-shell-footer {
   width: 100%;
 }
 
-.page-frame-header {
+.page-frame-mobile-shell-header {
   padding-top: var(--uds-page-frame-header-padding-top);
 }
 
-.page-frame-body {
+.page-frame-mobile-shell-body {
   min-height: 0;
   overflow-y: auto;
 }
 
-.page-frame-footer {
+.page-frame-mobile-shell-footer {
   padding-bottom: var(--uds-page-frame-footer-safe-area);
 }
 
@@ -97,6 +97,55 @@
   background-color: inherit;
 }
 
+.page-frame-mobile-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-padding-2, 8px);
+  min-height: 40px;
+}
+
+.page-frame-mobile-header__left,
+.page-frame-mobile-header__right {
+  width: 64px;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.page-frame-mobile-header__back {
+  border: none;
+  background: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-padding-1, 4px);
+  padding: var(--spacing-padding-1, 4px);
+  font-size: 14px;
+  color: var(--color-label-standard);
+  cursor: pointer;
+}
+
+.page-frame-mobile-header__back-icon {
+  font-size: 18px;
+  line-height: 1;
+}
+
+.page-frame-mobile-header__back-placeholder {
+  width: 100%;
+  height: 100%;
+}
+
+.page-frame-mobile-header__title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-label-standard);
+}
+
 .page-frame-navigation {
   width: 100%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,

package/src/asset-url.ts

@@ -0,0 +1,7 @@
+/**
+ * 이미지 호스팅 경로
+ */
+const assetUrl: string =
+  "https://raw.githubusercontent.com/uniai-corp/makeup/refs/heads/main/assets";
+
+export default assetUrl;

package/src/auth/common/container/header/StageHeader.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import type { ReactNode } from "react";
 import { PaginationCarousel } from "@uniai-fe/uds-primitives";
-import { PageFrameMobileHeader } from "../../../../page-frame/mobile/header";
+import { MobileFrameHeader } from "../../../../page-frame/mobile/components/header";
 
 import "./stage-header.scss";
 
@@ -35,7 +35,7 @@ export function AuthStageHeader({
 }: StageHeaderProps) {
   return (
     <div className={clsx("auth-stage-header", className)}>
-      <PageFrameMobileHeader
+      <MobileFrameHeader
         title={navigationTitle}
         backIcon={backIcon}
         onBack={onBack}

package/src/index.scss

@@ -3,9 +3,7 @@
 
 /* 템플릿 레벨 스타일을 통합해 서비스 앱이 단일 엔트리만 import하도록 구성한다. */
 /* namespace 충돌을 막기 위해 모든 @use 경로에 고유 alias를 부여한다. */
-@use "./page-frame/container/index.scss" as pageFrameContainer;
 @use "./page-frame/mobile/index.scss" as pageFrameMobile;
-@use "./page-frame/navigation/index.scss" as pageFrameNavigation;
 @use "./modal/index.scss" as modalStyles;
 
 @use "./auth/common/container/index.scss" as authCommonContainer;

package/src/page-frame/desktop/components/header/util/Logout.tsx

@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 import Link from "next/link";
-import assetsUrl from "../../../../../../asset-url";
+import assetsUrl from "../../../../../asset-url";
 import PageHeaderUtilityItem from "./Item";
 import PageHeaderUtilityButton from "./Button";
 

package/src/page-frame/desktop/components/header/util/setting/Button.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import Image from "next/image";
-import assetUrl from "../../../../../../../asset-url";
+import assetUrl from "../../../../../../asset-url";
 import PageHeaderUtilityItem from "../Item";
 import PageHeaderUtilityButton from "../Button";
 

package/src/page-frame/desktop/img/logout-v2.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 4H6C4.89543 4 4 4.89543 4 6V18C4 19.1046 4.89543 20 6 20H10" stroke="#313235" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M14.9497 7L19.8995 11.9497L14.9497 16.8995" stroke="#313235" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 12H19" stroke="#313235" stroke-width="1.6" stroke-linecap="round"/>
+</svg>

package/src/page-frame/desktop/img/setting-v2.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.9999 4C13.5522 4 13.9999 4.44772 13.9999 5V5.63462C13.9999 6.05844 14.2711 6.42889 14.651 6.61671C14.8879 6.73384 15.116 6.86621 15.3339 7.01246C15.6856 7.24844 16.1416 7.29814 16.5086 7.08669L17.0624 6.76758C17.5406 6.4917 18.1525 6.65561 18.4286 7.13379L19.4286 8.86621C19.7045 9.34446 19.5406 9.95634 19.0624 10.2324L18.5102 10.5504C18.1429 10.7619 17.9575 11.1816 17.9864 11.6045C17.9953 11.7352 17.9999 11.8671 17.9999 12C17.9999 12.1327 17.9952 12.2643 17.9863 12.3948C17.9574 12.817 18.1422 13.2361 18.5087 13.4478L19.0624 13.7676C19.5406 14.0437 19.7045 14.6555 19.4286 15.1338L18.4286 16.8662C18.1525 17.3444 17.5407 17.5083 17.0624 17.2324L16.51 16.9134C16.1429 16.7014 15.6863 16.751 15.3341 16.987C15.1161 17.1332 14.888 17.2654 14.651 17.3825C14.271 17.5701 13.9999 17.9406 13.9999 18.3644V19C13.9999 19.5523 13.5522 20 12.9999 20H10.9999C10.4477 19.9999 9.9999 19.5522 9.9999 19V18.3633C9.9999 17.9396 9.72883 17.5691 9.34871 17.3818C9.11159 17.265 8.88333 17.133 8.66518 16.987C8.31266 16.7512 7.85583 16.7016 7.48861 16.9138L6.9374 17.2324C6.45928 17.5081 5.8483 17.3441 5.57217 16.8662L4.57217 15.1338C4.29606 14.6555 4.45923 14.0438 4.9374 13.7676L5.4905 13.4479C5.8568 13.2361 6.04167 12.8171 6.01324 12.395C6.00445 12.2644 5.9999 12.1327 5.9999 12C5.9999 11.867 6.00442 11.7351 6.01319 11.6043C6.04153 11.1815 5.8561 10.7619 5.48903 10.5503L4.9374 10.2324C4.45925 9.95623 4.29606 9.34444 4.57217 8.86621L5.57217 7.13379C5.8483 6.65589 6.45928 6.49189 6.9374 6.76758L7.49003 7.08628C7.85707 7.29795 8.31333 7.24825 8.66538 7.01247C8.88347 6.86641 9.11168 6.7343 9.34873 6.61736C9.72879 6.42989 9.9999 6.05945 9.9999 5.63567V5C9.9999 4.44776 10.4477 4.00008 10.9999 4H12.9999Z" stroke="#313235" stroke-width="1.6"/>
+<circle cx="12" cy="12" r="3" stroke="#313235" stroke-width="1.6"/>
+</svg>

package/src/page-frame/desktop/index.tsx

@@ -4,4 +4,7 @@ import Frame from "./components";
 
 export type * from "./types";
 
-export { Frame };
+export const DesktopFrame = {
+  ...Frame,
+  Container: Frame.Page?.Container,
+};

package/src/page-frame/index.tsx

@@ -1,5 +1,11 @@
-export * from "./container";
+import { DesktopFrame } from "./desktop";
+import { MobileFrame } from "./mobile";
+
 export * from "./mobile";
-export * from "./navigation";
 export * from "./types";
 export * from "./desktop";
+
+export const Frame = Object.assign({}, DesktopFrame, {
+  Desktop: DesktopFrame,
+  Mobile: MobileFrame,
+});

package/src/page-frame/mobile/{header/PageFrameMobileHeader.tsx → components/header/Header.tsx}

@@ -1,10 +1,10 @@
 import clsx from "clsx";
 import type { ReactNode } from "react";
 
-import IconBackword from "../img/chevron-backward.svg";
-import "./page-frame-mobile-header.scss";
+import IconBackward from "../../img/chevron-backward.svg";
+import "../../styles/header.scss";
 
-export interface PageFrameMobileHeaderProps {
+export interface MobileFrameHeaderProps {
   className?: string;
   title: ReactNode;
   backIcon?: ReactNode;
@@ -17,14 +17,14 @@ export interface PageFrameMobileHeaderProps {
  * 모바일 서비스 공통 page header; 뒤로가기 버튼 + 타이틀을 노출한다.
  * @component
  */
-export function PageFrameMobileHeader({
+export function MobileFrameHeader({
   className,
   title,
   backIcon,
   onBack,
   leftSlot,
   rightSlot,
-}: PageFrameMobileHeaderProps) {
+}: MobileFrameHeaderProps) {
   return (
     <header className={clsx("page-frame-mobile-header", className)}>
       <div className="page-frame-mobile-header__left">
@@ -38,7 +38,7 @@ export function PageFrameMobileHeader({
             >
               <span className="page-frame-mobile-header__back-icon">
                 {backIcon ?? (
-                  <IconBackword width={24} height={24} alt="뒤로가기" />
+                  <IconBackward width={24} height={24} alt="뒤로가기" />
                 )}
               </span>
             </button>

package/src/page-frame/mobile/components/header/index.ts

@@ -0,0 +1,9 @@
+import { MobileFrameHeader } from "./Header";
+
+const Header = {
+  Container: MobileFrameHeader,
+};
+
+export default Header;
+export { MobileFrameHeader };
+export type { MobileFrameHeaderProps } from "./Header";

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

@@ -0,0 +1,14 @@
+import Page from "./page";
+import Header from "./header";
+import Navigation from "./navigation";
+
+const Frame = {
+  Page,
+  Header,
+  Navigation,
+};
+
+export default Frame;
+export * from "./page";
+export * from "./header";
+export * from "./navigation";

package/src/page-frame/{navigation/PageFrameNavigation.tsx → mobile/components/navigation/Navigation.tsx}

@@ -4,7 +4,7 @@ import {
   type BottomNavigationProps,
 } from "@uniai-fe/uds-primitives";
 
-export type PageFrameNavigationProps = BottomNavigationProps;
+export type MobileFrameNavigationProps = BottomNavigationProps;
 
 /**
  * Page Frame 전용 navigation 래퍼.
@@ -12,10 +12,10 @@ export type PageFrameNavigationProps = BottomNavigationProps;
  * @component
  * @param {PageFrameNavigationProps} props
  */
-export function PageFrameNavigation({
+export function MobileFrameNavigation({
   className,
   ...rest
-}: PageFrameNavigationProps) {
+}: MobileFrameNavigationProps) {
   return (
     <BottomNavigation
       {...rest}

package/src/page-frame/mobile/components/navigation/index.tsx

@@ -0,0 +1,8 @@
+import "../../styles/navigation.scss";
+import { MobileFrameNavigation } from "./Navigation";
+
+const Navigation = MobileFrameNavigation;
+
+export default Navigation;
+export { MobileFrameNavigation };
+export type { MobileFrameNavigationProps } from "./Navigation";

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

@@ -0,0 +1,29 @@
+import clsx from "clsx";
+import type { MobileFrameContainerProps } from "../../types";
+
+const SHELL_CLASS = "page-frame-mobile-shell";
+const SHELL_HEADER_CLASS = `${SHELL_CLASS}-header`;
+const SHELL_BODY_CLASS = `${SHELL_CLASS}-body`;
+const SHELL_FOOTER_CLASS = `${SHELL_CLASS}-footer`;
+
+/**
+ * 모바일 전용 페이지 컨테이너; header/body/footer 영역을 순서대로 배치한다.
+ * @component
+ */
+export function MobileFrameContainer({
+  className,
+  header,
+  headerClassName,
+  bodyClassName,
+  footer,
+  footerClassName,
+  children,
+}: MobileFrameContainerProps) {
+  return (
+    <div className={clsx(SHELL_CLASS, className)}>
+      <div className={clsx(SHELL_HEADER_CLASS, headerClassName)}>{header}</div>
+      <div className={clsx(SHELL_BODY_CLASS, bodyClassName)}>{children}</div>
+      <div className={clsx(SHELL_FOOTER_CLASS, footerClassName)}>{footer}</div>
+    </div>
+  );
+}

package/src/page-frame/mobile/{PageFrameMobile.tsx → components/page/Frame.tsx}

@@ -1,17 +1,17 @@
 "use client";
 
 import clsx from "clsx";
-import { PageFrameContainer } from "../container";
-import { PageFrameNavigation } from "../navigation";
-import type { PageFrameMobileProps } from "./types";
+import { MobileFrameContainer } from "./Container";
+import { MobileFrameNavigation } from "../navigation";
+import type { MobileFrameProps } from "../../types";
 import React, { useCallback } from "react";
 
 /**
  * 모바일 전용 Page Frame 래퍼; 공통 컨테이너 위에 모바일 클래스/스타일을 덧입힌다.
  * @component
- * @param {PageFrameMobileProps} props
+ * @param {MobileFrameProps} props
  */
-export function PageFrameMobile({
+export function MobileFrame({
   className,
   header,
   headerClassName,
@@ -19,17 +19,18 @@ export function PageFrameMobile({
   footer,
   footerClassName,
   navigationProps,
+  children,
   ...rest
-}: PageFrameMobileProps) {
+}: MobileFrameProps) {
   const Footer = useCallback(
     (): React.ReactNode =>
       footer ??
-      (navigationProps ? <PageFrameNavigation {...navigationProps} /> : null),
+      (navigationProps ? <MobileFrameNavigation {...navigationProps} /> : null),
     [footer, navigationProps],
   );
 
   return (
-    <PageFrameContainer
+    <MobileFrameContainer
       {...rest}
       className={clsx("page-frame-mobile", className)}
       header={header}
@@ -37,6 +38,8 @@ export function PageFrameMobile({
       bodyClassName={clsx("page-frame-mobile-body", bodyClassName)}
       footer={<Footer />}
       footerClassName={clsx("page-frame-mobile-footer", footerClassName)}
-    />
+    >
+      {children}
+    </MobileFrameContainer>
   );
 }

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

@@ -0,0 +1,11 @@
+import { MobileFrameContainer } from "./Container";
+import { MobileFrame } from "./Frame";
+
+const Page = {
+  Frame: MobileFrame,
+  Container: MobileFrameContainer,
+  Shell: MobileFrameContainer,
+};
+
+export default Page;
+export { MobileFrameContainer, MobileFrame };

package/src/page-frame/mobile/index.scss

@@ -1,17 +1,3 @@
-.page-frame-mobile {
-  width: 100%;
-  height: 100%;
-  min-height: var(--uds-page-frame-height, var(--frame-device-height, 812px));
-  max-height: 100dvh;
-  background-color: var(--color-common-100, #ffffff);
-}
-
-.page-frame-mobile-header,
-.page-frame-mobile-body,
-.page-frame-mobile-footer {
-  width: 100%;
-}
-
-.page-frame-mobile-body {
-  background-color: inherit;
-}
+@use "./styles/mobile.scss";
+@use "./styles/header.scss";
+@use "./styles/navigation.scss";

package/src/page-frame/mobile/index.tsx

@@ -1,4 +1,7 @@
 import "./index.scss";
 
-export { PageFrameMobile } from "./PageFrameMobile";
-export type { PageFrameMobileProps } from "./types";
+import { MobileFrame } from "./components/page/Frame";
+
+export type { MobileFrameProps } from "./types";
+export * from "./components";
+export { MobileFrame };

package/src/page-frame/{container/index.scss → mobile/styles/mobile.scss}

@@ -16,7 +16,7 @@
   ); // PC에선 지정 폭으로 중앙 정렬하고, 모바일에선 100%를 유지
 }
 
-.page-frame-container {
+.page-frame-mobile-shell {
   display: grid;
   grid-template-rows: auto 1fr auto;
   width: min(100%, var(--uds-page-frame-max-width));
@@ -28,21 +28,39 @@
   color: inherit;
 }
 
-.page-frame-header,
-.page-frame-body,
-.page-frame-footer {
+.page-frame-mobile-shell-header,
+.page-frame-mobile-shell-body,
+.page-frame-mobile-shell-footer {
   width: 100%;
 }
 
-.page-frame-header {
+.page-frame-mobile-shell-header {
   padding-top: var(--uds-page-frame-header-padding-top);
 }
 
-.page-frame-body {
+.page-frame-mobile-shell-body {
   min-height: 0;
   overflow-y: auto;
 }
 
-.page-frame-footer {
+.page-frame-mobile-shell-footer {
   padding-bottom: var(--uds-page-frame-footer-safe-area);
 }
+
+.page-frame-mobile {
+  width: 100%;
+  height: 100%;
+  min-height: var(--uds-page-frame-height, var(--frame-device-height, 812px));
+  max-height: 100dvh;
+  background-color: var(--color-common-100, #ffffff);
+}
+
+.page-frame-mobile-header,
+.page-frame-mobile-body,
+.page-frame-mobile-footer {
+  width: 100%;
+}
+
+.page-frame-mobile-body {
+  background-color: inherit;
+}

package/src/page-frame/mobile/types/index.ts

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

package/src/page-frame/mobile/types/page.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import type { MobileFrameNavigationProps } from "../components/navigation";
+
+export type MobileFrameContainerProps = {
+  className?: string;
+  header?: ReactNode;
+  headerClassName?: string;
+  bodyClassName?: string;
+  footer?: ReactNode;
+  footerClassName?: string;
+  children: ReactNode;
+};
+
+export interface MobileFrameProps extends MobileFrameContainerProps {
+  navigationProps?: MobileFrameNavigationProps;
+}

package/src/weather/components/icon/Address.tsx

@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 
-import assetUrl from "../../../../asset-url";
+import assetUrl from "../../../asset-url";
 
 export default function WeatherAddressIcon() {
   return (

package/src/weather/components/icon/Weather.tsx

@@ -1,7 +1,7 @@
 import Image from "next/image";
 import clsx from "clsx";
 
-import assetUrl from "../../../../asset-url";
+import assetUrl from "../../../asset-url";
 
 /**
  * 날씨; 아이콘

package/src/page-frame/container/PageFrameContainer.tsx

@@ -1,24 +0,0 @@
-import clsx from "clsx";
-import type { PageFrameContainerProps } from "./types";
-
-/**
- * 페이지 공통 컨테이너; header/body/footer 영역을 순서대로 배치한다.
- * @component
- */
-export function PageFrameContainer({
-  className,
-  header,
-  headerClassName,
-  bodyClassName,
-  footer,
-  footerClassName,
-  children,
-}: PageFrameContainerProps) {
-  return (
-    <div className={clsx("page-frame-container", className)}>
-      <div className={clsx("page-frame-header", headerClassName)}>{header}</div>
-      <div className={clsx("page-frame-body", bodyClassName)}>{children}</div>
-      <div className={clsx("page-frame-footer", footerClassName)}>{footer}</div>
-    </div>
-  );
-}

package/src/page-frame/container/index.tsx

@@ -1,4 +0,0 @@
-import "./index.scss";
-
-export { PageFrameContainer } from "./PageFrameContainer";
-export type { PageFrameContainerProps } from "./types";

package/src/page-frame/container/types.ts

@@ -1,11 +0,0 @@
-import type { ReactNode } from "react";
-
-export type PageFrameContainerProps = {
-  className?: string;
-  header?: ReactNode;
-  headerClassName?: string;
-  bodyClassName?: string;
-  footer?: ReactNode;
-  footerClassName?: string;
-  children: ReactNode;
-};

package/src/page-frame/mobile/header/index.ts

@@ -1,4 +0,0 @@
-export {
-  PageFrameMobileHeader as PageFrameMobileHeader,
-  type PageFrameMobileHeaderProps,
-} from "./PageFrameMobileHeader";

package/src/page-frame/mobile/types.ts

@@ -1,6 +0,0 @@
-import type { PageFrameContainerProps } from "../container";
-import type { PageFrameNavigationProps } from "../navigation";
-
-export interface PageFrameMobileProps extends PageFrameContainerProps {
-  navigationProps?: PageFrameNavigationProps;
-}

package/src/page-frame/navigation/index.tsx

@@ -1,4 +0,0 @@
-import "./index.scss";
-
-export { PageFrameNavigation } from "./PageFrameNavigation";
-export type { PageFrameNavigationProps } from "./PageFrameNavigation";