touchstudy-core 0.1.39 → 0.1.40

package/dist/index.modern.js

@@ -92,12 +92,16 @@ var encodeParams = function encodeParams(params) {
     return encodeURIComponent(key) + "=" + encodeURIComponent(params[key]);
   }).join('&');
 };
-var Roles;
-(function (Roles) {
-  Roles["Student"] = "Student";
-  Roles["Teacher"] = "Teacher";
-  Roles["Admin"] = "Admin";
-})(Roles || (Roles = {}));
+var Role;
+(function (Role) {
+  Role["Student"] = "Student";
+  Role["Teacher"] = "Teacher";
+  Role["Admin"] = "Admin";
+  Role["AcademyAdmin"] = "AcademyAdmin";
+})(Role || (Role = {}));
+var PrintHeaderClassName = "print-header";
+var PrintContentClassName = "print-content";
+var PrintContainerClassName = "print-container";
 
 var utcToLocalTime = (function (time, FORMAT) {
   if (time === DATE_MIN_VALUE || time === DATE_TIME_MIN_VALUE) return "";
@@ -139,19 +143,6 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 
 var styles = {"btn-login-google":"_2HqmH","block-login":"_wWIyO","box-login":"_38Lo1","btn-primary":"_rd4Uy","dropdown-menu":"_1krbH","header-avatar":"_RQaHE","dropdown-menu-flag":"_XK8oS","dropdown-content":"_3ys4W","dropdown-change":"_ToOW_","item-address":"_3sQlR","item-logout":"_3bqSM","title-address":"_1jgSI","img-avatar":"_35Ttz","item-contact":"_1wc7o","content-text":"_3S4f2","dropdown-content-language":"_3ajui","dropdown-item-language":"_3Y_y4","dropdown-item-language-active":"_CzNMi","dropdown-academy":"_3CMVp","image-academy":"_2ibYC","image-academy--item":"_3RDWF","academy-btn":"_1JMRU","switch-icon":"_N4FNf","dropdown-content-academy":"_31Dr0","dropdown-academy-item":"_3bjcz","noGutters":"_31ZQk","custom-col-2":"_3yXyK","custom-col-3":"_1RsJQ","custom-col-5":"_L42CP","custom-col-10":"_2u6eL","custom-row":"_8x7OP","custom-col":"_1JmTh","custom-col-4":"_3HO1e","custom-col-8":"_Oy31M","custom-col-12":"_3aUKo","custom-container":"_39LRs","form-label":"__Ut-u","form-control":"_2k4dX","btn-outline-primary":"_2PWdX","sort-icons":"_mQvLF","active":"_3oAH-","form-select":"_3W3aw","truncate":"_3NJzN","headers":"_3xnI5","logo-container":"_3YG70","tabBox":"_1CQPn","routerBox":"_3hx2T","tabText":"_3UyhW","router-link-active":"_1TGKA","router-link":"_1AqMh","userImg":"_2RI6G","disabled-link":"_3aVHg"};
 
-var AuthenticationMessage;
-(function (AuthenticationMessage) {
-  AuthenticationMessage["NotAllowedToRegister"] = "NotAllowedToRegister";
-  AuthenticationMessage["InvalidGoogleToken"] = "InvalidGoogleToken";
-})(AuthenticationMessage || (AuthenticationMessage = {}));
-var Role;
-(function (Role) {
-  Role["Student"] = "Student";
-  Role["Teacher"] = "Teacher";
-  Role["Admin"] = "Admin";
-  Role["AcademyAdmin"] = "AcademyAdmin";
-})(Role || (Role = {}));
-
 // A type of promise-like that resolves synchronously and supports only one observer
 const _Pact = /*#__PURE__*/(function() {
 	function _Pact() {}
@@ -221,6 +212,35 @@ function _isSettledPact(thenable) {
 	return thenable instanceof _Pact && thenable.s & 1;
 }
 
+// Asynchronously iterate through an object that has a length property, passing the index as the first argument to the callback (even as the length property changes)
+function _forTo(array, body, check) {
+	var i = -1, pact, reject;
+	function _cycle(result) {
+		try {
+			while (++i < array.length && (!check || !check())) {
+				result = body(i);
+				if (result && result.then) {
+					if (_isSettledPact(result)) {
+						result = result.v;
+					} else {
+						result.then(_cycle, reject || (reject = _settle.bind(null, pact = new _Pact(), 2)));
+						return;
+					}
+				}
+			}
+			if (pact) {
+				_settle(pact, 1, result);
+			} else {
+				pact = result;
+			}
+		} catch (e) {
+			_settle(pact || (pact = new _Pact()), 2, e);
+		}
+	}
+	_cycle();
+	return pact;
+}
+
 const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
 
 const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
@@ -1386,7 +1406,7 @@ var useSubjectSelect = function useSubjectSelect() {
   var isSuperAdmin = useSelector(function (state) {
     var _state$common2, _state$common2$user;
     return (state === null || state === void 0 ? void 0 : (_state$common2 = state.common) === null || _state$common2 === void 0 ? void 0 : (_state$common2$user = _state$common2.user) === null || _state$common2$user === void 0 ? void 0 : _state$common2$user.roles) || [];
-  }).includes(Roles.Admin) && !isDomain;
+  }).includes(Role.Admin) && !isDomain;
   var subjectOptions = useMemo(function () {
     return subjectList === null || subjectList === void 0 ? void 0 : subjectList.map(function (subject) {
       return {
@@ -3916,75 +3936,6 @@ var ChatItem = function ChatItem(props) {
   }));
 };
 
-var MessageSortBy;
-(function (MessageSortBy) {
-  MessageSortBy["CreatedAt"] = "CreatedAt";
-})(MessageSortBy || (MessageSortBy = {}));
-var OrderBy;
-(function (OrderBy) {
-  OrderBy["ASC"] = "ASC";
-  OrderBy["DESC"] = "DESC";
-})(OrderBy || (OrderBy = {}));
-var StudentSortBy;
-(function (StudentSortBy) {
-  StudentSortBy["CreatedAt"] = "CreatedAt";
-  StudentSortBy["FullName"] = "FullName";
-})(StudentSortBy || (StudentSortBy = {}));
-var StudentOrderBy;
-(function (StudentOrderBy) {
-  StudentOrderBy["ASC"] = "ASC";
-  StudentOrderBy["DESC"] = "DESC";
-})(StudentOrderBy || (StudentOrderBy = {}));
-var MessageAction;
-(function (MessageAction) {
-  MessageAction[MessageAction["Default"] = 0] = "Default";
-  MessageAction[MessageAction["Took"] = 1] = "Took";
-})(MessageAction || (MessageAction = {}));
-var MessageSourceType;
-(function (MessageSourceType) {
-  MessageSourceType[MessageSourceType["Default"] = 0] = "Default";
-  MessageSourceType[MessageSourceType["Exam"] = 1] = "Exam";
-  MessageSourceType[MessageSourceType["Class"] = 2] = "Class";
-})(MessageSourceType || (MessageSourceType = {}));
-var MessageStatus;
-(function (MessageStatus) {
-  MessageStatus["Default"] = "Sent";
-  MessageStatus["Sending"] = "Sending...";
-  MessageStatus["SentError"] = "Sent fail, Retry";
-})(MessageStatus || (MessageStatus = {}));
-
-var types = {
-  __proto__: null,
-  get MessageSortBy () { return MessageSortBy; },
-  get OrderBy () { return OrderBy; },
-  get StudentSortBy () { return StudentSortBy; },
-  get StudentOrderBy () { return StudentOrderBy; },
-  get MessageAction () { return MessageAction; },
-  get MessageSourceType () { return MessageSourceType; },
-  get MessageStatus () { return MessageStatus; }
-};
-
-var ExamStatus;
-(function (ExamStatus) {
-  ExamStatus["Default"] = "Default";
-  ExamStatus["Pending"] = "Pending";
-  ExamStatus["Inprogress"] = "Inprogress";
-  ExamStatus["Completed"] = "Completed";
-})(ExamStatus || (ExamStatus = {}));
-var Roles$1;
-(function (Roles) {
-  Roles["Student"] = "Student";
-  Roles["Teacher"] = "Teacher";
-  Roles["Admin"] = "Admin";
-})(Roles$1 || (Roles$1 = {}));
-var MESSAGE_DEFAULT_FILTER = {
-  currentPage: 1,
-  pageSize: 15,
-  textSearch: "",
-  sortColumnDirection: OrderBy.DESC,
-  sortColumnName: MessageSortBy.CreatedAt
-};
-
 var ChatList = function ChatList(_ref) {
   var _ref$messages = _ref.messages,
     messages = _ref$messages === void 0 ? [] : _ref$messages,
@@ -4009,7 +3960,7 @@ var ChatList = function ChatList(_ref) {
       });
     });
   }, [JSON.stringify(messages)]);
-  var isStudent = roles === null || roles === void 0 ? void 0 : roles.includes(Roles$1.Student);
+  var isStudent = roles === null || roles === void 0 ? void 0 : roles.includes(Role.Student);
   return React.createElement("ul", {
     ref: listItemRef,
     className: styles$1["list"] + " " + styles$1["padding-content"] + " d-flex h-100 flex-column mb-0  " + (!(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) ? 'justify-content-center' : '')
@@ -4253,7 +4204,7 @@ var ChatHeader = function ChatHeader(_ref) {
     t = _useTranslation.t;
   var theme = useTheme();
   var isTabletUp = useMediaQuery(theme.breakpoints.up('lg'));
-  var isStudent = roles === null || roles === void 0 ? void 0 : roles.includes(Roles$1.Student);
+  var isStudent = roles === null || roles === void 0 ? void 0 : roles.includes(Role.Student);
   var filterDurationExam = useMemo(function () {
     if (!durationExam) return;
     return moment.duration(durationExam);
@@ -4567,6 +4518,75 @@ var ChatContainer = function ChatContainer(_ref) {
   })));
 };
 
+var MessageSortBy;
+(function (MessageSortBy) {
+  MessageSortBy["CreatedAt"] = "CreatedAt";
+})(MessageSortBy || (MessageSortBy = {}));
+var OrderBy;
+(function (OrderBy) {
+  OrderBy["ASC"] = "ASC";
+  OrderBy["DESC"] = "DESC";
+})(OrderBy || (OrderBy = {}));
+var StudentSortBy;
+(function (StudentSortBy) {
+  StudentSortBy["CreatedAt"] = "CreatedAt";
+  StudentSortBy["FullName"] = "FullName";
+})(StudentSortBy || (StudentSortBy = {}));
+var StudentOrderBy;
+(function (StudentOrderBy) {
+  StudentOrderBy["ASC"] = "ASC";
+  StudentOrderBy["DESC"] = "DESC";
+})(StudentOrderBy || (StudentOrderBy = {}));
+var MessageAction;
+(function (MessageAction) {
+  MessageAction[MessageAction["Default"] = 0] = "Default";
+  MessageAction[MessageAction["Took"] = 1] = "Took";
+})(MessageAction || (MessageAction = {}));
+var MessageSourceType;
+(function (MessageSourceType) {
+  MessageSourceType[MessageSourceType["Default"] = 0] = "Default";
+  MessageSourceType[MessageSourceType["Exam"] = 1] = "Exam";
+  MessageSourceType[MessageSourceType["Class"] = 2] = "Class";
+})(MessageSourceType || (MessageSourceType = {}));
+var MessageStatus;
+(function (MessageStatus) {
+  MessageStatus["Default"] = "Sent";
+  MessageStatus["Sending"] = "Sending...";
+  MessageStatus["SentError"] = "Sent fail, Retry";
+})(MessageStatus || (MessageStatus = {}));
+
+var types = {
+  __proto__: null,
+  get MessageSortBy () { return MessageSortBy; },
+  get OrderBy () { return OrderBy; },
+  get StudentSortBy () { return StudentSortBy; },
+  get StudentOrderBy () { return StudentOrderBy; },
+  get MessageAction () { return MessageAction; },
+  get MessageSourceType () { return MessageSourceType; },
+  get MessageStatus () { return MessageStatus; }
+};
+
+var ExamStatus;
+(function (ExamStatus) {
+  ExamStatus["Default"] = "Default";
+  ExamStatus["Pending"] = "Pending";
+  ExamStatus["Inprogress"] = "Inprogress";
+  ExamStatus["Completed"] = "Completed";
+})(ExamStatus || (ExamStatus = {}));
+var Roles;
+(function (Roles) {
+  Roles["Student"] = "Student";
+  Roles["Teacher"] = "Teacher";
+  Roles["Admin"] = "Admin";
+})(Roles || (Roles = {}));
+var MESSAGE_DEFAULT_FILTER = {
+  currentPage: 1,
+  pageSize: 15,
+  textSearch: "",
+  sortColumnDirection: OrderBy.DESC,
+  sortColumnName: MessageSortBy.CreatedAt
+};
+
 var useMessageList = function useMessageList() {
   var _useState = useState([]),
     messages = _useState[0],
@@ -5202,7 +5222,7 @@ var useCategorySelect = function useCategorySelect(_ref) {
   var isSuperAdmin = useSelector(function (state) {
     var _state$common2, _state$common2$user;
     return (state === null || state === void 0 ? void 0 : (_state$common2 = state.common) === null || _state$common2 === void 0 ? void 0 : (_state$common2$user = _state$common2.user) === null || _state$common2$user === void 0 ? void 0 : _state$common2$user.roles) || [];
-  }).includes(Roles.Admin) && !isDomain;
+  }).includes(Role.Admin) && !isDomain;
   var categoryOptions = useMemo(function () {
     return categoryList === null || categoryList === void 0 ? void 0 : categoryList.map(function (category) {
       var _category$path;
@@ -5942,7 +5962,7 @@ var useExam = function useExam(props) {
     setExamRequest = _useState2[1];
   var isTeacher = useSelector(function (state) {
     var _state$common, _state$common$user;
-    return state === null || state === void 0 ? void 0 : (_state$common = state.common) === null || _state$common === void 0 ? void 0 : (_state$common$user = _state$common.user) === null || _state$common$user === void 0 ? void 0 : _state$common$user.roles.includes(Roles.Teacher);
+    return state === null || state === void 0 ? void 0 : (_state$common = state.common) === null || _state$common === void 0 ? void 0 : (_state$common$user = _state$common.user) === null || _state$common$user === void 0 ? void 0 : _state$common$user.roles.includes(Role.Teacher);
   });
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -8406,12 +8426,12 @@ var TabList = [{
   label: "problem_analysis",
   value: 3
 }];
-var Roles$2;
+var Roles$1;
 (function (Roles) {
   Roles["Student"] = "Student";
   Roles["Teacher"] = "Teacher";
   Roles["Admin"] = "Admin";
-})(Roles$2 || (Roles$2 = {}));
+})(Roles$1 || (Roles$1 = {}));
 var EXAM_RESULT = {
   "id": 6047,
   "teacherId": 1,
@@ -9103,7 +9123,7 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
     var _state$common, _state$common$user;
     return (state === null || state === void 0 ? void 0 : (_state$common = state.common) === null || _state$common === void 0 ? void 0 : (_state$common$user = _state$common.user) === null || _state$common$user === void 0 ? void 0 : _state$common$user.roles) || [];
   });
-  var isStudent = roles === null || roles === void 0 ? void 0 : roles.includes(Roles$2.Student);
+  var isStudent = roles === null || roles === void 0 ? void 0 : roles.includes(Role.Student);
   var examCode = query.get("examCode") || "";
   var language = useSelector(function (state) {
     var _state$common2;
@@ -9388,57 +9408,154 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
   }, [JSON.stringify(timelyOrderQuestion), dataChartIndex, language]);
   var handleExportPdf = function handleExportPdf() {
     try {
-      var canvas = document.querySelector("#canvas");
-      var headerCanvas = document.querySelector("#header-canvas");
-      if (!canvas || !headerCanvas) return Promise.resolve();
-      var doc = new jsPDF({
-        orientation: "p",
-        unit: "px",
-        format: "a4"
-      });
-      var WIDTH_PAPER = doc.internal.pageSize.width;
-      var HEIGHT_PAPER = doc.internal.pageSize.height;
-      var line = 0;
-      var imgWidth = WIDTH_PAPER;
-      var chartWidth = WIDTH_PAPER - 20;
-      return Promise.resolve(html2canvas(headerCanvas)).then(function (header) {
-        function _temp11() {
-          doc.save("download.pdf");
+      var _temp23 = function _temp23(_result) {
+        if (_exit) return _result;
+        dispatch(setLoading(false));
+      };
+      var _exit = false;
+      dispatch(setLoading(true));
+      var _temp22 = _catch(function () {
+        var canvas = document.querySelector("#canvas");
+        var headerCanvas = document.querySelector("#header-canvas");
+        if (!canvas || !headerCanvas) {
+          _exit = true;
+          return;
         }
-        var imgHeaderHeight = header.height * imgWidth / header.width;
-        var imgHeaderData = header.toDataURL('image/png');
-        doc.addImage(imgHeaderData, 'PNG', 0, 0, imgWidth, imgHeaderHeight);
-        line += imgHeaderHeight;
-        if (line > HEIGHT_PAPER) {
+        var doc = new jsPDF({
+          orientation: "p",
+          unit: "px",
+          format: "a4"
+        });
+        var WIDTH_PAPER = doc.internal.pageSize.width;
+        var HEIGHT_PAPER = doc.internal.pageSize.height;
+        var line = 0;
+        var breakPage = function breakPage() {
           doc.addPage();
           line = 20;
-        }
-        var _temp10 = function () {
-          if (canvas && canvas.childElementCount > 0) {
-            var _index = 0;
-            var _temp9 = _for(function () {
-              return _index < canvas.childElementCount;
-            }, function () {
-              return _index++;
-            }, function () {
-              var chart = canvas.children.item(_index);
-              return Promise.resolve(html2canvas(chart)).then(function (chartCanvas) {
-                var imgBodyHeight = chartCanvas.height * chartWidth / chartCanvas.width;
-                var imgBodyData = chartCanvas.toDataURL('image/png');
-                line += 10;
-                if (line + imgBodyHeight > HEIGHT_PAPER) {
-                  doc.addPage();
-                  line = 20;
+        };
+        var imgWidth = WIDTH_PAPER;
+        var chartWidth = WIDTH_PAPER - 20;
+        return Promise.resolve(html2canvas(headerCanvas)).then(function (header) {
+          function _temp21() {
+            doc.save("download.pdf");
+          }
+          var imgHeaderHeight = header.height * imgWidth / header.width;
+          var imgHeaderData = header.toDataURL('image/png');
+          doc.addImage(imgHeaderData, 'PNG', 0, 0, imgWidth, imgHeaderHeight);
+          line += imgHeaderHeight;
+          if (line > HEIGHT_PAPER) breakPage();
+          var _temp20 = function () {
+            if (canvas && canvas.childElementCount > 0) {
+              var _index = 0;
+              var _temp19 = _for(function () {
+                return _index < canvas.childElementCount;
+              }, function () {
+                return _index++;
+              }, function () {
+                function _temp18() {
+                  function _temp16() {
+                    line += 20;
+                  }
+                  var _temp15 = function () {
+                    if (printContainerEls.length) {
+                      var _temp14 = _forTo(printContainerEls, function (i) {
+                        function _temp13() {
+                          var printHeader = function printHeader(top) {
+                            if (top === void 0) {
+                              top = 0;
+                            }
+                            try {
+                              if (!printHeaderCanvas) return Promise.resolve();
+                              var _height = printHeaderCanvas.height * chartWidth / printHeaderCanvas.width;
+                              var _data = printHeaderCanvas.toDataURL('image/png');
+                              line += top;
+                              if (line + _height > HEIGHT_PAPER) breakPage();
+                              doc.addImage(_data, 'PNG', 10, line, chartWidth, _height);
+                              line += _height;
+                              return Promise.resolve();
+                            } catch (e) {
+                              return Promise.reject(e);
+                            }
+                          };
+                          return Promise.resolve(printHeader(10)).then(function () {
+                            var printContents = printContainerEl.querySelectorAll("." + PrintContentClassName);
+                            if (!printContents.length) return;
+                            var _temp11 = _forTo(printContents, function (j) {
+                              var rowItem = printContents[j];
+                              return Promise.resolve(html2canvas(rowItem)).then(function (rowItemCanvas) {
+                                function _temp10() {
+                                  doc.addImage(data, 'PNG', 10, line, chartWidth, height);
+                                  line += height;
+                                }
+                                var height = rowItemCanvas.height * chartWidth / rowItemCanvas.width;
+                                var data = rowItemCanvas.toDataURL('image/png');
+                                var _temp9 = function () {
+                                  if (line + height > HEIGHT_PAPER) {
+                                    breakPage();
+                                    return Promise.resolve(printHeader()).then(function () {});
+                                  }
+                                }();
+                                return _temp9 && _temp9.then ? _temp9.then(_temp10) : _temp10(_temp9);
+                              });
+                            });
+                            if (_temp11 && _temp11.then) return _temp11.then(function () {});
+                          });
+                        }
+                        var printContainerEl = printContainerEls[i];
+                        var printHeaderEl = printContainerEl.querySelector("." + PrintHeaderClassName);
+                        var printHeaderCanvas = null;
+                        var _temp12 = function () {
+                          if (printHeaderEl) {
+                            return Promise.resolve(html2canvas(printHeaderEl)).then(function (_html2canvas) {
+                              printHeaderCanvas = _html2canvas;
+                            });
+                          }
+                        }();
+                        return _temp12 && _temp12.then ? _temp12.then(_temp13) : _temp13(_temp12);
+                      });
+                      if (_temp14 && _temp14.then) return _temp14.then(function () {});
+                    } else {
+                      return Promise.resolve(html2canvas(chart)).then(function (chartCanvas) {
+                        var imgBodyHeight = chartCanvas.height * chartWidth / chartCanvas.width;
+                        var imgBodyData = chartCanvas.toDataURL('image/png');
+                        line += 10;
+                        if (line + imgBodyHeight > HEIGHT_PAPER) breakPage();
+                        doc.addImage(imgBodyData, 'PNG', 10, line, chartWidth, imgBodyHeight);
+                        line += imgBodyHeight;
+                      });
+                    }
+                  }();
+                  return _temp15 && _temp15.then ? _temp15.then(_temp16) : _temp16(_temp15);
                 }
-                doc.addImage(imgBodyData, 'PNG', 10, line, chartWidth, imgBodyHeight);
-                line += imgBodyHeight;
+                var chart = canvas.children.item(_index);
+                if (chart.getAttribute("id") === "header-canvas") return;
+                var chartTitle = chart.querySelector(".chart-title");
+                var printContainerEls = chart.querySelectorAll("." + PrintContainerClassName);
+                var _temp17 = function () {
+                  if (chartTitle && printContainerEls.length) {
+                    return Promise.resolve(html2canvas(chartTitle)).then(function (printChartTitleCanvas) {
+                      var height = printChartTitleCanvas.height * chartWidth / printChartTitleCanvas.width;
+                      var data = printChartTitleCanvas.toDataURL('image/png');
+                      if (line + height + 10 > HEIGHT_PAPER) breakPage();else line + 10;
+                      doc.addImage(data, 'PNG', 10, line, chartWidth, height);
+                      line += height;
+                    });
+                  }
+                }();
+                return _temp17 && _temp17.then ? _temp17.then(_temp18) : _temp18(_temp17);
               });
-            });
-            if (_temp9 && _temp9.then) return _temp9.then(function () {});
-          }
-        }();
-        return _temp10 && _temp10.then ? _temp10.then(_temp11) : _temp11(_temp10);
+              if (_temp19 && _temp19.then) return _temp19.then(function () {});
+            }
+          }();
+          return _temp20 && _temp20.then ? _temp20.then(_temp21) : _temp21(_temp20);
+        });
+      }, function (error) {
+        console.log({
+          error: error
+        });
+        toast.error("Print pdf failure!");
       });
+      return Promise.resolve(_temp22 && _temp22.then ? _temp22.then(_temp23) : _temp23(_temp22));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -10941,7 +11058,8 @@ function CreateNewQuestionDialog(_ref) {
 function MyAnswer(_ref) {
   var data = _ref.data,
     categories = _ref.categories,
-    isStudent = _ref.isStudent;
+    isStudent = _ref.isStudent,
+    isPrint = _ref.isPrint;
   var _useCreateQuestionDia = useCreateQuestionDialog(),
     handleCreateQuestion = _useCreateQuestionDia.handleCreateQuestion,
     openCreateQuestionDialog = _useCreateQuestionDia.openCreateQuestionDialog,
@@ -10958,94 +11076,8 @@ function MyAnswer(_ref) {
     handleSelectQuestionOrder(id);
     toggleCreateQuestion();
   };
-  return React.createElement("div", {
-    className: styles$4["myanswer"]
-  }, formattedData && formattedData.length > 0 && formattedData.map(function (item) {
-    return React.createElement("div", {
-      key: item.category.id
-    }, React.createElement(Stack, {
-      bgcolor: "#F9FAFB",
-      flexDirection: "row",
-      padding: "12px",
-      className: styles$4["myAnswerItem"] + " " + styles["noGutters"]
-    }, React.createElement("div", {
-      className: styles["custom-col-2"],
-      style: {
-        display: "flex",
-        gap: "4px"
-      }
-    }, React.createElement(Typography, {
-      sx: {
-        fontSize: "13px",
-        fontWeight: 600,
-        color: "#97A1AF"
-      }
-    }, "\uBB38\uC81C \uBC88\uD638")), React.createElement("div", {
-      className: styles["custom-col-2"],
-      style: {
-        display: "flex",
-        gap: "4px"
-      }
-    }, React.createElement(Typography, {
-      sx: {
-        fontSize: "13px",
-        fontWeight: 600,
-        color: "#97A1AF"
-      }
-    }, "\uC815\uB2F5")), React.createElement("div", {
-      className: styles["custom-col-2"],
-      style: {
-        display: "flex",
-        gap: "4px"
-      }
-    }, React.createElement(Typography, {
-      sx: {
-        fontSize: "13px",
-        fontWeight: 600,
-        color: "#97A1AF"
-      }
-    }, "\uD480\uC774 \uC2DC\uAC04")), React.createElement("div", {
-      className: styles["custom-col-2"],
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: "4px"
-      }
-    }, React.createElement(Typography, {
-      sx: {
-        fontSize: "13px",
-        fontWeight: 600,
-        color: "#97A1AF"
-      }
-    }, "\uC0C1\uC704\uAD8C \uBE44\uAD50")), React.createElement("div", {
-      className: styles["custom-col-2"],
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: "4px"
-      }
-    }, React.createElement(Typography, {
-      sx: {
-        fontSize: "13px",
-        fontWeight: 600,
-        color: "#97A1AF"
-      }
-    }, "\uC804\uCCB4 \uC815\uB2F5\uB960"))), React.createElement("div", {
-      className: styles$4["titleMyAnswer2"]
-    }, React.createElement(Typography, {
-      sx: {
-        color: "#97A1AF",
-        fontSize: "12px"
-      }
-    }, "\uCE74\uD14C\uACE0\uB9AC"), React.createElement(Typography, {
-      sx: {
-        color: "#414E62",
-        fontSize: "12px",
-        fontWeight: 700
-      }
-    }, item.category.name)), React.createElement("div", {
-      className: styles$4["contentMyAnswer"]
-    }, item.questions.map(function (question, index) {
+  var renderQuestions = function renderQuestions(questions) {
+    return questions.map(function (question, index) {
       return React.createElement("div", {
         style: isOpenTime[question.id] ? {
           borderTop: index !== 0 ? "1px solid #E4E7EC" : "",
@@ -11140,7 +11172,108 @@ function MyAnswer(_ref) {
       }, React.createElement(iconChat, {
         color: "#5458D5"
       })))));
-    })));
+    });
+  };
+  var renderPrintQuestions = function renderPrintQuestions(questions) {
+    var chunkedQuestions = _.chunk(questions, 5);
+    return chunkedQuestions.map(function (i, index) {
+      return React.createElement("div", {
+        key: index,
+        className: PrintContentClassName
+      }, renderQuestions(i));
+    });
+  };
+  return React.createElement("div", {
+    className: styles$4["myanswer"]
+  }, formattedData && formattedData.length > 0 && formattedData.map(function (item) {
+    return React.createElement("div", {
+      key: item.category.id,
+      className: isPrint ? PrintContainerClassName : ""
+    }, React.createElement("div", {
+      className: isPrint ? PrintHeaderClassName : ""
+    }, React.createElement(Stack, {
+      bgcolor: "#F9FAFB",
+      flexDirection: "row",
+      padding: "12px",
+      className: styles$4["myAnswerItem"] + " " + styles["noGutters"]
+    }, React.createElement("div", {
+      className: styles["custom-col-2"],
+      style: {
+        display: "flex",
+        gap: "4px"
+      }
+    }, React.createElement(Typography, {
+      sx: {
+        fontSize: "13px",
+        fontWeight: 600,
+        color: "#97A1AF"
+      }
+    }, "\uBB38\uC81C \uBC88\uD638")), React.createElement("div", {
+      className: styles["custom-col-2"],
+      style: {
+        display: "flex",
+        gap: "4px"
+      }
+    }, React.createElement(Typography, {
+      sx: {
+        fontSize: "13px",
+        fontWeight: 600,
+        color: "#97A1AF"
+      }
+    }, "\uC815\uB2F5")), React.createElement("div", {
+      className: styles["custom-col-2"],
+      style: {
+        display: "flex",
+        gap: "4px"
+      }
+    }, React.createElement(Typography, {
+      sx: {
+        fontSize: "13px",
+        fontWeight: 600,
+        color: "#97A1AF"
+      }
+    }, "\uD480\uC774 \uC2DC\uAC04")), React.createElement("div", {
+      className: styles["custom-col-2"],
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "4px"
+      }
+    }, React.createElement(Typography, {
+      sx: {
+        fontSize: "13px",
+        fontWeight: 600,
+        color: "#97A1AF"
+      }
+    }, "\uC0C1\uC704\uAD8C \uBE44\uAD50")), React.createElement("div", {
+      className: styles["custom-col-2"],
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "4px"
+      }
+    }, React.createElement(Typography, {
+      sx: {
+        fontSize: "13px",
+        fontWeight: 600,
+        color: "#97A1AF"
+      }
+    }, "\uC804\uCCB4 \uC815\uB2F5\uB960"))), React.createElement("div", {
+      className: styles$4["titleMyAnswer2"]
+    }, React.createElement(Typography, {
+      sx: {
+        color: "#97A1AF",
+        fontSize: "12px"
+      }
+    }, "\uCE74\uD14C\uACE0\uB9AC"), React.createElement(Typography, {
+      sx: {
+        color: "#414E62",
+        fontSize: "12px",
+        fontWeight: 700
+      }
+    }, item.category.name))), React.createElement("div", {
+      className: styles$4["contentMyAnswer"]
+    }, isPrint ? renderPrintQuestions(item.questions) : renderQuestions(item.questions)));
   }), React.createElement(CreateNewQuestionDialog, {
     questions: data === null || data === void 0 ? void 0 : data.questions,
     questionOrderSelected: questionOrderSelected,
@@ -11193,10 +11326,74 @@ var iconBtnNextChart = function iconBtnNextChart(_ref) {
   }));
 };
 
-function CompareGrass(_ref) {
-  var effectSize = _ref.effectSize;
+var CompareGrass = function CompareGrass(_ref) {
+  var effectSize = _ref.effectSize,
+    isPrint = _ref.isPrint;
+  var renderTableBody = function renderTableBody(effectSize) {
+    return effectSize.map(function (item, index) {
+      return React.createElement("tr", {
+        id: "print-item",
+        key: item.id,
+        style: index < effectSize.length - 1 ? {
+          borderBottom: "1px solid #e4e7ec"
+        } : {}
+      }, React.createElement("td", {
+        className: styles$4["tdcolumn1"]
+      }, "\uBB38\uC81C ", item.questionOrder + 1), React.createElement("td", {
+        style: {
+          textAlign: "center",
+          color: "#202B37"
+        }
+      }, item.correctAnswers, "\uBC88"), React.createElement("td", {
+        className: styles$4["tdcolumn3"],
+        style: {
+          color: item.isCorrect ? "#1EE288" : "#F34B4B"
+        }
+      }, item.selectedAnswers ? item.selectedAnswers + "\uBC88" : ""), React.createElement("td", {
+        style: {
+          textAlign: "center",
+          color: "#414E62"
+        }
+      }, item.mostSelectedAnswers ? item.mostSelectedAnswers + "\uBC88" : ""), React.createElement("td", null, React.createElement("div", {
+        className: styles$4["classification"]
+      }, item.problemCategories.map(function (problem, index) {
+        return React.createElement("div", {
+          key: index
+        }, problem === 1 && React.createElement("span", {
+          style: {
+            border: "1px solid #1EE288"
+          }
+        }, "\uC26C\uC6B4 \uBB38\uC81C"), problem === 3 && React.createElement("span", {
+          style: {
+            border: "1px solid #FDDB64"
+          }
+        }, "\uD568\uC815 \uBB38\uC81C"), problem === 2 && React.createElement("span", {
+          style: {
+            border: "1px solid #F34B4B"
+          }
+        }, "\uBCC0\uBCC4\uB825 \uBB38\uC81C"), problem === 0 && React.createElement("span", {
+          style: {
+            border: "1px solid #DDDDDD"
+          }
+        }, "\uC77C\uBC18\uC801\uC778 \uBB38\uC81C"), problem === 4 && React.createElement("span", {
+          style: {
+            border: "1px solid #FF0000"
+          }
+        }, "\uC5B4\uB824\uC6B4 \uBB38\uC81C"));
+      }))));
+    });
+  };
+  var renderPrintTableBody = function renderPrintTableBody(effectSize) {
+    var chunkedEffectSizeQuestions = _.chunk(effectSize, 5);
+    return chunkedEffectSizeQuestions.map(function (i, index) {
+      return React.createElement("tbody", {
+        key: index,
+        className: PrintContentClassName
+      }, renderTableBody(i));
+    });
+  };
   return React.createElement("div", {
-    className: styles$4["compareGrass"]
+    className: styles$4["compareGrass"] + " " + (isPrint ? PrintContainerClassName : "")
   }, React.createElement("div", {
     className: styles$4["tableCompareGrass"]
   }, React.createElement("div", {
@@ -11208,7 +11405,8 @@ function CompareGrass(_ref) {
   }, React.createElement("thead", {
     style: {
       borderBottom: "1px solid #E4E7EC"
-    }
+    },
+    className: isPrint ? PrintHeaderClassName : ""
   }, React.createElement("tr", null, React.createElement("th", {
     className: styles$4["thcolumn1"]
   }, "\uBB38\uC81C \uBC88\uD638"), React.createElement("th", {
@@ -11227,58 +11425,8 @@ function CompareGrass(_ref) {
     style: {
       textAlign: "center"
     }
-  }, "\uBB38\uC81C \uBD84\uB958"))), React.createElement("tbody", null, effectSize.map(function (item, index) {
-    return React.createElement("tr", {
-      key: item.id,
-      style: index < effectSize.length - 1 ? {
-        borderBottom: "1px solid #e4e7ec"
-      } : {}
-    }, React.createElement("td", {
-      className: styles$4["tdcolumn1"]
-    }, "\uBB38\uC81C ", item.questionOrder + 1), React.createElement("td", {
-      style: {
-        textAlign: "center",
-        color: "#202B37"
-      }
-    }, item.correctAnswers, "\uBC88"), React.createElement("td", {
-      className: styles$4["tdcolumn3"],
-      style: {
-        color: item.isCorrect ? "#1EE288" : "#F34B4B"
-      }
-    }, item.selectedAnswers ? item.selectedAnswers + "\uBC88" : ""), React.createElement("td", {
-      style: {
-        textAlign: "center",
-        color: "#414E62"
-      }
-    }, item.mostSelectedAnswers ? item.mostSelectedAnswers + "\uBC88" : ""), React.createElement("td", null, React.createElement("div", {
-      className: styles$4["classification"]
-    }, item.problemCategories.map(function (problem, index) {
-      return React.createElement("div", {
-        key: index
-      }, problem === 1 && React.createElement("span", {
-        style: {
-          border: "1px solid #1EE288"
-        }
-      }, "\uC26C\uC6B4 \uBB38\uC81C"), problem === 3 && React.createElement("span", {
-        style: {
-          border: "1px solid #FDDB64"
-        }
-      }, "\uD568\uC815 \uBB38\uC81C"), problem === 2 && React.createElement("span", {
-        style: {
-          border: "1px solid #F34B4B"
-        }
-      }, "\uBCC0\uBCC4\uB825 \uBB38\uC81C"), problem === 0 && React.createElement("span", {
-        style: {
-          border: "1px solid #DDDDDD"
-        }
-      }, "\uC77C\uBC18\uC801\uC778 \uBB38\uC81C"), problem === 4 && React.createElement("span", {
-        style: {
-          border: "1px solid #FF0000"
-        }
-      }, "\uC5B4\uB824\uC6B4 \uBB38\uC81C"));
-    }))));
-  }))))));
-}
+  }, "\uBB38\uC81C \uBD84\uB958"))), isPrint ? renderPrintTableBody(effectSize) : React.createElement("tbody", null, renderTableBody(effectSize))))));
+};
 
 var iconUpArrow = function iconUpArrow(_ref) {
   var _ref$width = _ref.width,
@@ -11367,20 +11515,75 @@ var iconAssignedQuestions = function iconAssignedQuestions(_ref) {
   }));
 };
 
-function TrickyProblem(_ref) {
+var TrickyProblem = function TrickyProblem(_ref) {
   var data = _ref.data,
     openProblem = _ref.openProblem,
-    changeOpen = _ref.changeOpen;
+    changeOpen = _ref.changeOpen,
+    isPrint = _ref.isPrint;
   var inCorrectQuestions = data.questions.filter(function (i) {
     return i.isStar && !i.isCorrect;
   });
   var correctQuestions = data.questions.filter(function (i) {
     return i.isStar && i.isCorrect;
   });
+  var renderProblems = function renderProblems() {
+    return React.createElement(Fragment$1, null, React.createElement("div", {
+      className: styles$4["titleTrickyProblem"]
+    }, React.createElement(iconX, null), React.createElement("span", null, "\uBCC4\uD45C \uCE5C \uBB38\uC81C \uC911 \uD2C0\uB9B0 \uBB38\uC81C")), React.createElement("div", {
+      className: styles$4["wrongQuestions"]
+    }, !!inCorrectQuestions.length && inCorrectQuestions.map(function (question) {
+      return React.createElement("span", {
+        key: question.id,
+        className: styles$4["question"]
+      }, question.questionOrder + 1, "\uBC88");
+    }), !data.questions.length && React.createElement("div", {
+      className: styles$4["noData"]
+    }, "\uB370\uC774\uD130 \uC5C6\uC74C")), React.createElement("div", {
+      className: styles$4["titleTrickyProblem"]
+    }, React.createElement(iconAssignedQuestions, null), React.createElement("span", null, "\uBCC4\uD45C \uCE5C \uBB38\uC81C \uC911 \uB9DE\uCD98 \uBB38\uC81C")), React.createElement("div", {
+      className: styles$4["assignedQuestions"]
+    }, !!correctQuestions.length && correctQuestions.map(function (question) {
+      return React.createElement("div", {
+        key: question.id,
+        className: styles$4["question"]
+      }, question.questionOrder + 1, "\uBC88");
+    }), !data.questions.length && React.createElement("div", {
+      className: styles$4["noData"]
+    }, "\uB370\uC774\uD130 \uC5C6\uC74C")));
+  };
+  var renderPrintProblems = function renderPrintProblems() {
+    return React.createElement(Fragment$1, null, React.createElement("div", {
+      className: PrintContentClassName
+    }, React.createElement("div", {
+      className: styles$4["titleTrickyProblem"]
+    }, React.createElement(iconX, null), React.createElement("span", null, "\uBCC4\uD45C \uCE5C \uBB38\uC81C \uC911 \uD2C0\uB9B0 \uBB38\uC81C")), React.createElement("div", {
+      className: styles$4["wrongQuestions"]
+    }, !!inCorrectQuestions.length && inCorrectQuestions.map(function (question) {
+      return React.createElement("span", {
+        key: question.id,
+        className: styles$4["question"]
+      }, question.questionOrder + 1, "\uBC88");
+    }), !data.questions.length && React.createElement("div", {
+      className: styles$4["noData"]
+    }, "\uB370\uC774\uD130 \uC5C6\uC74C"))), React.createElement("div", {
+      className: PrintContentClassName
+    }, React.createElement("div", {
+      className: styles$4["titleTrickyProblem"]
+    }, React.createElement(iconAssignedQuestions, null), React.createElement("span", null, "\uBCC4\uD45C \uCE5C \uBB38\uC81C \uC911 \uB9DE\uCD98 \uBB38\uC81C")), React.createElement("div", {
+      className: styles$4["assignedQuestions"]
+    }, !!correctQuestions.length && correctQuestions.map(function (question) {
+      return React.createElement("div", {
+        key: question.id,
+        className: styles$4["question"]
+      }, question.questionOrder + 1, "\uBC88");
+    }), !data.questions.length && React.createElement("div", {
+      className: styles$4["noData"]
+    }, "\uB370\uC774\uD130 \uC5C6\uC74C"))));
+  };
   return React.createElement("div", {
-    className: styles$4["wrapperProblem"]
+    className: styles$4["wrapperProblem"] + " " + (isPrint ? PrintContainerClassName : "")
   }, React.createElement("div", {
-    className: !openProblem.problem1 ? styles$4["titleProblemClose"] : styles$4["titleProblem"],
+    className: (!openProblem.problem1 ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintHeaderClassName : ""),
     onClick: function onClick() {
       return changeOpen(_extends({}, openProblem, {
         problem1: !openProblem.problem1
@@ -11392,41 +11595,53 @@ function TrickyProblem(_ref) {
       fontSize: "14px",
       fontWeight: 700
     }
-  }, "\uAE4C\uB2E4\uB85C\uC6E0\uB358 \uBB38\uC81C"), openProblem.problem1 ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), openProblem.problem1 && React.createElement(Fragment$1, null, React.createElement("div", {
-    className: styles$4["titleTrickyProblem"]
-  }, React.createElement(iconX, null), React.createElement("span", null, "\uBCC4\uD45C \uCE5C \uBB38\uC81C \uC911 \uD2C0\uB9B0 \uBB38\uC81C")), React.createElement("div", {
-    className: styles$4["wrongQuestions"]
-  }, !!inCorrectQuestions.length && inCorrectQuestions.map(function (question) {
-    return React.createElement("span", {
-      key: question.id,
-      className: styles$4["question"]
-    }, question.questionOrder + 1, "\uBC88");
-  }), !data.questions.length && React.createElement("div", {
-    className: styles$4["noData"]
-  }, "\uB370\uC774\uD130 \uC5C6\uC74C")), React.createElement("div", {
-    className: styles$4["titleTrickyProblem"]
-  }, React.createElement(iconAssignedQuestions, null), React.createElement("span", null, "\uBCC4\uD45C \uCE5C \uBB38\uC81C \uC911 \uB9DE\uCD98 \uBB38\uC81C")), React.createElement("div", {
-    className: styles$4["assignedQuestions"]
-  }, !!correctQuestions.length && correctQuestions.map(function (question) {
-    return React.createElement("div", {
-      key: question.id,
-      className: styles$4["question"]
-    }, question.questionOrder + 1, "\uBC88");
-  }), !data.questions.length && React.createElement("div", {
-    className: styles$4["noData"]
-  }, "\uB370\uC774\uD130 \uC5C6\uC74C"))));
-}
+  }, "\uAE4C\uB2E4\uB85C\uC6E0\uB358 \uBB38\uC81C"), openProblem.problem1 ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), openProblem.problem1 && React.createElement(Fragment$1, null, isPrint ? renderPrintProblems() : renderProblems()));
+};
 
-function ProtractedProblem(_ref) {
+var ProtractedProblem = function ProtractedProblem(_ref) {
   var data = _ref.data,
     openProblem = _ref.openProblem,
-    changeOpen = _ref.changeOpen;
+    changeOpen = _ref.changeOpen,
+    isPrint = _ref.isPrint;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var renderQuestions = function renderQuestions(data) {
+    return data.map(function (item) {
+      return React.createElement("div", {
+        className: styles$4["content"],
+        key: item.id
+      }, React.createElement("div", {
+        className: styles$4["contentColumn1"]
+      }, React.createElement("div", null, React.createElement("span", {
+        className: styles$4["span1"]
+      }, "\uBB38\uC81C"), React.createElement("span", {
+        className: styles$4["span2"]
+      }, item.questionOrder + 1, "\uBC88"))), React.createElement("div", {
+        className: styles$4["contentColumn2"]
+      }, React.createElement("div", null, React.createElement("span", {
+        className: styles$4["span1"]
+      }, "\uB098\uC758 \uC2DC\uAC04"), React.createElement("span", {
+        className: styles$4["span2"]
+      }, "\uC0C1\uC704\uAD8C \uC2DC\uAC04")), React.createElement("div", null, React.createElement("span", {
+        className: styles$4["duration"]
+      }, formatTimeSecond(item.duration, t)), React.createElement("span", {
+        className: styles$4["topDuration"]
+      }, formatTimeSecond(item.topDuration, t)))));
+    });
+  };
+  var renderPrintQuestions = function renderPrintQuestions() {
+    var chunkedData = _.chunk(data, 5);
+    return chunkedData.map(function (i, index) {
+      return React.createElement("div", {
+        key: index,
+        className: PrintContentClassName
+      }, renderQuestions(i));
+    });
+  };
   return React.createElement("div", {
-    className: styles$4["wrapperProblem"]
+    className: styles$4["wrapperProblem"] + " " + (isPrint ? PrintContainerClassName : "")
   }, React.createElement("div", {
-    className: !openProblem.problem2 ? styles$4["titleProblemClose"] : styles$4["titleProblem"],
+    className: (!openProblem.problem2 ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintHeaderClassName : ""),
     onClick: function onClick() {
       return changeOpen(_extends({}, openProblem, {
         problem2: !openProblem.problem2
@@ -11440,45 +11655,58 @@ function ProtractedProblem(_ref) {
     }
   }, "\uC2DC\uAC04\uC774 \uC624\uB798 \uAC78\uB9B0 \uBB38\uC81C"), openProblem.problem2 ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), openProblem.problem2 && React.createElement(Fragment$1, null, React.createElement("div", {
     className: styles$4["wrapperContent"]
-  }, data.length ? data.map(function (item) {
-    return React.createElement("div", {
-      className: styles$4["content"],
-      key: item.id
-    }, React.createElement("div", {
-      className: styles$4["contentColumn1"]
-    }, React.createElement("div", null, React.createElement("span", {
-      className: styles$4["span1"]
-    }, "\uBB38\uC81C"), React.createElement("span", {
-      className: styles$4["span2"]
-    }, item.questionOrder + 1, "\uBC88"))), React.createElement("div", {
-      className: styles$4["contentColumn2"]
-    }, React.createElement("div", null, React.createElement("span", {
-      className: styles$4["span1"]
-    }, "\uB098\uC758 \uC2DC\uAC04"), React.createElement("span", {
-      className: styles$4["span2"]
-    }, "\uC0C1\uC704\uAD8C \uC2DC\uAC04")), React.createElement("div", null, React.createElement("span", {
-      className: styles$4["duration"]
-    }, formatTimeSecond(item.duration, t)), React.createElement("span", {
-      className: styles$4["topDuration"]
-    }, formatTimeSecond(item.topDuration, t)))));
-  }) : React.createElement("div", {
-    className: styles$4["noData"]
+  }, data.length ? isPrint ? renderPrintQuestions() : renderQuestions(data) : React.createElement("div", {
+    className: styles$4["noData"] + " " + (isPrint ? PrintContentClassName : "")
   }, "\uB370\uC774\uD130 \uC5C6\uC74C"))));
-}
+};
 
-function Vulnerable(_ref) {
+var Vulnerable = function Vulnerable(_ref) {
   var data = _ref.data,
     openProblem = _ref.openProblem,
-    changeOpen = _ref.changeOpen;
+    changeOpen = _ref.changeOpen,
+    isPrint = _ref.isPrint;
   var incorrectQuestions = data.questions.filter(function (i) {
     return i.selectedAnswers !== "" && i.isCorrect === false;
   }).sort(function (q1, q2) {
     return q2.overallCorrectRate === q1.overallCorrectRate ? q1.questionOrder - q2.questionOrder : q2.overallCorrectRate - q1.overallCorrectRate;
   });
+  var renderQuestions = function renderQuestions(questions) {
+    return questions.map(function (question) {
+      return React.createElement("div", {
+        className: styles$4["content"],
+        key: question.id
+      }, React.createElement("div", {
+        className: styles$4["contentColumn1"]
+      }, React.createElement("div", null, React.createElement("span", {
+        className: styles$4["span1"]
+      }, "\uBB38\uC81C"), React.createElement("span", {
+        className: styles$4["span2"]
+      }, question.questionOrder + 1, "\uBC88"))), React.createElement("div", {
+        className: styles$4["contentColumn2"]
+      }, React.createElement("div", null, React.createElement("span", {
+        className: styles$4["span1"]
+      }, "\uC804\uCCB4 \uC815\uB2F5\uB960"), React.createElement("span", {
+        className: styles$4["span2"]
+      }, "\uB098\uC758 \uC624\uB2F5")), React.createElement("div", null, React.createElement("span", {
+        className: styles$4["overallCorrectRate"]
+      }, question.overallCorrectRate.toFixed(2), "%"), React.createElement("span", {
+        className: styles$4["answer"]
+      }, question.selectedAnswers, "\uBC88 (\uC815\uB2F5", " ", question.correctAnswers, "\uBC88)"))));
+    });
+  };
+  var renderPrintQuestions = function renderPrintQuestions(questions) {
+    var chunkedQuestions = _.chunk(questions, 5);
+    return chunkedQuestions.map(function (i, index) {
+      return React.createElement("div", {
+        key: index,
+        className: PrintContentClassName
+      }, renderQuestions(i));
+    });
+  };
   return React.createElement("div", {
-    className: styles$4["wrapperProblem"]
+    className: styles$4["wrapperProblem"] + " " + PrintContainerClassName
   }, React.createElement("div", {
-    className: !openProblem.problem3 ? styles$4["titleProblemClose"] : styles$4["titleProblem"],
+    className: (!openProblem.problem3 ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintHeaderClassName : ""),
     onClick: function onClick() {
       return changeOpen(_extends({}, openProblem, {
         problem3: !openProblem.problem3
@@ -11492,40 +11720,51 @@ function Vulnerable(_ref) {
     }
   }, "\uB0B4\uAC00 \uCDE8\uC57D\uD55C \uBB38\uC81C"), openProblem.problem3 ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), openProblem.problem3 && React.createElement(Fragment$1, null, React.createElement("div", {
     className: styles$4["wrapperContent"]
-  }, incorrectQuestions.length ? React.createElement(Fragment$1, null, incorrectQuestions.map(function (question) {
-    return React.createElement("div", {
-      className: styles$4["content"],
-      key: question.id
-    }, React.createElement("div", {
-      className: styles$4["contentColumn1"]
-    }, React.createElement("div", null, React.createElement("span", {
-      className: styles$4["span1"]
-    }, "\uBB38\uC81C"), React.createElement("span", {
-      className: styles$4["span2"]
-    }, question.questionOrder + 1, "\uBC88"))), React.createElement("div", {
-      className: styles$4["contentColumn2"]
-    }, React.createElement("div", null, React.createElement("span", {
-      className: styles$4["span1"]
-    }, "\uC804\uCCB4 \uC815\uB2F5\uB960"), React.createElement("span", {
-      className: styles$4["span2"]
-    }, "\uB098\uC758 \uC624\uB2F5")), React.createElement("div", null, React.createElement("span", {
-      className: styles$4["overallCorrectRate"]
-    }, question.overallCorrectRate.toFixed(2), "%"), React.createElement("span", {
-      className: styles$4["answer"]
-    }, question.selectedAnswers, "\uBC88 (\uC815\uB2F5", " ", question.correctAnswers, "\uBC88)"))));
-  })) : React.createElement("div", {
-    className: styles$4["noData"]
+  }, isPrint ? renderPrintQuestions(incorrectQuestions) : renderQuestions(incorrectQuestions), !incorrectQuestions.length && React.createElement("div", {
+    className: styles$4["noData"] + " " + (isPrint ? PrintContentClassName : "")
   }, "\uB370\uC774\uD130 \uC5C6\uC74C"))));
-}
+};
 
-function GradesByTerritory(_ref) {
+var GradesByTerritory = function GradesByTerritory(_ref) {
   var data = _ref.data,
     openProblem = _ref.openProblem,
-    changeOpen = _ref.changeOpen;
+    changeOpen = _ref.changeOpen,
+    isPrint = _ref.isPrint;
+  var renderCategories = function renderCategories(data) {
+    return data.map(function (item) {
+      var trackStyle = {
+        left: item.percentageAmongStudents + "%"
+      };
+      return React.createElement("div", {
+        className: styles$4["contentProblem"],
+        key: item.id
+      }, React.createElement("div", {
+        className: styles$4["labelProblem"]
+      }, React.createElement("span", {
+        className: styles$4["name"]
+      }, item.name), React.createElement("div", {
+        className: styles$4["percent"]
+      }, React.createElement("span", null, item.percentageAmongStudents.toFixed(2), "%"), React.createElement("span", null, item.totalCorrectQuestions, "/", item.totalQuestions, "\uBB38\uC81C"))), React.createElement("div", {
+        className: styles$4["slider"]
+      }, React.createElement("div", null, React.createElement("span", {
+        className: styles$4["track"],
+        style: trackStyle
+      }))));
+    });
+  };
+  var renderPrintCategories = function renderPrintCategories() {
+    var chunkedCategories = _.chunk(data, 5);
+    return chunkedCategories.map(function (i, index) {
+      return React.createElement("div", {
+        key: index,
+        className: PrintContentClassName
+      }, renderCategories(i));
+    });
+  };
   return React.createElement("div", {
-    className: styles$4["wrapperProblem"]
+    className: styles$4["wrapperProblem"] + " " + (isPrint ? PrintContainerClassName : "")
   }, React.createElement("div", {
-    className: !openProblem.problem4 ? styles$4["titleProblemClose"] : styles$4["titleProblem"],
+    className: (!openProblem.problem4 ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintHeaderClassName : ""),
     onClick: function onClick() {
       return changeOpen(_extends({}, openProblem, {
         problem4: !openProblem.problem4
@@ -11539,28 +11778,10 @@ function GradesByTerritory(_ref) {
     }
   }, "\uC601\uC5ED\uBCC4 \uC131\uC801"), openProblem.problem4 ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), openProblem.problem4 && React.createElement("div", {
     className: styles$4["wrappContentProblem"]
-  }, data.length && data.map(function (item) {
-    return React.createElement("div", {
-      className: styles$4["contentProblem"],
-      key: item.id
-    }, React.createElement("div", {
-      className: styles$4["labelProblem"]
-    }, React.createElement("span", {
-      className: styles$4["name"]
-    }, item.name), React.createElement("div", {
-      className: styles$4["percent"]
-    }, React.createElement("span", null, item.percentageAmongStudents.toFixed(2), "%"), React.createElement("span", null, item.totalCorrectQuestions, "/", item.totalQuestions, "\uBB38\uC81C"))), React.createElement("div", {
-      className: styles$4["slider"]
-    }, React.createElement("span", {
-      className: styles$4["track"],
-      style: {
-        left: item.percentageAmongStudents + "%"
-      }
-    })));
-  }), openProblem.problem4 && !data.length && React.createElement("div", {
-    className: styles$4["noData"]
+  }, isPrint ? renderPrintCategories() : renderCategories(data), openProblem.problem4 && !data.length && React.createElement("div", {
+    className: styles$4["noData"] + " " + (isPrint ? PrintContentClassName : "")
   }, "\uB370\uC774\uD130 \uC5C6\uC74C")));
-}
+};
 
 var useCreateQuestionDialog$1 = function useCreateQuestionDialog() {
   var _useState = useState(false),
@@ -11789,8 +12010,7 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     }
   }, React.createElement(Grid, {
     container: true,
-    padding: "24px",
-    id: "header-canvas"
+    padding: "24px"
   }, React.createElement(Grid, {
     item: true
   }, resultDatas.courseName && React.createElement(Stack, null, React.createElement(Typography, {
@@ -12000,14 +12220,104 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     className: "position-absolute",
     sx: {
       zIndex: -1,
-      width: "100%"
+      width: "1024px"
     },
     id: "canvas"
-  }, React.createElement(Stack, {
+  }, React.createElement(Grid, {
+    container: true,
+    padding: "24px",
+    id: "header-canvas"
+  }, React.createElement(Grid, {
+    item: true
+  }, resultDatas.courseName && React.createElement(Stack, null, React.createElement(Typography, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: 600,
+      color: "#C3C5FE"
+    }
+  }, resultDatas.courseName)), React.createElement(Box, {
+    display: "flex",
+    gap: "16px",
+    flexDirection: "column"
+  }, React.createElement(Stack, null, React.createElement(Typography, {
+    sx: {
+      fontSize: "20px",
+      fontWeight: 600,
+      color: "#5458D5"
+    }
+  }, resultDatas.title)), React.createElement(Stack, {
+    flexDirection: "row",
+    gap: "16px"
+  }, React.createElement(Stack, null, React.createElement(Typography, {
+    sx: {
+      fontSize: "13px",
+      fontWeight: 600,
+      color: "#97A1AF"
+    }
+  }, t("my_score")), React.createElement(Typography, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: 600,
+      color: "#5458D5"
+    }
+  }, t("score_format", {
+    score: resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.score
+  }))), React.createElement(Stack, null, React.createElement(Typography, {
+    sx: {
+      fontSize: "13px",
+      fontWeight: 600,
+      color: "#97A1AF"
+    }
+  }, t("exam_date")), React.createElement(Typography, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: 600,
+      color: "#414E62"
+    }
+  }, utcToLocalTime(resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.startTime, t("date_format")))), React.createElement(Stack, null, React.createElement(Typography, {
+    sx: {
+      fontSize: "13px",
+      fontWeight: 600,
+      color: "#97A1AF"
+    }
+  }, t("exam_time")), React.createElement(Typography, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: 600,
+      color: "#414E62"
+    }
+  }, moment(resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.startTime, "HH:mm").format("hh:mm") + " ~ " + moment(resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.finishTime, "HH:mm").format("hh:mm"))), React.createElement(Stack, null, React.createElement(Typography, {
+    sx: {
+      fontSize: "13px",
+      fontWeight: 600,
+      color: "#97A1AF"
+    }
+  }, t("total_students")), React.createElement(Typography, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: 600,
+      color: "#414E62"
+    }
+  }, t("number_people", {
+    number: resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.totalStudent
+  }))), React.createElement(Stack, null, React.createElement(Typography, {
+    sx: {
+      fontSize: "13px",
+      fontWeight: 600,
+      color: "#97A1AF"
+    }
+  }, t("teacher_in_charge")), React.createElement(Typography, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: 600,
+      color: "#414E62"
+    }
+  }, resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.teacherName)))))), React.createElement(Stack, {
     display: "flex",
     flexDirection: "column",
     gap: "12px"
   }, React.createElement(Typography, {
+    className: "chart-title",
     sx: {
       fontSize: "16px",
       fontWeight: 700,
@@ -12016,7 +12326,8 @@ var ExamResultV2 = function ExamResultV2(_ref) {
   }, t(TabList[0].label)), React.createElement(MyAnswer, {
     data: resultDatas,
     categories: categoryResponses,
-    isStudent: isStudent
+    isStudent: isStudent,
+    isPrint: true
   })), React.createElement(Stack, {
     display: "flex",
     flexDirection: "column",
@@ -12048,19 +12359,22 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     gap: "12px",
     marginTop: "24px"
   }, React.createElement(Typography, {
+    className: "chart-title",
     sx: {
       fontSize: "16px",
       fontWeight: 700,
       color: "#414E62"
     }
   }, t(TabList[2].label)), React.createElement(CompareGrass, {
-    effectSize: effectSize
+    effectSize: effectSize,
+    isPrint: true
   })), React.createElement(Stack, {
     display: "flex",
     flexDirection: "column",
     gap: "12px",
     marginTop: "24px"
   }, React.createElement(Typography, {
+    className: "chart-title",
     sx: {
       fontSize: "16px",
       fontWeight: 700,
@@ -12071,25 +12385,29 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     openProblem: _extends({}, openProblem, {
       problem1: true
     }),
-    changeOpen: setOpenProblem
+    changeOpen: setOpenProblem,
+    isPrint: true
   }), React.createElement(Vulnerable, {
     data: resultDatas,
     openProblem: _extends({}, openProblem, {
       problem3: true
     }),
-    changeOpen: setOpenProblem
+    changeOpen: setOpenProblem,
+    isPrint: true
   }), React.createElement(ProtractedProblem, {
     data: longTimeSpend,
     openProblem: _extends({}, openProblem, {
       problem2: true
     }),
-    changeOpen: setOpenProblem
+    changeOpen: setOpenProblem,
+    isPrint: true
   }), React.createElement(GradesByTerritory, {
     data: categoryResponses,
     openProblem: _extends({}, openProblem, {
       problem4: true
     }),
-    changeOpen: setOpenProblem
+    changeOpen: setOpenProblem,
+    isPrint: true
   })))), React.createElement(CreateNewQuestionDialog$1, {
     examSessionId: resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.examSessionId,
     handleCreateQuestion: handleCreateQuestion,