@dotss/tictoccroc 0.9.1 → 0.11.0

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

@@ -4,10 +4,10 @@ import { Button as r, Flexbox as i, Icon as a, Typography as o } from "@dotss/ui
 import s from "@dotss/ui/core/useTheme";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region teacher/profile/components/CareNoteSection/CareNoteSection.tsx
-var u = n(({ children: n, totalCount: u = 0, onClickViewAll: d, ...f }, p) => {
-	let { palette: { background: m }, spacing: h } = s(), g = t.count(n);
+var u = n(({ children: n, totalCount: u = 0, description: d, onClickViewAll: f, ...p }, m) => {
+	let { palette: { background: h }, spacing: g } = s(), _ = t.count(n);
 	return /* @__PURE__ */ l(i, {
-		ref: p,
+		ref: m,
 		tag: "section",
 		pt: 10,
 		pb: 10,
@@ -16,56 +16,60 @@ var u = n(({ children: n, totalCount: u = 0, onClickViewAll: d, ...f }, p) => {
 		gap: 4,
 		flexDirection: "column",
 		"aria-labelledby": "care-note-section-title",
-		...f,
+		...p,
 		inlineCSS: {
 			width: "100%",
-			backgroundColor: m.primary,
-			...f?.inlineCSS
+			backgroundColor: h.primary,
+			...p?.inlineCSS
 		},
-		children: [/* @__PURE__ */ l(i, {
-			alignItems: "center",
-			justifyContent: "space-between",
-			gap: 1,
-			children: [/* @__PURE__ */ c(i, {
+		children: [
+			/* @__PURE__ */ l(i, {
 				alignItems: "center",
-				gap: 2,
-				children: /* @__PURE__ */ l(o, {
-					id: "care-note-section-title",
-					tag: "h2",
-					variant: "h2B",
-					children: ["선생님의 수업 노트", u > 0 && /* @__PURE__ */ l(o, {
-						tag: "span",
-						variant: "h4R",
-						color: "grey.70",
-						inlineCSS: {
-							marginLeft: h.content(2),
-							verticalAlign: 2
-						},
-						children: [
-							"(",
-							u.toLocaleString(),
-							"개)"
-						]
-					})]
-				})
-			}), typeof d == "function" && /* @__PURE__ */ c(r, {
-				variant: "text",
-				size: "small",
-				color: "secondary",
-				endAdornment: /* @__PURE__ */ c(a, { name: "ChevronRightLine" }),
-				onClick: d,
-				children: "전체보기"
-			})]
-		}), /* @__PURE__ */ c(e, {
-			rowCount: 1,
-			spacing: 3,
-			inlineCSS: {
-				width: `calc(100% + ${h.content(8)}px)`,
-				gridAutoColumns: g > 1 ? `calc(100% - ${h.content(8)}px)` : "100%",
-				margin: `0 -${h.content(4)}px`
-			},
-			children: n
-		})]
+				justifyContent: "space-between",
+				gap: 1,
+				children: [/* @__PURE__ */ c(i, {
+					alignItems: "center",
+					gap: 2,
+					children: /* @__PURE__ */ l(o, {
+						id: "care-note-section-title",
+						tag: "h2",
+						variant: "h2B",
+						children: ["선생님의 수업 노트", u > 0 && /* @__PURE__ */ l(o, {
+							tag: "span",
+							variant: "h4R",
+							color: "grey.70",
+							inlineCSS: {
+								marginLeft: g.content(2),
+								verticalAlign: 2
+							},
+							children: [
+								"(",
+								u.toLocaleString(),
+								"개)"
+							]
+						})]
+					})
+				}), typeof f == "function" && /* @__PURE__ */ c(r, {
+					variant: "text",
+					size: "small",
+					color: "secondary",
+					endAdornment: /* @__PURE__ */ c(a, { name: "ChevronRightLine" }),
+					onClick: f,
+					children: "전체보기"
+				})]
+			}),
+			d,
+			/* @__PURE__ */ c(e, {
+				rowCount: 1,
+				spacing: 3,
+				inlineCSS: {
+					width: `calc(100% + ${g.content(8)}px)`,
+					gridAutoColumns: _ > 1 ? `calc(100% - ${g.content(8)}px)` : "100%",
+					margin: `0 -${g.content(4)}px`
+				},
+				children: n
+			})
+		]
 	});
 });
 //#endregion

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

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

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

@@ -5,9 +5,9 @@ import l from "@dotss/ui/core/useTheme";
 import u from "dayjs";
 import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region teacher/profile/components/CareerSection/CareerSection.tsx
-function m({ children: m, action: h, showTooltip: g = !1, enableToggle: _ = !1, ...v }) {
-	let { spacing: y } = l(), [b, x] = r(!1), [S, C] = r(!1), w = t.toArray(m).filter(n).filter((t) => t.type === e), T = w.length > 0, E = w.length > 3, D = w.map((e) => [e.props.startDate, e.props.endDate ?? u().format("YYYY-MM-DD")]).map(([e, t]) => [u(e), u(t)]).map(([e, t]) => t.diff(e, "month") < 1 ? 1 : t.diff(e, "month")), O = Math.floor(D.reduce((e, t) => e + t, 0) / 12), k = D.reduce((e, t) => e + t, 0) % 12, A = () => C((e) => !e), j = () => x((e) => !e), M = (e) => {
-		(e.key === "Enter" || e.key === " ") && j();
+function m({ children: m, action: h, description: g, showTooltip: _ = !1, enableToggle: v = !1, ...y }) {
+	let { spacing: b } = l(), [x, S] = r(!1), [C, w] = r(!1), T = t.toArray(m).filter(n).filter((t) => t.type === e), E = T.length > 0, D = T.length > 3, O = T.map((e) => [e.props.startDate, e.props.endDate ?? u().format("YYYY-MM-DD")]).map(([e, t]) => [u(e), u(t)]).map(([e, t]) => t.diff(e, "month") < 1 ? 1 : t.diff(e, "month")), k = Math.floor(O.reduce((e, t) => e + t, 0) / 12), A = O.reduce((e, t) => e + t, 0) % 12, j = () => w((e) => !e), M = () => S((e) => !e), N = (e) => {
+		(e.key === "Enter" || e.key === " ") && M();
 	};
 	return /* @__PURE__ */ p(a, {
 		tag: "section",
@@ -15,10 +15,10 @@ function m({ children: m, action: h, showTooltip: g = !1, enableToggle: _ = !1,
 		alignItems: "flex-start",
 		"aria-labelledby": "career-title",
 		gap: 2,
-		...v,
+		...y,
 		inlineCSS: {
 			width: "100%",
-			...v?.inlineCSS
+			...y?.inlineCSS
 		},
 		children: [
 			/* @__PURE__ */ p(a, {
@@ -37,9 +37,9 @@ function m({ children: m, action: h, showTooltip: g = !1, enableToggle: _ = !1,
 						variant: "h2B",
 						"aria-label": "선생님 경력 안내",
 						children: "경력"
-					}), g && /* @__PURE__ */ f(s, {
-						open: b,
-						onClose: j,
+					}), _ && /* @__PURE__ */ f(s, {
+						open: x,
+						onClose: M,
 						color: "secondary",
 						id: "career-section-tooltip",
 						bodyId: "career-section-tooltip-body",
@@ -50,7 +50,7 @@ function m({ children: m, action: h, showTooltip: g = !1, enableToggle: _ = !1,
 							noWrap: !0,
 							inlineCSS: {
 								display: "flex",
-								gap: y.content(1),
+								gap: b.content(1),
 								"& svg": {
 									width: "20px !important",
 									height: "20px !important",
@@ -75,35 +75,36 @@ function m({ children: m, action: h, showTooltip: g = !1, enableToggle: _ = !1,
 							name: "TooltipFill",
 							size: "small",
 							color: "grey.50",
-							onClick: j,
-							onKeyDown: M,
+							onClick: M,
+							onKeyDown: N,
 							"aria-label": "추가 정보 안내",
 							inlineCSS: { cursor: "pointer" }
 						})
 					})]
-				}), (O > 0 || k > 0) && /* @__PURE__ */ p(c, {
+				}), (k > 0 || A > 0) && /* @__PURE__ */ p(c, {
 					tag: "p",
 					variant: "h4R",
 					inlineCSS: { "& strong": { fontWeight: 700 } },
 					children: [
 						"총\xA0",
-						O > 0 && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("strong", { children: O }), "년"] }),
-						k > 0 && /* @__PURE__ */ p(d, { children: [
-							O > 0 && /* @__PURE__ */ f(d, { children: "\xA0" }),
-							/* @__PURE__ */ f("strong", { children: k }),
+						k > 0 && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("strong", { children: k }), "년"] }),
+						A > 0 && /* @__PURE__ */ p(d, { children: [
+							k > 0 && /* @__PURE__ */ f(d, { children: "\xA0" }),
+							/* @__PURE__ */ f("strong", { children: A }),
 							"개월"
 						] })
 					]
 				})]
 			}),
-			T && /* @__PURE__ */ f(a, {
+			g,
+			E && /* @__PURE__ */ f(a, {
 				id: "career-section-career-items",
 				tag: "ul",
 				flexDirection: "column",
 				inlineCSS: { width: "inherit" },
-				children: w.slice(0, !_ || S ? void 0 : 3)
+				children: T.slice(0, !v || C ? void 0 : 3)
 			}),
-			_ && E && /* @__PURE__ */ f(a, {
+			v && D && /* @__PURE__ */ f(a, {
 				alignItems: "center",
 				justifyContent: "center",
 				mt: 2,
@@ -112,14 +113,14 @@ function m({ children: m, action: h, showTooltip: g = !1, enableToggle: _ = !1,
 					fullWidth: !0,
 					variant: "text",
 					color: "secondary",
-					endAdornment: /* @__PURE__ */ f(o, { name: S ? "ChevronUpLine" : "ChevronDownLine" }),
-					onClick: A,
+					endAdornment: /* @__PURE__ */ f(o, { name: C ? "ChevronUpLine" : "ChevronDownLine" }),
+					onClick: j,
 					"aria-controls": "career-section-career-items",
-					"aria-expanded": S,
-					children: S ? "접기" : "더 보기"
+					"aria-expanded": C,
+					children: C ? "접기" : "더 보기"
 				})
 			}),
-			!_ && h && /* @__PURE__ */ f(a, {
+			!v && h && /* @__PURE__ */ f(a, {
 				mt: 4,
 				flexGrow: 1,
 				alignItems: "center",

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

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

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

@@ -4,20 +4,20 @@ import { Button as i, Flexbox as a, Icon as o, Tooltip as s, Typography as c } f
 import l from "@dotss/ui/core/useTheme";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region teacher/profile/components/CertificateSection/CertificateSection.tsx
-function f({ children: f, action: p, showTooltip: m = !1, enableToggle: h = !1, ...g }) {
-	let { spacing: _ } = l(), [v, y] = r(!1), [b, x] = r(!1), S = t.toArray(f).filter(n).filter((t) => t.type === e), C = S.length > 0, w = S.length > 3, T = () => y((e) => !e), E = (e) => {
-		(e.key === "Enter" || e.key === " ") && T();
-	}, D = () => x((e) => !e);
+function f({ children: f, action: p, description: m, showTooltip: h = !1, enableToggle: g = !1, ..._ }) {
+	let { spacing: v } = l(), [y, b] = r(!1), [x, S] = r(!1), C = t.toArray(f).filter(n).filter((t) => t.type === e), w = C.length > 0, T = C.length > 3, E = () => b((e) => !e), D = (e) => {
+		(e.key === "Enter" || e.key === " ") && E();
+	}, O = () => S((e) => !e);
 	return /* @__PURE__ */ d(a, {
 		tag: "section",
 		flexDirection: "column",
 		alignItems: "flex-start",
 		"aria-labelledby": "certificate-section-title",
 		gap: 2,
-		...g,
+		..._,
 		inlineCSS: {
 			width: "100%",
-			...g?.inlineCSS
+			..._?.inlineCSS
 		},
 		children: [
 			/* @__PURE__ */ d(a, {
@@ -30,9 +30,9 @@ function f({ children: f, action: p, showTooltip: m = !1, enableToggle: h = !1,
 					variant: "h2B",
 					"aria-label": "선생님 자격증 목록",
 					children: "자격증"
-				}), m && /* @__PURE__ */ u(s, {
-					open: v,
-					onClose: T,
+				}), h && /* @__PURE__ */ u(s, {
+					open: y,
+					onClose: E,
 					color: "secondary",
 					id: "certificate-section-tooltip",
 					bodyId: "certificate-section-tooltip-body",
@@ -43,7 +43,7 @@ function f({ children: f, action: p, showTooltip: m = !1, enableToggle: h = !1,
 						noWrap: !0,
 						inlineCSS: {
 							display: "flex",
-							gap: _.content(1),
+							gap: v.content(1),
 							"& svg": {
 								width: "20px !important",
 								height: "20px !important",
@@ -68,21 +68,22 @@ function f({ children: f, action: p, showTooltip: m = !1, enableToggle: h = !1,
 						name: "TooltipFill",
 						size: "small",
 						color: "grey.50",
-						onClick: T,
-						onKeyDown: E,
+						onClick: E,
+						onKeyDown: D,
 						"aria-label": "추가 정보 안내",
 						inlineCSS: { cursor: "pointer" }
 					})
 				})]
 			}),
-			C && /* @__PURE__ */ u(a, {
+			m,
+			w && /* @__PURE__ */ u(a, {
 				id: "certificate-section-certificate-items",
 				tag: "ul",
 				flexDirection: "column",
 				inlineCSS: { width: "inherit" },
-				children: S.slice(0, !h || b ? void 0 : 3)
+				children: C.slice(0, !g || x ? void 0 : 3)
 			}),
-			h && w && /* @__PURE__ */ u(a, {
+			g && T && /* @__PURE__ */ u(a, {
 				alignItems: "center",
 				justifyContent: "center",
 				mt: 2,
@@ -91,14 +92,14 @@ function f({ children: f, action: p, showTooltip: m = !1, enableToggle: h = !1,
 					fullWidth: !0,
 					variant: "text",
 					color: "secondary",
-					endAdornment: /* @__PURE__ */ u(o, { name: b ? "ChevronUpLine" : "ChevronDownLine" }),
-					onClick: D,
+					endAdornment: /* @__PURE__ */ u(o, { name: x ? "ChevronUpLine" : "ChevronDownLine" }),
+					onClick: O,
 					"aria-controls": "certificate-section-certificate-items",
-					"aria-expanded": b,
-					children: b ? "접기" : "더 보기"
+					"aria-expanded": x,
+					children: x ? "접기" : "더 보기"
 				})
 			}),
-			!h && p && /* @__PURE__ */ u(a, {
+			!g && p && /* @__PURE__ */ u(a, {
 				mt: 4,
 				flexGrow: 1,
 				alignItems: "center",

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

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

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

@@ -4,20 +4,20 @@ import { Button as i, Flexbox as a, Icon as o, Tooltip as s, Typography as c } f
 import l from "@dotss/ui/core/useTheme";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region teacher/profile/components/EducationSection/EducationSection.tsx
-function f({ children: f, action: p, showTooltip: m = !1, enableToggle: h = !1, ...g }) {
-	let { spacing: _ } = l(), [v, y] = r(!1), [b, x] = r(!1), S = t.toArray(f).filter(n).filter((t) => t.type === e), C = S.length > 0, w = S.length > 3, T = () => y((e) => !e), E = (e) => {
-		(e.key === "Enter" || e.key === " ") && T();
-	}, D = () => x((e) => !e);
+function f({ children: f, action: p, description: m, showTooltip: h = !1, enableToggle: g = !1, ..._ }) {
+	let { spacing: v } = l(), [y, b] = r(!1), [x, S] = r(!1), C = t.toArray(f).filter(n).filter((t) => t.type === e), w = C.length > 0, T = C.length > 3, E = () => b((e) => !e), D = (e) => {
+		(e.key === "Enter" || e.key === " ") && E();
+	}, O = () => S((e) => !e);
 	return /* @__PURE__ */ d(a, {
 		tag: "section",
 		flexDirection: "column",
 		alignItems: "flex-start",
 		"aria-labelledby": "education-section-title",
 		gap: 2,
-		...g,
+		..._,
 		inlineCSS: {
 			width: "100%",
-			...g?.inlineCSS
+			..._?.inlineCSS
 		},
 		children: [
 			/* @__PURE__ */ d(a, {
@@ -30,9 +30,9 @@ function f({ children: f, action: p, showTooltip: m = !1, enableToggle: h = !1,
 					variant: "h2B",
 					"aria-label": "선생님 학력 목록",
 					children: "학력"
-				}), m && /* @__PURE__ */ u(s, {
-					open: v,
-					onClose: T,
+				}), h && /* @__PURE__ */ u(s, {
+					open: y,
+					onClose: E,
 					color: "secondary",
 					id: "education-section-tooltip",
 					bodyId: "education-section-tooltip-body",
@@ -43,7 +43,7 @@ function f({ children: f, action: p, showTooltip: m = !1, enableToggle: h = !1,
 						noWrap: !0,
 						inlineCSS: {
 							display: "flex",
-							gap: _.content(1),
+							gap: v.content(1),
 							"& svg": {
 								width: "20px !important",
 								height: "20px !important",
@@ -68,21 +68,22 @@ function f({ children: f, action: p, showTooltip: m = !1, enableToggle: h = !1,
 						name: "TooltipFill",
 						size: "small",
 						color: "grey.50",
-						onClick: T,
-						onKeyDown: E,
+						onClick: E,
+						onKeyDown: D,
 						"aria-label": "추가 정보 안내",
 						inlineCSS: { cursor: "pointer" }
 					})
 				})]
 			}),
-			C && /* @__PURE__ */ u(a, {
+			m,
+			w && /* @__PURE__ */ u(a, {
 				id: "education-section-education-items",
 				tag: "ul",
 				flexDirection: "column",
 				inlineCSS: { width: "inherit" },
-				children: S.slice(0, !h || b ? void 0 : 3)
+				children: C.slice(0, !g || x ? void 0 : 3)
 			}),
-			h && w && /* @__PURE__ */ u(a, {
+			g && T && /* @__PURE__ */ u(a, {
 				alignItems: "center",
 				justifyContent: "center",
 				mt: 2,
@@ -91,14 +92,14 @@ function f({ children: f, action: p, showTooltip: m = !1, enableToggle: h = !1,
 					fullWidth: !0,
 					variant: "text",
 					color: "secondary",
-					endAdornment: /* @__PURE__ */ u(o, { name: b ? "ChevronUpLine" : "ChevronDownLine" }),
-					onClick: D,
+					endAdornment: /* @__PURE__ */ u(o, { name: x ? "ChevronUpLine" : "ChevronDownLine" }),
+					onClick: O,
 					"aria-controls": "education-section-education-items",
-					"aria-expanded": b,
-					children: b ? "접기" : "더 보기"
+					"aria-expanded": x,
+					children: x ? "접기" : "더 보기"
 				})
 			}),
-			!h && p && /* @__PURE__ */ u(a, {
+			!g && p && /* @__PURE__ */ u(a, {
 				mt: 4,
 				flexGrow: 1,
 				alignItems: "center",

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

@@ -1,6 +1,8 @@
+import { ReactNode } from 'react';
 import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
 export interface ParentReviewSectionProps extends FlexboxProps {
     totalCount: number;
+    description?: ReactNode;
     onClickViewAll?: () => void;
 }
 declare const ParentReviewSection: import('react').ForwardRefExoticComponent<Omit<ParentReviewSectionProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -3,18 +3,18 @@ import { Button as t, Flexbox as n, Icon as r, Typography as i } from "@dotss/ui
 import a from "@dotss/ui/core/useTheme";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region teacher/profile/components/ParentReviewSection/ParentReviewSection.tsx
-var c = e(({ children: e, totalCount: c, onClickViewAll: l, ...u }, d) => {
-	let { palette: { grey: f }, spacing: p } = a();
+var c = e(({ children: e, totalCount: c, description: l, onClickViewAll: u, ...d }, f) => {
+	let { palette: { grey: p }, spacing: m } = a();
 	return /* @__PURE__ */ s(n, {
-		ref: d,
+		ref: f,
 		tag: "section",
 		gap: 4,
 		flexDirection: "column",
 		"aria-labelledby": "parent-review-section-title",
-		...u,
+		...d,
 		inlineCSS: {
 			width: "100%",
-			...u?.inlineCSS
+			...d?.inlineCSS
 		},
 		children: [
 			/* @__PURE__ */ s(n, {
@@ -33,7 +33,7 @@ var c = e(({ children: e, totalCount: c, onClickViewAll: l, ...u }, d) => {
 							variant: "h4R",
 							color: "grey.70",
 							inlineCSS: {
-								marginLeft: p.content(2),
+								marginLeft: m.content(2),
 								verticalAlign: 2
 							},
 							children: [
@@ -43,22 +43,23 @@ var c = e(({ children: e, totalCount: c, onClickViewAll: l, ...u }, d) => {
 							]
 						})]
 					})
-				}), typeof l == "function" && /* @__PURE__ */ o(t, {
+				}), typeof u == "function" && /* @__PURE__ */ o(t, {
 					variant: "text",
 					size: "small",
 					color: "secondary",
 					endAdornment: /* @__PURE__ */ o(r, { name: "ChevronRightLine" }),
-					onClick: l,
+					onClick: u,
 					children: "전체보기"
 				})]
 			}),
+			l,
 			c > 0 && /* @__PURE__ */ o(n, {
 				tag: "ul",
 				flexDirection: "column",
 				inlineCSS: { "& > li + li": {
-					borderTop: `1px solid ${f[10]}`,
-					marginTop: p.content(5),
-					paddingTop: p.content(5)
+					borderTop: `1px solid ${p[10]}`,
+					marginTop: m.content(5),
+					paddingTop: m.content(5)
 				} },
 				children: e
 			}),

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

@@ -4,6 +4,7 @@ export interface PreferredActivityKeywordGroupProps extends FlexboxProps {
     keywords: string[];
     title?: string;
     action?: ReactNode;
+    description?: ReactNode;
 }
-declare function PreferredActivityKeywordGroup({ keywords, title, action, ...props }: PreferredActivityKeywordGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function PreferredActivityKeywordGroup({ keywords, title, action, description, ...props }: PreferredActivityKeywordGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default PreferredActivityKeywordGroup;

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

@@ -1,16 +1,16 @@
 import { Flexbox as e, Label as t, Typography as n } from "@dotss/ui";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region teacher/profile/components/PreferredActivityKeywordGroup/PreferredActivityKeywordGroup.tsx
-function a({ keywords: a, title: o = "자신 있는 활동 키워드", action: s, ...c }) {
+function a({ keywords: a, title: o = "자신 있는 활동 키워드", action: s, description: c, ...l }) {
 	return /* @__PURE__ */ i(e, {
 		tag: "section",
 		flexDirection: "column",
 		gap: 4,
 		"aria-labelledby": "preferred-activity-keyword-group-title",
-		...c,
+		...l,
 		inlineCSS: {
 			width: "100%",
-			...c?.inlineCSS
+			...l?.inlineCSS
 		},
 		children: [
 			/* @__PURE__ */ r(n, {
@@ -19,6 +19,7 @@ function a({ keywords: a, title: o = "자신 있는 활동 키워드", action: s
 				variant: "h2B",
 				children: o
 			}),
+			c,
 			a.length > 0 && /* @__PURE__ */ r(e, {
 				tag: "ul",
 				flexWrap: "wrap",

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

@@ -3,6 +3,7 @@ import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
 export interface PreferredAgeGroupProps extends FlexboxProps {
     keywords: string[];
     action?: ReactNode;
+    description?: ReactNode;
 }
-declare function PreferredAgeGroup({ keywords, action, ...props }: PreferredAgeGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function PreferredAgeGroup({ keywords, action, description, ...props }: PreferredAgeGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default PreferredAgeGroup;

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

@@ -1,16 +1,16 @@
 import { Flexbox as e, Label as t, Typography as n } from "@dotss/ui";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region teacher/profile/components/PreferredAgeGroup/PreferredAgeGroup.tsx
-function a({ keywords: a, action: o, ...s }) {
+function a({ keywords: a, action: o, description: s, ...c }) {
 	return /* @__PURE__ */ i(e, {
 		tag: "section",
 		flexDirection: "column",
 		gap: 4,
 		"aria-labelledby": "preferred-age-group-title",
-		...s,
+		...c,
 		inlineCSS: {
 			width: "100%",
-			...s?.inlineCSS
+			...c?.inlineCSS
 		},
 		children: [
 			/* @__PURE__ */ r(n, {
@@ -19,6 +19,7 @@ function a({ keywords: a, action: o, ...s }) {
 				variant: "h2B",
 				children: "자신 있는 아이 연령"
 			}),
+			s,
 			a.length > 0 && /* @__PURE__ */ r(e, {
 				tag: "ul",
 				flexWrap: "wrap",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dotss/tictoccroc",
   "type": "module",
-  "version": "0.9.1",
+  "version": "0.11.0",
   "description": "Tictoccroc shared components, hooks, utils, and APIs for Dotss",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",