@elice/material-assignment 1.240718.0-trasncript.2 → 1.240718.1

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

@@ -1,9 +1,7 @@
-import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React, { forwardRef } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { config, getOrgUserGet, getOrgMaterialAssignmentGet, getOrgMaterialAssignmentSubmissionList, getOrgMaterialAssignmentGradeResultGet, getOrgMaterialAssignmentGradeList, postOrgMaterialAssignmentGradeEdit, postOrgMaterialAssignmentGradeResultManualScoreEdit, postOrgMaterialAssignmentGradeDelete } from '@elice/api-client';
-import { Flex, Vspace, ProfileImage, Hspace, Text, Tooltip, Icon, InfoTable, Button, TableNext, IconButton, Pagination, Modal, Label, Input, Textarea, Alert, Notification } from '@elice/blocks';
+import { Notification, Flex, Vspace, ProfileImage, Hspace, Text, Tooltip, Icon, InfoTable, Button, TableNext, IconButton, Pagination, Modal, Label, Input, Textarea, Alert } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eilStatusInfo, eilChat, eilDelete, eilArrowRightwardsBasic } from '@elice/icons';
 import { FormattedDate } from '@elice/intl';
@@ -12,173 +10,121 @@ import dayjs from 'dayjs';
 import MaterialAssignmentContainer from '../shared/MaterialAssignmentContainer.js';
 import { StyledMaterialAssignmentAdminHeader, StyledMaterialAssignmentAdminHeaderCell, StyledMaterialAssignmentAdminGradeWrapper, StyledMaterialAssignmentAdminTextareaWrapper, StyledMaterialAssignmentAdminManualScoreEditButtonWrapper, StyledMaterialAssignmentAdminManualScoreEditButton } from './MaterialAssignmentAdmin.styled.js';
 
