@uniai-fe/uds-templates 0.1.19 → 0.1.21

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/types/api.ts

@@ -0,0 +1,43 @@
+/**
+ * API 응답; 에러 정보
+ * @property {string} field_name - 에러 필드 이름
+ * @property {string} message - 에러 메세지
+ */
+export interface API_Res_Error {
+  /**
+   * 에러 필드 이름
+   */
+  field_name: string;
+  /**
+   * 에러 메세지
+   */
+  message: string;
+}
+
+/**
+ * API 응답; 기본 구조
+ * - GET, POST, PUT, DELETE 등 모든 API 응답에 공통적으로 사용
+ * @property {string} status - 통신 상태
+ * - "success": 정상 응답
+ * - "fail": 비정상 응답
+ * - "timeout": 타임아웃 응답
+ * @property {ResultDataType} data - 요청 응답 데이터
+ * @property {API_Res_Error[]} errors - 에러 정보
+ */
+export interface API_Res_Base<ResultDataType> {
+  /**
+   * 통신 상태
+   * - "success": 정상 응답
+   * - "fail": 비정상 응답
+   * - "timeout": 타임아웃 응답
+   */
+  status: string;
+  /**
+   * 요청 응답 데이터
+   */
+  data: ResultDataType;
+  /**
+   * 에러 정보
+   */
+  errors: API_Res_Error[];
+}

package/src/types/index.ts

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

package/src/auth/login/types.ts

@@ -1,2 +0,0 @@
-export type * from "./types/props";
-export type * from "./types/hooks";

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