From c53d940b59951d5ea16898eb30d74e13091e09eb Mon Sep 17 00:00:00 2001
From: Seongtaek Hwang <hst1993@hanmail.net>
Date: Wed, 1 Feb 2023 13:12:27 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20input=20placeholder=20=EB=91=90=EC=A4=84?=
 =?UTF-8?q?=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/DetailRecord/ReplyInput.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/pages/DetailRecord/ReplyInput.tsx b/src/pages/DetailRecord/ReplyInput.tsx
index 79aac18..e320f3a 100644
--- a/src/pages/DetailRecord/ReplyInput.tsx
+++ b/src/pages/DetailRecord/ReplyInput.tsx
@@ -33,9 +33,13 @@ export default function ReplyInput({
 }) {
   const queryClient = useQueryClient()
 
+  const screenAvailWidth = window.screen.availWidth
+
   const [image, setImage] = useState<string>('')
   const [imageFile, setImageFile] = useState<File | null>(null)
   const [text, setText] = useState('')
+  const [inputPlaceholder, setInputPlaceholder] =
+    useState('따뜻한 마음을 남겨주세요')
 
   const textRef = useRef<HTMLTextAreaElement>(null)
 
@@ -199,6 +203,12 @@ export default function ReplyInput({
     }
   }, [isAnonymousUser])
 
+  useEffect(() => {
+    if (screenAvailWidth > 340) {
+      setInputPlaceholder('따뜻한 마음을 남겨주세요. (100자 이내)')
+    }
+  }, [])
+
   return (
     <>
       <InputSnackBar
@@ -240,7 +250,7 @@ export default function ReplyInput({
               required={true}
               placeholder={
                 inputMode.mode === 'reply'
-                  ? '따뜻한 마음을 남겨주세요. (100자 이내)'
+                  ? inputPlaceholder
                   : '답글 추가... (100자 이내)'
               }
               onInput={handleResizeHeight}
@@ -252,7 +262,7 @@ export default function ReplyInput({
             />
             <button
               disabled={text === ''}
-              className={`mb-1 cursor-pointer  bg-transparent text-xs ${
+              className={`mb-1 cursor-pointer  whitespace-nowrap bg-transparent text-xs ${
                 text !== '' ? 'text-primary-2' : 'text-grey-6'
               }`}
             >