-var FETCH_GRADE_LIST_COUNT = 5;
-var MaterialAssignmentAdminContent = forwardRef(function (_ref, ref) {
-  var materialAssignmentId = _ref.materialAssignmentId,
-    userId = _ref.userId,
-    adminUserId = _ref.adminUserId,
-    updateMaterialUserBrowserResponse = _ref.updateMaterialUserBrowserResponse;
+const FETCH_GRADE_LIST_COUNT = 5;
+const MaterialAssignmentAdminContent = forwardRef(({
+  materialAssignmentId,
+  userId,
+  adminUserId,
+  updateMaterialUserBrowserResponse
+}, ref) => {
   var _a;
   // Form
-  var gradeEditFormMethods = useForm({
+  const gradeEditFormMethods = useForm({
     defaultValues: {
       score: 0,
       comment: ''
     },
     mode: 'onChange'
   });
-  var manualScoreEditFormMethods = useForm({
+  const manualScoreEditFormMethods = useForm({
     defaultValues: {
       manualScore: 0
     },
     mode: 'onChange'
   });
   // API Status
-  var isReady = useMaterialConfigApiClientUpdate(config.init);
-  var _React$useState = React.useState('idle'),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    submissionListGetStatus = _React$useState2[0],
-    setSubmissionListGetStatus = _React$useState2[1];
-  var _React$useState3 = React.useState('idle'),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    gradeDeleteStatus = _React$useState4[0],
-    setGradeDeleteStatus = _React$useState4[1];
+  const isReady = useMaterialConfigApiClientUpdate(config.init);
+  const [submissionListGetStatus, setSubmissionListGetStatus] = React.useState('idle');
+  const [gradeDeleteStatus, setGradeDeleteStatus] = React.useState('idle');
   // State related with component
-  var _React$useState5 = React.useState(false),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    showGradeEditModal = _React$useState6[0],
-    setShowGradeEditModal = _React$useState6[1];
-  var _React$useState7 = React.useState(false),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    showManualScoreEditModal = _React$useState8[0],
-    setShowManualScoreEditModal = _React$useState8[1];
-  var _React$useState9 = React.useState(null),
-    _React$useState10 = _slicedToArray(_React$useState9, 2),
-    selectedGradeForShow = _React$useState10[0],
-    setSelectedGradeForShow = _React$useState10[1];
-  var _React$useState11 = React.useState(null),
-    _React$useState12 = _slicedToArray(_React$useState11, 2),
-    selectedGradeForDelete = _React$useState12[0],
-    setSelectedGradeForDelete = _React$useState12[1];
+  const [showGradeEditModal, setShowGradeEditModal] = React.useState(false);
+  const [showManualScoreEditModal, setShowManualScoreEditModal] = React.useState(false);
+  const [selectedGradeForShow, setSelectedGradeForShow] = React.useState(null);
+  const [selectedGradeForDelete, setSelectedGradeForDelete] = React.useState(null);
   // State related with api
-  var _React$useState13 = React.useState(null),
-    _React$useState14 = _slicedToArray(_React$useState13, 2),
-    user = _React$useState14[0],
-    setUser = _React$useState14[1];
-  var _React$useState15 = React.useState(null),
-    _React$useState16 = _slicedToArray(_React$useState15, 2),
-    materialAssignment = _React$useState16[0],
-    setMaterialAssignment = _React$useState16[1];
-  var _React$useState17 = React.useState(null),
-    _React$useState18 = _slicedToArray(_React$useState17, 2),
-    userSubmission = _React$useState18[0],
-    setUserSubmission = _React$useState18[1];
-  var _React$useState19 = React.useState(null),
-    _React$useState20 = _slicedToArray(_React$useState19, 2),
-    myGrade = _React$useState20[0],
-    setMyGrade = _React$useState20[1];
-  var _React$useState21 = React.useState(null),
-    _React$useState22 = _slicedToArray(_React$useState21, 2),
-    gradeResult = _React$useState22[0],
-    setGradeResult = _React$useState22[1];
-  var _React$useState23 = React.useState([]),
-    _React$useState24 = _slicedToArray(_React$useState23, 2),
-    gradeList = _React$useState24[0],
-    setGradeList = _React$useState24[1];
-  var _React$useState25 = React.useState(0),
-    _React$useState26 = _slicedToArray(_React$useState25, 2),
-    gradeListCount = _React$useState26[0],
-    setGradeListCount = _React$useState26[1];
-  var _React$useState27 = React.useState(1),
-    _React$useState28 = _slicedToArray(_React$useState27, 2),
-    gradeListPage = _React$useState28[0],
-    setGradeListPage = _React$useState28[1];
-  var gradeListOffset = (gradeListPage - 1) * FETCH_GRADE_LIST_COUNT;
-  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);
-  var fetchUserGet = React.useCallback(function () {
+  const [user, setUser] = React.useState(null);
+  const [materialAssignment, setMaterialAssignment] = React.useState(null);
+  const [userSubmission, setUserSubmission] = React.useState(null);
+  const [myGrade, setMyGrade] = React.useState(null);
+  const [gradeResult, setGradeResult] = React.useState(null);
+  const [gradeList, setGradeList] = React.useState([]);
+  const [gradeListCount, setGradeListCount] = React.useState(0);
+  const [gradeListPage, setGradeListPage] = React.useState(1);
+  const gradeListOffset = (gradeListPage - 1) * FETCH_GRADE_LIST_COUNT;
+  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);
+  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 fetchGradeList = React.useCallback(function () {
+  const fetchGradeList = React.useCallback(() => {
     void getOrgMaterialAssignmentGradeList({
-      materialAssignmentId: materialAssignmentId,
+      materialAssignmentId,
       offset: gradeListOffset,
       count: FETCH_GRADE_LIST_COUNT,
       filterConditions: {
-        userId: userId
+        userId
       }
-    }).then(function (_ref2) {
-      var materialAssignmentGrades = _ref2.materialAssignmentGrades,
-        materialAssignmentGradeCount = _ref2.materialAssignmentGradeCount;
+    }).then(({
+      materialAssignmentGrades,
+      materialAssignmentGradeCount
+    }) => {
       setGradeList(materialAssignmentGrades);
       setGradeListCount(materialAssignmentGradeCount);
     });
   }, [gradeListOffset, 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 handleManualScoreEditClick = function handleManualScoreEditClick() {
+  const handleManualScoreEditClick = () => {
     var _a, _b;
     setShowManualScoreEditModal(true);
     manualScoreEditFormMethods.reset({
       manualScore: (_b = (_a = gradeResult === null || gradeResult === void 0 ? void 0 : gradeResult.manualScore) !== null && _a !== void 0 ? _a : gradeResult === null || gradeResult === void 0 ? void 0 : gradeResult.avgCalcScore) !== null && _b !== void 0 ? _b : 0
     });
   };
-  var handleGradeEditClick = function handleGradeEditClick() {
+  const handleGradeEditClick = () => {
     var _a, _b;
     setShowGradeEditModal(true);
     gradeEditFormMethods.reset({
@@ -186,144 +132,82 @@ var MaterialAssignmentAdminContent = forwardRef(function (_ref, ref) {
       comment: (_b = myGrade === null || myGrade === void 0 ? void 0 : myGrade.comment) !== null && _b !== void 0 ? _b : ''
     });
   };
-  var handleGradeEditSubmit = gradeEditFormMethods.handleSubmit( /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref3) {
-      var score, comment;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            score = _ref3.score, comment = _ref3.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();
-            fetchGradeResult();
-            fetchGradeList();
-            if (typeof updateMaterialUserBrowserResponse === 'function') {
-              updateMaterialUserBrowserResponse(userId);
-            }
-            Notification.success('저장되었습니다');
-            _context.next = 15;
-            break;
-          case 11:
-            _context.prev = 11;
-            _context.t0 = _context["catch"](1);
-            console.error(_context.t0);
-            Notification.error('오류가 발생했습니다.');
-          case 15:
-            _context.prev = 15;
-            setShowGradeEditModal(false);
-            return _context.finish(15);
-          case 18:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[1, 11, 15, 18]]);
-    }));
-    return function (_x) {
-      return _ref4.apply(this, arguments);
-    };
-  }());
-  var handleGradeDeleteSubmit = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            if (selectedGradeForDelete) {
-              _context2.next = 2;
-              break;
-            }
-            return _context2.abrupt("return");
-          case 2:
-            _context2.prev = 2;
-            setGradeDeleteStatus('pending');
-            _context2.next = 6;
-            return postOrgMaterialAssignmentGradeDelete({
-              materialAssignmentGradeId: selectedGradeForDelete.id
-            });
-          case 6:
-            // If delete my grade, re-fetch my grade data.
-            if (adminUserId === selectedGradeForDelete.gradeUser.id) {
-              fetchMyGrade();
-            }
-            fetchGradeList();
-            fetchGradeResult();
-            setGradeDeleteStatus('resolved');
-            if (typeof updateMaterialUserBrowserResponse === 'function') {
-              updateMaterialUserBrowserResponse(userId);
-            }
-            Notification.success('저장되었습니다');
-            _context2.next = 19;
-            break;
-          case 14:
-            _context2.prev = 14;
-            _context2.t0 = _context2["catch"](2);
-            console.error(_context2.t0);
-            setGradeDeleteStatus('rejected');
-            Notification.error('오류가 발생했습니다.');
-          case 19:
-            _context2.prev = 19;
-            setSelectedGradeForDelete(null);
-            return _context2.finish(19);
-          case 22:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2, null, [[2, 14, 19, 22]]);
-    }));
-    return function handleGradeDeleteSubmit() {
-      return _ref5.apply(this, arguments);
-    };
-  }();
-  var handleManualScoreEditSubmit = manualScoreEditFormMethods.handleSubmit( /*#__PURE__*/function () {
-    var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(_ref6) {
-      var manualScore;
-      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
-          case 0:
-            manualScore = _ref6.manualScore;
-            _context3.prev = 1;
-            _context3.next = 4;
-            return postOrgMaterialAssignmentGradeResultManualScoreEdit({
-              userId: userId,
-              manualScore: manualScore,
-              materialAssignmentId: materialAssignmentId
-            });
-          case 4:
-            fetchGradeResult();
-            if (typeof updateMaterialUserBrowserResponse === 'function') {
-              updateMaterialUserBrowserResponse(userId);
-            }
-            Notification.success('저장되었습니다');
-            _context3.next = 13;
-            break;
-          case 9:
-            _context3.prev = 9;
-            _context3.t0 = _context3["catch"](1);
-            console.error(_context3.t0);
-            Notification.error('오류가 발생했습니다.');
-          case 13:
-            _context3.prev = 13;
-            setShowManualScoreEditModal(false);
-            return _context3.finish(13);
-          case 16:
-          case "end":
-            return _context3.stop();
-        }
-      }, _callee3, null, [[1, 9, 13, 16]]);
-    }));
-    return function (_x2) {
-      return _ref7.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();
+      fetchGradeResult();
+      fetchGradeList();
+      if (typeof updateMaterialUserBrowserResponse === 'function') {
+        updateMaterialUserBrowserResponse(userId);
+      }
+      Notification.success('저장되었습니다');
+    } catch (err) {
+      console.error(err);
+      Notification.error('오류가 발생했습니다.');
+    } finally {
+      setShowGradeEditModal(false);
+    }
+  });
+  const handleGradeDeleteSubmit = async () => {
+    if (!selectedGradeForDelete) {
+      return;
+    }
+    try {
+      setGradeDeleteStatus('pending');
+      await postOrgMaterialAssignmentGradeDelete({
+        materialAssignmentGradeId: selectedGradeForDelete.id
+      });
+      // If delete my grade, re-fetch my grade data.
+      if (adminUserId === selectedGradeForDelete.gradeUser.id) {
+        fetchMyGrade();
+      }
+      fetchGradeList();
+      fetchGradeResult();
+      setGradeDeleteStatus('resolved');
+      if (typeof updateMaterialUserBrowserResponse === 'function') {
+        updateMaterialUserBrowserResponse(userId);
+      }
+      Notification.success('저장되었습니다');
+    } catch (err) {
+      console.error(err);
+      setGradeDeleteStatus('rejected');
+      Notification.error('오류가 발생했습니다.');
+    } finally {
+      setSelectedGradeForDelete(null);
+    }
+  };
+  const handleManualScoreEditSubmit = manualScoreEditFormMethods.handleSubmit(async ({
+    manualScore
+  }) => {
+    try {
+      await postOrgMaterialAssignmentGradeResultManualScoreEdit({
+        userId,
+        manualScore,
+        materialAssignmentId
+      });
+      fetchGradeResult();
+      if (typeof updateMaterialUserBrowserResponse === 'function') {
+        updateMaterialUserBrowserResponse(userId);
+      }
+      Notification.success('저장되었습니다');
+    } catch (err) {
+      console.error(err);
+      Notification.error('오류가 발생했습니다.');
+    } finally {
+      setShowManualScoreEditModal(false);
+    }
+  });
+  React.useEffect(() => {
     if (!isReady) {
       return;
     }
@@ -334,346 +218,273 @@ var MaterialAssignmentAdminContent = forwardRef(function (_ref, ref) {
     fetchSubmissionList();
     fetchMaterialAssignmentGet();
   }, [isReady, fetchUserGet, fetchMyGrade, fetchGradeList, fetchGradeResult, fetchSubmissionList, fetchMaterialAssignmentGet]);
-  React.useImperativeHandle(ref, function () {
-    return {
-      refreshMaterialAssignment: function refreshMaterialAssignment() {
-        fetchMaterialAssignmentGet();
-      }
-    };
-  }, [fetchMaterialAssignmentGet]);
-  var renderHeader = function renderHeader() {
+  React.useImperativeHandle(ref, () => ({
+    refreshMaterialAssignment: () => {
+      fetchMaterialAssignmentGet();
+    }
+  }), [fetchMaterialAssignmentGet]);
+  const renderHeader = () => {
     var _a, _b, _c;
-    return jsxs(StyledMaterialAssignmentAdminHeader, {
+    return React.createElement(StyledMaterialAssignmentAdminHeader, {
       align: "center",
       padding: "1rem",
-      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 ? "".concat((_c = (_b = gradeResult.manualScore) !== null && _b !== void 0 ? _b : gradeResult.avgCalcScore) !== null && _c !== void 0 ? _c : 0).concat(isScoreFinalized ? '(공개됨)' : '(비공개)') : '--'
-        })]
-      }), 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"
-          }) : '--'
-        })]
-      })]
-    });
+      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 ? `${(_c = (_b = gradeResult.manualScore) !== null && _b !== void 0 ? _b : gradeResult.avgCalcScore) !== null && _c !== void 0 ? _c : 0}${isScoreFinalized ? '(공개됨)' : '(비공개)'}` : '--')), 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"
+    }) : '--')));
   };
