@uniai-fe/uds-templates 0.1.19 → 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.19",
+  "version": "0.1.20",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,

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/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/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";