[FE][댓글모듈] iframe alert 기능 구현 (#152) (#341)

* feat: 부모 프레임에 alert 메시지를 전달하는 기능 구현 * feat: 자식 프레임의 alert 메시지를 받아 출력하는 기능 구현
darass-team · Aug 1, 2021 · ff94a77 · ff94a77
1 parent fd2a4e9
commit ff94a77
Show file tree

Hide file tree

Showing 10 changed files with 37 additions and 13 deletions.
diff --git a/frontend/deploy-script/src/common.js b/frontend/deploy-script/src/common.js
@@ -1,4 +1,4 @@
-import { POST_MESSAGE_TYPE } from "./constants";
+import { POST_MESSAGE_TYPE } from "./constants.js";
 
 export const postMessageToIframe = ({ $iframe, message }) => {
   $iframe.contentWindow.postMessage(message, "*");

diff --git a/frontend/deploy-script/src/constants.js b/frontend/deploy-script/src/constants.js
@@ -4,5 +4,6 @@ export const POST_MESSAGE_TYPE = {
   CLICK: "click",
   SCROLL_HEIGHT: "scrollHeight",
   OPEN_LIKING_USERS_MODAL: "openLikingUsersModal",
-  CLOSE_MODAL: "closeModal"
+  CLOSE_MODAL: "closeModal",
+  ALERT: "alert"
 };
diff --git a/frontend/deploy-script/src/index.js b/frontend/deploy-script/src/index.js
@@ -39,5 +39,11 @@ import { IFRAME_STYLE } from "./style.js";
       enableScroll();
       return;
     }
+
+    if (type === POST_MESSAGE_TYPE.ALERT) {
+      alert(data);
+
+      return;
+    }
   });
 })();
diff --git a/frontend/manage/src/components/organisms/MobileNav/index.tsx b/frontend/manage/src/components/organisms/MobileNav/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { ROUTE } from "../../../constants";
 import { PALETTE } from "../../../styles/palette";
@@ -20,6 +20,14 @@ const MobileNav = ({ user, logout, menuList }: Props) => {
     setOpen(state => !state);
   };
 
