@dotss/tictoccroc 0.11.2 → 0.12.1

package/dist/shared/utils/getHoverChildrenScaleStyle/getHoverChildrenScaleStyle.test.d.ts

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

package/dist/shared/utils/getHoverChildrenScaleStyle/index.d.ts

@@ -0,0 +1,2 @@
+import { default as getHoverChildrenScaleStyle } from './getHoverChildrenScaleStyle';
+export default getHoverChildrenScaleStyle;

package/dist/shared/utils/getHoverChildrenScaleStyle/index.mjs

@@ -0,0 +1,5 @@
+import e from "./getHoverChildrenScaleStyle.mjs";
+//#region shared/utils/getHoverChildrenScaleStyle/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/shared/utils/index.d.ts

@@ -15,3 +15,4 @@ export { default as share } from './share';
 export { default as dayFlagToDay } from './dayFlagToDay';
 export { default as getCareTypeLabel } from './getCareTypeLabel';
 export { default as combineRef } from './combineRef';
+export { default as getHoverChildrenScaleStyle } from './getHoverChildrenScaleStyle';

package/dist/shared/utils/index.mjs

@@ -15,4 +15,5 @@ import p from "./getVimeoId/index.mjs";
 import m from "./parseQueryString/index.mjs";
 import h from "./share/index.mjs";
 import g from "./getCareTypeLabel/index.mjs";
-export { d as ageToBirthDate, o as birthDateToAge, n as combineRef, r as dayFlagToDay, g as getCareTypeLabel, i as getDateRange, t as getImageUrl, a as getTimeRange, p as getVimeoId, s as isAndroid, l as isApp, u as isDesktop, c as isIos, e as isServer, f as objectToQueryString, m as parseQueryString, h as share };
+import _ from "./getHoverChildrenScaleStyle/index.mjs";
+export { d as ageToBirthDate, o as birthDateToAge, n as combineRef, r as dayFlagToDay, g as getCareTypeLabel, i as getDateRange, _ as getHoverChildrenScaleStyle, t as getImageUrl, a as getTimeRange, p as getVimeoId, s as isAndroid, l as isApp, u as isDesktop, c as isIos, e as isServer, f as objectToQueryString, m as parseQueryString, h as share };

package/dist/teacher/home/components/Carousel1Account/Carousel1Account.mjs

@@ -2,20 +2,20 @@ import e from "../../../../shared/components/Image/index.mjs";
 import t from "../../../../shared/components/Carousel/CarouselSlide/index.mjs";
 import n from "../../../../shared/components/Carousel/index.mjs";
 import r from "@dotss/ui/core/useTheme";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import s from "@dotss/ui/Flexbox";
