touchstudy-core 0.1.41 → 0.1.43

package/dist/index.modern.js

@@ -141,7 +141,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-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 styles = {"lighter":"#F0FFF6","light":"#C8F8DB","less_dark":"#3DC674","dark":"#349056","darker":"#18442A","gray_100":"#F9FAFB","gray_300":"#DFE3E8","gray_500":"#9A9A98","gray_700":"#5D5D5B","gray_900":"#363634","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"};
 
 // A type of promise-like that resolves synchronously and supports only one observer
 const _Pact = /*#__PURE__*/(function() {
@@ -1175,9 +1175,7 @@ var LayoutContext = function LayoutContext(_ref) {
       }
     }
     if (!pusherRegisterUrls.includes(pathname.toLocaleLowerCase()) && !!currentPusher) {
-      if (currentPusher) {
-        currentPusher.disconnect();
-      }
+      currentPusher.disconnect();
       dispatch(setConcurrentConnectionPusher({
         pusher: null,
         academyDomain: ""
@@ -1471,7 +1469,7 @@ var ExamEvent;
   ExamEvent["TeacherKickOutStudent"] = "teacher-kick-out-student";
 })(ExamEvent || (ExamEvent = {}));
 
-var problem_solving = "전체 공지";
+var problem_solving = "수업 관리";
 var my_story = "내 스토리";
 var search_find = "검색하여 찾기";
 var test_code = "시험코드 입력";
@@ -1481,7 +1479,7 @@ var description_success = "스터디 터치는 엄태욱 선생님의 수업에
 var logout = "로그 아웃";
 var overall_status = "전체 현황";
 var exam_status = "시험별 현";
-var student_status = "학생 신분";
+var student_status = "학생별 현황";
 var user_manager = "사용자 목록";
 var recent_exam_results = "최근 시험 결과";
 var instructor_name = "강사이름";
@@ -1788,6 +1786,10 @@ var problem_analysis = "문제 분석";
 var class_information = "수업정보";
 var teachers = "교사";
 var lessons = "수업";
+var new_test = "새로운 시험";
+var manage_saved_tests = "저장된 시험 관리";
+var textbook_management = "교과서 관리";
+var my_question = "내 질문";
 var update_class = "수업 업데이트";
 var create_class = "수업 만들기";
 var lang_ko = {
@@ -1962,7 +1964,7 @@ var lang_ko = {
 	credentials_invalid: credentials_invalid,
 	role_is_invalid: role_is_invalid,
 	today: today,
-	"q&a": "질의응답",
+	"q&a": "질문 및 답변",
 	user_is_disabled: user_is_disabled,
 	cover_image: cover_image,
 	notification: notification,
@@ -2097,6 +2099,10 @@ var lang_ko = {
 	class_information: class_information,
 	teachers: teachers,
 	lessons: lessons,
+	new_test: new_test,
+	manage_saved_tests: manage_saved_tests,
+	textbook_management: textbook_management,
+	my_question: my_question,
 	update_class: update_class,
 	create_class: create_class
 };
@@ -2455,6 +2461,10 @@ var teachers$1 = "Teachers";
 var lessons$1 = "Lessons";
 var update_class$1 = "Update class";
 var create_class$1 = "Create class";
+var new_test$1 = "New Test";
+var manage_saved_tests$1 = "Manage saved tests";
+var textbook_management$1 = "Textbook Management";
+var my_question$1 = "My Question";
 var lang_en = {
 	problem_solving: problem_solving$1,
 	my_story: my_story$1,
@@ -2664,7 +2674,7 @@ var lang_en = {
 	credentials_invalid: credentials_invalid$1,
 	role_is_invalid: role_is_invalid$1,
 	today: today$1,
-	"q&a": "Q&A",
+	"q&a": "Questions and Answers",
 	user_is_disabled: user_is_disabled$1,
 	cover_image: cover_image$1,
 	notification: notification$1,
@@ -2798,7 +2808,11 @@ var lang_en = {
 	teachers: teachers$1,
 	lessons: lessons$1,
 	update_class: update_class$1,
-	create_class: create_class$1
+	create_class: create_class$1,
+	new_test: new_test$1,
+	manage_saved_tests: manage_saved_tests$1,
+	textbook_management: textbook_management$1,
+	my_question: my_question$1
 };
 
 i18n.use(initReactI18next).init({
@@ -3126,7 +3140,7 @@ var TheAcademyDropdown = function TheAcademyDropdown(_ref) {
     sx: {
       fontSize: 14,
       fontWeight: 600,
-      color: "#5458D5",
+      color: styles.dark,
       minWidth: 150
     }
   }, (selectedAcademy === null || selectedAcademy === void 0 ? void 0 : selectedAcademy.name) || t(role === Role.Admin ? "switch_academy_admin" : "switch_academy")), React.createElement("div", {
@@ -3214,7 +3228,7 @@ var canAccess = function canAccess(userRoles, componentRoles) {
 var _excluded$1 = ["isDefault", "defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti"];
 var DropdownIndicator = function DropdownIndicator(props) {
   return React.createElement(components.DropdownIndicator, Object.assign({}, props), React.createElement(FaCaretDown, {
-    color: "#5458D5"
+    color: styles.darker
   }));
 };
 var CustomOption = function CustomOption(props) {
@@ -3226,26 +3240,26 @@ var CustomOption = function CustomOption(props) {
   }, props.data.label));
 };
 var customStyles = {
-  control: function control(baseStyles, state) {
+  control: function control(baseStyles) {
     return _extends({}, baseStyles, {
       fontSize: "14px",
       fontWeight: 700,
-      color: "#5458D5",
-      borderColor: state.isFocused ? '#5458D5' : '#C3C5FE'
+      color: styles.darker,
+      borderColor: styles.less_dark
     });
   },
   input: function input(baseStyles, _) {
     return _extends({}, baseStyles, {
       fontSize: "14px",
       fontWeight: 700,
-      color: "#5458D5"
+      color: styles.darker
     });
   },
   singleValue: function singleValue(baseStyles) {
     return _extends({}, baseStyles, {
       fontSize: "14px",
       fontWeight: 700,
-      color: "#5458D5"
+      color: styles.darker
     });
   }
 };
@@ -3301,10 +3315,10 @@ var iconPersonNoActive = function iconPersonNoActive(_ref) {
     xmlns: "http://www.w3.org/2000/svg"
   }, React.createElement("path", {
     d: "M10.395 2.01813C9.78691 1.36156 8.93753 1 8.00003 1C7.05753 1 6.20534 1.35937 5.60003 2.01187C4.98815 2.67156 4.69003 3.56813 4.76003 4.53625C4.89878 6.44625 6.35222 8 8.00003 8C9.64784 8 11.0988 6.44656 11.2397 4.53687C11.3107 3.5775 11.0107 2.68281 10.395 2.01813Z",
-    fill: "#5458D5"
+    fill: color
   }), React.createElement("path", {
     d: "M13.5001 15H2.50006C2.35608 15.0019 2.21349 14.9716 2.08267 14.9115C1.95185 14.8513 1.83609 14.7627 1.74381 14.6522C1.54068 14.4094 1.45881 14.0778 1.51943 13.7425C1.78318 12.2794 2.60631 11.0503 3.90006 10.1875C5.04943 9.42156 6.50537 9 8.00006 9C9.49474 9 10.9507 9.42188 12.1001 10.1875C13.3938 11.05 14.2169 12.2791 14.4807 13.7422C14.5413 14.0775 14.4594 14.4091 14.2563 14.6519C14.1641 14.7625 14.0483 14.8511 13.9175 14.9113C13.7867 14.9715 13.6441 15.0018 13.5001 15Z",
-    fill: "#5458D5"
+    fill: color
   }));
 };
 
@@ -3369,6 +3383,8 @@ var useTooltip = function useTooltip() {
 var ContentTooltip = function ContentTooltip(_ref) {
   var toggleConfirmDialog = _ref.toggleConfirmDialog,
     toggleUpdateDialog = _ref.toggleUpdateDialog;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   return React.createElement(Stack, null, React.createElement(Stack, {
     display: "flex",
     gap: "4px",
@@ -3382,9 +3398,9 @@ var ContentTooltip = function ContentTooltip(_ref) {
     sx: {
       fontWeight: 700,
       fontSize: "14px",
-      color: "#5458D5"
+      color: styles.dark
     }
-  }, "\uD3B8\uC9D1\uD558\uAE30")), React.createElement(Stack, {
+  }, t("edit"))), React.createElement(Stack, {
     border: "1px solid #E4E7EC"
   }), React.createElement("div", {
     style: {
@@ -3395,9 +3411,9 @@ var ContentTooltip = function ContentTooltip(_ref) {
     sx: {
       fontWeight: 700,
       fontSize: "14px",
-      color: "#5458D5"
+      color: styles.dark
     }
-  }, "\uD3B8\uC9D1\uD558\uAE30"))));
+  }, t("delete")))));
 };
 
 var ChatRightItem = function ChatRightItem(_ref) {
@@ -3440,7 +3456,7 @@ var ChatRightItem = function ChatRightItem(_ref) {
     fontSize: 14,
     padding: "4px",
     lineHeight: "16.71px",
-    color: "#5458D5"
+    color: styles.darker
   }, sender === null || sender === void 0 ? void 0 : sender.fullName)), React.createElement(Stack, {
     display: "flex",
     flexDirection: "row",
@@ -3476,7 +3492,7 @@ var ChatRightItem = function ChatRightItem(_ref) {
   }, React.createElement(iconMore, null))))), contentType ? React.createElement(Stack, {
     borderRadius: "6px",
     padding: "12px",
-    bgcolor: "#5458D5"
+    bgcolor: styles.darker
   }, React.createElement("img", {
     onClick: toggleImageDialog,
     src: content,
@@ -3485,11 +3501,12 @@ var ChatRightItem = function ChatRightItem(_ref) {
       position: "relative",
       objectFit: "contain"
     }
-  })) : React.createElement("div", {
+  })) : React.createElement(Stack, {
     className: styles$1["wrap-content"] + " " + styles$1["content-chat-receiver"],
-    style: {
+    sx: {
       "float": "inline-end"
-    }
+    },
+    bgcolor: styles.darker
   }, React.createElement(Typography, {
     fontWeight: 500,
     fontSize: "14px",
@@ -3529,22 +3546,22 @@ var ChatLeftItem = function ChatLeftItem(_ref) {
     fontWeight: 500,
     fontSize: 14,
     lineHeight: "16.71px",
-    color: "#97A1AF"
+    color: styles.darker
   }, t("counselor")), React.createElement(Typography, {
     fontWeight: 700,
     fontSize: 14,
     lineHeight: "16.71px",
-    color: "#97A1AF"
+    color: styles.darker
   }, sender === null || sender === void 0 ? void 0 : sender.fullName)) : React.createElement(Fragment$1, null, React.createElement(Typography, {
     fontWeight: 700,
     fontSize: 14,
     lineHeight: "16.71px",
-    color: "#5458D5"
+    color: styles.darker
   }, sender === null || sender === void 0 ? void 0 : sender.fullName), React.createElement(Typography, {
     fontWeight: 500,
     fontSize: 14,
     lineHeight: "16.71px",
-    color: "#5458D5"
+    color: styles.darker
   }, t("student")))), React.createElement(Box, {
     padding: "4px 0px"
   }), React.createElement(Stack, {
@@ -3554,7 +3571,7 @@ var ChatLeftItem = function ChatLeftItem(_ref) {
   }, contentType ? React.createElement(Stack, {
     borderRadius: "6px",
     padding: "12px",
-    bgcolor: "#5458D5"
+    bgcolor: styles.darker
   }, React.createElement("img", {
     onClick: toggleImageDialog,
     src: content,
@@ -3566,10 +3583,10 @@ var ChatLeftItem = function ChatLeftItem(_ref) {
   })) : React.createElement("div", {
     className: styles$1["wrap-content"] + " " + styles$1["content-chat-sender"]
   }, React.createElement(Typography, {
-    fontWeight: 500,
+    fontWeight: 400,
     fontSize: "14px",
     lineHeight: "16.71px",
-    color: "#414E62"
+    color: "#5D5D5B"
   }, content)))));
 };
 
