diff --git a/frontend/src/pages/idea/_components/GeneratingIdea.tsx b/frontend/src/pages/idea/_components/GeneratingIdea.tsx index e2824fa..950adc6 100644 --- a/frontend/src/pages/idea/_components/GeneratingIdea.tsx +++ b/frontend/src/pages/idea/_components/GeneratingIdea.tsx @@ -23,6 +23,8 @@ export const GeneratingIdea = () => { const [keyword, setKeyword] = useState('') const [additionalInfo, setAdditionalInfo] = useState('') const [selectedOption, setSelectedOption] = useState('') + const [isKeywordLimit, setIsKeywordLimit] = useState(false) + const [isExtraLimit, setIsExtraLimit] = useState(false) const hasTrackedKeywordFocus = useRef(false) const hasTrackedAdditionalFocus = useRef(false) @@ -153,6 +155,7 @@ export const GeneratingIdea = () => { id="keyword-input" value={keyword} onChange={(value) => setKeyword(value)} + onLimitChange={setIsKeywordLimit} onFocus={handleKeywordFocus} title="키워드" placeholder="생각나는 키워드를 입력해주세요. (예: 바이브코딩, 도쿄 여행, 가을 메이크업)" @@ -161,8 +164,9 @@ export const GeneratingIdea = () => { />
영상형식
{ id="additional-info-input" value={additionalInfo} onChange={(value) => setAdditionalInfo(value)} + onLimitChange={setIsExtraLimit} onFocus={handleAdditionalFocus} title="추가 입력 사항" placeholder="어떤 점을 강조하고 싶으신가요? (예: 쉬운 설명, 유머, 영상미)" @@ -201,10 +206,10 @@ export const GeneratingIdea = () => { /> diff --git a/frontend/src/pages/idea/_components/TextareaWithLimit.tsx b/frontend/src/pages/idea/_components/TextareaWithLimit.tsx index e18bfae..9b75f26 100644 --- a/frontend/src/pages/idea/_components/TextareaWithLimit.tsx +++ b/frontend/src/pages/idea/_components/TextareaWithLimit.tsx @@ -4,6 +4,7 @@ interface TextareaWithLimitProps { id: string value: string // textarea의 값 onChange: (value: string) => void // 사용자가 입력한 텍스트가 변경될 때 호출되는 함수 + onLimitChange: (value: boolean) => void title: string placeholder?: string initialRows?: number // row 개수로 textarea 박스의 초기 높이를 지정할 수 있습니다. 디폴트는 1 @@ -17,6 +18,7 @@ const TextareaWithLimit = ({ id, value, onChange, + onLimitChange, title, placeholder, initialRows = 1, @@ -44,7 +46,8 @@ const TextareaWithLimit = ({ return (
limitLength ? 'border-error' : isFocused ? 'border-gray-400' : 'border-transparent' + border bg-surface-elevate-l2 rounded-lg ${ + inputCount > limitLength ? 'border-error' : isFocused ? 'border-gray-400' : 'border-transparent' } `} > @@ -60,8 +63,10 @@ const TextareaWithLimit = ({ value={value} disabled={disabled} onChange={(e) => { - onChange(e.target.value) - onInputHandler(e.target.value) + const newValue = e.target.value + onChange(newValue) + onInputHandler(newValue) + onLimitChange(newValue.length > limitLength) }} onFocus={handleFocus} onBlur={() => setIsFocused(false)}