@yeongseoksong/framework 1.2.0 → 1.3.1

package/README.md

@@ -65,6 +65,53 @@ import './env.mjs'
 
 `navItems` / `companyInfo`처럼 배열·객체인 값은 환경변수로 담을 수 없으므로 `MainLayout`에 prop으로 넘깁니다 (아래 MainLayout 항목 참고).
 
+### 3. 색상 커스터마이즈
+
+브랜드 색은 환경변수가 아니라 **테마 오버라이드**로 주입합니다. `theme`은 `createTheme()`이 만든 `MantineThemeOverride`라 Mantine 표준 `mergeThemeOverrides()`로 그대로 합칠 수 있습니다.
+
+**반드시 `"use client"` 파일 안에서 합쳐야 합니다.** `ui` 번들 전체에 `"use client"`가 붙어 있어 서버 컴포넌트가 `theme`을 임포트하면 실제 객체가 아니라 client reference proxy를 받습니다. `<MantineProvider theme={theme}>`처럼 **넘기기만** 하는 건 되지만, `mergeThemeOverrides(theme, ...)`처럼 값을 **읽으면** 터집니다.
+
+```tsx
+// app/theme.ts  ← "use client" 필수
+'use client'
+import { mergeThemeOverrides } from '@mantine/core'
+import { theme } from '@yeongseoksong/framework/ui'
+
+export const appTheme = mergeThemeOverrides(theme, {
+  colors: {
+    // 10단계 전부 채워야 합니다. 부분 배열은 Mantine이 허용하지 않습니다.
+    primary: [
+      '#e7f0fb', '#c8dcf4', '#a3c3ec', '#7aa8e3', '#4f8ddb',
+      '#2374d4', '#0b5ed7', '#094db1', '#073d8c', '#052d68',
+    ],
+  },
+  // 브랜드 앵커 shade를 바꾸려면 함께 지정
+  primaryShade: { light: 6, dark: 5 },
+})
+```
+
+```tsx
+// app/layout.tsx — Server Component 그대로 둡니다
+import { MantineProvider } from '@mantine/core'
+import { appTheme } from './theme'
+
+<MantineProvider theme={appTheme} defaultColorScheme="light">
+```
+
+오버라이드하지 않은 키(타이포·spacing·shadows·컴포넌트 기본값)는 프레임워크 값이 그대로 유지됩니다.
+
+**컴포넌트가 의존하는 색상 키** — 아래 키를 바꾸면 해당 컴포넌트 전체가 따라 바뀝니다. 키를 **없애면** Mantine 기본 팔레트로 폴백하므로 톤이 어긋납니다.
+
+| 키          | 쓰이는 곳                                                              |
+| ----------- | ---------------------------------------------------------------------- |
+| `primary`   | `primaryColor`. 버튼·링크 hover·`SdText.Eyebrow`·`SdBadge.Primary` 등  |
+| `secondary` | 보조 강조                                                              |
+| `slate`     | 중립 전반 — 모든 `SdText`/`SdTitle` 본문색, 보더, 표 헤더. `dark` 별칭 |
+| `red`       | `SdText.Error`, `SdButton.Delete`                                      |
+| `green`     | `SdButton.Excel`                                                       |
+
+10단계 램프를 손으로 만들기 번거로우면 [`@mantine/colors-generator`](https://mantine.dev/colors-generator/)의 `generateColors('#0b5ed7')`로 hex 하나에서 뽑을 수 있습니다(별도 설치 필요).
+
 ## 임포트 경로
 
 | 경로                             | 내용                                          |

package/dist/ui/index.cjs

@@ -1479,7 +1479,7 @@ var import_core28 = require("@mantine/core");
 var import_hooks = require("@mantine/hooks");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var BAR_HEIGHT = 60;
-function SdHeader({ navItems, loginFlag, children }) {
+function SdHeader({ navItems, loginFlag }) {
   const [opened, { toggle, close }] = (0, import_hooks.useDisclosure)();
   const visibleItems = filterAndSort(navItems);
   const topItems = visibleItems.filter((item) => !item.parentId);
@@ -1532,8 +1532,7 @@ function SdHeader({ navItems, loginFlag, children }) {
           }) }),
           /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core28.Group, { h: BAR_HEIGHT, align: "center", gap: "sm", wrap: "nowrap", children: [
             /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Burger, { hiddenFrom: "sm", opened, onClick: toggle }),
-            loginFlag && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Group, { gap: "sm", visibleFrom: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) }),
-            children
+            loginFlag && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Group, { gap: "sm", visibleFrom: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
           ] })
         ] }) })
       }
