npm - @yeongseoksong/framework - Versions diffs - 1.5.0 → 1.6.1 - Mend

@yeongseoksong/framework 1.5.0 → 1.6.1

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 (10) hide show

package/README.md CHANGED Viewed

@@ -16,7 +16,9 @@ pnpm add @mantine/core @mantine/hooks @mantine/carousel @mantine/notifications @
 ## 설정
-### 1. MantineProvider + theme
+### 1. SdProvider
+`SdProvider` 하나가 **프로바이더/컨텍스트 조립**을 묶습니다 — `MantineProvider`(테마) + `SdToastProvider`(토스트 렌더 지점) + `NavProvider`(navItems Context). 이걸 최상단에 두고, 헤더/푸터 크롬은 `MainLayout`(또는 페이지별 `PageLayout`)으로 그 **안쪽**에 배치하세요.
 ```tsx
 // app/layout.tsx
@@ -24,24 +26,41 @@ import '@mantine/core/styles.css'
 import '@mantine/carousel/styles.css'
 import '@mantine/notifications/styles.css'
 import '@mantine/dates/styles.css'
-import { MantineProvider } from '@mantine/core'
-import { theme, SdToastProvider } from '@yeongseoksong/framework/ui'
+import { ColorSchemeScript, mantineHtmlProps } from '@mantine/core'
+import { SdProvider, MainLayout } from '@yeongseoksong/framework/ui'
+import { navItems, companyInfo } from './data'
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="ko">
+    <html lang="ko" {...mantineHtmlProps}>
+      <head>
+        <ColorSchemeScript defaultColorScheme="light" />
+      </head>
       <body>
-        <MantineProvider theme={theme}>
-          <SdToastProvider />
-          {children}
-        </MantineProvider>
+        <SdProvider navItems={navItems}>
+          <MainLayout navItems={navItems} companyInfo={companyInfo}>
+            {children}
+          </MainLayout>
+        </SdProvider>
       </body>
     </html>
   )
 }
 ```
-`SdToastProvider`는 토스트가 실제로 그려지는 자리입니다. 넣지 않으면 `SdToast.*` 호출이 조용히 아무 일도 하지 않습니다(아래 SdToast 항목 참고).
+**SdProvider props**
+| prop                 | 기본값             | 설명                                                                 |
+| -------------------- | ------------------ | -------------------------------------------------------------------- |
+| `navItems`           | (필수)             | `NavProvider` Context에 얹을 네비게이션 트리                          |
+| `theme`              | 프레임워크 기본    | 색 오버라이드는 `mergeThemeOverrides(theme, …)` 결과를 넘긴다(2번 참고) |
+| `defaultColorScheme` | `light`            | Mantine 색 구성                                                      |
+헤더/푸터를 안 붙이는 화면(로그인 등)은 `MainLayout` 없이 `SdProvider` 안에 바로 내용을 둡니다. 헤더 변형(`mega`/`simple`/`panel`)·`loginFlag`·`companyInfo`는 이제 `MainLayout` prop입니다(아래 MainLayout 항목).
+`ColorSchemeScript`와 Mantine CSS import는 `<head>`/서버 layout 몫이라 `SdProvider`에 포함되지 않습니다. 회사명/로고는 `SdProvider`가 아니라 env var로 주입합니다(2번 참고).
+내부의 `SdToastProvider`는 토스트가 실제로 그려지는 자리입니다 — `SdProvider`를 쓰면 자동으로 포함됩니다(아래 SdToast 항목 참고). `SdProvider`는 `navItems`를 `NavProvider`(React Context)로도 감싸므로, 그 아래의 `SdBreadcrumb`는 `navItems` prop 없이도 동작합니다.
 ### 2. 환경변수 설정
