@uniai-fe/uds-templates 0.1.1 → 0.1.2

package/README.md

@@ -125,6 +125,12 @@ export default function LoginPage() {
 
 > modules 레포 내부(Storybook 등)에서는 개발 편의를 위해 `@uniai-fe/uds-templates/src/index.scss`를 직접 import하지만, 외부 서비스/패키지는 `@uniai-fe/uds-templates/css` 엔트리만 사용해야 한다.
 
+### 토큰 스코프 & ThemeProvider
+
+- templates SCSS는 모든 디자인 토큰을 `:root`에 선언하고, 빌드 시 `scripts/merge-theme-root.mjs`가 토큰 블록을 단일 `:root { ... }`로 합쳐 중복 선언을 제거합니다.
+- 서비스 앱은 foundation ThemeProvider가 주입하는 `.uds-theme-root`를 루트에 유지해야 하며, CSS import 순서는 `@uniai-fe/uds-foundation/css` → `@uniai-fe/uds-primitives/css` → `@uniai-fe/uds-templates/css` 입니다.
+- modules 레포(Storybook 등)는 SCSS 원본을 직접 사용하지만, 외부 프로젝트는 CSS 엔트리만 import한다는 규칙을 README/CODEX-RULES에 명시하고 있습니다.
+
 ## Modal 모듈 사용법
 
 ui-legacy에서 사용하던 모달 스택/옵션을 templates 레이어로 옮겨왔습니다. 핵심 흐름은 다음과 같습니다.

package/dist/styles.css

@@ -1,6 +1,4 @@
 @charset "UTF-8";
-/* templates styles는 foundation/primitives 순으로 import된 이후를 가정한다. */
-/* 템플릿 레벨 스타일을 통합해 서비스 앱이 단일 엔트리만 import하도록 구성한다. */
 :root {
   --frame-device-height: 812px;
   --frame-device-width: 480px;
@@ -10,11 +8,32 @@
   --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(
-    --frame-device-width,
-    480px
+  --frame-device-width,
+  480px
+  );
+  --uds-modal-overlay-bg: var(--dialog-overlay-bg, rgba(5, 6, 12, 0.55));
+  --uds-modal-surface-bg: var(--color-bg-surface-static-white);
+  --uds-modal-surface-radius: var(--theme-radius-large-1);
+  --uds-modal-surface-shadow: 0px 18px 40px rgba(8, 11, 30, 0.18);
+  --uds-modal-max-width: min(
+  360px,
+  calc(100vw - var(--spacing-padding-10) * 2)
   );
+  --uds-modal-max-height: calc(100vh - var(--spacing-padding-10) * 2);
+  --auth-container-max-width: 335px;
+  --auth-container-gap: var(--spacing-padding-7, 28px);
+  --auth-container-padding-inline: var(--spacing-padding-6, 24px);
+  --auth-container-padding-top: calc(
+  var(--spacing-padding-9, 32px) + env(safe-area-inset-top, 0px)
+  );
+  --auth-container-padding-bottom: var(--spacing-padding-10, 40px);
 }
 
+/* templates styles는 foundation/primitives 순으로 import된 이후를 가정한다. */
+/* 템플릿 레벨 스타일을 통합해 서비스 앱이 단일 엔트리만 import하도록 구성한다. */
+/* namespace 충돌을 막기 위해 모든 @use 경로에 고유 alias를 부여한다. */
+
+
 .page-frame-container {
   display: grid;
   grid-template-rows: auto 1fr auto;
@@ -67,17 +86,7 @@
 }
 
 /* foundation CSS는 소비 앱 루트에서 한 번만 로드된다는 전제하에 토큰만 참조한다. */
-:where(.radix-themes, .theme-root, :root) {
-  --uds-modal-overlay-bg: var(--dialog-overlay-bg, rgba(5, 6, 12, 0.55));
-  --uds-modal-surface-bg: var(--color-bg-surface-static-white);
-  --uds-modal-surface-radius: var(--theme-radius-large-1);
-  --uds-modal-surface-shadow: 0px 18px 40px rgba(8, 11, 30, 0.18);
-  --uds-modal-max-width: min(
-    360px,
-    calc(100vw - var(--spacing-padding-10) * 2)
-  );
-  --uds-modal-max-height: calc(100vh - var(--spacing-padding-10) * 2);
-}
+
 
 .uds-modal-root {
   position: fixed;
@@ -260,15 +269,7 @@
     transition: none;
   }
 }
