@uniai-fe/uds-templates 0.1.16 → 0.1.18

package/dist/styles.css

@@ -4,10 +4,14 @@
   --frame-device-width: 480px;
   --frame-safe-area-top: env(safe-area-inset-top, 0px);
   --frame-safe-area-bottom: env(safe-area-inset-bottom, 0px);
-  --page-frame-height: min(100svh, 100dvh, var(--frame-device-height, 812px));
-  --page-frame-header-padding-top: var(--frame-safe-area-top);
-  --page-frame-footer-safe-area: var(--frame-safe-area-bottom);
-  --page-frame-max-width: var(
+  --uds-page-frame-height: min(
+  100svh,
+  100dvh,
+  var(--frame-device-height, 812px)
+  );
+  --uds-page-frame-header-padding-top: var(--frame-safe-area-top);
+  --uds-page-frame-footer-safe-area: var(--frame-safe-area-bottom);
+  --uds-page-frame-max-width: var(
   --frame-device-width,
   480px
   );
@@ -49,9 +53,9 @@
 .page-frame-container {
   display: grid;
   grid-template-rows: auto 1fr auto;
-  width: min(100%, var(--page-frame-max-width));
+  width: min(100%, var(--uds-page-frame-max-width));
   margin: 0 auto;
-  height: var(--page-frame-height);
+  height: var(--uds-page-frame-height);
   background-color: var(--color-common-100, #ffffff);
   color: inherit;
 }
@@ -63,7 +67,7 @@
 }
 
 .page-frame-header {
-  padding-top: var(--page-frame-header-padding-top);
+  padding-top: var(--uds-page-frame-header-padding-top);
 }
 
 .page-frame-body {
@@ -72,13 +76,13 @@
 }
 
 .page-frame-footer {
-  padding-bottom: var(--page-frame-footer-safe-area);
+  padding-bottom: var(--uds-page-frame-footer-safe-area);
 }
 
 .page-frame-mobile {
   width: 100%;
   height: 100%;
-  min-height: var(--page-frame-height, var(--frame-device-height, 812px));
+  min-height: var(--uds-page-frame-height, var(--frame-device-height, 812px));
   max-height: 100dvh;
   background-color: var(--color-common-100, #ffffff);
 }
@@ -536,7 +540,7 @@
   min-width: 230px;
   padding: 0 var(--spacing-padding-6, 16px);
   border-radius: var(--theme-radius-medium-3, 8px);
-  background: var(--color-background-alternative-cool_gray, var(--color-cool-gray-95, #f2f2f3));
+  background: var(--color-background-alternative-cool-gray, var(--color-cool-gray-95, #f2f2f3));
 }
 
 .auth-find-account-id-summary-row {
@@ -779,3 +783,128 @@
   line-height: 1.5em;
   letter-spacing: 0px;
 }
+
+.weather-base-container, .weather-next-days-container, .weather-today-container {
+  width: fit-content;
+  display: flex;
+  align-items: center;
+}
+.weather-base-container span, .weather-next-days-container span, .weather-today-container span {
+  font-size: 1.4rem;
+}
+
+.weather-base-icon {
+  width: 2.5rem;
+  height: 2.4rem;
+  position: relative;
+}
+
+.weather-base-text-info, .weather-next-days-text {
+  display: flex;
+  align-items: center;
+}
+.weather-base-text-info dt, .weather-next-days-text dt {
+  margin-right: 0.8rem;
+  font-size: 0;
+}
+.weather-base-text-info dt span, .weather-next-days-text dt span {
+  color: var(--color-cool-gray-35);
+}
+.weather-base-text-info dd, .weather-next-days-text dd {
+  font-size: 0;
+  display: flex;
+  align-items: flex-start;
+}
+.weather-base-text-info dd span, .weather-next-days-text dd span {
+  color: var(--color-cool-gray-10);
+  font-weight: 600;
+}
+
+.weather-base-divider {
+  width: 1px;
+  height: 1.3rem;
+  margin: 0 0.8rem;
+  background: var(--color-cool-gray-85);
+}
+
+.weather-address {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+}
+.weather-address-icon {
+  width: 1.6rem;
+  height: 1.6rem;
+  margin-right: 0.4rem;
+  position: relative;
+}
+.weather-address-text {
+  width: fit-content;
+  margin-right: 1rem;
+  display: flex;
+  align-items: center;
+}
+.weather-address-text span {
+  font-size: 1.6rem;
+  color: var(--color-cool-gray-10);
+  font-weight: 600;
+  white-space: nowrap;
+  transform: translateY(0.1rem);
+}
+
+.weather-today-container span {
+  white-space: nowrap;
+}
+.weather-today-container .empty-text {
+  font-size: 1.4rem;
+  padding-right: 4rem;
+}
+
+.weather-today-temperature {
+  margin-left: 1rem;
+  display: flex;
+  align-items: flex-start;
+}
+.weather-today-temperature span {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--color-blue-55);
+}
+.weather-today-temperature .unit {
+  font-size: 1.2rem;
+}
+
+.weather-today-humidity {
+  margin-left: 1.4rem;
+}
+
+.weather-alert {
+  width: fit-content;
+  height: 2.6rem;
+  padding: 0 1rem;
+  margin-left: 1rem;
+  border-radius: 0.8rem;
+  background-color: var(--color-cool-gray-95, #f4f6f8);
+  display: flex;
+  align-items: center;
+}
+.weather-alert-text {
+  height: fit-content;
+  font-size: 0;
+}
+.weather-alert-text span {
+  font-size: 1.2rem;
+  color: var(--color-blue-55, #007cdb);
+  font-weight: 600;
+  line-height: 1.6;
+}
+
+.weather-next-days-text dt {
+  margin-right: 0.8rem;
+}
+.weather-next-days-text dd:nth-of-type(n + 2) {
+  margin-left: 0.8rem;
+}
+.weather-next-days-text dd:nth-of-type(n + 2) .unit {
+  font-size: 1rem;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,
@@ -12,7 +12,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "packageManager": "pnpm@10.27.0",
+  "packageManager": "pnpm@10.28.0",
   "engines": {
     "node": ">=24",
     "pnpm": ">=10"
@@ -48,13 +48,16 @@
     "design-templates:dev": "pnpm run dev"
   },
   "peerDependencies": {
-    "@uniai-fe/uds-foundation": "^0.0.1",
-    "@uniai-fe/uds-primitives": "^0.0.2",
-    "react": ">= 19",
-    "react-dom": ">= 19",
-    "react-hook-form": ">= 7",
+    "@uniai-fe/uds-foundation": "^0.1.0",
+    "@uniai-fe/uds-primitives": "^0.1.0",
+    "@uniai-fe/util-functions": "^0.2.0",
+    "@uniai-fe/util-next": "^0.2.0",
+    "@tanstack/react-query": "^5",
+    "jotai": "^2",
     "next": "^15",
-    "jotai": ">= 2"
+    "react": "^19",
+    "react-dom": "^19",
+    "react-hook-form": "^7"
   },
   "dependencies": {
     "clsx": "^2.1.1",
@@ -63,18 +66,22 @@
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^24.10.2",
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.8",
     "@types/react-dom": "^19.2.3",
     "@uniai-fe/eslint-config": "workspace:*",
     "@uniai-fe/next-devkit": "workspace:*",
+    "@uniai-fe/react-hooks": "workspace:*",
     "@uniai-fe/tsconfig": "workspace:*",
     "@uniai-fe/uds-foundation": "workspace:*",
     "@uniai-fe/uds-primitives": "workspace:*",
+    "@uniai-fe/util-functions": "workspace:*",
+    "@uniai-fe/util-next": "workspace:*",
+    "@tanstack/react-query": "^5.90.16",
     "eslint": "^9.39.2",
+    "jotai": "^2.16.1",
     "next": "^15.5.9",
     "prettier": "^3.7.4",
-    "react-hook-form": "^7.70.0",
-    "jotai": "^2.16.1",
+    "react-hook-form": "^7.71.0",
     "sass": "^1.97.2",
     "typescript": "~5.9.3"
   }

package/src/auth/common/complete/Template.tsx

@@ -17,6 +17,9 @@ export default function AuthCompleteTemplate({
 }: AuthCompleteTemplateProps) {
   const confirmButtonProps = {
     type: "button" as const,
+    fill: "solid" as const,
+    size: "medium" as const,
+    priority: "primary" as const,
     block: true,
     ...cta?.buttonProps,
   };

package/src/auth/common/complete/types.ts

@@ -3,7 +3,10 @@ import type { ButtonProps } from "@uniai-fe/uds-primitives";
 
 export type AuthCompleteCTA = {
   label: ReactNode;
-  buttonProps?: Omit<ButtonProps, "children">;
+  /**
+   * Button 기본 옵션은 템플릿이 채우므로 부분 지정만 허용한다.
+   */
+  buttonProps?: Partial<Omit<ButtonProps, "children">>;
 };
 
 export type AuthCompleteTemplateProps = {

package/src/auth/common/find/markup/CodeStep.tsx

@@ -59,7 +59,8 @@ export function FindAccountCodeStep({
 
   const submitButtonProps = {
     type: "submit" as const,
-    scale: "solid-xlarge" as const,
+    fill: "solid" as const,
+    size: "xlarge" as const,
     priority: "primary" as const,
     block: true,
     ...cta?.buttonProps,

package/src/auth/common/find/markup/InfoStep.tsx

@@ -60,7 +60,8 @@ export function FindAccountInfoStep({
 
   const buttonProps = {
     type: "submit" as const,
-    scale: "solid-xlarge" as const,
+    fill: "solid" as const,
+    size: "xlarge" as const,
     priority: "primary" as const,
     block: true,
     ...cta?.buttonProps,

package/src/auth/common/find/styles/result.scss

@@ -48,7 +48,7 @@
   padding: 0 var(--spacing-padding-6, 16px);
   border-radius: var(--theme-radius-medium-3, 8px);
   background: var(
-    --color-background-alternative-cool_gray,
+    --color-background-alternative-cool-gray,
     var(--color-cool-gray-95, #f2f2f3)
   );
 }

package/src/auth/find-password/markup/StepResetPassword.tsx

@@ -80,7 +80,8 @@ export default function FindPasswordStepReset({
 
   const buttonProps = {
     type: "submit" as const,
-    scale: "solid-xlarge" as const,
+    fill: "solid" as const,
+    size: "xlarge" as const,
     priority: "primary" as const,
     block: true,
     ...cta?.buttonProps,

package/src/auth/login/markup/FormField.tsx

@@ -104,7 +104,8 @@ export default function AuthLoginFormField<
         />
         <Button.Default
           type="submit"
-          scale="solid-xlarge"
+          fill="solid"
+          size="xlarge"
           priority="primary"
           block
           disabled={disabled}

package/src/auth/signup/markup/AccountForm.tsx

@@ -101,7 +101,8 @@ export function AuthSignupAccountForm({
         </div>
         <Button.Default
           type="submit"
-          scale="solid-xlarge"
+          fill="solid"
+          size="xlarge"
           priority="primary"
           block
           disabled={disabled}

package/src/auth/signup/markup/Complete.tsx

@@ -24,7 +24,8 @@ export function AuthSignupComplete({
     <div className="auth-signup-complete-actions">
       <Button.Default
         type="button"
-        scale="solid-xlarge"
+        fill="solid"
+        size="xlarge"
         priority="secondary"
         block
         disabled={secondaryAction.disabled}

package/src/auth/signup/markup/UserInfoForm.tsx

@@ -95,7 +95,8 @@ export function AuthSignupUserInfoForm({
       </div>
       <Button.Default
         type="submit"
-        scale="solid-xlarge"
+        fill="solid"
+        size="xlarge"
         priority="primary"
         block
         disabled={disabled}

package/src/auth/signup/markup/VerificationForm.tsx

@@ -338,7 +338,8 @@ export function AuthSignupVerificationForm({
       ) : null}
       <Button.Default
         type="submit"
-        scale="solid-xlarge"
+        fill="solid"
+        size="xlarge"
         priority="primary"
         block
         disabled={ctaDisabled}
@@ -367,7 +368,8 @@ export function AuthSignupVerificationForm({
             <DrawerFooter>
               <Button.Default
                 type="button"
-                scale="solid-medium"
+                fill="solid"
+                size="medium"
                 priority="primary"
                 block
                 onClick={handleCloseDrawer}

package/src/index.scss

@@ -14,3 +14,4 @@
 @use "./auth/find-id/index.scss" as authFindId;
 @use "./auth/find-password/index.scss" as authFindPassword;
 @use "./auth/signup/styles/signup.scss" as authSignup;
+@use "./weather/styles/weather.scss" as weatherStyles;

package/src/index.tsx

@@ -1,3 +1,4 @@
 export * from "./page-frame";
 export * from "./auth";
 export * from "./modal";
+export * from "./weather";

package/src/modal/core/components/FooterButtons.tsx

@@ -117,11 +117,14 @@ export function ModalFooterButtons({
           );
         }
 
+        const fill = defaultOptions.fill ?? "solid";
+        const size = defaultOptions.size ?? "large";
         return (
           <Button.Default
             key={buttonKey}
             {...commonProps}
-            scale={defaultOptions.scale ?? "solid-large"}
+            fill={fill}
+            size={size}
             priority={defaultOptions.priority ?? "primary"}
           >
             {defaultOptions.label}

package/src/modal/templates/Dialog.tsx

@@ -73,7 +73,8 @@ export function createDialogModal({
                   // cancel 버튼은 secondary solid 규격으로 일관된 스킨을 유지한다.
                   defaultOptions: {
                     label: cancel.label ?? DEFAULT_DIALOG_CANCEL,
-                    scale: "solid-large",
+                    fill: "solid",
+                    size: "large",
                     priority: "secondary",
                     disabled: cancel.disabled,
                     onClick: cancel.onClick,
@@ -88,7 +89,8 @@ export function createDialogModal({
             // confirm 버튼은 primary solid 규격으로 고정한다.
             defaultOptions: {
               label: primary.label ?? DEFAULT_DIALOG_CONFIRM,
-              scale: "solid-large",
+              fill: "solid",
+              size: "large",
               priority: "primary",
               disabled: primary.disabled,
               onClick: primary.onClick,

package/src/modal/types/footer.ts

@@ -1,7 +1,8 @@
 import type { ReactNode } from "react";
 import type {
+  ButtonFill,
   ButtonPriority,
-  ButtonScale,
+  ButtonSize,
   TextButtonSize,
 } from "@uniai-fe/uds-primitives";
 
@@ -13,7 +14,8 @@ export type ModalFooterButtonDefaultOptions = {
   disabled?: boolean;
   block?: boolean;
   priority?: ButtonPriority;
-  scale?: ButtonScale;
+  fill?: ButtonFill;
+  size?: ButtonSize;
   textSize?: TextButtonSize;
   appearance?: ModalFooterButtonAppearance;
   className?: string;

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

@@ -3,10 +3,14 @@
   --frame-device-width: 480px;
   --frame-safe-area-top: env(safe-area-inset-top, 0px);
   --frame-safe-area-bottom: env(safe-area-inset-bottom, 0px);
-  --page-frame-height: min(100svh, 100dvh, var(--frame-device-height, 812px));
-  --page-frame-header-padding-top: var(--frame-safe-area-top);
-  --page-frame-footer-safe-area: var(--frame-safe-area-bottom);
-  --page-frame-max-width: var(
+  --uds-page-frame-height: min(
+    100svh,
+    100dvh,
+    var(--frame-device-height, 812px)
+  );
+  --uds-page-frame-header-padding-top: var(--frame-safe-area-top);
+  --uds-page-frame-footer-safe-area: var(--frame-safe-area-bottom);
+  --uds-page-frame-max-width: var(
     --frame-device-width,
     480px
   ); // PC에선 지정 폭으로 중앙 정렬하고, 모바일에선 100%를 유지
@@ -15,9 +19,11 @@
 .page-frame-container {
   display: grid;
   grid-template-rows: auto 1fr auto;
-  width: min(100%, var(--page-frame-max-width));
+  width: min(100%, var(--uds-page-frame-max-width));
   margin: 0 auto; // 폭이 남는 PC 환경에서만 중앙 정렬
-  height: var(--page-frame-height); // viewport 변동 시에도 정확한 높이를 강제
+  height: var(
+    --uds-page-frame-height
+  ); // viewport 변동 시에도 정확한 높이를 강제
   background-color: var(--color-common-100, #ffffff);
   color: inherit;
 }
@@ -29,7 +35,7 @@
 }
 
 .page-frame-header {
-  padding-top: var(--page-frame-header-padding-top);
+  padding-top: var(--uds-page-frame-header-padding-top);
 }
 
 .page-frame-body {
@@ -38,5 +44,5 @@
 }
 
 .page-frame-footer {
-  padding-bottom: var(--page-frame-footer-safe-area);
+  padding-bottom: var(--uds-page-frame-footer-safe-area);
 }

package/src/page-frame/desktop/components/header/Container.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import clsx from "clsx";
+import type { ReactNode } from "react";
+import PageHeaderSection from "./Section";
+
+export default function PageHeaderContainer({
+  className,
+  left,
+  right,
+}: {
+  className?: string;
+  left: ReactNode;
+  right: ReactNode;
+}) {
+  return (
+    <header className={clsx("page-frame-header", className)}>
+      <PageHeaderSection direction="left">{left}</PageHeaderSection>
+      <PageHeaderSection direction="right">{right}</PageHeaderSection>
+    </header>
+  );
+}

package/src/page-frame/desktop/components/header/Section.tsx

@@ -0,0 +1,20 @@
+import clsx from "clsx";
+import type { ComponentBaseProps } from "../../../types";
+
+export default function PageHeaderSection({
+  className,
+  direction,
+  children,
+}: ComponentBaseProps & { direction: "left" | "right" }) {
+  return (
+    <div
+      className={clsx(
+        "page-frame-header-section",
+        `page-frame-header-${direction}`,
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,19 @@
+import PageHeaderContainer from "./Container";
+import PageHeaderUtilityContainer from "./util/Container";
+import PageHeaderUtilityItem from "./util/Item";
+import PageHeaderUtilityButton from "./util/Button";
+import PageHeaderSettingButton from "./util/setting/Button";
+import PageHeaderLogoutButton from "./util/Logout";
+
+const Header = {
+  Container: PageHeaderContainer,
+  Utility: {
+    Container: PageHeaderUtilityContainer,
+    Item: PageHeaderUtilityItem,
+    Button: PageHeaderUtilityButton,
+  },
+  Setting: PageHeaderSettingButton,
+  Logout: PageHeaderLogoutButton,
+};
+
+export default Header;

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

@@ -0,0 +1,23 @@
+"use client";
+
+import clsx from "clsx";
+import { Button, type TextButtonProps } from "@uniai-fe/uds-primitives";
+
+export default function PageHeaderUtilityButton({
+  as,
+  className,
+  children,
+  ...props
+}: Omit<TextButtonProps, "size" | "priority">) {
+  return (
+    <Button.Text
+      as={as ?? "button"}
+      className={clsx("page-header-util-button", className)}
+      {...props}
+      priority="tertiary"
+      size="medium"
+    >
+      {children}
+    </Button.Text>
+  );
+}

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

@@ -0,0 +1,18 @@
+"use client";
+
+import clsx from "clsx";
+import type { ReactNode } from "react";
+
+export default function PageHeaderUtilityContainer({
+  className,
+  children,
+}: {
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <ul className={clsx("page-header-util-container", className)}>
+      {children}
+    </ul>
+  );
+}

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

@@ -0,0 +1,13 @@
+"use client";
+
+import clsx from "clsx";
+import type { ComponentBaseProps } from "../../../../types";
+
+export default function PageHeaderUtilityItem({
+  className,
+  children,
+}: ComponentBaseProps) {
+  return (
+    <li className={clsx("page-header-util-item", className)}>{children}</li>
+  );
+}

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

@@ -0,0 +1,26 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import assetsUrl from "../../../../../../asset-url";
+import PageHeaderUtilityItem from "./Item";
+import PageHeaderUtilityButton from "./Button";
+
+export default function PageHeaderLogoutButton({
+  path = "/logout",
+}: {
+  path?: string;
+}) {
+  return (
+    <PageHeaderUtilityItem>
+      <PageHeaderUtilityButton href={path} as={Link}>
+        <Image
+          src={`${assetsUrl}/img/page-header/logout-v2.svg`}
+          alt="로그아웃"
+          width={24}
+          height={24}
+        />
+      </PageHeaderUtilityButton>
+    </PageHeaderUtilityItem>
+  );
+}