@dotss/tictoccroc 0.0.21 → 0.0.23

package/dist/shared/components/Carousel/Carousel.mjs

@@ -13,7 +13,7 @@ function ye({
   renderPagination: z,
   ...C
 }) {
-  const { spacing: $ } = he(), [l, Y] = I(1), [w, ee] = I(0), [te, ne] = I(0), L = p(null), c = p(null), u = p(null), X = p(0), F = p(0), b = p(0), S = p(!1), D = p(!0), k = p(0), v = $.content(K), E = $.content(O), N = Q.toArray(Z).filter(ue).filter((e) => e.type === me), x = N.length, j = (e, t) => {
+  const { spacing: $ } = he(), [l, Y] = I(1), [w, ee] = I(1), [te, ne] = I(0), L = p(null), c = p(null), u = p(null), X = p(0), F = p(0), b = p(0), S = p(!1), D = p(!0), k = p(0), v = $.content(K), E = $.content(O), N = Q.toArray(Z).filter(ue).filter((e) => e.type === me), x = N.length, j = (e, t) => {
     X.current = e, F.current = t;
   }, M = () => {
     var o;

package/dist/shared/components/ChatKit/BotMessage/BotMessage.d.ts

@@ -1,7 +1,7 @@
 import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
 export type BotMessageType = 'MATCHING_SUCCEEDED' | 'TEACHER_INQUIRED' | 'PARENT_CHANGED_OFFER_SCHEDULE' | 'PARENT_CHANGED_MATCHING_SCHEDULE' | 'TEACHER_APPLIED' | 'PARENT_SENT_OFFER' | 'KOK_MATCHING_SUCCEEDED' | 'APPLICATION_MATCHING_SUCCEEDED' | 'PARENT_REJECTED_APPLICATION' | 'TEACHER_REFUSED_OFFER' | 'PARENT_CANCELED_MATCHING' | 'TEACHER_CANCELED_MATCHING' | 'TEACHER_COMPLETED_CARE' | 'ADMIN_CANCELED_MATCHING';
 export type BotMessageCtaType = 'MY_CLASS_CHECK' | 'OFFER_CHECK' | 'CHANGE_INFO_CHECK' | 'MY_APPLICATION_INFO_VIEW' | 'CARE_NOTE_CHECK' | 'TEACHER_SELECTION';
-export type BotMessageSubCtaType = 'MATCHING';
+export type BotMessageSubCtaTargetTable = 'MATCHING';
 export interface BotMessageOffer {
     careStartDate: string;
     careStartTime: string;
@@ -16,7 +16,7 @@ export interface BotMessageProps extends Omit<FlexboxProps, 'id' | 'title'> {
     ctaType?: BotMessageCtaType | null;
     ctaTargetTable?: string | null;
     ctaTargetId?: number | null;
-    subCtaTargetTable?: BotMessageSubCtaType | null;
+    subCtaTargetTable?: BotMessageSubCtaTargetTable | null;
     subCtaTargetId?: number | null;
     mine: boolean;
     avatarUrl?: string;
@@ -29,7 +29,7 @@ export interface BotMessageProps extends Omit<FlexboxProps, 'id' | 'title'> {
         botMessageType: BotMessageType;
         ctaType?: BotMessageCtaType | null;
         ctaTargetId?: number | null;
-        subCtaTargetTable?: BotMessageSubCtaType | null;
+        subCtaTargetTable?: BotMessageSubCtaTargetTable | null;
         subCtaTargetId?: number | null;
     }) => void;
     onView?: () => void;

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

@@ -2,11 +2,11 @@ import { jsxs as t, jsx as r } from "react/jsx-runtime";
 import { useRef as E, useEffect as F } from "react";
 import { Flexbox as n, Typography as e, Button as L } from "@dotss/ui";
 import $ from "@dotss/ui/core/useTheme";
-import { getClassInfo as q, getCtaButtonText as z } from "./BotMessage.utils.mjs";
-import G from "../../Image/Image.mjs";
-import J from "../../../hooks/useInView/useInView.mjs";
+import q from "dayjs";
+import { getClassInfo as z, getCtaButtonText as G } from "./BotMessage.utils.mjs";
+import J from "../../Image/Image.mjs";
+import K from "../../../hooks/useInView/useInView.mjs";
 import S from "../../../utils/getCareTypeLabel/getCareTypeLabel.mjs";
-import K from "dayjs";
 function O({
   id: N,
   botMessageType: y,
@@ -29,10 +29,10 @@ function O({
   const {
     palette: { brand: j, grey: m, background: D },
     spacing: d
-  } = $(), f = E(null), { isInView: u } = J(f), x = z(s), i = R, k = [
+  } = $(), f = E(null), { isInView: u } = K(f), x = G(s), i = R, k = [
     S(i == null ? void 0 : i.firstCareType),
     S(i == null ? void 0 : i.secondCareType)
-  ].filter(Boolean).filter((M) => M !== "-").join("+"), c = q(i), H = () => o == null ? void 0 : o({ botMessageType: y, ctaType: s, ctaTargetId: C, subCtaTargetTable: b, subCtaTargetId: v });
+  ].filter(Boolean).filter((M) => M !== "-").join("+"), c = z(i), H = () => o == null ? void 0 : o({ botMessageType: y, ctaType: s, ctaTargetId: C, subCtaTargetTable: b, subCtaTargetId: v });
   return F(() => {
     u && (l == null || l());
   }, [u, l]), /* @__PURE__ */ t(
@@ -83,7 +83,7 @@ function O({
                   inlineCSS: {
                     whiteSpace: "nowrap"
                   },
-                  children: K(w).format("A h:mm")
+                  children: q(w).format("A h:mm")
                 }
               )
             ]
@@ -104,7 +104,7 @@ function O({
             },
             children: [
               g && /* @__PURE__ */ r(
-                G,
+                J,
                 {
                   src: g,
                   width: 32,

package/dist/shared/components/ChatKit/BotMessage/BotMessage.utils.d.ts

@@ -1,5 +1,5 @@
 import { BotMessageCtaType, BotMessageProps } from '.';
-export declare function getCtaButtonText(ctaType?: BotMessageCtaType | null): "" | "공고 확인하기" | "변경내용 확인하기" | "나의 지원 내역 보러가기" | "돌봄노트 확인하기" | "선생님 선택하러 가기";
+export declare function getCtaButtonText(ctaType?: BotMessageCtaType | null): "" | "내 수업 확인하기" | "공고 확인하기" | "변경내용 확인하기" | "나의 지원 내역 보러가기" | "돌봄노트 확인하기" | "선생님 선택하러 가기";
 export declare function getClassInfo(offer: object): {
     dateRangeText: string;
     timeRangeText: string;

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

@@ -3,7 +3,7 @@ import c from "../../../utils/getCareTypeLabel/getCareTypeLabel.mjs";
 function u(r) {
   switch (r) {
     case "MY_CLASS_CHECK":
-      return "공고 확인하기";
+      return "내 수업 확인하기";
     case "OFFER_CHECK":
       return "공고 확인하기";
     case "CHANGE_INFO_CHECK":

package/dist/shared/components/ChatKit/BotMessage/index.d.ts

@@ -1,4 +1,4 @@
-import { default as BotMessage, BotMessageCtaType, BotMessageOffer, BotMessageProps, BotMessageSubCtaType, BotMessageType } from './BotMessage';
+import { default as BotMessage, BotMessageCtaType, BotMessageOffer, BotMessageProps, BotMessageSubCtaTargetTable, BotMessageType } from './BotMessage';
 export { getClassInfo, getCtaButtonText, getBotMessageLabel } from './BotMessage.utils';
-export type { BotMessageProps, BotMessageCtaType, BotMessageType, BotMessageOffer, BotMessageSubCtaType };
+export type { BotMessageProps, BotMessageCtaType, BotMessageType, BotMessageOffer, BotMessageSubCtaTargetTable };
 export default BotMessage;

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

@@ -1,53 +1,61 @@
-import { jsxs as t, jsx as i } from "react/jsx-runtime";
-import { Flexbox as l, Skeleton as n } from "@dotss/ui";
-import h from "@dotss/ui/core/useTheme";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { Flexbox as n, Skeleton as l } from "@dotss/ui";
+import f from "@dotss/ui/core/useTheme";
 function x({
-  mine: e = !1,
-  showAvatar: r = !1,
+  mine: i = !1,
+  showAvatar: t = !1,
   showTime: o = !1,
-  width: s = 200,
-  inlineCSS: a,
-  ...f
+  width: a = 200,
+  inlineCSS: s,
+  ...d
 }) {
-  const { spacing: d } = h();
-  return /* @__PURE__ */ t(
-    l,
+  const { spacing: h } = f();
+  return /* @__PURE__ */ r(
+    n,
     {
       alignItems: "flex-end",
-      flexDirection: e ? "row-reverse" : "row",
+      flexDirection: i ? "row-reverse" : "row",
       pl: 4,
       pr: 4,
       gap: 1,
-      ...f,
+      ...d,
       inlineCSS: {
         overflowAnchor: "none",
-        ...a
+        ...s
       },
       children: [
-        /* @__PURE__ */ t(l, { alignItems: "flex-start", gap: 2.5, children: [
-          !e && r && /* @__PURE__ */ i(n, { width: 32, height: 32, borderRadius: 200 }),
-          /* @__PURE__ */ i(
-            n,
+        /* @__PURE__ */ r(n, { alignItems: "flex-start", gap: 2.5, children: [
+          !i && t && /* @__PURE__ */ e(l, { width: 32, height: 32, borderRadius: 200 }),
+          /* @__PURE__ */ e(
+            l,
             {
-              width: s,
+              width: a,
               height: 38,
               borderRadius: 12,
               inlineCSS: {
-                marginLeft: !e && r ? d.content(10.5) : void 0
+                marginLeft: !i && t ? h.content(10.5) : void 0
               }
             }
           )
         ] }),
-        /* @__PURE__ */ i(
-          l,
+        /* @__PURE__ */ e(
+          n,
           {
             flexDirection: "column",
-            alignItems: e ? "flex-end" : "flex-start",
             inlineCSS: {
-              visibility: o ? "visible" : "hidden",
               whiteSpace: "nowrap"
             },
-            children: /* @__PURE__ */ i(n, { width: 38, height: 12 })
+            children: /* @__PURE__ */ r(n, { flexDirection: "column", alignItems: i ? "flex-end" : "flex-start", gap: 1, children: [
+              /* @__PURE__ */ e(l, { width: 4.49, height: 12 }),
+              /* @__PURE__ */ e(
+                l,
+                {
+                  width: 38,
+                  height: 12,
+                  inlineCSS: { display: o ? "visible" : "hidden" }
+                }
+              )
+            ] })
           }
         )
       ]

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

@@ -1,6 +1,6 @@
 import { jsxs as t, jsx as r, Fragment as O } from "react/jsx-runtime";
-import { useRef as b, useImperativeHandle as q, useEffect as x } from "react";
-import { Flexbox as s, Typography as v, Button as J, Icon as I, Menu as K, MenuBlock as $, CircularProgressIndicator as Q } from "@dotss/ui";
+import { useRef as x, useImperativeHandle as q, useEffect as b } from "react";
+import { Flexbox as s, Typography as C, Button as J, Icon as I, Menu as K, MenuBlock as $, CircularProgressIndicator as Q } from "@dotss/ui";
 import W from "@dotss/ui/core/useTheme";
 import { useCheckHoverPossible as X } from "@dotss/ui/hooks";
 import { MenuButton as Y } from "@dotss/ui/Menu";
@@ -8,11 +8,11 @@ import Z from "dayjs";
 import _ from "../../Image/Image.mjs";
 import V from "../../../hooks/useInView/useInView.mjs";
 function ar({
-  id: C,
+  id: v,
   content: p = "",
   mine: e = !1,
-  avatarUrl: h = "",
-  unreadUserCount: f = 0,
+  avatarUrl: f = "",
+  unreadUserCount: h = 0,
   regDatetime: z,
   status: n,
   onView: c,
@@ -31,7 +31,7 @@ function ar({
   const {
     palette: { brand: y, grey: o, etc: A },
     spacing: w
-  } = W(), { isHoverPossible: G } = X(), l = b(null), E = b(null), m = b(null);
+  } = W(), { isHoverPossible: G } = X(), l = x(null), E = x(null), m = x(null);
   q(R, () => l.current);
   const L = V(l), N = 300, d = n === "FAILED", P = p.length > N, H = (a) => {
     a === "resend" ? (i == null || i(), m.current = setTimeout(() => {
@@ -40,12 +40,12 @@ function ar({
       S == null || S();
     }, 200));
   };
-  return x(() => {
+  return b(() => {
     L && (c == null || c());
-  }, [L, c]), x(() => {
+  }, [L, c]), b(() => {
     var a;
     d && ((a = l == null ? void 0 : l.current) == null || a.scrollIntoView());
-  }, [d]), x(() => () => {
+  }, [d]), b(() => () => {
     m.current && clearTimeout(m.current);
   }, []), /* @__PURE__ */ t(
     s,
@@ -65,10 +65,10 @@ function ar({
       },
       children: [
         /* @__PURE__ */ t(s, { alignItems: "flex-start", gap: 2.5, children: [
-          !e && k && h && /* @__PURE__ */ r(
+          !e && k && f && /* @__PURE__ */ r(
             _,
             {
-              src: h,
+              src: f,
               width: 32,
               height: 32,
               borderRadius: "50%",
@@ -86,7 +86,7 @@ function ar({
               pb: 2,
               pl: 3,
               pr: 3,
-              ml: !e && !k && h ? 10.5 : void 0,
+              ml: !e && !k && f ? 10.5 : void 0,
               flexDirection: "column",
               gap: 2.5,
               inlineCSS: {
@@ -95,7 +95,7 @@ function ar({
               },
               children: [
                 /* @__PURE__ */ r(
-                  v,
+                  C,
                   {
                     tag: "p",
                     variant: "b3R",
@@ -130,7 +130,7 @@ function ar({
             {
               ref: E,
               isMenuOpen: !!g,
-              menuId: `message-${C}-menu`,
+              menuId: `message-${v}-menu`,
               onClick: B,
               size: "xSmall",
               inlineCSS: {
@@ -177,7 +177,7 @@ function ar({
           /* @__PURE__ */ t(
             K,
             {
-              id: `message-${C}-menu`,
+              id: `message-${v}-menu`,
               anchorRef: E,
               open: g,
               onClose: i,
@@ -197,12 +197,11 @@ function ar({
             flexDirection: "column",
             alignItems: e ? "flex-end" : "flex-start",
             inlineCSS: {
-              visibility: F ? "visible" : "hidden",
               whiteSpace: "nowrap"
             },
             children: [
-              e && f > 0 && n === "SUCCEEDED" && /* @__PURE__ */ r(
-                v,
+              e && h > 0 && n === "SUCCEEDED" && /* @__PURE__ */ r(
+                C,
                 {
                   tag: "span",
                   variant: "c5B",
@@ -210,10 +209,10 @@ function ar({
                   inlineCSS: {
                     color: y.primary.text
                   },
-                  children: f
+                  children: h
                 }
               ),
-              e && f > 0 && n === "PENDING" && /* @__PURE__ */ r(
+              e && h > 0 && n === "PENDING" && /* @__PURE__ */ r(
                 Q,
                 {
                   size: "small",
@@ -224,7 +223,18 @@ function ar({
                   }
                 }
               ),
-              /* @__PURE__ */ r(v, { tag: "span", variant: "c5R", color: "etc.dimmed01", children: Z(z).format("A h:mm") })
+              /* @__PURE__ */ r(
+                C,
+                {
+                  tag: "span",
+                  variant: "c5R",
+                  color: "etc.dimmed01",
+                  inlineCSS: {
+                    display: F ? void 0 : "none"
+                  },
+                  children: Z(z).format("A h:mm")
+                }
+              )
             ]
           }
         )

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

@@ -17,7 +17,7 @@ export interface ImageProps extends Omit<HTMLProps<HTMLImageElement>, 'onError'>
     wrapperProps?: FlexboxProps;
     enableFallback?: boolean;
     enableErrorFallback?: boolean;
-    renderErrorFallback?: (hasError: boolean) => ReactNode;
+    renderErrorFallback?: () => ReactNode;
 }
 declare const Image: import('react').ForwardRefExoticComponent<Omit<ImageProps, "ref"> & import('react').RefAttributes<HTMLImageElement>>;
 export default Image;

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

@@ -1,4 +1,4 @@
-import { jsxs as L, jsx as d, Fragment as Y } from "react/jsx-runtime";
+import { jsxs as L, jsx as c, Fragment as Y } from "react/jsx-runtime";
 import { forwardRef as Z, useRef as h, useImperativeHandle as w, useState as C, useEffect as R } from "react";
 import { Flexbox as M, Skeleton as U } from "@dotss/ui";
 import F from "../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
@@ -11,9 +11,9 @@ const k = 100, ot = Z(
     height: o,
     fit: q = "cover",
     position: A = "center",
-    alt: r,
+    alt: E,
     scale: D = 2,
-    onLoad: E,
+    onLoad: r,
     onLazyLoad: g,
     lazy: I = !1,
     borderRadius: l,
@@ -21,21 +21,21 @@ const k = 100, ot = Z(
     withIntrinsicRatio: x = !1,
     enableFallback: T = !1,
     enableErrorFallback: W = !0,
-    renderErrorFallback: c,
+    renderErrorFallback: f,
     wrapperProps: e = {},
     onError: H,
-    ...u
+    ...d
   }, J) => {
-    const a = h(null), $ = h(!1), m = h(null);
+    const u = h(null), $ = h(!1), m = h(null);
     w(J, () => m.current);
-    const [y, K] = C(!1), [O, v] = C(!1), [f, S] = C(!1), j = b({ src: _, width: n, height: o, fit: q, position: A, scale: D, disabledResizing: G }), z = (t) => {
-      v(!0), S(!1), typeof E == "function" && E(t);
+    const [a, K] = C(!1), [O, y] = C(!1), [v, S] = C(!1), j = b({ src: _, width: n, height: o, fit: q, position: A, scale: D, disabledResizing: G }), z = (t) => {
+      y(!0), S(!1), typeof r == "function" && r(t);
     }, B = (t) => {
-      S(!0), v(!1), typeof H == "function" && H(t.nativeEvent);
+      S(!0), y(!1), typeof H == "function" && H(t.nativeEvent);
     };
     return R(() => {
-      if (I && a.current) {
-        const t = a.current, N = () => {
+      if (I && u.current) {
+        const t = u.current, N = () => {
           if (!t) return !1;
           const i = t.getBoundingClientRect();
           return i.bottom >= 0 && i.top <= (window.innerHeight || document.documentElement.clientHeight) + k;
@@ -51,21 +51,21 @@ const k = 100, ot = Z(
         return s(), Q(), X;
       }
     }), R(() => {
-      typeof g == "function" && y && !$.current && ($.current = !0, g());
-    }, [g, y]), F(() => {
+      typeof g == "function" && a && !$.current && ($.current = !0, g());
+    }, [g, a]), F(() => {
       const t = m.current;
-      return t != null && t.complete ? t.naturalWidth > 0 ? (t.style.transition = "none", t.style.opacity = "1", v(!0)) : (t.style.opacity = "0", S(!0)) : t && (t.style.transition = "opacity 0.3s", t.style.opacity = "0", t.onload = () => {
-        t.style.opacity = "1", v(!0), t.onload = null;
+      return t != null && t.complete ? t.naturalWidth > 0 ? (t.style.transition = "none", t.style.opacity = "1", y(!0)) : (t.style.opacity = "0", S(!0)) : t && (t.style.transition = "opacity 0.3s", t.style.opacity = "0", t.onload = () => {
+        t.style.opacity = "1", y(!0), t.onload = null;
       }, t.onerror = () => {
         S(!0), t.onerror = null;
       }), () => {
         t && (t.onload = null, t.onerror = null);
       };
-    }, [y]), I ? /* @__PURE__ */ L(
+    }, [a]), I ? /* @__PURE__ */ L(
       M,
       {
         ...e,
-        ref: a,
+        ref: u,
         inlineCSS: x ? {
           position: "relative",
           paddingTop: `calc(100% / ${n} * ${o})`,
@@ -83,7 +83,7 @@ const k = 100, ot = Z(
           ...e == null ? void 0 : e.inlineCSS
         },
         children: [
-          T && /* @__PURE__ */ d(
+          T && /* @__PURE__ */ c(
             U,
             {
               width: "100%",
@@ -98,19 +98,19 @@ const k = 100, ot = Z(
               }
             }
           ),
-          y && /* @__PURE__ */ L(Y, { children: [
-            /* @__PURE__ */ d(
+          a && /* @__PURE__ */ L(Y, { children: [
+            /* @__PURE__ */ c(
               "img",
               {
                 ref: m,
                 src: j,
-                alt: r,
+                alt: E,
                 width: n,
                 height: o,
                 onLoad: z,
                 onError: B,
-                "aria-hidden": f,
-                ...u,
+                "aria-hidden": v,
+                ...d,
                 style: {
                   position: "absolute",
                   top: 0,
@@ -118,11 +118,11 @@ const k = 100, ot = Z(
                   width: "100%",
                   height: "100%",
                   transition: "opacity 0.3s",
-                  ...u.style
+                  ...d.style
                 }
               }
             ),
-            W && ((c == null ? void 0 : c(f)) || /* @__PURE__ */ d(V, { style: { opacity: f ? 1 : 0, transition: "opacity 0.3s" } }))
+            W && v && ((f == null ? void 0 : f()) || /* @__PURE__ */ c(V, {}))
           ] })
         ]
       }
@@ -130,7 +130,7 @@ const k = 100, ot = Z(
       M,
       {
         ...e,
-        ref: a,
+        ref: u,
         inlineCSS: x ? {
           position: "relative",
           paddingTop: `calc(100% / ${n} * ${o})`,
@@ -149,7 +149,7 @@ const k = 100, ot = Z(
           ...e == null ? void 0 : e.inlineCSS
         },
         children: [
-          T && /* @__PURE__ */ d(
+          T && /* @__PURE__ */ c(
             U,
             {
               width: "100%",
@@ -164,18 +164,18 @@ const k = 100, ot = Z(
               }
             }
           ),
-          /* @__PURE__ */ d(
+          /* @__PURE__ */ c(
             "img",
             {
               ref: m,
               src: j,
-              alt: r,
+              alt: E,
               width: n,
               height: o,
               onLoad: z,
               onError: B,
-              "aria-hidden": f,
-              ...u,
+              "aria-hidden": v,
+              ...d,
               style: {
                 position: "absolute",
                 top: 0,
@@ -183,11 +183,11 @@ const k = 100, ot = Z(
                 width: "100%",
                 height: "100%",
                 transition: "opacity 0.3s",
-                ...u.style
+                ...d.style
               }
             }
           ),
-          W && ((c == null ? void 0 : c(f)) || /* @__PURE__ */ d(V, { style: { opacity: f ? 1 : 0, transition: "opacity 0.3s" } }))
+          W && v && ((f == null ? void 0 : f()) || /* @__PURE__ */ c(V, {}))
         ]
       }
     );

package/dist/shared/components/Swiper/Swiper.mjs

@@ -15,7 +15,7 @@ function vr({
   inlineCSS: S,
   ...w
 }) {
-  const [P, R] = _(E), [s, rr] = _(0), t = f(null), X = f(0), W = f(0), q = f(0), Y = f(0), o = f(!1), d = f(!0), N = f(""), n = f(E), H = f(!1), l = f(null), p = x.count(j), m = x.toArray(j).filter(G).filter((r) => r.type === U || r.type === I), D = p > 1 && !O, tr = x.toArray(m == null ? void 0 : m[0]).filter(G).filter((r) => r.type === U || r.type === I), er = x.toArray(m == null ? void 0 : m[(m == null ? void 0 : m.length) - 1]).filter(G).filter((r) => r.type === U || r.type === I), J = (r, e, i) => {
+  const [P, R] = _(E), [s, rr] = _(1), t = f(null), X = f(0), W = f(0), q = f(0), Y = f(0), o = f(!1), d = f(!0), N = f(""), n = f(E), H = f(!1), l = f(null), p = x.count(j), m = x.toArray(j).filter(G).filter((r) => r.type === U || r.type === I), D = p > 1 && !O, tr = x.toArray(m == null ? void 0 : m[0]).filter(G).filter((r) => r.type === U || r.type === I), er = x.toArray(m == null ? void 0 : m[(m == null ? void 0 : m.length) - 1]).filter(G).filter((r) => r.type === U || r.type === I), J = (r, e, i) => {
     !t.current || !D || (N.current = t.current.style.transform, W.current = r, X.current = r + t.current.offsetWidth * (i + 1), q.current = e);
   }, C = (r, e, i) => {
     if (!t.current || !D || !o.current || !d.current)

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

@@ -1,5 +1,7 @@
 export declare function getIconFileName(abilityName: string, completed: boolean): string;
 export declare function getAbilityCollection(data: Record<string, string>): {
+    label: string;
+    description: string;
     key: string;
     name: string;
     completed: boolean;

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

@@ -1,4 +1,4 @@
-function c(a, n) {
+function t(a, n) {
   let e = "";
   switch (a) {
     case "창의악어":
@@ -25,19 +25,37 @@ function c(a, n) {
   }
   return e = n ? e : `incomplete-${e}`, e;
 }
-function i(a) {
-  const n = {
-    creativeFlag: "창의악어",
-    englishFlag: "영어악어",
-    infantsFlag: "영유아악어"
-  };
-  return Object.keys(n).map((e) => ({
-    key: e,
-    name: n[e],
-    completed: a[e] === "Y"
+const i = {
+  creativeFlag: "창의악어",
+  englishFlag: "영어악어",
+  infantsFlag: "영유아악어"
+}, c = {
+  창의악어: {
+    label: "창의악어 배지를 취득해야 창의미술 수업을 할 수 있어요",
+    description: `창의미술에 대한 이해도와 만들기 능력이 검증된
+미술 수업 특화 선생님이에요.`
+  },
+  영어악어: {
+    label: "영어악어 배지를 취득해야 영어 수업을 할 수 있어요",
+    description: `아이들의 발달 상황에 맞도록 영어로 상호작용을
+자유롭게 할 수 있는 회화 실력이 검증된
+영어 수업 특화 선생님이에요.`
+  },
+  영유아악어: {
+    label: "영유아 배지를 취득해야 12개월~24개월 아이 돌봄이 가능해요",
+    description: `영유아 발달에 대한 이해와 기저귀 갈이 등의
+기본 돌봄 역량이 검증된 선생님이에요.`
+  }
+};
+function o(a) {
+  return Object.keys(i).map((n) => ({
+    key: n,
+    name: i[n],
+    completed: a[n] === "Y",
+    ...c[i[n]]
   }));
 }
 export {
-  i as getAbilityCollection,
-  c as getIconFileName
+  o as getAbilityCollection,
+  t as getIconFileName
 };

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

@@ -1,23 +1,23 @@
-import { jsx as i, jsxs as e, Fragment as g } from "react/jsx-runtime";
-import { Flexbox as t, Label as I, Typography as d, Icon as h } from "@dotss/ui";
-import j from "@dotss/ui/core/useTheme";
-import { useCheckHoverPossible as E } from "@dotss/ui/hooks";
-import s from "dayjs";
-function T({
+import { jsx as i, jsxs as e, Fragment as d } from "react/jsx-runtime";
+import { Flexbox as a, Label as Y, Typography as s, Icon as f } from "@dotss/ui";
+import D from "@dotss/ui/core/useTheme";
+import { useCheckHoverPossible as j } from "@dotss/ui/hooks";
+import t from "dayjs";
+function L({
   title: v,
-  status: f,
-  startDate: y,
+  status: y,
+  startDate: b,
   endDate: o,
   primary: x = !1,
-  id: b,
+  id: u,
   ...n
 }) {
-  const { isHoverPossible: k } = E(), {
-    palette: { grey: a },
-    spacing: c
-  } = j(), r = typeof n.onClick == "function", D = s(y), u = (o ? s(o) : s()).diff(D, "month"), m = Math.floor(u / 12), C = u % 12;
+  const { isHoverPossible: k } = j(), {
+    palette: { grey: c },
+    spacing: m
+  } = D(), r = typeof n.onClick == "function", I = t(b), g = (o ? t(o) : t()).diff(I, "month"), h = Math.floor(g / 12), C = g % 12 < 1 ? 1 : g % 12;
   return /* @__PURE__ */ i("li", { children: /* @__PURE__ */ e(
-    t,
+    a,
     {
       role: "button",
       tabIndex: r ? 0 : -1,
@@ -33,41 +33,41 @@ function T({
         var S;
         (l.key === "Enter" || l.key === " ") && (l.preventDefault(), l.currentTarget.click()), (S = n.onKeyDown) == null || S.call(n, l);
       },
-      "aria-labelledby": `career-item-title-${b}`,
+      "aria-labelledby": `career-item-title-${u}`,
       ...n,
       inlineCSS: {
         cursor: r ? "pointer" : "default",
         ...r && {
           "&:active": {
-            backgroundColor: a[10]
+            backgroundColor: c[10]
           }
         },
         ...r && k ? {
           "&:hover": {
-            backgroundColor: a[10]
+            backgroundColor: c[10]
           }
         } : {},
         ...n == null ? void 0 : n.inlineCSS
       },
       children: [
-        /* @__PURE__ */ e(t, { flexDirection: "column", gap: 1, flexGrow: 1, children: [
-          /* @__PURE__ */ e(t, { alignItems: "center", gap: 1, children: [
+        /* @__PURE__ */ e(a, { flexDirection: "column", gap: 1, flexGrow: 1, children: [
+          /* @__PURE__ */ e(a, { alignItems: "center", gap: 1, children: [
             x && /* @__PURE__ */ i(
-              I,
+              Y,
               {
                 variant: "outlined",
                 size: "small",
                 color: "orange",
                 inlineCSS: {
-                  marginRight: c.content(1)
+                  marginRight: m.content(1)
                 },
                 children: "대표"
               }
             ),
-            /* @__PURE__ */ e(d, { id: `career-item-title-${b}`, tag: "p", variant: "b2M", children: [
+            /* @__PURE__ */ e(s, { id: `career-item-title-${u}`, tag: "p", variant: "b2M", children: [
               v,
-              f === "VERIFIED" && /* @__PURE__ */ i(
-                h,
+              y === "VERIFIED" && /* @__PURE__ */ i(
+                f,
                 {
                   name: "CertifiedFill",
                   size: "small",
@@ -76,12 +76,12 @@ function T({
                   inlineCSS: {
                     minWidth: 20,
                     verticalAlign: "-5px",
-                    marginLeft: c.content(1)
+                    marginLeft: m.content(1)
                   }
                 }
               ),
-              f === "REJECTED" && /* @__PURE__ */ i(
-                h,
+              y === "REJECTED" && /* @__PURE__ */ i(
+                f,
                 {
                   name: "AlertFill",
                   size: "small",
@@ -90,46 +90,47 @@ function T({
                   inlineCSS: {
                     minWidth: 20,
                     verticalAlign: "-5px",
-                    marginLeft: c.content(1)
+                    marginLeft: m.content(1)
                   }
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ e(d, { tag: "p", variant: "b5R", color: "grey.50", children: [
-            y,
-            " ~ ",
-            o ?? "현재"
+          /* @__PURE__ */ e(s, { tag: "p", variant: "b5R", color: "grey.50", children: [
+            t(b).format("YYYY년 M월"),
+            " ~",
+            " ",
+            o ? t(o).format("YYYY년 M월") : "현재"
           ] })
         ] }),
-        /* @__PURE__ */ e(t, { alignItems: "center", gap: 2, children: [
+        /* @__PURE__ */ e(a, { alignItems: "center", gap: 2, children: [
           /* @__PURE__ */ e(
-            d,
+            s,
             {
               tag: "p",
               variant: "h5R",
               color: "grey.70",
               noWrap: !0,
-              inlineCSS: { "& strong": { color: a[100], fontWeight: 700 } },
+              inlineCSS: { "& strong": { color: c[100], fontWeight: 700 } },
               children: [
-                m > 0 && /* @__PURE__ */ e(g, { children: [
-                  /* @__PURE__ */ i("strong", { children: m }),
+                h > 0 && /* @__PURE__ */ e(d, { children: [
+                  /* @__PURE__ */ i("strong", { children: h }),
                   "년"
                 ] }),
-                C > 0 && /* @__PURE__ */ e(g, { children: [
-                  m > 0 && /* @__PURE__ */ i(g, { children: " " }),
+                C > 0 && /* @__PURE__ */ e(d, { children: [
+                  h > 0 && /* @__PURE__ */ i(d, { children: " " }),
                   /* @__PURE__ */ i("strong", { children: C }),
                   "개월"
                 ] })
               ]
             }
           ),
-          r && /* @__PURE__ */ i(h, { name: "ChevronRightLine", size: "xSmall", color: "grey.50" })
+          r && /* @__PURE__ */ i(f, { name: "ChevronRightLine", size: "xSmall", color: "grey.50" })
         ] })
       ]
     }
   ) });
 }
 export {
-  T as default
+  L as default
 };

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

@@ -20,7 +20,7 @@ function Y({
   const {
     palette: { background: y, brand: E, etc: k },
     spacing: a
-  } = G(), [m, D] = R(!1), [z, T] = R(!1), b = F(null), w = S >= 0 && p > 0, c = x ? K(x) : null, I = c ? W(c) : null, j = (o) => {
+  } = G(), [m, D] = R(!1), [z, T] = R(!1), b = F(null), w = S > 0 || p > 0, c = x ? K(x) : null, I = c ? W(c) : null, j = (o) => {
     var s, g;
     switch (o.key) {
       case "Enter":

package/package.json

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