-  var renderManualScoreEditButton = function renderManualScoreEditButton() {
-    return jsx(Tooltip, {
+  const renderManualScoreEditButton = () => {
+    return React.createElement(Tooltip, {
       placement: "top",
       title: isUserSubmitted ? '제출 기한이 지난 이후 조정할 수 있습니다.' : '미제출인 경우 조정할 수 없습니다.',
-      visible: !isAssignmentClosed || !isUserSubmitted ? undefined : false,
-      children: jsx(StyledMaterialAssignmentAdminManualScoreEditButtonWrapper, {
-        disabled: !isAssignmentClosed || !isUserSubmitted,
-        children: jsx(StyledMaterialAssignmentAdminManualScoreEditButton, {
-          disabled: !isAssignmentClosed || !isUserSubmitted,
-          underline: true,
-          role: "navy3",
-          size: "tiny",
-          onClick: handleManualScoreEditClick,
-          children: "\uC810\uC218 \uC870\uC815\uD558\uAE30"
-        })
-      })
-    });
+      visible: !isAssignmentClosed || !isUserSubmitted ? undefined : false
+    }, React.createElement(StyledMaterialAssignmentAdminManualScoreEditButtonWrapper, {
+      disabled: !isAssignmentClosed || !isUserSubmitted
+    }, React.createElement(StyledMaterialAssignmentAdminManualScoreEditButton, {
+      disabled: !isAssignmentClosed || !isUserSubmitted,
+      underline: true,
+      role: "navy3",
+      size: "tiny",
+      onClick: handleManualScoreEditClick
+    }, "\uC810\uC218 \uC870\uC815\uD558\uAE30")));
   };
-  var renderGradeResult = function renderGradeResult() {
+  const renderGradeResult = () => {
     var _a, _b;
-    return jsxs(StyledMaterialAssignmentAdminGradeWrapper, {
+    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, " \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 ? "".concat((_b = (_a = gradeResult.manualScore) !== null && _a !== void 0 ? _a : gradeResult.avgCalcScore) !== null && _b !== void 0 ? _b : 0).concat(isScoreFinalized ? '(공개됨)' : '(비공개)') : '--'
-        })]
-      }), renderManualScoreEditButton()]
-    });
+      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 ? `${(_b = (_a = gradeResult.manualScore) !== null && _a !== void 0 ? _a : gradeResult.avgCalcScore) !== null && _b !== void 0 ? _b : 0}${isScoreFinalized ? '(공개됨)' : '(비공개)'}` : '--')), renderManualScoreEditButton());
   };
