@uniai-fe/uds-templates 0.0.10 → 0.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (119) hide show
  1. package/README.md +88 -1
  2. package/dist/styles.css +2051 -2266
  3. package/package.json +5 -3
  4. package/src/auth/common/complete/Template.tsx +47 -0
  5. package/src/auth/common/complete/img/circle-check-complete.svg +4 -0
  6. package/src/auth/common/complete/index.scss +38 -0
  7. package/src/auth/common/complete/types.ts +15 -0
  8. package/src/auth/common/container/header/StageHeader.tsx +61 -0
  9. package/src/auth/common/container/header/index.tsx +5 -0
  10. package/src/auth/common/container/header/stage-header.scss +50 -0
  11. package/src/{components/auth → auth/common}/container/index.tsx +2 -0
  12. package/src/auth/common/find/hooks/useFindAccountForm.ts +79 -0
  13. package/src/auth/common/find/markup/CodeStep.tsx +166 -0
  14. package/src/auth/common/find/markup/Header.tsx +46 -0
  15. package/src/auth/common/find/markup/InfoStep.tsx +109 -0
  16. package/src/auth/common/find/styles/email.scss +55 -0
  17. package/src/auth/common/find/styles/find-account.scss +4 -0
  18. package/src/auth/common/find/styles/layout.scss +19 -0
  19. package/src/auth/common/find/styles/password.scss +39 -0
  20. package/src/auth/common/find/styles/result.scss +78 -0
  21. package/src/auth/common/find/types/forms.ts +30 -0
  22. package/src/auth/common/find/types/index.ts +121 -0
  23. package/src/auth/common/find/utils/composeFieldProps.ts +45 -0
  24. package/src/auth/common/password/constants.ts +19 -0
  25. package/src/auth/common/password/hooks/useCheckPassword.ts +133 -0
  26. package/src/auth/common/password/img/check-password.svg +3 -0
  27. package/src/auth/common/password/markup/PasswordSetField.tsx +250 -0
  28. package/src/auth/common/password/styles/password-set-field.scss +49 -0
  29. package/src/auth/common/password/types.ts +142 -0
  30. package/src/auth/common/password/utils/composePasswordFieldProps.ts +44 -0
  31. package/src/auth/find-account.ts +28 -0
  32. package/src/auth/find-id/hooks/index.ts +1 -0
  33. package/src/auth/find-id/index.scss +1 -0
  34. package/src/auth/find-id/index.ts +23 -0
  35. package/src/auth/find-id/markup/StepComplete.tsx +58 -0
  36. package/src/auth/find-id/markup/StepIdentify.tsx +46 -0
  37. package/src/auth/find-id/markup/StepVerifyCode.tsx +48 -0
  38. package/src/auth/find-id/types/index.ts +66 -0
  39. package/src/auth/find-password/index.scss +1 -0
  40. package/src/auth/find-password/index.ts +30 -0
  41. package/src/auth/find-password/markup/StepComplete.tsx +30 -0
  42. package/src/auth/find-password/markup/StepIdentify.tsx +45 -0
  43. package/src/auth/find-password/markup/StepResetPassword.tsx +150 -0
  44. package/src/auth/find-password/markup/StepVerifyCode.tsx +48 -0
  45. package/src/auth/index.tsx +41 -0
  46. package/src/{components/auth → auth}/login/index.tsx +1 -7
  47. package/src/{components/auth → auth}/login/markup/Container.tsx +1 -1
  48. package/src/{components/auth → auth}/login/markup/FormField.tsx +2 -2
  49. package/src/{components/auth → auth}/login/types/props.ts +13 -13
  50. package/src/auth/login/types.ts +2 -0
  51. package/src/auth/signup/hooks/index.ts +3 -0
  52. package/src/auth/signup/hooks/useSignupAccountForm.ts +101 -0
  53. package/src/auth/signup/hooks/useSignupUserInfoForm.ts +88 -0
  54. package/src/auth/signup/hooks/useSignupVerificationForm.ts +77 -0
  55. package/src/auth/signup/img/check-agree.svg +3 -0
  56. package/src/auth/signup/img/chevron-open-detail.svg +3 -0
  57. package/src/auth/signup/index.ts +27 -0
  58. package/src/auth/signup/markup/AccountForm.tsx +113 -0
  59. package/src/auth/signup/markup/Complete.tsx +59 -0
  60. package/src/auth/signup/markup/Template.tsx +110 -0
  61. package/src/auth/signup/markup/UserInfoForm.tsx +107 -0
  62. package/src/auth/signup/markup/VerificationForm.tsx +285 -0
  63. package/src/auth/signup/markup/index.ts +5 -0
  64. package/src/auth/signup/styles/signup.scss +187 -0
  65. package/src/auth/signup/types/hooks.ts +86 -0
  66. package/src/auth/signup/types/index.ts +2 -0
  67. package/src/auth/signup/types/props.ts +145 -0
  68. package/src/auth/signup/utils/composeFieldProps.ts +50 -0
  69. package/src/auth/signup/utils/getSignupFieldDefaultValue.ts +40 -0
  70. package/src/index.scss +5 -3
  71. package/src/index.tsx +3 -2
  72. package/src/modal/core/components/Container.tsx +41 -0
  73. package/src/modal/core/components/FooterButtons.tsx +132 -0
  74. package/src/modal/core/components/Provider.tsx +28 -0
  75. package/src/modal/core/components/Root.tsx +93 -0
  76. package/src/modal/core/hooks/useModal.ts +136 -0
  77. package/src/modal/core/jotai/atoms.ts +10 -0
  78. package/src/modal/index.scss +4 -0
  79. package/src/modal/index.tsx +16 -0
  80. package/src/modal/styles/animations.scss +24 -0
  81. package/src/modal/styles/base.scss +45 -0
  82. package/src/modal/styles/container.scss +138 -0
  83. package/src/modal/styles/dimmer.scss +23 -0
  84. package/src/modal/templates/Alert.tsx +104 -0
  85. package/src/modal/templates/Dialog.tsx +112 -0
  86. package/src/modal/types/footer.ts +36 -0
  87. package/src/modal/types/index.ts +21 -0
  88. package/src/modal/types/options.ts +6 -0
  89. package/src/modal/types/state.ts +31 -0
  90. package/src/modal/types/templates.ts +32 -0
  91. package/src/page-frame/mobile/header/PageFrameMobileHeader.tsx +52 -0
  92. package/src/page-frame/mobile/header/index.ts +4 -0
  93. package/src/page-frame/mobile/header/page-frame-mobile-header.scss +48 -0
  94. package/src/page-frame/mobile/img/chevron-backward.svg +3 -0
  95. package/src/components/auth/index.tsx +0 -20
  96. package/src/components/auth/login/types.ts +0 -2
  97. /package/src/{components/auth → auth/common}/container/AuthContainer.tsx +0 -0
  98. /package/src/{components/auth → auth/common}/container/index.scss +0 -0
  99. /package/src/{components/auth → auth/common}/container/types.ts +0 -0
  100. /package/src/{components/auth → auth}/login/data/valid-options.ts +0 -0
  101. /package/src/{components/auth → auth}/login/hooks/index.ts +0 -0
  102. /package/src/{components/auth → auth}/login/hooks/useAuthLoginForm.ts +0 -0
  103. /package/src/{components/auth → auth}/login/index.scss +0 -0
  104. /package/src/{components/auth → auth}/login/markup/LinkButtons.tsx +0 -0
  105. /package/src/{components/auth → auth}/login/styles/login.scss +0 -0
  106. /package/src/{components/auth → auth}/login/types/form.ts +0 -0
  107. /package/src/{components/auth → auth}/login/types/hooks.ts +0 -0
  108. /package/src/{components/page-frame → page-frame}/container/PageFrameContainer.tsx +0 -0
  109. /package/src/{components/page-frame → page-frame}/container/index.scss +0 -0
  110. /package/src/{components/page-frame → page-frame}/container/index.tsx +0 -0
  111. /package/src/{components/page-frame → page-frame}/container/types.ts +0 -0
  112. /package/src/{components/page-frame → page-frame}/index.tsx +0 -0
  113. /package/src/{components/page-frame → page-frame}/mobile/PageFrameMobile.tsx +0 -0
  114. /package/src/{components/page-frame → page-frame}/mobile/index.scss +0 -0
  115. /package/src/{components/page-frame → page-frame}/mobile/index.tsx +0 -0
  116. /package/src/{components/page-frame → page-frame}/mobile/types.ts +0 -0
  117. /package/src/{components/page-frame → page-frame}/navigation/PageFrameNavigation.tsx +0 -0
  118. /package/src/{components/page-frame → page-frame}/navigation/index.scss +0 -0
  119. /package/src/{components/page-frame → page-frame}/navigation/index.tsx +0 -0
