@dotss/tictoccroc 0.0.0 → 0.0.2

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

@@ -0,0 +1,18 @@
+export declare const preferredAgeGroup: {
+    age1: {
+        label: string;
+    };
+    age2: {
+        label: string;
+    };
+    age3: {
+        label: string;
+    };
+    age4: {
+        label: string;
+    };
+    age5: {
+        label: string;
+    };
+};
+export declare function getPreferredAgeKeywords(data: Record<string, string>): string[];

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

@@ -0,0 +1,14 @@
+const l = {
+  age1: { label: "~24개월" },
+  age2: { label: "3~4세" },
+  age3: { label: "5~7세" },
+  age4: { label: "8~10세" },
+  age5: { label: "11~13세" }
+};
+function r(a) {
+  return Object.keys(l).filter((e) => a[e] === "Y").map((e) => l[e].label);
+}
+export {
+  r as getPreferredAgeKeywords,
+  l as preferredAgeGroup
+};

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

@@ -0,0 +1,4 @@
+import { default as PreferredAgeGroup, PreferredAgeGroupProps } from './PreferredAgeGroup';
+export type { PreferredAgeGroupProps };
+export { getPreferredAgeKeywords } from './PreferredAgeGroup.utils';
+export default PreferredAgeGroup;

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

@@ -0,0 +1,6 @@
+import r from "./PreferredAgeGroup.mjs";
+import { getPreferredAgeKeywords as t } from "./PreferredAgeGroup.utils.mjs";
+export {
+  r as default,
+  t as getPreferredAgeKeywords
+};

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

