@dotss/tictoccroc 0.0.30 → 0.0.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/teacher/home/components/BannerAccount/BannerAccount.d.ts +4 -4
  2. package/dist/teacher/home/components/BannerAccount/BannerAccount.mjs +23 -23
  3. package/dist/teacher/home/components/Carousel1Account/Carousel1Account.d.ts +4 -4
  4. package/dist/teacher/home/components/Carousel1Account/Carousel1Account.mjs +12 -12
  5. package/dist/teacher/home/components/Carousel2Account/Carousel2Account.d.ts +4 -4
  6. package/dist/teacher/home/components/Carousel2Account/Carousel2Account.mjs +30 -30
  7. package/dist/teacher/home/components/TextAccount/TextAccount.d.ts +4 -4
  8. package/dist/teacher/home/components/TextAccount/TextAccount.mjs +16 -16
  9. package/dist/teacher/profile/components/ProfileSummary/ProfileSummary.d.ts +3 -2
  10. package/dist/teacher/profile/components/ProfileSummary/ProfileSummary.mjs +109 -78
  11. package/package.json +1 -1
package/dist/teacher/home/components/BannerAccount/BannerAccount.d.ts CHANGED
@@ -1,13 +1,13 @@
1
1
  import { SyntheticEvent } from 'react';
2
- import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
3
2
  import { ImageProps } from '../../../../shared/components/Image';
3
+ import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
4
4
  import { BannerProps } from '..';
