From c20050fe487691ce5160153f445e44e0d7bf8fbc Mon Sep 17 00:00:00 2001 From: Choi JunHo Date: Tue, 24 Sep 2024 14:09:45 +0900 Subject: [PATCH 1/8] Refactor: chatStore call const --- src/hooks/use-chat-form.hooks.ts | 27 ++++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/src/hooks/use-chat-form.hooks.ts b/src/hooks/use-chat-form.hooks.ts index e62ce1d..74a8dc9 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); @@ -31,31 +32,31 @@ const useChatForm = () => { 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); + updateLastMessage(response.answer.content); + updateLastReference(response.references); + updateReferenceDisabled(false); + 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); + updateLastMessage(response.answer.content); + updateLastReference(response.references); + updateReferenceDisabled(false); + setLoading(false); setSelectedId(undefined); setDisabled(false); } } catch (error) { - useChatStore.getState().setLoading(false); - useChatStore.getState().updateLastMessage('답변 생성에 실패했습니다. 새로고침해주세요'); + setLoading(false); + updateLastMessage('답변 생성에 실패했습니다. 새로고침해주세요'); } }, [content, selectedId, category, type], From 6033269d4c4800a0928ccbc8893fc2dda66f750c Mon Sep 17 00:00:00 2001 From: Choi JunHo Date: Tue, 24 Sep 2024 17:31:23 +0900 Subject: [PATCH 2/8] refactor: chat-section ref dependencies add category --- src/ui/components/molecule/chat-section/chat-section.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) 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 && }
); From 8640e435c9b1fefc35b666bea92ed6b986b00174 Mon Sep 17 00:00:00 2001 From: Choi JunHo Date: Tue, 24 Sep 2024 17:31:45 +0900 Subject: [PATCH 3/8] refactor: remove referencebuttonclick hook in chat-section --- src/hooks/use-chat-section.hooks.ts | 19 ------------------- 1 file changed, 19 deletions(-) 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, }; }; From 76db30584d7091342d793e57f42e1d9ff1f8eca9 Mon Sep 17 00:00:00 2001 From: Choi JunHo Date: Tue, 24 Sep 2024 17:32:14 +0900 Subject: [PATCH 4/8] refactor: use-chat-form hook refactor --- src/hooks/use-chat-form.hooks.ts | 35 +++++++++++++++++--------------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/src/hooks/use-chat-form.hooks.ts b/src/hooks/use-chat-form.hooks.ts index 74a8dc9..0fe9ce9 100644 --- a/src/hooks/use-chat-form.hooks.ts +++ b/src/hooks/use-chat-form.hooks.ts @@ -28,6 +28,23 @@ 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(); @@ -38,22 +55,8 @@ const useChatForm = () => { setContent(''); setAutoOpen(false); setDisabled(true); - if (selectedId === undefined) { - const response = await postQuestion(category, type, content); - updateLastMessage(response.answer.content); - updateLastReference(response.references); - updateReferenceDisabled(false); - setLoading(false); - setDisabled(false); - } else { - const response = await SearchById(selectedId); - updateLastMessage(response.answer.content); - updateLastReference(response.references); - updateReferenceDisabled(false); - setLoading(false); - setSelectedId(undefined); - setDisabled(false); - } + const response = await fetchResponse(); + updateStateWithResponse(response); } catch (error) { setLoading(false); updateLastMessage('답변 생성에 실패했습니다. 새로고침해주세요'); From 99d591ea5521682be3781d25b65f46c6d32320e8 Mon Sep 17 00:00:00 2001 From: Choi JunHo Date: Tue, 24 Sep 2024 17:32:26 +0900 Subject: [PATCH 5/8] feat: use-preset-button hoooks and presetbuttons --- src/hooks/use-preset-button.hooks.ts | 55 +++++++++++++++++++ .../user-domain/question-preset-buttons.tsx | 16 ++++-- 2 files changed, 67 insertions(+), 4 deletions(-) create mode 100644 src/hooks/use-preset-button.hooks.ts diff --git a/src/hooks/use-preset-button.hooks.ts b/src/hooks/use-preset-button.hooks.ts new file mode 100644 index 0000000..dca857c --- /dev/null +++ b/src/hooks/use-preset-button.hooks.ts @@ -0,0 +1,55 @@ +import useChatStore, { referenceState } from '../store/chat-store'; +import useTypeStore from '../store/type-category-store'; +import { postQuestion } from '../api/post-question'; +import { SearchById } from '../api/admin/question-manage/admin-search-by-id'; + +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/user-domain/question-preset-buttons.tsx b/src/ui/components/user-domain/question-preset-buttons.tsx index 21c7f36..b04f2a5 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()}>내용 변경하기
); }; From 61f138b553cfcf5f7c75a7eaae4317e3343e5610 Mon Sep 17 00:00:00 2001 From: Choi JunHo Date: Tue, 24 Sep 2024 20:04:15 +0900 Subject: [PATCH 6/8] refactor: remove no mean import code remove --- src/hooks/use-preset-button.hooks.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/hooks/use-preset-button.hooks.ts b/src/hooks/use-preset-button.hooks.ts index dca857c..9d21f8d 100644 --- a/src/hooks/use-preset-button.hooks.ts +++ b/src/hooks/use-preset-button.hooks.ts @@ -1,7 +1,6 @@ import useChatStore, { referenceState } from '../store/chat-store'; import useTypeStore from '../store/type-category-store'; import { postQuestion } from '../api/post-question'; -import { SearchById } from '../api/admin/question-manage/admin-search-by-id'; const usePresetButton = () => { const { type, category } = useTypeStore(); From bd40bc98cd048d91fb6ef8866415966382a304f4 Mon Sep 17 00:00:00 2001 From: Choi JunHo Date: Tue, 24 Sep 2024 20:04:31 +0900 Subject: [PATCH 7/8] refactor: add button disabled --- src/ui/components/user-domain/category-preset-buttons.tsx | 5 +++++ src/ui/components/user-domain/question-preset-buttons.tsx | 2 +- src/ui/components/user-domain/type-preset-buttons.tsx | 8 +++++--- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/ui/components/user-domain/category-preset-buttons.tsx b/src/ui/components/user-domain/category-preset-buttons.tsx index 03a9f08..f98f17b 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 b04f2a5..bc165ab 100644 --- a/src/ui/components/user-domain/question-preset-buttons.tsx +++ b/src/ui/components/user-domain/question-preset-buttons.tsx @@ -17,7 +17,7 @@ export const QuestionPresetButtons = () => { handleButtonClick('제출서류 유의사항')}>제출서류 handleButtonClick('입시결과안내')}>입시결과 handleButtonClick('실기고사')}>실기고사 - window.location.reload()}>내용 변경하기 + 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..805f227 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'} > From 9fd50e9622c9d48dd799ec4aa8b071b529fe71fb Mon Sep 17 00:00:00 2001 From: Choi JunHo Date: Tue, 24 Sep 2024 20:09:31 +0900 Subject: [PATCH 8/8] refactor: disabled condition change --- src/ui/components/user-domain/category-preset-buttons.tsx | 6 +++--- src/ui/components/user-domain/type-preset-buttons.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/ui/components/user-domain/category-preset-buttons.tsx b/src/ui/components/user-domain/category-preset-buttons.tsx index f98f17b..4f0163a 100644 --- a/src/ui/components/user-domain/category-preset-buttons.tsx +++ b/src/ui/components/user-domain/category-preset-buttons.tsx @@ -11,21 +11,21 @@ export const CategoryPresetButtons = () => { handleCategoryButtonClick('ADMISSION_GUIDELINE')} isSelected={selectedCategoryButton === 'ADMISSION_GUIDELINE'} - disabled={referenceButtonDisabled} + disabled={!referenceButtonDisabled} > 모집관련내용 handleCategoryButtonClick('PASSING_RESULT')} isSelected={selectedCategoryButton === 'PASSING_RESULT'} - disabled={referenceButtonDisabled} + disabled={!referenceButtonDisabled} > 전년도 입시결과 handleCategoryButtonClick('PAST_QUESTIONS')} isSelected={selectedCategoryButton === 'PAST_QUESTIONS'} - disabled={referenceButtonDisabled} + disabled={!referenceButtonDisabled} > 면접등 기출문제 diff --git a/src/ui/components/user-domain/type-preset-buttons.tsx b/src/ui/components/user-domain/type-preset-buttons.tsx index 805f227..68a8b85 100644 --- a/src/ui/components/user-domain/type-preset-buttons.tsx +++ b/src/ui/components/user-domain/type-preset-buttons.tsx @@ -11,21 +11,21 @@ export const TypePresetButtons = () => { return (
handleTypeButtonClick('SUSI')} isSelected={selectedTypeButton === 'SUSI'} > 수시 handleTypeButtonClick('JEONGSI')} isSelected={selectedTypeButton === 'JEONGSI'} > 정시 handleTypeButtonClick('PYEONIP')} isSelected={selectedTypeButton === 'PYEONIP'} >