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 ( -
+
{type === 'one-black' && } {type === 'one-gray' && } 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 ( -
+
+ {/* 레이아웃 밖(absolute)에 띄워 에러가 떠도 input 위치가 안 변한다 */} + {error && ( + + )}
- {error && ( - - )}
) }