@elice/material-exercise 1.240718.3 → 1.240719.1

package/es/components/material-exercise/exercise-room/ExerciseRoomDetail.js

@@ -1,3 +1,5 @@
+import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React from 'react';
 import { useCopyToClipboard, useDebounce, useUpdateEffect } from 'react-use';
 import { getOrgMaterialExerciseExerciseRoomGet, postOrgMaterialExerciseExerciseRoomEdit, postOrgMaterialExerciseExerciseRoomDefaultRoomSet, getOrgCourseUserList, postOrgMaterialExerciseExerciseRoomDelete, postOrgMaterialExerciseExerciseRoomUserDelete, postOrgMaterialExerciseExerciseRoomUserEdit } from '@elice/api-client';
@@ -17,75 +19,105 @@ import '../context/ExerciseProvider.js';
 import { exerciseRoomPermissionStringConvertor } from './helpers/exerciseRoomPermissionStringConvertor.js';
 import { StyledExerciseRoomTableWrapper, StyledExerciseRoomTable, StyledExerciseRoomThead, StyledExerciseRoomTr, StyledExerciseRoomTh, StyledExerciseRoomTbody, StyledExerciseRoomTd } from './ExerciseRoom.styled.js';
 
-const StyledModal = styled(Modal).withConfig({
+var StyledModal = styled(Modal).withConfig({
   componentId: "sc-x9irqe-0"
 })(["& > div:first-child{.eb-button{color:", ";&:hover{color:", ";}}}& .eb-input[width='full']{*:not(button,button > *){background-color:", ";color:", ";}& > div{border:1px solid ", ";}}& .eb-select{*{background-color:", ";color:", ";}& > div{border:1px solid ", ";}& select{padding-top:6px;padding-bottom:6px;height:2rem;font-size:0.75rem;}}"], base.color.navy0, base.color.navy0, base.color.navy7, base.color.navy0, base.color.navy6, base.color.navy6, base.color.navy0, base.color.navy5);
-const MaterialExerciseExerciseRoomDetail = ({
-  selectedExerciseRoomId,
-  goToList,
-  onHide
-}) => {
+var MaterialExerciseExerciseRoomDetail = function MaterialExerciseExerciseRoomDetail(_ref) {
+  var selectedExerciseRoomId = _ref.selectedExerciseRoomId,
+    goToList = _ref.goToList,
+    onHide = _ref.onHide;
   var _a, _b, _c, _d, _e;
-  const intl = useRawEliceIntl();
-  const {
-    materialExerciseId,
-    onExerciseRoomIdChange
-  } = React.useContext(ExerciseContext);
-  const materialExercise = useRecoilValue(exerciseState(materialExerciseId));
-  const user = useRecoilValue(exerciseUserState);
-  const [exerciseRoom, setExerciseRoom] = React.useState();
-  const [title, setTitle] = React.useState('');
-  const [debouncedTitle, setDebouncedTitle] = React.useState('');
-  const [search, setSearch] = React.useState('');
-  const [debouncedSearch, setDebouncedSearch] = React.useState('');
-  const [exerciseRoomUserList, setExerciseRoomUserList] = React.useState([]);
-  const [isLeaveDialogOpen, setIsLeaveDialogOpen] = React.useState(false);
-  const [isDeleting, setIsDeleting] = React.useState(false);
-  const isThisChatRoomOwner = (_b = ((_a = exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.roomUsers.find(roomUser => roomUser.user.id === (user === null || user === void 0 ? void 0 : user.id))) === null || _a === void 0 ? void 0 : _a.permission) === enums.ExerciseRoomPermission.Owner) !== null && _b !== void 0 ? _b : false;
-  const shareLink = materialExercise ? `https://${window.location.host}/courses/${materialExercise._courseId}/lectures/${materialExercise === null || materialExercise === void 0 ? void 0 : materialExercise._lectureId}/lecturepages/${materialExercise === null || materialExercise === void 0 ? void 0 : materialExercise._lecturePageId}/projects/${selectedExerciseRoomId}` : '';
-  const [, copyToClipboard] = useCopyToClipboard();
-  const doGetOrgMaterialExerciseExerciseRoomGet = React.useCallback(() => {
+  var intl = useRawEliceIntl();
+  var _React$useContext = React.useContext(ExerciseContext),
+    materialExerciseId = _React$useContext.materialExerciseId,
+    onExerciseRoomIdChange = _React$useContext.onExerciseRoomIdChange;
+  var materialExercise = useRecoilValue(exerciseState(materialExerciseId));
+  var user = useRecoilValue(exerciseUserState);
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    exerciseRoom = _React$useState2[0],
+    setExerciseRoom = _React$useState2[1];
+  var _React$useState3 = React.useState(''),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    title = _React$useState4[0],
+    setTitle = _React$useState4[1];
+  var _React$useState5 = React.useState(''),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    debouncedTitle = _React$useState6[0],
+    setDebouncedTitle = _React$useState6[1];
+  var _React$useState7 = React.useState(''),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    search = _React$useState8[0],
+    setSearch = _React$useState8[1];
+  var _React$useState9 = React.useState(''),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    debouncedSearch = _React$useState10[0],
+    setDebouncedSearch = _React$useState10[1];
+  var _React$useState11 = React.useState([]),
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    exerciseRoomUserList = _React$useState12[0],
+    setExerciseRoomUserList = _React$useState12[1];
+  var _React$useState13 = React.useState(false),
+    _React$useState14 = _slicedToArray(_React$useState13, 2),
+    isLeaveDialogOpen = _React$useState14[0],
+    setIsLeaveDialogOpen = _React$useState14[1];
+  var _React$useState15 = React.useState(false),
+    _React$useState16 = _slicedToArray(_React$useState15, 2),
+    isDeleting = _React$useState16[0],
+    setIsDeleting = _React$useState16[1];
+  var isThisChatRoomOwner = (_b = ((_a = exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.roomUsers.find(function (roomUser) {
+    return roomUser.user.id === (user === null || user === void 0 ? void 0 : user.id);
+  })) === null || _a === void 0 ? void 0 : _a.permission) === enums.ExerciseRoomPermission.Owner) !== null && _b !== void 0 ? _b : false;
+  var shareLink = materialExercise ? "https://".concat(window.location.host, "/courses/").concat(materialExercise._courseId, "/lectures/").concat(materialExercise === null || materialExercise === void 0 ? void 0 : materialExercise._lectureId, "/lecturepages/").concat(materialExercise === null || materialExercise === void 0 ? void 0 : materialExercise._lecturePageId, "/projects/").concat(selectedExerciseRoomId) : '';
+  var _useCopyToClipboard = useCopyToClipboard(),
+    _useCopyToClipboard2 = _slicedToArray(_useCopyToClipboard, 2),
+    copyToClipboard = _useCopyToClipboard2[1];
+  var doGetOrgMaterialExerciseExerciseRoomGet = React.useCallback(function () {
     return getOrgMaterialExerciseExerciseRoomGet({
       exerciseRoomId: selectedExerciseRoomId
-    }).then(res => {
+    }).then(function (res) {
       setExerciseRoom(res.exerciseRoom);
-      const list = _.map(res.exerciseRoom.roomUsers, ({
-        user: {
-          id,
-          profileUrl,
-          fullname
-        },
-        permission
-      }) => ({
-        id,
-        profileUrl,
-        fullname,
-        permission
-      }));
+      var list = _.map(res.exerciseRoom.roomUsers, function (_ref2) {
+        var _ref2$user = _ref2.user,
+          id = _ref2$user.id,
+          profileUrl = _ref2$user.profileUrl,
+          fullname = _ref2$user.fullname,
+          permission = _ref2.permission;
+        return {
+          id: id,
+          profileUrl: profileUrl,
+          fullname: fullname,
+          permission: permission
+        };
+      });
       setTitle(res.exerciseRoom.title);
       setDebouncedTitle(res.exerciseRoom.title);
       setExerciseRoomUserList(list);
     }).catch(console.error);
   }, [selectedExerciseRoomId]);
-  const doPostOrgMaterialExerciseExerciseRoomEdit = React.useCallback(publicPermission => {
+  var doPostOrgMaterialExerciseExerciseRoomEdit = React.useCallback(function (publicPermission) {
     if (exerciseRoom && materialExercise) {
       postOrgMaterialExerciseExerciseRoomEdit({
         materialExerciseId: materialExercise.id,
-        publicPermission,
+        publicPermission: publicPermission,
         title: exerciseRoom.title,
         exerciseRoomId: selectedExerciseRoomId
-      }).then(() => doGetOrgMaterialExerciseExerciseRoomGet()).catch(console.error);
+      }).then(function () {
+        return doGetOrgMaterialExerciseExerciseRoomGet();
+      }).catch(console.error);
     }
   }, [doGetOrgMaterialExerciseExerciseRoomGet, exerciseRoom, selectedExerciseRoomId, materialExercise]);
-  const doPostOrgMaterialExerciseExerciseRoomDefaultRoomSet = React.useCallback(() => {
+  var doPostOrgMaterialExerciseExerciseRoomDefaultRoomSet = React.useCallback(function () {
     postOrgMaterialExerciseExerciseRoomDefaultRoomSet({
       exerciseRoomId: selectedExerciseRoomId
-    }).then(() => doGetOrgMaterialExerciseExerciseRoomGet()).catch(console.error);
+    }).then(function () {
+      return doGetOrgMaterialExerciseExerciseRoomGet();
+    }).catch(console.error);
   }, [doGetOrgMaterialExerciseExerciseRoomGet, selectedExerciseRoomId]);
-  useDebounce(() => {
+  useDebounce(function () {
     setDebouncedSearch(search);
   }, 300, [search]);
-  const doGetOrgCourseUserList = React.useCallback(() => {
+  var doGetOrgCourseUserList = React.useCallback(function () {
     if (materialExercise) {
       return getOrgCourseUserList({
         courseId: materialExercise._courseId,
@@ -95,9 +127,9 @@ const MaterialExerciseExerciseRoomDetail = ({
         filterConditions: {
           $and: [{
             $or: [{
-              name: `%${debouncedSearch}%`
+              name: "%".concat(debouncedSearch, "%")
             }, {
-              email: `%${debouncedSearch}%`
+              email: "%".concat(debouncedSearch, "%")
             }]
           }, {
             $or: [{
@@ -113,86 +145,109 @@ const MaterialExerciseExerciseRoomDetail = ({
             }]
           }]
         }
-      }).then(async res => {
-        const {
-          exerciseRoom
-        } = await getOrgMaterialExerciseExerciseRoomGet({
-          exerciseRoomId: selectedExerciseRoomId
-        });
-        const list = _.map(res.users, ({
-          id,
-          profileUrl,
-          fullname
-        }) => {
-          var _a, _b;
-          return {
-            id,
-            profileUrl,
-            fullname,
-            permission: (_b = (_a = _.find(exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.roomUsers, roomUser => roomUser.user.id === id)) === null || _a === void 0 ? void 0 : _a.permission) !== null && _b !== void 0 ? _b : enums.ExerciseRoomPermission.Nothing
-          };
-        });
-        setExerciseRoomUserList(list);
-      }).catch(console.error);
+      }).then( /*#__PURE__*/function () {
+        var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(res) {
+          var _yield$getOrgMaterial, exerciseRoom, list;
+          return _regeneratorRuntime().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return getOrgMaterialExerciseExerciseRoomGet({
+                  exerciseRoomId: selectedExerciseRoomId
+                });
+              case 2:
+                _yield$getOrgMaterial = _context.sent;
+                exerciseRoom = _yield$getOrgMaterial.exerciseRoom;
+                list = _.map(res.users, function (_ref4) {
+                  var id = _ref4.id,
+                    profileUrl = _ref4.profileUrl,
+                    fullname = _ref4.fullname;
+                  var _a, _b;
+                  return {
+                    id: id,
+                    profileUrl: profileUrl,
+                    fullname: fullname,
+                    permission: (_b = (_a = _.find(exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.roomUsers, function (roomUser) {
+                      return roomUser.user.id === id;
+                    })) === null || _a === void 0 ? void 0 : _a.permission) !== null && _b !== void 0 ? _b : enums.ExerciseRoomPermission.Nothing
+                  };
+                });
+                setExerciseRoomUserList(list);
+              case 6:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        return function (_x) {
+          return _ref3.apply(this, arguments);
+        };
+      }()).catch(console.error);
     }
   }, [debouncedSearch, materialExercise, selectedExerciseRoomId]);
-  React.useEffect(() => {
+  React.useEffect(function () {
     if (debouncedSearch) {
       void doGetOrgCourseUserList();
     } else {
       void doGetOrgMaterialExerciseExerciseRoomGet();
     }
   }, [debouncedSearch, doGetOrgCourseUserList, doGetOrgMaterialExerciseExerciseRoomGet]);
-  useDebounce(() => {
+  useDebounce(function () {
     setDebouncedTitle(title);
   }, 300, [title]);
-  useUpdateEffect(() => {
+  useUpdateEffect(function () {
     if (debouncedTitle.length > 0 && materialExercise && exerciseRoom && exerciseRoom.title !== debouncedTitle) {
       postOrgMaterialExerciseExerciseRoomEdit({
         materialExerciseId: materialExercise.id,
         publicPermission: exerciseRoom.publicPermission,
         title: debouncedTitle,
         exerciseRoomId: selectedExerciseRoomId
-      }).then(() => doGetOrgMaterialExerciseExerciseRoomGet()).catch(console.error);
+      }).then(function () {
+        return doGetOrgMaterialExerciseExerciseRoomGet();
+      }).catch(console.error);
     }
   }, [debouncedTitle]);
-  return React.createElement(StyledModal, {
+  return jsxs(StyledModal, {
     theme: "dark",
     onHide: onHide,
     title: (_c = exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.title) !== null && _c !== void 0 ? _c : '',
     headerIcon: eilArrowLeftwardsSingle,
     onHeaderIconClick: goToList,
-    footerChild: exerciseRoom ? exerciseRoom.isDefaultRoom ? React.createElement(Flex, {
+    footerChild: exerciseRoom ? exerciseRoom.isDefaultRoom ? jsxs(Flex, {
       justify: "flex-end",
-      align: "center"
-    }, React.createElement(Icon, {
-      icon: eisArrowDownwardsCircle,
-      color: base.color.primary3,
-      style: {
-        marginRight: '0.5rem'
-      }
-    }), React.createElement(Text, {
-      role: "lightpurple",
-      size: "tiny"
-    }, intl.formatMessage({
-      id: 'materialExerciseExerciseRoom.defaultExerciseRoomDescription'
-    }))) : React.createElement(Flex, {
+      align: "center",
+      children: [jsx(Icon, {
+        icon: eisArrowDownwardsCircle,
+        color: base.color.primary3,
+        style: {
+          marginRight: '0.5rem'
+        }
+      }), jsx(Text, {
+        role: "lightpurple",
+        size: "tiny",
+        children: intl.formatMessage({
+          id: 'materialExerciseExerciseRoom.defaultExerciseRoomDescription'
+        })
+      })]
+    }) : jsx(Flex, {
       justify: "flex-end",
-      align: "center"
-    }, React.createElement(Button, {
-      transparent: true,
-      role: "lightpurple",
-      underline: true,
-      border: false,
-      onClick: doPostOrgMaterialExerciseExerciseRoomDefaultRoomSet
-    }, intl.formatMessage({
-      id: 'materialExerciseExerciseRoom.setDefaultExerciseRoom'
-    }))) : undefined,
+      align: "center",
+      children: jsx(Button, {
+        transparent: true,
+        role: "lightpurple",
+        underline: true,
+        border: false,
+        onClick: doPostOrgMaterialExerciseExerciseRoomDefaultRoomSet,
+        children: intl.formatMessage({
+          id: 'materialExerciseExerciseRoom.setDefaultExerciseRoom'
+        })
+      })
+    }) : undefined,
     footerButtons: [{
       label: intl.formatMessage({
         id: 'materialExerciseExerciseRoom.open'
       }),
-      onClick: () => {
+      onClick: function onClick() {
         if (exerciseRoom && typeof onExerciseRoomIdChange === 'function') {
           onExerciseRoomIdChange(exerciseRoom.id);
           onHide();
@@ -206,277 +261,371 @@ const MaterialExerciseExerciseRoomDetail = ({
       }),
       disabled: (_d = exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.isDefaultRoom) !== null && _d !== void 0 ? _d : false,
       role: 'gray6',
-      onClick: () => {
+      onClick: function onClick() {
         setIsLeaveDialogOpen(true);
       }
-    }]
-  }, isLeaveDialogOpen ? React.createElement(Dialog, {
-    type: "warning",
-    title: intl.formatMessage({
-      id: 'materialExerciseExerciseRoom.leave.dialog.title'
-    }),
-    body: intl.formatMessage({
-      id: 'materialExerciseExerciseRoom.leave.dialog.body'
-    }),
-    onHide: () => {
-      setIsLeaveDialogOpen(false);
-    }
-  }, React.createElement(Dialog.ActionButton, {
-    loading: isDeleting,
-    onClick: () => {
-      if (isThisChatRoomOwner) {
-        setIsDeleting(true);
-        postOrgMaterialExerciseExerciseRoomDelete({
-          exerciseRoomId: selectedExerciseRoomId
-        }).then(() => {
-          goToList();
-        }).catch(console.error).finally(() => {
-          setIsDeleting(false);
-        });
-      } else {
-        setIsDeleting(true);
-        postOrgMaterialExerciseExerciseRoomUserDelete({
-          exerciseRoomId: selectedExerciseRoomId
-        }).then(() => {
-          goToList();
-        }).catch(console.error).finally(() => {
-          setIsDeleting(false);
-        });
-      }
-    }
-  }, '확인'), React.createElement(Dialog.CloseButton, {
-    onClick: () => {
-      setIsLeaveDialogOpen(false);
-    }
-  }, '취소')) : null, isThisChatRoomOwner ? React.createElement(React.Fragment, null, React.createElement(Label, {
-    role: "white",
-    size: "tiny"
-  }, intl.formatMessage({
-    id: 'materialExerciseExerciseRoom.detail.title.label'
-  })), React.createElement(Vspace, {
-    height: 0.5
-  }), React.createElement(Input, {
-    size: "small",
-    width: "full",
-    value: title,
-    onChange: e => setTitle(e.target.value),
-    placeholder: intl.formatMessage({
-      id: 'materialExerciseExerciseRoom.detail.title.placeholder'
-    })
-  }), React.createElement(Vspace, {
-    height: 1.25
-  })) : null, isThisChatRoomOwner ? React.createElement(React.Fragment, null, React.createElement(Label, {
-    role: "white",
-    size: "tiny"
-  }, intl.formatMessage({
-    id: 'materialExerciseExerciseRoom.detail.addUsers.label'
-  })), React.createElement(Vspace, {
-    height: 0.5
-  }), React.createElement(Input, {
-    prefix: eilSearch,
-    size: "small",
-    width: "full",
-    value: search,
-    onChange: e => setSearch(e.target.value),
-    placeholder: intl.formatMessage({
-      id: 'materialExerciseExerciseRoom.detail.addUsers.placeholder'
-    })
-  }), React.createElement(Vspace, {
-    height: 1.25
-  })) : null, React.createElement(StyledExerciseRoomTableWrapper, null, React.createElement(StyledExerciseRoomTable, null, React.createElement("colgroup", null, React.createElement("col", {
-    span: 1,
-    width: "70%"
-  }), React.createElement("col", {
-    span: 1,
-    width: "30%"
-  })), React.createElement(StyledExerciseRoomThead, null, React.createElement(StyledExerciseRoomTr, null, React.createElement(StyledExerciseRoomTh, null, intl.formatMessage({
-    id: 'materialExerciseExerciseRoom.detail.table.head.users'
-  })), React.createElement(StyledExerciseRoomTh, null, intl.formatMessage({
-    id: 'materialExerciseExerciseRoom.detail.table.head.permission'
-  })))), React.createElement(StyledExerciseRoomTbody, null, exerciseRoomUserList.map(chatroomUser => {
-    const renderUserPermission = () => {
-      if ((user === null || user === void 0 ? void 0 : user.id) === chatroomUser.id || !isThisChatRoomOwner) {
-        return React.createElement(Text, {
-          bold: true,
-          role: "gray0",
-          size: "tiny",
-          preWrap: true,
-          ellipsis: true,
-          customStyles: {
-            maxWidth: '100px',
-            marginRight: '0.5rem'
-          }
-        }, intl.formatMessage({
-          id: `materialExerciseExerciseRoom.exerciseRoom.publicPermission.${exerciseRoomPermissionStringConvertor(chatroomUser.permission)}`
-        }));
-      } else if (chatroomUser.permission === enums.ExerciseRoomPermission.Nothing) {
-        return React.createElement(Flex, {
-          align: "center"
-        }, React.createElement(Text, {
-          bold: true,
-          role: "gray0",
-          size: "tiny",
-          preWrap: true,
-          ellipsis: true,
-          customStyles: {
-            maxWidth: '100px',
-            marginRight: '0.5rem'
-          }
-        }, intl.formatMessage({
-          id: `materialExerciseExerciseRoom.exerciseRoom.publicPermission.${exerciseRoomPermissionStringConvertor(chatroomUser.permission)}`
-        })), React.createElement(Button, {
-          size: "micro",
-          role: "lightpurple",
-          loading: false,
-          onClick: async () => {
-            try {
-              await postOrgMaterialExerciseExerciseRoomUserEdit({
-                exerciseRoomId: selectedExerciseRoomId,
-                permission: enums.ExerciseRoomPermission.Read,
-                userId: chatroomUser.id
-              });
-              if (debouncedSearch) {
-                void doGetOrgCourseUserList();
-              } else {
-                void doGetOrgMaterialExerciseExerciseRoomGet();
-              }
-            } catch (error) {
-              console.error(error);
-            }
+    }],
+    children: [isLeaveDialogOpen ? jsxs(Dialog, {
+      type: "warning",
+      title: intl.formatMessage({
+        id: 'materialExerciseExerciseRoom.leave.dialog.title'
+      }),
+      body: intl.formatMessage({
+        id: 'materialExerciseExerciseRoom.leave.dialog.body'
+      }),
+      onHide: function onHide() {
+        setIsLeaveDialogOpen(false);
+      },
+      children: [jsx(Dialog.ActionButton, {
+        loading: isDeleting,
+        onClick: function onClick() {
+          if (isThisChatRoomOwner) {
+            setIsDeleting(true);
+            postOrgMaterialExerciseExerciseRoomDelete({
+              exerciseRoomId: selectedExerciseRoomId
+            }).then(function () {
+              goToList();
+            }).catch(console.error).finally(function () {
+              setIsDeleting(false);
+            });
+          } else {
+            setIsDeleting(true);
+            postOrgMaterialExerciseExerciseRoomUserDelete({
+              exerciseRoomId: selectedExerciseRoomId
+            }).then(function () {
+              goToList();
+            }).catch(console.error).finally(function () {
+              setIsDeleting(false);
+            });
           }
-        }, intl.formatMessage({
-          id: 'materialExerciseExerciseRoom.detail.table.body.add'
-        })));
-      } else {
-        return React.createElement(Select, {
-          size: "small",
-          width: "small",
-          value: chatroomUser.permission,
-          onChange: async value => {
-            try {
-              const permission = Number(value);
-              if (permission === enums.ExerciseRoomPermission.Nothing) {
-                await postOrgMaterialExerciseExerciseRoomUserDelete({
-                  exerciseRoomId: selectedExerciseRoomId,
-                  userId: chatroomUser.id
+        },
+        children: '확인'
+      }), jsx(Dialog.CloseButton, {
+        onClick: function onClick() {
+          setIsLeaveDialogOpen(false);
+        },
+        children: '취소'
+      })]
+    }) : null, isThisChatRoomOwner ? jsxs(Fragment, {
+      children: [jsx(Label, {
+        role: "white",
+        size: "tiny",
+        children: intl.formatMessage({
+          id: 'materialExerciseExerciseRoom.detail.title.label'
+        })
+      }), jsx(Vspace, {
+        height: 0.5
+      }), jsx(Input, {
+        size: "small",
+        width: "full",
+        value: title,
+        onChange: function onChange(e) {
+          return setTitle(e.target.value);
+        },
+        placeholder: intl.formatMessage({
+          id: 'materialExerciseExerciseRoom.detail.title.placeholder'
+        })
+      }), jsx(Vspace, {
+        height: 1.25
+      })]
+    }) : null, isThisChatRoomOwner ? jsxs(Fragment, {
+      children: [jsx(Label, {
+        role: "white",
+        size: "tiny",
+        children: intl.formatMessage({
+          id: 'materialExerciseExerciseRoom.detail.addUsers.label'
+        })
+      }), jsx(Vspace, {
+        height: 0.5
+      }), jsx(Input, {
+        prefix: eilSearch,
+        size: "small",
+        width: "full",
+        value: search,
+        onChange: function onChange(e) {
+          return setSearch(e.target.value);
+        },
+        placeholder: intl.formatMessage({
+          id: 'materialExerciseExerciseRoom.detail.addUsers.placeholder'
+        })
+      }), jsx(Vspace, {
+        height: 1.25
+      })]
+    }) : null, jsx(StyledExerciseRoomTableWrapper, {
+      children: jsxs(StyledExerciseRoomTable, {
+        children: [jsxs("colgroup", {
+          children: [jsx("col", {
+            span: 1,
+            width: "70%"
+          }), jsx("col", {
+            span: 1,
+            width: "30%"
+          })]
+        }), jsx(StyledExerciseRoomThead, {
+          children: jsxs(StyledExerciseRoomTr, {
+            children: [jsx(StyledExerciseRoomTh, {
+              children: intl.formatMessage({
+                id: 'materialExerciseExerciseRoom.detail.table.head.users'
+              })
+            }), jsx(StyledExerciseRoomTh, {
+              children: intl.formatMessage({
+                id: 'materialExerciseExerciseRoom.detail.table.head.permission'
+              })
+            })]
+          })
+        }), jsx(StyledExerciseRoomTbody, {
+          children: exerciseRoomUserList.map(function (chatroomUser) {
+            var renderUserPermission = function renderUserPermission() {
+              if ((user === null || user === void 0 ? void 0 : user.id) === chatroomUser.id || !isThisChatRoomOwner) {
+                return jsx(Text, {
+                  bold: true,
+                  role: "gray0",
+                  size: "tiny",
+                  preWrap: true,
+                  ellipsis: true,
+                  customStyles: {
+                    maxWidth: '100px',
+                    marginRight: '0.5rem'
+                  },
+                  children: intl.formatMessage({
+                    id: "materialExerciseExerciseRoom.exerciseRoom.publicPermission.".concat(exerciseRoomPermissionStringConvertor(chatroomUser.permission))
+                  })
+                });
+              } else if (chatroomUser.permission === enums.ExerciseRoomPermission.Nothing) {
+                return jsxs(Flex, {
+                  align: "center",
+                  children: [jsx(Text, {
+                    bold: true,
+                    role: "gray0",
+                    size: "tiny",
+                    preWrap: true,
+                    ellipsis: true,
+                    customStyles: {
+                      maxWidth: '100px',
+                      marginRight: '0.5rem'
+                    },
+                    children: intl.formatMessage({
+                      id: "materialExerciseExerciseRoom.exerciseRoom.publicPermission.".concat(exerciseRoomPermissionStringConvertor(chatroomUser.permission))
+                    })
+                  }), jsx(Button, {
+                    size: "micro",
+                    role: "lightpurple",
+                    loading: false,
+                    onClick: function () {
+                      var _onClick = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+                        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+                          while (1) switch (_context2.prev = _context2.next) {
+                            case 0:
+                              _context2.prev = 0;
+                              _context2.next = 3;
+                              return postOrgMaterialExerciseExerciseRoomUserEdit({
+                                exerciseRoomId: selectedExerciseRoomId,
+                                permission: enums.ExerciseRoomPermission.Read,
+                                userId: chatroomUser.id
+                              });
+                            case 3:
+                              if (debouncedSearch) {
+                                void doGetOrgCourseUserList();
+                              } else {
+                                void doGetOrgMaterialExerciseExerciseRoomGet();
+                              }
+                              _context2.next = 9;
+                              break;
+                            case 6:
+                              _context2.prev = 6;
+                              _context2.t0 = _context2["catch"](0);
+                              console.error(_context2.t0);
+                            case 9:
+                            case "end":
+                              return _context2.stop();
+                          }
+                        }, _callee2, null, [[0, 6]]);
+                      }));
+                      function onClick() {
+                        return _onClick.apply(this, arguments);
+                      }
+                      return onClick;
+                    }(),
+                    children: intl.formatMessage({
+                      id: 'materialExerciseExerciseRoom.detail.table.body.add'
+                    })
+                  })]
                 });
-                if (debouncedSearch) {
-                  void doGetOrgCourseUserList();
-                } else {
-                  void doGetOrgMaterialExerciseExerciseRoomGet();
-                }
               } else {
-                await postOrgMaterialExerciseExerciseRoomUserEdit({
-                  exerciseRoomId: selectedExerciseRoomId,
-                  permission,
-                  userId: chatroomUser.id
+                return jsxs(Select, {
+                  size: "small",
+                  width: "small",
+                  value: chatroomUser.permission,
+                  onChange: function () {
+                    var _onChange = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(value) {
+                      var permission;
+                      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+                        while (1) switch (_context3.prev = _context3.next) {
+                          case 0:
+                            _context3.prev = 0;
+                            permission = Number(value);
+                            if (!(permission === enums.ExerciseRoomPermission.Nothing)) {
+                              _context3.next = 8;
+                              break;
+                            }
+                            _context3.next = 5;
+                            return postOrgMaterialExerciseExerciseRoomUserDelete({
+                              exerciseRoomId: selectedExerciseRoomId,
+                              userId: chatroomUser.id
+                            });
+                          case 5:
+                            if (debouncedSearch) {
+                              void doGetOrgCourseUserList();
+                            } else {
+                              void doGetOrgMaterialExerciseExerciseRoomGet();
+                            }
+                            _context3.next = 11;
+                            break;
+                          case 8:
+                            _context3.next = 10;
+                            return postOrgMaterialExerciseExerciseRoomUserEdit({
+                              exerciseRoomId: selectedExerciseRoomId,
+                              permission: permission,
+                              userId: chatroomUser.id
+                            });
+                          case 10:
+                            if (debouncedSearch) {
+                              void doGetOrgCourseUserList();
+                            } else {
+                              void doGetOrgMaterialExerciseExerciseRoomGet();
+                            }
+                          case 11:
+                            _context3.next = 16;
+                            break;
+                          case 13:
+                            _context3.prev = 13;
+                            _context3.t0 = _context3["catch"](0);
+                            console.error(_context3.t0);
+                          case 16:
+                          case "end":
+                            return _context3.stop();
+                        }
+                      }, _callee3, null, [[0, 13]]);
+                    }));
+                    function onChange(_x2) {
+                      return _onChange.apply(this, arguments);
+                    }
+                    return onChange;
+                  }(),
+                  disabled: !isThisChatRoomOwner,
+                  children: [jsx("option", {
+                    value: enums.ExerciseRoomPermission.Nothing,
+                    children: intl.formatMessage({
+                      id: 'materialExerciseExerciseRoom.exerciseRoom.publicPermission.nothing'
+                    })
+                  }), jsx("option", {
+                    value: enums.ExerciseRoomPermission.Read,
+                    children: intl.formatMessage({
+                      id: 'materialExerciseExerciseRoom.exerciseRoom.publicPermission.read'
+                    })
+                  }), jsx("option", {
+                    value: enums.ExerciseRoomPermission.ReadWrite,
+                    children: intl.formatMessage({
+                      id: 'materialExerciseExerciseRoom.exerciseRoom.publicPermission.readWrite'
+                    })
+                  })]
                 });
-                if (debouncedSearch) {
-                  void doGetOrgCourseUserList();
-                } else {
-                  void doGetOrgMaterialExerciseExerciseRoomGet();
-                }
               }
-            } catch (error) {
-              console.error(error);
-            }
-          },
-          disabled: !isThisChatRoomOwner
-        }, React.createElement("option", {
+            };
+            return jsxs(StyledExerciseRoomTr, {
+              children: [jsx(StyledExerciseRoomTd, {
+                children: jsxs(Flex, {
+                  align: "center",
+                  children: [jsx(ProfileImage, {
+                    src: chatroomUser.profileUrl || '',
+                    hasBorder: false,
+                    width: "1.5rem",
+                    height: "1.5rem"
+                  }), jsx(Text, {
+                    bold: true,
+                    size: "small",
+                    role: "white",
+                    preWrap: true,
+                    ellipsis: true,
+                    customStyles: {
+                      marginLeft: '0.5rem'
+                    },
+                    children: chatroomUser.fullname
+                  })]
+                })
+              }), jsx(StyledExerciseRoomTd, {
+                children: renderUserPermission()
+              })]
+            }, chatroomUser.id);
+          })
+        })]
+      })
+    }), jsx(Vspace, {
+      height: 1.25
+    }), jsx(Label, {
+      role: "white",
+      size: "tiny",
+      children: intl.formatMessage({
+        id: 'materialExerciseExerciseRoom.detail.sharelink.label'
+      })
+    }), jsx(Vspace, {
+      height: 0.5
+    }), isThisChatRoomOwner ? jsxs(Fragment, {
+      children: [jsxs(Select, {
+        size: "small",
+        width: "small",
+        value: (_e = exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.publicPermission) !== null && _e !== void 0 ? _e : enums.ExerciseRoomPermission.Nothing,
+        onChange: function onChange(value) {
+          doPostOrgMaterialExerciseExerciseRoomEdit(value);
+        },
+        disabled: false,
+        children: [jsx("option", {
           value: enums.ExerciseRoomPermission.Nothing,
           children: intl.formatMessage({
             id: 'materialExerciseExerciseRoom.exerciseRoom.publicPermission.nothing'
           })
-        }), React.createElement("option", {
+        }), jsx("option", {
           value: enums.ExerciseRoomPermission.Read,
           children: intl.formatMessage({
             id: 'materialExerciseExerciseRoom.exerciseRoom.publicPermission.read'
           })
-        }), React.createElement("option", {
+        }), jsx("option", {
           value: enums.ExerciseRoomPermission.ReadWrite,
           children: intl.formatMessage({
             id: 'materialExerciseExerciseRoom.exerciseRoom.publicPermission.readWrite'
           })
-        }));
-      }
-    };
-    return React.createElement(StyledExerciseRoomTr, {
-      key: chatroomUser.id
-    }, React.createElement(StyledExerciseRoomTd, null, React.createElement(Flex, {
-      align: "center"
-    }, React.createElement(ProfileImage, {
-      src: chatroomUser.profileUrl || '',
-      hasBorder: false,
-      width: "1.5rem",
-      height: "1.5rem"
-    }), React.createElement(Text, {
-      bold: true,
+        })]
+      }), jsx(Vspace, {
+        height: 0.75
+      })]
+    }) : null, jsx(Input, {
       size: "small",
-      role: "white",
-      preWrap: true,
-      ellipsis: true,
-      customStyles: {
-        marginLeft: '0.5rem'
-      }
-    }, chatroomUser.fullname))), React.createElement(StyledExerciseRoomTd, null, renderUserPermission()));
-  })))), React.createElement(Vspace, {
-    height: 1.25
-  }), React.createElement(Label, {
-    role: "white",
-    size: "tiny"
-  }, intl.formatMessage({
-    id: 'materialExerciseExerciseRoom.detail.sharelink.label'
-  })), React.createElement(Vspace, {
-    height: 0.5
-  }), isThisChatRoomOwner ? React.createElement(React.Fragment, null, React.createElement(Select, {
-    size: "small",
-    width: "small",
-    value: (_e = exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.publicPermission) !== null && _e !== void 0 ? _e : enums.ExerciseRoomPermission.Nothing,
-    onChange: value => {
-      doPostOrgMaterialExerciseExerciseRoomEdit(value);
-    },
-    disabled: false
-  }, React.createElement("option", {
-    value: enums.ExerciseRoomPermission.Nothing,
-    children: intl.formatMessage({
-      id: 'materialExerciseExerciseRoom.exerciseRoom.publicPermission.nothing'
-    })
-  }), React.createElement("option", {
-    value: enums.ExerciseRoomPermission.Read,
-    children: intl.formatMessage({
-      id: 'materialExerciseExerciseRoom.exerciseRoom.publicPermission.read'
-    })
-  }), React.createElement("option", {
-    value: enums.ExerciseRoomPermission.ReadWrite,
-    children: intl.formatMessage({
-      id: 'materialExerciseExerciseRoom.exerciseRoom.publicPermission.readWrite'
-    })
-  })), React.createElement(Vspace, {
-    height: 0.75
-  })) : null, React.createElement(Input, {
-    size: "small",
-    width: "full",
-    suffix: React.createElement(Button, {
-      size: "micro",
-      role: "lightpurple",
-      style: {
-        backgroundColor: `${base.color.red6} !important`
+      width: "full",
+      suffix: jsx(Button, {
+        size: "micro",
+        role: "lightpurple",
+        style: {
+          backgroundColor: "".concat(base.color.red6, " !important")
+        },
+        onClick: function onClick() {
+          Notification.info(intl.formatMessage({
+            id: 'materialExerciseExerciseRoom.detail.copy.success'
+          }));
+          copyToClipboard(shareLink);
+        },
+        children: intl.formatMessage({
+          id: 'materialExerciseExerciseRoom.detail.copy'
+        })
+      }),
+      value: materialExercise ? shareLink : '',
+      onChange: function onChange(e) {
+        return setSearch(e.target.value);
       },
-      onClick: () => {
-        Notification.info(intl.formatMessage({
-          id: 'materialExerciseExerciseRoom.detail.copy.success'
-        }));
-        copyToClipboard(shareLink);
-      }
-    }, intl.formatMessage({
-      id: 'materialExerciseExerciseRoom.detail.copy'
-    })),
-    value: materialExercise ? shareLink : '',
-    onChange: e => setSearch(e.target.value),
-    placeholder: intl.formatMessage({
-      id: 'materialExerciseExerciseRoom.detail.addUsers.placeholder'
-    })
-  }));
+      placeholder: intl.formatMessage({
+        id: 'materialExerciseExerciseRoom.detail.addUsers.placeholder'
+      })
+    })]
+  });
 };
 
 export { MaterialExerciseExerciseRoomDetail as default };