@dotss/tictoccroc 0.0.0 → 0.0.2

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

@@ -0,0 +1,441 @@
+import { jsxs as r, Fragment as d, jsx as i } from "react/jsx-runtime";
+import { Flexbox as a, Typography as t, BottomSheet as x, BottomSheetTitle as C, BottomSheetContent as f, Label as v, BottomSheetAction as R, Button as L } from "@dotss/ui";
+import $ from "@dotss/ui/core/useTheme";
+import y from "../../../../../shared/components/Image/Image.mjs";
+import { getIconFileName as B } from "../AbilityCollection.utils.mjs";
+function k({
+  name: e,
+  iconBasePath: h,
+  completed: c,
+  detail: { open: g, label: m, description: b, onClose: S, onClickApply: p },
+  ...o
+}) {
+  const {
+    palette: { brand: l },
+    spacing: n
+  } = $(), s = `${h}/images/activities/${B(e, c)}`, u = ["창의악어", "영어악어", "영유아 악어"].includes(e) ? "ability" : "eductation";
+  return /* @__PURE__ */ r(d, { children: [
+    /* @__PURE__ */ r(
+      a,
+      {
+        role: "button",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        "aria-label": `${e} 배지 상세 정보 확인하기`,
+        "aria-describedby": `ability-badge-status-${e}`,
+        "aria-controls": `ability-badge-detail-${e}`,
+        "aria-expanded": g,
+        gap: 2,
+        ...o,
+        inlineCSS: { width: "100%", cursor: "pointer", ...o == null ? void 0 : o.inlineCSS },
+        children: [
+          /* @__PURE__ */ i(
+            y,
+            {
+              width: 48,
+              height: 48,
+              src: s,
+              alt: `${e} 배지`,
+              borderRadius: 12,
+              "aria-hidden": !0
+            }
+          ),
+          /* @__PURE__ */ i(
+            t,
+            {
+              variant: "c1M",
+              color: "grey.70",
+              textAlign: "center",
+              inlineCSS: {
+                wordBreak: "keep-all"
+              },
+              children: e
+            }
+          ),
+          /* @__PURE__ */ i(t, { id: `ability-badge-status-${e}`, role: "status", visuallyHidden: !0, children: c ? "획득 완료" : "미획득" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ r(
+      x,
+      {
+        id: `ability-badge-detail-${e}`,
+        open: g,
+        onClose: S,
+        "aria-labelledby": `ability-badge-detail-name-${e}`,
+        "aria-describedby": `ability-badge-detail-description-${e}`,
+        children: [
+          /* @__PURE__ */ i(C, { onClose: S, autoFocus: !0, hideLine: !0 }),
+          /* @__PURE__ */ r(
+            f,
+            {
+              inlineCSS: {
+                alignItems: "center",
+                justifyContent: "center",
+                gap: n.content(4)
+              },
+              children: [
+                /* @__PURE__ */ i(
+                  y,
+                  {
+                    width: 80,
+                    height: 80,
+                    src: s,
+                    alt: `${e} 배지`,
+                    borderRadius: 12,
+                    "aria-hidden": !0
+                  }
+                ),
+                /* @__PURE__ */ r(
+                  a,
+                  {
+                    flexDirection: "column",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: 2,
+                    mb: c ? 4 : void 0,
+                    children: [
+                      /* @__PURE__ */ i(t, { tag: "h3", variant: "h3B", id: `ability-badge-detail-name-${e}`, children: e }),
+                      /* @__PURE__ */ i(v, { variant: "outlined", color: "blue", size: "small", children: m }),
+                      /* @__PURE__ */ i(
+                        t,
+                        {
+                          variant: "c1M",
+                          textAlign: "center",
+                          color: "grey.70",
+                          id: `ability-badge-detail-description-${e}`,
+                          inlineCSS: {
+                            whiteSpace: "pre-line"
+                          },
+                          children: b
+                        }
+                      )
+                    ]
+                  }
+                ),
+                !c && /* @__PURE__ */ r(
+                  a,
+                  {
+                    mt: 2,
+                    mb: 2,
+                    pl: 4,
+                    pr: 4,
+                    pt: 5,
+                    pb: 5,
+                    gap: 1,
+                    flexGrow: 1,
+                    flexDirection: "column",
+                    inlineCSS: {
+                      width: "100%",
+                      backgroundColor: l.primary.disable,
+                      borderRadius: 12
+                    },
+                    children: [
+                      /* @__PURE__ */ i(t, { tag: "h3", variant: "h5B", inlineCSS: { color: l.primary.text }, children: "배지 취득 방법" }),
+                      /* @__PURE__ */ r(
+                        a,
+                        {
+                          tag: "ul",
+                          flexDirection: "column",
+                          gap: 1,
+                          inlineCSS: {
+                            listStyle: u === "ability" ? "decimal" : "disc",
+                            padding: 0,
+                            paddingLeft: n.content(4),
+                            "& li": {
+                              padding: 0
+                            }
+                          },
+                          children: [
+                            e === "창의악어" && /* @__PURE__ */ r(d, { children: [
+                              /* @__PURE__ */ r(
+                                t,
+                                {
+                                  tag: "li",
+                                  variant: "c3B",
+                                  inlineCSS: {
+                                    marginLeft: n.content(1),
+                                    color: l.primary.text
+                                  },
+                                  children: [
+                                    "서류 전형",
+                                    /* @__PURE__ */ r(
+                                      a,
+                                      {
+                                        tag: "ul",
+                                        flexDirection: "column",
+                                        inlineCSS: {
+                                          listStyle: "disc",
+                                          padding: 0,
+                                          "& li": {
+                                            padding: 0
+                                          }
+                                        },
+                                        children: [
+                                          /* @__PURE__ */ i(
+                                            t,
+                                            {
+                                              tag: "li",
+                                              variant: "b5R",
+                                              inlineCSS: {
+                                                display: "list-item",
+                                                listStyle: '"• "',
+                                                color: l.primary.text
+                                              },
+                                              children: "서류 전형 대상 : 미술, 유아동 관련 전공자로 현장 교육 경력 1년 이상"
+                                            }
+                                          ),
+                                          /* @__PURE__ */ i(
+                                            t,
+                                            {
+                                              tag: "li",
+                                              variant: "b5R",
+                                              inlineCSS: {
+                                                display: "list-item",
+                                                listStyle: '"• "',
+                                                color: l.primary.text
+                                              },
+                                              children: "제출 서류 : 전공 확인이 가능한 졸업증명서과 경력증명서"
+                                            }
+                                          )
+                                        ]
+                                      }
+                                    )
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ r(
+                                t,
+                                {
+                                  tag: "li",
+                                  variant: "c3B",
+                                  inlineCSS: {
+                                    marginTop: n.content(1),
+                                    marginLeft: n.content(1),
+                                    color: l.primary.text
+                                  },
+                                  children: [
+                                    "실기 전형",
+                                    /* @__PURE__ */ r(
+                                      a,
+                                      {
+                                        tag: "ul",
+                                        flexDirection: "column",
+                                        inlineCSS: {
+                                          listStyle: "disc",
+                                          padding: 0,
+                                          "& li": {
+                                            padding: 0
+                                          }
+                                        },
+                                        children: [
+                                          /* @__PURE__ */ i(
+                                            t,
+                                            {
+                                              tag: "li",
+                                              variant: "b5R",
+                                              inlineCSS: {
+                                                display: "list-item",
+                                                listStyle: '"• "',
+                                                color: l.primary.text
+                                              },
+                                              children: "작품 사진"
+                                            }
+                                          ),
+                                          /* @__PURE__ */ i(
+                                            t,
+                                            {
+                                              tag: "li",
+                                              variant: "b5R",
+                                              inlineCSS: {
+                                                display: "list-item",
+                                                listStyle: '"• "',
+                                                color: l.primary.text
+                                              },
+                                              children: "수업 활동 계획서"
+                                            }
+                                          )
+                                        ]
+                                      }
+                                    )
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ r(
+                                t,
+                                {
+                                  tag: "li",
+                                  variant: "b5R",
+                                  inlineCSS: {
+                                    display: "list-item",
+                                    listStyle: '"* "',
+                                    marginLeft: n.content(-1),
+                                    marginTop: n.content(1),
+                                    color: l.primary.text
+                                  },
+                                  children: [
+                                    "창의미술 수업이란?",
+                                    /* @__PURE__ */ i(
+                                      a,
+                                      {
+                                        tag: "ul",
+                                        flexDirection: "column",
+                                        inlineCSS: {
+                                          listStyle: "disc",
+                                          padding: 0,
+                                          marginLeft: n.content(2),
+                                          "& li": {
+                                            padding: 0
+                                          }
+                                        },
+                                        children: /* @__PURE__ */ i(
+                                          t,
+                                          {
+                                            tag: "li",
+                                            variant: "b5R",
+                                            inlineCSS: {
+                                              display: "list-item",
+                                              listStyle: '"•  "',
+                                              color: l.primary.text
+                                            },
+                                            children: "아이들과 창의적인 미술 수업을 진행하는 돌봄으로 커리큘럼은 부모님과 상의하여 정해요."
+                                          }
+                                        )
+                                      }
+                                    )
+                                  ]
+                                }
+                              )
+                            ] }),
+                            e === "영어악어" && /* @__PURE__ */ r(d, { children: [
+                              /* @__PURE__ */ i(
+                                t,
+                                {
+                                  tag: "li",
+                                  variant: "b5R",
+                                  inlineCSS: {
+                                    marginLeft: n.content(1),
+                                    color: l.primary.text
+                                  },
+                                  children: "째깍악어가 제시하는 주제에 대한 답변을 영어로 녹음한 음성파일을 제출해요."
+                                }
+                              ),
+                              /* @__PURE__ */ i(
+                                t,
+                                {
+                                  tag: "li",
+                                  variant: "b5R",
+                                  inlineCSS: {
+                                    marginLeft: n.content(1),
+                                    color: l.primary.text
+                                  },
+                                  children: "영어권 국가 거주 또는 학업, 연수 등 경험에 대해 서술해요."
+                                }
+                              ),
+                              /* @__PURE__ */ i(
+                                t,
+                                {
+                                  tag: "li",
+                                  variant: "b5R",
+                                  inlineCSS: {
+                                    marginLeft: n.content(1),
+                                    color: l.primary.text
+                                  },
+                                  children: "공인 어학 성적 등 증빙 가능 서류가 있다면 제출해요. (선택)"
+                                }
+                              )
+                            ] }),
+                            e === "영유아 악어" && /* @__PURE__ */ r(d, { children: [
+                              /* @__PURE__ */ i(
+                                t,
+                                {
+                                  tag: "li",
+                                  variant: "b5R",
+                                  inlineCSS: {
+                                    marginLeft: n.content(1),
+                                    color: l.primary.text
+                                  },
+                                  children: "육아 경험, 기저귀 갈이 경험 유무 등 영유아 돌봄에 필요한 기본 능력이 있어야 해요."
+                                }
+                              ),
+                              /* @__PURE__ */ i(
+                                t,
+                                {
+                                  tag: "li",
+                                  variant: "b5R",
+                                  inlineCSS: {
+                                    marginLeft: n.content(1),
+                                    color: l.primary.text
+                                  },
+                                  children: "신청서를 제출하면 째깍악어에서 심사 후 배지를 부여해요."
+                                }
+                              )
+                            ] }),
+                            [
+                              "산업안전 보건교육",
+                              "아동학대 예방교육",
+                              "응급상황 대처교육",
+                              "놀이돌봄 기초교육"
+                            ].includes(e) && /* @__PURE__ */ r(d, { children: [
+                              /* @__PURE__ */ i(
+                                t,
+                                {
+                                  tag: "li",
+                                  variant: "b5R",
+                                  inlineCSS: {
+                                    display: "list-item",
+                                    listStyle: '"•  "',
+                                    marginLeft: n.content(1),
+                                    color: l.primary.text
+                                  },
+                                  children: "신청 버튼을 누르면 째깍캠퍼스 강의로 이동해요."
+                                }
+                              ),
+                              /* @__PURE__ */ i(
+                                t,
+                                {
+                                  tag: "li",
+                                  variant: "b5R",
+                                  inlineCSS: {
+                                    display: "list-item",
+                                    listStyle: '"•  "',
+                                    marginLeft: n.content(1),
+                                    color: l.primary.text
+                                  },
+                                  children: "수강을 완료하면 배지가 자동 부여되며, 최대 하루 뒤 앱에 표시돼요."
+                                }
+                              ),
+                              /* @__PURE__ */ i(
+                                t,
+                                {
+                                  tag: "li",
+                                  variant: "b5R",
+                                  inlineCSS: {
+                                    display: "list-item",
+                                    listStyle: '"•  "',
+                                    marginLeft: n.content(1),
+                                    color: l.primary.text
+                                  },
+                                  children: "취득한 배지는 부모님에게 보여져요. 배지를 획득하여 선생님의 신뢰도를 높여보세요!"
+                                }
+                              )
+                            ] })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          !c && /* @__PURE__ */ i(R, { children: /* @__PURE__ */ i(L, { size: "large", onClick: p, children: "신청하기" }) })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  k as default
+};

package/dist/teacher/profile/components/AbilityCollection/AbilityBadge/index.d.ts

@@ -0,0 +1,3 @@
+import { default as AbilityBadge, AbilityBadgeProps } from './AbilityBadge';
+export { AbilityBadge, type AbilityBadgeProps };
+export default AbilityBadge;

package/dist/teacher/profile/components/AbilityCollection/AbilityBadge/index.mjs

@@ -0,0 +1,5 @@
+import i from "./AbilityBadge.mjs";
+export {
+  i as AbilityBadge,
+  i as default
+};

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

@@ -0,0 +1,6 @@
+import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
+export interface AbilityCollectionProps extends FlexboxProps {
+    enableToggle?: boolean;
+}
+declare function AbilityCollection({ children, enableToggle, ...props }: AbilityCollectionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default AbilityCollection;

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

@@ -0,0 +1,111 @@
+import { jsxs as T, jsx as n } from "react/jsx-runtime";
+import { useState as m, useRef as N, Children as A, isValidElement as I, cloneElement as q } from "react";
+import { Flexbox as l, Typography as B, Button as j, Icon as G } from "@dotss/ui";
+import U from "@dotss/ui/core/useTheme";
+import z from "./AbilityBadge/AbilityBadge.mjs";
+function Q({ children: $, enableToggle: s = !1, ...a }) {
+  const { spacing: u } = U(), [i, R] = m(!1), [k, d] = m(0), [F, f] = m(0), c = N(null), w = A.toArray($).filter(I).filter((e) => e.type === z), D = () => R((e) => !e), E = (e) => (t) => {
+    const r = Number(t.currentTarget.getAttribute("data-row") || -1), o = Number(t.currentTarget.getAttribute("data-col") || -1);
+    d(r), f(o), e == null || e(t);
+  }, L = (e) => (t) => {
+    var g, p, y, C, h, S, x, v;
+    const r = Number(t.currentTarget.getAttribute("data-row") || -1), o = Number(t.currentTarget.getAttribute("data-col") || -1);
+    switch (t.key) {
+      case "ArrowUp": {
+        if (t.preventDefault(), r === 0)
+          return;
+        d(r - 1), (p = (g = c.current) == null ? void 0 : g.querySelector(`[data-row="${r - 1}"][data-col="${o}"]`)) == null || p.focus();
+        break;
+      }
+      case "ArrowDown": {
+        if (t.preventDefault(), r === 2 || r === 1 && s && !i)
+          return;
+        d(r + 1), (C = (y = c.current) == null ? void 0 : y.querySelector(`[data-row="${r + 1}"][data-col="${o}"]`)) == null || C.focus();
+        break;
+      }
+      case "ArrowLeft": {
+        if (t.preventDefault(), o === 0)
+          return;
+        f(o - 1), (S = (h = c.current) == null ? void 0 : h.querySelector(`[data-row="${r}"][data-col="${o - 1}"]`)) == null || S.focus();
+        break;
+      }
+      case "ArrowRight": {
+        if (t.preventDefault(), o === 2)
+          return;
+        f(o + 1), (v = (x = c.current) == null ? void 0 : x.querySelector(`[data-row="${r}"][data-col="${o + 1}"]`)) == null || v.focus();
+        break;
+      }
+      case "Enter":
+      case " ":
+        t.preventDefault(), t.currentTarget.click();
+        break;
+    }
+    e == null || e(t);
+  };
+  return /* @__PURE__ */ T(
+    l,
+    {
+      tag: "section",
+      flexDirection: "column",
+      gap: 4,
+      "aria-labelledby": "ability-collection-title",
+      ...a,
+      inlineCSS: { width: "100%", ...a == null ? void 0 : a.inlineCSS },
+      children: [
+        /* @__PURE__ */ n(B, { id: "ability-collection-title", tag: "h2", variant: "h2B", children: "능력치 배지" }),
+        /* @__PURE__ */ n(
+          l,
+          {
+            ref: c,
+            id: "ability-badge-grid",
+            role: "grid",
+            gap: 2,
+            pt: 3,
+            pb: 3,
+            alignItems: "center",
+            inlineCSS: {
+              display: "grid",
+              gridTemplateColumns: "repeat(3, 1fr)",
+              width: "inherit",
+              columnGap: u.content(2),
+              rowGap: u.content(6),
+              maxHeight: i ? void 0 : s ? `calc(2 * 74px + ${u.content(12)}px)` : void 0,
+              overflow: "hidden",
+              ...a == null ? void 0 : a.inlineCSS
+            },
+            children: A.map(w, (e, t) => {
+              const r = Math.floor(t / 3), o = t % 3;
+              return /* @__PURE__ */ n(l, { role: "gridcell", children: q(e, {
+                tabIndex: k === r && F === o ? 0 : -1,
+                // @ts-expect-error 데이터 속성 타입 오류 무시
+                "data-row": r,
+                "data-col": o,
+                "aria-posinset": t + 1,
+                "aria-setsize": w.length,
+                onFocus: E(e.props.onFocus),
+                onKeyDown: L(e.props.onKeyDown),
+                ...e.props
+              }) }, `ability-badge-gridcell-${t}`);
+            })
+          }
+        ),
+        s && /* @__PURE__ */ n(l, { alignItems: "center", justifyContent: "center", inlineCSS: { width: "inherit" }, children: /* @__PURE__ */ n(
+          j,
+          {
+            fullWidth: !0,
+            variant: "text",
+            color: "secondary",
+            endAdornment: /* @__PURE__ */ n(G, { name: i ? "ChevronUpLine" : "ChevronDownLine" }),
+            onClick: D,
+            "aria-controls": "ability-badge-grid",
+            "aria-expanded": i,
+            children: i ? "접기" : "더 보기"
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  Q as default
+};

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

@@ -0,0 +1,6 @@
+export declare function getIconFileName(abilityName: string, completed: boolean): string;
+export declare function getAbilityCollection(data: Record<string, string>): {
+    key: string;
+    name: string;
+    completed: boolean;
+}[];

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

@@ -0,0 +1,43 @@
+function c(a, n) {
+  let e = "";
+  switch (a) {
+    case "창의악어":
+      e = "creative-icon.png";
+      break;
+    case "영어악어":
+      e = "english-icon.png";
+      break;
+    case "영유아 악어":
+      e = "infant-icon.png";
+      break;
+    case "산업안전 보건교육":
+      e = "osh-education-icon.png";
+      break;
+    case "아동학대 예방교육":
+      e = "cap-education-icon.png";
+      break;
+    case "응급상황 대처교육":
+      e = "emergency-response-training-icon.png";
+      break;
+    case "놀이돌봄 기초교육":
+      e = "basic-play-care-education-icon.png";
+      break;
+  }
+  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"
+  }));
+}
+export {
+  i as getAbilityCollection,
+  c as getIconFileName
+};

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

@@ -0,0 +1,5 @@
+import { AbilityCollectionProps, default as AbilityCollection } from './AbilityCollection';
+export { default as AbilityBadge, type AbilityBadgeProps } from './AbilityBadge';
+export { getAbilityCollection } from './AbilityCollection.utils';
+export type { AbilityCollectionProps };
+export default AbilityCollection;

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

@@ -0,0 +1,8 @@
+import o from "./AbilityCollection.mjs";
+import { default as l } from "./AbilityBadge/AbilityBadge.mjs";
+import { getAbilityCollection as a } from "./AbilityCollection.utils.mjs";
+export {
+  l as AbilityBadge,
+  o as default,
+  a as getAbilityCollection
+};

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
+import { MasonryProps } from '../../../../shared/components/Masonry';
+export interface ActivityGalleryProps extends FlexboxProps {
+    onClickViewAll?: () => void;
+    action?: 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;
+export default ActivityGallery;