@@ -1568,9 +1567,13 @@ var import_jsx_runtime30 = require("react/jsx-runtime");
 function FooterNavColumns({ items }) {
   const topLevel = items.filter((item) => !item.parentId);
   const getChildren = (parentId) => items.filter((item) => item.parentId === parentId);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: topLevel.map((group) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Grid.Col, { span: { base: 6, sm: 4, md: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core29.Stack, { gap: "sm", children: [
+  const CHILD_THRESH = 4;
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: topLevel.map((group) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Grid.Col, { span: { base: 6, sm: 4, md: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core29.Stack, { gap: "xs", children: [
     /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SdText.Sub, { children: group.label }),
-    getChildren(group.id).map((link) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SdLink.Hint, { href: link.href, children: link.label }, link.id))
+    getChildren(group.id).map((link, id) => {
+      if (id >= CHILD_THRESH) return;
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SdLink.Hint, { href: link.href, children: link.label }, link.id);
+    })
   ] }) }, group.id)) });
 }
 var SOCIAL_ICONS = {
@@ -1796,10 +1799,11 @@ var import_jsx_runtime35 = require("react/jsx-runtime");
 function MainLayout({
   children,
   navItems,
-  companyInfo
+  companyInfo,
+  loginFlag
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core34.AppShell, { header: { height: 60 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core34.AppShell.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SdHeader, { navItems, loginFlag: true }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core34.AppShell.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SdHeader, { navItems, loginFlag }) }),
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core34.AppShell.Main, { children }),
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SdFooter, { company: companyInfo, navItems })
   ] });
@@ -2010,33 +2014,53 @@ var slate = [
   "#0f172a"
   // 9  slate-900
 ];