5
- export interface BannerAccountProps extends Omit<FlexboxProps, 'title'> {
6
- id: string;
5
+ export interface BannerAccountProps extends Omit<FlexboxProps, 'title' | 'id'> {
6
+ id: number;
7
7
  banners: Array<BannerProps & {
8
8
  image?: string;
9
9
  }>;
10
- onClickBanner?: (url: string, e: SyntheticEvent) => void;
10
+ onClickBanner?: (url: string, bannerId: number, e: SyntheticEvent) => void;
11
11
  imageProps?: Partial<ImageProps>;
12
12
  }
13
13
  declare function BannerAccount({ id, banners, onClickBanner, imageProps, ...props }: BannerAccountProps): import("@emotion/react/jsx-runtime").JSX.Element;
package/dist/teacher/home/components/BannerAccount/BannerAccount.mjs CHANGED
@@ -1,5 +1,5 @@
1
- import { jsxs as a, jsx as e } from "react/jsx-runtime";
2
- import t from "@dotss/ui/Flexbox";
1
+ import { jsxs as c, jsx as i } from "react/jsx-runtime";
2
+ import n from "@dotss/ui/Flexbox";
3
3
  import b from "@dotss/ui/Typography";
4
4
  import { useTheme as f } from "@emotion/react";
5
5
  import g from "../../../../shared/components/Image/Image.mjs";
@@ -7,11 +7,11 @@ import "@dotss/ui";
7
7
  import "@dotss/ui/core/useTheme";
8
8
  import S from "../../../../shared/components/Swiper/Swiper.mjs";
9
9
  import w from "../../../../shared/components/Swiper/SwiperBlock/SwiperBlock.mjs";
10
- function I({ id: o, banners: c, onClickBanner: n, imageProps: l, ...d }) {
11
- const { palette: p } = f(), h = (i) => (r) => {
12
- n && typeof n == "function" && (r.stopPropagation(), r.preventDefault(), n(i, r));
13
- }, m = ({ page: i, totalPages: r }) => r <= 1 ? null : /* @__PURE__ */ e(
14
- t,
10
+ function I({ id: a, banners: l, onClickBanner: o, imageProps: d, ...p }) {
11
+ const { palette: h } = f(), m = (e, r) => (t) => {
12
+ o && typeof o == "function" && (t.stopPropagation(), t.preventDefault(), o(e, r, t));
13
+ }, s = ({ page: e, totalPages: r }) => r <= 1 ? null : /* @__PURE__ */ i(
14
+ n,
15
15
  {
16
16
  alignItems: "center",
17
17
  justifyContent: "center",
@@ -26,9 +26,9 @@ function I({ id: o, banners: c, onClickBanner: n, imageProps: l, ...d }) {
26
26
  minWidth: 36,
27
27
  minHeight: 20,
28
28
  borderRadius: 24,
29
- backgroundColor: p.etc.dimmed02
29
+ backgroundColor: h.etc.dimmed02
30
30
  },
31
- children: /* @__PURE__ */ a(
31
+ children: /* @__PURE__ */ c(
32
32
  b,
33
33
  {
34
34
  tag: "p",
@@ -39,9 +39,9 @@ function I({ id: o, banners: c, onClickBanner: n, imageProps: l, ...d }) {
39
39
  fontWeight: 700
40
40
  }
41
41
  },
42
- "aria-label": `${r} 중 ${i + 1}`,
42
+ "aria-label": `${r} 중 ${e + 1}`,
43
43
  children: [
44
- /* @__PURE__ */ e("span", { children: i + 1 }),
44
+ /* @__PURE__ */ i("span", { children: e + 1 }),
45
45
  "/",
46
46
  r
47
47
  ]
@@ -49,27 +49,27 @@ function I({ id: o, banners: c, onClickBanner: n, imageProps: l, ...d }) {
49
49
  )
50
50
  }
51
51
  );
52
- return /* @__PURE__ */ a(t, { inlineCSS: { width: "100%" }, ...d, children: [
53
- /* @__PURE__ */ e(t, { id: `tictoccroc-banner-${o}`, visuallyHidden: !0, children: "배너" }),
54
- /* @__PURE__ */ e(
52
+ return /* @__PURE__ */ c(n, { inlineCSS: { width: "100%" }, ...p, children: [
53
+ /* @__PURE__ */ i(n, { id: `tictoccroc-banner-${a}`, visuallyHidden: !0, children: "배너" }),
54
+ /* @__PURE__ */ i(
55
55
  S,
56
56
  {
57
- renderPagination: m,
57
+ renderPagination: s,
58
58
  loop: !0,
59
59
  inlineCSS: { borderRadius: 12, overflow: "hidden" },
60
- "aria-describedby": `tictoccroc-banner-${o}`,
61
- children: c.map(({ id: i, url: r, image: s }, u) => /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(
62
- t,
60
+ "aria-describedby": `tictoccroc-banner-${a}`,
61
+ children: l.map(({ id: e, url: r, image: t }, u) => /* @__PURE__ */ i(w, { children: /* @__PURE__ */ i(
62
+ n,
63
63
  {
64
64
  tag: "a",
65
65
  href: r,
66
66
  draggable: !1,
67
- onClick: h(r),
67
+ onClick: m(r, e),
68
68
  inlineCSS: { width: "100%" },
69
- children: /* @__PURE__ */ e(
69
+ children: /* @__PURE__ */ i(
70
70
  g,
71
71
  {
72
- src: s || "",
72
+ src: t || "",
73
73
  alt: `배너 ${u + 1}`,
74
74
  width: 328,
75
75
  height: 100,
@@ -79,11 +79,11 @@ function I({ id: o, banners: c, onClickBanner: n, imageProps: l, ...d }) {
79
79
  withIntrinsicRatio: !0,
80
80
  wrapperProps: { inlineCSS: { width: "100%" } },
81
81
  style: { width: "100%", objectFit: "cover" },
82
- ...l
82
+ ...d
83
83
  }
84
84
  )
85
85
  }
86
- ) }, `tictoccroc-banner-account-${i}`))
86
+ ) }, `tictoccroc-banner-account-${e}`))
87
87
  }
88
88
  )
89
89
  ] });
package/dist/teacher/home/components/Carousel1Account/Carousel1Account.d.ts CHANGED
@@ -1,14 +1,14 @@
1
1
  import { ReactNode, SyntheticEvent } from 'react';
2
- import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
3
2
  import { ImageProps } from '../../../../shared/components/Image';
3
+ import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
4
4
  import { BannerProps } from '..';
5
- export interface Carousel1AccountProps extends Omit<FlexboxProps, 'title'> {
6
- id: string;
5
+ export interface Carousel1AccountProps extends Omit<FlexboxProps, 'title' | 'id'> {
6
+ id: number;
7
7
  title: ReactNode;
8
8
  banners: Array<BannerProps & {
9
9
  image?: string;
10
10
  }>;
11
- onClickBanner?: (url: string, e: SyntheticEvent) => void;
11
+ onClickBanner?: (url: string, bannerId: number, e: SyntheticEvent) => void;
12
12
  imageProps?: Partial<ImageProps>;
13
13
  }
14
14
  declare function Carousel1Account({ id, title, banners, onClickBanner, imageProps, ...props }: Carousel1AccountProps): import("@emotion/react/jsx-runtime").JSX.Element;
package/dist/teacher/home/components/Carousel1Account/Carousel1Account.mjs CHANGED
@@ -10,12 +10,12 @@ function D({
10
10
  id: p,
11
11
  title: d,
12
12
  banners: m,
13
- onClickBanner: t,
13
+ onClickBanner: i,
14
14
  imageProps: s,
15
15
  ...h
16
16
  }) {
17
- const { spacing: a } = b(), u = (i) => (e) => {
18
- t && typeof t == "function" && (e.stopPropagation(), e.preventDefault(), t(i, e));
17
+ const { spacing: o } = b(), u = (t, a) => (e) => {
18
+ i && typeof i == "function" && (e.stopPropagation(), e.preventDefault(), i(t, a, e));
19
19
  };
20
20
  return /* @__PURE__ */ r(f, { children: /* @__PURE__ */ n(l, { flexDirection: "column", inlineCSS: { width: "100%" }, ...h, children: [
21
21
  /* @__PURE__ */ r(
@@ -26,22 +26,22 @@ function D({
26
26
  inlineCSS: {
27
27
  whiteSpace: "pre-wrap",
28
28
  wordBreak: "keep-all",
29
- paddingLeft: a.content(4),
30
- paddingRight: a.content(4),
31
- marginBottom: a.content(3)
29
+ paddingLeft: o.content(4),
30
+ paddingRight: o.content(4),
31
+ marginBottom: o.content(3)
32
32
  },
33
33
  children: d
34
34
  }
35
35
  ),
36
- /* @__PURE__ */ r(C, { rowCount: 2, step: 1, spacing: 5, children: m.map(({ id: i, title: e, url: o, image: g }) => /* @__PURE__ */ r(S, { children: /* @__PURE__ */ n(
36
+ /* @__PURE__ */ r(C, { rowCount: 2, step: 1, spacing: 5, children: m.map(({ id: t, title: a, url: e, image: g }) => /* @__PURE__ */ r(S, { children: /* @__PURE__ */ n(
37
37
  l,
38
38
  {
39
39
  tag: "a",
40
- href: o,
40
+ href: e,
41
41
  alignItems: "center",
42
42
  gap: 4,
43
43
  draggable: !1,
44
- onClick: u(o),
44
+ onClick: u(e, t),
45
45
  inlineCSS: { width: 264 },
46
46
  children: [
47
47
  /* @__PURE__ */ r(
@@ -50,7 +50,7 @@ function D({
50
50
  src: g || "",
51
51
  width: 140,
52
52
  height: 98,
53
- alt: `${e} 이미지`,
53
+ alt: `${a} 이미지`,
54
54
  "aria-hidden": !0,
55
55
  draggable: !1,
56
56
  borderRadius: 12,
@@ -60,10 +60,10 @@ function D({
60
60
  ...s
61
61
  }
62
62
  ),
63
- /* @__PURE__ */ r(c, { tag: "p", variant: "b2M", lineClamp: 2, children: e })
63
+ /* @__PURE__ */ r(c, { tag: "p", variant: "b2M", lineClamp: 2, children: a })
64
64
  ]
65
65
  }
66
- ) }, `tictoccroc-carousel1-account-${i}`)) })
66
+ ) }, `tictoccroc-carousel1-account-${t}`)) })
67
67
  ] }) });
68
68
  }
69
69
  export {
package/dist/teacher/home/components/Carousel2Account/Carousel2Account.d.ts CHANGED
@@ -1,15 +1,15 @@
1
1
  import { ReactNode, SyntheticEvent } from 'react';
2
- import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
3
2
  import { ImageProps } from '../../../../shared/components/Image';
3
+ import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
4
4
  import { BannerProps } from '..';
5
- export interface Carousel2AccountProps extends Omit<FlexboxProps, 'title'> {
6
- id: string;
5
+ export interface Carousel2AccountProps extends Omit<FlexboxProps, 'title' | 'id'> {
6
+ id: number;
7
7
  title: ReactNode;
8
8
  banners: Array<BannerProps & {
9
9
  image?: string;
10
10
  subTitle?: ReactNode;
11
11
  }>;
12
- onClickBanner?: (url: string, e: SyntheticEvent) => void;
12
+ onClickBanner?: (url: string, bannerId: number, e: SyntheticEvent) => void;
13
13
  bannerWidth?: number;
14
14
  imageProps?: Partial<ImageProps>;
15
15
  }
package/dist/teacher/home/components/Carousel2Account/Carousel2Account.mjs CHANGED
@@ -1,72 +1,72 @@
1
- import { jsxs as a, jsx as r } from "react/jsx-runtime";
1
+ import { jsxs as n, jsx as e } from "react/jsx-runtime";
2
2
  import b from "@dotss/ui/core/useTheme";
3
- import n from "@dotss/ui/Flexbox";
4
- import l from "@dotss/ui/Typography";
3
+ import l from "@dotss/ui/Flexbox";
4
+ import c from "@dotss/ui/Typography";
5
5
  import C from "../../../../shared/components/Carousel/Carousel.mjs";
6
6
  import x from "../../../../shared/components/Carousel/CarouselSlide/CarouselSlide.mjs";
7
7
  import S from "../../../../shared/components/Image/Image.mjs";
8
8
  import "@dotss/ui";
9
9
  function R({
10
- id: p,
11
- title: d,
12
- banners: m,
13
- onClickBanner: t,
14
- imageProps: s,
15
- ...u
10
+ id: d,
11
+ title: m,
12
+ banners: s,
13
+ onClickBanner: o,
14
+ imageProps: u,
15
+ ...h
16
16
  }) {
17
- const { spacing: i } = b(), h = (o) => (e) => {
18
- t && typeof t == "function" && (e.stopPropagation(), e.preventDefault(), t(o, e));
17
+ const { spacing: a } = b(), g = (t, i) => (r) => {
18
+ o && typeof o == "function" && (r.stopPropagation(), r.preventDefault(), o(t, i, r));
19
19
  };
20
- return /* @__PURE__ */ a(n, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, ...u, children: [
21
- /* @__PURE__ */ r(
22
- l,
20
+ return /* @__PURE__ */ n(l, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, ...h, children: [
21
+ /* @__PURE__ */ e(
22
+ c,
23
23
  {
24
- id: `banner-account-carousel2-${p}`,
24
+ id: `banner-account-carousel2-${d}`,
25
25
  variant: "h2B",
26
26
  inlineCSS: {
27
27
  whiteSpace: "pre-wrap",
28
28
  wordBreak: "keep-all",
29
- paddingLeft: i.content(4),
30
- paddingRight: i.content(4),
31
- marginBottom: i.content(4)
29
+ paddingLeft: a.content(4),
30
+ paddingRight: a.content(4),
31
+ marginBottom: a.content(4)
32
32
  },
33
- children: d
33
+ children: m
34
34
  }
35
35
  ),
36
- /* @__PURE__ */ r(C, { rowCount: 1, step: 1, spacing: 3, children: m.map(({ id: o, title: e, subTitle: g, url: c, image: f }) => /* @__PURE__ */ r(x, { children: /* @__PURE__ */ a(
37
- n,
36
+ /* @__PURE__ */ e(C, { rowCount: 1, step: 1, spacing: 3, children: s.map(({ id: t, title: i, subTitle: r, url: p, image: f }) => /* @__PURE__ */ e(x, { children: /* @__PURE__ */ n(
37
+ l,
38
38
  {
39
39
  tag: "a",
40
- href: c,
40
+ href: p,
41
41
  flexDirection: "column",
42
42
  gap: 3,
43
43
  draggable: !1,
44
- onClick: h(c),
44
+ onClick: g(p, t),
45
45
  inlineCSS: { width: 240 },
46
46
  children: [
47
- /* @__PURE__ */ r(
47
+ /* @__PURE__ */ e(
48
48
  S,
49
49
  {
50
50
  src: f || "",
51
51
  width: 240,
52
52
  height: 168,
53
- alt: `${e} 이미지`,
53
+ alt: `${i} 이미지`,
54
54
  "aria-hidden": !0,
55
55
  draggable: !1,
56
56
  borderRadius: 12,
57
57
  enableFallback: !0,
58
58
  enableErrorFallback: !0,
59
59
  style: { objectFit: "cover" },
60
- ...s
60
+ ...u
61
61
  }
62
62
  ),
63
- /* @__PURE__ */ a(n, { flexDirection: "column", gap: 1, children: [
64
- /* @__PURE__ */ r(l, { tag: "p", variant: "h4B", lineClamp: 1, children: e }),
65
- /* @__PURE__ */ r(l, { tag: "p", variant: "b4R", lineClamp: 1, color: "grey.70", children: g })
63
+ /* @__PURE__ */ n(l, { flexDirection: "column", gap: 1, children: [
64
+ /* @__PURE__ */ e(c, { tag: "p", variant: "h4B", lineClamp: 1, children: i }),
65
+ /* @__PURE__ */ e(c, { tag: "p", variant: "b4R", lineClamp: 1, color: "grey.70", children: r })
66
66
  ] })
67
67
  ]
68
68
  }
69
- ) }, `tictoccroc-carousel2-account-${o}`)) })
69
+ ) }, `tictoccroc-carousel2-account-${t}`)) })
70
70
  ] });
71
71
  }
72
72
  export {
package/dist/teacher/home/components/TextAccount/TextAccount.d.ts CHANGED
@@ -1,14 +1,14 @@
1
1
  import { ReactNode, SyntheticEvent } from 'react';
2
- import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
3
2
  import { ImageProps } from '../../../../shared/components/Image';
3
+ import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
4
4
  import { BannerProps } from '..';
5
- export interface TextAccountProps extends Omit<FlexboxProps, 'title'> {
6
- id: string;
5
+ export interface TextAccountProps extends Omit<FlexboxProps, 'title' | 'id'> {
6
+ id: number;
7
7
  title: ReactNode;
8
8
  banners: Array<BannerProps & {
9
9
  image?: string;
10
10
  }>;
11
- onClickBanner?: (url: string, e: SyntheticEvent) => void;
11
+ onClickBanner?: (url: string, bannerId: number, e: SyntheticEvent) => void;
12
12
  imageProps?: Partial<ImageProps>;
13
13
  }
14
14
  declare function TextAccount({ id, title, banners, onClickBanner, imageProps, ...props }: TextAccountProps): import("@emotion/react/jsx-runtime").JSX.Element;
package/dist/teacher/home/components/TextAccount/TextAccount.mjs CHANGED
@@ -7,37 +7,37 @@ import h from "@dotss/ui/Typography";
7
7
  import C from "../../../../shared/components/Image/Image.mjs";
8
8
  import "@dotss/ui";
9
9
  function P({
10
- id: a,
10
+ id: c,
11
11
  title: s,
12
12
  banners: m,
13
- onClickBanner: i,
13
+ onClickBanner: l,
14
14
  imageProps: g,
15
15
  ...f
16
16
  }) {
17
- const { spacing: o, palette: c } = S(), { isHoverPossible: u } = x(), b = (l) => (t) => {
18
- i && typeof i == "function" && (t.stopPropagation(), t.preventDefault(), i(l, t));
17
+ const { spacing: a, palette: p } = S(), { isHoverPossible: u } = x(), b = (o, i) => (t) => {
18
+ l && typeof l == "function" && (t.stopPropagation(), t.preventDefault(), l(o, i, t));
19
19
  };
20
20
  return /* @__PURE__ */ d(r, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, ...f, children: [
21
21
  /* @__PURE__ */ e(
22
22
  h,
23
23
  {
24
- id: `banner-account-text-${a}`,
24
+ id: `banner-account-text-${c}`,
25
25
  variant: "h2B",
26
26
  inlineCSS: {
27
27
  whiteSpace: "pre-wrap",
28
28
  wordBreak: "keep-all",
29
- paddingLeft: o.content(4),
30
- paddingRight: o.content(4),
31
- marginBottom: o.content(2)
29
+ paddingLeft: a.content(4),
30
+ paddingRight: a.content(4),
31
+ marginBottom: a.content(2)
32
32
  },
33
33
  children: s
34
34
  }
35
35
  ),
36
- /* @__PURE__ */ e(r, { tag: "ul", flexDirection: "column", "aria-labelledby": `banner-account-text-${a}`, children: m.map(({ id: l, title: t, url: p, image: n }) => /* @__PURE__ */ e(r, { tag: "li", alignItems: "center", children: /* @__PURE__ */ d(
36
+ /* @__PURE__ */ e(r, { tag: "ul", flexDirection: "column", "aria-labelledby": `banner-account-text-${c}`, children: m.map(({ id: o, title: i, url: t, image: n }) => /* @__PURE__ */ e(r, { tag: "li", alignItems: "center", children: /* @__PURE__ */ d(
37
37
  r,
38
38
  {
39
39
  tag: "a",
40
- href: p,
40
+ href: t,
41
41
  pt: n ? 3 : 4,
42
42
  pl: 4,
43
43
  pb: n ? 3 : 4,
@@ -45,15 +45,15 @@ function P({
45
45
  gap: 3,
46
46
  alignItems: "center",
47
47
  draggable: !1,
48
- onClick: b(p),
48
+ onClick: b(t, o),
49
49
  inlineCSS: {
50
50
  width: "100%",
51
51
  "&:focus-within": {
52
- backgroundColor: c.grey[10]
52
+ backgroundColor: p.grey[10]
53
53
  },
54
54
  ...u ? {
55
55
  "&:hover": {
56
- backgroundColor: c.grey[10]
56
+ backgroundColor: p.grey[10]
57
57
  }
58
58
  } : {}
59
59
  },
@@ -72,7 +72,7 @@ function P({
72
72
  width: 100,
73
73
  height: 70,
74
74
  src: n,
75
- alt: `${t} 이미지`,
75
+ alt: `${i} 이미지`,
76
76
  draggable: !1,
77
77
  enableFallback: !0,
78
78
  enableErrorFallback: !0,
@@ -90,7 +90,7 @@ function P({
90
90
  inlineCSS: {
91
91
  flexGrow: 1
92
92
  },
93
- children: t
93
+ children: i
94
94
  }
95
95
  ),
96
96
  /* @__PURE__ */ e(
@@ -104,7 +104,7 @@ function P({
104
104
  )
105
105
  ]
106
106
  }
107
- ) }, `tictoccroc-story-${l}`)) })
107
+ ) }, `tictoccroc-story-${o}`)) })
108
108
  ] });
109
109
  }
110
110
  export {
package/dist/teacher/profile/components/ProfileSummary/ProfileSummary.d.ts CHANGED
@@ -5,6 +5,7 @@ export interface ProfileSummaryProps extends FlexboxProps {
5
5
  src: string;
6
6
  placeholder?: ReactNode;
7
7
  status: 'VERIFIED' | 'PENDING' | 'REJECTED' | 'DELETED';
8
+ adornment?: ReactNode;
8
9
  onClick?: (e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>) => void;
9
10
  };
10
11
  introduction: {
@@ -14,7 +15,7 @@ export interface ProfileSummaryProps extends FlexboxProps {
14
15
  status: 'VERIFIED' | 'PENDING' | 'REJECTED' | 'DELETED';
15
16
  };
16
17
  name: string;
17
- adronment?: ReactNode;
18
+ adornment?: ReactNode;
18
19
  grade?: string;
19
20
  activeHours: number;
20
21
  rating: number;
@@ -22,5 +23,5 @@ export interface ProfileSummaryProps extends FlexboxProps {
22
23
  lastActiveAt?: string;
23
24
  action?: ReactNode;
24
25
  }
25
- declare function ProfileSummary({ avatar, introduction, name, grade, activeHours, rating, reviewCount, adronment, lastActiveAt, action }: ProfileSummaryProps): import("@emotion/react/jsx-runtime").JSX.Element;
26
+ declare function ProfileSummary({ avatar, introduction, name, grade, activeHours, rating, reviewCount, adornment, lastActiveAt, action }: ProfileSummaryProps): import("@emotion/react/jsx-runtime").JSX.Element;
26
27
  export default ProfileSummary;
package/dist/teacher/profile/components/ProfileSummary/ProfileSummary.mjs CHANGED
@@ -1,36 +1,36 @@
1
- import { jsxs as n, jsx as e, Fragment as C } from "react/jsx-runtime";
2
- import { useState as R, useRef as F, useEffect as J } from "react";
1
+ import { jsxs as i, jsx as e, Fragment as C } from "react/jsx-runtime";
2
+ import { useState as I, useRef as F, useEffect as J } from "react";
3
3
  import { Flexbox as r, Typography as t, Icon as d, Label as B, Button as A } from "@dotss/ui";
4
4
  import G from "@dotss/ui/core/useTheme";
5
5
  import K from "dayjs";
6
6
  import O from "../../../../shared/components/Image/Image.mjs";
7
7
  import { getLastActiveText as W } from "./ProfileSummary.utils.mjs";
8
8
  function Y({
9
- avatar: i,
9
+ avatar: n,
10
10
  introduction: l,
11
11
  name: u,
12
- grade: f,
13
- activeHours: S = 0,
12
+ grade: S,
13
+ activeHours: f = 0,
14
14
  rating: h = 0,
15
15
  reviewCount: p = 0,
16
- adronment: L,
16
+ adornment: L,
17
17
  lastActiveAt: x,
18
- action: v
18
+ action: k
19
19
  }) {
20
20
  const {
21
- palette: { background: y, brand: E, etc: k },
21
+ palette: { background: y, brand: w, etc: D },
22
22
  spacing: a
23
- } = 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) => {
23
+ } = G(), [m, v] = I(!1), [z, T] = I(!1), b = F(null), E = f > 0 || p > 0, c = x ? K(x) : null, R = c ? W(c) : null, j = (o) => {
24
24
  var s, g;
25
25
  switch (o.key) {
26
26
  case "Enter":
27
- o.preventDefault(), (s = i.onClick) == null || s.call(i, o);
27
+ o.preventDefault(), (s = n.onClick) == null || s.call(n, o);
28
28
  break;
29
29
  case " ":
30
- o.preventDefault(), (g = i.onClick) == null || g.call(i, o);
30
+ o.preventDefault(), (g = n.onClick) == null || g.call(n, o);
31
31
  break;
32
32
  }
33
- }, M = () => D((o) => !o);
33
+ }, M = () => v((o) => !o);
34
34
  return J(() => {
35
35
  const o = () => {
36
36
  if (!b.current) return;
@@ -40,7 +40,7 @@ function Y({
40
40
  return o(), window.addEventListener("resize", o), () => {
41
41
  window.removeEventListener("resize", o);
42
42
  };
43
- }, [l.aboutMe]), /* @__PURE__ */ n(
43
+ }, [l.aboutMe]), /* @__PURE__ */ i(
44
44
  r,
45
45
  {
46
46
  tag: "section",
@@ -51,36 +51,30 @@ function Y({
51
51
  width: "100%"
52
52
  },
53
53
  children: [
54
- /* @__PURE__ */ n(r, { alignItems: "center", gap: 4, children: [
55
- /* @__PURE__ */ n(r, { flexDirection: "column", gap: 2, alignItems: "center", justifyContent: "center", children: [
56
- /* @__PURE__ */ n(
54
+ /* @__PURE__ */ i(r, { alignItems: "center", gap: 4, children: [
55
+ /* @__PURE__ */ i(r, { flexDirection: "column", gap: 2, alignItems: "center", justifyContent: "center", children: [
56
+ /* @__PURE__ */ i(
57
57
  r,
58
58
  {
59
- role: typeof i.onClick == "function" ? "button" : void 0,
60
- tabIndex: typeof i.onClick == "function" ? 0 : -1,
59
+ role: typeof n.onClick == "function" ? "button" : void 0,
60
+ tabIndex: typeof n.onClick == "function" ? 0 : -1,
61
61
  onKeyDown: j,
62
- onClick: i.onClick,
62
+ onClick: n.onClick,
63
63
  alignItems: "center",
64
64
  justifyContent: "center",
65
65
  flexDirection: "column",
66
66
  gap: 2,
67
67
  inlineCSS: {
68
68
  position: "relative",
69
- border: "1px solid rgba(0, 0, 0, 0.05)",
70
- borderRadius: 100,
71
- width: 88,
72
- height: 88,
73
- overflow: "hidden",
74
- backgroundColor: y.primary,
75
- cursor: typeof i.onClick == "function" ? "pointer" : void 0
69
+ cursor: typeof n.onClick == "function" ? "pointer" : void 0
76
70
  },
77
71
  children: [
78
- i.src && /* @__PURE__ */ e(
72
+ n.src && /* @__PURE__ */ e(
79
73
  O,
80
74
  {
81
75
  width: 88,
82
76
  height: 88,
83
- src: i.src,
77
+ src: n.src,
84
78
  alt: `${u} 선생님 프로필 이미지`,
85
79
  fit: "cover",
86
80
  borderRadius: 100,
@@ -90,13 +84,20 @@ function Y({
90
84
  }
91
85
  }
92
86
  ),
93
- !i.src && !i.placeholder && /* @__PURE__ */ n(
87
+ n.adornment,
88
+ !n.src && !n.placeholder && /* @__PURE__ */ i(
94
89
  r,
95
90
  {
96
91
  role: "status",
97
92
  flexDirection: "column",
98
93
  alignItems: "center",
99
94
  justifyContent: "center",
95
+ inlineCSS: {
96
+ width: 88,
97
+ height: 88,
98
+ backgroundColor: y.primary,
99
+ borderRadius: 100
100
+ },
100
101
  children: [
101
102
  /* @__PURE__ */ e(
102
103
  t,
@@ -112,8 +113,23 @@ function Y({
112
113
  ]
113
114
  }
114
115
  ),
115
- !i.src && i.placeholder && i.placeholder,
116
- i.status === "REJECTED" && /* @__PURE__ */ n(C, { children: [
116
+ !n.src && n.placeholder && n.placeholder,
117
+ /* @__PURE__ */ e(
118
+ r,
119
+ {
120
+ "aria-hidden": !0,
121
+ inlineCSS: {
122
+ position: "absolute",
123
+ top: 0,
124
+ left: 0,
125
+ width: "100%",
126
+ height: "100%",
127
+ border: "1px solid rgba(0, 0, 0, 0.05)",
128
+ borderRadius: 100
129
+ }
130
+ }
131
+ ),
132
+ n.status === "REJECTED" && /* @__PURE__ */ i(C, { children: [
117
133
  /* @__PURE__ */ e(
118
134
  r,
119
135
  {
@@ -126,6 +142,7 @@ function Y({
126
142
  width: "100%",
127
143
  height: "100%",
128
144
  opacity: 0.8,
145
+ borderRadius: 100,
129
146
  backgroundColor: y.primary,
130
147
  zIndex: 1
131
148
  }
@@ -158,16 +175,16 @@ function Y({
158
175
  variant: "c3M",
159
176
  color: "grey.50",
160
177
  inlineCSS: {
161
- visibility: I ? void 0 : "hidden"
178
+ visibility: R ? void 0 : "hidden"
162
179
  },
163
- children: I || "활동 정보 없음"
180
+ children: R || "활동 정보 없음"
164
181
  }
165
182
  )
166
183
  ] }),
167
- /* @__PURE__ */ n(r, { flexDirection: "column", justifyContent: "flex-start", gap: 3, flexGrow: 1, children: [
168
- /* @__PURE__ */ n(r, { alignItems: "center", gap: 2, flexWrap: "wrap", children: [
169
- f && /* @__PURE__ */ e(B, { variant: "outlined", size: "small", color: "blue", "aria-label": `${f} 등급`, children: f }),
170
- /* @__PURE__ */ n(
184
+ /* @__PURE__ */ i(r, { flexDirection: "column", justifyContent: "flex-start", gap: 3, flexGrow: 1, children: [
185
+ /* @__PURE__ */ i(r, { alignItems: "center", gap: 2, flexWrap: "wrap", children: [
186
+ S && /* @__PURE__ */ e(B, { variant: "outlined", size: "small", color: "blue", "aria-label": `${S} 등급`, children: S }),
187
+ /* @__PURE__ */ i(
171
188
  t,
172
189
  {
173
190
  tag: "p",
@@ -197,7 +214,7 @@ function Y({
197
214
  }
198
215
  )
199
216
  ] }),
200
- /* @__PURE__ */ n(
217
+ /* @__PURE__ */ i(
201
218
  r,
202
219
  {
203
220
  pl: 4,
@@ -207,49 +224,63 @@ function Y({
207
224
  justifyContent: "space-around",
208
225
  alignItems: "center",
209
226
  gap: 5,
210
- "aria-hidden": !w,
227
+ "aria-hidden": !E,
211
228
  inlineCSS: {
212
229
  borderRadius: 8,
213
230
  backgroundColor: y.primary,
214
- visibility: w ? void 0 : "hidden"
231
+ visibility: E ? void 0 : "hidden"
215
232
  },
216
233
  children: [
217
- /* @__PURE__ */ n(r, { alignItems: "center", role: "group", "aria-label": `누적 수업 ${S}시간`, children: [
218
- /* @__PURE__ */ e(d, { name: "TimeLine", size: "xSmall", color: "grey.70" }),
219
- /* @__PURE__ */ e(
220
- t,
221
- {
222
- tag: "p",
223
- variant: "h4B",
224
- inlineCSS: {
225
- marginLeft: a.content(1),
226
- color: E.primary.text
227
- },
228
- children: S.toLocaleString()
229
- }
230
- ),
231
- /* @__PURE__ */ e(
232
- t,
233
- {
234
- tag: "span",
235
- variant: "b5R",
236
- color: "grey.70",
237
- inlineCSS: {
238
- marginLeft: a.content(0.5)
239
- },
240
- children: "시간"
241
- }
242
- )
243
- ] }),
244
- /* @__PURE__ */ n(
234
+ /* @__PURE__ */ i(
235
+ r,
236
+ {
237
+ alignItems: "center",
238
+ role: "group",
239
+ "aria-label": `누적 수업 ${f}시간`,
240
+ inlineCSS: {
241
+ whiteSpace: "nowrap"
242
+ },
243
+ children: [
244
+ /* @__PURE__ */ e(d, { name: "TimeLine", size: "xSmall", color: "grey.70" }),
245
+ /* @__PURE__ */ e(
246
+ t,
247
+ {
248
+ tag: "p",
249
+ variant: "h4B",
250
+ inlineCSS: {
251
+ marginLeft: a.content(1),
252
+ color: w.primary.text
253
+ },
254
+ children: f.toLocaleString()
255
+ }
256
+ ),
257
+ /* @__PURE__ */ e(
258
+ t,
259
+ {
260
+ tag: "span",
261
+ variant: "b5R",
262
+ color: "grey.70",
263
+ inlineCSS: {
264
+ marginLeft: a.content(0.5)
265
+ },
266
+ children: "시간"
267
+ }
268
+ )
269
+ ]
270
+ }
271
+ ),
272
+ /* @__PURE__ */ i(
245
273
  r,
246
274
  {
247
275
  alignItems: "center",
248
276
  role: "group",
249
277
  "aria-label": h > 0 ? `평점 ${h}, 리뷰 ${p}개` : `평점 집계중, 리뷰 ${p}개`,
278
+ inlineCSS: {
279
+ whiteSpace: "nowrap"
280
+ },
250
281
  children: [
251
282
  /* @__PURE__ */ e(d, { name: "ReviewLine", size: "xSmall", color: "grey.70" }),
252
- h > 0 ? /* @__PURE__ */ n(C, { children: [
283
+ h > 0 ? /* @__PURE__ */ i(C, { children: [
253
284
  /* @__PURE__ */ e(
254
285
  t,
255
286
  {
@@ -257,12 +288,12 @@ function Y({
257
288
  variant: "h4B",
258
289
  inlineCSS: {
259
290
  marginLeft: a.content(1),
260
- color: E.primary.text
291
+ color: w.primary.text
261
292
  },
262
293
  children: h.toLocaleString()
263
294
  }
264
295
  ),
265
- /* @__PURE__ */ n(
296
+ /* @__PURE__ */ i(
266
297
  t,
267
298
  {
268
299
  tag: "span",
@@ -298,7 +329,7 @@ function Y({
298
329
  )
299
330
  ] })
300
331
  ] }),
301
- /* @__PURE__ */ n(
332
+ /* @__PURE__ */ i(
302
333
  r,
303
334
  {
304
335
  flexDirection: "column",
@@ -306,7 +337,7 @@ function Y({
306
337
  position: "relative"
307
338
  },
308
339
  children: [
309
- (!l.summary || !l.aboutMe) && !l.placeholder && /* @__PURE__ */ n(
340
+ (!l.summary || !l.aboutMe) && !l.placeholder && /* @__PURE__ */ i(
310
341
  t,
311
342
  {
312
343
  tag: "p",
@@ -315,7 +346,7 @@ function Y({
315
346
  "aria-label": "작성된 프로필 소개가 없어요.",
316
347
  inlineCSS: {
317
348
  "& > span": {
318
- color: k.red
349
+ color: D.red
319
350
  }
320
351
  },
321
352
  children: [
@@ -325,9 +356,9 @@ function Y({
325
356
  }
326
357
  ),
327
358
  (!l.summary || !l.aboutMe) && l.placeholder && l.placeholder,
328
- l.summary && l.aboutMe && /* @__PURE__ */ n(C, { children: [
359
+ l.summary && l.aboutMe && /* @__PURE__ */ i(C, { children: [
329
360
  l.status === "REJECTED" && /* @__PURE__ */ e(t, { role: "status", visuallyHidden: !0, children: "프로필 소개가 반려되었어요. 다시 작성해주세요." }),
330
- /* @__PURE__ */ n(
361
+ /* @__PURE__ */ i(
331
362
  t,
332
363
  {
333
364
  tag: "dl",
@@ -354,7 +385,7 @@ function Y({
354
385
  ]
355
386
  }
356
387
  ),
357
- /* @__PURE__ */ n(
388
+ /* @__PURE__ */ i(
358
389
  t,
359
390
  {
360
391
  ref: b,
@@ -393,7 +424,7 @@ function Y({
393
424
  ]
394
425
  }
395
426
  ),
396
- v
427
+ k
397
428
  ]
398
429
  }
399
430
  );
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@dotss/tictoccroc",
3
3
  "type": "module",
4
- "version": "0.0.30",
4
+ "version": "0.0.32",
5
5
  "description": "Tictoccroc shared components, hooks, utils, and APIs for Dotss",
6
6
  "main": "./dist/index.mjs",
7
7
  "module": "./dist/index.mjs",