From 53a05c05fb29d0c0499e8d4b644325843f870380 Mon Sep 17 00:00:00 2001
From: guridaek <xylitol79@gmail.com>
Date: Sun, 8 Oct 2023 17:00:31 +0900
Subject: [PATCH] Merge branch 'dev/FE' into feat/614

---
 frontend/package-lock.json                    |  4 +--
 .../SendMessageModal/SendMessageModal.tsx     | 27 ++++++++++---------
 frontend/src/components/Textarea/Textarea.tsx |  3 ++-
 frontend/src/pages/RunnerPostDetailPage.tsx   | 13 +++------
 4 files changed, 22 insertions(+), 25 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 2e1539761..51770cca0 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, { useState, useContext } from 'react';
 import { styled } from 'styled-components';
 import { useParams } from 'react-router-dom';
 import { usePageRouter } from '@/hooks/usePageRouter';
@@ -41,7 +41,7 @@ const RunnerPostPage = () => {
   const { mutate: deleteRunnerPost } = useRunnerPostDelete();
   const { mutate: suggestReview, isPending: isPendingSuggestion } = useReviewSuggestion();
 
-  const sendMessage = () => {
+  const sendMessage = (message: string) => {
     try {
       validateMessage(message);
     } catch (error) {
@@ -51,13 +51,10 @@ const RunnerPostPage = () => {
       return;
     }
 
+    closeModal();
     suggestReview({ runnerPostId, message });
   };
 
-  const handleChangeMessage = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setMessage(e.target.value);
-  };
-
   const handleClickDeleteButton = () => {
     closeModal();
 
@@ -84,11 +81,9 @@ const RunnerPostPage = () => {
 
     openModal(
       <SendMessageModal
-        messageState={message}
-        handleChangeMessage={handleChangeMessage}
         placeholder="러너에게 보낼 메세지를 입력해주세요."
         closeModal={closeModal}
-        handleClickSendButton={sendMessage}
+        sendMessage={sendMessage}
       />,
     );
   };