@dotss/tictoccroc 0.0.5 → 0.0.6

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

@@ -1,28 +1,28 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { Children as p, isValidElement as S, cloneElement as j } from "react";
+import { jsxs as y, jsx as e } from "react/jsx-runtime";
+import { Children as s, isValidElement as S, cloneElement as j } from "react";
 import { Flexbox as a, Typography as E, Button as $, Icon as w } from "@dotss/ui";
 import A from "../../../../shared/components/Masonry/Masonry.mjs";
 import "../../../../shared/components/Masonry/MasonryBlock/MasonryBlock.mjs";
 import B from "./ActivityGalleryItem/ActivityGalleryItem.mjs";
 function T({
-  children: c,
+  children: p,
   onClickViewAll: o,
   action: m,
   hideHeader: l = !1,
   masonryProps: {
-    columnCount: f = 2,
-    rowCount: g = 2,
-    spacing: h = 2,
-    edgeSpacing: b = 0,
-    direction: u = "horizontal",
-    defaultContainerWidth: v = 360,
+    columnCount: c = 2,
+    rowCount: f = 2,
+    spacing: g = 2,
+    edgeSpacing: h = 0,
+    direction: b = "horizontal",
+    defaultContainerWidth: u = 360,
     defaultContainerHeight: d = 0,
-    ...x
+    ...v
   } = {},
   ...r
 }) {
-  const n = p.toArray(c).filter(S).filter((t) => t.type === B), C = n.length > 0;
-  return /* @__PURE__ */ s(
+  const n = s.toArray(p).filter(S).filter((t) => t.type === B), x = n.length > 0;
+  return /* @__PURE__ */ y(
     a,
     {
       tag: "section",
@@ -36,7 +36,7 @@ function T({
         ...r == null ? void 0 : r.inlineCSS
       },
       children: [
-        !l && /* @__PURE__ */ s(a, { alignItems: "center", justifyContent: "space-between", gap: 2, children: [
+        !l && /* @__PURE__ */ y(a, { alignItems: "center", justifyContent: "space-between", gap: 2, children: [
           /* @__PURE__ */ e(
             E,
             {
@@ -59,27 +59,26 @@ function T({
             }
           )
         ] }),
-        C && /* @__PURE__ */ e(
+        x && /* @__PURE__ */ e(
           A,
           {
-            rowCount: g,
-            columnCount: f,
-            spacing: h,
-            edgeSpacing: b,
-            direction: u,
-            defaultContainerWidth: v,
+            rowCount: f,
+            columnCount: c,
+            spacing: g,
+            edgeSpacing: h,
+            direction: b,
+            defaultContainerWidth: u,
             defaultContainerHeight: d,
             role: "group",
             "aria-label": "콘텐츠 목록",
-            ...x,
-            children: p.map(n, (t, y) => {
+            ...v,
+            children: s.map(n, (t, C) => {
               let i = t.props.type === "VIDEO" || t.props.type === "VIMEO" || t.props.type === "YOUTUBE" ? "동영상" : "사진";
               i = t.props.primary ? `대표 ${i}` : i;
-              const I = `${i} (${n.length}개 중 ${y + 1}번째)`;
+              const I = `${i} (${n.length}개 중 ${C + 1}번째)`;
               return j(t, {
                 role: "button",
                 "aria-label": I,
-                index: y,
                 ...t.props
               });
             })

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

@@ -3,7 +3,7 @@ export interface ActivityGalleryItemProps extends MasonryBlockProps {
     type: 'VIDEO' | 'VIMEO' | 'YOUTUBE' | 'IMAGE';
     primary: boolean;
     status: 'VERIFIED' | 'PENDING' | 'REJECTED' | 'DELETED';
-    index?: number;
+    id: string;
 }
-declare function ActivityGalleryItem({ children, type, primary, status, index, ...props }: ActivityGalleryItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ActivityGalleryItem({ children, type, primary, status, id, ...props }: ActivityGalleryItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default ActivityGalleryItem;

package/dist/teacher/profile/components/ActivityGallery/ActivityGalleryItem/ActivityGalleryItem.mjs

@@ -2,12 +2,12 @@ import { jsxs as r, jsx as e, Fragment as c } from "react/jsx-runtime";
 import { Label as u, Flexbox as l, Icon as m, Typography as b } from "@dotss/ui";
 import h from "@dotss/ui/core/useTheme";
 import p from "../../../../../shared/components/Masonry/MasonryBlock/MasonryBlock.mjs";
-function x({
+function g({
   children: n,
   type: i,
   primary: a = !1,
   status: s,
-  index: o = 0,
+  id: o,
   ...t
 }) {
   const {
@@ -92,5 +92,5 @@ function x({
   );
 }
 export {
-  x as default
+  g as default
 };

package/dist/teacher/profile/components/CareerSection/CareerItem/CareerItem.d.ts

@@ -1,10 +1,13 @@
 import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
-export interface CareerItemProps extends FlexboxProps {
+export interface CareerItemProps extends Omit<FlexboxProps, 'id'> {
     title: string;
     status: 'VERIFIED' | 'PENDING' | 'REJECTED' | 'DELETED';
     startDate: string;
     endDate: string | null;
     primary: boolean;
+    id: string | number;
+    regDatetime: string;
+    priority: number;
 }
-declare function CareerItem({ title, status, startDate, endDate, primary, ...props }: CareerItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function CareerItem({ title, status, startDate, endDate, primary, id, ...props }: CareerItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default CareerItem;

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

@@ -1,26 +1,26 @@
-import { jsx as i, jsxs as e, Fragment as d } from "react/jsx-runtime";
-import { useId as D } from "react";
-import { Flexbox as t, Label as j, Typography as g, Icon as h } from "@dotss/ui";
-import p from "@dotss/ui/core/useTheme";
+import { jsx as i, jsxs as e, Fragment as g } from "react/jsx-runtime";
+import { Flexbox as t, Label as D, Typography as h, Icon as d } from "@dotss/ui";
+import j from "@dotss/ui/core/useTheme";
 import { useCheckHoverPossible as E } from "@dotss/ui/hooks";
 import s from "dayjs";
-function A({
+function T({
   title: v,
   status: f,
   startDate: y,
   endDate: o,
   primary: x = !1,
+  id: b,
   ...n
 }) {
-  const b = D(), { isHoverPossible: I } = E(), {
+  const { isHoverPossible: I } = E(), {
     palette: { grey: a },
     spacing: c
-  } = p(), l = typeof n.onClick == "function", k = s(y), u = (o ? s(o) : s()).diff(k, "month"), m = Math.floor(u / 12), C = u % 12;
+  } = j(), r = typeof n.onClick == "function", k = s(y), u = (o ? s(o) : s()).diff(k, "month"), m = Math.floor(u / 12), C = u % 12;
   return /* @__PURE__ */ i("li", { children: /* @__PURE__ */ e(
     t,
     {
       role: "button",
-      tabIndex: l ? 0 : -1,
+      tabIndex: r ? 0 : -1,
       alignItems: "center",
       gap: 4,
       pt: 2,
@@ -29,20 +29,20 @@ function A({
       pr: 4,
       ml: -4,
       mr: -4,
-      onKeyDown: (r) => {
+      onKeyDown: (l) => {
         var S;
-        (r.key === "Enter" || r.key === " ") && (r.preventDefault(), r.currentTarget.click()), (S = n.onKeyDown) == null || S.call(n, r);
+        (l.key === "Enter" || l.key === " ") && (l.preventDefault(), l.currentTarget.click()), (S = n.onKeyDown) == null || S.call(n, l);
       },
       "aria-labelledby": `career-item-title-${b}`,
       ...n,
       inlineCSS: {
-        cursor: l ? "pointer" : "default",
-        ...l && {
+        cursor: r ? "pointer" : "default",
+        ...r && {
           "&:active": {
             backgroundColor: a[10]
           }
         },
-        ...l && I ? {
+        ...r && I ? {
           "&:hover": {
             backgroundColor: a[10]
           }
@@ -53,7 +53,7 @@ function A({
         /* @__PURE__ */ e(t, { flexDirection: "column", gap: 1, flexGrow: 1, children: [
           /* @__PURE__ */ e(t, { alignItems: "center", gap: 1, children: [
             x && /* @__PURE__ */ i(
-              j,
+              D,
               {
                 variant: "outlined",
                 size: "small",
@@ -64,11 +64,11 @@ function A({
                 children: "대표"
               }
             ),
-            /* @__PURE__ */ e(g, { id: `career-item-title-${b}`, tag: "p", variant: "b2M", children: [
+            /* @__PURE__ */ e(h, { id: `career-item-title-${b}`, tag: "p", variant: "b2M", children: [
               v,
               f === "VERIFIED" && // TODO 아이콘 교체 필요
               /* @__PURE__ */ i(
-                h,
+                d,
                 {
                   name: "InfoFill",
                   size: "small",
@@ -82,7 +82,7 @@ function A({
                 }
               ),
               f === "REJECTED" && /* @__PURE__ */ i(
-                h,
+                d,
                 {
                   name: "AlertFill",
                   size: "small",
@@ -97,7 +97,7 @@ function A({
               )
             ] })
           ] }),
-          /* @__PURE__ */ e(g, { tag: "p", variant: "b5R", color: "grey.50", children: [
+          /* @__PURE__ */ e(h, { tag: "p", variant: "b5R", color: "grey.50", children: [
             y,
             " ~ ",
             o ?? "현재"
@@ -105,7 +105,7 @@ function A({
         ] }),
         /* @__PURE__ */ e(t, { alignItems: "center", gap: 2, children: [
           /* @__PURE__ */ e(
-            g,
+            h,
             {
               tag: "p",
               variant: "h5R",
@@ -113,24 +113,24 @@ function A({
               noWrap: !0,
               inlineCSS: { "& strong": { color: a[100], fontWeight: 700 } },
               children: [
-                m > 0 && /* @__PURE__ */ e(d, { children: [
+                m > 0 && /* @__PURE__ */ e(g, { children: [
                   /* @__PURE__ */ i("strong", { children: m }),
                   "년"
                 ] }),
-                C > 0 && /* @__PURE__ */ e(d, { children: [
-                  m > 0 && /* @__PURE__ */ i(d, { children: " " }),
+                C > 0 && /* @__PURE__ */ e(g, { children: [
+                  m > 0 && /* @__PURE__ */ i(g, { children: " " }),
                   /* @__PURE__ */ i("strong", { children: C }),
                   "개월"
                 ] })
               ]
             }
           ),
-          /* @__PURE__ */ i(h, { name: "ChevronRightLine", size: "xSmall", color: "grey.50" })
+          r && /* @__PURE__ */ i(d, { name: "ChevronRightLine", size: "xSmall", color: "grey.50" })
         ] })
       ]
     }
   ) });
 }
 export {
-  A as default
+  T as default
 };

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

@@ -1,18 +1,19 @@
-import { jsxs as i, jsx as t, Fragment as m } from "react/jsx-runtime";
-import { useState as u, Children as b, isValidElement as O } from "react";
-import { Flexbox as r, Typography as p, Tooltip as T, Icon as f, Button as Y } from "@dotss/ui";
-import A from "@dotss/ui/core/useTheme";
-import g from "dayjs";
-import M from "./CareerItem/CareerItem.mjs";
-function G({
-  children: y,
-  action: S,
-  showTooltip: w = !1,
-  enableToggle: C = !1,
+import { jsxs as i, jsx as t, Fragment as p } from "react/jsx-runtime";
+import { useState as x, Children as F, isValidElement as O } from "react";
+import { Flexbox as r, Typography as f, Tooltip as Y, Icon as g, Button as M } from "@dotss/ui";
+import T from "@dotss/ui/core/useTheme";
+import S from "dayjs";
+import W from "./CareerItem/CareerItem.mjs";
+import { sortItemElements as z } from "../../utils/sortItems/sortItems.mjs";
+function V({
+  children: u,
+  action: y,
+  showTooltip: I = !1,
+  enableToggle: s = !1,
   ...o
 }) {
-  const { spacing: c } = A(), [I, v] = u(!1), [a, D] = u(!1), s = b.toArray(y).filter(O).filter((e) => e.type === M), j = s.length > 0, k = s.length > 3, x = s.map((e) => [e.props.startDate, e.props.endDate ?? g().format("YYYY-MM-DD")]).map(([e, n]) => [g(e), g(n)]).map(([e, n]) => n.diff(e, "month")), l = Math.floor(x.reduce((e, n) => e + n, 0) / 12), d = x.reduce((e, n) => e + n, 0) % 12, E = () => D((e) => !e), h = () => v((e) => !e), F = (e) => {
-    (e.key === "Enter" || e.key === " ") && h();
+  const { spacing: d } = T(), [b, w] = x(!1), [a, v] = x(!1), l = F.toArray(u).filter(O).filter((e) => e.type === W), D = l.length > 0, j = l.length > 3, C = l.map((e) => [e.props.startDate, e.props.endDate ?? S().format("YYYY-MM-DD")]).map(([e, n]) => [S(e), S(n)]).map(([e, n]) => n.diff(e, "month")), c = Math.floor(C.reduce((e, n) => e + n, 0) / 12), h = C.reduce((e, n) => e + n, 0) % 12, k = () => v((e) => !e), m = () => w((e) => !e), E = (e) => {
+    (e.key === "Enter" || e.key === " ") && m();
   };
   return /* @__PURE__ */ i(
     r,
@@ -45,7 +46,7 @@ function G({
                   inlineCSS: { position: "relative" },
                   children: [
                     /* @__PURE__ */ t(
-                      p,
+                      f,
                       {
                         id: "career-section-title",
                         tag: "h2",
@@ -54,17 +55,17 @@ function G({
                         children: "경력"
                       }
                     ),
-                    w && /* @__PURE__ */ t(
-                      T,
+                    I && /* @__PURE__ */ t(
+                      Y,
                       {
-                        open: I,
-                        onClose: h,
+                        open: b,
+                        onClose: m,
                         color: "secondary",
                         role: "tooltip",
                         "aria-labelledby": "career-section-tooltip",
                         "aria-describedby": "career-section-tooltip-desc",
                         body: /* @__PURE__ */ i(
-                          p,
+                          f,
                           {
                             id: "career-section-tooltip-desc",
                             tag: "p",
@@ -73,7 +74,7 @@ function G({
                             noWrap: !0,
                             inlineCSS: {
                               display: "flex",
-                              gap: c.content(1),
+                              gap: d.content(1),
                               "& svg": {
                                 width: "20px !important",
                                 height: "20px !important",
@@ -82,22 +83,22 @@ function G({
                             },
                             children: [
                               "째깍악어가 확인한 정보는",
-                              /* @__PURE__ */ t(f, { name: "InfoFill", size: "small", color: "tictoccroc-teacher.brand.green" }),
+                              /* @__PURE__ */ t(g, { name: "InfoFill", size: "small", color: "tictoccroc-teacher.brand.green" }),
                               "인증 마크가 붙어요!"
                             ]
                           }
                         ),
                         inlineCSS: {
                           "&:after": {
-                            transform: `translateX(-${100 + c.content(1)}px)`
+                            transform: `translateX(-${100 + d.content(1)}px)`
                           }
                         },
                         style: {
                           top: -8,
-                          left: `calc(50% + 100px - ${c.content(0.5)}px)`
+                          left: `calc(50% + 100px - ${d.content(0.5)}px)`
                         },
                         children: /* @__PURE__ */ t(
-                          f,
+                          g,
                           {
                             id: "career-section-tooltip",
                             role: "button",
@@ -105,8 +106,8 @@ function G({
                             name: "TooltipFill",
                             size: "small",
                             color: "grey.50",
-                            onClick: h,
-                            onKeyDown: F,
+                            onClick: m,
+                            onKeyDown: E,
                             "aria-label": "추가 정보 안내",
                             inlineCSS: {
                               cursor: "pointer"
@@ -118,32 +119,32 @@ function G({
                   ]
                 }
               ),
-              (l > 0 || d > 0) && /* @__PURE__ */ i(p, { tag: "p", variant: "h4R", inlineCSS: { "& strong": { fontWeight: 700 } }, children: [
+              (c > 0 || h > 0) && /* @__PURE__ */ i(f, { tag: "p", variant: "h4R", inlineCSS: { "& strong": { fontWeight: 700 } }, children: [
                 "총 ",
-                l > 0 && /* @__PURE__ */ i(m, { children: [
-                  /* @__PURE__ */ t("strong", { children: l }),
+                c > 0 && /* @__PURE__ */ i(p, { children: [
+                  /* @__PURE__ */ t("strong", { children: c }),
                   "년"
                 ] }),
-                d > 0 && /* @__PURE__ */ i(m, { children: [
-                  l > 0 && /* @__PURE__ */ t(m, { children: " " }),
-                  /* @__PURE__ */ t("strong", { children: d }),
+                h > 0 && /* @__PURE__ */ i(p, { children: [
+                  c > 0 && /* @__PURE__ */ t(p, { children: " " }),
+                  /* @__PURE__ */ t("strong", { children: h }),
                   "개월"
                 ] })
               ] })
             ]
           }
         ),
-        j && /* @__PURE__ */ t(
+        D && /* @__PURE__ */ t(
           r,
           {
             id: "career-section-career-items",
             tag: "ul",
             flexDirection: "column",
             inlineCSS: { width: "inherit" },
-            children: b.toArray(y).slice(0, a ? void 0 : 3)
+            children: z(l).slice(0, !s || a ? void 0 : 3)
           }
         ),
-        C && k && /* @__PURE__ */ t(
+        s && j && /* @__PURE__ */ t(
           r,
           {
             alignItems: "center",
@@ -151,13 +152,13 @@ function G({
             mt: 2,
             inlineCSS: { width: "inherit" },
             children: /* @__PURE__ */ t(
-              Y,
+              M,
               {
                 fullWidth: !0,
                 variant: "text",
                 color: "secondary",
-                endAdornment: /* @__PURE__ */ t(f, { name: a ? "ChevronUpLine" : "ChevronDownLine" }),
-                onClick: E,
+                endAdornment: /* @__PURE__ */ t(g, { name: a ? "ChevronUpLine" : "ChevronDownLine" }),
+                onClick: k,
                 "aria-controls": "career-section-career-items",
                 "aria-expanded": a,
                 children: a ? "접기" : "더 보기"
@@ -165,7 +166,7 @@ function G({
             )
           }
         ),
-        !C && S && /* @__PURE__ */ t(
+        !s && y && /* @__PURE__ */ t(
           r,
           {
             mt: 4,
@@ -173,7 +174,7 @@ function G({
             alignItems: "center",
             justifyContent: "center",
             inlineCSS: { width: "inherit" },
-            children: S
+            children: y
           }
         )
       ]
@@ -181,5 +182,5 @@ function G({
   );
 }
 export {
-  G as default
+  V as default
 };

package/dist/teacher/profile/components/CertificationSection/CertificationItem/CertificationItem.d.ts

@@ -1,8 +1,11 @@
 import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
-export interface CertificationItemProps extends FlexboxProps {
+export interface CertificationItemProps extends Omit<FlexboxProps, 'id'> {
     name: string;
     acquisitionDate: string;
     status: 'VERIFIED' | 'PENDING' | 'REJECTED' | 'DELETED';
+    id: string | number;
+    regDatetime: string;
+    priority: number;
 }
-declare function CertificationItem({ name, acquisitionDate, status, ...props }: CertificationItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function CertificationItem({ name, acquisitionDate, status, id, ...props }: CertificationItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default CertificationItem;

package/dist/teacher/profile/components/CertificationSection/CertificationItem/CertificationItem.mjs

@@ -1,18 +1,23 @@
-import { jsx as n, jsxs as l } from "react/jsx-runtime";
-import { useId as u } from "react";
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
 import { Flexbox as a, Typography as g, Icon as c } from "@dotss/ui";
 import y from "@dotss/ui/core/useTheme";
-import { useCheckHoverPossible as C } from "@dotss/ui/hooks";
-function E({ name: b, acquisitionDate: h, status: o, ...e }) {
-  const t = u(), { isHoverPossible: s } = C(), {
+import { useCheckHoverPossible as u } from "@dotss/ui/hooks";
+function D({
+  name: b,
+  acquisitionDate: h,
+  status: o,
+  id: l,
+  ...e
+}) {
+  const { isHoverPossible: s } = u(), {
     palette: { grey: m },
     spacing: d
-  } = y(), r = typeof e.onClick == "function";
-  return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ l(
+  } = y(), i = typeof e.onClick == "function";
+  return /* @__PURE__ */ t("li", { children: /* @__PURE__ */ r(
     a,
     {
       role: "button",
-      tabIndex: r ? 0 : -1,
+      tabIndex: i ? 0 : -1,
       alignItems: "center",
       gap: 1,
       pt: 2,
@@ -21,21 +26,21 @@ function E({ name: b, acquisitionDate: h, status: o, ...e }) {
       pr: 4,
       ml: -4,
       mr: -4,
-      onKeyDown: (i) => {
+      onKeyDown: (n) => {
         var f;
-        (i.key === "Enter" || i.key === " ") && (i.preventDefault(), i.currentTarget.click()), (f = e.onKeyDown) == null || f.call(e, i);
+        (n.key === "Enter" || n.key === " ") && (n.preventDefault(), n.currentTarget.click()), (f = e.onKeyDown) == null || f.call(e, n);
       },
-      "aria-labelledby": `certification-item-name-${t}`,
-      "aria-describedby": `certification-item-desc-${t}`,
+      "aria-labelledby": `certification-item-name-${l}`,
+      "aria-describedby": `certification-item-desc-${l}`,
       ...e,
       inlineCSS: {
-        cursor: r ? "pointer" : "default",
-        ...r && {
+        cursor: i ? "pointer" : "default",
+        ...i && {
           "&:active": {
             backgroundColor: m[10]
           }
         },
-        ...r && s ? {
+        ...i && s ? {
           "&:hover": {
             backgroundColor: m[10]
           }
@@ -43,11 +48,11 @@ function E({ name: b, acquisitionDate: h, status: o, ...e }) {
         ...e == null ? void 0 : e.inlineCSS
       },
       children: [
-        /* @__PURE__ */ l(a, { flexDirection: "column", gap: 1, flexGrow: 1, children: [
-          /* @__PURE__ */ n(a, { alignItems: "center", gap: 1, children: /* @__PURE__ */ l(g, { id: `certification-item-name-${t}`, tag: "p", variant: "b2M", children: [
+        /* @__PURE__ */ r(a, { flexDirection: "column", gap: 1, flexGrow: 1, children: [
+          /* @__PURE__ */ t(a, { alignItems: "center", gap: 1, children: /* @__PURE__ */ r(g, { id: `certification-item-name-${l}`, tag: "p", variant: "b2M", children: [
             b,
             o === "VERIFIED" && // TODO 아이콘 교체 필요
-            /* @__PURE__ */ n(
+            /* @__PURE__ */ t(
               c,
               {
                 name: "InfoFill",
@@ -61,7 +66,7 @@ function E({ name: b, acquisitionDate: h, status: o, ...e }) {
                 }
               }
             ),
-            o === "REJECTED" && /* @__PURE__ */ n(
+            o === "REJECTED" && /* @__PURE__ */ t(
               c,
               {
                 name: "AlertFill",
@@ -76,16 +81,16 @@ function E({ name: b, acquisitionDate: h, status: o, ...e }) {
               }
             )
           ] }) }),
-          /* @__PURE__ */ l(g, { id: `certification-item-desc-${t}`, tag: "p", variant: "b5R", color: "grey.50", children: [
+          /* @__PURE__ */ r(g, { id: `certification-item-desc-${l}`, tag: "p", variant: "b5R", color: "grey.50", children: [
             h,
             " 취득"
           ] })
         ] }),
-        /* @__PURE__ */ n(c, { name: "ChevronRightLine", size: "xSmall", color: "grey.50" })
+        i && /* @__PURE__ */ t(c, { name: "ChevronRightLine", size: "xSmall", color: "grey.50" })
       ]
     }
   ) });
 }
 export {
-  E as default
+  D as default
 };

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

@@ -1,20 +1,21 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import { useState as m, Children as p, isValidElement as v } from "react";
-import { Flexbox as i, Typography as y, Tooltip as j, Icon as a, Button as k } from "@dotss/ui";
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { useState as m, Children as w, isValidElement as v } from "react";
+import { Flexbox as e, Typography as h, Tooltip as j, Icon as d, Button as k } from "@dotss/ui";
 import D from "@dotss/ui/core/useTheme";
 import E from "./CertificationItem/CertificationItem.mjs";
-function z({
-  children: s,
-  action: d,
-  showTooltip: g = !1,
-  enableToggle: f = !1,
+import { sortItemElements as O } from "../../utils/sortItems/sortItems.mjs";
+function K({
+  children: p,
+  action: f,
+  showTooltip: x = !1,
+  enableToggle: r = !1,
   ...n
 }) {
-  const { spacing: r } = D(), [x, C] = m(!1), [o, S] = m(!1), h = p.toArray(s).filter(v).filter((e) => e.type === E), u = h.length > 0, b = h.length > 3, l = () => C((e) => !e), I = (e) => {
-    (e.key === "Enter" || e.key === " ") && l();
-  }, w = () => S((e) => !e);
-  return /* @__PURE__ */ c(
-    i,
+  const { spacing: l } = D(), [y, C] = m(!1), [o, g] = m(!1), c = w.toArray(p).filter(v).filter((i) => i.type === E), S = c.length > 0, u = c.length > 3, a = () => C((i) => !i), I = (i) => {
+    (i.key === "Enter" || i.key === " ") && a();
+  }, b = () => g((i) => !i);
+  return /* @__PURE__ */ s(
+    e,
     {
       tag: "section",
       flexDirection: "column",
@@ -27,9 +28,9 @@ function z({
         ...n == null ? void 0 : n.inlineCSS
       },
       children: [
-        /* @__PURE__ */ c(i, { alignItems: "center", justifyContent: "center", gap: 1, children: [
+        /* @__PURE__ */ s(e, { alignItems: "center", justifyContent: "center", gap: 1, children: [
           /* @__PURE__ */ t(
-            y,
+            h,
             {
               id: "certification-section-title",
               tag: "h2",
@@ -38,17 +39,17 @@ function z({
               children: "자격증"
             }
           ),
-          g && /* @__PURE__ */ t(
+          x && /* @__PURE__ */ t(
             j,
             {
-              open: x,
-              onClose: l,
+              open: y,
+              onClose: a,
               color: "secondary",
               role: "tooltip",
               "aria-labelledby": "certification-section-tooltip",
               "aria-describedby": "certification-section-tooltip-desc",
-              body: /* @__PURE__ */ c(
-                y,
+              body: /* @__PURE__ */ s(
+                h,
                 {
                   id: "certification-section-tooltip-desc",
                   tag: "p",
@@ -57,7 +58,7 @@ function z({
                   noWrap: !0,
                   inlineCSS: {
                     display: "flex",
-                    gap: r.content(1),
+                    gap: l.content(1),
                     "& svg": {
                       width: "20px !important",
                       height: "20px !important",
@@ -66,22 +67,22 @@ function z({
                   },
                   children: [
                     "째깍악어가 확인한 정보는",
-                    /* @__PURE__ */ t(a, { name: "InfoFill", size: "small", color: "tictoccroc-teacher.brand.green" }),
+                    /* @__PURE__ */ t(d, { name: "InfoFill", size: "small", color: "tictoccroc-teacher.brand.green" }),
                     "인증 마크가 붙어요!"
                   ]
                 }
               ),
               inlineCSS: {
                 "&:after": {
-                  transform: `translateX(-${82.5 + r.content(1)}px)`
+                  transform: `translateX(-${82.5 + l.content(1)}px)`
                 }
               },
               style: {
                 top: -8,
-                left: `calc(50% + 82.5px - ${r.content(0.5)}px)`
+                left: `calc(50% + 82.5px - ${l.content(0.5)}px)`
               },
               children: /* @__PURE__ */ t(
-                a,
+                d,
                 {
                   id: "certification-section-tooltip",
                   role: "button",
@@ -89,7 +90,7 @@ function z({
                   name: "TooltipFill",
                   size: "small",
                   color: "grey.50",
-                  onClick: l,
+                  onClick: a,
                   onKeyDown: I,
                   "aria-label": "추가 정보 안내",
                   inlineCSS: {
@@ -100,18 +101,21 @@ function z({
             }
           )
         ] }),
-        u && /* @__PURE__ */ t(
-          i,
+        S && /* @__PURE__ */ t(
+          e,
           {
             id: "certification-section-certification-items",
             tag: "ul",
             flexDirection: "column",
             inlineCSS: { width: "inherit" },
-            children: p.toArray(s).slice(0, o ? void 0 : 3)
+            children: O(c).slice(
+              0,
+              !r || o ? void 0 : 3
+            )
           }
         ),
-        f && b && /* @__PURE__ */ t(
-          i,
+        r && u && /* @__PURE__ */ t(
+          e,
           {
             alignItems: "center",
             justifyContent: "center",
@@ -123,8 +127,8 @@ function z({
                 fullWidth: !0,
                 variant: "text",
                 color: "secondary",
-                endAdornment: /* @__PURE__ */ t(a, { name: o ? "ChevronUpLine" : "ChevronDownLine" }),
-                onClick: w,
+                endAdornment: /* @__PURE__ */ t(d, { name: o ? "ChevronUpLine" : "ChevronDownLine" }),
+                onClick: b,
                 "aria-controls": "certification-section-certification-items",
                 "aria-expanded": o,
                 children: o ? "접기" : "더 보기"
@@ -132,15 +136,15 @@ function z({
             )
           }
         ),
-        !f && d && /* @__PURE__ */ t(
-          i,
+        !r && f && /* @__PURE__ */ t(
+          e,
           {
             mt: 4,
             flexGrow: 1,
             alignItems: "center",
             justifyContent: "center",
             inlineCSS: { width: "inherit" },
-            children: d
+            children: f
           }
         )
       ]
@@ -148,5 +152,5 @@ function z({
   );
 }
 export {
-  z as default
+  K as default
 };

package/dist/teacher/profile/components/EducationSection/EducationItem/EducationItem.d.ts

@@ -1,9 +1,12 @@
 import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
-export interface EducationItemProps extends FlexboxProps {
+export interface EducationItemProps extends Omit<FlexboxProps, 'id'> {
     name: string;
     status: 'VERIFIED' | 'PENDING' | 'REJECTED' | 'DELETED';
-    academicStatus: 'STUDYING' | 'ONBREAK' | 'GRADUATED';
+    academicStatus: 'STUDYING' | 'ONBREAK' | 'FINISHED';
     major: string;
+    id: string | number;
+    regDatetime: string;
+    priority: number;
 }
-declare function EducationItem({ name, status, major, academicStatus, ...props }: EducationItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function EducationItem({ name, status, major, academicStatus, id, regDatetime, priority, ...props }: EducationItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default EducationItem;

package/dist/teacher/profile/components/EducationSection/EducationItem/EducationItem.mjs

@@ -1,18 +1,26 @@
-import { jsx as i, jsxs as t } from "react/jsx-runtime";
-import { useId as y } from "react";
-import { Flexbox as c, Typography as d, Icon as m } from "@dotss/ui";
-import C from "@dotss/ui/core/useTheme";
-import { useCheckHoverPossible as v } from "@dotss/ui/hooks";
-function R({ name: f, status: g, major: u, academicStatus: o, ...e }) {
-  const l = y(), { isHoverPossible: s } = v(), {
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { Flexbox as c, Typography as m, Icon as g } from "@dotss/ui";
+import s from "@dotss/ui/core/useTheme";
+import { useCheckHoverPossible as C } from "@dotss/ui/hooks";
+function R({
+  name: f,
+  status: d,
+  major: u,
+  academicStatus: o,
+  id: r,
+  regDatetime: v,
+  priority: x,
+  ...e
+}) {
+  const { isHoverPossible: y } = C(), {
     palette: { grey: a },
     spacing: b
-  } = C(), r = typeof e.onClick == "function";
-  return /* @__PURE__ */ i("li", { children: /* @__PURE__ */ t(
+  } = s(), n = typeof e.onClick == "function";
+  return /* @__PURE__ */ t("li", { children: /* @__PURE__ */ l(
     c,
     {
       role: "button",
-      tabIndex: r ? 0 : -1,
+      tabIndex: n ? 0 : -1,
       alignItems: "center",
       gap: 4,
       pt: 2,
@@ -21,21 +29,21 @@ function R({ name: f, status: g, major: u, academicStatus: o, ...e }) {
       pr: 4,
       ml: -4,
       mr: -4,
-      onKeyDown: (n) => {
+      onKeyDown: (i) => {
         var h;
-        (n.key === "Enter" || n.key === " ") && (n.preventDefault(), n.currentTarget.click()), (h = e.onKeyDown) == null || h.call(e, n);
+        (i.key === "Enter" || i.key === " ") && (i.preventDefault(), i.currentTarget.click()), (h = e.onKeyDown) == null || h.call(e, i);
       },
-      "aria-labelledby": `education-item-title-${l}`,
-      "aria-describedby": `education-item-desc-${l}`,
+      "aria-labelledby": `education-item-title-${r}`,
+      "aria-describedby": `education-item-desc-${r}`,
       ...e,
       inlineCSS: {
-        cursor: r ? "pointer" : "default",
-        ...r && {
+        cursor: n ? "pointer" : "default",
+        ...n && {
           "&:active": {
             backgroundColor: a[10]
           }
         },
-        ...r && s ? {
+        ...n && y ? {
           "&:hover": {
             backgroundColor: a[10]
           }
@@ -43,12 +51,12 @@ function R({ name: f, status: g, major: u, academicStatus: o, ...e }) {
         ...e == null ? void 0 : e.inlineCSS
       },
       children: [
-        /* @__PURE__ */ t(c, { flexDirection: "column", gap: 1, flexGrow: 1, children: [
-          /* @__PURE__ */ t(d, { id: `education-item-title-${l}`, tag: "p", variant: "b2M", children: [
+        /* @__PURE__ */ l(c, { flexDirection: "column", gap: 1, flexGrow: 1, children: [
+          /* @__PURE__ */ l(m, { id: `education-item-title-${r}`, tag: "p", variant: "b2M", children: [
             f,
-            g === "VERIFIED" && // TODO 아이콘 교체 필요
-            /* @__PURE__ */ i(
-              m,
+            d === "VERIFIED" && // TODO 아이콘 교체 필요
+            /* @__PURE__ */ t(
+              g,
               {
                 name: "InfoFill",
                 size: "small",
@@ -61,8 +69,8 @@ function R({ name: f, status: g, major: u, academicStatus: o, ...e }) {
                 }
               }
             ),
-            g === "REJECTED" && /* @__PURE__ */ i(
-              m,
+            d === "REJECTED" && /* @__PURE__ */ t(
+              g,
               {
                 name: "AlertFill",
                 size: "small",
@@ -76,11 +84,11 @@ function R({ name: f, status: g, major: u, academicStatus: o, ...e }) {
               }
             )
           ] }),
-          /* @__PURE__ */ i(d, { id: `education-item-desc-${l}`, tag: "p", variant: "b5R", color: "grey.50", children: u })
+          /* @__PURE__ */ t(m, { id: `education-item-desc-${r}`, tag: "p", variant: "b5R", color: "grey.50", children: u })
         ] }),
-        /* @__PURE__ */ t(c, { alignItems: "center", gap: 2, children: [
-          /* @__PURE__ */ t(
-            d,
+        /* @__PURE__ */ l(c, { alignItems: "center", gap: 2, children: [
+          /* @__PURE__ */ l(
+            m,
             {
               tag: "p",
               variant: "b4R",
@@ -90,11 +98,11 @@ function R({ name: f, status: g, major: u, academicStatus: o, ...e }) {
               children: [
                 o === "STUDYING" && "재학중",
                 o === "ONBREAK" && "휴학",
-                o === "GRADUATED" && "졸업"
+                o === "FINISHED" && "졸업"
               ]
             }
           ),
-          /* @__PURE__ */ i(m, { name: "ChevronRightLine", size: "xSmall", color: "grey.50" })
+          n && /* @__PURE__ */ t(g, { name: "ChevronRightLine", size: "xSmall", color: "grey.50" })
         ] })
       ]
     }

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

@@ -1,19 +1,20 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { useState as u, Children as p, isValidElement as v } from "react";
-import { Flexbox as n, Typography as f, Tooltip as E, Icon as c, Button as j } from "@dotss/ui";
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { useState as h, Children as w, isValidElement as E } from "react";
+import { Flexbox as n, Typography as p, Tooltip as v, Icon as d, Button as j } from "@dotss/ui";
 import k from "@dotss/ui/core/useTheme";
 import D from "./EducationItem/EducationItem.mjs";
-function B({
-  children: s,
-  action: d,
-  showTooltip: y = !1,
-  enableToggle: h = !1,
+import { sortItemElements as O } from "../../utils/sortItems/sortItems.mjs";
+function L({
+  children: u,
+  action: m,
+  showTooltip: f = !1,
+  enableToggle: l = !1,
   ...i
 }) {
-  const { spacing: l } = k(), [g, x] = u(!1), [o, S] = u(!1), m = p.toArray(s).filter(v).filter((t) => t.type === D), C = m.length > 0, b = m.length > 3, a = () => x((t) => !t), I = (t) => {
-    (t.key === "Enter" || t.key === " ") && a();
-  }, w = () => S((t) => !t);
-  return /* @__PURE__ */ r(
+  const { spacing: a } = k(), [x, y] = h(!1), [o, g] = h(!1), r = w.toArray(u).filter(E).filter((t) => t.type === D), S = r.length > 0, C = r.length > 3, c = () => y((t) => !t), I = (t) => {
+    (t.key === "Enter" || t.key === " ") && c();
+  }, b = () => g((t) => !t);
+  return /* @__PURE__ */ s(
     n,
     {
       tag: "section",
@@ -27,9 +28,9 @@ function B({
         ...i == null ? void 0 : i.inlineCSS
       },
       children: [
-        /* @__PURE__ */ r(n, { alignItems: "center", justifyContent: "center", gap: 1, children: [
+        /* @__PURE__ */ s(n, { alignItems: "center", justifyContent: "center", gap: 1, children: [
           /* @__PURE__ */ e(
-            f,
+            p,
             {
               id: "education-section-title",
               tag: "h2",
@@ -38,17 +39,17 @@ function B({
               children: "학력"
             }
           ),
-          y && /* @__PURE__ */ e(
-            E,
+          f && /* @__PURE__ */ e(
+            v,
             {
-              open: g,
-              onClose: a,
+              open: x,
+              onClose: c,
               color: "secondary",
               role: "tooltip",
               "aria-labelledby": "education-section-tooltip",
               "aria-describedby": "education-section-tooltip-desc",
-              body: /* @__PURE__ */ r(
-                f,
+              body: /* @__PURE__ */ s(
+                p,
                 {
                   id: "education-section-tooltip-desc",
                   tag: "p",
@@ -57,7 +58,7 @@ function B({
                   noWrap: !0,
                   inlineCSS: {
                     display: "flex",
-                    gap: l.content(1),
+                    gap: a.content(1),
                     "& svg": {
                       width: "20px !important",
                       height: "20px !important",
@@ -66,22 +67,22 @@ function B({
                   },
                   children: [
                     "째깍악어가 확인한 정보는",
-                    /* @__PURE__ */ e(c, { name: "InfoFill", size: "small", color: "tictoccroc-teacher.brand.green" }),
+                    /* @__PURE__ */ e(d, { name: "InfoFill", size: "small", color: "tictoccroc-teacher.brand.green" }),
                     "인증 마크가 붙어요!"
                   ]
                 }
               ),
               inlineCSS: {
                 "&:after": {
-                  transform: `translateX(-${100 + l.content(1)}px)`
+                  transform: `translateX(-${100 + a.content(1)}px)`
                 }
               },
               style: {
                 top: -8,
-                left: `calc(50% + 100px - ${l.content(0.5)}px)`
+                left: `calc(50% + 100px - ${a.content(0.5)}px)`
               },
               children: /* @__PURE__ */ e(
-                c,
+                d,
                 {
                   id: "education-section-tooltip",
                   role: "button",
@@ -89,7 +90,7 @@ function B({
                   name: "TooltipFill",
                   size: "small",
                   color: "grey.50",
-                  onClick: a,
+                  onClick: c,
                   onKeyDown: I,
                   "aria-label": "추가 정보 안내",
                   inlineCSS: {
@@ -100,17 +101,17 @@ function B({
             }
           )
         ] }),
-        C && /* @__PURE__ */ e(
+        S && /* @__PURE__ */ e(
           n,
           {
             id: "education-section-education-items",
             tag: "ul",
             flexDirection: "column",
             inlineCSS: { width: "inherit" },
-            children: p.toArray(s).slice(0, o ? void 0 : 3)
+            children: O(r).slice(0, !l || o ? void 0 : 3)
           }
         ),
-        h && b && /* @__PURE__ */ e(
+        l && C && /* @__PURE__ */ e(
           n,
           {
             alignItems: "center",
@@ -123,8 +124,8 @@ function B({
                 fullWidth: !0,
                 variant: "text",
                 color: "secondary",
-                endAdornment: /* @__PURE__ */ e(c, { name: o ? "ChevronUpLine" : "ChevronDownLine" }),
-                onClick: w,
+                endAdornment: /* @__PURE__ */ e(d, { name: o ? "ChevronUpLine" : "ChevronDownLine" }),
+                onClick: b,
                 "aria-controls": "education-section-education-items",
                 "aria-expanded": o,
                 children: o ? "접기" : "더 보기"
@@ -132,7 +133,7 @@ function B({
             )
           }
         ),
-        !h && d && /* @__PURE__ */ e(
+        !l && m && /* @__PURE__ */ e(
           n,
           {
             mt: 4,
@@ -140,7 +141,7 @@ function B({
             alignItems: "center",
             justifyContent: "center",
             inlineCSS: { width: "inherit" },
-            children: d
+            children: m
           }
         )
       ]
@@ -148,5 +149,5 @@ function B({
   );
 }
 export {
-  B as default
+  L as default
 };

package/dist/teacher/profile/utils/index.d.ts

@@ -0,0 +1 @@
+export { default as sortItems, sortItemElements } from './sortItems';

package/dist/teacher/profile/utils/index.mjs

@@ -0,0 +1,5 @@
+import { sortItemElements as s, default as m } from "./sortItems/sortItems.mjs";
+export {
+  s as sortItemElements,
+  m as sortItems
+};

package/dist/teacher/profile/utils/sortItems/index.d.ts

@@ -0,0 +1,3 @@
+import { default as sortItems, sortItemElements } from './sortItems';
+export { sortItemElements };
+export default sortItems;

package/dist/teacher/profile/utils/sortItems/index.mjs

@@ -0,0 +1,6 @@
+import e from "./sortItems.mjs";
+import { sortItemElements as m } from "./sortItems.mjs";
+export {
+  e as default,
+  m as sortItemElements
+};

package/dist/teacher/profile/utils/sortItems/sortItems.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+type ItemProps = {
+    status: 'VERIFIED' | 'PENDING' | 'REJECTED' | 'DELETED';
+    regDatetime: string;
+    priority: number;
+};
+export default function sortItems<T>(items: T[], get?: (item: T) => ItemProps): T[];
+export declare function sortItemElements<T extends ReactElement<ItemProps>>(items: T[]): T[];
+export {};

package/dist/teacher/profile/utils/sortItems/sortItems.mjs

@@ -0,0 +1,29 @@
+function c(s, r = (a) => a) {
+  const a = s.some((o) => !!r(o).priority), n = s.filter((o) => r(o).status !== "REJECTED"), m = s.filter((o) => r(o).status === "REJECTED");
+  if (a)
+    return [
+      ...n.sort((o, i) => {
+        const t = r(o).priority, e = r(i).priority;
+        return t === 0 && e === 0 ? r(i).regDatetime.localeCompare(r(o).regDatetime) : t === 0 && e !== 0 ? -1 : t !== 0 && e === 0 ? 1 : e - t;
+      }),
+      ...m.sort((o, i) => {
+        const t = r(o).priority, e = r(i).priority;
+        return t === 0 && e === 0 ? r(i).regDatetime.localeCompare(r(o).regDatetime) : t === 0 && e !== 0 ? -1 : t !== 0 && e === 0 ? 1 : e - t;
+      })
+    ];
+  {
+    const o = n.filter((t) => r(t).status === "VERIFIED"), i = n.filter((t) => r(t).status !== "VERIFIED");
+    return [
+      ...o.sort((t, e) => r(e).regDatetime.localeCompare(r(t).regDatetime)),
+      ...i.sort((t, e) => r(e).regDatetime.localeCompare(r(t).regDatetime)),
+      ...m.sort((t, e) => r(e).regDatetime.localeCompare(r(t).regDatetime))
+    ];
+  }
+}
+function u(s) {
+  return c(s, (r) => r.props);
+}
+export {
+  c as default,
+  u as sortItemElements
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dotss/tictoccroc",
   "type": "module",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Tictoccroc shared components, hooks, utils, and APIs for Dotss",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -35,6 +35,14 @@
       "import": "./dist/teacher/profile/components/*/index.mjs",
       "types": "./dist/teacher/profile/components/*/index.d.ts"
     },
+    "./teacher/profile/utils": {
+      "import": "./dist/teacher/profile/utils/index.mjs",
+      "types": "./dist/teacher/profile/utils/index.d.ts"
+    },
+    "./teacher/profile/utils/*": {
+      "import": "./dist/teacher/profile/utils/*/index.mjs",
+      "types": "./dist/teacher/profile/utils/*/index.d.ts"
+    },
     "./shared/components": {
       "import": "./dist/shared/components/index.mjs",
       "types": "./dist/shared/components/index.d.ts"