@@ -1,2 +1,26 @@
-declare function ProfileSummary(): import("@emotion/react/jsx-runtime").JSX.Element;
+import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
+export interface ProfileSummaryProps extends FlexboxProps {
+    avatar: {
+        src: string;
+        placeholder?: ReactNode;
+        status: 'VERIFIED' | 'PENDING' | 'REJECTED' | 'DELETED';
+        onClick?: (e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>) => void;
+    };
+    introduction: {
+        summary: string;
+        aboutMe: string;
+        placeholder?: ReactNode;
+        status: 'VERIFIED' | 'PENDING' | 'REJECTED' | 'DELETED';
+    };
+    name: string;
+    adronment?: ReactNode;
+    grade?: string;
+    activeHours: number;
+    rating: number;
+    reviewCount: number;
+    lastActiveAt?: string;
+    action?: ReactNode;
+}
+declare function ProfileSummary({ avatar, introduction, name, grade, activeHours, rating, reviewCount, adronment, lastActiveAt, action }: ProfileSummaryProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default ProfileSummary;

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

@@ -1,8 +1,416 @@
-import { jsx as r } from "react/jsx-runtime";
-import o from "@thedotscorp/ui/Typography";
-function f() {
-  return /* @__PURE__ */ r(o, { children: "ProfileSummary" });
+import { jsxs as n, jsx as e, Fragment as C } from "react/jsx-runtime";
+import { useState as E, useRef as F, useEffect as J } from "react";
+import { Flexbox as r, Typography as t, Icon as d, Label as B, Button as G } from "@dotss/ui";
+import K from "@dotss/ui/core/useTheme";
+import I from "dayjs";
+import N from "dayjs/plugin/relativeTime";
+import O from "../../../../shared/components/Image/Image.mjs";
+I.extend(N);
+function X({
+  avatar: l,
+  introduction: i,
+  name: p,
+  grade: u,
+  activeHours: S = 0,
+  rating: h = 0,
+  reviewCount: m = 0,
+  adronment: R,
+  lastActiveAt: x,
+  action: L
+}) {
+  const {
+    palette: { background: y, brand: w, etc: k },
+    spacing: a
+  } = K(), [g, D] = E(!1), [z, v] = E(!1), b = F(null), M = S >= 0 && m > 0, c = x ? I(x) : null, T = (o) => {
+    var s, f;
+    switch (o.key) {
+      case "Enter":
+        o.preventDefault(), (s = l.onClick) == null || s.call(l, o);
+        break;
+      case " ":
+        o.preventDefault(), (f = l.onClick) == null || f.call(l, o);
+        break;
+    }
+  }, j = () => D((o) => !o);
+  return J(() => {
+    const o = () => {
+      if (!b.current) return;
+      const s = b.current, f = parseInt(window.getComputedStyle(s).lineHeight), $ = s.scrollHeight, H = Math.ceil($ / f);
+      v(H > 4);
+    };
+    return o(), window.addEventListener("resize", o), () => {
+      window.removeEventListener("resize", o);
+    };
+  }, [i.aboutMe]), /* @__PURE__ */ n(
+    r,
+    {
+      tag: "section",
+      flexDirection: "column",
+      gap: 4,
+      "aria-label": "선생님 프로필 요약 정보",
+      inlineCSS: {
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ n(r, { alignItems: "flex-start", gap: 4, children: [
+          /* @__PURE__ */ n(r, { flexDirection: "column", gap: 2, alignItems: "center", justifyContent: "center", children: [
+            /* @__PURE__ */ n(
+              r,
+              {
+                role: typeof l.onClick == "function" ? "button" : void 0,
+                tabIndex: typeof l.onClick == "function" ? 0 : -1,
+                onKeyDown: T,
+                onClick: l.onClick,
+                alignItems: "center",
+                justifyContent: "center",
+                flexDirection: "column",
+                gap: 2,
+                inlineCSS: {
+                  position: "relative",
+                  border: "1px solid rgba(0, 0, 0, 0.05)",
+                  borderRadius: 100,
+                  width: 88,
+                  height: 88,
+                  overflow: "hidden",
+                  backgroundColor: y.primary,
+                  cursor: typeof l.onClick == "function" ? "pointer" : void 0
+                },
+                children: [
+                  l.src && /* @__PURE__ */ e(
+                    O,
+                    {
+                      width: 88,
+                      height: 88,
+                      src: l.src,
+                      alt: `${p} 선생님 프로필 이미지`,
+                      fit: "cover"
+                    }
+                  ),
+                  !l.src && !l.placeholder && /* @__PURE__ */ n(
+                    r,
+                    {
+                      role: "status",
+                      flexDirection: "column",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      children: [
+                        /* @__PURE__ */ e(
+                          t,
+                          {
+                            tag: "p",
+                            variant: "c3M",
+                            color: "grey.70",
+                            "aria-label": "등록된 프로필 사진이 없어요.",
+                            children: "프로필 사진"
+                          }
+                        ),
+                        /* @__PURE__ */ e(t, { tag: "span", variant: "c5R", color: "etc.red", "aria-hidden": !0, children: "(필수)" })
+                      ]
+                    }
+                  ),
+                  !l.src && l.placeholder && l.placeholder,
+                  l.status === "REJECTED" && /* @__PURE__ */ n(C, { children: [
+                    /* @__PURE__ */ e(
+                      r,
+                      {
+                        alignItems: "center",
+                        justifyContent: "center",
+                        inlineCSS: {
+                          position: "absolute",
+                          top: 0,
+                          left: 0,
+                          width: "100%",
+                          height: "100%",
+                          opacity: 0.8,
+                          backgroundColor: y.primary,
+                          zIndex: 1
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      d,
+                      {
+                        name: "AlertFill",
+                        size: "xSmall",
+                        color: "etc.red",
+                        inlineCSS: {
+                          position: "absolute",
+                          top: "50%",
+                          left: "50%",
+                          transform: "translate(-50%, -50%)",
+                          zIndex: 1
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ e(t, { role: "status", visuallyHidden: !0, children: "프로필 사진이 반려되었어요. 다시 등록해주세요." })
+                  ] })
+                ]
+              }
+            ),
+            (c == null ? void 0 : c.isValid()) && /* @__PURE__ */ e(
+              t,
+              {
+                tag: "p",
+                variant: "c3M",
+                color: "grey.50",
+                "aria-label": `마지막 활동 시간 ${c.fromNow()}`,
+                children: c.fromNow()
+              }
+            )
+          ] }),
+          /* @__PURE__ */ n(
+            r,
+            {
+              flexDirection: "column",
+              justifyContent: "flex-start",
+              gap: 3,
+              pt: 0.75,
+              pb: 0.75,
+              flexGrow: 1,
+              children: [
+                /* @__PURE__ */ n(
+                  r,
+                  {
+                    alignItems: "center",
+                    gap: 2,
+                    inlineCSS: {
+                      maxHeight: 30
+                    },
+                    children: [
+                      u && /* @__PURE__ */ e(
+                        B,
+                        {
+                          variant: "outlined",
+                          size: "small",
+                          color: "blue",
+                          "aria-label": `${p} 선생님의 등급: ${u}`,
+                          children: u
+                        }
+                      ),
+                      /* @__PURE__ */ n(
+                        t,
+                        {
+                          tag: "p",
+                          variant: "h2B",
+                          "aria-label": `${p} 선생님`,
+                          inlineCSS: {
+                            flexGrow: 1,
+                            "& > span": {
+                              marginLeft: a.content(1),
+                              fontWeight: 400
+                            }
+                          },
+                          children: [
+                            p,
+                            /* @__PURE__ */ e("span", { "aria-hidden": !0, children: "선생님" })
+                          ]
+                        }
+                      ),
+                      R
+                    ]
+                  }
+                ),
+                M && /* @__PURE__ */ n(
+                  r,
+                  {
+                    pl: 4,
+                    pr: 4,
+                    pt: 2,
+                    pb: 2,
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    gap: 5,
+                    inlineCSS: {
+                      borderRadius: 8,
+                      backgroundColor: y.primary
+                    },
+                    children: [
+                      /* @__PURE__ */ n(r, { alignItems: "center", role: "group", "aria-label": `누적 수업 ${S}시간`, children: [
+                        /* @__PURE__ */ e(d, { name: "TimeLine", size: "xSmall", color: "grey.70" }),
+                        /* @__PURE__ */ e(
+                          t,
+                          {
+                            tag: "p",
+                            variant: "h4B",
+                            inlineCSS: {
+                              marginLeft: a.content(1),
+                              color: w.primary.text
+                            },
+                            children: S.toLocaleString()
+                          }
+                        ),
+                        /* @__PURE__ */ e(
+                          t,
+                          {
+                            tag: "span",
+                            variant: "b5R",
+                            color: "grey.70",
+                            inlineCSS: {
+                              marginLeft: a.content(0.5)
+                            },
+                            children: "시간"
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ n(
+                        r,
+                        {
+                          alignItems: "center",
+                          role: "group",
+                          "aria-label": h > 0 ? `평점 ${h}, 리뷰 ${m}개` : `평점 집계중, 리뷰 ${m}개`,
+                          children: [
+                            /* @__PURE__ */ e(d, { name: "ReviewFill", size: "xSmall", color: "grey.70" }),
+                            h > 0 ? /* @__PURE__ */ n(C, { children: [
+                              /* @__PURE__ */ e(
+                                t,
+                                {
+                                  tag: "p",
+                                  variant: "h4B",
+                                  inlineCSS: {
+                                    marginLeft: a.content(1),
+                                    color: w.primary.text
+                                  },
+                                  children: h.toLocaleString()
+                                }
+                              ),
+                              /* @__PURE__ */ n(
+                                t,
+                                {
+                                  tag: "span",
+                                  variant: "b5R",
+                                  color: "grey.70",
+                                  inlineCSS: {
+                                    marginLeft: a.content(0.5)
+                                  },
+                                  children: [
+                                    "(",
+                                    m.toLocaleString(),
+                                    ")"
+                                  ]
+                                }
+                              )
+                            ] }) : /* @__PURE__ */ e(
+                              t,
+                              {
+                                tag: "p",
+                                variant: "h4R",
+                                color: "grey.70",
+                                inlineCSS: {
+                                  marginLeft: a.content(1)
+                                },
+                                children: "집계중"
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ n(
+          r,
+          {
+            flexDirection: "column",
+            inlineCSS: {
+              position: "relative"
+            },
+            children: [
+              (!i.summary || !i.aboutMe) && !i.placeholder && /* @__PURE__ */ n(
+                t,
+                {
+                  tag: "p",
+                  variant: "b4R",
+                  color: "grey.70",
+                  "aria-label": "작성된 프로필 소개가 없어요.",
+                  inlineCSS: {
+                    "& > span": {
+                      color: k.red
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ e("span", { "aria-hidden": !0, children: "(필수)" }),
+                    " 프로필 소개를 작성하세요."
+                  ]
+                }
+              ),
+              (!i.summary || !i.aboutMe) && i.placeholder && i.placeholder,
+              i.summary && i.aboutMe && /* @__PURE__ */ n(C, { children: [
+                i.status === "REJECTED" && /* @__PURE__ */ e(t, { role: "status", visuallyHidden: !0, children: "프로필 소개가 반려되었어요. 다시 작성해주세요." }),
+                /* @__PURE__ */ n(
+                  t,
+                  {
+                    tag: "dl",
+                    variant: "b4M",
+                    color: i.status === "REJECTED" ? "grey.30" : void 0,
+                    inlineCSS: {
+                      display: "flex",
+                      alignItems: "center"
+                    },
+                    children: [
+                      i.status === "REJECTED" && /* @__PURE__ */ e(
+                        d,
+                        {
+                          name: "AlertFill",
+                          size: "xSmall",
+                          color: "etc.red",
+                          inlineCSS: {
+                            marginRight: a.content(1)
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ e(r, { tag: "dt", visuallyHidden: !0, children: "한 줄 소개" }),
+                      /* @__PURE__ */ e("dd", { children: i.summary })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ n(
+                  t,
+                  {
+                    ref: b,
+                    id: "about-me",
+                    tag: "dl",
+                    variant: "b4R",
+                    color: i.status === "REJECTED" ? "grey.30" : "grey.70",
+                    lineClamp: g ? void 0 : 4,
+                    inlineCSS: {
+                      marginTop: a.content(2),
+                      whiteSpace: "pre-wrap"
+                    },
+                    children: [
+                      /* @__PURE__ */ e(r, { tag: "dt", visuallyHidden: !0, children: "자기소개" }),
+                      /* @__PURE__ */ e("dd", { children: i.aboutMe })
+                    ]
+                  }
+                )
+              ] }),
+              z && /* @__PURE__ */ e(
+                G,
+                {
+                  variant: "text",
+                  size: "xSmall",
+                  color: "secondary",
+                  endAdornment: /* @__PURE__ */ e(d, { name: g ? "ChevronUpLine" : "ChevronDownLine" }),
+                  onClick: j,
+                  "aria-expanded": g,
+                  "aria-controls": "about-me",
+                  inlineCSS: {
+                    marginLeft: "auto"
+                  },
+                  children: g ? "접기" : "더보기"
+                }
+              )
+            ]
+          }
+        ),
+        L
+      ]
+    }
+  );
 }
 export {
-  f as default
+  X as default
 };

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

@@ -1,2 +1,3 @@
-import { default as ProfileSummary } from './ProfileSummary';
+import { ProfileSummaryProps, default as ProfileSummary } from './ProfileSummary';
+export type { ProfileSummaryProps };
 export default ProfileSummary;

package/dist/teacher/profile/components/StatBadgeCollection/StatBadge/StatBadge.d.ts

@@ -0,0 +1,7 @@
+import { LabelProps } from 'node_modules/@dotss/ui/Label/Label';
+export interface StatBadgeProps extends LabelProps {
+    type: 'play' | 'creativeArt' | 'english' | 'learning';
+    percent: number;
+}
+declare function StatBadge({ type, percent, ...props }: StatBadgeProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default StatBadge;

package/dist/teacher/profile/components/StatBadgeCollection/StatBadge/StatBadge.mjs

@@ -0,0 +1,105 @@
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+import { Label as e } from "@dotss/ui";
+import s from "../../../../../shared/components/Image/Image.mjs";
+function n({ type: l, percent: t, ...i }) {
+  return l === "creativeArt" ? /* @__PURE__ */ r(
+    e,
+    {
+      variant: "ghost",
+      size: "small",
+      color: "grey",
+      startAdornment: /* @__PURE__ */ a(
+        s,
+        {
+          width: 16,
+          height: 16,
+          src: "https://dev-static.tictoccroc.co.kr/teacher/images/design-system/graphic/illustration3D/brush.png",
+          alt: "창의미술 상위 배지 아이콘",
+          "aria-hidden": !0
+        }
+      ),
+      "aria-label": `창의미술 상위 ${t}퍼센트`,
+      ...i,
+      children: [
+        "창의미술 상위 ",
+        t,
+        "%"
+      ]
+    }
+  ) : l === "english" ? /* @__PURE__ */ r(
+    e,
+    {
+      variant: "ghost",
+      size: "small",
+      color: "grey",
+      startAdornment: /* @__PURE__ */ a(
+        s,
+        {
+          width: 16,
+          height: 16,
+          src: "https://dev-static.tictoccroc.co.kr/teacher/images/design-system/graphic/illustration3D/english.png",
+          alt: "영어 상위 배지 아이콘",
+          "aria-hidden": !0
+        }
+      ),
+      "aria-label": `영어 상위 ${t}퍼센트`,
+      ...i,
+      children: [
+        "영어 상위 ",
+        t,
+        "%"
+      ]
+    }
+  ) : l === "learning" ? /* @__PURE__ */ r(
+    e,
+    {
+      variant: "ghost",
+      size: "small",
+      color: "grey",
+      startAdornment: /* @__PURE__ */ a(
+        s,
+        {
+          width: 16,
+          height: 16,
+          src: "https://dev-static.tictoccroc.co.kr/teacher/images/design-system/graphic/illustration3D/pencil.png",
+          alt: "학습 상위 배지 아이콘",
+          "aria-hidden": !0
+        }
+      ),
+      "aria-label": `학습 상위 ${t}퍼센트`,
+      ...i,
+      children: [
+        "학습 상위 ",
+        t,
+        "%"
+      ]
+    }
+  ) : /* @__PURE__ */ r(
+    e,
+    {
+      variant: "ghost",
+      size: "small",
+      color: "grey",
+      startAdornment: /* @__PURE__ */ a(
+        s,
+        {
+          width: 16,
+          height: 16,
+          src: "https://dev-static.tictoccroc.co.kr/teacher/images/design-system/graphic/illustration3D/block.png",
+          alt: "놀이 상위 배지 아이콘",
+          "aria-hidden": !0
+        }
+      ),
+      "aria-label": `놀이 상위 ${t}퍼센트`,
+      ...i,
+      children: [
+        "놀이 상위 ",
+        t,
+        "%"
+      ]
+    }
+  );
+}
+export {
+  n as default
+};

package/dist/teacher/profile/components/StatBadgeCollection/StatBadge/index.d.ts

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

package/dist/teacher/profile/components/StatBadgeCollection/StatBadge/index.mjs

@@ -0,0 +1,4 @@
+import a from "./StatBadge.mjs";
+export {
+  a as default
+};

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

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

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

@@ -0,0 +1,28 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { Flexbox as a, Icon as t, Typography as i } from "@dotss/ui";
+function p({
+  children: l,
+  hideDescription: o = !1,
+  ...n
+}) {
+  return /* @__PURE__ */ r(
+    a,
+    {
+      tag: "section",
+      flexDirection: "column",
+      gap: 1,
+      "aria-label": "째깍악어 돌봄 통계 배지 안내",
+      ...n,
+      children: [
+        /* @__PURE__ */ e(a, { alignItems: "center", flexWrap: "wrap", gap: 1, role: "group", "aria-label": "획득한 배지", children: l }),
+        !o && /* @__PURE__ */ r(a, { gap: 0.5, alignItems: "center", children: [
+          /* @__PURE__ */ e(t, { name: "InformationLine", color: "grey.50", size: "xSmall" }),
+          /* @__PURE__ */ e(i, { tag: "p", variant: "c5M", color: "grey.50", children: "째깍악어 통계 기반으로 자동 부여되는 배지예요." })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  p as default
+};

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

@@ -0,0 +1,4 @@
+import { default as StatBadgeCollection, StatBadgeCollectionProps } from './StatBadgeCollection';
+export { default as StatBadge, type StatBadgeProps } from './StatBadge';
+export type { StatBadgeCollectionProps };
+export default StatBadgeCollection;

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

@@ -0,0 +1,6 @@
+import a from "./StatBadgeCollection.mjs";
+import { default as r } from "./StatBadge/StatBadge.mjs";
+export {
+  r as StatBadge,
+  a as default
+};