Merge pull request #52 from MARU-EGG/TSK-41

[TSK-41] preset button setting
MARU-EGG · Sep 25, 2024 · 1ba6623 · 1ba6623
2 parents 08d83af + 9fd50e9
commit 1ba6623
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 51 deletions.
diff --git a/src/hooks/use-chat-form.hooks.ts b/src/hooks/use-chat-form.hooks.ts
@@ -7,6 +7,7 @@ import { SearchById } from '../api/admin/question-manage/admin-search-by-id';
 import useTypeStore from '../store/type-category-store';
 
 const useChatForm = () => {
+  const { addMessage, setLoading, updateLastMessage, updateLastReference, updateReferenceDisabled } = useChatStore();
   const [content, setContent] = useState<string>('');
   const [selectedId, setSelectedId] = useState<number | undefined>(undefined);
   const [disabled, setDisabled] = useState(false);
@@ -27,35 +28,38 @@ const useChatForm = () => {
     setAutoOpen(false);
   }, []);
 
+  const fetchResponse = async () => {
+    if (selectedId === undefined) {
+      return await postQuestion(category, type, content);
+    } else {
+      return await SearchById(selectedId);
+    }
+  };
+
+  const updateStateWithResponse = (response: any) => {
+    updateLastMessage(response.answer.content);
+    updateLastReference(response.references);
+    updateReferenceDisabled(false);
+    setLoading(false);
+    setDisabled(false);
+    setSelectedId(undefined);
+  };
+
   const handleSubmit = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
       try {
-        useChatStore.getState().addMessage({ content, role: 'user' });
-        useChatStore.getState().addMessage({ content: 'loading', role: 'system' });
-        useChatStore.getState().setLoading(true);
+        addMessage({ content, role: 'user' });
+        addMessage({ content: 'loading', role: 'system' });
+        setLoading(true);
         setContent('');
         setAutoOpen(false);
         setDisabled(true);
-        if (selectedId === undefined) {
-          const response = await postQuestion(category, type, content);
-          useChatStore.getState().updateLastMessage(response.answer.content);
-          useChatStore.getState().updateLastReference(response.references);
-          useChatStore.getState().updateReferenceDisabled(false);
-          useChatStore.getState().setLoading(false);
-          setDisabled(false);
-        } else {
-          const response = await SearchById(selectedId);
-          useChatStore.getState().updateLastMessage(response.answer.content);
-          useChatStore.getState().updateLastReference(response.references);
-          useChatStore.getState().updateReferenceDisabled(false);
-          useChatStore.getState().setLoading(false);
-          setSelectedId(undefined);
-          setDisabled(false);
-        }
+        const response = await fetchResponse();
+        updateStateWithResponse(response);
       } catch (error) {
-        useChatStore.getState().setLoading(false);
-        useChatStore.getState().updateLastMessage('답변 생성에 실패했습니다. 새로고침해주세요');
+        setLoading(false);
+        updateLastMessage('답변 생성에 실패했습니다. 새로고침해주세요');
       }
     },
     [content, selectedId, category, type],

diff --git a/src/hooks/use-chat-section.hooks.ts b/src/hooks/use-chat-section.hooks.ts
@@ -1,13 +1,10 @@
 import React from 'react';
 import useTypeStore, { TypeCategoryState } from '../store/type-category-store';