package/README.md CHANGED
@@ -29,7 +29,7 @@ Next.js 서비스에서 primitives와 동일한 방식으로 **Raw TypeScript**
29
29
  - **templates**는 레이아웃/플로우/상태 표현까지 담당하고,
30
30
  - API 호출, 인증 토큰 관리, 라우팅, i18n 등 비즈니스 로직은 서비스 앱에서 구현합니다.
31
31
 
32
- ## 현재 제공 템플릿
32
+ ## 현재 제공 템플릿/모듈
33
33
 
34
34
  - `/auth/**`
35
35
  - 로그인 화면 템플릿 (Login)
@@ -39,9 +39,21 @@ Next.js 서비스에서 primitives와 동일한 방식으로 **Raw TypeScript**
39
39
  - `/page-frame/**`
40
40
  - `/page-frame/mobile`: 로그인 이후 화면을 위한 모바일 프레임(header/body/footer)
41
41
  - `/page-frame/pc`: 추후 확장 예정
42
+ - `/modal/**`
43
+ - ui-legacy 스택 기반 모달 Provider/Root/Container + 템플릿(`Modal.Alert`, `Modal.Dialog`)
44
+ - Storybook(`apps/design-storybook/src/stories/templates/modal`)에서 Alert/Confirm 케이스를 검증한다.
42
45
 
