@elice/material-assignment 1.240306.0-runboxtutoring.0 → 1.240306.0

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

@@ -1,25 +1,23 @@
-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 { FormattedDate } from 'react-intl';
 import { config, getOrgUserGet, getOrgMaterialAssignmentGet, getOrgMaterialAssignmentSubmissionList, getOrgMaterialAssignmentGradeResultGet, getOrgMaterialAssignmentGradeList, postOrgMaterialAssignmentGradeEdit } from '@elice/api-client';
-import { Flex, Vspace, Notification, Text, Hspace, Tooltip, Icon, InfoTable, Button, TableNext, Modal, Label, Input, Textarea } from '@elice/blocks';
+import { Notification, Flex, Vspace, 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 { useRawEliceIntl, FormattedDate } from '@elice/intl';
 import { useMaterialConfigApiClientUpdate } from '@elice/material-shared-utils';
 import dayjs from 'dayjs';
 import MaterialAssignmentContainer from '../shared/MaterialAssignmentContainer.js';
-import { StyledMaterialAssignmentAdminGradeWrapper } from './MaterialAssignmentAdmin.styled.js';
+import { StyledMaterialAssignmentAdminHeader, StyledMaterialAssignmentAdminHeaderCell, StyledMaterialAssignmentAdminGradeWrapper } from './MaterialAssignmentAdmin.styled.js';
 
-var MaterialAssignmentAdminContentTa = function MaterialAssignmentAdminContentTa(_ref) {
-  var materialAssignmentId = _ref.materialAssignmentId,
-    userId = _ref.userId,
-    adminUserId = _ref.adminUserId;
+const MaterialAssignmentAdminContentTa = ({
+  materialAssignmentId,
+  userId,
+  adminUserId
+}) => {
   var _a;
-  var intl = useRawEliceIntl();
   // Form
-  var gradeEditFormMethods = useForm({
+  const gradeEditFormMethods = useForm({
     defaultValues: {
       score: 0,
       comment: ''
@@ -27,100 +25,67 @@ var MaterialAssignmentAdminContentTa = function MaterialAssignmentAdminContentTa
     mode: 'onChange'
   });
   // State related with component
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    showGradeEditModal = _React$useState2[0],
-    setShowGradeEditModal = _React$useState2[1];
+  const [showGradeEditModal, setShowGradeEditModal] = React.useState(false);
   // State related with api
-  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);
+  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);
   // API Status
-  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 () {
+  const isReady = useMaterialConfigApiClientUpdate(config.init);
+  const [submissionListGetStatus, setSubmissionListGetStatus] = React.useState('idle');
+  const fetchUserGet = React.useCallback(() => {
     void getOrgUserGet({
-      userId: userId
-    }).then(function (res) {
-      return res.user;
-    }).then(setUser);
+      userId
+    }).then(res => res.user).then(setUser);
   }, [userId]);
-  var fetchMaterialAssignmentGet = React.useCallback(function () {
+  const fetchMaterialAssignmentGet = React.useCallback(() => {
     void getOrgMaterialAssignmentGet({
-      materialAssignmentId: materialAssignmentId
-    }).then(function (res) {
-      return res.materialAssignment;
-    }).then(setMaterialAssignment);
+      materialAssignmentId
+    }).then(res => res.materialAssignment).then(setMaterialAssignment);
   }, [materialAssignmentId]);
-  var fetchSubmissionList = React.useCallback(function () {
+  const fetchSubmissionList = React.useCallback(() => {
     setSubmissionListGetStatus('pending');
     void getOrgMaterialAssignmentSubmissionList({
-      materialAssignmentId: materialAssignmentId,
+      materialAssignmentId,
       offset: 0,
       count: 1,
       filterConditions: {
         isLast: true,
         userIds: [userId]
       }
-    }).then(function (res) {
-      return res.materialAssignmentSubmissions[0];
-    }).then(function (submission) {
+    }).then(res => res.materialAssignmentSubmissions[0]).then(submission => {
       setUserSubmission(submission !== null && submission !== void 0 ? submission : null);
       setSubmissionListGetStatus('resolved');
-    }).catch(function (err) {
+    }).catch(err => {
       console.error(err);
       setSubmissionListGetStatus('rejected');
     });
   }, [materialAssignmentId, userId]);
-  var fetchGradeResult = React.useCallback(function () {
+  const fetchGradeResult = React.useCallback(() => {
     void getOrgMaterialAssignmentGradeResultGet({
-      materialAssignmentId: materialAssignmentId,
-      userId: userId
-    }).then(function (res) {
-      return res.materialAssignmentGradeResult;
-    }).then(setGradeResult).catch(function () {
+      materialAssignmentId,
+      userId
+    }).then(res => res.materialAssignmentGradeResult).then(setGradeResult).catch(() => {
       setGradeResult(null);
     });
   }, [materialAssignmentId, userId]);
-  var fetchMyGrade = React.useCallback(function () {
+  const fetchMyGrade = React.useCallback(() => {
     void getOrgMaterialAssignmentGradeList({
-      materialAssignmentId: materialAssignmentId,
+      materialAssignmentId,
       offset: 0,
       count: 1,
       filterConditions: {
-        userId: userId,
+        userId,
         gradeUserId: adminUserId
       }
-    }).then(function (res) {
-      return res.materialAssignmentGrades[0];
-    }).then(function (grade) {
-      return setMyGrade(grade !== null && grade !== void 0 ? grade : null);
-    });
+    }).then(res => res.materialAssignmentGrades[0]).then(grade => setMyGrade(grade !== null && grade !== void 0 ? grade : null));
   }, [adminUserId, materialAssignmentId, userId]);
-  var handleGradeEditClick = function handleGradeEditClick() {
+  const handleGradeEditClick = () => {
     var _a, _b;
     setShowGradeEditModal(true);
     gradeEditFormMethods.reset({
@@ -128,51 +93,28 @@ var MaterialAssignmentAdminContentTa = function MaterialAssignmentAdminContentTa
       comment: (_b = myGrade === null || myGrade === void 0 ? void 0 : myGrade.comment) !== null && _b !== void 0 ? _b : ''
     });
   };
-  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(intl.formatMessage({
-              id: 'materialAssignment.notify.success'
-            }));
-            _context.next = 12;
-            break;
-          case 8:
-            _context.prev = 8;
-            _context.t0 = _context["catch"](1);
-            console.error(_context.t0);
-            Notification.error(intl.formatMessage({
-              id: 'materialAssignment.notify.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 () {
+  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(() => {
     if (!isReady) {
       return;
     }
@@ -182,410 +124,320 @@ var MaterialAssignmentAdminContentTa = function MaterialAssignmentAdminContentTa
     fetchSubmissionList();
     fetchMaterialAssignmentGet();
   }, [isReady, fetchUserGet, fetchMyGrade, fetchGradeResult, fetchSubmissionList, fetchMaterialAssignmentGet]);
-  var renderGradeResult = function renderGradeResult() {
-    return jsx(StyledMaterialAssignmentAdminGradeWrapper, {
+  const renderHeader = () => {
+    var _a;
+    return React.createElement(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"
+    }) : '--')));
+  };
+  const renderGradeResult = () => {
+    return React.createElement(StyledMaterialAssignmentAdminGradeWrapper, {
       wrap: true,
       width: "100%",
-      align: "center",
-      children: jsxs(Flex, {
-        auto: true,
-        align: "center",
-        children: [jsx(Text, {
-          role: "navy1",
-          size: "small",
-          lineHeight: "1.375rem",
-          children: user ? "".concat(user.fullname, " ").concat(intl.formatMessage({
-            id: 'materialAssignment.username.subfix'
-          })) : null
-        }), jsx(Hspace, {
-          width: 0.25
-        }), jsx(Tooltip, {
-          useMaxWidth: true,
-          placement: "top",
-          title: intl.formatMessage({
-            id: 'materialAssignment.modal.grade-result.tooltip'
-          }),
-          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(intl.formatMessage({
-            id: 'materialAssignment.table.column.score'
-          }, {
-            score: gradeResult.score
-          })).concat(intl.formatMessage({
-            id: 'materialAssignment.reveal'
-          })) : '--'
-        })]
-      })
-    });
+      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}점(공개됨)` : '--')));
   };
-  var renderSubmissionInfo = function renderSubmissionInfo() {
-    var statusText = function () {
+  const renderSubmissionInfo = () => {
+    const statusText = (() => {
       if (submissionListGetStatus === 'pending') {
         return null;
       }
       switch (true) {
         case !isUserSubmitted && isAssignmentClosed:
-          return jsx(Text, {
+          return React.createElement(Text, {
             bold: true,
             role: "danger",
-            size: "small",
-            children: intl.formatMessage({
-              id: 'materialAssignment.status.deadlineExpired'
-            })
-          });
+            size: "small"
+          }, "\uC81C\uCD9C \uAE30\uD55C \uB9CC\uB8CC");
         case isScoreFinalized:
-          return jsx(Text, {
+          return React.createElement(Text, {
             bold: true,
             role: "lightpurple",
-            size: "small",
-            children: intl.formatMessage({
-              id: 'materialAssignment.status.graded'
-            })
-          });
+            size: "small"
+          }, "\uCC44\uC810 \uC644\uB8CC");
         case isUserSubmitted:
-          return jsx(Text, {
+          return React.createElement(Text, {
             bold: true,
             role: "success",
-            size: "small",
-            children: intl.formatMessage({
-              id: 'materialAssignment.status.submitted'
-            })
-          });
+            size: "small"
+          }, "\uC81C\uCD9C\uB428");
         case !isUserSubmitted:
-          return jsx(Text, {
+          return React.createElement(Text, {
             bold: true,
             role: "warning",
-            size: "small",
-            children: intl.formatMessage({
-              id: 'materialAssignment.status.noSubmitted'
-            })
-          });
+            size: "small"
+          }, "\uBBF8\uC81C\uCD9C");
       }
-    }();
-    var submissionAttachment = function () {
+    })();
+    const submissionAttachment = (() => {
       if (!userSubmission) {
         return '--';
       }
       if (userSubmission.assignmentFileUrl) {
-        var assignmentFilename = decodeURIComponent(userSubmission.assignmentFileUrl && new URL(userSubmission.assignmentFileUrl).pathname.split('/').pop() || '');
-        return jsx("a", {
+        const assignmentFilename = decodeURIComponent(userSubmission.assignmentFileUrl && new URL(userSubmission.assignmentFileUrl).pathname.split('/').pop() || '');
+        return React.createElement("a", {
           href: userSubmission.assignmentFileUrl,
           download: assignmentFilename,
           target: "_blank",
-          rel: "noopener noreferrer",
-          children: jsx(Text, {
-            hoverable: true,
-            underline: true,
-            role: "white",
-            size: "small",
-            children: assignmentFilename
-          })
-        });
+          rel: "noopener noreferrer"
+        }, React.createElement(Text, {
+          hoverable: true,
+          underline: true,
+          role: "white",
+          size: "small"
+        }, assignmentFilename));
       }
       if (userSubmission === null || userSubmission === void 0 ? void 0 : userSubmission.assignmentUrl) {
-        return jsx("a", {
+        return React.createElement("a", {
           href: userSubmission.assignmentUrl,
           target: "_blank",
-          rel: "noopener noreferrer",
-          children: jsx(Text, {
-            hoverable: true,
-            underline: true,
-            role: "white",
-            size: "small",
-            children: userSubmission.assignmentUrl
-          })
-        });
+          rel: "noopener noreferrer"
+        }, React.createElement(Text, {
+          hoverable: true,
+          underline: true,
+          role: "white",
+          size: "small"
+        }, userSubmission.assignmentUrl));
       }
-    }();
-    return jsx(InfoTable, {
-      dark: true,
-      children: jsxs("tbody", {
-        children: [jsxs("tr", {
-          children: [jsx("td", {
-            children: intl.formatMessage({
-              id: 'materialAssignment.table.column.status'
-            })
-          }), jsx("td", {
-            children: statusText
-          })]
-        }), jsxs("tr", {
-          children: [jsx("td", {
-            children: intl.formatMessage({
-              id: 'materialAssignment.table.column.deadlineDatetime'
-            })
-          }), 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: intl.formatMessage({
-              id: 'materialAssignment.table.column.lastSubmitDatetime'
-            })
-          }), jsx("td", {
-            children: userSubmission ? jsx(FormattedDate, {
-              value: userSubmission.createdDatetime,
-              dateStyle: "medium",
-              timeStyle: "short"
-            }) : '--'
-          })]
-        }), jsxs("tr", {
-          children: [jsx("td", {
-            children: intl.formatMessage({
-              id: 'materialAssignment.table.column.uploadedAssignments'
-            })
-          }), jsx("td", {
-            children: submissionAttachment
-          })]
-        })]
-      })
-    });
+    })();
+    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))));
   };
-  var renderGrade = function renderGrade() {
-    var isGradeEditDisabled = !isAssignmentClosed || !isUserSubmitted || isScoreFinalized;
-    var tooltipTitle = function () {
+  const renderGrade = () => {
+    const isGradeEditDisabled = !isAssignmentClosed || !isUserSubmitted || isScoreFinalized;
+    const tooltipTitle = (() => {
       switch (true) {
         case isScoreFinalized:
-          return intl.formatMessage({
-            id: 'materialAssignment.grade-list.tooltip.scoreFinalized'
-          });
+          return '공개 이후 채점이 불가합니다.';
         case !isAssignmentClosed:
-          return intl.formatMessage({
-            id: 'materialAssignment.grade-list.tooltip.not-submitted'
-          });
+          return '제출 기한이 지난 이후 채점할 수 있습니다.';
         case !isUserSubmitted:
-          return intl.formatMessage({
-            id: 'materialAssignment.grade-list.tooltip.user-submitted'
-          });
+          return '미제출인 경우 채점할 수 없습니다.';
       }
-    }();
-    return jsxs(Flex, {
+    })();
+    return React.createElement(Flex, {
       column: true,
+      align: "center"
+    }, React.createElement(Flex, {
       align: "center",
-      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: intl.formatMessage({
-              id: 'materialAssignment.my-grading'
-            })
-          }), jsx(Text, {
-            block: true,
-            size: "tiny",
-            role: "navy3",
-            lineHeight: 1.6,
-            children: intl.formatMessage({
-              id: 'materialAssignment.view.information.related'
-            })
-          })]
-        }), 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: intl.formatMessage({
-                id: Boolean(myGrade) ? 'materialAssignment.edit-grading' : 'materialAssignment.start-grading'
-              })
-            })
-          })
-        })]
-      }), jsx(Vspace, {
-        height: 0.75
-      }), jsx(TableNext, {
-        dark: true,
-        emptyMessage: intl.formatMessage({
-          id: 'materialAssignment.table.empty-smg.grading-not-start'
-        }),
-        columns: [{
-          Header: intl.formatMessage({
-            id: 'materialAssignment.table-col.fullname'
-          }),
-          accessor: 'fullname'
-        }, {
-          Header: intl.formatMessage({
-            id: 'materialAssignment.table.column.assignmentScore'
-          }),
-          accessor: 'grade'
-        }, {
-          Header: intl.formatMessage({
-            id: 'materialAssignment.table-col.grade-datetime'
-          }),
-          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"
-          })
-        }] : []
-      })]
-    });
+      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"
+        })
+      }] : []
+    }));
   };
-  var renderGradeEditModal = function renderGradeEditModal() {
+  const renderGradeEditModal = () => {
     if (!showGradeEditModal) {
       return null;
     }
-    return jsxs(Modal, {
-      title: intl.formatMessage({
-        id: Boolean(myGrade) ? 'materialAssignment.edit-grading' : 'materialAssignment.grading-assignments'
-      }),
+    return React.createElement(Modal, {
+      title: Boolean(myGrade) ? '내 채점 수정' : '과제 채점',
       footerButtons: [{
-        label: intl.formatMessage({
-          id: 'materialAssignment.modal.button.confirm'
-        }),
+        label: '확인',
         size: 'small',
         role: 'primary',
         loading: gradeEditFormMethods.formState.isSubmitting,
         disabled: gradeEditFormMethods.formState.isSubmitting || !gradeEditFormMethods.formState.isValid,
         onClick: handleGradeEditSubmit
       }, {
-        label: intl.formatMessage({
-          id: 'materialAssignment.modal.button.cancel'
-        }),
+        label: '취소',
         size: 'small',
         role: 'gray1',
-        onClick: function onClick() {
+        onClick: () => {
           setShowGradeEditModal(false);
         }
       }],
-      onHide: function onHide() {
+      onHide: () => {
         setShowGradeEditModal(false);
-      },
-      children: [jsx(Label, {
-        bold: true,
-        block: true,
+      }
+    }, 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,
-        children: intl.formatMessage({
-          id: 'materialAssignment.score'
-        })
-      }), 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: intl.formatMessage({
-            id: 'materialAssignment.dot'
-          })
-        }), jsx(Text, {
-          role: "gray6",
-          size: "small",
-          children: intl.formatMessage({
-            id: 'materialAssignment.table.column.totalPoint'
-          }, {
-            point: 100
-          })
-        })]
-      }), jsx(Vspace, {
-        height: 1.25
-      }), jsx(Label, {
-        bold: true,
-        block: true,
-        children: intl.formatMessage({
-          id: 'materialAssignment.table.header.feedback'
-        })
-      }), 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 jsxs(Fragment, {
-    children: [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()]
+        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
       })
-    }), renderGradeEditModal()]
-  });
+    }));
+  };
+  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());
 };
 
 export { MaterialAssignmentAdminContentTa as default };