-var cyan = [
-  "#ecfeff",
-  "#cffafe",
-  "#a5f3fc",
-  "#67e8f9",
-  "#22d3ee",
-  "#06b6d4",
-  "#0891b2",
-  "#0e7490",
-  "#155e75",
-  "#164e63"
+var red = [
+  "#fef2f2",
+  // 0  red-50
+  "#fee2e2",
+  // 1  red-100
+  "#fecaca",
+  // 2  red-200
+  "#fca5a5",
+  // 3  red-300
+  "#f87171",
+  // 4  red-400
+  "#ef4444",
+  // 5  red-500
+  "#dc2626",
+  // 6  red-600
+  "#b91c1c",
+  // 7  red-700
+  "#991b1b",
+  // 8  red-800
+  "#7f1d1d"
+  // 9  red-900
 ];
-var indigo = [
-  "#eef2ff",
-  "#e0e7ff",
-  "#c7d2fe",
-  "#a5b4fc",
-  "#818cf8",
-  "#6366f1",
-  "#4f46e5",
-  "#4338ca",
-  "#3730a3",
-  "#312e81"
+var green = [
+  "#f0fdf4",
+  // 0  green-50
+  "#dcfce7",
+  // 1  green-100
+  "#bbf7d0",
+  // 2  green-200
+  "#86efac",
+  // 3  green-300
+  "#4ade80",
+  // 4  green-400
+  "#22c55e",
+  // 5  green-500
+  "#16a34a",
+  // 6  green-600
+  "#15803d",
+  // 7  green-700
+  "#166534",
+  // 8  green-800
+  "#14532d"
+  // 9  green-900
 ];
 var theme = (0, import_core36.createTheme)({
   /* ---- Color ---- */
-  colors: { primary, secondary, slate, cyan, indigo, dark: slate },
+  colors: { primary, secondary, slate, red, green, dark: slate },
   primaryColor: "primary",
   primaryShade: { light: 6, dark: 5 },
   /* ---- Type ---- */

package/dist/ui/index.d.mts

@@ -770,9 +770,8 @@ declare function HeroCarousel({ slides, children }: HeroCarouselProps): react_js
 interface HeaderProps {
     navItems: NavItem[];
     loginFlag?: boolean;
-    children?: ReactNode;
 }
-declare function SdHeader({ navItems, loginFlag, children }: HeaderProps): react_jsx_runtime.JSX.Element;
+declare function SdHeader({ navItems, loginFlag }: HeaderProps): react_jsx_runtime.JSX.Element;
 
 interface SdFooterProps {
     company: CompanyInfo;
@@ -831,10 +830,11 @@ declare const SdErrorView: {
 declare const SdErrorViewPage: typeof Page;
 declare const SdErrorViewNotFound: typeof NotFound;
 
-declare function MainLayout({ children, navItems, companyInfo, }: {
+declare function MainLayout({ children, navItems, companyInfo, loginFlag, }: {
     children: React.ReactNode;
     navItems: NavItem[];
     companyInfo: CompanyInfo;
+    loginFlag?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
 interface PageHeroBaseProps {

package/dist/ui/index.d.ts

@@ -770,9 +770,8 @@ declare function HeroCarousel({ slides, children }: HeroCarouselProps): react_js
 interface HeaderProps {
     navItems: NavItem[];
     loginFlag?: boolean;
-    children?: ReactNode;
 }
-declare function SdHeader({ navItems, loginFlag, children }: HeaderProps): react_jsx_runtime.JSX.Element;
+declare function SdHeader({ navItems, loginFlag }: HeaderProps): react_jsx_runtime.JSX.Element;
 
 interface SdFooterProps {
     company: CompanyInfo;
@@ -831,10 +830,11 @@ declare const SdErrorView: {
 declare const SdErrorViewPage: typeof Page;
 declare const SdErrorViewNotFound: typeof NotFound;
 
-declare function MainLayout({ children, navItems, companyInfo, }: {
+declare function MainLayout({ children, navItems, companyInfo, loginFlag, }: {
     children: React.ReactNode;
     navItems: NavItem[];
     companyInfo: CompanyInfo;
+    loginFlag?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
 interface PageHeroBaseProps {

package/dist/ui/index.mjs

@@ -1357,7 +1357,7 @@ import { Box as Box12, Burger, Drawer, Group as Group9, NavLink, Stack as Stack1
 import { useDisclosure, useFocusWithin, useHover, useMergedRef } from "@mantine/hooks";
 import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
 var BAR_HEIGHT = 60;
-function SdHeader({ navItems, loginFlag, children }) {
+function SdHeader({ navItems, loginFlag }) {
   const [opened, { toggle, close }] = useDisclosure();
   const visibleItems = filterAndSort(navItems);
   const topItems = visibleItems.filter((item) => !item.parentId);
@@ -1410,8 +1410,7 @@ function SdHeader({ navItems, loginFlag, children }) {
           }) }),
           /* @__PURE__ */ jsxs16(Group9, { h: BAR_HEIGHT, align: "center", gap: "sm", wrap: "nowrap", children: [
             /* @__PURE__ */ jsx28(Burger, { hiddenFrom: "sm", opened, onClick: toggle }),
-            loginFlag && /* @__PURE__ */ jsx28(Group9, { gap: "sm", visibleFrom: "sm", children: /* @__PURE__ */ jsx28(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) }),
-            children
+            loginFlag && /* @__PURE__ */ jsx28(Group9, { gap: "sm", visibleFrom: "sm", children: /* @__PURE__ */ jsx28(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
           ] })
         ] }) })
       }
@@ -1454,9 +1453,13 @@ import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs17 } from "react/jsx-r
 function FooterNavColumns({ items }) {
   const topLevel = items.filter((item) => !item.parentId);
   const getChildren = (parentId) => items.filter((item) => item.parentId === parentId);
-  return /* @__PURE__ */ jsx29(Fragment5, { children: topLevel.map((group) => /* @__PURE__ */ jsx29(Grid5.Col, { span: { base: 6, sm: 4, md: "auto" }, children: /* @__PURE__ */ jsxs17(Stack16, { gap: "sm", children: [
+  const CHILD_THRESH = 4;
+  return /* @__PURE__ */ jsx29(Fragment5, { children: topLevel.map((group) => /* @__PURE__ */ jsx29(Grid5.Col, { span: { base: 6, sm: 4, md: "auto" }, children: /* @__PURE__ */ jsxs17(Stack16, { gap: "xs", children: [
     /* @__PURE__ */ jsx29(SdText.Sub, { children: group.label }),
-    getChildren(group.id).map((link) => /* @__PURE__ */ jsx29(SdLink.Hint, { href: link.href, children: link.label }, link.id))
+    getChildren(group.id).map((link, id) => {
+      if (id >= CHILD_THRESH) return;
+      return /* @__PURE__ */ jsx29(SdLink.Hint, { href: link.href, children: link.label }, link.id);
+    })
   ] }) }, group.id)) });
 }
 var SOCIAL_ICONS = {
@@ -1682,10 +1685,11 @@ import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
 function MainLayout({
   children,
   navItems,
-  companyInfo
+  companyInfo,
+  loginFlag
 }) {
   return /* @__PURE__ */ jsxs22(AppShell, { header: { height: 60 }, children: [
-    /* @__PURE__ */ jsx34(AppShell.Header, { children: /* @__PURE__ */ jsx34(SdHeader, { navItems, loginFlag: true }) }),
+    /* @__PURE__ */ jsx34(AppShell.Header, { children: /* @__PURE__ */ jsx34(SdHeader, { navItems, loginFlag }) }),
     /* @__PURE__ */ jsx34(AppShell.Main, { children }),
     /* @__PURE__ */ jsx34(SdFooter, { company: companyInfo, navItems })
   ] });
@@ -1896,33 +1900,53 @@ var slate = [
   "#0f172a"
   // 9  slate-900
 ];
-var cyan = [
-  "#ecfeff",
-  "#cffafe",
-  "#a5f3fc",
-  "#67e8f9",
-  "#22d3ee",
-  "#06b6d4",
-  "#0891b2",
-  "#0e7490",
-  "#155e75",
-  "#164e63"
+var red = [
+  "#fef2f2",
+  // 0  red-50
+  "#fee2e2",
+  // 1  red-100
+  "#fecaca",
+  // 2  red-200
+  "#fca5a5",
+  // 3  red-300
+  "#f87171",
+  // 4  red-400
+  "#ef4444",
+  // 5  red-500
+  "#dc2626",
+  // 6  red-600
+  "#b91c1c",
+  // 7  red-700
+  "#991b1b",
+  // 8  red-800
+  "#7f1d1d"
+  // 9  red-900
 ];
-var indigo = [
-  "#eef2ff",
-  "#e0e7ff",
-  "#c7d2fe",
-  "#a5b4fc",
-  "#818cf8",
-  "#6366f1",
-  "#4f46e5",
-  "#4338ca",
-  "#3730a3",
-  "#312e81"
+var green = [
+  "#f0fdf4",
+  // 0  green-50
+  "#dcfce7",
+  // 1  green-100
+  "#bbf7d0",
+  // 2  green-200
+  "#86efac",
+  // 3  green-300
+  "#4ade80",
+  // 4  green-400
+  "#22c55e",
+  // 5  green-500
+  "#16a34a",
+  // 6  green-600
+  "#15803d",
+  // 7  green-700
+  "#166534",
+  // 8  green-800
+  "#14532d"
+  // 9  green-900
 ];
 var theme = createTheme({
   /* ---- Color ---- */
-  colors: { primary, secondary, slate, cyan, indigo, dark: slate },
+  colors: { primary, secondary, slate, red, green, dark: slate },
   primaryColor: "primary",
   primaryShade: { light: 6, dark: 5 },
   /* ---- Type ---- */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yeongseoksong/framework",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "files": [
     "dist"
   ],