Merge pull request #136 from DDD-Community/feature/polaroid-message-s…

…tyle

[FEATURE] 폴라로이드 메이커/상세보기 메시지 두줄로 수정

src/components/Polaroid/PolaroidDetail/PolaroidItem.tsx

@@ -25,7 +25,7 @@ const PolaroidItem = ({ polaroid }: PolaroidItemProps) => {
       </div>
       <PolaroidDescription themaKey={polaroid.options.THEMA}>
         <PolaroidMessage
-          className="min-h-6 text-xl"
+          className="max-h-[52px] min-h-[25px] whitespace-normal text-xl leading-6"
           message={polaroid.oneLineMessage}
         />
         <PolaroidNickname

src/components/Polaroid/PolaroidMaker/PolaroidMessageInput.tsx

@@ -1,27 +1,40 @@
 import { preventKeyboardSubmit } from '@/lib/utils/keyboard'
+import { useEffect, useRef } from 'react'
 
 interface PolaroidMessageInputProps {
   message: string
   maxLength: number
-  changeMessage: (e: React.ChangeEvent<HTMLInputElement>) => void
+  changeMessage: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
 }
 
 const PolaroidMessageInput = ({
   message,
   maxLength,
   changeMessage,
 }: PolaroidMessageInputProps) => {
+  const ref = useRef<HTMLTextAreaElement>(null)
+
+  useEffect(() => {
+    if (!ref.current) {
+      return
+    }
+
+    ref.current.style.height = 'auto' // 높이를 초기화하여 기존 높이를 제거
+    ref.current.style.height = `${ref.current.scrollHeight}px`
+  }, [message])
+
   return (
-    <div className="text-lg tracking-tight">
-      <input
-        type="text"
+    <div className="tracking-tight">
+      <textarea
+        ref={ref}
         value={message}
         onChange={changeMessage}
         onKeyDown={preventKeyboardSubmit}
-        className="h-[25px] w-full bg-transparent outline-none"
+        className="w-full resize-none bg-transparent text-xl leading-6 outline-none"
         maxLength={maxLength}
         placeholder="눌러서 한줄 문구를 입력하세요"
         name="oneLineMessage"
+        rows={1}
       />
       <p className="text-right text-sm text-gray-400">
         {message.length}/{maxLength}자

src/components/Polaroid/PolaroidMaker/index.tsx

@@ -31,7 +31,7 @@ interface PolaroidMakerProps {
   themaKey: ThemaKeyType
 }
 
-const MAX_MESSAGE_LENGTH = 20
+const MAX_MESSAGE_LENGTH = 30
 const MAX_FROM_LENGTH = 10
 
 const PolaroidMaker = ({
@@ -69,7 +69,7 @@ const PolaroidMaker = ({
     }
   }
 
-  const handleMessageChange = (e: ChangeEvent<HTMLInputElement>) => {
+  const handleMessageChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     if (e.target.value.length > MAX_MESSAGE_LENGTH) {
       e.target.value = e.target.value.slice(0, MAX_MESSAGE_LENGTH)
     }

src/lib/utils/keyboard.ts

@@ -1,6 +1,8 @@
 import { KeyboardEvent } from 'react'
 
-export const preventKeyboardSubmit = (e: KeyboardEvent<HTMLInputElement>) => {
+export const preventKeyboardSubmit = (
+  e: KeyboardEvent<HTMLInputElement> | KeyboardEvent<HTMLTextAreaElement>,
+) => {
   if (e.key === 'Enter') {
     e.preventDefault()
   }