♻️ [fix] : 히스토리 챗 줄바꿈 및 최대길이 표기

Author: Minkyu0424

src/components/task-detail/TaskDetailHistory.vue

@@ -5,6 +5,7 @@
       :history="historyData"
       :taskId="taskId"
       :requestor-name="requestorName" />
+
     <div class="flex flex-col w-full items-center mt-8 gap-[22px]">
       <div
         class="flex w-full flex-col items-center gap-[22px]"

src/components/task-detail/TaskDetailHistoryChat.vue

@@ -18,7 +18,7 @@
       <div :class="['flex gap-2', isRequestor ? 'flex-row' : 'flex-row-reverse']">
         <p
           :class="[
-            'flex max-w-[400px] flex-wrap px-4 py-3 text-base rounded-lg font-normal',
+            'flex max-w-[400px] flex-wrap break-all px-4 py-3 text-base rounded-lg font-normal',
             isRequestor ? 'bg-background-2' : 'bg-primary2'
           ]">
           {{ history.details.commentDetails?.comment || history.details.taskDetails?.value }}

src/components/task-detail/TaskDetailHistoryInput.vue

@@ -34,6 +34,7 @@
         @click="sendMessage" />
     </button>
   </div>
+  <p class="text-xs mt-1.5">({{ inputLength }}/{{ 254 }})</p>
   <ModalView
     :is-open="isModalVisible"
     type="failType"
@@ -74,6 +75,7 @@ const isPossible = computed(
 )
 
 const isSendable = computed(() => isPossible.value && messageText.value.trim() !== '')
+const inputLength = computed(() => messageText.value.length)
 
 const placeHolderText = computed(() => {
   if (history.length === 0) {