@dotss/tictoccroc 0.9.0 → 0.10.0

package/dist/shared/components/ChatKit/ImageMessage/ImageMessage.mjs

@@ -62,22 +62,23 @@ function C({ id: y, assets: b, mine: C, status: w, regDatetime: T, unreadUserCou
 					overflow: "hidden"
 				},
 				children: b.map((e, n) => {
-					let i = b.length % h === 1 && n === b.length - 1, a = i ? g : v, o = e.state ?? "NORMAL", u = o === "NORMAL" ? void 0 : r(o);
+					let i = b.length % h === 1 && n === b.length - 1, a = i ? g : v, o = e.state ?? "NORMAL", u = o === "NORMAL" ? void 0 : r(o), d = !!j, _ = o === "NORMAL" ? `${n + 1}번째 사진` : `${n + 1}번째 사진, ${u}`;
 					return /* @__PURE__ */ p(s, {
-						tag: "button",
-						type: "button",
+						tag: d ? "button" : "div",
+						type: d ? "button" : void 0,
+						role: d ? void 0 : "img",
 						flexDirection: "column",
 						justifyContent: "center",
 						alignItems: "center",
 						gap: 1,
-						onClick: () => j?.(n),
-						"aria-label": o === "NORMAL" ? `${n + 1}번째 사진 보기` : `${n + 1}번째 사진, ${u}`,
+						onClick: d ? () => j(n) : void 0,
+						"aria-label": d && o === "NORMAL" ? `${_} 보기` : _,
 						inlineCSS: {
 							gridColumn: i ? "1 / -1" : void 0,
 							padding: 0,
 							border: "none",
 							background: z[20],
-							cursor: "pointer"
+							cursor: d ? "pointer" : "default"
 						},
 						children: o === "NORMAL" ? /* @__PURE__ */ p(t, {
 							src: e.source,

package/dist/shared/components/ChatKit/Message/Message.utils.mjs

@@ -15,8 +15,20 @@ function t(e) {
 		}))];
 	});
 }
-function n({ mine: t, status: n, unreadUserCount: r, content: i, regDatetime: a }) {
-	return `${t ? "나" : "상대방"}, ${i}, ${r && r > 0 ? "읽지 않음" : "읽음"}, ${n === "SUCCEEDED" ? "전송됨" : "전송 실패"}, ${e(a).format("YYYY년 MM월 DD일 A h:mm")}`;
+var n = {
+	SUCCEEDED: "전송됨",
+	FAILED: "전송 실패",
+	PENDING: "전송 중"
+};
+function r({ mine: t, status: r, unreadUserCount: i, content: a, regDatetime: o }) {
+	let s = n[r];
+	return [
+		t ? "나" : "상대방",
+		a,
+		i && i > 0 ? "읽지 않음" : "읽음",
+		s,
+		e(o).format("YYYY년 MM월 DD일 A h:mm")
+	].join(", ");
 }
 //#endregion
-export { n as getMessageLabel, t as markMessageGroupBoundaries };
+export { r as getMessageLabel, t as markMessageGroupBoundaries };

package/dist/shared/components/ChatKit/Message/Message.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/shared/components/Image/Image.mjs

@@ -2,134 +2,136 @@ import e from "../../hooks/useInView/index.mjs";
 import t from "../../hooks/useIsomorphicLayoutEffect/index.mjs";
 import n from "../../utils/getImageUrl/index.mjs";
 import r from "./Image.error.mjs";
-import { forwardRef as i, useEffect as a, useImperativeHandle as o, useRef as s, useState as c } from "react";
-import { Flexbox as l, Skeleton as u } from "@dotss/ui";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { convertHeicToPng as ee, isHeicSource as i } from "./Image.utils.mjs";
+import { forwardRef as a, useEffect as o, useImperativeHandle as s, useRef as c, useState as l } from "react";
+import { Flexbox as u, Skeleton as d } from "@dotss/ui";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region shared/components/Image/Image.tsx
-var m = i(({ src: i, width: m, height: h, fit: g = "cover", position: _ = "center", alt: v, scale: y = 2, onLoad: b, onLazyLoad: x, lazy: S = !1, borderRadius: C, disabledResizing: w = !1, withIntrinsicRatio: T = !1, enableBlurPlaceholder: E = !1, enableFallback: D = !1, enableErrorFallback: O = !0, renderErrorFallback: k, wrapperProps: A = {}, inViewOptions: j = {}, onError: M, ...N }, P) => {
-	let F = s(null), I = s(!1), L = s(null);
-	o(P, () => L.current);
-	let { isInView: R } = e(F, {
+var h = a(({ src: a, width: h, height: g, fit: _ = "cover", position: v = "center", alt: y, scale: b = 2, onLoad: x, onLazyLoad: S, lazy: C = !1, borderRadius: w, disabledResizing: T = !1, withIntrinsicRatio: E = !1, enableBlurPlaceholder: D = !1, enableFallback: O = !1, enableErrorFallback: k = !0, renderErrorFallback: A, wrapperProps: j = {}, inViewOptions: te = {}, onError: M, ...N }, P) => {
+	let F = c(null), I = c(!1), L = c(null), R = c(M);
+	R.current = M, s(P, () => L.current);
+	let { isInView: z } = e(F, {
 		threshold: .4,
-		...j
-	}), [z, B] = c(!1), [V, H] = c(!1), [U, W] = c(!1), [G, K] = c(!1), [q, J] = c(n({
+		...te
+	}), [B, V] = l(!1), [H, U] = l(!1), [W, G] = l(!1), [K, ne] = l(!1), [q, J] = l(n({
 		mode: "original",
-		src: i,
-		width: m,
-		height: h,
-		fit: g,
-		position: _,
-		scale: y,
-		disabledResizing: w
-	})), Y = i?.endsWith(".heic"), X = E ? n({
+		src: a,
+		width: h,
+		height: g,
+		fit: _,
+		position: v,
+		scale: b,
+		disabledResizing: T
+	})), Y = i(a), X = D ? n({
 		mode: "blur",
-		src: i,
-		width: m,
-		fit: g,
-		position: _,
+		src: a,
+		width: h,
+		fit: _,
+		position: v,
 		scale: 1 / 3,
-		disabledResizing: w
+		disabledResizing: T
 	}) : null, Z = (e) => {
-		H(!0), W(!1), typeof b == "function" && b(e);
+		U(!0), G(!1), typeof x == "function" && x(e);
 	}, Q = (e) => {
-		typeof M == "function" && M(e.nativeEvent), W(!0), H(!1);
-	}, $ = () => K(!0);
-	return a(() => {
-		if (S && F.current) {
+		Y && !q.startsWith("blob:") || (typeof M == "function" && M(e.nativeEvent), G(!0), U(!1));
+	}, $ = () => ne(!0);
+	return o(() => {
+		if (C && F.current) {
 			let e = () => {
-				R && B(!0);
+				z && V(!0);
 			};
 			return e(), window.appScreenContent?.addEventListener("scroll", e), window.addEventListener("resize", e), window.addEventListener("orientationchange", e), () => {
 				window.appScreenContent?.removeEventListener("scroll", e), window.removeEventListener("resize", e), window.removeEventListener("orientationchange", e);
 			};
 		}
-	}), a(() => {
-		typeof x == "function" && z && !I.current && (I.current = !0, x());
-	}, [x, z]), t(() => {
-		let e = L.current, t = (e) => {
-			window.fetch(i).then(async (t) => {
-				let n = await t.blob(), r = (await import("heic2any")).default, i = await r({
-					blob: n,
-					toType: "image/png"
-				});
-				J(URL.createObjectURL(i)), e.onload = () => {
-					e.style.opacity = "1", H(!0), W(!1), e.onload = null, e.onerror = null;
+	}), o(() => {
+		typeof S == "function" && B && !I.current && (I.current = !0, S());
+	}, [S, B]), t(() => {
+		let e = L.current, t = !1, n = (e) => {
+			ee(a).then((n) => {
+				t || (J(URL.createObjectURL(n)), e.onload = () => {
+					e.style.opacity = "1", U(!0), G(!1), e.onload = null, e.onerror = null;
 				}, e.onerror = () => {
-					W(!0), H(!1), e.onload = null, e.onerror = null;
-				};
+					G(!0), U(!1), e.onload = null, e.onerror = null;
+				});
+			}).catch((e) => {
+				t || (G(!0), U(!1), typeof R.current == "function" && R.current(new ErrorEvent("error", {
+					error: e,
+					message: e.message
+				})));
 			});
 		};
-		return e?.complete ? Y ? e.src.startsWith("blob:") || (e.style.transition = "opacity 0.3s", e.style.opacity = "0", t(e)) : e.naturalWidth > 0 ? (e.style.transition = "none", e.style.opacity = "1", H(!0)) : (e.style.opacity = "0", W(!0)) : e && (e.style.transition = "opacity 0.3s", e.style.opacity = "0", e.onload = () => {
-			e.style.opacity = "1", H(!0), e.onload = null;
+		return e?.complete ? Y ? e.src.startsWith("blob:") || (e.style.transition = "opacity 0.3s", e.style.opacity = "0", n(e)) : e.naturalWidth > 0 ? (e.style.transition = "none", e.style.opacity = "1", U(!0)) : (e.style.opacity = "0", G(!0)) : e && (e.style.transition = "opacity 0.3s", e.style.opacity = "0", e.onload = () => {
+			e.style.opacity = "1", U(!0), e.onload = null;
 		}, e.onerror = () => {
 			if (!Y) {
-				W(!0), e.onerror = null;
+				G(!0), e.onerror = null;
 				return;
 			}
-			W(!1), e.style.transition = "opacity 0.3s", e.style.opacity = "0", t(e);
+			G(!1), e.style.transition = "opacity 0.3s", e.style.opacity = "0", n(e);
 		}), () => {
-			e && (e.onload = null, e.onerror = null);
+			t = !0, e && (e.onload = null, e.onerror = null);
 		};
 	}, [
-		z,
-		i,
+		B,
+		a,
 		Y
-	]), a(() => {
+	]), o(() => {
 		J(n({
 			mode: "original",
-			src: i,
-			width: m,
-			height: h,
-			fit: g,
-			position: _,
-			scale: y,
-			disabledResizing: w
+			src: a,
+			width: h,
+			height: g,
+			fit: _,
+			position: v,
+			scale: b,
+			disabledResizing: T
 		}));
 	}, [
-		i,
-		m,
+		a,
 		h,
 		g,
 		_,
-		y,
-		w
-	]), S ? /* @__PURE__ */ p(l, {
-		...A,
+		v,
+		b,
+		T
+	]), C ? /* @__PURE__ */ m(u, {
+		...j,
 		ref: F,
-		inlineCSS: T ? {
+		inlineCSS: E ? {
 			position: "relative",
-			paddingTop: `calc(100% / ${m} * ${h})`,
+			paddingTop: `calc(100% / ${h} * ${g})`,
 			minWidth: "100%",
-			borderRadius: C,
+			borderRadius: w,
 			overflow: "hidden",
-			...A?.inlineCSS
+			...j?.inlineCSS
 		} : {
 			position: "relative",
-			width: m,
-			minWidth: m,
-			height: h,
-			borderRadius: C,
+			width: h,
+			minWidth: h,
+			height: g,
+			borderRadius: w,
 			overflow: "hidden",
-			...A?.inlineCSS
+			...j?.inlineCSS
 		},
 		children: [
-			D && /* @__PURE__ */ f(u, {
+			O && /* @__PURE__ */ p(d, {
 				width: "100%",
 				height: "100%",
-				borderRadius: C || 0,
+				borderRadius: w || 0,
 				inlineCSS: {
 					position: "absolute",
 					top: 0,
 					left: 0,
-					opacity: V || E && G ? 0 : 1,
+					opacity: H || D && K ? 0 : 1,
 					transition: "opacity 0.3s"
 				}
 			}),
-			E && X && z && /* @__PURE__ */ f("img", {
+			D && X && B && /* @__PURE__ */ p("img", {
 				src: X,
 				alt: "",
-				width: m,
-				height: h,
+				width: h,
+				height: g,
 				onLoad: $,
 				draggable: !1,
 				style: {
@@ -139,21 +141,21 @@ var m = i(({ src: i, width: m, height: h, fit: g = "cover", position: _ = "cente
 					width: "100%",
 					height: "100%",
 					filter: "blur(5px)",
-					opacity: G && !V ? 1 : 0,
+					opacity: K && !H ? 1 : 0,
 					transition: "opacity 0.3s",
-					objectFit: g,
-					objectPosition: _
+					objectFit: _,
+					objectPosition: v
 				}
 			}),
-			z && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("img", {
+			B && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("img", {
 				ref: L,
 				src: q,
-				alt: v,
-				width: m,
-				height: h,
+				alt: y,
+				width: h,
+				height: g,
 				onLoad: Z,
 				onError: Q,
-				"aria-hidden": U,
+				"aria-hidden": W,
 				draggable: !1,
 				...N,
 				style: {
@@ -165,46 +167,46 @@ var m = i(({ src: i, width: m, height: h, fit: g = "cover", position: _ = "cente
 					transition: "opacity 0.3s",
 					...N.style
 				}
-			}), O && U && (k?.() || /* @__PURE__ */ f(r, {}))] })
+			}), k && W && (A?.() || /* @__PURE__ */ p(r, {}))] })
 		]
-	}) : /* @__PURE__ */ p(l, {
-		...A,
+	}) : /* @__PURE__ */ m(u, {
+		...j,
 		ref: F,
-		inlineCSS: T ? {
+		inlineCSS: E ? {
 			position: "relative",
-			paddingTop: `calc(100% / ${m} * ${h})`,
+			paddingTop: `calc(100% / ${h} * ${g})`,
 			minWidth: "100%",
 			transition: "padding-top 0.2s",
-			borderRadius: C,
+			borderRadius: w,
 			overflow: "hidden",
-			...A?.inlineCSS
+			...j?.inlineCSS
 		} : {
 			position: "relative",
-			width: m,
-			minWidth: m,
-			height: h,
-			borderRadius: C,
+			width: h,
+			minWidth: h,
+			height: g,
+			borderRadius: w,
 			overflow: "hidden",
-			...A?.inlineCSS
+			...j?.inlineCSS
 		},
 		children: [
-			D && /* @__PURE__ */ f(u, {
+			O && /* @__PURE__ */ p(d, {
 				width: "100%",
 				height: "100%",
-				borderRadius: C || 0,
+				borderRadius: w || 0,
 				inlineCSS: {
 					position: "absolute",
 					top: 0,
 					left: 0,
-					opacity: V || E && G ? 0 : 1,
+					opacity: H || D && K ? 0 : 1,
 					transition: "opacity 0.3s"
 				}
 			}),
-			E && X && /* @__PURE__ */ f("img", {
+			D && X && /* @__PURE__ */ p("img", {
 				src: X,
 				alt: "",
-				width: m,
-				height: h,
+				width: h,
+				height: g,
 				onLoad: $,
 				draggable: !1,
 				style: {
@@ -214,19 +216,19 @@ var m = i(({ src: i, width: m, height: h, fit: g = "cover", position: _ = "cente
 					width: "100%",
 					height: "100%",
 					filter: "blur(5px)",
-					opacity: G && !V ? 1 : 0,
+					opacity: K && !H ? 1 : 0,
 					transition: "opacity 0.3s"
 				}
 			}),
-			/* @__PURE__ */ f("img", {
+			/* @__PURE__ */ p("img", {
 				ref: L,
 				src: q,
-				alt: v,
-				width: m,
-				height: h,
+				alt: y,
+				width: h,
+				height: g,
 				onLoad: Z,
 				onError: Q,
-				"aria-hidden": U,
+				"aria-hidden": W,
 				draggable: !1,
 				...N,
 				style: {
@@ -239,9 +241,9 @@ var m = i(({ src: i, width: m, height: h, fit: g = "cover", position: _ = "cente
 					...N.style
 				}
 			}),
-			O && U && (k?.() || /* @__PURE__ */ f(r, {}))
+			k && W && (A?.() || /* @__PURE__ */ p(r, {}))
 		]
 	});
 });
 //#endregion
-export { m as default };
+export { h as default };

package/dist/shared/components/Image/Image.utils.d.ts

@@ -0,0 +1,7 @@
+export declare function isHeicSource(src?: string): boolean;
+/**
+ * heic/heif 원본을 PNG Blob 으로 바꾼다. 같은 src 는 한 번만 변환하고 결과를 공유한다.
+ *
+ * 실패는 캐시에 남기지 않는다. 소비처의 다시 시도가 같은 src 로 다시 들어오기 때문이다.
+ */
+export declare function convertHeicToPng(src: string): Promise<Blob>;

package/dist/shared/components/Image/Image.utils.mjs

@@ -0,0 +1,21 @@
+//#region shared/components/Image/Image.utils.ts
+var e = [".heic", ".heif"];
+function t(t) {
+	let n = t?.toLowerCase() ?? "";
+	return e.some((e) => n.endsWith(e));
+}
+var n = /* @__PURE__ */ new Map();
+function r(e) {
+	let t = n.get(e);
+	if (t) return t;
+	let r = window.fetch(e).then((e) => e.blob()).then(async (e) => {
+		let { heicTo: t } = await import("heic-to");
+		return t({
+			blob: e,
+			type: "image/png"
+		});
+	});
+	return n.set(e, r), r.catch(() => n.delete(e)), r;
+}
+//#endregion
+export { r as convertHeicToPng, t as isHeicSource };

package/dist/shared/components/Image/Image.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teacher/profile/components/AbilityCollection/AbilityCollection.d.ts

@@ -1,6 +1,8 @@
+import { ReactNode } from 'react';
 import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
 export interface AbilityCollectionProps extends FlexboxProps {
     enableToggle?: boolean;
+    description?: ReactNode;
 }
-declare function AbilityCollection({ children, enableToggle, ...props }: AbilityCollectionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function AbilityCollection({ children, enableToggle, description, ...props }: AbilityCollectionProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default AbilityCollection;

package/dist/teacher/profile/components/AbilityCollection/AbilityCollection.mjs

@@ -4,28 +4,28 @@ import { Button as o, Flexbox as s, Icon as c, Typography as l } from "@dotss/ui
 import u from "@dotss/ui/core/useTheme";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region teacher/profile/components/AbilityCollection/AbilityCollection.tsx
-function p({ children: p, enableToggle: m = !1, ...h }) {
-	let { spacing: g } = u(), [_, v] = a(!1), [y, b] = a(0), [x, S] = a(0), C = i(null), w = t.toArray(p).filter(r).filter((t) => t.type === e), T = () => v((e) => !e), E = (e) => (t) => {
+function p({ children: p, enableToggle: m = !1, description: h, ...g }) {
+	let { spacing: _ } = u(), [v, y] = a(!1), [b, x] = a(0), [S, C] = a(0), w = i(null), T = t.toArray(p).filter(r).filter((t) => t.type === e), E = () => y((e) => !e), D = (e) => (t) => {
 		let n = Number(t.currentTarget.getAttribute("data-row") || -1), r = Number(t.currentTarget.getAttribute("data-col") || -1);
-		b(n), S(r), e?.(t);
-	}, D = (e) => (t) => {
+		x(n), C(r), e?.(t);
+	}, O = (e) => (t) => {
 		let n = Number(t.currentTarget.getAttribute("data-row") || -1), r = Number(t.currentTarget.getAttribute("data-col") || -1);
 		switch (t.key) {
 			case "ArrowUp":
 				if (t.preventDefault(), n === 0) return;
-				b(n - 1), C.current?.querySelector(`[data-row="${n - 1}"][data-col="${r}"]`)?.focus();
+				x(n - 1), w.current?.querySelector(`[data-row="${n - 1}"][data-col="${r}"]`)?.focus();
 				break;
 			case "ArrowDown":
-				if (t.preventDefault(), n === 2 || n === 1 && m && !_) return;
-				b(n + 1), C.current?.querySelector(`[data-row="${n + 1}"][data-col="${r}"]`)?.focus();
+				if (t.preventDefault(), n === 2 || n === 1 && m && !v) return;
+				x(n + 1), w.current?.querySelector(`[data-row="${n + 1}"][data-col="${r}"]`)?.focus();
 				break;
 			case "ArrowLeft":
 				if (t.preventDefault(), r === 0) return;
-				S(r - 1), C.current?.querySelector(`[data-row="${n}"][data-col="${r - 1}"]`)?.focus();
+				C(r - 1), w.current?.querySelector(`[data-row="${n}"][data-col="${r - 1}"]`)?.focus();
 				break;
 			case "ArrowRight":
 				if (t.preventDefault(), r === 2) return;
-				S(r + 1), C.current?.querySelector(`[data-row="${n}"][data-col="${r + 1}"]`)?.focus();
+				C(r + 1), w.current?.querySelector(`[data-row="${n}"][data-col="${r + 1}"]`)?.focus();
 				break;
 			case "Enter":
 			case " ":
@@ -39,10 +39,10 @@ function p({ children: p, enableToggle: m = !1, ...h }) {
 		flexDirection: "column",
 		gap: 4,
 		"aria-labelledby": "ability-collection-title",
-		...h,
+		...g,
 		inlineCSS: {
 			width: "100%",
-			...h?.inlineCSS
+			...g?.inlineCSS
 		},
 		children: [
 			/* @__PURE__ */ d(l, {
@@ -51,8 +51,9 @@ function p({ children: p, enableToggle: m = !1, ...h }) {
 				variant: "h2B",
 				children: "능력치 배지"
 			}),
+			h,
 			/* @__PURE__ */ d(s, {
-				ref: C,
+				ref: w,
 				id: "ability-badge-grid",
 				role: "grid",
 				gap: 2,
@@ -63,23 +64,23 @@ function p({ children: p, enableToggle: m = !1, ...h }) {
 					display: "grid",
 					gridTemplateColumns: "repeat(3, 1fr)",
 					width: "inherit",
-					columnGap: g.content(2),
-					rowGap: g.content(6),
-					maxHeight: _ ? void 0 : m ? `calc(2 * 74px + ${g.content(12)}px)` : void 0,
+					columnGap: _.content(2),
+					rowGap: _.content(6),
+					maxHeight: v ? void 0 : m ? `calc(2 * 74px + ${_.content(12)}px)` : void 0,
 					overflow: "hidden"
 				},
-				children: t.map(w, (e, t) => {
+				children: t.map(T, (e, t) => {
 					let r = Math.floor(t / 3), i = t % 3;
 					return /* @__PURE__ */ d(s, {
 						role: "gridcell",
 						children: n(e, {
-							tabIndex: y === r && x === i ? 0 : -1,
+							tabIndex: b === r && S === i ? 0 : -1,
 							"data-row": r,
 							"data-col": i,
 							"aria-posinset": t + 1,
-							"aria-setsize": w.length,
-							onFocus: E(e.props.onFocus),
-							onKeyDown: D(e.props.onKeyDown),
+							"aria-setsize": T.length,
+							onFocus: D(e.props.onFocus),
+							onKeyDown: O(e.props.onKeyDown),
 							...e.props
 						})
 					}, `ability-badge-gridcell-${t}`);
@@ -93,11 +94,11 @@ function p({ children: p, enableToggle: m = !1, ...h }) {
 					fullWidth: !0,
 					variant: "text",
 					color: "secondary",
-					endAdornment: /* @__PURE__ */ d(c, { name: _ ? "ChevronUpLine" : "ChevronDownLine" }),
-					onClick: T,
+					endAdornment: /* @__PURE__ */ d(c, { name: v ? "ChevronUpLine" : "ChevronDownLine" }),
+					onClick: E,
 					"aria-controls": "ability-badge-grid",
-					"aria-expanded": _,
-					children: _ ? "접기" : "더 보기"
+					"aria-expanded": v,
+					children: v ? "접기" : "더 보기"
 				})
 			})
 		]

package/dist/teacher/profile/components/ActivityGallery/ActivityGallery.d.ts

@@ -4,8 +4,9 @@ import { MasonryProps } from '../../../../shared/components/Masonry';
 export interface ActivityGalleryProps extends FlexboxProps {
     onClickViewAll?: () => void;
     action?: ReactNode;
+    description?: ReactNode;
     hideHeader?: boolean;
     masonryProps?: MasonryProps;
 }
-declare function ActivityGallery({ children, onClickViewAll, action, hideHeader, masonryProps: { columnCount, rowCount, spacing, edgeSpacing, direction, defaultContainerWidth, defaultContainerHeight, ...masonryProps }, ...props }: ActivityGalleryProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ActivityGallery({ children, onClickViewAll, action, description, hideHeader, masonryProps: { columnCount, rowCount, spacing, edgeSpacing, direction, defaultContainerWidth, defaultContainerHeight, ...masonryProps }, ...props }: ActivityGalleryProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default ActivityGallery;

package/dist/teacher/profile/components/ActivityGallery/ActivityGallery.mjs

@@ -4,8 +4,8 @@ import { Children as n, isValidElement as r } from "react";
 import { Button as i, Flexbox as a, Icon as o, Typography as s } from "@dotss/ui";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region teacher/profile/components/ActivityGallery/ActivityGallery.tsx
-function u({ children: u, onClickViewAll: d, action: f, hideHeader: p = !1, masonryProps: { columnCount: m = 2, rowCount: h = 2, spacing: g = 2, edgeSpacing: _ = 0, direction: v = "horizontal", defaultContainerWidth: y = 360, defaultContainerHeight: b = 0, ...x } = {}, ...S }) {
-	let C = n.toArray(u).filter(r).filter((t) => t.type === e), w = C.length > 0, T = (e, t, n) => {
+function u({ children: u, onClickViewAll: d, action: f, description: p, hideHeader: m = !1, masonryProps: { columnCount: h = 2, rowCount: g = 2, spacing: _ = 2, edgeSpacing: v = 0, direction: y = "horizontal", defaultContainerWidth: b = 360, defaultContainerHeight: x = 0, ...S } = {}, ...C }) {
+	let w = n.toArray(u).filter(r).filter((t) => t.type === e), T = w.length > 0, E = (e, t, n) => {
 		let r = e.props.type === "VIDEO" || e.props.type === "VIMEO" || e.props.type === "YOUTUBE" ? "동영상" : "사진";
 		r = e.props.primary ? `대표 ${r}` : r;
 		let i = {
@@ -18,16 +18,16 @@ function u({ children: u, onClickViewAll: d, action: f, hideHeader: p = !1, maso
 	return /* @__PURE__ */ l(a, {
 		tag: "section",
 		flexDirection: "column",
-		"aria-labelledby": p ? void 0 : "activity-gallery-title",
-		"aria-label": p ? "선생님 활동 갤러리" : void 0,
+		"aria-labelledby": m ? void 0 : "activity-gallery-title",
+		"aria-label": m ? "선생님 활동 갤러리" : void 0,
 		gap: 4,
-		...S,
+		...C,
 		inlineCSS: {
 			width: "100%",
-			...S?.inlineCSS
+			...C?.inlineCSS
 		},
 		children: [
-			!p && /* @__PURE__ */ l(a, {
+			!m && /* @__PURE__ */ l(a, {
 				alignItems: "center",
 				justifyContent: "space-between",
 				gap: 2,
@@ -46,19 +46,20 @@ function u({ children: u, onClickViewAll: d, action: f, hideHeader: p = !1, maso
 					children: "전체보기"
 				})]
 			}),
-			w && /* @__PURE__ */ c(t, {
-				rowCount: h,
-				columnCount: m,
-				spacing: g,
-				edgeSpacing: _,
-				direction: v,
-				defaultContainerWidth: y,
-				defaultContainerHeight: b,
+			p,
+			T && /* @__PURE__ */ c(t, {
+				rowCount: g,
+				columnCount: h,
+				spacing: _,
+				edgeSpacing: v,
+				direction: y,
+				defaultContainerWidth: b,
+				defaultContainerHeight: x,
 				role: "group",
 				"aria-label": "콘텐츠 목록",
-				...x,
-				children: C.map((e, t) => T(e, t, C.length))
-			}, C.map((e) => e.key).join(",")),
+				...S,
+				children: w.map((e, t) => E(e, t, w.length))
+			}, w.map((e) => e.key).join(",")),
 			f && /* @__PURE__ */ c(a, {
 				mt: 2,
 				flexGrow: 1,

package/dist/teacher/profile/components/AvailableScheduleSection/AvailableScheduleSection.d.ts

@@ -4,6 +4,7 @@ import { SchedulerProps } from '../../../../shared/components/Scheduler';
 export interface AvailableScheduleSectionProps extends FlexboxProps {
     title?: string;
     action?: ReactNode;
+    description?: ReactNode;
     footer?: ReactNode;
     schedulerProps?: SchedulerProps;
     enableToggle?: boolean;