Merge branch 'dev/FE' into feat/614

woowacourse-teams · Oct 8, 2023 · 53a05c0 · 53a05c0
1 parent e79aebb
commit 53a05c0
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 25 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git 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
@@ -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
@@ -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}
       />,
     );
   };