[fix] negosium/front: 협상 챗 에러 말풍선 토스트(하단 짤림 수정) + 가격/할인율 입력 자동 포커스

frontend/src/features/chat/components/UserButton.tsx

@@ -28,8 +28,10 @@ export function UserButton({ type, text, textList, priceErrorMessage }: UserButt
     )
   }
 
+  // 입력 단계는 에러 말풍선이 위로 삐져나가야 해서 overflow 클리핑 제외 (버튼 덱만 가로 스크롤 허용)
+  const isInputStep = type === 'percent' || type === 'price'
   return (
-    <div className="flex w-full justify-center overflow-x-auto px-6 py-4 max-[1180px]:px-4">
+    <div className={cn('flex w-full justify-center px-6 py-4 max-[1180px]:px-4', !isInputStep && 'overflow-x-auto')}>
       <div className="flex justify-center">
         {type === 'one-black' && <OneBlack text={text || '확인'} />}
         {type === 'one-gray' && <OneGray text={text || '확인'} />}

frontend/src/features/chat/components/userInputs.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useId } from 'react'
+import { useState, useRef, useId, useEffect } from 'react'
 import { useChatStore } from '@/features/chat/stores/useChatStore'
 
 // 단위(원/%) 오버레이 + 전송 버튼이 붙은 값 입력 (Percent / Price 공용)
@@ -22,8 +22,22 @@ function InputWithUnit({
   ariaLabel: string
 }) {
   const errorId = useId()
+  // 입력 단계(percent/price)로 바뀌어 마운트될 때마다 바로 타이핑 가능하게
+  useEffect(() => {
+    inputRef.current?.focus()
+  }, [inputRef])
   return (
-    <div className="relative flex flex-col gap-3">
+    <div className="relative">
+      {/* 레이아웃 밖(absolute)에 띄워 에러가 떠도 input 위치가 안 변한다 */}
+      {error && (
+        <div
+          id={errorId}
+          role="alert"
+          className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 whitespace-nowrap rounded-full bg-white border border-border shadow-md px-4 py-1.5 text-sm font-semibold text-negative"
+        >
+          {error}
+        </div>
+      )}
       <div className="relative flex items-center min-w-[220px] sm:min-w-[360px] min-[1180px]:min-w-[420px] min-[1350px]:min-w-[480px]">
         <input
           ref={inputRef}
@@ -51,11 +65,6 @@ function InputWithUnit({
           전송
         </button>
       </div>
-      {error && (
-        <div id={errorId} role="alert" className="absolute top-[62px] left-1/2 -translate-x-1/2 text-sm font-semibold text-negative w-full text-center">
-          {error}
-        </div>
-      )}
     </div>
   )
 }