@team-monolith/cds 1.130.0-alpha.7 → 1.130.0-alpha.8

package/README.md

@@ -32,7 +32,7 @@
 
 `pnpm run storybook` 을 실행하면 스토리북이 실행됩니다. 이곳에서 디버깅을 진행합니다.
 
-패키지 특성상 개발환경이 따로 존재하지 않으며 `pnpm run build` 후 `npm publish` 를 사용하여 npm 에 배포합니다.
+패키지 특성상 개발환경이 따로 존재하지 않으며 `pnpm run build` 후 `pnpm publish` 를 사용하여 npm 에 배포합니다.
 
 이때 npm team-monolith 에 소속되어 있어야 합니다.
 

package/dist/patterns/LexicalEditor/Plugins.js

@@ -127,9 +127,9 @@ var B = x.div`
   display: block;
   position: relative;
   outline: 0;
-  padding-left: 16px;
-  // ComponentAdder 를 위한 공간. compact 모드는 Adder가 없으므로 들여쓰지 않는다.
-  ${({ isEditable: e, compactEditorMode: t }) => e && !t && "padding-left: 64px;"}
+  // 들여쓰기: compact 모드는 Adder가 없어 16px만, 일반 편집 모드는 Adder 공간으로 64px.
+  // 일반 읽기 모드는 기존대로 들여쓰지 않는다(0) — 무조건 16px 적용 시 회귀.
+  ${({ isEditable: e, compactEditorMode: t }) => t ? "padding-left: 16px;" : e ? "padding-left: 64px;" : ""}
   // ScrollArea에서 스크롤이 발생해도 64px 더 아래로 내릴 수 있도록 합니다.
   padding-bottom: 64px;
   min-height: 150px;

package/dist/patterns/LexicalEditor/nodes/FileNode/CompactFileView.js

@@ -1,53 +1,40 @@
-import { stdin_default as e } from "../../../../node_modules/remixicon/icons/System/delete-bin-line.js";
-import { OverflowTooltip as t } from "../../../../components/OverflowTooltip.js";
-import { FileDetailContainer as n, FileInfo as r, FileName as i, FileOptionalInfo as a, FileSize as o, IconContainer as s, getFileIcon as c } from "./fileStyles.js";
-import { css as l } from "@emotion/react";
+import { SquareButton as e } from "../../../../components/SquareButton.js";
+import { stdin_default as t } from "../../../../node_modules/remixicon/icons/System/delete-bin-line.js";
+import { OverflowTooltip as n } from "../../../../components/OverflowTooltip.js";
+import { FileDetailContainer as r, FileInfo as i, FileName as a, FileOptionalInfo as o, FileSize as s, IconContainer as c, getFileIcon as l } from "./fileStyles.js";
 import u from "@emotion/styled";
 import { jsx as d, jsxs as f } from "@emotion/react/jsx-runtime";
 import { useTranslation as p } from "react-i18next";
 import { $getNodeByKey as m } from "lexical";
 import { useLexicalComposerContext as h } from "@lexical/react/LexicalComposerContext";
 //#region src/cds/patterns/LexicalEditor/nodes/FileNode/CompactFileView.tsx
-function g({ fileName: r, fileSize: l, nodeKey: u, fileUploadDate: g }) {
+function g({ fileName: e, fileSize: i, nodeKey: u, fileUploadDate: g }) {
 	let [y] = h(), { t: b } = p();
-	return /* @__PURE__ */ d(n, {
+	return /* @__PURE__ */ d(r, {
 		isSelected: !1,
 		children: /* @__PURE__ */ f(_, { children: [
-			/* @__PURE__ */ d(s, { children: c(r) }),
-			/* @__PURE__ */ d(i, { children: /* @__PURE__ */ d(t, { text: r }) }),
-			/* @__PURE__ */ d(a, { children: g }),
-			/* @__PURE__ */ f(o, { children: [(l / (1024 * 1024)).toFixed(1), " MB"] }),
+			/* @__PURE__ */ d(c, { children: l(e) }),
+			/* @__PURE__ */ d(a, { children: /* @__PURE__ */ d(n, { text: e }) }),
+			/* @__PURE__ */ d(o, { children: g }),
+			/* @__PURE__ */ f(s, { children: [(i / (1024 * 1024)).toFixed(1), " MB"] }),
 			/* @__PURE__ */ d(v, {
-				type: "button",
+				color: "icon",
+				size: "xsmall",
+				icon: /* @__PURE__ */ d(t, {}),
 				onClick: () => {
 					y.update(() => {
 						m(u)?.remove();
 					});
 				},
-				"aria-label": b("삭제", { context: "버튼, 게시글 본문 파일" }),
-				children: /* @__PURE__ */ d(e, {})
+				"aria-label": b("삭제", { context: "버튼, 게시글 본문 파일" })
 			})
 		] })
 	});
 }
-var _ = u(r)`
+var _ = u(i)`
   cursor: default;
-`, v = u.button(({ theme: e }) => l`
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    cursor: pointer;
-    color: ${e.color.foreground.neutralBaseDisabled};
-
-    &:hover {
-      color: ${e.color.foreground.neutralBase};
-    }
-  `);
+`, v = u(e)`
+  flex-shrink: 0;
+`;
 //#endregion
 export { g as CompactFileView };

package/dist/patterns/LexicalEditor/nodes/ImageNode/CompactImageView.js

@@ -1,78 +1,64 @@
-import { stdin_default as e } from "../../../../node_modules/remixicon/icons/System/delete-bin-line.js";
-import { css as t } from "@emotion/react";
-import { useState as n } from "react";
-import r from "@emotion/styled";
-import { jsx as i, jsxs as a } from "@emotion/react/jsx-runtime";
-import { useTranslation as o } from "react-i18next";
-import { $getNodeByKey as s } from "lexical";
-import { useLexicalComposerContext as c } from "@lexical/react/LexicalComposerContext";
-import { useLexicalEditable as l } from "@lexical/react/useLexicalEditable";
+import { SquareButton as e } from "../../../../components/SquareButton.js";
+import { stdin_default as t } from "../../../../node_modules/remixicon/icons/System/delete-bin-line.js";
+import { css as n } from "@emotion/react";
+import { useState as r } from "react";
+import i from "@emotion/styled";
+import { jsx as a, jsxs as o } from "@emotion/react/jsx-runtime";
+import { useTranslation as s } from "react-i18next";
+import { $getNodeByKey as c } from "lexical";
+import { useLexicalComposerContext as l } from "@lexical/react/LexicalComposerContext";
+import { useLexicalEditable as u } from "@lexical/react/useLexicalEditable";
 //#region src/cds/patterns/LexicalEditor/nodes/ImageNode/CompactImageView.tsx
-function u({ src: t, altText: r, nodeKey: u }) {
-	let [g] = c(), _ = l(), [v, y] = n(!1), { t: b } = o();
-	return v ? /* @__PURE__ */ i(h, { children: r || b("이미지를 불러올 수 없습니다.") }) : _ ? /* @__PURE__ */ a(d, { children: [/* @__PURE__ */ i(p, {
-		src: t,
-		alt: r,
+function d({ src: e, altText: n, nodeKey: i }) {
+	let [d] = l(), _ = u(), [v, y] = r(!1), { t: b } = s();
+	return v ? /* @__PURE__ */ a(g, { children: n || b("이미지를 불러올 수 없습니다.") }) : _ ? /* @__PURE__ */ o(f, { children: [/* @__PURE__ */ a(m, {
+		src: e,
+		alt: n,
 		onError: () => y(!0)
-	}), /* @__PURE__ */ i(m, {
-		type: "button",
+	}), /* @__PURE__ */ a(h, {
+		color: "grey",
+		size: "xsmall",
+		icon: /* @__PURE__ */ a(t, {}),
 		onClick: () => {
-			g.update(() => {
-				s(u)?.remove();
+			d.update(() => {
+				c(i)?.remove();
 			});
 		},
-		"aria-label": b("삭제", { context: "버튼, 게시글 본문 이미지" }),
-		children: /* @__PURE__ */ i(e, {})
-	})] }) : /* @__PURE__ */ i(f, {
+		"aria-label": b("삭제", { context: "버튼, 게시글 본문 이미지" })
+	})] }) : /* @__PURE__ */ a(p, {
 		type: "button",
-		onClick: () => window.open(t, "_blank", "noopener"),
+		onClick: () => window.open(e, "_blank", "noopener"),
 		title: b("클릭해서 원본 이미지 보기"),
-		children: /* @__PURE__ */ i(p, {
-			src: t,
-			alt: r,
+		children: /* @__PURE__ */ a(m, {
+			src: e,
+			alt: n,
 			onError: () => y(!0)
 		})
 	});
 }
-var d = r.div`
+var f = i.div`
   position: relative;
   display: inline-block;
   max-width: 100%;
-`, f = r.button`
+`, p = i.button`
   display: inline-block;
   max-width: 100%;
   padding: 0;
   border: 0;
   background: transparent;
   cursor: pointer;
-`, p = r.img`
+`, m = i.img`
   display: block;
   max-width: 100%;
   max-height: 400px;
   height: auto;
   object-fit: contain;
   border-radius: 10px;
-`, m = r.button(({ theme: e }) => t`
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    padding: 0;
-    border: 0;
-    border-radius: 6px;
-    background: ${e.color.background.neutralAlt};
-    color: ${e.color.foreground.neutralBase};
-    cursor: pointer;
-    opacity: 0.9;
-
-    &:hover {
-      opacity: 1;
-    }
-  `), h = r.div(({ theme: e }) => t`
+`, h = i(e)`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+`, g = i.div(({ theme: e }) => n`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -88,4 +74,4 @@ var d = r.div`
     line-height: 20px;
   `);
 //#endregion
-export { u as CompactImageView };
+export { d as CompactImageView };

package/dist/patterns/LexicalEditor/plugins/CompactToolbarPlugin/CompactToolbarPlugin.js

@@ -1,106 +1,165 @@
-import { stdin_default as e } from "../../../../node_modules/remixicon/icons/System/upload-line.js";
-import { CdsContext as t } from "../../../../CdsProvider.js";
-import { $createImageNode as n } from "../../nodes/ImageNode/ImageNode.js";
-import { $createFileNode as r } from "../../nodes/FileNode/FileNode.js";
-import { getTexts as i } from "../../../../texts.js";
+import { Spinner as e } from "../../../../components/Spinner.js";
+import { stdin_default as t } from "../../../../node_modules/remixicon/icons/System/upload-line.js";
+import { CdsContext as n } from "../../../../CdsProvider.js";
+import { $createImageNode as r } from "../../nodes/ImageNode/ImageNode.js";
+import { $createFileNode as i } from "../../nodes/FileNode/FileNode.js";
+import { getTexts as a } from "../../../../texts.js";
 import "../../uploadConstants.js";
-import { COMPACT_ATTACHMENT_NODES as a } from "./compactAttachmentNodes.js";
-import { css as o } from "@emotion/react";
-import { useContext as s, useLayoutEffect as c, useRef as l, useState as u } from "react";
-import d from "@emotion/styled";
-import { jsx as f, jsxs as p } from "@emotion/react/jsx-runtime";
-import { useTranslation as m } from "react-i18next";
-import { $createParagraphNode as h, $getRoot as g } from "lexical";
-import { mergeRegister as _ } from "@lexical/utils";
-import { useLexicalComposerContext as v } from "@lexical/react/LexicalComposerContext";
-import y from "moment";
+import { COMPACT_ATTACHMENT_NODES as o } from "./compactAttachmentNodes.js";
+import { css as s } from "@emotion/react";
+import { useContext as c, useLayoutEffect as l, useRef as u, useState as d } from "react";
+import f from "@emotion/styled";
+import { jsx as p, jsxs as m } from "@emotion/react/jsx-runtime";
+import { useTranslation as h } from "react-i18next";
+import { $createParagraphNode as g, $getRoot as _ } from "lexical";
+import { mergeRegister as v } from "@lexical/utils";
+import { useLexicalComposerContext as y } from "@lexical/react/LexicalComposerContext";
+import b from "moment";
 //#region src/cds/patterns/LexicalEditor/plugins/CompactToolbarPlugin/CompactToolbarPlugin.tsx
-function b() {
-	let { t } = m(), n = x(), r = S(), i = l(null);
-	return n ? null : /* @__PURE__ */ p(C, { children: [/* @__PURE__ */ p(w, {
-		type: "button",
-		onClick: () => i.current?.click(),
-		children: [/* @__PURE__ */ f(e, {}), /* @__PURE__ */ f(T, { children: t("업로드") })]
-	}), /* @__PURE__ */ f(E, {
-		ref: i,
-		type: "file",
-		onChange: (e) => {
-			let t = e.target.files?.[0];
-			t && r(t), e.target.value = "";
-		}
-	})] });
-}
 function x() {
-	let [e] = v(), [t, n] = u(!1);
-	return c(() => {
+	let { t: n } = h(), r = S(), { upload: i, isUploading: a } = C(), o = u(null);
+	return r ? null : /* @__PURE__ */ m(T, { children: [
+		/* @__PURE__ */ p(E, {
+			$loading: a,
+			children: a ? /* @__PURE__ */ m(O, { children: [/* @__PURE__ */ p(e, {}), /* @__PURE__ */ p(k, { children: n("업로드 중...") })] }) : /* @__PURE__ */ m(D, {
+				type: "button",
+				onClick: () => o.current?.click(),
+				children: [/* @__PURE__ */ p(t, {}), /* @__PURE__ */ p(k, { children: n("업로드") })]
+			})
+		}),
+		/* @__PURE__ */ p(A, { children: n("업로드할 이미지 또는 파일을 추가하세요.") }),
+		/* @__PURE__ */ p(j, {
+			ref: o,
+			type: "file",
+			onChange: (e) => {
+				let t = e.target.files?.[0];
+				t && i(t), e.target.value = "";
+			}
+		})
+	] });
+}
+function S() {
+	let [e] = y(), [t, n] = d(!1);
+	return l(() => {
 		let t = /* @__PURE__ */ new Set();
-		return _(...a.map((r) => e.registerMutationListener(r, (e) => {
+		return v(...o.map((r) => e.registerMutationListener(r, (e) => {
 			for (let [n, r] of e) r === "destroyed" ? t.delete(n) : t.add(n);
 			n(t.size > 0);
 		}, { skipInitialization: !1 })));
 	}, [e]), t;
 }
-function S() {
-	let [e] = v(), a = s(t), { t: o } = m();
-	return async (t) => {
-		let s = a.lexical?.uploadByFile, c = a.lexical?.showFileError;
-		if (!s) return;
-		if (t.size >= 1073741824) {
-			c?.("upload", i(o, "errorFileTooLarge"));
-			return;
-		}
-		let l;
-		try {
-			l = await s(t);
-		} catch {
-			c?.("upload", o("파일을 업로드하지 못했습니다. 다시 시도해 주세요."));
-			return;
-		}
-		e.update(() => {
-			let e = t.type.startsWith("image/") ? n({
-				src: l,
-				altText: t.name
-			}) : r({
-				fileUrl: l,
-				fileName: t.name,
-				fileSize: t.size,
-				fileUploadDate: y().format("YYYY.MM.DD HH:mm:ss")
-			}), i = g(), a = i.getFirstChild();
-			a ? a.insertBefore(e) : i.append(e), e.getNextSibling() === null && e.insertAfter(h());
-		});
+function C() {
+	let [e] = y(), t = c(n), { t: r } = h(), [i, o] = d(!1);
+	return {
+		upload: async (n) => {
+			let i = t.lexical?.uploadByFile, s = t.lexical?.showFileError;
+			if (i) {
+				if (n.size >= 1073741824) {
+					s?.("upload", a(r, "errorFileTooLarge"));
+					return;
+				}
+				o(!0);
+				try {
+					let t;
+					try {
+						t = await i(n);
+					} catch {
+						s?.("upload", r("파일을 업로드하지 못했습니다. 다시 시도해 주세요."));
+						return;
+					}
+					e.update(() => w(n, t));
+				} finally {
+					o(!1);
+				}
+			}
+		},
+		isUploading: i
 	};
 }
-var C = d.div(({ theme: e }) => o`
+function w(e, t) {
+	let n = e.type.startsWith("image/") ? r({
+		src: t,
+		altText: e.name
+	}) : i({
+		fileUrl: t,
+		fileName: e.name,
+		fileSize: e.size,
+		fileUploadDate: b().format("YYYY.MM.DD HH:mm:ss")
+	}), a = _(), o = a.getFirstChild();
+	o ? o.insertBefore(n) : a.append(n), n.getNextSibling() === null && n.insertAfter(g());
+}
+var T = f.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 8px;
+
+  /* 툴바(첫 자식) 호버 시 다음 형제인 Description을 노출한다. component selector(\${Toolbar})는
+     @emotion/babel-plugin이 필요해 Storybook(vite)에서 깨지므로 구조적 셀렉터로 표현한다. */
+  & > :first-child:hover + * {
+    opacity: 1;
+  }
+`, E = f.div(({ theme: e, $loading: t }) => s`
     display: flex;
-    gap: 8px;
-    padding: 8px;
-    border: 1px dashed ${e.color.foreground.neutralBaseDisabled};
+    gap: 4px;
+    min-height: 72px;
+    border: 1px dashed
+      ${t ? e.color.foreground.info : e.color.foreground.neutralBaseDisabled};
     border-radius: 10px;
-  `), w = d.button(({ theme: e }) => o`
+    transition: border-color 0.15s ease;
+    /* 업로드 중엔 호버 발화·재클릭을 막는다. 덕분에 호버 테두리/설명 노출도 자연히 억제된다. */
+    pointer-events: ${t ? "none" : "auto"};
+
+    &:hover {
+      border-color: ${e.color.foreground.info};
+    }
+  `), D = f.button(({ theme: e }) => s`
+    flex: 1;
+    align-self: stretch;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 4px;
-    width: 72px;
-    height: 64px;
     padding: 8px;
-    border: 1px solid ${e.color.foreground.neutralBaseDisabled};
+    border: none;
     border-radius: 8px;
-    background: ${e.color.background.neutralBase};
+    background: transparent;
     color: ${e.color.foreground.neutralBase};
     cursor: pointer;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
 
     &:hover {
-      background: ${e.color.background.neutralAlt};
+      background: ${e.color.container.tealContainer};
+      color: ${e.color.foreground.info};
     }
-  `), T = d.span(({ theme: e }) => o`
+  `), O = f.div(({ theme: e }) => s`
+    flex: 1;
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    color: ${e.color.foreground.info};
+  `), k = f.span(({ theme: e }) => s`
+    font-family: ${e.fontFamily.ui};
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 16px;
+  `), A = f.div(({ theme: e }) => s`
     font-family: ${e.fontFamily.ui};
     font-size: 12px;
     font-weight: 500;
     line-height: 16px;
-  `), E = d.input`
+    padding: 0 4px;
+    color: ${e.color.foreground.info};
+    opacity: 0;
+    transition: opacity 0.15s ease;
+  `), j = f.input`
   display: none;
 `;
 //#endregion
-export { b as CompactToolbarPlugin };
+export { x as CompactToolbarPlugin };

package/dist/patterns/LexicalEditor/plugins/FloatingLinkEditorPlugin/index.js

@@ -33,7 +33,7 @@ function v(m, v, y, b) {
 			let n = a();
 			if (s(n)) {
 				let r = f(e(n), g);
-				if (g(r) && (t.metaKey || t.ctrlKey)) return window.open(r.getURL(), "_blank"), !0;
+				if (g(r) && (t.metaKey || t.ctrlKey)) return window.open(r.getURL(), "_blank", "noopener"), !0;
 			}
 			return !1;
 		}, u));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.130.0-alpha.7",
+  "version": "1.130.0-alpha.8",
   "packageManager": "pnpm@10.33.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -13,7 +13,6 @@
     }
   },
   "dependencies": {
-    "@emotion/css": "11.11.2",
     "@lexical/code": "0.32.1",
     "@lexical/link": "0.32.1",
     "@lexical/list": "0.32.1",
@@ -23,7 +22,6 @@
     "@lexical/selection": "0.32.1",
     "@lexical/table": "0.32.1",
     "@lexical/utils": "0.32.1",
-    "@mui/base": "5.0.0-beta.70",
     "@svgr/plugin-svgo": "8.1.0",
     "framer-motion": "11.3.19",
     "hex-to-css-filter": "5.4.0",
@@ -45,8 +43,10 @@
     "dist/**/*"
   ],
   "peerDependencies": {
+    "@emotion/css": "^11.0.0",
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
+    "@mui/base": "5.0.0-beta.70",
     "@mui/material": "^5.13.6",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
@@ -97,9 +97,11 @@
     "@babel/preset-env": "7.23.2",
     "@babel/preset-react": "7.22.5",
     "@babel/preset-typescript": "7.22.5",
+    "@emotion/css": "11.11.2",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@eslint/js": "9.7.0",
+    "@mui/base": "5.0.0-beta.70",
     "@mui/material": "5.13.6",
     "@storybook/addon-docs": "10.3.5",
     "@storybook/addon-links": "10.3.5",