From 9fb4a52c56f0810d4a880076229c28d7177b2ba3 Mon Sep 17 00:00:00 2001
From: Mina Choi <mnchoi@o2o.kr>
Date: Fri, 24 Jul 2026 18:39:49 +0900
Subject: [PATCH] =?UTF-8?q?[fix]=20negosium/front:=20=ED=98=91=EC=83=81=20?=
 =?UTF-8?q?=EC=B1=97=20=EC=97=90=EB=9F=AC=20=EB=A7=90=ED=92=8D=EC=84=A0=20?=
 =?UTF-8?q?=ED=86=A0=EC=8A=A4=ED=8A=B8(=ED=95=98=EB=8B=A8=20=EC=A7=A4?=
 =?UTF-8?q?=EB=A6=BC=20=EC=88=98=EC=A0=95)=20+=20=EA=B0=80=EA=B2=A9/?=
 =?UTF-8?q?=ED=95=A0=EC=9D=B8=EC=9C=A8=20=EC=9E=85=EB=A0=A5=20=EC=9E=90?=
 =?UTF-8?q?=EB=8F=99=20=ED=8F=AC=EC=BB=A4=EC=8A=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../features/chat/components/UserButton.tsx   |  4 +++-
 .../features/chat/components/userInputs.tsx   | 23 +++++++++++++------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/frontend/src/features/chat/components/UserButton.tsx b/frontend/src/features/chat/components/UserButton.tsx
index eb3840c..26c8dad 100644
--- a/frontend/src/features/chat/components/UserButton.tsx
+++ b/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 || '확인'} />}
diff --git a/frontend/src/features/chat/components/userInputs.tsx b/frontend/src/features/chat/components/userInputs.tsx
index ab20e89..0071f71 100644
--- a/frontend/src/features/chat/components/userInputs.tsx
+++ b/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>
   )
 }