@dotss/tictoccroc 0.9.1 → 0.10.0

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;

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

@@ -6,19 +6,19 @@ import c from "@dotss/ui/core/useTheme";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import d from "@dotss/ui/Switch";
 //#region teacher/profile/components/AvailableScheduleSection/AvailableScheduleSection.tsx
-var f = n(function({ children: n, title: f = "수업 가능 일정", action: p, footer: m, flat: h = !1, schedulerProps: g, enableToggle: _ = !0, teacherStatus: v, ...y }, b) {
-	let { palette: { grey: x, background: S } } = c(), [C, w] = r(!1), T = () => w((e) => !e), E = (e) => v.onChange?.(e);
+var f = n(function({ children: n, title: f = "수업 가능 일정", action: p, description: m, footer: h, flat: g = !1, schedulerProps: _, enableToggle: v = !0, teacherStatus: y, ...b }, x) {
+	let { palette: { grey: S, background: C } } = c(), [w, T] = r(!1), E = () => T((e) => !e), D = (e) => y.onChange?.(e);
 	return /* @__PURE__ */ u(a, {
-		ref: b,
+		ref: x,
 		tag: "section",
 		flexDirection: "column",
 		gap: 4,
 		"aria-labelledby": "available-schedule-section-title",
-		"aria-describedby": m ? "available-schedule-section-footer" : void 0,
-		...y,
+		"aria-describedby": h ? "available-schedule-section-footer" : void 0,
+		...b,
 		inlineCSS: {
 			width: "100%",
-			...y?.inlineCSS
+			...b?.inlineCSS
 		},
 		children: [
 			/* @__PURE__ */ l(s, {
@@ -27,54 +27,55 @@ var f = n(function({ children: n, title: f = "수업 가능 일정", action: p,
 				variant: "h2B",
 				children: f
 			}),
-			v.active && /* @__PURE__ */ u(a, {
+			m,
+			y.active && /* @__PURE__ */ u(a, {
 				flexDirection: "column",
 				gap: 2,
 				children: [/* @__PURE__ */ u(a, {
 					flexDirection: "column",
 					inlineCSS: {
-						...h ? void 0 : {
-							border: `1px solid ${x[20]}`,
+						...g ? void 0 : {
+							border: `1px solid ${S[20]}`,
 							borderRadius: 12
 						},
-						maxHeight: C ? void 0 : _ ? 384 : void 0,
+						maxHeight: w ? void 0 : v ? 384 : void 0,
 						overflow: "hidden"
 					},
 					children: [
-						!h && /* @__PURE__ */ l(a, { pt: 4 }),
+						!g && /* @__PURE__ */ l(a, { pt: 4 }),
 						/* @__PURE__ */ l(t, {
 							id: "available-schedule-section-scheduler",
 							"aria-labelledby": "available-schedule-section-title",
-							...g,
+							..._,
 							children: n
 						}),
-						_ && /* @__PURE__ */ l(i, {
+						v && /* @__PURE__ */ l(i, {
 							variant: "text",
 							color: "secondary",
-							endAdornment: /* @__PURE__ */ l(o, { name: C ? "ChevronUpLine" : "ChevronDownLine" }),
-							onClick: T,
-							"aria-expanded": C,
+							endAdornment: /* @__PURE__ */ l(o, { name: w ? "ChevronUpLine" : "ChevronDownLine" }),
+							onClick: E,
+							"aria-expanded": w,
 							"aria-controls": "available-schedule-section-scheduler",
 							inlineCSS: {
 								position: "sticky",
 								bottom: 0,
 								borderTopRightRadius: 0,
 								borderTopLeftRadius: 0,
-								backgroundColor: x.white,
+								backgroundColor: S.white,
 								zIndex: 1
 							},
-							children: C ? "접기" : "펼쳐보기"
+							children: w ? "접기" : "펼쳐보기"
 						})
 					]
-				}), m && /* @__PURE__ */ l(a, {
+				}), h && /* @__PURE__ */ l(a, {
 					id: "available-schedule-section-footer",
 					tag: "footer",
 					pl: 12,
 					pr: 2,
-					children: m
+					children: h
 				})]
 			}),
-			typeof v.onChange == "function" && /* @__PURE__ */ u(a, {
+			typeof y.onChange == "function" && /* @__PURE__ */ u(a, {
 				alignItems: "center",
 				justifyContent: "space-between",
 				gap: 2,
@@ -85,14 +86,14 @@ var f = n(function({ children: n, title: f = "수업 가능 일정", action: p,
 					htmlFor: "available-schedule-section-switch",
 					children: "활동 여부"
 				}), /* @__PURE__ */ l(d, {
-					selected: !!v.active,
-					onChange: E,
+					selected: !!y.active,
+					onChange: D,
 					selectedLabel: "활동중",
 					unselectedLabel: "쉬는중",
 					inputProps: { id: "available-schedule-section-switch" }
 				})]
 			}),
-			!v.active && /* @__PURE__ */ u(a, {
+			!y.active && /* @__PURE__ */ u(a, {
 				role: "status",
 				pt: 5,
 				pb: 5,
@@ -106,13 +107,13 @@ var f = n(function({ children: n, title: f = "수업 가능 일정", action: p,
 				"aria-describedby": "available-schedule-section-status-desc",
 				inlineCSS: {
 					borderRadius: 8,
-					backgroundColor: S.primary
+					backgroundColor: C.primary
 				},
 				children: [
 					/* @__PURE__ */ l(e, {
 						width: 48,
 						height: 48,
-						src: `${v.fallback.iconBasePath}/images/design-system/graphic/illustration3D/island.png`,
+						src: `${y.fallback.iconBasePath}/images/design-system/graphic/illustration3D/island.png`,
 						alt: "쉬는 중",
 						"aria-hidden": !0
 					}),
@@ -121,7 +122,7 @@ var f = n(function({ children: n, title: f = "수업 가능 일정", action: p,
 						tag: "h3",
 						variant: "h4B",
 						textAlign: "center",
-						children: v.fallback.title || "쉬는 중일 때는 수업 요청이 오지 않아요!"
+						children: y.fallback.title || "쉬는 중일 때는 수업 요청이 오지 않아요!"
 					}),
 					/* @__PURE__ */ l(s, {
 						id: "available-schedule-section-status-desc",
@@ -130,7 +131,7 @@ var f = n(function({ children: n, title: f = "수업 가능 일정", action: p,
 						color: "grey.70",
 						textAlign: "center",
 						inlineCSS: { whiteSpace: "pre-line" },
-						children: v.fallback.description || "이미 매칭된 수업은 그대로 유지되니\n변경이 필요한 경우 부모님과 소통해 주세요."
+						children: y.fallback.description || "이미 매칭된 수업은 그대로 유지되니\n변경이 필요한 경우 부모님과 소통해 주세요."
 					})
 				]
 			}),

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

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

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.10.0",
   "description": "Tictoccroc shared components, hooks, utils, and APIs for Dotss",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",