-  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: "\uC81C\uCD9C \uAE30\uD55C \uB9CC\uB8CC"
-          });
+            size: "small"
+          }, "\uC81C\uCD9C \uAE30\uD55C \uB9CC\uB8CC");
         case isScoreFinalized:
-          return jsx(Text, {
+          return React.createElement(Text, {
             bold: true,
             role: "lightpurple",
-            size: "small",
-            children: "\uCC44\uC810 \uC644\uB8CC"
-          });
+            size: "small"
+          }, "\uCC44\uC810 \uC644\uB8CC");
         case isUserSubmitted:
-          return jsx(Text, {
+          return React.createElement(Text, {
             bold: true,
             role: "success",
-            size: "small",
-            children: "\uC81C\uCD9C\uB428"
-          });
+            size: "small"
+          }, "\uC81C\uCD9C\uB428");
         case !isUserSubmitted:
-          return jsx(Text, {
+          return React.createElement(Text, {
             bold: true,
             role: "warning",
-            size: "small",
-            children: "\uBBF8\uC81C\uCD9C"
-          });
+            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: "\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
-          })]
-        })]
-      })
-    });
+    })();
+    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 renderGradeList = function renderGradeList() {
-    return jsxs(Flex, {
+  const renderGradeList = () => {
+    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: "\uCC44\uC810 \uD604\uD669"
-          }), jsx(Text, {
-            block: true,
-            size: "tiny",
-            role: "navy3",
-            lineHeight: 1.6,
-            children: "\uCC44\uC810\uC644\uB8CC\uD55C \uCC44\uC810\uC790\uC758 \uC810\uC218\uC640 \uD53C\uB4DC\uBC31\uC744 \uBCFC \uC218 \uC788\uC2B5\uB2C8\uB2E4."
-          })]
-        }), jsx(Tooltip, {
-          placement: "top",
-          title: isUserSubmitted ? '제출 기한이 지난 이후 채점할 수 있습니다.' : '미제출인 경우 채점할 수 없습니다.',
-          visible: !isAssignmentClosed || !isUserSubmitted ? undefined : false,
-          children: jsx("span", {
-            children: jsx(Button, {
-              size: "small",
-              role: "lightpurple",
-              disabled: !isAssignmentClosed || !isUserSubmitted,
-              onClick: handleGradeEditClick,
-              children: Boolean(myGrade) ? '내 채점 수정' : '내 채점 시작'
-            })
-          })
-        })]
-      }), jsx(Vspace, {
-        height: 0.75
-      }), jsx(TableNext, {
-        dark: true,
-        emptyMessage: "\uCC44\uC810 \uC644\uB8CC\uD55C \uCC44\uC810\uC790\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
-        columns: [{
-          Header: '채점자명',
-          accessor: 'fullname'
-        }, {
-          Header: '과제 점수',
-          accessor: 'grade'
-        }, {
-          Header: '채점 일시',
-          accessor: 'created',
-          textAlign: 'left'
-        }],
-        data: gradeList.map(function (grade) {
-          return {
-            fullname: jsxs(Flex, {
-              children: [jsx(Text, {
-                noWrap: true,
-                role: "navy0",
-                size: "small",
-                children: "".concat(grade.gradeUser.fullname).concat(grade.gradeUser.id === adminUserId ? '(나)' : '')
-              }), jsx(Hspace, {
-                width: 0.25
-              }), jsx(Text, {
-                ellipsis: true,
-                role: "navy3",
-                size: "small",
-                children: grade.gradeUser.email
-              })]
-            }),
-            grade: grade.score,
-            created: jsxs(Flex, {
-              align: "center",
-              justify: "space-between",
-              children: [jsx(FormattedDate, {
-                value: grade.createdDatetime,
-                dateStyle: "medium",
-                timeStyle: "short"
-              }), jsxs(Flex, {
-                align: "center",
-                children: [jsx(IconButton, {
-                  icon: eilChat,
-                  size: "tiny",
-                  role: "navy3",
-                  onClick: function onClick() {
-                    setSelectedGradeForShow(grade);
-                  }
-                }), jsx(Hspace, {
-                  width: 0.5
-                }), jsx(IconButton, {
-                  icon: eilDelete,
-                  size: "tiny",
-                  role: "navy3",
-                  onClick: function onClick() {
-                    setSelectedGradeForDelete(grade);
-                  }
-                })]
-              })]
-            })
-          };
-        })
-      }), jsx(Vspace, {
-        height: 0.5
-      }), jsx(Pagination, {
-        dark: true,
-        offset: gradeListOffset,
-        count: FETCH_GRADE_LIST_COUNT,
-        total: gradeListCount,
-        isNext: gradeListOffset + FETCH_GRADE_LIST_COUNT < gradeListCount,
-        isPrev: gradeListOffset > 0,
-        onClickNext: function onClickNext() {
-          setGradeListPage(gradeListPage + 1);
-        },
-        onClickPrev: function onClickPrev() {
-          setGradeListPage(gradeListPage - 1);
-        }
-      })]
-    });
+      width: "100%"
+    }, React.createElement(Flex, {
+      column: true,
+      auto: true
+    }, React.createElement(Text, {
+      block: true,
+      bold: true,
+      role: "white",
+      lineHeight: 1.375
+    }, "\uCC44\uC810 \uD604\uD669"), React.createElement(Text, {
+      block: true,
+      size: "tiny",
+      role: "navy3",
+      lineHeight: 1.6
+    }, "\uCC44\uC810\uC644\uB8CC\uD55C \uCC44\uC810\uC790\uC758 \uC810\uC218\uC640 \uD53C\uB4DC\uBC31\uC744 \uBCFC \uC218 \uC788\uC2B5\uB2C8\uB2E4.")), React.createElement(Tooltip, {
+      placement: "top",
+      title: isUserSubmitted ? '제출 기한이 지난 이후 채점할 수 있습니다.' : '미제출인 경우 채점할 수 없습니다.',
+      visible: !isAssignmentClosed || !isUserSubmitted ? undefined : false
+    }, React.createElement("span", null, React.createElement(Button, {
+      size: "small",
+      role: "lightpurple",
+      disabled: !isAssignmentClosed || !isUserSubmitted,
+      onClick: handleGradeEditClick
+    }, Boolean(myGrade) ? '내 채점 수정' : '내 채점 시작')))), React.createElement(Vspace, {
+      height: 0.75
+    }), React.createElement(TableNext, {
+      dark: true,
+      emptyMessage: "\uCC44\uC810 \uC644\uB8CC\uD55C \uCC44\uC810\uC790\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
+      columns: [{
+        Header: '채점자명',
+        accessor: 'fullname'
+      }, {
+        Header: '과제 점수',
+        accessor: 'grade'
+      }, {
+        Header: '채점 일시',
+        accessor: 'created',
+        textAlign: 'left'
+      }],
+      data: gradeList.map(grade => ({
+        fullname: React.createElement(Flex, null, React.createElement(Text, {
+          noWrap: true,
+          role: "navy0",
+          size: "small"
+        }, `${grade.gradeUser.fullname}${grade.gradeUser.id === adminUserId ? '(나)' : ''}`), React.createElement(Hspace, {
+          width: 0.25
+        }), React.createElement(Text, {
+          ellipsis: true,
+          role: "navy3",
+          size: "small"
+        }, grade.gradeUser.email)),
+        grade: grade.score,
+        created: React.createElement(Flex, {
+          align: "center",
+          justify: "space-between"
+        }, React.createElement(FormattedDate, {
+          value: grade.createdDatetime,
+          dateStyle: "medium",
+          timeStyle: "short"
+        }), React.createElement(Flex, {
+          align: "center"
+        }, React.createElement(IconButton, {
+          icon: eilChat,
+          size: "tiny",
+          role: "navy3",
+          onClick: () => {
+            setSelectedGradeForShow(grade);
+          }
+        }), React.createElement(Hspace, {
+          width: 0.5
+        }), React.createElement(IconButton, {
+          icon: eilDelete,
+          size: "tiny",
+          role: "navy3",
+          onClick: () => {
+            setSelectedGradeForDelete(grade);
+          }
+        })))
+      }))
+    }), React.createElement(Vspace, {
+      height: 0.5
+    }), React.createElement(Pagination, {
+      dark: true,
+      offset: gradeListOffset,
+      count: FETCH_GRADE_LIST_COUNT,
+      total: gradeListCount,
+      isNext: gradeListOffset + FETCH_GRADE_LIST_COUNT < gradeListCount,
+      isPrev: gradeListOffset > 0,
+      onClickNext: () => {
+        setGradeListPage(gradeListPage + 1);
+      },
+      onClickPrev: () => {
+        setGradeListPage(gradeListPage - 1);
+      }
+    }));
   };