-import c from "@dotss/ui/Typography";
-import l from "@dotss/ui/hooks/useCheckHoverPossible/useCheckHoverPossible";
+import i from "@dotss/ui/hooks/useCheckHoverPossible/useCheckHoverPossible";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "@dotss/ui/Flexbox";
+import l from "@dotss/ui/Typography";
 //#region teacher/home/components/Carousel1Account/Carousel1Account.tsx
 function u({ id: u, title: d, banners: f, onClickBanner: p, imageProps: m, ...h }) {
-	let { spacing: g, palette: _ } = r(), { isHoverPossible: v } = l(), y = (e, t) => (n) => {
+	let { spacing: g, palette: _ } = r(), { isHoverPossible: v } = i(), y = (e, t) => (n) => {
 		p && typeof p == "function" && (n.stopPropagation(), n.preventDefault(), p(e, t, n));
 	};
-	return /* @__PURE__ */ a(i, { children: /* @__PURE__ */ o(s, {
+	return /* @__PURE__ */ o(a, { children: /* @__PURE__ */ s(c, {
 		flexDirection: "column",
 		inlineCSS: { width: "100%" },
 		...h,
-		children: [/* @__PURE__ */ a(c, {
+		children: [/* @__PURE__ */ o(l, {
 			id: `banner-account-carousel1-${u}`,
 			variant: "h2B",
 			inlineCSS: {
@@ -26,11 +26,11 @@ function u({ id: u, title: d, banners: f, onClickBanner: p, imageProps: m, ...h
 				marginBottom: g.content(3)
 			},
 			children: d
-		}), /* @__PURE__ */ a(n, {
+		}), /* @__PURE__ */ o(n, {
 			rowCount: 2,
 			step: 1,
 			spacing: 5,
-			children: f.map(({ id: n, title: r, url: i, image: l }) => /* @__PURE__ */ a(t, { children: /* @__PURE__ */ o(s, {
+			children: f.map(({ id: n, title: r, url: i, image: a }) => /* @__PURE__ */ o(t, { children: /* @__PURE__ */ s(c, {
 				tag: "a",
 				href: i,
 				alignItems: "center",
@@ -43,8 +43,8 @@ function u({ id: u, title: d, banners: f, onClickBanner: p, imageProps: m, ...h
 					"&:active:not([aria-disabled=\"true\"])": { backgroundColor: _.background.primary },
 					...v && { "&:hover:not([aria-disabled=\"true\"])": { backgroundColor: _.background.primary } }
 				},
-				children: [/* @__PURE__ */ a(e, {
-					src: l || "",
+				children: [/* @__PURE__ */ o(e, {
+					src: a || "",
 					width: 140,
 					height: 98,
 					alt: `${r} 이미지`,
@@ -55,7 +55,7 @@ function u({ id: u, title: d, banners: f, onClickBanner: p, imageProps: m, ...h
 					enableErrorFallback: !0,
 					style: { objectFit: "cover" },
 					...m
-				}), /* @__PURE__ */ a(c, {
+				}), /* @__PURE__ */ o(l, {
 					tag: "p",
 					variant: "b2M",
 					lineClamp: 2,

package/dist/teacher/home/components/Carousel2Account/Carousel2Account.mjs

@@ -2,21 +2,21 @@ import e from "../../../../shared/components/Image/index.mjs";
 import t from "../../../../shared/components/Carousel/CarouselSlide/index.mjs";
 import n from "../../../../shared/components/Carousel/index.mjs";
 import r from "@dotss/ui/core/useTheme";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import o from "@dotss/ui/Flexbox";
-import s from "@dotss/ui/Typography";
-import c from "@dotss/ui/hooks/useCheckHoverPossible/useCheckHoverPossible";
+import i from "@dotss/ui/hooks/useCheckHoverPossible/useCheckHoverPossible";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import s from "@dotss/ui/Flexbox";
+import c from "@dotss/ui/Typography";
 //#region teacher/home/components/Carousel2Account/Carousel2Account.tsx
 function l({ id: l, title: u, banners: d, onClickBanner: f, imageProps: p, ...m }) {
-	let { spacing: h, palette: g } = r(), { isHoverPossible: _ } = c(), v = (e, t) => (n) => {
+	let { spacing: h, palette: g } = r(), { isHoverPossible: _ } = i(), v = (e, t) => (n) => {
 		f && typeof f == "function" && (n.stopPropagation(), n.preventDefault(), f(e, t, n));
 	};
-	return /* @__PURE__ */ a(o, {
+	return /* @__PURE__ */ o(s, {
 		tag: "section",
 		flexDirection: "column",
 		inlineCSS: { width: "100%" },
 		...m,
-		children: [/* @__PURE__ */ i(s, {
+		children: [/* @__PURE__ */ a(c, {
 			id: `banner-account-carousel2-${l}`,
 			variant: "h2B",
 			inlineCSS: {
@@ -27,11 +27,11 @@ function l({ id: l, title: u, banners: d, onClickBanner: f, imageProps: p, ...m
 				marginBottom: h.content(4)
 			},
 			children: u
-		}), /* @__PURE__ */ i(n, {
+		}), /* @__PURE__ */ a(n, {
 			rowCount: 1,
 			step: 1,
 			spacing: 3,
-			children: d.map(({ id: n, title: r, subTitle: c, url: l, image: u }) => /* @__PURE__ */ i(t, { children: /* @__PURE__ */ a(o, {
+			children: d.map(({ id: n, title: r, subTitle: i, url: l, image: u }) => /* @__PURE__ */ a(t, { children: /* @__PURE__ */ o(s, {
 				tag: "a",
 				href: l,
 				flexDirection: "column",
@@ -44,7 +44,7 @@ function l({ id: l, title: u, banners: d, onClickBanner: f, imageProps: p, ...m
 					"&:active:not([aria-disabled=\"true\"])": { backgroundColor: g.background.primary },
 					..._ && { "&:hover:not([aria-disabled=\"true\"])": { backgroundColor: g.background.primary } }
 				},
-				children: [/* @__PURE__ */ i(e, {
+				children: [/* @__PURE__ */ a(e, {
 					src: u || "",
 					width: 240,
 					height: 168,
@@ -56,20 +56,20 @@ function l({ id: l, title: u, banners: d, onClickBanner: f, imageProps: p, ...m
 					enableErrorFallback: !0,
 					style: { objectFit: "cover" },
 					...p
-				}), /* @__PURE__ */ a(o, {
+				}), /* @__PURE__ */ o(s, {
 					flexDirection: "column",
 					gap: 1,
-					children: [/* @__PURE__ */ i(s, {
+					children: [/* @__PURE__ */ a(c, {
 						tag: "p",
 						variant: "h4B",
 						lineClamp: 1,
 						children: r
-					}), /* @__PURE__ */ i(s, {
+					}), /* @__PURE__ */ a(c, {
 						tag: "p",
 						variant: "b4R",
 						lineClamp: 1,
 						color: "grey.70",
-						children: c
+						children: i
 					})]
 				})]
 			}) }, `tictoccroc-carousel2-account-${n}`))

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

@@ -0,0 +1,21 @@
+import { MouseEvent, ReactNode } from 'react';
+import { CardProps } from 'node_modules/@dotss/ui/Card/Card';
+export interface KokTeacherCardProps extends Omit<CardProps, 'onClick'> {
+    idx: number;
+    name: string;
+    adornmentUrl?: string;
+    picture: string;
+    introduction: string;
+    selected: boolean;
+    checkboxSelected?: boolean;
+    disabled?: boolean;
+    onClick?: (idx: number, e: MouseEvent<HTMLDivElement>) => void;
+    onClickMore?: (idx: number, e: MouseEvent<HTMLButtonElement>) => void;
+    badgeLabel?: ReactNode;
+    pictureLabel?: ReactNode;
+    infoLabel?: ReactNode;
+    chargeLabel?: ReactNode;
+    note?: ReactNode;
+}
+declare function KokTeacherCard({ idx, name, adornmentUrl, picture, introduction, selected, checkboxSelected, disabled, onClick, onClickMore, badgeLabel, pictureLabel, infoLabel, chargeLabel, note, ...props }: KokTeacherCardProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default KokTeacherCard;

package/dist/teacher/profile/components/KokTeacherCard/KokTeacherCard.fallback.d.ts

@@ -0,0 +1,2 @@
+declare function KokTeacherCardFallback(): import("@emotion/react/jsx-runtime").JSX.Element;
+export default KokTeacherCardFallback;

package/dist/teacher/profile/components/KokTeacherCard/KokTeacherCard.fallback.mjs

@@ -0,0 +1,128 @@
+import e from "../../../../shared/components/LoadingAnnouncer/index.mjs";
+import t from "@dotss/ui/core/useTheme";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import a from "@dotss/ui/Box";
+import o from "@dotss/ui/Card";
+import s from "@dotss/ui/Flexbox";
+import c from "@dotss/ui/Skeleton";
+//#region teacher/profile/components/KokTeacherCard/KokTeacherCard.fallback.tsx
+function l() {
+	let { spacing: l, palette: u } = t();
+	return /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(e, {}), /* @__PURE__ */ i(o, {
+		variant: "outlined",
+		"aria-busy": !0,
+		wrapperProps: { inlineCSS: {
+			width: "100%",
+			alignSelf: "stretch"
+		} },
+		inlineCSS: {
+			width: "100%",
+			gap: "unset",
+			borderWidth: 1,
+			padding: l.content(4) - 1,
+			cursor: "wait",
+			"&:hover, &:active": { backgroundColor: u.grey.white }
+		},
+		children: [
+			/* @__PURE__ */ i(s, {
+				justifyContent: "space-between",
+				gap: 3,
+				children: [/* @__PURE__ */ i(s, {
+					flexDirection: "column",
+					gap: 2,
+					alignItems: "center",
+					children: [/* @__PURE__ */ r(c, {
+						width: 74,
+						height: 74,
+						borderRadius: 200
+					}), /* @__PURE__ */ r(c, {
+						width: 72,
+						textHeight: "c3M"
+					})]
+				}), /* @__PURE__ */ i(s, {
+					flexDirection: "column",
+					flexGrow: 1,
+					gap: 2,
+					inlineCSS: { minWidth: 0 },
+					children: [
+						/* @__PURE__ */ i(s, {
+							gap: 2,
+							alignItems: "center",
+							inlineCSS: { minWidth: 0 },
+							children: [/* @__PURE__ */ i(s, {
+								flexGrow: 1,
+								gap: 2,
+								alignItems: "center",
+								children: [/* @__PURE__ */ r(c, {
+									width: 48,
+									height: 24,
+									borderRadius: 6
+								}), /* @__PURE__ */ r(c, {
+									width: 64,
+									textHeight: "h4B"
+								})]
+							}), /* @__PURE__ */ r(c, {
+								width: 24,
+								height: 24,
+								borderRadius: 4
+							})]
+						}),
+						/* @__PURE__ */ i(s, {
+							flexDirection: "column",
+							gap: 1,
+							children: [/* @__PURE__ */ r(c, {
+								textHeight: "b4M",
+								inlineCSS: { width: "100%" }
+							}), /* @__PURE__ */ r(c, {
+								textHeight: "b4M",
+								inlineCSS: { width: "72%" }
+							})]
+						}),
+						/* @__PURE__ */ i(s, {
+							flexDirection: "column",
+							gap: 1,
+							children: [/* @__PURE__ */ r(c, {
+								textHeight: "b5R",
+								inlineCSS: { width: "68%" }
+							}), /* @__PURE__ */ r(c, {
+								textHeight: "b5R",
+								inlineCSS: { width: "84%" }
+							})]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ r(a, {
+				tag: "hr",
+				mt: 2,
+				mb: 2,
+				inlineCSS: {
+					border: "unset",
+					height: 1,
+					background: u.grey[20]
+				}
+			}),
+			/* @__PURE__ */ i(s, {
+				alignItems: "center",
+				justifyContent: "space-between",
+				children: [/* @__PURE__ */ r(c, {
+					width: 148,
+					textHeight: "h5B"
+				}), /* @__PURE__ */ r(c, {
+					width: 88,
+					height: 24,
+					borderRadius: 6
+				})]
+			}),
+			/* @__PURE__ */ r(s, {
+				mt: 1,
+				children: /* @__PURE__ */ r(c, {
+					textHeight: "c4R",
+					inlineCSS: { width: "78%" }
+				})
+			})
+		]
+	})] });
+}
+//#endregion
+export { l as default };

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

@@ -0,0 +1,202 @@
+import e from "../../../../shared/utils/getImageUrl/index.mjs";
+import t from "../../../../shared/components/Image/index.mjs";
+import n from "@dotss/ui/core/useTheme";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "@dotss/ui/Box";
+import s from "@dotss/ui/Button";
+import c from "@dotss/ui/Card";
+import l from "@dotss/ui/Checkbox";
+import u from "@dotss/ui/Flexbox";
+import d from "@dotss/ui/Icon";
+import f from "@dotss/ui/Typography";
+//#region teacher/profile/components/KokTeacherCard/KokTeacherCard.tsx
+function p({ idx: p, name: m, adornmentUrl: h, picture: g, introduction: _, selected: v, checkboxSelected: y, disabled: b, onClick: x, onClickMore: S, badgeLabel: C, pictureLabel: w, infoLabel: T, chargeLabel: E, note: D, ...O }) {
+	let { spacing: k, palette: A, typography: j } = n(), M = (e) => {
+		e.stopPropagation(), x?.(p, e);
+	}, N = (e) => {
+		e.stopPropagation(), S?.(p, e);
+	};
+	return /* @__PURE__ */ a(c, {
+		role: "checkbox",
+		variant: "outlined",
+		active: v,
+		disabled: b,
+		onClick: M,
+		"aria-disabled": b,
+		inlineCSS: {
+			gap: "unset",
+			borderWidth: v ? 2 : 1,
+			padding: v ? k.content(4) - 2 : k.content(4) - 1,
+			"&[disabled]": {
+				pointerEvents: "auto",
+				cursor: "auto"
+			}
+		},
+		...O,
+		children: [
+			/* @__PURE__ */ a(u, {
+				justifyContent: "space-between",
+				gap: 3,
+				children: [/* @__PURE__ */ a(u, {
+					flexDirection: "column",
+					gap: 2,
+					alignItems: "center",
+					children: [/* @__PURE__ */ a(u, {
+						inlineCSS: {
+							position: "relative",
+							width: 74,
+							height: 74,
+							border: "1px solid rgba(0, 0, 0, 0.05)",
+							borderRadius: "50%",
+							opacity: b ? .5 : 1
+						},
+						children: [/* @__PURE__ */ i(t, {
+							src: e({
+								src: g,
+								width: 74,
+								height: 74
+							}),
+							alt: `${m} 선생님 프로필 사진`,
+							width: 74,
+							height: 74,
+							style: {
+								display: "flex",
+								flexShrink: 0,
+								objectFit: "cover",
+								objectPosition: "center",
+								borderRadius: "50%",
+								overflow: "hidden"
+							},
+							wrapperProps: { inlineCSS: {
+								borderRadius: "50%",
+								overflow: "hidden"
+							} }
+						}), h && /* @__PURE__ */ i(t, {
+							src: h,
+							alt: "프로필 장식",
+							width: 24,
+							height: 24,
+							wrapperProps: { inlineCSS: {
+								position: "absolute",
+								right: 0,
+								bottom: 0
+							} }
+						})]
+					}), w && /* @__PURE__ */ i(r, { children: w })]
+				}), /* @__PURE__ */ a(u, {
+					flexDirection: "column",
+					gap: 2,
+					children: [
+						/* @__PURE__ */ a(u, {
+							gap: 2,
+							inlineCSS: { minWidth: 0 },
+							children: [/* @__PURE__ */ a(u, {
+								flexGrow: 1,
+								gap: 2,
+								children: [C && /* @__PURE__ */ i(u, {
+									alignItems: "center",
+									gap: 2,
+									inlineCSS: {
+										opacity: b ? .5 : 1,
+										flexShrink: 0
+									},
+									children: C
+								}), /* @__PURE__ */ i(f, {
+									variant: "h4B",
+									noWrap: !0,
+									color: b ? "grey.50" : void 0,
+									children: m
+								})]
+							}), /* @__PURE__ */ i(l, {
+								checked: v || y,
+								disabled: b,
+								readOnly: !0
+							})]
+						}),
+						/* @__PURE__ */ i(f, {
+							variant: "b4M",
+							lineClamp: 2,
+							inlineCSS: {
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								display: "-webkit-box",
+								wordWrap: "break-word"
+							},
+							color: b ? "grey.50" : void 0,
+							children: _
+						}),
+						T && /* @__PURE__ */ i(u, {
+							flexDirection: "column",
+							gap: 1,
+							flexWrap: "wrap",
+							inlineCSS: {
+								opacity: b ? .5 : 1,
+								"& strong": {
+									fontWeight: j.h5B.weight,
+									color: A.brand.primary.text
+								},
+								"& small": { color: A.grey[50] }
+							},
+							children: T
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ i(o, {
+				tag: "hr",
+				mt: 2,
+				mb: 2,
+				inlineCSS: {
+					border: "unset",
+					height: 1,
+					background: A.grey[20]
+				}
+			}),
+			/* @__PURE__ */ a(u, {
+				alignItems: "center",
+				gap: 1,
+				justifyContent: "space-between",
+				children: [/* @__PURE__ */ i(u, {
+					gap: 1,
+					children: E && /* @__PURE__ */ i(f, {
+						tag: "p",
+						variant: "h5B",
+						inlineCSS: {
+							display: "flex",
+							gap: k.content(1),
+							alignItems: "center",
+							flexGrow: 1,
+							"& *": { color: b ? A.grey[50] : void 0 }
+						},
+						color: b ? "grey.50" : void 0,
+						children: E
+					})
+				}), /* @__PURE__ */ i(s, {
+					size: "xSmall",
+					variant: "text",
+					endAdornment: /* @__PURE__ */ i(d, {
+						name: "ChevronRightLine",
+						size: "xSmall",
+						color: "grey.70"
+					}),
+					onClick: N,
+					disabled: b,
+					inlineCSS: {
+						flexShrink: 0,
+						color: b ? A.grey[50] : A.grey[70],
+						"&:not([aria-disabled=\"true\"]):hover, &:not([aria-disabled=\"true\"]):active": { background: v ? A.brand.primary.disableLine : A.grey[20] }
+					},
+					children: "프로필 보기"
+				})]
+			}),
+			D && /* @__PURE__ */ i(u, {
+				flexDirection: "column",
+				mt: 1,
+				inlineCSS: { opacity: b ? .5 : 1 },
+				children: D
+			})
+		]
+	});
+}
+//#endregion
+export { p as default };

package/dist/teacher/profile/components/KokTeacherCard/KokTeacherCard.utils.d.ts

@@ -0,0 +1,15 @@
+import { Dayjs } from 'dayjs';
+export declare function getBadgeLabel(hasMet: boolean): import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare function getPictureLabel(lastActiveDate: Dayjs): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function getCareActivityLabel({ numChildren, totalHours }: {
+    numChildren: number;
+    totalHours: number;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function getStrengthLabel({ careers, certificates, educations, categories }: {
+    certificates: string[];
+    careers: string[];
+    educations: string[];
+    categories: string[];
+}): import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare function getChargeLabel(charge: number): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function getNote(note: string): import("@emotion/react/jsx-runtime").JSX.Element;