-import useChatStore, { referenceState } from '../store/chat-store';
 
 const useChatSection = () => {
   const { setSelectedType, setSelectedCategory } = useTypeStore();
-  const { addMessage, updateReferenceDisabled } = useChatStore();
   const [selectedTypeButton, setSelectedTypeButton] = React.useState<TypeCategoryState['type']>(undefined);
   const [selectedCategoryButton, setSelectedCategoryButton] = React.useState<TypeCategoryState['category']>(undefined);
-
   const handleTypeButtonClick = (selectedType: TypeCategoryState['type']) => {
     setSelectedType(selectedType);
     setSelectedTypeButton(selectedType);
@@ -18,27 +15,11 @@ const useChatSection = () => {
     setSelectedCategoryButton(selectedCategory);
   };
 
-  const handleReferenceButtonClick = (references: referenceState[]) => {
-    console.log(references);
-    let content = '답변 출처를 알려드릴게요!\n';
-    if (references === undefined || references.length === 0) {
-      addMessage({ content: '출처 정보가 없습니다.', role: 'system' });
-      return;
-    }
-    references.map((reference, index) => {
-      content += `\n출처${index + 1}번: ${reference.link}\n`;
-    });
-    content += '\n**답변을 꼭 확인해주세요!**';
-    addMessage({ content: content, role: 'system' });
-    updateReferenceDisabled(true);
-  };
-
   return {
     selectedTypeButton,
     selectedCategoryButton,
     handleTypeButtonClick,
     handleCategoryButtonClick,
-    handleReferenceButtonClick,
   };
 };
 

diff --git a/src/hooks/use-preset-button.hooks.ts b/src/hooks/use-preset-button.hooks.ts
@@ -0,0 +1,54 @@
+import useChatStore, { referenceState } from '../store/chat-store';
+import useTypeStore from '../store/type-category-store';
+import { postQuestion } from '../api/post-question';
+
+const usePresetButton = () => {
+  const { type, category } = useTypeStore();
+  const { addMessage, setLoading, updateLastMessage, updateLastReference, updateReferenceDisabled } = useChatStore();
+
+  const handleReferenceButtonClick = (references: referenceState[]) => {
+    let content = '답변 출처를 알려드릴게요!\n';
+    if (references === undefined || references.length === 0) {
+      addMessage({ content: '출처 정보가 없습니다.', role: 'system' });
+      return;
+    }
+    references.map((reference, index) => {
+      content += `\n출처${index + 1}번: ${reference.link}\n`;
+    });
+    content += '\n**답변을 꼭 확인해주세요!**';
+    addMessage({ content: content, role: 'system' });
+    updateReferenceDisabled(true);
+  };
+
+  const fetchResponse = async (question: string) => {
+    return await postQuestion(category, type, question);
+  };
+
+  const updateStateWithResponse = (response: any) => {
+    updateLastMessage(response.answer.content);
+    updateLastReference(response.references);
+    updateReferenceDisabled(false);
+    setLoading(false);
+  };
+
+  const handleButtonClick = async (question: string) => {
+    try {
+      addMessage({ content: question, role: 'user' });
+      addMessage({ content: 'loading', role: 'system' });
+      setLoading(true);
+
+      const response = await fetchResponse(question);
+      updateStateWithResponse(response);
+    } catch (error) {
+      setLoading(false);
+      updateLastMessage('답변 생성에 실패했습니다. 새로고침해주세요');
+    }
+  };
+
+  return {
+    handleReferenceButtonClick,
+    handleButtonClick,
+  };
+};
+
+export default usePresetButton;
diff --git a/src/ui/components/molecule/chat-section/chat-section.tsx b/src/ui/components/molecule/chat-section/chat-section.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import ChatCard from '../../atom/chat-card/chat-card';
-import PresetButton from '../../atom/preset/preset-button';
 import useTypeStore from '../../../../store/type-category-store';
 import useChatStore from '../../../../store/chat-store';
 import useChatSection from '../../../../hooks/use-chat-section.hooks';
@@ -14,7 +13,6 @@ import { QuestionPresetButtons } from '../../user-domain/question-preset-buttons
 const ChatSection: React.FC = () => {
   const { type, category } = useTypeStore();
   const { messages, loading, referenceButtonDisabled } = useChatStore();
-  const { selectedCategoryButton } = useChatSection();
   const { activeSusi, activeJeongsi, activePyeonip, setSusiDisabled, setJeongsiDisabled, setPyeonipDisabled } =
     useTypeDisabledStore();
   const [messageApi, contextHolder] = useMessage();
@@ -89,7 +87,7 @@ const ChatSection: React.FC = () => {
 
   React.useEffect(() => {
     messageEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages, selectedCategoryButton]);
+  }, [messages, category, referenceButtonDisabled]);
 
   React.useEffect(() => {
     updateCategoryStatus();
@@ -134,7 +132,7 @@ const ChatSection: React.FC = () => {
       {messages.map((msg, index) => (
         <ChatCard key={index} content={msg.content} role={msg.role} />
       ))}
-      {!referenceButtonDisabled && <QuestionPresetButtons />}
+      {category && <QuestionPresetButtons />}
       <div ref={messageEndRef}></div>
     </div>
   );

diff --git a/src/ui/components/user-domain/category-preset-buttons.tsx b/src/ui/components/user-domain/category-preset-buttons.tsx
@@ -1,26 +1,31 @@
 import * as React from 'react';
 import PresetButton from '../atom/preset/preset-button';
 import useChatSection from '../../../hooks/use-chat-section.hooks';
+import useChatStore from '../../../store/chat-store';
 
 export const CategoryPresetButtons = () => {
   const { selectedCategoryButton, handleCategoryButtonClick } = useChatSection();
+  const { referenceButtonDisabled } = useChatStore();
   return (
     <div className="flex flex-col items-start space-y-2">
       <PresetButton
         onClick={() => handleCategoryButtonClick('ADMISSION_GUIDELINE')}
         isSelected={selectedCategoryButton === 'ADMISSION_GUIDELINE'}
+        disabled={!referenceButtonDisabled}
       >
         모집관련내용
       </PresetButton>
       <PresetButton
         onClick={() => handleCategoryButtonClick('PASSING_RESULT')}
         isSelected={selectedCategoryButton === 'PASSING_RESULT'}
+        disabled={!referenceButtonDisabled}
       >
         전년도 입시결과
       </PresetButton>
       <PresetButton
         onClick={() => handleCategoryButtonClick('PAST_QUESTIONS')}
         isSelected={selectedCategoryButton === 'PAST_QUESTIONS'}
+        disabled={!referenceButtonDisabled}
       >
         면접등 기출문제
       </PresetButton>

diff --git a/src/ui/components/user-domain/question-preset-buttons.tsx b/src/ui/components/user-domain/question-preset-buttons.tsx
@@ -1,15 +1,23 @@
 import * as React from 'react';
 import useChatStore from '../../../store/chat-store';
 import PresetButton from '../atom/preset/preset-button';
-import useChatSection from '../../../hooks/use-chat-section.hooks';
+import usePresetButton from '../../../hooks/use-preset-button.hooks';
 
 export const QuestionPresetButtons = () => {
-  const { lastReference } = useChatStore();
-  const { handleReferenceButtonClick } = useChatSection();
+  const { lastReference, referenceButtonDisabled } = useChatStore();
+  const { handleReferenceButtonClick, handleButtonClick } = usePresetButton();
 
   return (
     <div>
-      <PresetButton onClick={() => handleReferenceButtonClick(lastReference)}>답변출처확인</PresetButton>
+      {!referenceButtonDisabled && (
+        <PresetButton onClick={() => handleReferenceButtonClick(lastReference)}>👆 출처를 알고싶어요</PresetButton>
+      )}
+      <PresetButton onClick={() => handleButtonClick('전형일정')}>전형일정</PresetButton>
+      <PresetButton onClick={() => handleButtonClick('면접 유의사항')}>면접유의사항</PresetButton>
+      <PresetButton onClick={() => handleButtonClick('제출서류 유의사항')}>제출서류</PresetButton>
+      <PresetButton onClick={() => handleButtonClick('입시결과안내')}>입시결과</PresetButton>
+      <PresetButton onClick={() => handleButtonClick('실기고사')}>실기고사</PresetButton>
+      <PresetButton onClick={() => window.location.reload()}>조건 재설정</PresetButton>
     </div>
   );
 };
diff --git a/src/ui/components/user-domain/type-preset-buttons.tsx b/src/ui/components/user-domain/type-preset-buttons.tsx
@@ -2,28 +2,30 @@ import * as React from 'react';
 import PresetButton from '../atom/preset/preset-button';
 import useChatSection from '../../../hooks/use-chat-section.hooks';
 import { useTypeDisabledStore } from '../../../store/type-disabled-store';
+import useChatStore from '../../../store/chat-store';
 
 export const TypePresetButtons = () => {
   const { selectedTypeButton, handleTypeButtonClick } = useChatSection();
   const { activeSusi, activeJeongsi, activePyeonip } = useTypeDisabledStore();
+  const { referenceButtonDisabled } = useChatStore();
   return (
     <div className="flex space-x-2">
       <PresetButton
-        disabled={activeSusi}
+        disabled={activeSusi || !referenceButtonDisabled}
         onClick={() => handleTypeButtonClick('SUSI')}
         isSelected={selectedTypeButton === 'SUSI'}
       >
         수시
       </PresetButton>
       <PresetButton
-        disabled={activeJeongsi}
+        disabled={activeJeongsi || !referenceButtonDisabled}
         onClick={() => handleTypeButtonClick('JEONGSI')}
         isSelected={selectedTypeButton === 'JEONGSI'}
       >
         정시
       </PresetButton>
       <PresetButton
-        disabled={activePyeonip}
+        disabled={activePyeonip || !referenceButtonDisabled}
         onClick={() => handleTypeButtonClick('PYEONIP')}
         isSelected={selectedTypeButton === 'PYEONIP'}
       >