@elice/material-assignment 1.240718.3 → 1.240719.1

package/es/components/material-assignment-admin/MaterialAssignmentAdminContentTa.js

@@ -1,7 +1,9 @@
+import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { config, getOrgUserGet, getOrgMaterialAssignmentGet, getOrgMaterialAssignmentSubmissionList, getOrgMaterialAssignmentGradeResultGet, getOrgMaterialAssignmentGradeList, postOrgMaterialAssignmentGradeEdit } from '@elice/api-client';
-import { Notification, Flex, Vspace, ProfileImage, Hspace, Text, Tooltip, Icon, InfoTable, Button, TableNext, Modal, Label, Input, Textarea } from '@elice/blocks';
+import { Flex, Vspace, Notification, ProfileImage, Hspace, Text, Tooltip, Icon, InfoTable, Button, TableNext, Modal, Label, Input, Textarea } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eilStatusInfo } from '@elice/icons';
 import { FormattedDate } from '@elice/intl';
@@ -10,14 +12,13 @@ import dayjs from 'dayjs';
 import MaterialAssignmentContainer from '../shared/MaterialAssignmentContainer.js';
 import { StyledMaterialAssignmentAdminHeader, StyledMaterialAssignmentAdminHeaderCell, StyledMaterialAssignmentAdminGradeWrapper } from './MaterialAssignmentAdmin.styled.js';
 
