feat: 새로운 메시지 저장 시 refetch 전까지 이전 메시지들을 보여주는 오류를 해결

frontend/src/constants/index.ts

@@ -49,6 +49,12 @@ const RECIPIENT = {
   MEMBER: "MEMBER",
 } as const;
 
+const ROLLINGPAPER_STATE_TYPE = {
+  WRITE: "WRITE",
+  EDIT: "EDIT",
+  NORMAL: "NORMAL",
+} as const;
+
 export {
   REGEX,
   COLORS,
@@ -59,4 +65,5 @@ export {
   KAKAO_OAUTH_URL,
   GOOGLE_OAUTH_URL,
   RECIPIENT,
+  ROLLINGPAPER_STATE_TYPE,
 };

frontend/src/pages/RollingpaperPage/components/LetterPaper.tsx

@@ -9,30 +9,43 @@ import PencilIcon from "@/assets/icons/bx-pencil.svg";
 
 import MessageCreateForm from "@/pages/RollingpaperPage/components/MessageCreateForm";
 import MessageBox from "@/pages/RollingpaperPage/components/MessageBox";
-import useMessageWrite from "@/pages/RollingpaperPage/hooks/useMessageWrite";
-import useSliceMessageList from "../hooks/useSliceMessageList";
+import useSliceMessageList from "@/pages/RollingpaperPage/hooks/useSliceMessageList";
+
+import { ROLLINGPAPER_STATE_TYPE } from "@/constants";
 
 interface LetterPaperProp {
   to: string;
   recipientType: Recipient;
   messageList: Message[];
+  rollingpaperState: string;
+  handleWriteButtonClick: () => void;
+  handleEditButtonClick: () => void;
+  handleWriteEnd: () => void;
 }
 
-const LetterPaper = ({ to, recipientType, messageList }: LetterPaperProp) => {
-  const { isWrite, handleWriteButtonClick, handleWriteEnd } = useMessageWrite();
-
+const LetterPaper = ({
+  to,
+  recipientType,
+  messageList,
+  rollingpaperState,
+  handleWriteButtonClick,
+  handleEditButtonClick,
+  handleWriteEnd,
+}: LetterPaperProp) => {
   const elementList = useMemo(() => {
     const elementList = messageList
       .map((message) => (
         <MessageBox
+          handleEditButtonClick={handleEditButtonClick}
+          handleWriteEnd={handleWriteEnd}
           key={message.id}
           recipientType={recipientType}
           {...message}
         />
       ))
       .reverse();
 
-    return isWrite
+    return rollingpaperState === ROLLINGPAPER_STATE_TYPE.WRITE
       ? [
           <MessageCreateForm
             enableSecretMessage={recipientType === "MEMBER"}
@@ -41,15 +54,15 @@ const LetterPaper = ({ to, recipientType, messageList }: LetterPaperProp) => {
           ...elementList,
         ]
       : [...elementList];
-  }, [messageList, isWrite]);
+  }, [rollingpaperState]);
 
   const slicedMessageLists = useSliceMessageList(elementList);
 
   return (
     <StyledLetterPaper>
       <StyledLetterPaperTop>
         <StyledTo>To. {to}</StyledTo>
-        {!isWrite && (
+        {rollingpaperState === ROLLINGPAPER_STATE_TYPE.NORMAL && (
           <IconButton size="small" onClick={handleWriteButtonClick}>
             <PencilIcon />
           </IconButton>

frontend/src/pages/RollingpaperPage/components/MessageBox.tsx

@@ -3,6 +3,8 @@ import styled from "@emotion/styled";
 
 import IconButton from "@/components/IconButton";
 
+import useValidatedParam from "@/hooks/useValidatedParam";
+
 import TrashIcon from "@/assets/icons/bx-trash.svg";
 import Pencil from "@/assets/icons/bx-pencil.svg";
 import LockIcon from "@/assets/icons/bx-lock-alt.svg";
@@ -12,7 +14,6 @@ import useMessageBox from "@/pages/RollingpaperPage/hooks/useMessageBox";
 import SecretMessage from "@/pages/RollingpaperPage/components/SecretMessage";
 
 import { Message, Recipient } from "@/types";
-import useValidatedParam from "@/hooks/useValidatedParam";
 
 const MessageBox = ({
   id,
@@ -24,15 +25,25 @@ const MessageBox = ({
   editable,
   visible,
   recipientType,
-}: Message & { recipientType: Recipient }) => {
+  handleEditButtonClick,
+  handleWriteEnd,
+}: Message & {
+  recipientType: Recipient;
+  handleEditButtonClick: () => void;
+  handleWriteEnd: () => void;
+}) => {
   const rollingpaperId = useValidatedParam<number>("rollingpaperId");
 
   const {
     isEdit,
     handleWriteButtonClick,
     handleDeleteButtonClick,
     handleEditEnd,
-  } = useMessageBox({ id, rollingpaperId: rollingpaperId });
+  } = useMessageBox({
+    id,
+    rollingpaperId: rollingpaperId,
+    handleEditButtonClick,
+  });
 
   if (!visible) {
     return <SecretMessage from={from} />;
@@ -47,6 +58,7 @@ const MessageBox = ({
         anonymous={anonymous}
         secret={secret}
         onEditEnd={handleEditEnd}
+        handleWriteEnd={handleWriteEnd}
         enableSecretMessage={recipientType === "MEMBER"}
       />
     );

frontend/src/pages/RollingpaperPage/components/MessageCreateForm.tsx

@@ -25,7 +25,6 @@ export const MessageCreateForm = ({
     handleColorClick,
     handleAnonymousCheckBoxChange,
     handleSecretCheckBoxChange,
-    initMessage,
   } = useMessageForm({});
 
   const rollingpaperId = useValidatedParam<number>("rollingpaperId");
@@ -38,13 +37,10 @@ export const MessageCreateForm = ({
       anonymous,
       secret: enableSecretMessage && secret,
     });
-    initMessage();
-    onEditEnd();
   };
 
   const handleMessageCancel = () => {
     if (confirm("메시지 작성을 취소하시겠습니까?")) {
-      initMessage();
       onEditEnd();
     }
   };

frontend/src/pages/RollingpaperPage/components/MessageUpdateForm.tsx

@@ -10,6 +10,7 @@ import { Message } from "@/types";
 type MessageUpdateFormProps = {
   enableSecretMessage: boolean;
   onEditEnd: () => void;
+  handleWriteEnd: () => void;
 } & Pick<Message, "id" | "content" | "color" | "anonymous" | "secret">;
 
 export const MessageUpdateForm = ({
@@ -20,6 +21,7 @@ export const MessageUpdateForm = ({
   anonymous,
   secret,
   onEditEnd,
+  handleWriteEnd,
 }: MessageUpdateFormProps) => {
   const {
     content: newContent,
@@ -30,7 +32,6 @@ export const MessageUpdateForm = ({
     handleMessageChange,
     handleAnonymousCheckBoxChange,
     handleSecretCheckBoxChange,
-    initMessage,
   } = useMessageForm({
     initContent: content,
     initColor: color,
@@ -47,13 +48,12 @@ export const MessageUpdateForm = ({
       anonymous: newAnonymous,
       secret: enableSecretMessage && newSecret,
     });
-    initMessage();
     onEditEnd();
   };
 
   const handleMessageCancel = () => {
     if (confirm("메시지 작성을 취소하시겠습니까?")) {
-      initMessage();
+      handleWriteEnd();
       onEditEnd();
     }
   };

frontend/src/pages/RollingpaperPage/hooks/useMessageBox.tsx

@@ -4,20 +4,27 @@ import useDeleteMessage from "@/pages/RollingpaperPage/hooks/useDeleteMessage";
 interface UseMessageProps {
   id: number;
   rollingpaperId: number;
+  handleEditButtonClick: () => void;
 }
 
-const useMessage = ({ id, rollingpaperId }: UseMessageProps) => {
+const useMessage = ({
+  id,
+  rollingpaperId,
+  handleEditButtonClick,
+}: UseMessageProps) => {
   const [isEdit, setIsEdit] = useState(false);
   const { deleteRollingpaperMessage } = useDeleteMessage(rollingpaperId);
 
   const handleWriteButtonClick: React.MouseEventHandler<
     HTMLButtonElement
   > = () => {
+    handleEditButtonClick();
     setIsEdit(true);
   };
 
   const handleDeleteButtonClick = () => {
     if (id) {
+      handleEditButtonClick();
       deleteRollingpaperMessage(id);
     }
   };

frontend/src/pages/RollingpaperPage/hooks/useMessageForm.tsx

@@ -36,11 +36,6 @@ const useMessageForm = ({
     setColor(color);
   };
 
-  const initMessage = () => {
-    setContent("");
-    setColor(INIT_COLOR);
-  };
-
   return {
     color,
     content,
@@ -50,7 +45,6 @@ const useMessageForm = ({
     handleColorClick,
     handleAnonymousCheckBoxChange,
     handleSecretCheckBoxChange,
-    initMessage,
   };
 };
 

frontend/src/pages/RollingpaperPage/hooks/useMessageWrite.tsx

@@ -1,17 +1,31 @@
 import React, { useState } from "react";
 
+import { ValueOf } from "@/types";
+import { ROLLINGPAPER_STATE_TYPE } from "@/constants";
+
 const useMessageWrite = () => {
-  const [isWrite, setIsWrite] = useState(false);
+  const [rollingpaperState, setRollingpaperState] = useState<
+    ValueOf<typeof ROLLINGPAPER_STATE_TYPE>
+  >(ROLLINGPAPER_STATE_TYPE.NORMAL);
 
   const handleWriteButtonClick = () => {
-    setIsWrite(true);
+    setRollingpaperState(ROLLINGPAPER_STATE_TYPE.WRITE);
+  };
+
+  const handleEditButtonClick = () => {
+    setRollingpaperState(ROLLINGPAPER_STATE_TYPE.EDIT);
   };
 
   const handleWriteEnd = () => {
-    setIsWrite(false);
+    setRollingpaperState(ROLLINGPAPER_STATE_TYPE.NORMAL);
   };
 
-  return { isWrite, handleWriteButtonClick, handleWriteEnd };
+  return {
+    rollingpaperState,
+    handleWriteButtonClick,
+    handleEditButtonClick,
+    handleWriteEnd,
+  };
 };
 
 export default useMessageWrite;

frontend/src/pages/RollingpaperPage/hooks/useReadRollingpaper.tsx

@@ -8,14 +8,22 @@ import { GetRollingpaperResponse } from "@/types/apiResponse";
 interface UseReadRollingpaperArgs {
   teamId: number;
   rollingpaperId: number;
+  handleWriteEnd: () => void;
 }
 
 export const useReadRollingpaper = ({
   teamId,
   rollingpaperId,
+  handleWriteEnd,
 }: UseReadRollingpaperArgs) =>
   useQuery<GetRollingpaperResponse, AxiosError>(
     ["rollingpaper", rollingpaperId],
     () => getRollingpaper({ teamId, id: rollingpaperId }),
-    { useErrorBoundary: true }
+    {
+      useErrorBoundary: true,
+      refetchOnWindowFocus: false,
+      onSuccess: () => {
+        handleWriteEnd();
+      },
+    }
   );

frontend/src/pages/RollingpaperPage/index.tsx

@@ -3,14 +3,22 @@ import LetterPaper from "@/pages/RollingpaperPage/components/LetterPaper";
 
 import useValidatedParam from "@/hooks/useValidatedParam";
 import { useReadRollingpaper } from "@/pages/RollingpaperPage/hooks/useReadRollingpaper";
+import useMessageWrite from "./hooks/useMessageWrite";
 
 const RollingpaperPage = () => {
   const teamId = useValidatedParam<number>("teamId");
   const rollingpaperId = useValidatedParam<number>("rollingpaperId");
+  const {
+    rollingpaperState,
+    handleWriteButtonClick,
+    handleWriteEnd,
+    handleEditButtonClick,
+  } = useMessageWrite();
 
   const { isLoading, data: rollingpaper } = useReadRollingpaper({
     teamId,
     rollingpaperId,
+    handleWriteEnd,
   });
 
   if (isLoading) {
@@ -26,9 +34,13 @@ const RollingpaperPage = () => {
       <PageTitleWithBackButton>{rollingpaper.title}</PageTitleWithBackButton>
       <main>
         <LetterPaper
+          rollingpaperState={rollingpaperState}
           to={rollingpaper.to}
           recipientType={rollingpaper.recipient}
           messageList={[...rollingpaper.messages]}
+          handleWriteButtonClick={handleWriteButtonClick}
+          handleEditButtonClick={handleEditButtonClick}
+          handleWriteEnd={handleWriteEnd}
         />
       </main>
     </>