diff --git a/src/hooks/use-chat-form.hooks.ts b/src/hooks/use-chat-form.hooks.ts index e62ce1d..0fe9ce9 100644 --- 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(''); const [selectedId, setSelectedId] = useState(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) => { 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 index 03e9309..7cacc4f 100644 --- 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(undefined); const [selectedCategoryButton, setSelectedCategoryButton] = React.useState(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 new file mode 100644 index 0000000..9d21f8d --- /dev/null +++ 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 index d69f2e5..fa6c4bd 100644 --- 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) => ( ))} - {!referenceButtonDisabled && } + {category && }
); diff --git a/src/ui/components/user-domain/category-preset-buttons.tsx b/src/ui/components/user-domain/category-preset-buttons.tsx index 03a9f08..4f0163a 100644 --- 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 (
handleCategoryButtonClick('ADMISSION_GUIDELINE')} isSelected={selectedCategoryButton === 'ADMISSION_GUIDELINE'} + disabled={!referenceButtonDisabled} > 모집관련내용 handleCategoryButtonClick('PASSING_RESULT')} isSelected={selectedCategoryButton === 'PASSING_RESULT'} + disabled={!referenceButtonDisabled} > 전년도 입시결과 handleCategoryButtonClick('PAST_QUESTIONS')} isSelected={selectedCategoryButton === 'PAST_QUESTIONS'} + disabled={!referenceButtonDisabled} > 면접등 기출문제 diff --git a/src/ui/components/user-domain/question-preset-buttons.tsx b/src/ui/components/user-domain/question-preset-buttons.tsx index 21c7f36..bc165ab 100644 --- 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 (
- handleReferenceButtonClick(lastReference)}>답변출처확인 + {!referenceButtonDisabled && ( + handleReferenceButtonClick(lastReference)}>👆 출처를 알고싶어요 + )} + handleButtonClick('전형일정')}>전형일정 + handleButtonClick('면접 유의사항')}>면접유의사항 + handleButtonClick('제출서류 유의사항')}>제출서류 + handleButtonClick('입시결과안내')}>입시결과 + handleButtonClick('실기고사')}>실기고사 + window.location.reload()}>조건 재설정
); }; diff --git a/src/ui/components/user-domain/type-preset-buttons.tsx b/src/ui/components/user-domain/type-preset-buttons.tsx index ddbd09c..68a8b85 100644 --- 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 (
handleTypeButtonClick('SUSI')} isSelected={selectedTypeButton === 'SUSI'} > 수시 handleTypeButtonClick('JEONGSI')} isSelected={selectedTypeButton === 'JEONGSI'} > 정시 handleTypeButtonClick('PYEONIP')} isSelected={selectedTypeButton === 'PYEONIP'} >