-const MaterialAssignmentAdminContentTa = ({
-  materialAssignmentId,
-  userId,
-  adminUserId
-}) => {
+var MaterialAssignmentAdminContentTa = function MaterialAssignmentAdminContentTa(_ref) {
+  var materialAssignmentId = _ref.materialAssignmentId,
+    userId = _ref.userId,
+    adminUserId = _ref.adminUserId;
   var _a;
   // Form
-  const gradeEditFormMethods = useForm({
+  var gradeEditFormMethods = useForm({
     defaultValues: {
       score: 0,
       comment: ''
@@ -25,67 +26,100 @@ const MaterialAssignmentAdminContentTa = ({
     mode: 'onChange'
   });
   // State related with component
-  const [showGradeEditModal, setShowGradeEditModal] = React.useState(false);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    showGradeEditModal = _React$useState2[0],
+    setShowGradeEditModal = _React$useState2[1];
   // State related with api
-  const [user, setUser] = React.useState(null);
-  const [materialAssignment, setMaterialAssignment] = React.useState(null);
-  const [userSubmission, setUserSubmission] = React.useState(null);
-  const [gradeResult, setGradeResult] = React.useState(null);
-  const [myGrade, setMyGrade] = React.useState(null);
-  const isAssignmentClosed = dayjs().isAfter(dayjs(materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.closeDatetime));
-  const isScoreFinalized = Boolean(materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.scoreFinalizedDatetime);
-  const isUserSubmitted = Boolean(userSubmission);
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    user = _React$useState4[0],
+    setUser = _React$useState4[1];
+  var _React$useState5 = React.useState(null),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    materialAssignment = _React$useState6[0],
+    setMaterialAssignment = _React$useState6[1];
+  var _React$useState7 = React.useState(null),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    userSubmission = _React$useState8[0],
+    setUserSubmission = _React$useState8[1];
+  var _React$useState9 = React.useState(null),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    gradeResult = _React$useState10[0],
+    setGradeResult = _React$useState10[1];
+  var _React$useState11 = React.useState(null),
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    myGrade = _React$useState12[0],
+    setMyGrade = _React$useState12[1];
+  var isAssignmentClosed = dayjs().isAfter(dayjs(materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.closeDatetime));
+  var isScoreFinalized = Boolean(materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.scoreFinalizedDatetime);
+  var isUserSubmitted = Boolean(userSubmission);
   // API Status
-  const isReady = useMaterialConfigApiClientUpdate(config.init);
-  const [submissionListGetStatus, setSubmissionListGetStatus] = React.useState('idle');
-  const fetchUserGet = React.useCallback(() => {
+  var isReady = useMaterialConfigApiClientUpdate(config.init);
+  var _React$useState13 = React.useState('idle'),
+    _React$useState14 = _slicedToArray(_React$useState13, 2),
+    submissionListGetStatus = _React$useState14[0],
+    setSubmissionListGetStatus = _React$useState14[1];
+  var fetchUserGet = React.useCallback(function () {
     void getOrgUserGet({
-      userId
-    }).then(res => res.user).then(setUser);
+      userId: userId
+    }).then(function (res) {
+      return res.user;
+    }).then(setUser);
   }, [userId]);
-  const fetchMaterialAssignmentGet = React.useCallback(() => {
+  var fetchMaterialAssignmentGet = React.useCallback(function () {
     void getOrgMaterialAssignmentGet({
-      materialAssignmentId
-    }).then(res => res.materialAssignment).then(setMaterialAssignment);
+      materialAssignmentId: materialAssignmentId
+    }).then(function (res) {
+      return res.materialAssignment;
+    }).then(setMaterialAssignment);
   }, [materialAssignmentId]);
-  const fetchSubmissionList = React.useCallback(() => {
+  var fetchSubmissionList = React.useCallback(function () {
     setSubmissionListGetStatus('pending');
     void getOrgMaterialAssignmentSubmissionList({
-      materialAssignmentId,
+      materialAssignmentId: materialAssignmentId,
       offset: 0,
       count: 1,
       filterConditions: {
         isLast: true,
         userIds: [userId]
       }
-    }).then(res => res.materialAssignmentSubmissions[0]).then(submission => {
+    }).then(function (res) {
+      return res.materialAssignmentSubmissions[0];
+    }).then(function (submission) {
       setUserSubmission(submission !== null && submission !== void 0 ? submission : null);
       setSubmissionListGetStatus('resolved');
-    }).catch(err => {
+    }).catch(function (err) {
       console.error(err);
       setSubmissionListGetStatus('rejected');
     });
   }, [materialAssignmentId, userId]);
-  const fetchGradeResult = React.useCallback(() => {
+  var fetchGradeResult = React.useCallback(function () {
     void getOrgMaterialAssignmentGradeResultGet({
-      materialAssignmentId,
-      userId
-    }).then(res => res.materialAssignmentGradeResult).then(setGradeResult).catch(() => {
+      materialAssignmentId: materialAssignmentId,
+      userId: userId
+    }).then(function (res) {
+      return res.materialAssignmentGradeResult;
+    }).then(setGradeResult).catch(function () {
       setGradeResult(null);
     });
   }, [materialAssignmentId, userId]);
-  const fetchMyGrade = React.useCallback(() => {
+  var fetchMyGrade = React.useCallback(function () {
     void getOrgMaterialAssignmentGradeList({
-      materialAssignmentId,
+      materialAssignmentId: materialAssignmentId,
       offset: 0,
       count: 1,
       filterConditions: {
-        userId,
+        userId: userId,
         gradeUserId: adminUserId
       }
-    }).then(res => res.materialAssignmentGrades[0]).then(grade => setMyGrade(grade !== null && grade !== void 0 ? grade : null));
+    }).then(function (res) {
+      return res.materialAssignmentGrades[0];
+    }).then(function (grade) {
+      return setMyGrade(grade !== null && grade !== void 0 ? grade : null);
+    });
   }, [adminUserId, materialAssignmentId, userId]);
-  const handleGradeEditClick = () => {
+  var handleGradeEditClick = function handleGradeEditClick() {
     var _a, _b;
     setShowGradeEditModal(true);
     gradeEditFormMethods.reset({
@@ -93,28 +127,47 @@ const MaterialAssignmentAdminContentTa = ({
       comment: (_b = myGrade === null || myGrade === void 0 ? void 0 : myGrade.comment) !== null && _b !== void 0 ? _b : ''
     });
   };
-  const handleGradeEditSubmit = gradeEditFormMethods.handleSubmit(async ({
-    score,
-    comment
-  }) => {
-    try {
-      await postOrgMaterialAssignmentGradeEdit({
-        materialAssignmentGradeId: myGrade === null || myGrade === void 0 ? void 0 : myGrade.id,
-        materialAssignmentId,
-        userId,
-        score,
-        comment
-      });
-      fetchMyGrade();
-      Notification.success('저장되었습니다');
-    } catch (err) {
-      console.error(err);
-      Notification.error('오류가 발생했습니다.');
-    } finally {
-      setShowGradeEditModal(false);
-    }
-  });
-  React.useEffect(() => {
+  var handleGradeEditSubmit = gradeEditFormMethods.handleSubmit( /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref2) {
+      var score, comment;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            score = _ref2.score, comment = _ref2.comment;
+            _context.prev = 1;
+            _context.next = 4;
+            return postOrgMaterialAssignmentGradeEdit({
+              materialAssignmentGradeId: myGrade === null || myGrade === void 0 ? void 0 : myGrade.id,
+              materialAssignmentId: materialAssignmentId,
+              userId: userId,
+              score: score,
+              comment: comment
+            });
+          case 4:
+            fetchMyGrade();
+            Notification.success('저장되었습니다');
+            _context.next = 12;
+            break;
+          case 8:
+            _context.prev = 8;
+            _context.t0 = _context["catch"](1);
+            console.error(_context.t0);
+            Notification.error('오류가 발생했습니다.');
+          case 12:
+            _context.prev = 12;
+            setShowGradeEditModal(false);
+            return _context.finish(12);
+          case 15:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[1, 8, 12, 15]]);
+    }));
+    return function (_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }());
+  React.useEffect(function () {
     if (!isReady) {
       return;
     }
@@ -124,148 +177,199 @@ const MaterialAssignmentAdminContentTa = ({
     fetchSubmissionList();
     fetchMaterialAssignmentGet();
   }, [isReady, fetchUserGet, fetchMyGrade, fetchGradeResult, fetchSubmissionList, fetchMaterialAssignmentGet]);
-  const renderHeader = () => {
+  var renderHeader = function renderHeader() {
     var _a;
-    return React.createElement(StyledMaterialAssignmentAdminHeader, {
+    return jsxs(StyledMaterialAssignmentAdminHeader, {
       align: "center",
       padding: "1rem",
-      width: "100%"
-    }, React.createElement(Flex, {
-      auto: true,
-      align: "center"
-    }, React.createElement(ProfileImage, {
-      src: (_a = user === null || user === void 0 ? void 0 : user.profileUrl) !== null && _a !== void 0 ? _a : '',
-      width: "2.5rem",
-      height: "2.5rem"
-    }), React.createElement(Hspace, {
-      width: 1
-    }), React.createElement(Text, {
-      size: "small",
-      role: "warmwhite"
-    }, user === null || user === void 0 ? void 0 : user.fullname)), React.createElement(StyledMaterialAssignmentAdminHeaderCell, null, React.createElement(Text, {
-      size: "tiny",
-      role: "gray4"
-    }, "\uC810\uC218"), React.createElement(Text, {
-      size: "small",
-      role: "white"
-    }, (gradeResult === null || gradeResult === void 0 ? void 0 : gradeResult.score) && isScoreFinalized ? `${gradeResult.score}점(공개됨)` : '--')), React.createElement(StyledMaterialAssignmentAdminHeaderCell, null, React.createElement(Text, {
-      size: "tiny",
-      role: "gray4"
-    }, "\uC81C\uCD9C \uC77C\uC2DC"), React.createElement(Text, {
-      size: "small",
-      role: "white"
-    }, userSubmission ? React.createElement(FormattedDate, {
-      value: userSubmission.createdDatetime,
-      dateStyle: "medium",
-      timeStyle: "short"
-    }) : '--')));
+      width: "100%",
+      children: [jsxs(Flex, {
+        auto: true,
+        align: "center",
+        children: [jsx(ProfileImage, {
+          src: (_a = user === null || user === void 0 ? void 0 : user.profileUrl) !== null && _a !== void 0 ? _a : '',
+          width: "2.5rem",
+          height: "2.5rem"
+        }), jsx(Hspace, {
+          width: 1
+        }), jsx(Text, {
+          size: "small",
+          role: "warmwhite",
+          children: user === null || user === void 0 ? void 0 : user.fullname
+        })]
+      }), jsxs(StyledMaterialAssignmentAdminHeaderCell, {
+        children: [jsx(Text, {
+          size: "tiny",
+          role: "gray4",
+          children: "\uC810\uC218"
+        }), jsx(Text, {
+          size: "small",
+          role: "white",
+          children: (gradeResult === null || gradeResult === void 0 ? void 0 : gradeResult.score) && isScoreFinalized ? "".concat(gradeResult.score, "\uC810(\uACF5\uAC1C\uB428)") : '--'
+        })]
+      }), jsxs(StyledMaterialAssignmentAdminHeaderCell, {
+        children: [jsx(Text, {
+          size: "tiny",
+          role: "gray4",
+          children: "\uC81C\uCD9C \uC77C\uC2DC"
+        }), jsx(Text, {
+          size: "small",
+          role: "white",
+          children: userSubmission ? jsx(FormattedDate, {
+            value: userSubmission.createdDatetime,
+            dateStyle: "medium",
+            timeStyle: "short"
+          }) : '--'
+        })]
+      })]
+    });
   };
-  const renderGradeResult = () => {
-    return React.createElement(StyledMaterialAssignmentAdminGradeWrapper, {
+  var renderGradeResult = function renderGradeResult() {
+    return jsx(StyledMaterialAssignmentAdminGradeWrapper, {
       wrap: true,
       width: "100%",
-      align: "center"
-    }, React.createElement(Flex, {
-      auto: true,
-      align: "center"
-    }, React.createElement(Text, {
-      role: "navy1",
-      size: "small",
-      lineHeight: "1.375rem"
-    }, user ? `${user.fullname} 님의 점수` : null), React.createElement(Hspace, {
-      width: 0.25
-    }), React.createElement(Tooltip, {
-      useMaxWidth: true,
-      placement: "top",
-      title: '최종 점수는 관리자가 모든 채점자의 점수를 고려하여 반영한 후 공개됩니다.'
-    }, React.createElement(Icon, {
-      icon: eilStatusInfo,
-      color: base.color.navy1
-    })), React.createElement(Hspace, {
-      width: 0.75
-    }), React.createElement(Text, {
-      bold: true,
-      role: "white"
-    }, (gradeResult === null || gradeResult === void 0 ? void 0 : gradeResult.score) && isScoreFinalized ? `${gradeResult.score}점(공개됨)` : '--')));
+      align: "center",
+      children: jsxs(Flex, {
+        auto: true,
+        align: "center",
+        children: [jsx(Text, {
+          role: "navy1",
+          size: "small",
+          lineHeight: "1.375rem",
+          children: user ? "".concat(user.fullname, " \uB2D8\uC758 \uC810\uC218") : null
+        }), jsx(Hspace, {
+          width: 0.25
+        }), jsx(Tooltip, {
+          useMaxWidth: true,
+          placement: "top",
+          title: '최종 점수는 관리자가 모든 채점자의 점수를 고려하여 반영한 후 공개됩니다.',
+          children: jsx(Icon, {
+            icon: eilStatusInfo,
+            color: base.color.navy1
+          })
+        }), jsx(Hspace, {
+          width: 0.75
+        }), jsx(Text, {
+          bold: true,
+          role: "white",
+          children: (gradeResult === null || gradeResult === void 0 ? void 0 : gradeResult.score) && isScoreFinalized ? "".concat(gradeResult.score, "\uC810(\uACF5\uAC1C\uB428)") : '--'
+        })]
+      })
+    });
   };
-  const renderSubmissionInfo = () => {
-    const statusText = (() => {
+  var renderSubmissionInfo = function renderSubmissionInfo() {
+    var statusText = function () {
       if (submissionListGetStatus === 'pending') {
         return null;
       }
       switch (true) {
         case !isUserSubmitted && isAssignmentClosed:
-          return React.createElement(Text, {
+          return jsx(Text, {
             bold: true,
             role: "danger",
-            size: "small"
-          }, "\uC81C\uCD9C \uAE30\uD55C \uB9CC\uB8CC");
+            size: "small",
+            children: "\uC81C\uCD9C \uAE30\uD55C \uB9CC\uB8CC"
+          });
         case isScoreFinalized:
-          return React.createElement(Text, {
+          return jsx(Text, {
             bold: true,
             role: "lightpurple",
-            size: "small"
-          }, "\uCC44\uC810 \uC644\uB8CC");
+            size: "small",
+            children: "\uCC44\uC810 \uC644\uB8CC"
+          });
         case isUserSubmitted:
-          return React.createElement(Text, {
+          return jsx(Text, {
             bold: true,
             role: "success",
-            size: "small"
-          }, "\uC81C\uCD9C\uB428");
+            size: "small",
+            children: "\uC81C\uCD9C\uB428"
+          });
         case !isUserSubmitted:
-          return React.createElement(Text, {
+          return jsx(Text, {
             bold: true,
             role: "warning",
-            size: "small"
-          }, "\uBBF8\uC81C\uCD9C");
+            size: "small",
+            children: "\uBBF8\uC81C\uCD9C"
+          });
       }
-    })();
-    const submissionAttachment = (() => {
+    }();
+    var submissionAttachment = function () {
       if (!userSubmission) {
         return '--';
       }
       if (userSubmission.assignmentFileUrl) {
-        const assignmentFilename = decodeURIComponent(userSubmission.assignmentFileUrl && new URL(userSubmission.assignmentFileUrl).pathname.split('/').pop() || '');
-        return React.createElement("a", {
+        var assignmentFilename = decodeURIComponent(userSubmission.assignmentFileUrl && new URL(userSubmission.assignmentFileUrl).pathname.split('/').pop() || '');
+        return jsx("a", {
           href: userSubmission.assignmentFileUrl,
           download: assignmentFilename,
           target: "_blank",
-          rel: "noopener noreferrer"
-        }, React.createElement(Text, {
-          hoverable: true,
-          underline: true,
-          role: "white",
-          size: "small"
-        }, assignmentFilename));
+          rel: "noopener noreferrer",
+          children: jsx(Text, {
+            hoverable: true,
+            underline: true,
+            role: "white",
+            size: "small",
+            children: assignmentFilename
+          })
+        });
       }
       if (userSubmission === null || userSubmission === void 0 ? void 0 : userSubmission.assignmentUrl) {
-        return React.createElement("a", {
+        return jsx("a", {
           href: userSubmission.assignmentUrl,
           target: "_blank",
-          rel: "noopener noreferrer"
-        }, React.createElement(Text, {
-          hoverable: true,
-          underline: true,
-          role: "white",
-          size: "small"
-        }, userSubmission.assignmentUrl));
+          rel: "noopener noreferrer",
+          children: jsx(Text, {
+            hoverable: true,
+            underline: true,
+            role: "white",
+            size: "small",
+            children: userSubmission.assignmentUrl
+          })
+        });
       }
-    })();
-    return React.createElement(InfoTable, {
-      dark: true
-    }, React.createElement("tbody", null, React.createElement("tr", null, React.createElement("td", null, "\uC0C1\uD0DC"), React.createElement("td", null, statusText)), React.createElement("tr", null, React.createElement("td", null, "\uACFC\uC81C \uC81C\uCD9C \uAE30\uD55C"), React.createElement("td", null, React.createElement(FormattedDate, {
-      value: materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.closeDatetime,
-      dateStyle: "medium",
-      timeStyle: "short"
-    }))), React.createElement("tr", null, React.createElement("td", null, "\uC81C\uCD9C \uC77C\uC2DC"), React.createElement("td", null, userSubmission ? React.createElement(FormattedDate, {
-      value: userSubmission.createdDatetime,
-      dateStyle: "medium",
-      timeStyle: "short"
-    }) : '--')), React.createElement("tr", null, React.createElement("td", null, "\uC5C5\uB85C\uB4DC\uB41C \uACFC\uC81C"), React.createElement("td", null, submissionAttachment))));
+    }();
+    return jsx(InfoTable, {
+      dark: true,
+      children: jsxs("tbody", {
+        children: [jsxs("tr", {
+          children: [jsx("td", {
+            children: "\uC0C1\uD0DC"
+          }), jsx("td", {
+            children: statusText
+          })]
+        }), jsxs("tr", {
+          children: [jsx("td", {
+            children: "\uACFC\uC81C \uC81C\uCD9C \uAE30\uD55C"
+          }), jsx("td", {
+            children: jsx(FormattedDate, {
+              value: materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.closeDatetime,
+              dateStyle: "medium",
+              timeStyle: "short"
+            })
+          })]
+        }), jsxs("tr", {
+          children: [jsx("td", {
+            children: "\uC81C\uCD9C \uC77C\uC2DC"
+          }), jsx("td", {
+            children: userSubmission ? jsx(FormattedDate, {
+              value: userSubmission.createdDatetime,
+              dateStyle: "medium",
+              timeStyle: "short"
+            }) : '--'
+          })]
+        }), jsxs("tr", {
+          children: [jsx("td", {
+            children: "\uC5C5\uB85C\uB4DC\uB41C \uACFC\uC81C"
+          }), jsx("td", {
+            children: submissionAttachment
+          })]
+        })]
+      })
+    });
   };
-  const renderGrade = () => {
-    const isGradeEditDisabled = !isAssignmentClosed || !isUserSubmitted || isScoreFinalized;
-    const tooltipTitle = (() => {
+  var renderGrade = function renderGrade() {
+    var isGradeEditDisabled = !isAssignmentClosed || !isUserSubmitted || isScoreFinalized;
+    var tooltipTitle = function () {
       switch (true) {
         case isScoreFinalized:
           return '공개 이후 채점이 불가합니다.';
@@ -274,79 +378,91 @@ const MaterialAssignmentAdminContentTa = ({
         case !isUserSubmitted:
           return '미제출인 경우 채점할 수 없습니다.';
       }
-    })();
-    return React.createElement(Flex, {
+    }();
+    return jsxs(Flex, {
       column: true,
-      align: "center"
-    }, React.createElement(Flex, {
       align: "center",
-      width: "100%"
-    }, React.createElement(Flex, {
-      column: true,
-      auto: true
-    }, React.createElement(Text, {
-      block: true,
-      bold: true,
-      role: "white",
-      lineHeight: 1.375
-    }, "\uB0B4 \uCC44\uC810"), React.createElement(Text, {
-      block: true,
-      size: "tiny",
-      role: "navy3",
-      lineHeight: 1.6
-    }, "\uB0B4\uAC00 \uB9E4\uAE34 \uD3C9\uAC00\uC640 \uAD00\uB828\uB41C \uC815\uBCF4\uB97C \uBCFC \uC218 \uC788\uC2B5\uB2C8\uB2E4.")), React.createElement(Tooltip, {
-      placement: "top",
-      title: tooltipTitle,
-      visible: isGradeEditDisabled ? undefined : false
-    }, React.createElement("span", null, React.createElement(Button, {
-      size: "small",
-      role: "lightpurple",
-      disabled: isGradeEditDisabled,
-      onClick: handleGradeEditClick
-    }, Boolean(myGrade) ? '내 채점 수정' : '내 채점 시작')))), React.createElement(Vspace, {
-      height: 0.75
-    }), React.createElement(TableNext, {
-      dark: true,
-      emptyMessage: "\uC544\uC9C1 \uCC44\uC810\uC744 \uC2DC\uC791\uD558\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.",
-      columns: [{
-        Header: '채점자명',
-        accessor: 'fullname'
-      }, {
-        Header: '과제 점수',
-        accessor: 'grade'
-      }, {
-        Header: '채점 일시',
-        accessor: 'created',
-        textAlign: 'left'
-      }],
-      data: myGrade ? [{
-        fullname: React.createElement(Flex, {
-          paddingy: "0.25rem"
-        }, React.createElement(Text, {
-          noWrap: true,
-          role: "navy0",
-          size: "small"
-        }, myGrade.gradeUser.fullname), React.createElement(Hspace, {
-          width: 0.25
-        }), React.createElement(Text, {
-          ellipsis: true,
-          role: "navy3",
-          size: "small"
-        }, myGrade.gradeUser.email)),
-        grade: myGrade.score,
-        created: React.createElement(FormattedDate, {
-          value: myGrade.createdDatetime,
-          dateStyle: "medium",
-          timeStyle: "short"
-        })
-      }] : []
-    }));
+      children: [jsxs(Flex, {
+        align: "center",
+        width: "100%",
+        children: [jsxs(Flex, {
+          column: true,
+          auto: true,
+          children: [jsx(Text, {
+            block: true,
+            bold: true,
+            role: "white",
+            lineHeight: 1.375,
+            children: "\uB0B4 \uCC44\uC810"
+          }), jsx(Text, {
+            block: true,
+            size: "tiny",
+            role: "navy3",
+            lineHeight: 1.6,
+            children: "\uB0B4\uAC00 \uB9E4\uAE34 \uD3C9\uAC00\uC640 \uAD00\uB828\uB41C \uC815\uBCF4\uB97C \uBCFC \uC218 \uC788\uC2B5\uB2C8\uB2E4."
+          })]
+        }), jsx(Tooltip, {
+          placement: "top",
+          title: tooltipTitle,
+          visible: isGradeEditDisabled ? undefined : false,
+          children: jsx("span", {
+            children: jsx(Button, {
+              size: "small",
+              role: "lightpurple",
+              disabled: isGradeEditDisabled,
+              onClick: handleGradeEditClick,
+              children: Boolean(myGrade) ? '내 채점 수정' : '내 채점 시작'
+            })
+          })
+        })]
+      }), jsx(Vspace, {
+        height: 0.75
+      }), jsx(TableNext, {
+        dark: true,
+        emptyMessage: "\uC544\uC9C1 \uCC44\uC810\uC744 \uC2DC\uC791\uD558\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.",
+        columns: [{
+          Header: '채점자명',
+          accessor: 'fullname'
+        }, {
+          Header: '과제 점수',
+          accessor: 'grade'
+        }, {
+          Header: '채점 일시',
+          accessor: 'created',
+          textAlign: 'left'
+        }],
+        data: myGrade ? [{
+          fullname: jsxs(Flex, {
+            paddingy: "0.25rem",
+            children: [jsx(Text, {
+              noWrap: true,
+              role: "navy0",
+              size: "small",
+              children: myGrade.gradeUser.fullname
+            }), jsx(Hspace, {
+              width: 0.25
+            }), jsx(Text, {
+              ellipsis: true,
+              role: "navy3",
+              size: "small",
+              children: myGrade.gradeUser.email
+            })]
+          }),
+          grade: myGrade.score,
+          created: jsx(FormattedDate, {
+            value: myGrade.createdDatetime,
+            dateStyle: "medium",
+            timeStyle: "short"
+          })
+        }] : []
+      })]
+    });
   };
-  const renderGradeEditModal = () => {
+  var renderGradeEditModal = function renderGradeEditModal() {
     if (!showGradeEditModal) {
       return null;
     }
-    return React.createElement(Modal, {
+    return jsxs(Modal, {
       title: Boolean(myGrade) ? '내 채점 수정' : '과제 채점',
       footerButtons: [{
         label: '확인',
@@ -359,85 +475,97 @@ const MaterialAssignmentAdminContentTa = ({
         label: '취소',
         size: 'small',
         role: 'gray1',
-        onClick: () => {
+        onClick: function onClick() {
           setShowGradeEditModal(false);
         }
       }],
-      onHide: () => {
+      onHide: function onHide() {
         setShowGradeEditModal(false);
-      }
-    }, React.createElement(Label, {
-      bold: true,
-      block: true,
-      required: true
-    }, "\uC810\uC218"), React.createElement(Vspace, {
-      height: 0.5
-    }), React.createElement(Flex, {
-      align: "center"
-    }, React.createElement(Controller, {
-      control: gradeEditFormMethods.control,
-      name: "score",
-      rules: {
-        required: true,
-        min: 0,
-        max: 100
-      },
-      render: ({
-        field,
-        fieldState
-      }) => React.createElement(Input, Object.assign({}, field, {
-        invalid: fieldState.invalid,
-        size: "small",
-        width: "xsmall",
-        type: "number"
-      }))
-    }), React.createElement(Hspace, {
-      width: 0.5
-    }), React.createElement(Text, {
-      bold: true,
-      role: "gray9",
-      size: "small"
-    }, "\uC810"), React.createElement(Text, {
-      role: "gray6",
-      size: "small"
-    }, ' / 100점 만점')), React.createElement(Vspace, {
-      height: 1.25
-    }), React.createElement(Label, {
-      bold: true,
-      block: true
-    }, "\uD53C\uB4DC\uBC31"), React.createElement(Vspace, {
-      height: 0.5
-    }), React.createElement(Controller, {
-      control: gradeEditFormMethods.control,
-      name: "comment",
-      rules: {
-        maxLength: 1000
       },
-      render: ({
-        field
-      }) => React.createElement(Textarea, {
-        value: field.value,
-        wordLimit: 1000,
-        rows: 8,
-        onChange: field.onChange
-      })
-    }));
+      children: [jsx(Label, {
+        bold: true,
+        block: true,
+        required: true,
+        children: "\uC810\uC218"
+      }), jsx(Vspace, {
+        height: 0.5
+      }), jsxs(Flex, {
+        align: "center",
+        children: [jsx(Controller, {
+          control: gradeEditFormMethods.control,
+          name: "score",
+          rules: {
+            required: true,
+            min: 0,
+            max: 100
+          },
+          render: function render(_ref4) {
+            var field = _ref4.field,
+              fieldState = _ref4.fieldState;
+            return jsx(Input, Object.assign({}, field, {
+              invalid: fieldState.invalid,
+              size: "small",
+              width: "xsmall",
+              type: "number"
+            }));
+          }
+        }), jsx(Hspace, {
+          width: 0.5
+        }), jsx(Text, {
+          bold: true,
+          role: "gray9",
+          size: "small",
+          children: "\uC810"
+        }), jsx(Text, {
+          role: "gray6",
+          size: "small",
+          children: ' / 100점 만점'
+        })]
+      }), jsx(Vspace, {
+        height: 1.25
+      }), jsx(Label, {
+        bold: true,
+        block: true,
+        children: "\uD53C\uB4DC\uBC31"
+      }), jsx(Vspace, {
+        height: 0.5
+      }), jsx(Controller, {
+        control: gradeEditFormMethods.control,
+        name: "comment",
+        rules: {
+          maxLength: 1000
+        },
+        render: function render(_ref5) {
+          var field = _ref5.field;
+          return jsx(Textarea, {
+            value: field.value,
+            wordLimit: 1000,
+            rows: 8,
+            onChange: field.onChange
+          });
+        }
+      })]
+    });
   };
-  return React.createElement(React.Fragment, null, renderHeader(), React.createElement(Flex, {
-    column: true,
-    auto: true,
-    padding: "3.625rem",
-    width: "100%",
-    height: "100%",
-    overflow: "hidden",
-    align: "center"
-  }, React.createElement(MaterialAssignmentContainer, {
-    title: (_a = materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.title) !== null && _a !== void 0 ? _a : ''
-  }, renderGradeResult(), React.createElement(Vspace, {
-    height: 1.25
-  }), renderSubmissionInfo(), React.createElement(Vspace, {
-    height: 1.5
-  }), renderGrade())), renderGradeEditModal());
+  return jsxs(Fragment, {
+    children: [renderHeader(), jsx(Flex, {
+      column: true,
+      auto: true,
+      padding: "3.625rem",
+      width: "100%",
+      height: "100%",
+      overflow: "hidden",
+      align: "center",
+      children: jsxs(MaterialAssignmentContainer, {
+        title: (_a = materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.title) !== null && _a !== void 0 ? _a : '',
+        children: [renderGradeResult(), jsx(Vspace, {
+          height: 1.25
+        }), renderSubmissionInfo(), jsx(Vspace, {
+          height: 1.5
+        }), renderGrade()]
+      })
+    }), renderGradeEditModal()]
+  });
 };
 
 export { MaterialAssignmentAdminContentTa as default };