43
46
  각 템플릿의 상세한 범위와 의사결정은 `CONTEXT-*.md` 문서에서 관리합니다.
44
47
 
48
+ ### 회원가입 Step 구조
49
+
50
+ 1. **Step1 — User Info (name + phone)**: 기본 정보 입력. PhoneInput은 인증 UI 없이 마스킹만 제공한다.
51
+ 2. **Step2 — Verify & Agreement**: 약관 동의 + EmailInput(인증요청/타이머/OneTimeCode). alert/confirm는 서비스 앱이 직접 처리한다.
52
+ 3. **Step3 — Generate Account**: username/password/confirm + password 조건 helper.
53
+ 4. **Step4 — Complete**: 승인 대기 안내. CTA 명칭은 “Complete”만 사용한다.
54
+
55
+ 세부 props/스토리 구성은 `docs/CONTEXT-SIGNUP.md`, `docs/CONTEXT-SIGNUP-FLOW.md`, `docs/STORYBOOK.md`에서 확인하고 변경 시 세 문서를 동시에 업데이트한다.
56
+
45
57
  ## 설치 & 기본 설정(Next.js 예시)
46
58
 
47
59
  ```bash
@@ -111,6 +123,79 @@ export default function LoginPage() {
111
123
  > 위 예시는 개념을 설명하기 위한 형태이며,
112
124
  > 실제 props 구조/이름은 `CONTEXT-AUTH.md`에서 확정·관리합니다.
113
125
 
126
+ ## Modal 모듈 사용법
127
+
128
+ ui-legacy에서 사용하던 모달 스택/옵션을 templates 레이어로 옮겨왔습니다. 핵심 흐름은 다음과 같습니다.
129
+
130
+ 1. **Provider 1회 장착** — 서비스 레이아웃에서 `<Modal.Provider />`를 렌더합니다.
131
+ 2. **훅 사용** — `const { newModal, closeModal } = Modal.useModal();`
132
+ 3. **템플릿 팩토리** — `Modal.Alert`, `Modal.Dialog`이 `ModalState` 객체를 반환하므로 `newModal(...)`에 그대로 전달합니다.
133
+
134
+ ```tsx
135
+ // app/layout.tsx
136
+ import "@uniai-fe/uds-templates/styles";
137
+ import { Modal } from "@uniai-fe/uds-templates/modal";
138
+
139
+ export default function RootLayout({
140
+ children,
141
+ }: {
142
+ children: React.ReactNode;
143
+ }) {
144
+ return (
145
+ <html lang="ko">
146
+ <body>
147
+ {children}
148
+ <Modal.Provider />
149
+ </body>
150
+ </html>
151
+ );
152
+ }
153
+ ```
154
+
155
+ ```tsx
156
+ // 예: Alert/Confirm 호출
157
+ import { Modal } from "@uniai-fe/uds-templates/modal";
158
+
159
+ export function ExampleActions() {
160
+ const { newModal } = Modal.useModal();
161
+
162
+ const openAlert = () =>
163
+ newModal(
164
+ Modal.Alert({
165
+ stackKey: "sample/alert",
166
+ message: "필수 항목 동의에 체크해 주세요.",
167
+ confirm: { label: "확인" },
168
+ }),
169
+ );
170
+
171
+ const openConfirm = () =>
172
+ newModal(
173
+ Modal.Dialog({
174
+ stackKey: "sample/confirm",
175
+ title: "저장하시겠어요?",
176
+ content: "입력한 내용이 저장되며 되돌릴 수 없습니다.",
177
+ confirm: {
178
+ label: "저장",
179
+ onClick: () => {
180
+ // 서비스 동작
181
+ },
182
+ },
183
+ cancel: { label: "취소" },
184
+ }),
185
+ );
186
+
187
+ return (
188
+ <>
189
+ <button onClick={openAlert}>Alert</button>
190
+ <button onClick={openConfirm}>Confirm</button>
191
+ </>
192
+ );
193
+ }
194
+ ```
195
+
196
+ - footer 버튼은 ui-legacy와 동일하게 `stackKey`, `role`, `defaultOptions/linkOptions` 구조로 관리하며, Alert(Text)/Dialog(Solid) 규격은 templates 내부에서 보장합니다.
197
+ - 세부 가드레일·확장 기록은 `CONTEXT-MODAL.md`를 참고하고, 새 템플릿을 추가할 때 해당 문서를 선행 업데이트합니다.
198
+
114
199
  ## Scripts
115
200
 
116
201
  패키지 루트에서 실행 가능한 대표 명령:
@@ -127,6 +212,8 @@ export default function LoginPage() {
127
212
  - `CONTEXT.md` — templates 패키지 전체 상황/진행 현황 인덱스
128
213
  - `CONTEXT-GUIDELINES.md` — templates 전역 규칙(슬롯/반응형/page-frame 적용 범위 등)
129
214
  - `CONTEXT-AUTH.md` — `/auth/**` 템플릿 범위/디자인 근거/Figma 링크
215
+ - `CONTEXT-SIGNUP.md`, `CONTEXT-SIGNUP-FLOW.md` — 회원가입 단계/훅/스토리 전략 및 Figma node 표
130
216
  - `CONTEXT-PAGE-FRAME.md` — `/page-frame/**` 템플릿 범위/디자인 근거
131
217
  - `FOUNDATION-USAGE-GUIDE.md` — 템플릿에서 design-foundation 토큰을 사용하는 규칙
132
218
  - `PRIMITIVES-USAGE-GUIDE.md` — 템플릿에서 design-primitives를 사용하는 규칙
219
+ - `STORYBOOK.md` — templates Storybook 가이드(로그인/회원가입/페이지 프레임 시나리오)