From 6b01bf957a7d15a68cc10c7325981f7ab6518779 Mon Sep 17 00:00:00 2001
From: KangSan Lee <xylitol79@gmail.com>
Date: Sun, 8 Oct 2023 16:56:33 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A6=AC=EB=B7=B0=20=EC=A0=9C=EC=95=88=20?=
 =?UTF-8?q?=EB=A9=94=EC=84=B8=EC=A7=80=20=EB=AA=A8=EB=8B=AC=20=EA=B8=80?=
 =?UTF-8?q?=EC=9E=90=EC=88=98=20=EC=98=A4=EB=A5=98=20(#616)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: sendMessageModal에서 message state를 가지도록 변경

* fix: 리뷰 제안 후 모달 닫기
---
 frontend/package-lock.json                    |  4 +--
 .../SendMessageModal/SendMessageModal.tsx     | 27 ++++++++++---------
 frontend/src/components/Textarea/Textarea.tsx |  3 ++-
 frontend/src/pages/RunnerPostDetailPage.tsx   | 15 +++--------
 4 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 31e43a7a6..7d0c07a80 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "baton",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "baton",
-      "version": "1.1.0",
+      "version": "1.1.1",
       "license": "ISC",
       "dependencies": {
         "@types/react": "^18.2.14",
diff --git a/frontend/src/components/SendMessageModal/SendMessageModal.tsx b/frontend/src/components/SendMessageModal/SendMessageModal.tsx
index 764b27705..41ef5955f 100644
--- a/frontend/src/components/SendMessageModal/SendMessageModal.tsx
+++ b/frontend/src/components/SendMessageModal/SendMessageModal.tsx
@@ -1,25 +1,26 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { styled } from 'styled-components';
 import Button from '../common/Button/Button';
 import TextArea from '../Textarea/Textarea';
 import useViewport from '@/hooks/useViewport';
 
 interface Props {
-  messageState: string;
-  handleChangeMessage: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
   placeholder: string;
   closeModal: () => void;
-  handleClickSendButton: () => void;
+  sendMessage: (message: string) => void;
 }
 
-const SendMessageModal = ({
-  messageState,
-  handleChangeMessage,
-  placeholder,
-  closeModal,
-  handleClickSendButton,
-}: Props) => {
+const SendMessageModal = ({ placeholder, closeModal, sendMessage }: Props) => {
   const { isMobile } = useViewport();
+  const [message, setMessage] = useState('');
+
+  const handleChangeInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setMessage(e.target.value);
+  };
+
+  const handleClickSendButton = () => {
+    sendMessage(message);
+  };
 
   return (
     <S.SendMessageModalContainer>
@@ -31,8 +32,8 @@ const SendMessageModal = ({
         maxLength={500}
         padding="0"
         placeholder={placeholder}
-        handleInputTextState={handleChangeMessage}
-        inputTextState={messageState}
+        handleInputTextState={handleChangeInput}
+        inputTextState={message}
       />
       <S.ButtonContainer>
         <Button
diff --git a/frontend/src/components/Textarea/Textarea.tsx b/frontend/src/components/Textarea/Textarea.tsx
index fa3ab7d5e..d9702752d 100644
--- a/frontend/src/components/Textarea/Textarea.tsx
+++ b/frontend/src/components/Textarea/Textarea.tsx
@@ -23,6 +23,7 @@ const TextArea = ({
   return (
     <S.InputContainer $width={width} $height={height} $padding={padding}>
       <S.InputBox
+        value={inputTextState}
         onChange={handleInputTextState}
         maxLength={maxLength}
         $fontSize={fontSize}
@@ -31,7 +32,7 @@ const TextArea = ({
       />
       {maxLength && (
         <S.InputTextLength>
-          {inputTextState?.length ?? 0} / {maxLength}
+          {inputTextState.length} / {maxLength}
         </S.InputTextLength>
       )}
     </S.InputContainer>
diff --git a/frontend/src/pages/RunnerPostDetailPage.tsx b/frontend/src/pages/RunnerPostDetailPage.tsx
index b8d92b832..c7f4ee43b 100644
--- a/frontend/src/pages/RunnerPostDetailPage.tsx
+++ b/frontend/src/pages/RunnerPostDetailPage.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext } from 'react';
 import { styled } from 'styled-components';
 import { useParams } from 'react-router-dom';
 import { usePageRouter } from '@/hooks/usePageRouter';
@@ -37,13 +37,11 @@ const RunnerPostPage = () => {
   const { showErrorToast } = useContext(ToastContext);
   const { openModal, closeModal } = useContext(ModalContext);
 
-  const [message, setMessage] = useState<string>('');
-
   const { data: runnerPostDetail } = useRunnerPostDetail(runnerPostId, isLogin);
   const { mutate: deleteRunnerPost } = useRunnerPostDelete();
   const { mutate: suggestReview, isPending: isPendingSuggestion } = useReviewSuggestion();
 
-  const sendMessage = () => {
+  const sendMessage = (message: string) => {
     try {
       validateMessage(message);
     } catch (error) {
@@ -53,13 +51,10 @@ const RunnerPostPage = () => {
       return;
     }
 
+    closeModal();
     suggestReview({ runnerPostId, message });
   };
 
-  const handleChangeMessage = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setMessage(e.target.value);
-  };
-
   const handleClickDeleteButton = () => {
     closeModal();
 
@@ -86,11 +81,9 @@ const RunnerPostPage = () => {
 
     openModal(
       <SendMessageModal
-        messageState={message}
-        handleChangeMessage={handleChangeMessage}
         placeholder="러너에게 보낼 메세지를 입력해주세요."
         closeModal={closeModal}
-        handleClickSendButton={sendMessage}
+        sendMessage={sendMessage}
       />,
     );
   };