Merge pull request #7 from MARU-EGG/feature-#3

[FEAT-3] 사용자의 질문을 입력할 수 있는 input 기능 구현
MARU-EGG · Jan 25, 2025 · 156d856 · 156d856
2 parents c4478a1 + 44ebe95
commit 156d856
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 36 deletions.
diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts
@@ -2,3 +2,4 @@ export { default as ArrowDownIcon } from '@assets/svg/arrow-down.svg?react';
 export { default as TreeIcon } from '@assets/svg/tree.svg?react';
 export { default as ReloadIcon } from '@assets/svg/reload.svg?react';
 export { default as MaruIcon } from '@assets/svg/maru.svg?react';
+export { default as SendIcon } from '@assets/svg/send.svg?react';
diff --git a/src/assets/svg/send.svg b/src/assets/svg/send.svg
diff --git a/src/components/preset-button/preset-button.tsx b/src/components/preset-button/preset-button.tsx
@@ -8,7 +8,6 @@ function PresetButton({ children, ...props }: PresetButtonProps) {
   const buttonClasses = cn(
     'cursor-pointer rounded-lg border border-category_border bg-white px-4 py-3 text-black transition-colors text-sm',
     'hover:border-primary hover:text-primary',
-    'focus:border-primary focus:text-primary',
     'disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400',
     'disabled:hover:border-gray-200 disabled:hover:text-gray-400',
   );

diff --git a/src/hooks/use-question-form-hook.ts b/src/hooks/use-question-form-hook.ts
@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import useAdmissionStore from '@/stores/store/admission-store';
+import useMessagesStore from '@/stores/store/message-store';
+import { ChatSteps } from '@/types/chat';
+import { useIsMutating } from '@tanstack/react-query';
+
+interface UseQuestionFormProps {
+  changeStep: (step: ChatSteps) => void;
+}
+
+export function useQuestionForm({ changeStep }: UseQuestionFormProps) {
+  const [content, setContent] = useState<string>('');
+  const { setQuestion } = useAdmissionStore();
+  const { setMessages } = useMessagesStore();
+  const isMutating = useIsMutating({ mutationKey: ['POST_QUESTION'] });
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setQuestion({
+      label: content,
+      category: 'ADMISSION_GUIDELINE',
+      question: content,
+    });
+    setMessages([
+      {
+        role: 'user',
+        message: content,
+      },
+    ]);
+    changeStep('상세전형 질문 결과');
+    setContent('');
+  };
+
+  return { content, setContent, isLoading: isMutating === 1, handleSubmit };
+}
diff --git a/src/page/components/main/main.tsx b/src/page/components/main/main.tsx
@@ -7,6 +7,7 @@ import QuestionResult from '@/page/components/chat-step/question-result/question
 import ReferenceResult from '@/page/components/chat-step/reference-result/reference-result';
 import Funnel from '@/page/components/funnel/funnel';
 import MessageHistory from '@/page/components/message-history/message-history';
+import QuestionForm from '@/page/components/question-form/question-form';
 import useAdmissionStore from '@/stores/store/admission-store';
 import useMessagesStore from '@/stores/store/message-store';
 import { ChatSteps } from '@/types/chat';
@@ -26,41 +27,48 @@ function Main() {
   }, [messages, steps]);
 
   return (
-    <main className="flex h-full flex-col gap-6 overflow-y-auto overflow-x-hidden py-6 pl-12 pr-3">
-      <MessageHistory />
-      <Funnel step={steps}>
-        <Funnel.Step step="입시유형 선택">
-          <ChooseAdmission changeStep={changeStep} />
-        </Funnel.Step>
-        <Funnel.Step step="입시유형 상세전형 선택">
-          <Suspense>
-            <ChooseAdmissionCategory changeStep={changeStep} admissionType={admissionType!} />
-          </Suspense>
-        </Funnel.Step>
-        <Funnel.Step step="상세전형 선택 결과">
-          <AdmissionCategoryResult
-            changeStep={changeStep}
-            admissionType={admissionType!}
-            admissionCategory={admissionCategory!}
-          />
-        </Funnel.Step>
-        <Funnel.Step step="상세전형 질문 결과">
-          <QuestionResult
-            admissionType={admissionType!}
-            admissionCategory={admissionCategory!}
-            question={question!}
-            changeStep={changeStep}
-          />
-        </Funnel.Step>
-        <Funnel.Step step="질문 출처 결과">
-          <ReferenceResult changeStep={changeStep} />
-        </Funnel.Step>
-        <Funnel.Step step="상세전형 학과별 입시">
-          <ChooseDepartment />
-        </Funnel.Step>
-      </Funnel>
-      <div className="h-3" ref={messageEndRef}></div>
-    </main>
+    <>
+      <main className="flex h-full flex-col gap-6 overflow-y-auto overflow-x-hidden">
+        <div className="flex-1 py-6 pl-12 pr-3">
+          <MessageHistory />
+          <Funnel step={steps}>
+            <Funnel.Step step="입시유형 선택">
+              <ChooseAdmission changeStep={changeStep} />
+            </Funnel.Step>
+            <Funnel.Step step="입시유형 상세전형 선택">
+              <Suspense>
+                <ChooseAdmissionCategory changeStep={changeStep} admissionType={admissionType!} />
+              </Suspense>
+            </Funnel.Step>
+            <Funnel.Step step="상세전형 선택 결과">
+              <AdmissionCategoryResult
+                changeStep={changeStep}
+                admissionType={admissionType!}
+                admissionCategory={admissionCategory!}
+              />
+            </Funnel.Step>
+            <Funnel.Step step="상세전형 질문 결과">
+              <QuestionResult
+                admissionType={admissionType!}
+                admissionCategory={admissionCategory!}
+                question={question!}
+                changeStep={changeStep}
+              />
+            </Funnel.Step>
+            <Funnel.Step step="질문 출처 결과">
+              <ReferenceResult changeStep={changeStep} />
+            </Funnel.Step>
+            <Funnel.Step step="상세전형 학과별 입시">
+              <ChooseDepartment />
+            </Funnel.Step>
+          </Funnel>
+        </div>
+        <div>
+          {admissionType && admissionCategory && <QuestionForm changeStep={changeStep} />}
+          <div ref={messageEndRef}></div>
+        </div>
+      </main>
+    </>
   );
 }
 

diff --git a/src/page/components/question-form/question-form.tsx b/src/page/components/question-form/question-form.tsx
@@ -0,0 +1,34 @@
+import { SendIcon } from '@/assets/svg';
+import { useQuestionForm } from '@/hooks/use-question-form-hook';
+import { ChatSteps } from '@/types/chat';
+
+interface QuestionFormProps {
+  changeStep: (step: ChatSteps) => void;
+}
+
+function QuestionForm({ changeStep }: QuestionFormProps) {
+  const { content, isLoading, setContent, handleSubmit } = useQuestionForm({ changeStep });
+
+  return (
+    <div className="sticky bottom-0 h-20 w-full bg-white px-2">
+      <form className="flex h-20" onSubmit={handleSubmit}>
+        <input
+          className={`h-11 w-80 bg-white ${isLoading && 'cursor-progress'} focus:outline-none`}
+          placeholder={'질문을 입력해주세요'}
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          disabled={isLoading}
+        />
+        <button
+          type="submit"
+          className={`${isLoading && 'cursor-progress'} flex h-11 w-11 items-center justify-center`}
+          disabled={isLoading || !content}
+        >
+          <SendIcon />
+        </button>
+      </form>
+    </div>
+  );
+}
+
+export default QuestionForm;