@uniai-fe/uds-templates 0.1.0 → 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,3 +269,501 @@
     transition: none;
   }
 }
+
+
+.auth-container {
+  min-height: min(100svh, 100dvh);
+  padding: var(--auth-container-padding-top) var(--auth-container-padding-inline) calc(var(--auth-container-padding-bottom) + env(safe-area-inset-bottom, 0px));
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--color-common-100, #ffffff);
+  color: inherit;
+}
+
+.auth-container__inner {
+  width: min(100%, var(--auth-container-max-width, 335px));
+  display: flex;
+  flex-direction: column;
+  gap: var(--auth-container-gap);
+  margin-block: auto;
+}
+
+.auth-container__header {
+  width: 100%;
+}
+
+.auth-container__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-6, 24px);
+}
+
+.auth-container__footer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-4, 16px);
+}
+
+.auth-container__footer {
+  margin-top: auto;
+}
+
+.auth-complete-container {
+  width: 100%;
+}
+
+.auth-complete-wrapper {
+  text-align: center;
+}
+
+.auth-complete-icon {
+  width: 60px;
+  height: 60px;
+  margin: 0 auto 12px;
+}
+
+.auth-complete-icon svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.auth-complete-title {
+  font-size: var(--font-heading-medium-size, 24px);
+  font-weight: var(--font-heading-medium-weight, 600);
+  color: var(--color-cool-gray-20);
+  line-height: var(--font-heading-medium-line-height, 1.4em);
+}
+
+.auth-complete-description {
+  margin-top: 4px;
+  font-size: var(--font-caption-large-size, 12px);
+  color: var(--color-label-standard);
+  line-height: var(--font-caption-large-line-height, 1.5em);
+}
+
+.auth-complete-contents {
+  width: 100%;
+  margin-top: var(--spacing-padding-4, 16px);
+}
+
+.auth-login-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-7, 28px);
+  margin-top: var(--spacing-padding-10, 40px);
+}
+
+.auth-login-fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-5, 20px);
+}
+
+.auth-login-util-container {
+  margin-top: 80px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-6, 24px);
+}
+
+.auth-login-find-account {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  --divider-height: 13px;
+  --divider-color: var(--color-label-neutral);
+}
+
+.auth-login-find-account-button {
+  color: var(--color-label-standard);
+  font-size: 13px;
+  line-height: 1em;
+  font-weight: 400;
+  padding-inline: var(--spacing-padding-1, 4px);
+}
+.auth-login-find-account-button:hover {
+  color: var(--color-primary-50, #2563eb);
+}
+
+.auth-login-signup {
+  display: flex;
+  justify-content: center;
+}
+
+.auth-login-signup-button {
+  text-decoration: none;
+  min-width: 160px;
+  justify-content: center;
+  --theme-button-font-label-medium-size: var(--font-caption-medium-size);
+}
+
+.auth-find-account-container {
+  width: 100%;
+}
+
+.auth-find-account-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-6, 24px);
+}
+
+.auth-find-account-fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-5, 20px);
+}
+
+.auth-find-account-form--code .auth-find-account-fields {
+  margin-bottom: var(--spacing-padding-4, 16px);
+}
+
+.auth-find-account-email-block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-3, 12px);
+  margin-bottom: var(--spacing-padding-7, 28px);
+}
+
+.auth-find-account-email-label {
+  color: var(--color-label-standard, var(--primitive-coolgray-20, #3d3f43));
+  font-size: var(--font-label-small-size, 13px);
+  line-height: 1.5;
+  margin: 0;
+}
+
+.auth-find-account-email-field {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--color-border-standard, var(--primitive-coolgray-90, #e4e5e7));
+  min-height: var(--spacing-padding-14, 56px);
+  padding-bottom: var(--spacing-padding-2, 8px);
+}
+
+.auth-find-account-email-value {
+  font-size: var(--font-body-large-size, 19px);
+  color: var(--color-label-strong, var(--primitive-coolgray-10, #18191b));
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.auth-find-account-email-helper {
+  font-size: var(--font-caption-medium-size, 12px);
+  color: var(--color-label-alternative, var(--primitive-coolgray-50, #afb1b6));
+  margin: 0;
+}
+
+.auth-find-account-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-padding-4, 16px);
+}
+
+.auth-find-account-timer-text {
+  font-size: var(--font-caption-medium-size, 12px);
+  color: var(--color-primary-50, #2563eb);
+}
+
+.auth-find-account-timer-helper,
+.auth-find-account-helper {
+  font-size: var(--font-caption-medium-size, 12px);
+  color: var(--color-label-neutral, var(--primitive-coolgray-40, #797e86));
+  margin: 0;
+}
+
+.auth-find-account-result-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-2, 8px);
+  padding: var(--spacing-padding-7, 28px);
+  border-radius: var(--shape-rounded-3, 16px);
+  background: var(--color-background-subtle);
+  margin-bottom: var(--spacing-padding-6, 24px);
+}
+
+.auth-find-account-result-label {
+  font-size: var(--font-caption-medium-size, 12px);
+  color: var(--color-label-assistive);
+  margin: 0;
+}
+
+.auth-find-account-result-value {
+  font-size: var(--font-heading-medium-size, 21px);
+  font-weight: 700;
+  color: var(--color-label-strong);
+  margin: 0;
+  word-break: break-word;
+}
+
+.auth-find-account-result-sub {
+  font-size: var(--font-body-medium-size, 15px);
+  color: var(--color-label-standard);
+  margin: 0;
+}
+
+.auth-find-account-result-helper {
+  font-size: var(--font-caption-medium-size, 12px);
+  color: var(--color-label-assistive);
+  margin: 0;
+}
+
+.auth-find-account-id-summary {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-padding-4, 16px);
+  width: 100%;
+}
+
+.auth-find-account-id-summary-card {
+  width: fit-content;
+  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));
+}
+
+.auth-find-account-id-summary-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-padding-5, 20px);
+  margin: var(--spacing-gap-5, 12px) 0;
+}
+.auth-find-account-id-summary-row .auth-find-account-id-summary-text {
+  font-size: 0;
+}
+.auth-find-account-id-summary-row .auth-find-account-id-summary-text span {
+  font-size: var(--font-caption-large-size);
+  line-height: var(--font-caption-large-line-height);
+}
+.auth-find-account-id-summary-row dt {
+  color: var(--color-label-neutral);
+}
+.auth-find-account-id-summary-row dd {
+  color: var(--color-label-strong);
+}
+
+.auth-find-account-password-rules {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-2, 8px);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.auth-find-account-password-rule {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-padding-3, 12px);
+  font-size: var(--font-body-medium-size, 15px);
+  color: var(--color-label-assistive);
+}
+
+.auth-find-account-password-rule::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-border-standard);
+  flex-shrink: 0;
+}
+
+.auth-find-account-password-rule[data-satisfied=true] {
+  color: var(--color-label-positive);
+}
+
+.auth-find-account-password-rule[data-satisfied=true]::before {
+  background: var(--color-label-positive);
+}
+
+.auth-find-account-password-helper {
+  font-size: var(--font-caption-medium-size, 12px);
+  color: var(--color-label-neutral);
+  margin: 0;
+}
+
+.auth-signup-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-8, 32px);
+  margin-top: var(--spacing-padding-9, 36px);
+}
+
+.auth-signup-fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-5, 20px);
+}
+
+.auth-signup-verification {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-9, 36px);
+}
+
+.auth-signup-agreements {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-4, 16px);
+  background: var(--color-background-subtle);
+  border-radius: var(--shape-rounded-3, 16px);
+  padding: var(--spacing-padding-5, 20px);
+}
+
+.auth-signup-agreement-all {
+  background: var(--color-background-soft, #f2f2f3);
+  border-radius: var(--shape-rounded-2, 12px);
+  padding: var(--spacing-padding-4, 16px);
+}
+
+.auth-signup-agreements-list {
+  width: 100%;
+  background: var(--color-common-100, #ffffff);
+  border-radius: var(--shape-rounded-2, 12px);
+  padding: var(--spacing-padding-4, 16px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-3, 12px);
+}
+
+.auth-signup-agreement-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-padding-3, 12px);
+}
+
+.auth-signup-agreement-toggle {
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-padding-3, 12px);
+  cursor: pointer;
+  flex: 1;
+  text-align: left;
+  flex-wrap: nowrap;
+  font-size: 14px;
+}
+
+.auth-signup-agreement-icon {
+  width: 20px;
+  height: 20px;
+  color: var(--color-label-assistive, #94989e);
+  flex-shrink: 0;
+}
+.auth-signup-agreement-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.auth-signup-agreement-icon svg path {
+  stroke: currentColor;
+}
+
+.auth-signup-agreement-toggle[data-checked=true] .auth-signup-agreement-icon {
+  color: var(--color-primary-default);
+  border-color: var(--color-primary-default);
+}
+
+.auth-signup-agreement-label {
+  display: inline-flex;
+  gap: var(--spacing-padding-1, 4px);
+  align-items: baseline;
+  flex-wrap: nowrap;
+}
+
+.auth-signup-agreement-badge {
+  font-size: 14px;
+  color: var(--color-primary-default);
+}
+.auth-signup-agreement-badge[data-required=false] {
+  color: var(--color-label-standard);
+}
+
+.auth-signup-agreement-title {
+  font-size: 14px;
+  color: var(--color-label-standard);
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+.auth-signup-agreement-description {
+  font-size: 13px;
+  color: var(--color-label-assistive);
+  margin: 0;
+  padding-left: calc(20px + var(--spacing-padding-3, 12px));
+}
+
+.auth-signup-agreement-detail {
+  border: none;
+  background: none;
+  color: var(--color-label-assistive);
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+.auth-signup-agreement-detail svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.auth-signup-agreement-detail:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.auth-signup-agreement-detail:hover svg path {
+  fill: var(--color-label-standard);
+}
+
+.auth-signup-complete {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-7, 28px);
+  text-align: center;
+}
+
+.auth-signup-complete-illustration {
+  display: flex;
+  justify-content: center;
+}
+
+.auth-signup-complete-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--color-label-standard);
+  margin: 0;
+}
+
+.auth-signup-complete-description {
+  margin: var(--spacing-padding-2, 8px) 0 0;
+  color: var(--color-label-assistive);
+}
+
+.auth-signup-complete-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-4, 16px);
+}
+
+.auth-signup-agreement-drawer-body p {
+  font-weight: 400;
+  color: var(--color-label-standard);
+  font-size: var(--font-body-xxsmall-size);
+  line-height: 1.5em;
+  letter-spacing: 0px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.1.0",
+  "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/common/find/styles/result.scss

@@ -49,7 +49,7 @@
   border-radius: var(--theme-radius-medium-3, 8px);
   background: var(
     --color-background-alternative-cool_gray,
-    var(--colot-cool-gray-95, #f2f2f3)
+    var(--color-cool-gray-95, #f2f2f3)
   );
 }
 

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,7 +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 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);