[feat] input disabled 로직 추가

Author: ahk0413

src/domains/recommend/components/ChatSection.tsx

@@ -26,6 +26,9 @@ function ChatSection() {
     selectedCocktailType?: string;
   }>({});
 
+  const isInputDisabled =
+    selectedOptions.current.selectedCocktailType !== 'QA' && userCurrentStep < 3;
+
   const handleSendMessage = async (payload: stepPayload | { message: string; userId: string }) => {
     const tempTypingId = `typing-${Date.now()}`;
 
@@ -165,7 +168,7 @@ function ChatSection() {
         onSelectedOption={handleSelectedOption}
         getRecommendations={getRecommendations}
       />
-      <MessageInput onSubmit={handleSubmitText} />
+      <MessageInput onSubmit={handleSubmitText} disabled={isInputDisabled} />
     </section>
   );
 }

src/domains/recommend/components/user/MessageInput.tsx

@@ -7,9 +7,10 @@ import { useRef, useState } from 'react';
 
 interface Props {
   onSubmit: (message: string) => void;
+  disabled: boolean;
 }
 
-function MessageInput({ onSubmit }: Props) {
+function MessageInput({ onSubmit, disabled }: Props) {
   const [value, setValue] = useState('');
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -35,8 +36,14 @@ function MessageInput({ onSubmit }: Props) {
             id="chatInput"
             name="chatInput"
             onInput={(e) => resizeTextarea(e.currentTarget)}
-            placeholder="칵테일 추천 질문을 입력해주세요."
-            className="w-[calc(100%-3rem)] md:w-[calc(100%-3.75rem)] px-4 py-2 md:py-3.5 rounded-lg h-[40px] md:h-[52px] max-h-[160px] md:max-h-[280px] bg-white text-primary placeholder:text-gray-dark resize-none outline-none"
+            placeholder={disabled ? '옵션을 선택해주세요.' : '칵테일 추천 질문을 입력해주세요.'}
+            disabled={disabled}
+            className={`
+    w-[calc(100%-3rem)] md:w-[calc(100%-3.75rem)] px-4 py-2 md:py-3.5
+    rounded-lg h-[40px] md:h-[52px] max-h-[160px] md:max-h-[280px]
+    bg-white text-primary placeholder:text-gray-dark resize-none outline-none
+    disabled:bg-gray disabled:text-gray-dark disabled:cursor-not-allowed
+  `}
           />
           <button
             type="button"