-:root {
-  --auth-container-max-width: 335px;
-  --auth-container-gap: var(--spacing-padding-7, 28px);
-  --auth-container-padding-inline: var(--spacing-padding-6, 24px);
-  --auth-container-padding-top: calc(
-    var(--spacing-padding-9, 32px) + env(safe-area-inset-top, 0px)
-  );
-  --auth-container-padding-bottom: var(--spacing-padding-10, 40px);
-}
+
 
 .auth-container {
   min-height: min(100svh, 100dvh);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,
@@ -39,7 +39,7 @@
     "lint": "eslint . --max-warnings=0",
     "typecheck": "tsc --project tsconfig.build.json --noEmit",
     "build": "pnpm format && pnpm typecheck && pnpm css:build",
-    "css:build": "sass --load-path=node_modules src/index.scss dist/styles.css --style=expanded --no-source-map",
+    "css:build": "sass --load-path=node_modules src/index.scss dist/styles.css --style=expanded --no-source-map && node ./scripts/merge-theme-root.mjs dist/styles.css --selector=:root",
     "dev": "tsc --project tsconfig.build.json --watch --noEmit",
     "module:lint": "pnpm lint",
     "module:typecheck": "pnpm typecheck",

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

@@ -23,11 +23,13 @@ export default function AuthLoginContainer({
         footer={footer}
       >
         <AuthLoginFormField {...fieldOptions} />
-        <AuthLoginLinkButtons
-          hrefFindId={linkOptions.find.id}
-          hrefFindPassword={linkOptions.find.password}
-          hrefSignup={linkOptions.signup}
-        />
+        {linkOptions && (
+          <AuthLoginLinkButtons
+            hrefFindId={linkOptions.find.id}
+            hrefFindPassword={linkOptions.find.password}
+            hrefSignup={linkOptions.signup}
+          />
+        )}
       </AuthContainer>
     </>
   );

package/src/auth/login/types/props.ts

@@ -91,5 +91,5 @@ export type AuthLoginLinkOptions = {
 export type AuthLoginProps<TFields extends AuthLoginFields = AuthLoginFields> =
   Omit<AuthContainerProps, "children"> & {
     fieldOptions: AuthLoginFieldOptions<TFields>;
-    linkOptions: AuthLoginLinkOptions;
+    linkOptions?: AuthLoginLinkOptions;
   };

package/src/index.scss

@@ -2,14 +2,15 @@
 // @use "@uniai-fe/uds-primitives/styles";
 
 /* 템플릿 레벨 스타일을 통합해 서비스 앱이 단일 엔트리만 import하도록 구성한다. */
-@use "./page-frame/container/index.scss" as *;
-@use "./page-frame/mobile/index.scss" as *;
-@use "./page-frame/navigation/index.scss" as *;
-@use "./modal/index.scss" as *;
+/* 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 *;
-@use "./auth/common/complete/index.scss" as *;
-@use "./auth/login/index.scss" as *;
-@use "./auth/find-id/index.scss" as *;
-@use "./auth/find-password/index.scss" as *;
-@use "./auth/signup/styles/signup.scss" as *;
+@use "./auth/common/container/index.scss" as authCommonContainer;
+@use "./auth/common/complete/index.scss" as authCommonComplete;
+@use "./auth/login/index.scss" as authLogin;
+@use "./auth/find-id/index.scss" as authFindId;
+@use "./auth/find-password/index.scss" as authFindPassword;
+@use "./auth/signup/styles/signup.scss" as authSignup;

package/src/modal/styles/base.scss

@@ -1,5 +1,5 @@
 /* foundation CSS는 소비 앱 루트에서 한 번만 로드된다는 전제하에 토큰만 참조한다. */
-:where(.radix-themes, .theme-root, :root) {
+:root {
   --uds-modal-overlay-bg: var(--dialog-overlay-bg, rgba(5, 6, 12, 0.55));
   --uds-modal-surface-bg: var(--color-bg-surface-static-white);
   --uds-modal-surface-radius: var(--theme-radius-large-1);