-  var renderGradeEditModal = function renderGradeEditModal() {
+  const renderGradeEditModal = () => {
     if (!showGradeEditModal) {
       return null;
     }
-    return jsxs(Modal, {
+    return React.createElement(Modal, {
       title: Boolean(myGrade) ? '내 채점 수정' : '과제 채점',
       footerButtons: [{
         label: '확인',
@@ -686,145 +497,129 @@ var MaterialAssignmentAdminContent = forwardRef(function (_ref, ref) {
         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: "\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(_ref8) {
-            var field = _ref8.field,
-              fieldState = _ref8.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(_ref9) {
-          var field = _ref9.field;
-          return jsx(Textarea, {
-            value: field.value,
-            wordLimit: 1000,
-            rows: 8,
-            onChange: field.onChange
-          });
-        }
-      })]
-    });
+        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
+      })
+    }));
   };
-  var renderGradeShowModal = function renderGradeShowModal() {
+  const renderGradeShowModal = () => {
     if (!selectedGradeForShow) {
       return null;
     }
-    return jsxs(Modal, {
+    return React.createElement(Modal, {
       title: "\uCC44\uC810 \uACB0\uACFC \uD655\uC778",
       footerButtons: [{
         label: '확인',
         size: 'small',
         role: 'primary',
-        onClick: function onClick() {
+        onClick: () => {
           setSelectedGradeForShow(null);
         }
       }],
-      onHide: function onHide() {
+      onHide: () => {
         setSelectedGradeForShow(null);
-      },
-      children: [jsx(Label, {
-        bold: true,
-        block: true,
-        required: true,
-        children: "\uC810\uC218"
-      }), jsx(Vspace, {
-        height: 0.5
-      }), jsxs(Flex, {
-        align: "center",
-        children: [jsx(Input, {
-          disabled: true,
-          value: selectedGradeForShow.score,
-          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(StyledMaterialAssignmentAdminTextareaWrapper, {
-        children: jsx(Textarea, {
-          disabled: true,
-          value: selectedGradeForShow.comment,
-          wordLimit: 1000,
-          rows: 8
-        })
-      })]
-    });
+      }
+    }, React.createElement(Label, {
+      bold: true,
+      block: true,
+      required: true
+    }, "\uC810\uC218"), React.createElement(Vspace, {
+      height: 0.5
+    }), React.createElement(Flex, {
+      align: "center"
+    }, React.createElement(Input, {
+      disabled: true,
+      value: selectedGradeForShow.score,
+      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(StyledMaterialAssignmentAdminTextareaWrapper, null, React.createElement(Textarea, {
+      disabled: true,
+      value: selectedGradeForShow.comment,
+      wordLimit: 1000,
+      rows: 8
+    })));
   };
-  var renderGradeDeleteModal = function renderGradeDeleteModal() {
+  const renderGradeDeleteModal = () => {
     if (!selectedGradeForDelete) {
       return null;
     }
-    return jsxs(Modal, {
+    return React.createElement(Modal, {
       title: "\uCC44\uC810 \uC0AD\uC81C",
       width: "narrow",
       footerButtons: [{
@@ -838,53 +633,47 @@ var MaterialAssignmentAdminContent = forwardRef(function (_ref, ref) {
         label: '취소',
         size: 'small',
         role: 'gray1',
-        onClick: function onClick() {
+        onClick: () => {
           setSelectedGradeForDelete(null);
         }
       }],
-      onHide: function onHide() {
+      onHide: () => {
         setSelectedGradeForDelete(null);
-      },
-      children: [jsx(Text, {
-        role: "gray9",
-        children: "\uC0AD\uC81C\uB41C \uC810\uC218\uC640 \uD53C\uB4DC\uBC31\uC740 \uB2E4\uC2DC \uBCF5\uAD6C\uB420 \uC218 \uC5C6\uC73C\uBA70 \uD559\uC0DD\uC758 \uD3C9\uADE0 \uC810\uC218\uAC00 \uBCC0\uACBD\uB420 \uC218 \uC788\uC2B5\uB2C8\uB2E4."
-      }), jsx(Vspace, {
-        height: 0.75
-      }), jsx(TableNext, {
-        columns: [{
-          Header: '채점자명',
-          accessor: 'fullname'
-        }, {
-          Header: '최종 점수',
-          accessor: 'score'
-        }],
-        data: [{
-          fullname: jsxs(Flex, {
-            children: [jsx(Text, {
-              noWrap: true,
-              role: "gray9",
-              size: "small",
-              children: selectedGradeForDelete.gradeUser.fullname
-            }), jsx(Hspace, {
-              width: 0.25
-            }), jsx(Text, {
-              ellipsis: true,
-              role: "gray5",
-              size: "small",
-              children: selectedGradeForDelete.gradeUser.email
-            })]
-          }),
-          score: selectedGradeForDelete.score
-        }]
-      })]
-    });
+      }
+    }, React.createElement(Text, {
+      role: "gray9"
+    }, "\uC0AD\uC81C\uB41C \uC810\uC218\uC640 \uD53C\uB4DC\uBC31\uC740 \uB2E4\uC2DC \uBCF5\uAD6C\uB420 \uC218 \uC5C6\uC73C\uBA70 \uD559\uC0DD\uC758 \uD3C9\uADE0 \uC810\uC218\uAC00 \uBCC0\uACBD\uB420 \uC218 \uC788\uC2B5\uB2C8\uB2E4."), React.createElement(Vspace, {
+      height: 0.75
+    }), React.createElement(TableNext, {
+      columns: [{
+        Header: '채점자명',
+        accessor: 'fullname'
+      }, {
+        Header: '최종 점수',
+        accessor: 'score'
+      }],
+      data: [{
+        fullname: React.createElement(Flex, null, React.createElement(Text, {
+          noWrap: true,
+          role: "gray9",
+          size: "small"
+        }, selectedGradeForDelete.gradeUser.fullname), React.createElement(Hspace, {
+          width: 0.25
+        }), React.createElement(Text, {
+          ellipsis: true,
+          role: "gray5",
+          size: "small"
+        }, selectedGradeForDelete.gradeUser.email)),
+        score: selectedGradeForDelete.score
+      }]
+    }));
   };
-  var renderManualScoreEditModal = function renderManualScoreEditModal() {
+  const renderManualScoreEditModal = () => {
     var _a, _b;
     if (!showManualScoreEditModal) {
       return null;
     }
-    return jsxs(Modal, {
+    return React.createElement(Modal, {
       title: "\uC810\uC218 \uC870\uC815",
       width: "narrow",
       footerButtons: [{
@@ -898,86 +687,76 @@ var MaterialAssignmentAdminContent = forwardRef(function (_ref, ref) {
         label: '취소',
         size: 'small',
         role: 'gray1',
-        onClick: function onClick() {
+        onClick: () => {
           setShowManualScoreEditModal(false);
         }
       }],
-      onHide: function onHide() {
+      onHide: () => {
         setShowManualScoreEditModal(false);
+      }
+    }, React.createElement(Alert, {
+      role: "warning"
+    }, "\uC810\uC218 \uC870\uC815 \uC774\uD6C4 \uB2E4\uC2DC \uD3C9\uADE0\uAC12\uC73C\uB85C \uB418\uB3CC\uB9B4 \uC218 \uC5C6\uC73C\uB2C8 \uC720\uC758\uD574 \uC8FC\uC138\uC694."), React.createElement(Vspace, {
+      height: 1
+    }), React.createElement(Flex, {
+      align: "center"
+    }, React.createElement(Input, {
+      disabled: true,
+      size: "small",
+      width: "xsmall",
+      type: "number",
+      label: "\uC774\uC804 \uC810\uC218",
+      value: (_b = (_a = gradeResult === null || gradeResult === void 0 ? void 0 : gradeResult.manualScore) !== null && _a !== void 0 ? _a : gradeResult === null || gradeResult === void 0 ? void 0 : gradeResult.avgCalcScore) !== null && _b !== void 0 ? _b : 0
+    }), React.createElement(Hspace, {
+      width: 1
+    }), React.createElement(Icon, {
+      icon: eilArrowRightwardsBasic
+    }), React.createElement(Hspace, {
+      width: 1
+    }), React.createElement(Controller, {
+      control: manualScoreEditFormMethods.control,
+      name: "manualScore",
+      rules: {
+        required: true,
+        min: 0,
+        max: 100
       },
-      children: [jsx(Alert, {
-        role: "warning",
-        children: "\uC810\uC218 \uC870\uC815 \uC774\uD6C4 \uB2E4\uC2DC \uD3C9\uADE0\uAC12\uC73C\uB85C \uB418\uB3CC\uB9B4 \uC218 \uC5C6\uC73C\uB2C8 \uC720\uC758\uD574 \uC8FC\uC138\uC694."
-      }), jsx(Vspace, {
-        height: 1
-      }), jsxs(Flex, {
-        align: "center",
-        children: [jsx(Input, {
-          disabled: true,
-          size: "small",
-          width: "xsmall",
-          type: "number",
-          label: "\uC774\uC804 \uC810\uC218",
-          value: (_b = (_a = gradeResult === null || gradeResult === void 0 ? void 0 : gradeResult.manualScore) !== null && _a !== void 0 ? _a : gradeResult === null || gradeResult === void 0 ? void 0 : gradeResult.avgCalcScore) !== null && _b !== void 0 ? _b : 0
-        }), jsx(Hspace, {
-          width: 1
-        }), jsx(Icon, {
-          icon: eilArrowRightwardsBasic
-        }), jsx(Hspace, {
-          width: 1
-        }), jsx(Controller, {
-          control: manualScoreEditFormMethods.control,
-          name: "manualScore",
-          rules: {
-            required: true,
-            min: 0,
-            max: 100
-          },
-          render: function render(_ref10) {
-            var field = _ref10.field,
-              fieldState = _ref10.fieldState;
-            return jsx(Input, Object.assign({}, field, {
-              invalid: fieldState.invalid,
-              size: "small",
-              width: "xsmall",
-              type: "number",
-              label: "\uC870\uC815 \uC810\uC218"
-            }));
-          }
-        }), jsx(Hspace, {
-          width: 0.75
-        }), jsx(Text, {
-          bold: true,
-          role: "gray9",
-          size: "small",
-          children: "\uC810"
-        }), jsx(Text, {
-          role: "gray6",
-          size: "small",
-          children: ' / 100점 만점'
-        })]
-      })]
-    });
+      render: ({
+        field,
+        fieldState
+      }) => React.createElement(Input, Object.assign({}, field, {
+        invalid: fieldState.invalid,
+        size: "small",
+        width: "xsmall",
+        type: "number",
+        label: "\uC870\uC815 \uC810\uC218"
+      }))
+    }), React.createElement(Hspace, {
+      width: 0.75
+    }), React.createElement(Text, {
+      bold: true,
+      role: "gray9",
+      size: "small"
+    }, "\uC810"), React.createElement(Text, {
+      role: "gray6",
+      size: "small"
+    }, ' / 100점 만점')));
   };
-  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
-        }), renderGradeList()]
-      })
-    }), renderGradeEditModal(), renderGradeShowModal(), renderGradeDeleteModal(), renderManualScoreEditModal()]
-  });
+  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
+  }), renderGradeList())), renderGradeEditModal(), renderGradeShowModal(), renderGradeDeleteModal(), renderManualScoreEditModal());
 });
 
 export { MaterialAssignmentAdminContent as default };