+  useEffect(() => {
+    document.body.style.overflow = isOpen ? "hidden" : "revert";
+
+    return () => {
+      document.body.style.overflow = "revert";
+    };
+  }, [isOpen]);
+
   return (
     <Container>
       <Dimmed isOpen={isOpen} onClick={onToggleNav} />

diff --git a/frontend/reply-module/src/components/molecules/Comment/index.tsx b/frontend/reply-module/src/components/molecules/Comment/index.tsx
@@ -3,7 +3,7 @@ import { useConfirmGuestPassword, useDeleteComment, useEditComment, useLikeComme
 import { Comment as CommentType } from "../../../types";
 import { DeleteCommentRequestParameter } from "../../../types/comment";
 import { User } from "../../../types/user";
-import { postOpenLikingUsersModal, postScrollHeightToParentWindow } from "../../../utils/postMessage";
+import { postAlertMessage, postOpenLikingUsersModal, postScrollHeightToParentWindow } from "../../../utils/postMessage";
 import { isEmptyString } from "../../../utils/isEmptyString";
 import { getTimeDifference } from "../../../utils/time";
 import Avatar from "../../atoms/Avatar";
@@ -99,7 +99,7 @@ const Comment = ({ user, comment, align = "left", shouldShowOption, iAmAdmin, th
       await deleteComment(deleteCommentRequestParameter);
     } catch (error) {
       console.error(error.message);
-      alert("댓글 제거에 실패하셨습니다.");
+      postAlertMessage("댓글 삭제에 실패하셨습니다.");
     } finally {
       clear();
       setSubmitType(null);
@@ -112,7 +112,8 @@ const Comment = ({ user, comment, align = "left", shouldShowOption, iAmAdmin, th
     const isValidPassword = await confirmGuestPassword();
 
     if (!isValidPassword) {
-      alert("비밀번호가 일치하지 않습니다.");
+      postAlertMessage("비밀번호가 일치하지 않습니다.");
+
       return;
     }
 
@@ -123,7 +124,7 @@ const Comment = ({ user, comment, align = "left", shouldShowOption, iAmAdmin, th
   const onSubmitEditedComment = async (content: CommentType["content"]) => {
     try {
       if (isEmptyString(content)) {
-        alert("최소 한 글자 이상 입력해주세요.");
+        postAlertMessage("최소 한 글자 이상 입력해주세요.");
 
         return;
       }
@@ -148,8 +149,9 @@ const Comment = ({ user, comment, align = "left", shouldShowOption, iAmAdmin, th
     try {
       await likeComment({ user, commentId: comment.id });
     } catch (error) {
+      postAlertMessage(error.message);
+
       console.error(error.message);
-      alert(error.message);
     }
   };
 

diff --git a/frontend/reply-module/src/components/organisms/CommentInput/index.tsx b/frontend/reply-module/src/components/organisms/CommentInput/index.tsx
@@ -1,8 +1,8 @@
-import { ChangeEvent, FormEvent, useRef, useState } from "react";
+import { FormEvent, useState } from "react";
 import { useContentEditable, useCreateComment, useInput } from "../../../hooks";
 import { User } from "../../../types/user";
-import { focusContentEditableTextToEnd } from "../../../utils/focusContentEditableTextToEnd";
 import { isEmptyString } from "../../../utils/isEmptyString";
+import { postAlertMessage } from "../../../utils/postMessage";
 import SubmitButton from "../../atoms/Buttons/SubmitButton";
 import { Form, GuestInfo, TextBox, Wrapper } from "./styles";
 
@@ -43,7 +43,8 @@ const CommentInput = ({ user, url, projectSecretKey }: Props) => {
       setGuestNickName("");
       setGuestPassword("");
     } catch (error) {
-      alert("댓글 생성에 실패하였습니다.\n잠시 후 다시 시도해주세요.");
+      postAlertMessage("댓글 생성에 실패하였습니다.\n잠시 후 다시 시도해주세요.");
+      console.error(error.message);
     } finally {
       setFormSubmitted(false);
     }

diff --git a/frontend/reply-module/src/constants/postMessageType.ts b/frontend/reply-module/src/constants/postMessageType.ts
@@ -2,5 +2,6 @@ export const POST_MESSAGE_TYPE = {
   CLICK: "click",
   SCROLL_HEIGHT: "scrollHeight",
   OPEN_LIKING_USERS_MODAL: "openLikingUsersModal",
-  CLOSE_MODAL: "closeModal"
+  CLOSE_MODAL: "closeModal",
+  ALERT: "alert"
 };
diff --git a/frontend/reply-module/src/hooks/useUser.ts b/frontend/reply-module/src/hooks/useUser.ts
@@ -43,6 +43,8 @@ export const useUser = () => {
 
       queryClient.invalidateQueries(REACT_QUERY_KEY.USER);
     } catch (error) {
+      console.log(error);
+
       console.error(error.message);
     }
   };

diff --git a/frontend/reply-module/src/utils/kakaoAPI.ts b/frontend/reply-module/src/utils/kakaoAPI.ts
@@ -13,7 +13,6 @@ export const getKakaoAccessToken = async () => {
         resolve(kakaoAccessToken);
       },
       fail: function (error: Error) {
-        alert(JSON.stringify(error));
         reject(error);
       }
     })

diff --git a/frontend/reply-module/src/utils/postMessage.ts b/frontend/reply-module/src/utils/postMessage.ts
@@ -11,3 +11,7 @@ export const postScrollHeightToParentWindow = () => {
 export const postOpenLikingUsersModal = (likingUsers: Comment["likingUsers"]) => {
   window.parent.postMessage({ type: POST_MESSAGE_TYPE.OPEN_LIKING_USERS_MODAL, data: likingUsers }, "*");
 };
+
+export const postAlertMessage = (message: string) => {
+  window.parent.postMessage({ type: POST_MESSAGE_TYPE.ALERT, data: message }, "*");
+};