[FE][댓글모듈] 비로그인 유저 댓글 비밀번호 유효성 검사를, 비밀번호 일치 여부를 판단하는 api로 변경한다. (#255)

frontend/reply-module/src/components/molecules/Comment/index.tsx

@@ -1,22 +1,24 @@
 import { FormEvent, useEffect, useState } from "react";
+import { QUERY } from "../../../constants/api";
 import { useDeleteComment, useEditComment, useInput } from "../../../hooks";
 import { Comment as CommentType } from "../../../types";
+import { DeleteCommentRequestParameter } from "../../../types/comment";
+import { User } from "../../../types/user";
+import { postScrollHeightToParentWindow } from "../../../utils/iframePostMessage";
+import { request } from "../../../utils/request";
 import { getTimeDifference } from "../../../utils/time";
 import Avatar from "../../atoms/Avatar";
 import CommentTextBox from "../../atoms/CommentTextBox";
 import {
-  Container,
-  CommentWrapper,
-  CommentTextBoxWrapper,
-  Time,
+  Button,
   CommentOption,
+  CommentTextBoxWrapper,
+  CommentWrapper,
+  Container,
   PasswordForm,
   PasswordInput,
-  Button
+  Time
 } from "./styles";
-import { User } from "../../../types/user";
-import { DeleteCommentRequestParameter } from "../../../types/comment";
-import { postScrollHeightToParentWindow } from "../../../utils/iframePostMessage";
 
 export interface Props {
   user: User | undefined;
@@ -46,20 +48,26 @@ const Comment = ({ user, comment, align = "left", shouldShowOption, iAmAdmin, th
     setPassword("");
   };
 
+  const canIControl = (iAmAdmin && thisCommentIsMine) || !iAmAdmin;
+
   const isEditable = (iAmAdmin && thisCommentIsMine) || !iAmAdmin;
 
   const confirmGuestPassword = async () => {
     try {
-      await editComment({
-        id: comment.id,
-        content: comment.content,
-        guestUserId: comment.user.id,
-        guestUserPassword: password
-      });
+      const response = await request.get(
+        QUERY.CHECK_GUEST_PASSWORD({
+          guestUserId: comment.user.id,
+          guestUserPassword: password
+        })
+      );
 
-      clear();
+      if (response.status >= 400) {
+        throw new Error(response.data.message);
+      }
+
+      const { isCorrectPassword } = response.data;
 
-      return true;
+      return isCorrectPassword;
     } catch (error) {
       console.error(error.message);
       setPasswordSubmitted(true);
@@ -108,7 +116,7 @@ const Comment = ({ user, comment, align = "left", shouldShowOption, iAmAdmin, th
     }
 
     submitPasswordCallback();
-    clear();
+    setShouldShowPasswordInput(false);
   };
 
   const submitEditedComment = async (content: CommentType["content"]) => {
@@ -153,7 +161,7 @@ const Comment = ({ user, comment, align = "left", shouldShowOption, iAmAdmin, th
 
             <Time>{getTimeDifference(comment.createdDate)}</Time>
             {shouldShowOption && !submitType && (
-              <CommentOption startEditing={isEditable ? startEditing : undefined} startDeleting={startDeleting} />
+              <CommentOption startEditing={canIControl ? startEditing : undefined} startDeleting={startDeleting} />
             )}
           </CommentTextBoxWrapper>
         </CommentWrapper>

frontend/reply-module/src/constants/api.ts

@@ -1,9 +1,12 @@
+import { GuestUserInfo } from "../types/comment";
 const BASE_URL = "https://darass.o-r.kr";
 const QUERY = {
   LOGIN: "/api/v1/login/oauth?oauthAccessToken=",
   COMMENT: "/api/v1/comments",
   GET_ALL_COMMENTS: (url: string, projectKey: string) => `/api/v1/comments?url=${url}&projectKey=${projectKey}`,
   GET_PROJECT: (projectKey: string) => `/api/v1/projects/user-id?secretKey=${projectKey}`,
+  CHECK_GUEST_PASSWORD: ({ guestUserId, guestUserPassword }: GuestUserInfo) =>
+    `/api/v1/users/check-password?guestUserId=${guestUserId}&guestUserPassword=${guestUserPassword}`,
   USER: "/api/v1/users"
 };