@dotss/tictoccroc 0.0.35 → 0.1.0

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

@@ -1,6 +1,6 @@
 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' | 'ASSIGNMENT_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 BotMessageCtaType = 'MY_CLASS_CHECK' | 'OFFER_CHECK' | 'CHANGE_INFO_CHECK' | 'MY_APPLICATION_INFO_VIEW' | 'CARE_NOTE_CHECK' | 'TEACHER_SELECTION' | 'PLAY_CONTENT_EXPLORE';
 export type BotMessageCtaTargetTable = 'OFFER' | 'MATCHING';
 export type BotMessageSubCtaTargetTable = 'OFFER' | 'MATCHING';
 export interface BotMessageOffer {

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 F, useEffect as L } from "react";
 import { Flexbox as n, Typography as e, Button as $ } from "@dotss/ui";
 import q from "@dotss/ui/core/useTheme";
-import z from "dayjs";
-import { getClassInfo as G, getCtaButtonText as J } from "./BotMessage.utils.mjs";
-import K from "../../Image/Image.mjs";
-import N from "../../../hooks/useInView/useInView.mjs";
+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 N from "dayjs";
 function V({
   id: P,
   botMessageType: y,
@@ -30,10 +30,10 @@ function V({
   const {
     palette: { brand: D, grey: m, background: k },
     spacing: d
-  } = q(), f = F(null), { isInView: u } = N(f), x = J(s), i = w, H = [
+  } = q(), f = F(null), { isInView: u } = K(f), x = G(s), i = w, H = [
     S(i == null ? void 0 : i.firstCareType),
     S(i == null ? void 0 : i.secondCareType)
-  ].filter(Boolean).filter((E) => E !== "-").join("+"), c = G(i), M = () => o == null ? void 0 : o({
+  ].filter(Boolean).filter((E) => E !== "-").join("+"), c = z(i), M = () => o == null ? void 0 : o({
     botMessageType: y,
     ctaType: s,
     ctaTargetId: C,
@@ -91,7 +91,7 @@ function V({
                   inlineCSS: {
                     whiteSpace: "nowrap"
                   },
-                  children: z(I).format("A h:mm")
+                  children: N(I).format("A h:mm")
                 }
               )
             ]
@@ -112,7 +112,7 @@ function V({
             },
             children: [
               g && /* @__PURE__ */ r(
-                K,
+                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

@@ -1,5 +1,5 @@
+import o from "../../../utils/getCareTypeLabel/getCareTypeLabel.mjs";
 import n from "dayjs";
-import c from "../../../utils/getCareTypeLabel/getCareTypeLabel.mjs";
 function u(r) {
   switch (r) {
     case "MY_CLASS_CHECK":
@@ -14,6 +14,8 @@ function u(r) {
       return "돌봄노트 확인하기";
     case "TEACHER_SELECTION":
       return "선생님 선택하러 가기";
+    case "PLAY_CONTENT_EXPLORE":
+      return "놀이콘텐츠 둘러보기";
     default:
       return "";
   }
@@ -24,28 +26,28 @@ function C(r) {
     return null;
   let a;
   e.totalCareCount > 1 ? a = `${n(e.careStartDate).format("M월 D일(ddd)")}부터 / 총 ${e.totalCareCount}회` : a = n(e.careStartDate).format("M월 D일(ddd)");
-  const o = n(`${e.careStartDate} ${e.careStartTime}`).format(
+  const c = n(`${e.careStartDate} ${e.careStartTime}`).format(
     "A h:mm"
   ), t = n(`${e.careStartDate} ${e.careEndTime}`).format(
     "A h:mm"
   );
   return {
     dateRangeText: a,
-    timeRangeText: `${o} ~ ${t}`,
-    careType: c(e.firstCareType)
+    timeRangeText: `${c} ~ ${t}`,
+    careType: o(e.firstCareType)
   };
 }
-function f({
+function T({
   title: r,
   content: e,
   offer: a,
-  regDatetime: o
+  regDatetime: c
 }) {
   const t = C(a);
-  return `안내, ${r}, ${e ? `${e}, ` : ""}${t ? `${t.dateRangeText}, ${t.timeRangeText}, ${t.careType}, ` : ""}${n(o).format("YYYY년 MM월 DD일 A h:mm")}`;
+  return `안내, ${r}, ${e ? `${e}, ` : ""}${t ? `${t.dateRangeText}, ${t.timeRangeText}, ${t.careType}, ` : ""}${n(c).format("YYYY년 MM월 DD일 A h:mm")}`;
 }
 export {
-  f as getBotMessageLabel,
+  T as getBotMessageLabel,
   C as getClassInfo,
   u as getCtaButtonText
 };

package/dist/shared/components/Scheduler/Scheduler.mjs

@@ -515,7 +515,7 @@ function je({
                                 }),
                                 $.map(
                                   ({ children: c, startDate: a, endDate: t, totalColumns: r, columnIndex: l }) => {
-                                    const u = be(a), f = be(t), H = Math.floor((u - 7 * 60) / 30), Ae = (u - 7 * 60) / 30 * (Number(X) || E), Fe = (f - u) / 30 * (Number(X) || E), pe = 100 / r, xe = l * pe, te = c;
+                                    const u = be(a), f = be(t), H = Math.floor((u - 420) / 30), Ae = (u - 420) / 30 * (Number(X) || E), Fe = (f - u) / 30 * (Number(X) || E), pe = 100 / r, xe = l * pe, te = c;
                                     return /* @__PURE__ */ h(
                                       m,
                                       {

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

@@ -20,6 +20,9 @@ export interface SwiperProps extends FlexboxProps {
     loop?: boolean;
     disableSwipe?: boolean;
     renderPagination?: (props: SwiperPaginationProps) => ReactNode;
+    autoSwipe?: boolean;
+    autoSwipeInterval?: number;
+    autoSwipeDuration?: number;
 }
-declare function Swiper({ children, initialPage, onSwipe, onSwiping, loop, disableSwipe, renderPagination, inlineCSS, ...props }: SwiperProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Swiper({ children, initialPage, onSwipe, onSwiping, loop, disableSwipe, renderPagination, inlineCSS, autoSwipe, autoSwipeInterval, autoSwipeDuration, ...props }: SwiperProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default Swiper;

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

@@ -1,123 +1,136 @@
-import { jsxs as Z } from "react/jsx-runtime";
-import { useState as _, useRef as f, Children as x, isValidElement as G, useEffect as k, cloneElement as ar } from "react";
-import { Flexbox as K } from "@dotss/ui";
-import I from "../MediaDialog/MediaBlock/MediaBlock.mjs";
-import { createSwipeEvent as b } from "./Swiper.utils.mjs";
-import U from "./SwiperBlock/SwiperBlock.mjs";
-function vr({
-  children: j,
-  initialPage: E = 0,
-  onSwipe: u,
-  onSwiping: T,
-  loop: y = !1,
-  disableSwipe: O = !1,
-  renderPagination: B,
-  inlineCSS: S,
-  ...w
+import { jsxs as S } from "react/jsx-runtime";
+import { useState as w, useRef as d, Children as W, isValidElement as G, useCallback as mr, useEffect as M, cloneElement as vr } from "react";
+import { Flexbox as rr } from "@dotss/ui";
+import U from "../MediaDialog/MediaBlock/MediaBlock.mjs";
+import { createSwipeEvent as R } from "./Swiper.utils.mjs";
+import j from "./SwiperBlock/SwiperBlock.mjs";
+function Pr({
+  children: B,
+  initialPage: T = 0,
+  onSwipe: s,
+  onSwiping: x,
+  loop: v = !1,
+  disableSwipe: tr = !1,
+  renderPagination: q,
+  inlineCSS: er,
+  autoSwipe: H = !1,
+  autoSwipeInterval: J = 3e3,
+  autoSwipeDuration: Q = 1e3,
+  ...nr
 }) {
-  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)
-      return;
-    d.current = !1, t.current.style.transition = "transform 0.2s", t.current.style.cursor = "grab", l.current && (t.current.removeEventListener("transitionend", l.current), l.current = null);
-    const a = e || P, c = i || X.current - t.current.offsetWidth * (a + 1) - r, g = t.current.offsetWidth * 0.1;
-    if (Math.abs(c) < g && !e) {
-      t.current.style.transform = N.current, o.current = !1, d.current = !0, u == null || u(
-        b({
+  const [C, $] = w(T), [c, cr] = w(1), t = d(null), X = d(0), Y = d(0), V = d(0), N = d(0), u = d(!1), f = d(!0), F = d(""), n = d(T), Z = d(!1), l = d(null), k = W.count(B), m = W.toArray(B).filter(G).filter((r) => r.type === j || r.type === U), A = k > 1 && !tr, sr = W.toArray(m == null ? void 0 : m[0]).filter(G).filter((r) => r.type === j || r.type === U), ur = W.toArray(m == null ? void 0 : m[(m == null ? void 0 : m.length) - 1]).filter(G).filter((r) => r.type === j || r.type === U), _ = (r, e, i) => {
+    !t.current || !A || (F.current = t.current.style.transform, Y.current = r, X.current = r + t.current.offsetWidth * (i + 1), V.current = e);
+  }, L = mr(
+    (r, e, i, {
+      isAutoSwiped: P = !1,
+      shouldFocus: a = !1
+    } = {}) => {
+      if (!t.current || !A || !u.current || !f.current)
+        return;
+      f.current = !1, t.current.style.transition = P ? `transform ${Q}ms` : "transform 0.2s", t.current.style.cursor = "grab", l.current && (t.current.removeEventListener("transitionend", l.current), l.current = null);
+      const o = e || C, h = i || X.current - t.current.offsetWidth * (o + 1) - r, y = t.current.offsetWidth * 0.1;
+      if (Math.abs(h) < y && !e) {
+        t.current.style.transform = F.current, u.current = !1, f.current = !0, s == null || s(
+          R({
+            realPage: n.current,
+            totalPages: c,
+            lastPage: n.current,
+            isLoop: !1
+          })
+        );
+        return;
+      }
+      const I = h <= -y && o - 1 < 0, z = h >= y && o + 1 === c, fr = h >= y && o + 1 < c, dr = h <= -y && o - 1 >= 0;
+      if (I) {
+        n.current = c - 1, s == null || s(
+          R({ realPage: n.current, totalPages: c, lastPage: 0, isLoop: !0 })
+        ), t.current.style.transform = "translate3d(0, 0, 0)", l.current = (D) => {
+          var g, b, E, p;
+          if (D.propertyName === "transform") {
+            if (!t.current) return;
+            t.current.style.transition = "none", t.current.style.transform = `translate3d(calc(-100% * ${c}), 0, 0)`, $(c - 1), u.current = !1, f.current = !0, a ? (E = (b = (g = t.current) == null ? void 0 : g.children) == null ? void 0 : b[c]) == null || E.focus() : (p = document.activeElement) == null || p.blur();
+          }
+        }, t.current.addEventListener("transitionend", l.current);
+        return;
+      } else if (z) {
+        n.current = 0, s == null || s(
+          R({
+            realPage: n.current,
+            totalPages: c,
+            lastPage: c - 1,
+            isLoop: !0
+          })
+        ), t.current.style.transform = `translate3d(calc(-100% * ${o + 2}), 0, 0)`, l.current = (D) => {
+          var g, b, E, p;
+          if (D.propertyName === "transform") {
+            if (!t.current) return;
+            t.current.style.transition = "none", t.current.style.transform = "translate3d(-100%, 0, 0)", $(0), u.current = !1, f.current = !0, a ? (E = (b = (g = t.current) == null ? void 0 : g.children) == null ? void 0 : b[1]) == null || E.focus() : (p = document.activeElement) == null || p.blur();
+          }
+        }, t.current.addEventListener("transitionend", l.current);
+        return;
+      }
+      fr ? (n.current = o + 1, s == null || s(
+        R({
           realPage: n.current,
-          totalPages: s,
-          lastPage: n.current,
+          totalPages: c,
+          lastPage: o,
+          isLoop: !0
+        })
+      ), $(n.current), t.current.style.transform = `translate3d(calc(-100% * ${o + 2}), 0, 0)`) : dr ? (n.current = o - 1, s == null || s(
+        R({
+          realPage: n.current,
+          totalPages: c,
+          lastPage: o,
           isLoop: !1
         })
-      );
-      return;
-    }
-    const $ = c <= -g && a - 1 < 0, A = c >= g && a + 1 === s, F = c >= g && a + 1 < s, z = c <= -g && a - 1 >= 0;
-    if ($) {
-      n.current = s - 1, u == null || u(
-        b({ realPage: n.current, totalPages: s, lastPage: 0, isLoop: !0 })
-      ), t.current.style.transform = "translate3d(0, 0, 0)", l.current = (M) => {
-        var v, h, L;
-        if (M.propertyName === "transform") {
-          if (!t.current) return;
-          t.current.style.transition = "none", t.current.style.transform = `translate3d(calc(-100% * ${s}), 0, 0)`, R(s - 1), o.current = !1, d.current = !0, (L = (h = (v = t.current) == null ? void 0 : v.children) == null ? void 0 : h[s]) == null || L.focus();
-        }
-      }, t.current.addEventListener("transitionend", l.current);
-      return;
-    } else if (A) {
-      n.current = 0, u == null || u(
-        b({
+      ), $(n.current), t.current.style.transform = `translate3d(calc(-100% * ${o}), 0, 0)`) : (s == null || s(
+        R({
           realPage: n.current,
-          totalPages: s,
-          lastPage: s - 1,
-          isLoop: !0
+          totalPages: c,
+          lastPage: n.current,
+          isLoop: !1
         })
-      ), t.current.style.transform = `translate3d(calc(-100% * ${a + 2}), 0, 0)`, l.current = (M) => {
-        var v, h, L;
-        if (M.propertyName === "transform") {
-          if (!t.current) return;
-          t.current.style.transition = "none", t.current.style.transform = "translate3d(-100%, 0, 0)", R(0), o.current = !1, d.current = !0, (L = (h = (v = t.current) == null ? void 0 : v.children) == null ? void 0 : h[1]) == null || L.focus();
+      ), t.current.style.transform = F.current), l.current = (D) => {
+        var g, b;
+        if (D.propertyName === "transform") {
+          u.current = !1, f.current = !0;
+          const E = Array.from(((g = t.current) == null ? void 0 : g.children) ?? []).find(
+            (p) => p.getAttribute("aria-current") === "page"
+          );
+          a && E ? E.focus() : (b = document.activeElement) == null || b.blur();
         }
       }, t.current.addEventListener("transitionend", l.current);
-      return;
-    }
-    F ? (n.current = a + 1, u == null || u(
-      b({
-        realPage: n.current,
-        totalPages: s,
-        lastPage: a,
-        isLoop: !0
-      })
-    ), R(n.current), t.current.style.transform = `translate3d(calc(-100% * ${a + 2}), 0, 0)`) : z ? (n.current = a - 1, u == null || u(
-      b({
-        realPage: n.current,
-        totalPages: s,
-        lastPage: a,
-        isLoop: !1
-      })
-    ), R(n.current), t.current.style.transform = `translate3d(calc(-100% * ${a}), 0, 0)`) : (u == null || u(
-      b({
-        realPage: n.current,
-        totalPages: s,
-        lastPage: n.current,
-        isLoop: !1
-      })
-    ), t.current.style.transform = N.current), l.current = (M) => {
-      var v;
-      if (M.propertyName === "transform") {
-        o.current = !1, d.current = !0;
-        const h = Array.from(((v = t.current) == null ? void 0 : v.children) ?? []).find(
-          (L) => L.getAttribute("aria-current") === "page"
-        );
-        h && h.focus();
-      }
-    }, t.current.addEventListener("transitionend", l.current);
-  }, nr = (r) => {
-    o.current = !0, J(r.clientX, r.clientY, n.current);
-  }, Q = (r) => C(r.clientX), cr = (r) => {
-    J(r.touches[0].clientX, r.touches[0].clientY, n.current);
-  }, V = (r) => C(r.changedTouches[0].clientX), sr = (r) => {
-    o.current = !0;
+    },
+    [C, c, s, A, Q]
+  ), ar = (r) => {
+    u.current = !0, _(r.clientX, r.clientY, n.current);
+  }, K = (r) => L(r.clientX), or = (r) => {
+    _(r.touches[0].clientX, r.touches[0].clientY, n.current);
+  }, O = (r) => L(r.changedTouches[0].clientX), lr = (r) => {
+    u.current = !0;
     const e = r - 1;
-    R(e <= 0 ? 0 : e), C(0, r);
-  }, ur = (r) => (e) => {
-    var i, a;
+    $(e <= 0 ? 0 : e), L(0, r);
+  }, ir = (r) => (e) => {
+    var i, P;
     switch (e.key) {
       case "ArrowRight": {
-        if (e.preventDefault(), o.current || !d.current) return;
-        const c = n.current === s - 1;
-        if (!y && c)
+        if (e.preventDefault(), u.current || !f.current) return;
+        const a = n.current === c - 1;
+        if (!v && a)
           return;
-        o.current = !0, C(0, n.current, (((i = t.current) == null ? void 0 : i.offsetWidth) ?? 0) * 0.1);
+        u.current = !0, L(0, n.current, (((i = t.current) == null ? void 0 : i.offsetWidth) ?? 0) * 0.1, {
+          shouldFocus: !0
+        });
         break;
       }
       case "ArrowLeft": {
-        if (e.preventDefault(), o.current || !d.current) return;
-        const c = n.current === 0;
-        if (!y && c)
+        if (e.preventDefault(), u.current || !f.current) return;
+        const a = n.current === 0;
+        if (!v && a)
           return;
-        o.current = !0, C(0, n.current, -((((a = t.current) == null ? void 0 : a.offsetWidth) ?? 0) * 0.1));
+        u.current = !0, L(0, n.current, -((((P = t.current) == null ? void 0 : P.offsetWidth) ?? 0) * 0.1), {
+          shouldFocus: !0
+        });
         break;
       }
       case "Enter": {
@@ -131,83 +144,94 @@ function vr({
     }
     r == null || r(e);
   };
-  return k(() => {
-    const r = t.current, e = (c, g, $) => {
-      if (!t.current || !D || !d.current) return;
-      Y.current = c - X.current;
-      const A = 5;
-      if (o.current = o.current || Math.abs(Y.current) > A && Math.abs(g - q.current) < A, o.current) {
-        const F = W.current < c, z = W.current > c;
-        if (!y && F && n.current === 0) {
-          o.current = !1;
+  return M(() => {
+    const r = t.current, e = (a, o, h) => {
+      if (!t.current || !A || !f.current) return;
+      N.current = a - X.current;
+      const y = 5;
+      if (u.current = u.current || Math.abs(N.current) > y && Math.abs(o - V.current) < y, u.current) {
+        const I = Y.current < a, z = Y.current > a;
+        if (!v && I && n.current === 0) {
+          u.current = !1;
           return;
         }
-        if (!y && z && n.current === s - 1) {
-          o.current = !1;
+        if (!v && z && n.current === c - 1) {
+          u.current = !1;
           return;
         }
-        $.cancelable && $.preventDefault(), T == null || T(
-          b({
+        h.cancelable && h.preventDefault(), x == null || x(
+          R({
             realPage: n.current,
-            totalPages: s,
+            totalPages: c,
             lastPage: n.current,
             isLoop: !1
           })
-        ), t.current.style.transition = "none", t.current.style.cursor = "grabbing", t.current.style.transform = `translate3d(${Y.current}px, 0, 0)`;
+        ), t.current.style.transition = "none", t.current.style.cursor = "grabbing", t.current.style.transform = `translate3d(${N.current}px, 0, 0)`;
       }
-    }, i = (c) => {
-      o.current && e(c.clientX, c.clientY, c);
-    }, a = (c) => e(c.touches[0].clientX, c.touches[0].clientY, c);
-    return r && (r.addEventListener("mousemove", i), r.addEventListener("touchmove", a)), () => {
-      r && (r.removeEventListener("mousemove", i), r.removeEventListener("touchmove", a));
+    }, i = (a) => {
+      u.current && e(a.clientX, a.clientY, a);
+    }, P = (a) => e(a.touches[0].clientX, a.touches[0].clientY, a);
+    return r && (r.addEventListener("mousemove", i), r.addEventListener("touchmove", P)), () => {
+      r && (r.removeEventListener("mousemove", i), r.removeEventListener("touchmove", P));
     };
-  }, [D, T, y, s]), k(() => {
+  }, [A, x, v, c]), M(() => {
     const r = t.current, e = (i) => {
-      d.current || (i.stopPropagation(), i.preventDefault());
+      f.current || (i.stopPropagation(), i.preventDefault());
     };
     return r == null || r.addEventListener("click", e), () => {
       r == null || r.removeEventListener("click", e);
     };
-  }, []), k(() => {
+  }, []), M(() => {
     const r = t.current;
     return () => {
       l.current && r && (r.removeEventListener("transitionend", l.current), l.current = null);
     };
-  }, []), k(() => {
-    rr(p);
-  }, [p]), k(() => {
-    t.current && !H.current && (H.current = !0, t.current.style.transition = "none", t.current.style.transform = `translate3d(calc(-100% * ${p < E + 1 ? p : E + 1}), 0, 0)`);
-  }, [E, p]), /* @__PURE__ */ Z(
-    K,
+  }, []), M(() => {
+    cr(k);
+  }, [k]), M(() => {
+    t.current && !Z.current && (Z.current = !0, t.current.style.transition = "none", t.current.style.transform = `translate3d(calc(-100% * ${k < T + 1 ? k : T + 1}), 0, 0)`);
+  }, [T, k]), M(() => {
+    if (H) {
+      const r = setInterval(() => {
+        u.current || !f.current || t.current && (!v && n.current === c - 1 || document.activeElement && t.current && t.current.contains(document.activeElement) || (u.current = !0, L(0, n.current, (t.current.offsetWidth ?? 0) * 0.1, {
+          isAutoSwiped: !0
+        })));
+      }, J);
+      return () => {
+        clearInterval(r);
+      };
+    }
+  }, [H, J, v, c, L]), /* @__PURE__ */ S(
+    rr,
     {
       flexGrow: 1,
       role: "list",
       "aria-roledescription": "carousel",
       "aria-label": "슬라이더",
-      ...w,
+      ...nr,
       inlineCSS: {
         width: "100%",
         position: "relative",
-        ...S
+        ...er
       },
       children: [
-        /* @__PURE__ */ Z(
-          K,
+        /* @__PURE__ */ S(
+          rr,
           {
             ref: t,
             flexGrow: 1,
-            onMouseDown: nr,
-            onMouseUp: Q,
-            onMouseLeave: Q,
-            onTouchStart: cr,
-            onTouchEnd: V,
-            onTouchCancel: V,
+            onMouseDown: ar,
+            onMouseUp: K,
+            onMouseLeave: K,
+            onTouchStart: or,
+            onTouchEnd: O,
+            onTouchCancel: O,
             inlineCSS: {
               "& > div:first-of-type": {
-                visibility: y ? "visible" : "hidden"
+                visibility: v ? "visible" : "hidden"
               },
               "& > div:last-of-type": {
-                visibility: y ? "visible" : "hidden"
+                visibility: v ? "visible" : "hidden"
               }
             },
             style: {
@@ -216,30 +240,30 @@ function vr({
               cursor: "grab"
             },
             children: [
-              er,
+              ur,
               m.map(
-                (r, e) => ar(r, {
+                (r, e) => vr(r, {
                   role: "listitem",
-                  tabIndex: e === P ? 0 : -1,
-                  onKeyDown: ur(r.props.onKeyDown),
+                  tabIndex: e === C ? 0 : -1,
+                  onKeyDown: ir(r.props.onKeyDown),
                   "aria-roledescription": "slide",
-                  "aria-hidden": e !== P,
-                  "aria-current": e === P ? "page" : void 0,
-                  "aria-label": `${s}개 중 ${e + 1}번째 슬라이드`,
+                  "aria-hidden": e !== C,
+                  "aria-current": e === C ? "page" : void 0,
+                  "aria-label": `${c}개 중 ${e + 1}번째 슬라이드`,
                   "aria-posinset": e + 1,
-                  "aria-setsize": s,
+                  "aria-setsize": c,
                   ...r.props
                 })
               ),
-              tr
+              sr
             ]
           }
         ),
-        typeof B == "function" && B({ page: P, totalPages: s, onChange: sr })
+        typeof q == "function" && q({ page: C, totalPages: c, onChange: lr })
       ]
     }
   );
 }
 export {
-  vr as default
+  Pr as default
 };

package/dist/teacher/home/components/BannerAccount/BannerAccount.d.ts

@@ -1,6 +1,7 @@
 import { SyntheticEvent } from 'react';
-import { ImageProps } from '../../../../shared/components/Image';
 import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
+import { ImageProps } from '../../../../shared/components/Image';
+import { SwiperProps } from '../../../../shared/components/Swiper';
 import { BannerProps } from '..';
 export interface BannerAccountProps extends Omit<FlexboxProps, 'title' | 'id'> {
     id: number;
@@ -9,6 +10,7 @@ export interface BannerAccountProps extends Omit<FlexboxProps, 'title' | 'id'> {
     }>;
     onClickBanner?: (url: string, bannerId: number, e: SyntheticEvent) => void;
     imageProps?: Partial<ImageProps>;
+    swiperProps?: Partial<SwiperProps>;
 }
-declare function BannerAccount({ id, banners, onClickBanner, imageProps, ...props }: BannerAccountProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function BannerAccount({ id, banners, onClickBanner, imageProps, swiperProps, ...props }: BannerAccountProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default BannerAccount;

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

@@ -1,16 +1,23 @@
 import { jsxs as c, jsx as i } from "react/jsx-runtime";
 import n from "@dotss/ui/Flexbox";
-import b from "@dotss/ui/Typography";
-import { useTheme as f } from "@emotion/react";
-import g from "../../../../shared/components/Image/Image.mjs";
+import f from "@dotss/ui/Typography";
+import { useTheme as g } from "@emotion/react";
+import S from "../../../../shared/components/Image/Image.mjs";
 import "@dotss/ui";
 import "@dotss/ui/core/useTheme";
-import S from "../../../../shared/components/Swiper/Swiper.mjs";
-import w from "../../../../shared/components/Swiper/SwiperBlock/SwiperBlock.mjs";
-function I({ id: a, banners: l, onClickBanner: o, imageProps: d, ...p }) {
-  const { palette: h } = f(), m = (e, r) => (t) => {
+import w from "../../../../shared/components/Swiper/Swiper.mjs";
+import y from "../../../../shared/components/Swiper/SwiperBlock/SwiperBlock.mjs";
+function H({
+  id: a,
+  banners: l,
+  onClickBanner: o,
+  imageProps: d,
+  swiperProps: p,
+  ...h
+}) {
+  const { palette: m } = g(), s = (e, r) => (t) => {
     o && typeof o == "function" && (t.stopPropagation(), t.preventDefault(), o(e, r, t));
-  }, s = ({ page: e, totalPages: r }) => r <= 1 ? null : /* @__PURE__ */ i(
+  }, u = ({ page: e, totalPages: r }) => r <= 1 ? null : /* @__PURE__ */ i(
     n,
     {
       alignItems: "center",
@@ -26,10 +33,10 @@ function I({ id: a, banners: l, onClickBanner: o, imageProps: d, ...p }) {
         minWidth: 36,
         minHeight: 20,
         borderRadius: 24,
-        backgroundColor: h.etc.dimmed02
+        backgroundColor: m.etc.dimmed02
       },
       children: /* @__PURE__ */ c(
-        b,
+        f,
         {
           tag: "p",
           variant: "c5R",
@@ -49,28 +56,29 @@ function I({ id: a, banners: l, onClickBanner: o, imageProps: d, ...p }) {
       )
     }
   );
-  return /* @__PURE__ */ c(n, { inlineCSS: { width: "100%" }, ...p, children: [
+  return /* @__PURE__ */ c(n, { inlineCSS: { width: "100%" }, ...h, children: [
     /* @__PURE__ */ i(n, { id: `tictoccroc-banner-${a}`, visuallyHidden: !0, children: "배너" }),
     /* @__PURE__ */ i(
-      S,
+      w,
       {
-        renderPagination: s,
+        renderPagination: u,
         loop: !0,
         inlineCSS: { borderRadius: 12, overflow: "hidden" },
         "aria-describedby": `tictoccroc-banner-${a}`,
-        children: l.map(({ id: e, url: r, image: t }, u) => /* @__PURE__ */ i(w, { children: /* @__PURE__ */ i(
+        ...p,
+        children: l.map(({ id: e, url: r, image: t }, b) => /* @__PURE__ */ i(y, { children: /* @__PURE__ */ i(
           n,
           {
             tag: "a",
             href: r,
             draggable: !1,
-            onClick: m(r, e),
+            onClick: s(r, e),
             inlineCSS: { width: "100%" },
             children: /* @__PURE__ */ i(
-              g,
+              S,
               {
                 src: t || "",
-                alt: `배너 ${u + 1}`,
+                alt: `배너 ${b + 1}`,
                 width: 328,
                 height: 100,
                 draggable: !1,
@@ -89,5 +97,5 @@ function I({ id: a, banners: l, onClickBanner: o, imageProps: d, ...p }) {
   ] });
 }
 export {
-  I as default
+  H as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dotss/tictoccroc",
   "type": "module",
-  "version": "0.0.35",
+  "version": "0.1.0",
   "description": "Tictoccroc shared components, hooks, utils, and APIs for Dotss",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -90,13 +90,9 @@
     "@storybook/addon-onboarding": "^9.0.4",
     "@storybook/react-vite": "^9.0.4",
     "@types/node": "^22.15.29",
-    "@types/react": "^19.1.6",
-    "@types/react-dom": "^19.1.5",
     "@vitejs/plugin-react-swc": "^3.10.0",
     "eslint-plugin-storybook": "^9.0.4",
     "glob": "^10.4.2",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
     "storybook": "^9.0.4",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^1.6.0"