@@ -3795,6 +3812,9 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
         padding: '12px'
       }
     }, React.createElement(Button, {
+      sx: {
+        color: styles.dark
+      },
       className: styles$1['btn-cancel'],
       onClick: onClose
     }, React.createElement(Typography, {
@@ -3802,6 +3822,10 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
       fontSize: '14px',
       lineHeight: '16.71px'
     }, "\uCDE8\uC18C")), React.createElement(Button, {
+      variant: 'contained',
+      sx: {
+        bgcolor: styles.dark
+      },
       className: styles$1['btn-register'],
       type: "submit"
     }, React.createElement(Typography, {
@@ -3828,16 +3852,14 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
     sx: {
       display: "flex",
       gap: "8px",
-      padding: "12px !important",
-      borderColor: "#5458D5"
+      padding: "12px !important"
     }
-  }, React.createElement(iconPlusCircle, null), React.createElement(Typography, {
+  }, React.createElement(iconPlusCircle, {
+    color: styles.dark
+  }), React.createElement(Typography, {
     fontWeight: 700,
     fontSize: "13px",
-    lineHeight: "15.51px",
-    sx: {
-      color: "#5458D5"
-    }
+    lineHeight: "15.51px"
   }, t("attachment")), React.createElement("input", {
     type: "file",
     hidden: true,
@@ -3854,13 +3876,17 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
     className: styles$1['btn-cancel'],
     onClick: onClose
   }, React.createElement(Typography, {
+    sx: {
+      color: styles.dark
+    },
     fontWeight: 700,
     fontSize: '14px',
     lineHeight: '16.71px'
   }, "\uCDE8\uC18C")), React.createElement(Button, {
+    variant: "contained",
     className: styles$1['btn-register'],
     sx: {
-      bgcolor: !(selectedFile !== null && selectedFile !== void 0 && selectedFile.content) ? "#EBEBFF !important" : "#5458D5 !important"
+      bgcolor: !(selectedFile !== null && selectedFile !== void 0 && selectedFile.content) ? styles.light + " !important" : styles.dark
     },
     disabled: !(selectedFile !== null && selectedFile !== void 0 && selectedFile.content),
     onClick: function onClick() {
@@ -4094,10 +4120,11 @@ var InputChat = function InputChat(_ref) {
     gap: "16px"
   }, React.createElement(Button, {
     variant: "contained",
+    fullWidth: true,
+    className: styles$1["btn-send"],
     sx: {
-      bgcolor: isCompleted ? "#EBEBFF !important" : "#5458D5 !important"
+      bgcolor: isCompleted ? styles.light + " !important" : styles.dark
     },
-    className: styles$1["btn-send"],
     disabled: isCompleted,
     onClick: handleSubmit
   }, React.createElement(iconSendMessage, null), React.createElement(Typography, {
@@ -4113,15 +4140,17 @@ var InputChat = function InputChat(_ref) {
       display: "flex",
       gap: "8px",
       padding: "12px !important",
-      borderColor: isCompleted ? "transparent" : "#5458D5",
+      borderColor: isCompleted ? "transparent" : styles.less_dark,
       borderWidth: "1px"
     }
-  }, React.createElement(iconPlusCircle, null), React.createElement(Typography, {
+  }, React.createElement(iconPlusCircle, {
+    color: styles.dark
+  }), React.createElement(Typography, {
     fontWeight: 700,
     fontSize: "13px",
     lineHeight: "15.51px",
     sx: {
-      color: "#5458D5"
+      color: styles.dark
     }
   }, t("attachment")), React.createElement("input", {
     type: "file",
@@ -4147,7 +4176,7 @@ var iconChecked = function iconChecked(_ref) {
     xmlns: "http://www.w3.org/2000/svg"
   }, React.createElement("path", {
     d: "M8 1.5C4.41594 1.5 1.5 4.41594 1.5 8C1.5 11.5841 4.41594 14.5 8 14.5C11.5841 14.5 14.5 11.5841 14.5 8C14.5 4.41594 11.5841 1.5 8 1.5ZM11.3828 5.82156L7.18281 10.8216C7.13674 10.8764 7.07941 10.9208 7.01471 10.9516C6.95001 10.9823 6.87945 10.9989 6.80781 11H6.79938C6.72929 11 6.66 10.9852 6.59599 10.9567C6.53198 10.9282 6.47468 10.8865 6.42781 10.8344L4.62781 8.83438C4.5821 8.78589 4.54654 8.72876 4.52322 8.66633C4.4999 8.60391 4.4893 8.53745 4.49203 8.47087C4.49477 8.40429 4.51078 8.33892 4.53914 8.27862C4.56749 8.21831 4.60761 8.16429 4.65715 8.11971C4.70668 8.07514 4.76463 8.04091 4.82757 8.01905C4.89052 7.99719 4.95721 7.98813 5.02371 7.9924C5.09021 7.99668 5.15518 8.01421 5.21481 8.04396C5.27444 8.0737 5.32752 8.11507 5.37094 8.16562L6.78625 9.73812L10.6172 5.17844C10.7031 5.07909 10.8247 5.01754 10.9556 5.00711C11.0866 4.99668 11.2164 5.03819 11.317 5.12268C11.4175 5.20717 11.4808 5.32784 11.4931 5.45862C11.5055 5.5894 11.4658 5.71977 11.3828 5.82156Z",
-    fill: "#5458D5"
+    fill: color
   }));
 };
 
@@ -4232,20 +4261,22 @@ var ChatHeader = function ChatHeader(_ref) {
       alignItems: "center",
       flexDirection: "row",
       gap: "8px"
-    }, React.createElement(iconPersonNoActive, null), isTabletUp && React.createElement(Typography, {
+    }, React.createElement(iconPersonNoActive, {
+      color: styles.darker
+    }), isTabletUp && React.createElement(Typography, {
       fontWeight: 500,
       fontSize: "14px",
       lineHeight: "16.71px",
-      color: "#5458D5"
+      color: styles.darker
     }, t("counselor"))), React.createElement(Typography, {
       fontWeight: 700,
       fontSize: "14px",
       lineHeight: "16.71px",
-      color: "#5458D5"
+      color: styles.darker
     }, ellipsisText(teacherName || "", 15))), !!examTitle && React.createElement(Box, {
       display: "flex",
       alignItems: "start",
-      color: "#5458D5",
+      color: styles.darker,
       gap: "6px",
       flexDirection: "column"
     }, React.createElement(Typography, {
@@ -4276,7 +4307,7 @@ var ChatHeader = function ChatHeader(_ref) {
       fontWeight: 700,
       fontSize: "12px",
       lineHeight: "14.32px",
-      color: "#5458D5"
+      color: styles.darker
     }, questionOrder != undefined ? t("problem_number_question", {
       number: questionOrder + 1
     }) : courseId ? t("class_inquiry") : t("exam_inquiry")) : React.createElement(Stack, {
@@ -4287,7 +4318,7 @@ var ChatHeader = function ChatHeader(_ref) {
       fontWeight: 700,
       fontSize: "12px",
       lineHeight: "14.32px",
-      color: "#5458D5"
+      color: styles.darker
     }, t("points", {
       number: score
     })), React.createElement(Typography, {
@@ -4311,12 +4342,12 @@ var ChatHeader = function ChatHeader(_ref) {
       fontWeight: 600,
       fontSize: "11px",
       lineHeight: "14.32px",
-      color: "#5458D5"
+      color: styles.darker
     }, t("consultation_category")), React.createElement(Typography, {
       fontWeight: 700,
       fontSize: "14px",
       lineHeight: "14.32px",
-      color: "#5458D5"
+      color: styles.darker
     }, t("" + category))))) : React.createElement(Grid, {
       item: true,
       xs: 12,
@@ -4331,16 +4362,19 @@ var ChatHeader = function ChatHeader(_ref) {
       display: "flex",
       alignItems: "center",
       gap: "24px",
-      color: "#5458D5"
+      color: styles.darker
     }, isTabletUp && React.createElement(Box, {
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
       gap: "8px"
-    }, React.createElement(iconPersonNoActive, null), React.createElement(Typography, {
+    }, React.createElement(iconPersonNoActive, {
+      color: styles.darker
+    }), React.createElement(Typography, {
       fontWeight: 500,
       fontSize: "14px",
-      lineHeight: "16.71px"
+      lineHeight: "16.71px",
+      color: styles.darker
     }, t("student"))), React.createElement(Typography, {
       fontWeight: 700,
       fontSize: "14px",
@@ -4349,7 +4383,7 @@ var ChatHeader = function ChatHeader(_ref) {
       display: "flex",
       alignItems: "center",
       gap: "24px",
-      color: "#5458D5"
+      color: styles.darker
     }, examTitle ? React.createElement(Typography, {
       fontWeight: 600,
       fontSize: "12px",
@@ -4363,12 +4397,12 @@ var ChatHeader = function ChatHeader(_ref) {
       fontWeight: 600,
       fontSize: "11px",
       lineHeight: "14.32px",
-      color: "#5458D5"
+      color: styles.darker
     }, t("consultation_category")), React.createElement(Typography, {
       fontWeight: 700,
       fontSize: "14px",
       lineHeight: "14.32px",
-      color: "#5458D5"
+      color: styles.darker
     }, t("" + category))), questionOrder != undefined && React.createElement(Typography, {
       fontWeight: 700,
       fontSize: "14px",
@@ -4382,13 +4416,16 @@ var ChatHeader = function ChatHeader(_ref) {
       display: "flex",
       alignItems: "center",
       gap: "8px",
-      border: "1px solid #5458D5",
+      border: "1px solid",
+      borderColor: styles.less_dark,
       borderRadius: "6px"
-    }, React.createElement(iconChecked, null), React.createElement(Typography, {
+    }, React.createElement(iconChecked, {
+      color: styles.darker
+    }), React.createElement(Typography, {
       fontWeight: 700,
       fontSize: "13px",
       lineHeight: "15.51px",
-      color: "#5458D5"
+      color: styles.dark
     }, "\uC644\uB8CC \uCC98\uB9AC"))) : React.createElement("div", null));
   };
   return React.createElement(Grid, {
@@ -4403,7 +4440,7 @@ var ChatHeader = function ChatHeader(_ref) {
   }, React.createElement(Typography, {
     fontWeight: 800,
     fontSize: "20px",
-    color: "#5458D5",
+    color: styles.darker,
     lineHeight: "23.87px"
   }, t("question_and_answer"))), renderHeader(), React.createElement(ConfirmDialog, {
     open: openDialog,
@@ -5073,7 +5110,7 @@ var InputText = function InputText(props) {
   }, props));
 };
 
-var styles$2 = {"question":"_2uc_W","question-article":"_2p7kY","question-title":"_2tHmc","question--active":"_3IHYm","question-label":"_26ATj","question-input":"_3R8PR","question-btn":"_1VZac"};
+var styles$2 = {"question":"_2uc_W","question-article":"_2p7kY","question-title":"_2tHmc","question-label":"_26ATj","question-input":"_3R8PR","question-btn":"_1VZac"};
 
 var SCORE_OPTIONS = Array.from({
   length: 10
@@ -5118,13 +5155,49 @@ var ScoreSelector = function ScoreSelector(_ref) {
   });
 };
 
-var QuestionView = function QuestionView(_ref) {
-  var index = _ref.index,
-    question = _ref.question,
-    answerCount = _ref.answerCount,
-    isDisabled = _ref.isDisabled,
-    onChangeCorrectAnswers = _ref.onChangeCorrectAnswers,
-    onChangeScoreAnswer = _ref.onChangeScoreAnswer;
+var BpIcon = styled('span')(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    borderRadius: '50%',
+    width: 16,
+    height: 16,
+    boxShadow: theme.palette.mode === 'dark' ? '0 0 0 1px rgb(16 22 26 / 40%)' : 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
+    backgroundColor: theme.palette.mode === 'dark' ? '#394b59' : '#f5f8fa',
+    backgroundImage: theme.palette.mode === 'dark' ? 'linear-gradient(180deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,0))' : 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
+    '.Mui-focusVisible &': {
+      outline: '2px auto rgba(19,124,189,.6)',
+      outlineOffset: 2
+    },
+    'input:hover ~ &': {
+      backgroundColor: theme.palette.mode === 'dark' ? '#30404d' : '#ebf1f5'
+    },
+    'input:disabled ~ &': {
+      boxShadow: 'none',
+      background: theme.palette.mode === 'dark' ? 'rgba(57,75,89,.5)' : 'rgba(206,217,224,.5)'
+    }
+  };
+});
+var BpCheckedIcon = styled(BpIcon)({
+  backgroundColor: styles.darker,
+  backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
+  '&::before': {
+    display: 'block',
+    width: 16,
+    height: 16,
+    backgroundImage: 'radial-gradient(#fff,#fff 28%,transparent 32%)',
+    content: '""'
+  },
+  'input:hover ~ &': {
+    backgroundColor: styles.dark
+  }
+});
+var QuestionView = function QuestionView(_ref2) {
+  var index = _ref2.index,
+    question = _ref2.question,
+    answerCount = _ref2.answerCount,
+    isDisabled = _ref2.isDisabled,
+    onChangeCorrectAnswers = _ref2.onChangeCorrectAnswers,
+    onChangeScoreAnswer = _ref2.onChangeScoreAnswer;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var handleChangeCorrectAnswer = function handleChangeCorrectAnswer(e) {
@@ -5160,7 +5233,9 @@ var QuestionView = function QuestionView(_ref) {
       onChange: handleChangeCorrectAnswer,
       disabled: isDisabled,
       control: React.createElement(Radio, {
-        size: "small"
+        size: "small",
+        checkedIcon: React.createElement(BpCheckedIcon, null),
+        icon: React.createElement(BpIcon, null)
       }),
       label: t("number_question", {
         number: i
@@ -5402,7 +5477,7 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
   }, React.createElement(PiDotsNineLight, {
     size: 18
   })), React.createElement("div", {
-    className: "px-4"
+    className: "px-2"
   }, React.createElement("p", {
     className: "mb-0 " + styles$2["question-article"]
   }, t("article_number")), React.createElement("p", {
@@ -7080,7 +7155,7 @@ var getSubjectListApi$1 = function getSubjectListApi(textSearch) {
 var _excluded$3 = ["defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti"];
 var DropdownIndicator$1 = function DropdownIndicator(props) {
   return React.createElement(components.DropdownIndicator, Object.assign({}, props), React.createElement(FaCaretDown, {
-    color: "#5458D5"
+    color: styles.darker
   }));
 };
 var CustomOption$1 = function CustomOption(props) {
@@ -7096,22 +7171,22 @@ var customStyles$1 = {
     return _extends({}, baseStyles, {
       fontSize: "14px",
       fontWeight: 700,
-      color: "#5458D5",
-      borderColor: state.isFocused || state.hasValue ? '#5458D5' : '#97A1AF'
+      color: styles.darker,
+      borderColor: state.isFocused || state.hasValue ? styles.less_dark : '#97A1AF'
     });
   },
   input: function input(baseStyles, _) {
     return _extends({}, baseStyles, {
       fontSize: "14px",
       fontWeight: 700,
-      color: "#5458D5"
+      color: styles.darker
     });
   },
   singleValue: function singleValue(baseStyles) {
     return _extends({}, baseStyles, {
       fontSize: "14px",
       fontWeight: 700,
-      color: "#5458D5"
+      color: styles.darker
     });
   }
 };
@@ -7588,9 +7663,14 @@ var ExamDetailView = function ExamDetailView(_ref) {
   }), React.createElement(Grid, {
     item: true,
     xs: 12
-  }, React.createElement("button", {
+  }, React.createElement(Button, {
+    variant: 'outlined',
+    sx: {
+      color: styles.dark,
+      borderColor: styles.dark
+    },
     disabled: isDisabled,
-    className: styles["btn-outline-primary"] + " w-100 d-flex justify-content-center align-items-center " + styles$2["question-btn"] + " mt-3",
+    className: "w-100 d-flex justify-content-center align-items-center " + styles$2["question-btn"] + " mt-3",
     onClick: handleAddArticle
   }, React.createElement(FaPlusCircle, {
     className: "me-2"
@@ -7619,13 +7699,11 @@ var CreateExamDrawer = function CreateExamDrawer(props) {
     }
   }, React.createElement("div", {
     className: styles$3["drawer-header"] + " d-flex justify-content-between align-items-center"
-  }, React.createElement("div", {
-    style: {
-      color: "#5458D5",
+  }, React.createElement(Button, {
+    variant: "outlined",
+    sx: {
       cursor: "pointer",
       padding: "0.5rem 1rem",
-      border: "1px solid #5458D5",
-      backgroundColor: "white",
       justifyContent: "center",
       alignItems: "center",
       borderRadius: "6px"
@@ -7778,10 +7856,6 @@ var TextbookViewDetail = function TextbookViewDetail(props) {
     className: "d-flex justify-content-end"
   }, React.createElement(Button, {
     variant: "outlined",
-    sx: {
-      borderColor: "#5458D5",
-      color: "#5458D5"
-    },
     onClick: function onClick() {
       return handleOpenCreateExamDialog();
     },
@@ -7792,7 +7866,6 @@ var TextbookViewDetail = function TextbookViewDetail(props) {
   }, React.createElement(Typography, null, t("create_new_exam"))), !!id && React.createElement(Button, {
     className: "mx-1",
     variant: "contained",
-    color: "primary",
     startIcon: React.createElement(FaPlus, {
       size: 12
     }),
@@ -9198,10 +9271,11 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
   }
   var query = new URLSearchParams(searchParam);
   var dispatch = useDispatch();
-  var roles = 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) || [];
+  var user = useSelector(function (state) {
+    var _state$common;
+    return state === null || state === void 0 ? void 0 : (_state$common = state.common) === null || _state$common === void 0 ? void 0 : _state$common.user;
   });
+  var roles = (user === null || user === void 0 ? void 0 : user.roles) || [];
   var isStudent = roles === null || roles === void 0 ? void 0 : roles.includes(Role.Student);
   var examCode = query.get("examCode") || "";
   var language = useSelector(function (state) {
@@ -9209,8 +9283,8 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
     return state === null || state === void 0 ? void 0 : (_state$common2 = state.common) === null || _state$common2 === void 0 ? void 0 : _state$common2.language;
   });
   var _useState = useState(),
-    resultDatas = _useState[0],
-    setResultDatas = _useState[1];
+    resultData = _useState[0],
+    setResultData = _useState[1];
   var _useState2 = useState(),
     effectSize = _useState2[0],
     setEffectSize = _useState2[1];
@@ -9226,12 +9300,7 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
   var _useState6 = useState(0),
     dataChartIndex = _useState6[0],
     setDataChartIndex = _useState6[1];
-  var _useState7 = useState({
-      problem1: false,
-      problem2: false,
-      problem3: false,
-      problem4: false
-    }),
+  var _useState7 = useState(""),
     openProblem = _useState7[0],
     setOpenProblem = _useState7[1];
   var _useTranslation = useTranslation(),
@@ -9246,7 +9315,7 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
           return Promise.resolve(Promise.all([getResults(examCode), getResultsLongTimeSpend(examCode), getResultsEffectSize(examCode), getResultsTimeOrderQuestion(examCode), getResultsCategories(examCode)])).then(function (result) {
             var _result$0$data, _result$1$data, _result$2$data, _result$3$data, _result$4$data;
             handleChangeTab(0);
-            setResultDatas((_result$0$data = result[0].data) === null || _result$0$data === void 0 ? void 0 : _result$0$data.data);
+            setResultData((_result$0$data = result[0].data) === null || _result$0$data === void 0 ? void 0 : _result$0$data.data);
             setLongTimeSpend((_result$1$data = result[1].data) === null || _result$1$data === void 0 ? void 0 : _result$1$data.data);
             setEffectSize((_result$2$data = result[2].data) === null || _result$2$data === void 0 ? void 0 : _result$2$data.data);
             setTimelyOrderQuestions((_result$3$data = result[3].data) === null || _result$3$data === void 0 ? void 0 : _result$3$data.data);
@@ -9258,6 +9327,7 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
         });
         return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
       };
+      if (!examCode) return Promise.resolve();
       dispatch(setLoading(true));
       var _temp3 = _catch(function () {
         return Promise.resolve(getCheckStatusExam(examCode)).then(function () {});
@@ -9281,7 +9351,7 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
           return Promise.resolve(Promise.all([getResultsTeacher(examSessionId, studentId), getResultsLongTimeSpendTeacher(examSessionId, studentId), getResultsEffectSizeTeacher(examSessionId, studentId), getResultsTimeOrderQuestionTeacher(examSessionId, studentId), getResultsCategoriesTeacher(examSessionId, studentId)])).then(function (result) {
             var _result$0$data2, _result$1$data2, _result$2$data2, _result$3$data2, _result$4$data2;
             handleChangeTab(0);
-            setResultDatas((_result$0$data2 = result[0].data) === null || _result$0$data2 === void 0 ? void 0 : _result$0$data2.data);
+            setResultData((_result$0$data2 = result[0].data) === null || _result$0$data2 === void 0 ? void 0 : _result$0$data2.data);
             setLongTimeSpend((_result$1$data2 = result[1].data) === null || _result$1$data2 === void 0 ? void 0 : _result$1$data2.data);
             setEffectSize((_result$2$data2 = result[2].data) === null || _result$2$data2 === void 0 ? void 0 : _result$2$data2.data);
             setTimelyOrderQuestions((_result$3$data2 = result[3].data) === null || _result$3$data2 === void 0 ? void 0 : _result$3$data2.data);
@@ -9293,6 +9363,7 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
         });
         return _temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5);
       };
+      if (!examCode || !examSessionId || !studentId) return Promise.resolve();
       dispatch(setLoading(true));
       var _temp7 = _catch(function () {
         return Promise.resolve(getCheckStatusExam(examCode)).then(function () {});
@@ -9307,19 +9378,28 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
     }
   };
   var setExampleData = function setExampleData() {
-    setResultDatas(EXAM_RESULT);
+    setResultData(EXAM_RESULT);
     setLongTimeSpend(LONGTIME_SPEND_QUESTIONS);
     setEffectSize(EFFECT_SIZE_QUESTIONS);
     setTimelyOrderQuestions(TIMELY_ORDER_QUESTIONS);
     setCategoryResponses(CATEGORY_RESPONSES);
   };
+  var resetData = function resetData() {
+    setResultData(undefined);
+    setLongTimeSpend([]);
+    setEffectSize([]);
+    setTimelyOrderQuestions([]);
+    setCategoryResponses([]);
+  };
   useEffect(function () {
     var getData = function getData() {
+      resetData();
+      if (!(user !== null && user !== void 0 && user.email)) return;
       isStudent && getStudentData(examCode);
       !isStudent && getStudentDataByTeacher(code, examSessionId, studentId);
     };
     examCode === "example-code" ? setExampleData() : getData();
-  }, [examCode, isStudent, code, examSessionId, studentId]);
+  }, [examCode, isStudent, code, examSessionId, studentId, user === null || user === void 0 ? void 0 : user.email]);
   var handlePrevChart = function handlePrevChart() {
     if (dataChartIndex > 0) {
       setDataChartIndex(dataChartIndex - 1);
@@ -9334,16 +9414,16 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
     navigate("/student/my-story/live-main");
   };
   var totalTime = useMemo(function () {
-    var _resultDatas$question;
-    if (!(resultDatas !== null && resultDatas !== void 0 && (_resultDatas$question = resultDatas.questions) !== null && _resultDatas$question !== void 0 && _resultDatas$question.length)) return "0" + t("seconds");
-    var totalTime = resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.questions.reduce(function (val, current) {
+    var _resultData$questions;
+    if (!(resultData !== null && resultData !== void 0 && (_resultData$questions = resultData.questions) !== null && _resultData$questions !== void 0 && _resultData$questions.length)) return "0" + t("seconds");
+    var totalTime = resultData === null || resultData === void 0 ? void 0 : resultData.questions.reduce(function (val, current) {
       return val + Math.round((current === null || current === void 0 ? void 0 : current.duration) || 0);
     }, 0);
     return totalTime < 60 ? "" + totalTime + t("seconds") : t("mins_mins_seconds_seconds", {
       mins: Math.floor(totalTime / 60),
       seconds: totalTime % 60
     });
-  }, [JSON.stringify(resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.questions), language]);
+  }, [JSON.stringify(resultData === null || resultData === void 0 ? void 0 : resultData.questions), language]);
   var allChartOptions = useMemo(function () {
     return timelyOrderQuestions.map(function (timelyOrderQuestion) {
       return _extends({}, DEFAULT_LINE_CHART_OPTIONS, {
@@ -9605,8 +9685,8 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
     }
   };
   var examTime = useMemo(function () {
-    return utcToLocalTime(resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.startTime, "HH:mm") + " ~ " + utcToLocalTime(resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.finishTime, "HH:mm");
-  }, [resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.startTime, resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.finishTime]);
+    return utcToLocalTime(resultData === null || resultData === void 0 ? void 0 : resultData.startTime, "HH:mm") + " ~ " + utcToLocalTime(resultData === null || resultData === void 0 ? void 0 : resultData.finishTime, "HH:mm");
+  }, [resultData === null || resultData === void 0 ? void 0 : resultData.startTime, resultData === null || resultData === void 0 ? void 0 : resultData.finishTime]);
   return {
     examTime: examTime,
     series: series,
@@ -9616,7 +9696,7 @@ var useExamResult = function useExamResult(searchParam, navigate, examSessionId,
     dataChartIndex: dataChartIndex,
     totalTime: totalTime,
     isStudent: isStudent,
-    resultDatas: resultDatas,
+    resultData: resultData,
     effectSize: effectSize,
     longTimeSpend: longTimeSpend,
     timelyOrderQuestions: timelyOrderQuestions,
@@ -11090,10 +11170,17 @@ function CreateNewQuestionDialog(_ref) {
       className: styles$4['btn-cancel'],
       onClick: toggleCreateQuestion
     }, React.createElement(Typography$1, {
+      sx: {
+        color: styles.dark + " !important"
+      },
       fontWeight: 700,
       fontSize: '14px',
       lineHeight: '16.71px'
     }, "\uCDE8\uC18C")), React.createElement(Button$1, {
+      variant: 'contained',
+      sx: {
+        bgcolor: styles.dark
+      },
       className: styles$4['btn-register'],
       type: "submit"
     }, React.createElement(Typography$1, {
@@ -11220,12 +11307,12 @@ function MyAnswer(_ref) {
           return handleOpenChat(e, question === null || question === void 0 ? void 0 : question.id);
         }
       }, React.createElement(iconChat, {
-        color: "#5458D5"
+        color: styles.gray_700
       })))));
     });
   };
   var renderPrintQuestions = function renderPrintQuestions(questions) {
-    var chunkedQuestions = _.chunk(questions, 5);
+    var chunkedQuestions = _.chunk(questions, 10);
     return chunkedQuestions.map(function (i, index) {
       return React.createElement("div", {
         key: index,
@@ -11434,7 +11521,7 @@ var CompareGrass = function CompareGrass(_ref) {
     });
   };
   var renderPrintTableBody = function renderPrintTableBody(effectSize) {
-    var chunkedEffectSizeQuestions = _.chunk(effectSize, 5);
+    var chunkedEffectSizeQuestions = _.chunk(effectSize, 10);
     return chunkedEffectSizeQuestions.map(function (i, index) {
       return React.createElement("tbody", {
         key: index,
@@ -11566,10 +11653,12 @@ var iconAssignedQuestions = function iconAssignedQuestions(_ref) {
 };
 
 var TrickyProblem = function TrickyProblem(_ref) {
-  var data = _ref.data,
+  var keyOpen = _ref.keyOpen,
+    data = _ref.data,
     openProblem = _ref.openProblem,
     changeOpen = _ref.changeOpen,
     isPrint = _ref.isPrint;
+  var isOpen = openProblem === keyOpen;
   var inCorrectQuestions = data.questions.filter(function (i) {
     return i.isStar && !i.isCorrect;
   });
@@ -11633,28 +11722,28 @@ var TrickyProblem = function TrickyProblem(_ref) {
   return React.createElement("div", {
     className: styles$4["wrapperProblem"] + " " + (isPrint ? PrintContainerClassName : "")
   }, React.createElement("div", {
-    className: (!openProblem.problem1 ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintHeaderClassName : ""),
+    className: (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintHeaderClassName : ""),
     onClick: function onClick() {
-      return changeOpen(_extends({}, openProblem, {
-        problem1: !openProblem.problem1
-      }));
+      return changeOpen(isOpen ? "" : keyOpen);
     }
   }, React.createElement(Typography, {
     sx: {
-      color: !openProblem.problem1 ? "#97A1AF" : "#414E62",
+      color: !isOpen ? "#97A1AF" : "#414E62",
       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, isPrint ? renderPrintProblems() : renderProblems()));
+  }, "\uAE4C\uB2E4\uB85C\uC6E0\uB358 \uBB38\uC81C"), isOpen ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), isOpen && React.createElement(Fragment$1, null, isPrint ? renderPrintProblems() : renderProblems()));
 };
 
 var ProtractedProblem = function ProtractedProblem(_ref) {
-  var data = _ref.data,
+  var keyOpen = _ref.keyOpen,
+    data = _ref.data,
     openProblem = _ref.openProblem,
     changeOpen = _ref.changeOpen,
     isPrint = _ref.isPrint;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var isOpen = openProblem === keyOpen;
   var renderQuestions = function renderQuestions(data) {
     return data.map(function (item) {
       return React.createElement("div", {
@@ -11691,19 +11780,17 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
   return React.createElement("div", {
     className: styles$4["wrapperProblem"] + " " + (isPrint ? PrintContainerClassName : "")
   }, React.createElement("div", {
-    className: (!openProblem.problem2 ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintHeaderClassName : ""),
+    className: (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintHeaderClassName : ""),
     onClick: function onClick() {
-      return changeOpen(_extends({}, openProblem, {
-        problem2: !openProblem.problem2
-      }));
+      return changeOpen(isOpen ? "" : keyOpen);
     }
   }, React.createElement(Typography, {
     sx: {
-      color: !openProblem.problem2 ? "#97A1AF" : "#414E62",
+      color: !isOpen ? "#97A1AF" : "#414E62",
       fontSize: "14px",
       fontWeight: 700
     }
-  }, "\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", {
+  }, "\uC2DC\uAC04\uC774 \uC624\uB798 \uAC78\uB9B0 \uBB38\uC81C"), isOpen ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), isOpen && React.createElement(Fragment$1, null, React.createElement("div", {
     className: styles$4["wrapperContent"]
   }, data.length ? isPrint ? renderPrintQuestions() : renderQuestions(data) : React.createElement("div", {
     className: styles$4["noData"] + " " + (isPrint ? PrintContentClassName : "")
@@ -11712,9 +11799,11 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
 
 var Vulnerable = function Vulnerable(_ref) {
   var data = _ref.data,
+    keyOpen = _ref.keyOpen,
     openProblem = _ref.openProblem,
     changeOpen = _ref.changeOpen,
     isPrint = _ref.isPrint;
+  var isOpen = openProblem === keyOpen;
   var incorrectQuestions = data.questions.filter(function (i) {
     return i.selectedAnswers !== "" && i.isCorrect === false;
   }).sort(function (q1, q2) {
@@ -11756,19 +11845,17 @@ var Vulnerable = function Vulnerable(_ref) {
   return React.createElement("div", {
     className: styles$4["wrapperProblem"] + " " + PrintContainerClassName
   }, React.createElement("div", {
-    className: (!openProblem.problem3 ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintHeaderClassName : ""),
+    className: (!keyOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintHeaderClassName : ""),
     onClick: function onClick() {
-      return changeOpen(_extends({}, openProblem, {
-        problem3: !openProblem.problem3
-      }));
+      return changeOpen(isOpen ? "" : keyOpen);
     }
   }, React.createElement(Typography, {
     sx: {
-      color: !openProblem.problem3 ? "#97A1AF" : "#414E62",
+      color: !keyOpen ? "#97A1AF" : "#414E62",
       fontSize: "14px",
       fontWeight: 700
     }
-  }, "\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", {
+  }, "\uB0B4\uAC00 \uCDE8\uC57D\uD55C \uBB38\uC81C"), keyOpen ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), keyOpen && React.createElement(Fragment$1, null, React.createElement("div", {
     className: styles$4["wrapperContent"]
   }, isPrint ? renderPrintQuestions(incorrectQuestions) : renderQuestions(incorrectQuestions), !incorrectQuestions.length && React.createElement("div", {
     className: styles$4["noData"] + " " + (isPrint ? PrintContentClassName : "")
@@ -11776,10 +11863,12 @@ var Vulnerable = function Vulnerable(_ref) {
 };
 
 var GradesByTerritory = function GradesByTerritory(_ref) {
-  var data = _ref.data,
+  var keyOpen = _ref.keyOpen,
+    data = _ref.data,
     openProblem = _ref.openProblem,
     changeOpen = _ref.changeOpen,
     isPrint = _ref.isPrint;
+  var isOpen = openProblem === keyOpen;
   var renderCategories = function renderCategories(data) {
     return data.map(function (item) {
       var trackStyle = {
@@ -11803,7 +11892,7 @@ var GradesByTerritory = function GradesByTerritory(_ref) {
     });
   };
   var renderPrintCategories = function renderPrintCategories() {
-    var chunkedCategories = _.chunk(data, 5);
+    var chunkedCategories = _.chunk(data, 10);
     return chunkedCategories.map(function (i, index) {
       return React.createElement("div", {
         key: index,
@@ -11814,21 +11903,19 @@ var GradesByTerritory = function GradesByTerritory(_ref) {
   return React.createElement("div", {
     className: styles$4["wrapperProblem"] + " " + (isPrint ? PrintContainerClassName : "")
   }, React.createElement("div", {
-    className: (!openProblem.problem4 ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintHeaderClassName : ""),
+    className: (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]) + " " + (isPrint ? PrintHeaderClassName : ""),
     onClick: function onClick() {
-      return changeOpen(_extends({}, openProblem, {
-        problem4: !openProblem.problem4
-      }));
+      return changeOpen(isOpen ? "" : keyOpen);
     }
   }, React.createElement(Typography, {
     sx: {
-      color: !openProblem.problem4 ? "#97A1AF" : "#414E62",
+      color: !isOpen ? "#97A1AF" : "#414E62",
       fontSize: "14px",
       fontWeight: 700
     }
-  }, "\uC601\uC5ED\uBCC4 \uC131\uC801"), openProblem.problem4 ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), openProblem.problem4 && React.createElement("div", {
+  }, "\uC601\uC5ED\uBCC4 \uC131\uC801"), isOpen ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), isOpen && React.createElement("div", {
     className: styles$4["wrappContentProblem"]
-  }, isPrint ? renderPrintCategories() : renderCategories(data), openProblem.problem4 && !data.length && React.createElement("div", {
+  }, isPrint ? renderPrintCategories() : renderCategories(data), isOpen && !data.length && React.createElement("div", {
     className: styles$4["noData"] + " " + (isPrint ? PrintContentClassName : "")
   }, "\uB370\uC774\uD130 \uC5C6\uC74C")));
 };
@@ -11960,10 +12047,17 @@ function CreateNewQuestionDialog$1(_ref) {
       className: styles$4['btn-cancel'],
       onClick: toggleCreateQuestion
     }, React.createElement(Typography$1, {
+      sx: {
+        color: styles.dark + " !important"
+      },
       fontWeight: 700,
       fontSize: '14px',
       lineHeight: '16.71px'
     }, "\uCDE8\uC18C")), React.createElement(Button$1, {
+      variant: 'contained',
+      sx: {
+        bgcolor: styles.dark
+      },
       className: styles$4['btn-register'],
       type: "submit"
     }, React.createElement(Typography$1, {
@@ -12042,7 +12136,7 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     timelyOrderQuestions = _useExamResult.timelyOrderQuestions,
     isStudent = _useExamResult.isStudent,
     openProblem = _useExamResult.openProblem,
-    resultDatas = _useExamResult.resultDatas,
+    resultData = _useExamResult.resultData,
     longTimeSpend = _useExamResult.longTimeSpend,
     effectSize = _useExamResult.effectSize,
     categoryResponses = _useExamResult.categoryResponses,
@@ -12057,7 +12151,7 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     openCreateQuestionDialog = _useCreateQuestionDia.openCreateQuestionDialog,
     toggleCreateQuestion = _useCreateQuestionDia.toggleCreateQuestion;
   var isTabletUp = useMediaQuery('(min-width:900px)');
-  return React.createElement(Fragment$1, null, timelyOrderQuestions[dataChartIndex] && longTimeSpend && resultDatas && effectSize ? React.createElement("div", {
+  return React.createElement(Fragment$1, null, timelyOrderQuestions[dataChartIndex] && longTimeSpend && resultData && effectSize ? React.createElement("div", {
     style: {
       width: "100%"
     }
@@ -12066,13 +12160,13 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     padding: "24px"
   }, React.createElement(Grid, {
     item: true
-  }, resultDatas.courseName && React.createElement(Stack, null, React.createElement(Typography, {
+  }, resultData.courseName && React.createElement(Stack, null, React.createElement(Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: 600,
-      color: "#C3C5FE"
+      color: styles.less_dark
     }
-  }, resultDatas.courseName)), React.createElement(Box, {
+  }, resultData.courseName)), React.createElement(Box, {
     display: "flex",
     gap: "16px",
     flexDirection: "column"
@@ -12080,78 +12174,77 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     sx: {
       fontSize: "20px",
       fontWeight: 600,
-      color: "#5458D5"
+      color: styles.darker
     }
-  }, resultDatas.title)), React.createElement(Stack, {
+  }, resultData.title)), React.createElement(Stack, {
     flexDirection: "row",
     gap: "16px"
   }, React.createElement(Stack, null, React.createElement(Typography, {
     sx: {
       fontSize: "13px",
       fontWeight: 600,
-      color: "#97A1AF"
+      color: styles.gray_500
     }
   }, t("my_score")), React.createElement(Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: 600,
-      color: "#5458D5"
+      color: styles.darker
     }
   }, t("score_format", {
-    score: resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.score
+    score: resultData === null || resultData === void 0 ? void 0 : resultData.score
   }))), React.createElement(Stack, null, React.createElement(Typography, {
     sx: {
       fontSize: "13px",
       fontWeight: 600,
-      color: "#97A1AF"
+      color: styles.gray_500
     }
   }, t("exam_date")), React.createElement(Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: 600,
-      color: "#414E62"
+      color: styles.gray_700
     }
-  }, utcToLocalTime(resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.startTime, t("date_format")))), React.createElement(Stack, null, React.createElement(Typography, {
+  }, utcToLocalTime(resultData === null || resultData === void 0 ? void 0 : resultData.startTime, t("date_format")))), React.createElement(Stack, null, React.createElement(Typography, {
     sx: {
       fontSize: "13px",
       fontWeight: 600,
-      color: "#97A1AF"
+      color: styles.gray_500
     }
   }, t("exam_time")), React.createElement(Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: 600,
-      color: "#414E62"
+      color: styles.gray_700
     }
   }, examTime)), React.createElement(Stack, null, React.createElement(Typography, {
     sx: {
       fontSize: "13px",
       fontWeight: 600,
-      color: "#97A1AF"
+      color: styles.gray_500
     }
   }, t("total_students")), React.createElement(Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: 600,
-      color: "#414E62"
+      color: styles.gray_700
     }
   }, t("number_people", {
-    number: resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.totalStudent
+    number: resultData === null || resultData === void 0 ? void 0 : resultData.totalStudent
   }))), React.createElement(Stack, null, React.createElement(Typography, {
     sx: {
       fontSize: "13px",
       fontWeight: 600,
-      color: "#97A1AF"
+      color: styles.gray_500
     }
   }, t("teacher_in_charge")), React.createElement(Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: 600,
-      color: "#414E62"
+      color: styles.gray_700
     }
-  }, resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.teacherName)))))), React.createElement(Grid, {
+  }, resultData === null || resultData === void 0 ? void 0 : resultData.teacherName)))))), React.createElement(Grid, {
     container: true,
-    padding: "24px",
     className: "position-relative overflow-hidden"
   }, !isTabletUp && React.createElement(Grid, {
     item: true,
@@ -12183,7 +12276,8 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     justifyContent: "space-between",
     alignItems: "center",
     display: "flex",
-    bgcolor: "#F9FAFB",
+    overflow: "scroll",
+    bgcolor: styles.gray_100,
     borderTop: "1px solid #E4E7EC",
     borderBottom: "1px solid #E4E7EC"
   }, React.createElement(Stack, {
@@ -12200,14 +12294,16 @@ var ExamResultV2 = function ExamResultV2(_ref) {
       sx: {
         fontSize: "14px",
         fontWeight: "600",
-        color: value === selected ? "#000" : "#97A1AF",
+        color: value === selected ? styles.less_dark : styles.gray_500,
         padding: "8px 16px",
-        bgcolor: value === selected ? "#FFF" : "#F9FAFB"
+        "&:hover": {
+          background: styles.light
+        }
       },
       onClick: function onClick() {
         return handleChangeTab(value);
       }
-    }, t(label));
+    }, label);
   })), isTabletUp && React.createElement(Stack, {
     padding: '12px 24px',
     alignItems: "end",
@@ -12224,7 +12320,7 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     value: selected,
     index: 0
   }, React.createElement(MyAnswer, {
-    data: resultDatas,
+    data: resultData,
     categories: categoryResponses,
     isStudent: isStudent
   })), React.createElement(CustomTabPanel, {
@@ -12253,18 +12349,22 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     value: selected,
     index: 3
   }, React.createElement(TrickyProblem, {
-    data: resultDatas,
+    keyOpen: "TrickyProblem",
+    data: resultData,
     openProblem: openProblem,
     changeOpen: setOpenProblem
   }), React.createElement(Vulnerable, {
-    data: resultDatas,
+    keyOpen: "Vulnerable",
+    data: resultData,
     openProblem: openProblem,
     changeOpen: setOpenProblem
   }), React.createElement(ProtractedProblem, {
+    keyOpen: "ProtractedProblem",
     data: longTimeSpend,
     openProblem: openProblem,
     changeOpen: setOpenProblem
   }), React.createElement(GradesByTerritory, {
+    keyOpen: "GradesByTerritory",
     data: categoryResponses,
     openProblem: openProblem,
     changeOpen: setOpenProblem
@@ -12283,13 +12383,13 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     id: "header-canvas"
   }, React.createElement(Grid, {
     item: true
-  }, resultDatas.courseName && React.createElement(Stack, null, React.createElement(Typography, {
+  }, resultData.courseName && React.createElement(Stack, null, React.createElement(Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: 600,
-      color: "#C3C5FE"
+      color: styles.less_dark
     }
-  }, resultDatas.courseName)), React.createElement(Box, {
+  }, resultData.courseName)), React.createElement(Box, {
     display: "flex",
     gap: "16px",
     flexDirection: "column"
@@ -12297,76 +12397,76 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     sx: {
       fontSize: "20px",
       fontWeight: 600,
-      color: "#5458D5"
+      color: styles.darker
     }
-  }, resultDatas.title)), React.createElement(Stack, {
+  }, resultData.title)), React.createElement(Stack, {
     flexDirection: "row",
     gap: "16px"
   }, React.createElement(Stack, null, React.createElement(Typography, {
     sx: {
       fontSize: "13px",
       fontWeight: 600,
-      color: "#97A1AF"
+      color: styles.gray_500
     }
   }, t("my_score")), React.createElement(Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: 600,
-      color: "#5458D5"
+      color: styles.darker
     }
   }, t("score_format", {
-    score: resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.score
+    score: resultData === null || resultData === void 0 ? void 0 : resultData.score
   }))), React.createElement(Stack, null, React.createElement(Typography, {
     sx: {
       fontSize: "13px",
       fontWeight: 600,
-      color: "#97A1AF"
+      color: styles.gray_500
     }
   }, t("exam_date")), React.createElement(Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: 600,
-      color: "#414E62"
+      color: styles.gray_700
     }
-  }, utcToLocalTime(resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.startTime, t("date_format")))), React.createElement(Stack, null, React.createElement(Typography, {
+  }, utcToLocalTime(resultData === null || resultData === void 0 ? void 0 : resultData.startTime, t("date_format")))), React.createElement(Stack, null, React.createElement(Typography, {
     sx: {
       fontSize: "13px",
       fontWeight: 600,
-      color: "#97A1AF"
+      color: styles.gray_500
     }
   }, t("exam_time")), React.createElement(Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: 600,
-      color: "#414E62"
+      color: styles.gray_700
     }
   }, examTime)), React.createElement(Stack, null, React.createElement(Typography, {
     sx: {
       fontSize: "13px",
       fontWeight: 600,
-      color: "#97A1AF"
+      color: styles.gray_500
     }
   }, t("total_students")), React.createElement(Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: 600,
-      color: "#414E62"
+      color: styles.gray_700
     }
   }, t("number_people", {
-    number: resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.totalStudent
+    number: resultData === null || resultData === void 0 ? void 0 : resultData.totalStudent
   }))), React.createElement(Stack, null, React.createElement(Typography, {
     sx: {
       fontSize: "13px",
       fontWeight: 600,
-      color: "#97A1AF"
+      color: styles.gray_500
     }
   }, t("teacher_in_charge")), React.createElement(Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: 600,
-      color: "#414E62"
+      color: styles.gray_700
     }
-  }, resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.teacherName)))))), React.createElement(Stack, {
+  }, resultData === null || resultData === void 0 ? void 0 : resultData.teacherName)))))), React.createElement(Stack, {
     display: "flex",
     flexDirection: "column",
     gap: "12px"
@@ -12375,10 +12475,10 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     sx: {
       fontSize: "18px",
       fontWeight: 700,
-      color: "#414E62"
+      color: styles.gray_500
     }
   }, t(TabList[0].label)), React.createElement(MyAnswer, {
-    data: resultDatas,
+    data: resultData,
     categories: categoryResponses,
     isStudent: isStudent,
     isPrint: true
@@ -12392,7 +12492,7 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     sx: {
       fontSize: "18px",
       fontWeight: 700,
-      color: "#414E62"
+      color: styles.gray_500
     }
   }, t(TabList[1].label)), timelyOrderQuestions.map(function (timelyOrderQuestion, index) {
     return React.createElement("div", {
@@ -12408,23 +12508,26 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     }, t("article_number"), " ", timelyOrderQuestion.article), React.createElement("div", {
       className: styles$4["compareChart"] + " " + PrintContentClassName
     }, React.createElement("div", {
+      className: "" + styles$4["prevChart"]
+    }), React.createElement("div", {
       className: styles$4["chart"] + " sr-line-chart"
     }, React.createElement("div", null, React.createElement(ReactApexChart, {
       height: 389,
       options: allChartOptions[index],
       series: allSeries[index]
-    })))));
+    }))), React.createElement("div", {
+      className: "" + styles$4["nextChart"]
+    })));
   })), React.createElement(Stack, {
     display: "flex",
     flexDirection: "column",
     gap: "12px",
     marginTop: "24px"
   }, React.createElement(Typography, {
-    className: "chart-title",
     sx: {
-      fontSize: "18px",
+      fontSize: "16px",
       fontWeight: 700,
-      color: "#414E62"
+      color: styles.grey_500
     }
   }, t(TabList[2].label)), React.createElement(CompareGrass, {
     effectSize: effectSize,
@@ -12439,38 +12542,34 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     sx: {
       fontSize: "18px",
       fontWeight: 700,
-      color: "#414E62"
+      color: styles.gray_500
     }
   }, t(TabList[3].label)), React.createElement(TrickyProblem, {
-    data: resultDatas,
-    openProblem: _extends({}, openProblem, {
-      problem1: true
-    }),
+    keyOpen: "TrickyProblem",
+    data: resultData,
+    openProblem: "TrickyProblem",
     changeOpen: setOpenProblem,
     isPrint: true
   }), React.createElement(Vulnerable, {
-    data: resultDatas,
-    openProblem: _extends({}, openProblem, {
-      problem3: true
-    }),
+    keyOpen: "Vulnerable",
+    data: resultData,
+    openProblem: "Vulnerable",
     changeOpen: setOpenProblem,
     isPrint: true
   }), React.createElement(ProtractedProblem, {
+    keyOpen: "ProtractedProblem",
     data: longTimeSpend,
-    openProblem: _extends({}, openProblem, {
-      problem2: true
-    }),
+    openProblem: "ProtractedProblem",
     changeOpen: setOpenProblem,
     isPrint: true
   }), React.createElement(GradesByTerritory, {
+    keyOpen: "GradesByTerritory",
     data: categoryResponses,
-    openProblem: _extends({}, openProblem, {
-      problem4: true
-    }),
+    openProblem: "GradesByTerritory",
     changeOpen: setOpenProblem,
     isPrint: true
   })))), React.createElement(CreateNewQuestionDialog$1, {
-    examSessionId: resultDatas === null || resultDatas === void 0 ? void 0 : resultDatas.examSessionId,
+    examSessionId: resultData === null || resultData === void 0 ? void 0 : resultData.examSessionId,
     handleCreateQuestion: handleCreateQuestion,
     openCreateQuestionDialog: openCreateQuestionDialog,
     toggleCreateQuestion: toggleCreateQuestion
@@ -12578,7 +12677,8 @@ var Header = function Header(_ref) {
     direction: "row",
     alignItems: "center"
   }, React.createElement(Typography, {
-    className: "fw-bold text-primary me-2 text-nowrap flex-shrink-1",
+    color: styles.dark,
+    className: "fw-bold me-2 text-nowrap",
     sx: {
       minWidth: "60px",
       overflow: "hidden",