@@ -99,10 +118,9 @@ export const appTheme = mergeThemeOverrides(theme, {
 ```tsx
 // app/layout.tsx — Server Component 그대로 둡니다
-import { MantineProvider } from '@mantine/core'
 import { appTheme } from './theme'
-<MantineProvider theme={appTheme} defaultColorScheme="light">
+<SdProvider theme={appTheme} navItems={navItems}>
 ```
 오버라이드하지 않은 키(타이포·spacing·shadows·컴포넌트 기본값)는 프레임워크 값이 그대로 유지됩니다.
@@ -125,7 +143,7 @@ import { appTheme } from './theme'
 | 경로                             | 내용                                          |
 | -------------------------------- | --------------------------------------------- |
 | `@yeongseoksong/framework/ui`    | UI 컴포넌트 전체 + `theme` (`"use client"`)   |
-| `@yeongseoksong/framework/store` | Zustand 스토어 — `useAuthStore` · `useUiStore` · `useSdForm` (`"use client"`) |
+| `@yeongseoksong/framework/store` | Zustand 스토어 — `useAuthStore` · `useUiStore` · `useNavStore` · `useSdForm` (`"use client"`) |
 | `@yeongseoksong/framework/util`  | `t()`, 한글 조사(`josa` · `withJosa` · `fixJosa`), `runFinalizers`, `filterAndSort`, `COMPANY_NAME`, `LOGO_SRC`, `LOGO_ALT` |
 | `@yeongseoksong/framework/types` | 공유 인터페이스                               |
@@ -567,7 +585,7 @@ export default function LoginPage() {
 `Split`은 `brandTitle`/`brandDescription`으로 좌측 패널 문구를 받고(기본값 `%c`), 브랜드 면은 `PageLayout.Brand` 히어로와 같은 배경(`ui/surface.ts`)을 씁니다. 좌측 패널은 `md` 미만에서 숨겨져 폼만 남습니다.
 전체 화면이 기본(`mih="100svh"`)이므로, 좁은 영역에 끼워 넣을 때만 `mih`를 줄입니다.
-### 상태 관리 — useAuthStore / useUiStore
+### 상태 관리 — useAuthStore / useUiStore / useNavStore
 전역 클라이언트 상태는 **Zustand** 스토어로 **`@yeongseoksong/framework/store`** 경로에서 제공됩니다. Provider가 없으므로 어디서든 훅으로 바로 읽고 씁니다.
@@ -612,6 +630,23 @@ const setGlobalLoading = useUiStore((s) => s.setGlobalLoading)
 `SdHeader`의 모바일 드로어는 일부러 이 스토어를 쓰지 않습니다 — 한 페이지에 헤더가 둘 이상 있으면 드로어가 함께 열리므로 인스턴스 로컬 상태로 남겨 두었습니다.
+`useNavStore`는 네비게이션 상태(`navItems` + `setNavItems`)를 담습니다 — 렌더 트리 **밖**에서 navItems가 필요할 때(라우팅 로직 등) 씁니다.
+```tsx
+import { useNavStore } from '@yeongseoksong/framework/store'
+useNavStore.getState().setNavItems(navItems)
+```
+트리 **안** 컴포넌트(`SdBreadcrumb`)는 이 스토어가 아니라 `@yeongseoksong/framework/ui`의 `NavProvider`(React Context) + `useNav`로 navItems를 읽습니다 — `ui` 번들이 스토어를 직접 import하면 `dist/ui`에 인라인돼 인스턴스가 갈라지기 때문입니다. `SdProvider`가 `NavProvider`를 자동으로 감싸므로, 보통은 소비자가 직접 다룰 일이 없습니다.
+```tsx
+import { NavProvider, useNav, SdBreadcrumb } from '@yeongseoksong/framework/ui'
+<NavProvider navItems={navItems}>
+  <SdBreadcrumb />        {/* navItems prop 없이 useNav()로 읽음 */}
+</NavProvider>
+```
 ### 폼 — useSdForm
 모든 폼이 같은 방식으로 값·검증·제출을 다루도록 훅 하나로 통일했습니다.

package/dist/store/index.cjs CHANGED Viewed

@@ -75,6 +75,7 @@ __export(store_exports, {
   useAuthHydrated: () => useAuthHydrated,
   useAuthStore: () => useAuthStore,
   useFormStore: () => useFormStore,
+  useNavStore: () => useNavStore,
   useSdForm: () => useSdForm,
   useUiStore: () => useUiStore
 });
@@ -125,9 +126,16 @@ var useUiStore = (0, import_zustand2.create)()((set) => ({
   toggleSideNav: () => set((state) => ({ sideNavOpened: !state.sideNavOpened }))
 }));
+// store/nav.store.ts
+var import_zustand3 = require("zustand");
+var useNavStore = (0, import_zustand3.create)()((set) => ({
+  navItems: [],
+  setNavItems: (navItems) => set({ navItems })
+}));
 // store/form.state.ts
 var import_react2 = require("react");
-var import_zustand3 = require("zustand");
+var import_zustand4 = require("zustand");
 // ui/atom/Toast.tsx
 var import_notifications = require("@mantine/notifications");
@@ -216,7 +224,7 @@ function patch(state, formId, next) {
   if (!current) return state;
   return __spreadProps(__spreadValues({}, state), { forms: __spreadProps(__spreadValues({}, state.forms), { [formId]: __spreadValues(__spreadValues({}, current), next) }) });
 }
-var useFormStore = (0, import_zustand3.create)()((set) => ({
+var useFormStore = (0, import_zustand4.create)()((set) => ({
   forms: {},
   ensureForm: (formId, initialValues) => set(
     (state) => state.forms[formId] ? state : __spreadProps(__spreadValues({}, state), { forms: __spreadProps(__spreadValues({}, state.forms), { [formId]: blankEntry(initialValues) }) })
@@ -379,6 +387,7 @@ var formRules = {
   useAuthHydrated,
   useAuthStore,
   useFormStore,
+  useNavStore,
   useSdForm,
   useUiStore
 });

package/dist/store/index.d.mts CHANGED Viewed

@@ -81,6 +81,36 @@ interface UiState {
  */
 declare const useUiStore: zustand.UseBoundStore<zustand.StoreApi<UiState>>;
+interface CommonInfo {
+    id: number;
+    order: number;
+    isShow: boolean;
+    createdAt?: Date;
+    updatedAt?: Date;
+}
+interface NavItem extends CommonInfo {
+    label: string;
+    href?: string;
+    highlight?: boolean;
+    parentId?: number;
+}
+interface NavState {
+    /** 앱 전역 네비게이션 트리. 소비자가 앱 진입 시 `setNavItems`로 한 번 주입한다. */
+    navItems: NavItem[];
+    setNavItems: (navItems: NavItem[]) => void;
+}
+/**
+ * 네비게이션 상태 스토어 — 렌더 트리 **밖에서** navItems에 접근해야 할 때 쓴다
+ * (프로그램적 네비게이션, 라우팅 로직 등). 소비자가 `setNavItems`로 채운다.
+ *
+ * 트리 **안** 컴포넌트(`SdBreadcrumb`)는 이 스토어가 아니라 `ui/template/NavProvider`의
+ * React Context(`useNav`)에서 navItems를 읽는다 — `ui` 번들이 스토어를 import하면
+ * `dist/ui`에 인라인돼 `create()`가 두 번 도는 dual-bundle 문제가 생기기 때문이다
+ * (store/index.ts 상단 주석 참고). Context는 모듈 상태가 없어 그 문제에서 자유롭다.
+ */
+declare const useNavStore: zustand.UseBoundStore<zustand.StoreApi<NavState>>;
 /**
  * 어떤 작업이 끝난 뒤 항상 돌려야 하는 뒷정리 — 라우팅, 모달 닫기, 목록 새로고침 등.
  *
@@ -204,4 +234,4 @@ declare const formRules: {
     sameAs: <V extends FormValues>(other: keyof V, message?: string) => FormRule<V>;
 };
-export { type AuthUser, type FormErrors, type FormRule, type FormValues, type SdFormApi, type SdFormOptions, formRules, useAuthHydrated, useAuthStore, useFormStore, useSdForm, useUiStore };
+export { type AuthUser, type FormErrors, type FormRule, type FormValues, type SdFormApi, type SdFormOptions, formRules, useAuthHydrated, useAuthStore, useFormStore, useNavStore, useSdForm, useUiStore };

package/dist/store/index.d.ts CHANGED Viewed

@@ -81,6 +81,36 @@ interface UiState {
  */
 declare const useUiStore: zustand.UseBoundStore<zustand.StoreApi<UiState>>;
+interface CommonInfo {
+    id: number;
+    order: number;
+    isShow: boolean;
+    createdAt?: Date;
+    updatedAt?: Date;
+}
+interface NavItem extends CommonInfo {
+    label: string;
+    href?: string;
+    highlight?: boolean;
+    parentId?: number;
+}
+interface NavState {
+    /** 앱 전역 네비게이션 트리. 소비자가 앱 진입 시 `setNavItems`로 한 번 주입한다. */
+    navItems: NavItem[];
+    setNavItems: (navItems: NavItem[]) => void;
+}
+/**
+ * 네비게이션 상태 스토어 — 렌더 트리 **밖에서** navItems에 접근해야 할 때 쓴다
+ * (프로그램적 네비게이션, 라우팅 로직 등). 소비자가 `setNavItems`로 채운다.
+ *
+ * 트리 **안** 컴포넌트(`SdBreadcrumb`)는 이 스토어가 아니라 `ui/template/NavProvider`의
+ * React Context(`useNav`)에서 navItems를 읽는다 — `ui` 번들이 스토어를 import하면
+ * `dist/ui`에 인라인돼 `create()`가 두 번 도는 dual-bundle 문제가 생기기 때문이다
+ * (store/index.ts 상단 주석 참고). Context는 모듈 상태가 없어 그 문제에서 자유롭다.
+ */
+declare const useNavStore: zustand.UseBoundStore<zustand.StoreApi<NavState>>;
 /**
  * 어떤 작업이 끝난 뒤 항상 돌려야 하는 뒷정리 — 라우팅, 모달 닫기, 목록 새로고침 등.
  *
@@ -204,4 +234,4 @@ declare const formRules: {
     sameAs: <V extends FormValues>(other: keyof V, message?: string) => FormRule<V>;
 };
-export { type AuthUser, type FormErrors, type FormRule, type FormValues, type SdFormApi, type SdFormOptions, formRules, useAuthHydrated, useAuthStore, useFormStore, useSdForm, useUiStore };
+export { type AuthUser, type FormErrors, type FormRule, type FormValues, type SdFormApi, type SdFormOptions, formRules, useAuthHydrated, useAuthStore, useFormStore, useNavStore, useSdForm, useUiStore };

package/dist/store/index.mjs CHANGED Viewed

@@ -97,9 +97,16 @@ var useUiStore = create2()((set) => ({
   toggleSideNav: () => set((state) => ({ sideNavOpened: !state.sideNavOpened }))
 }));
+// store/nav.store.ts
+import { create as create3 } from "zustand";
+var useNavStore = create3()((set) => ({
+  navItems: [],
+  setNavItems: (navItems) => set({ navItems })
+}));
 // store/form.state.ts
 import { useCallback, useEffect as useEffect2, useMemo } from "react";
-import { create as create3 } from "zustand";
+import { create as create4 } from "zustand";
 // ui/atom/Toast.tsx
 import { Notifications, notifications } from "@mantine/notifications";
@@ -188,7 +195,7 @@ function patch(state, formId, next) {
   if (!current) return state;
   return __spreadProps(__spreadValues({}, state), { forms: __spreadProps(__spreadValues({}, state.forms), { [formId]: __spreadValues(__spreadValues({}, current), next) }) });
 }
-var useFormStore = create3()((set) => ({
+var useFormStore = create4()((set) => ({
   forms: {},
   ensureForm: (formId, initialValues) => set(
     (state) => state.forms[formId] ? state : __spreadProps(__spreadValues({}, state), { forms: __spreadProps(__spreadValues({}, state.forms), { [formId]: blankEntry(initialValues) }) })
@@ -350,6 +357,7 @@ export {
   useAuthHydrated,
   useAuthStore,
   useFormStore,
+  useNavStore,
   useSdForm,
   useUiStore
 };