diff --git a/src/store/type-category-store.ts b/src/store/type-category-store.ts new file mode 100644 index 0000000..cff5ff0 --- /dev/null +++ b/src/store/type-category-store.ts @@ -0,0 +1,17 @@ +import { create } from 'zustand'; + +interface TypeCategoryState { + type: null | 'SUSI' | 'PYEONIP' | 'JEONGSI'; + category: null | 'ADMISSION_GUIDELINE' | 'PASSING_RESULT' | 'PAST_QUESTIONS' | 'INTERVIEW_PRACTICAL_TEST'; + setSelectedType: (button: TypeCategoryState['type']) => void; + setSelectedCategory: (button: TypeCategoryState['category']) => void; +} + +const useTypeStore = create()((set) => ({ + type: null, + category: null, + setSelectedType: (button) => set({ type: button }), + setSelectedCategory: (button) => set({ category: button }), +})); + +export default useTypeStore; diff --git a/src/store/type-store.ts b/src/store/type-store.ts deleted file mode 100644 index dd8a6f6..0000000 --- a/src/store/type-store.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { create } from 'zustand'; - -interface TypeState { - type: null | 'SUSI' | 'PYEONIP' | 'JEONGSI'; - setSelectedType: (button: TypeState['type']) => void; -} - -const useTypeStore = create()((set) => ({ - type: null, - setSelectedType: (button) => set({ type: button }), -})); - -export default useTypeStore; diff --git a/src/ui/components/molecule/menu-drawer/menu-drawer.tsx b/src/ui/components/molecule/menu-drawer/menu-drawer.tsx index cf9bd64..f3f81ac 100644 --- a/src/ui/components/molecule/menu-drawer/menu-drawer.tsx +++ b/src/ui/components/molecule/menu-drawer/menu-drawer.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react'; import { Drawer } from 'antd'; import PresetButton from '../../atom/preset/preset-button'; -import useTypeStore from '../../../../store/type-store'; +import useTypeStore from '../../../../store/type-category-store'; import { ReactComponent as XIcon } from '../../../../assets/X.svg'; import IconButton from '../../atom/icon/icon-button'; diff --git a/src/ui/pages/maru-egg.tsx b/src/ui/pages/maru-egg.tsx index e5f317b..a6bcb6a 100644 --- a/src/ui/pages/maru-egg.tsx +++ b/src/ui/pages/maru-egg.tsx @@ -1,21 +1,30 @@ import React from 'react'; import Header from '../components/molecule/header/header'; -import useTypeStore from '../../store/type-store'; +import useTypeStore from '../../store/type-category-store'; import ChatCard from '../components/atom/chat-card/chat-card'; import ChatForm from '../components/molecule/chat-form/chat-form'; import useChatStore from '../../store/chat-store'; import PresetButton from '../components/atom/preset/preset-button'; const MaruEgg: React.FC = () => { - const { setSelectedType, type } = useTypeStore(); + const { setSelectedType, type, setSelectedCategory, category } = useTypeStore(); const { messages } = useChatStore(); - const [selectedButton, setSelectedButton] = React.useState<'SUSI' | 'PYEONIP' | 'JEONGSI' | null>(null); + const [selectedTypeButton, setSelectedTypeButton] = React.useState<'SUSI' | 'PYEONIP' | 'JEONGSI' | null>(null); + const [selectedCategoryButton, setSelectedCategoryButton] = React.useState< + null | 'ADMISSION_GUIDELINE' | 'PASSING_RESULT' | 'PAST_QUESTIONS' | 'INTERVIEW_PRACTICAL_TEST' + >(null); - const handleButtonClick = (selectedType: 'SUSI' | 'PYEONIP' | 'JEONGSI') => { + const handleTypeButtonClick = (selectedType: 'SUSI' | 'PYEONIP' | 'JEONGSI') => { setSelectedType(selectedType); - setSelectedButton(selectedType); + setSelectedTypeButton(selectedType); }; + const handleCategoryButtonClick = ( + selectedCategory: 'ADMISSION_GUIDELINE' | 'PASSING_RESULT' | 'PAST_QUESTIONS' | 'INTERVIEW_PRACTICAL_TEST', + ) => { + setSelectedCategory(selectedCategory); + setSelectedCategoryButton(selectedCategory); + }; return (
@@ -28,13 +37,19 @@ const MaruEgg: React.FC = () => { role="system" />
- handleButtonClick('SUSI')} isSelected={selectedButton === 'SUSI'}> + handleTypeButtonClick('SUSI')} isSelected={selectedTypeButton === 'SUSI'}> 수시 - handleButtonClick('PYEONIP')} isSelected={selectedButton === 'PYEONIP'}> + handleTypeButtonClick('PYEONIP')} + isSelected={selectedTypeButton === 'PYEONIP'} + > 편입 - handleButtonClick('JEONGSI')} isSelected={selectedButton === 'JEONGSI'}> + handleTypeButtonClick('JEONGSI')} + isSelected={selectedTypeButton === 'JEONGSI'} + > 정시
@@ -42,6 +57,52 @@ const MaruEgg: React.FC = () => { )} {type !== null && ( + <> + +
+ handleCategoryButtonClick('ADMISSION_GUIDELINE')} + isSelected={selectedCategoryButton === 'ADMISSION_GUIDELINE'} + > + 모집관련내용 + + handleCategoryButtonClick('PASSING_RESULT')} + isSelected={selectedCategoryButton === 'PASSING_RESULT'} + > + 전년도 입시결과 + + handleCategoryButtonClick('PAST_QUESTIONS')} + isSelected={selectedCategoryButton === 'PAST_QUESTIONS'} + > + 면접등 기출문제 + + handleCategoryButtonClick('INTERVIEW_PRACTICAL_TEST')} + isSelected={selectedCategoryButton === 'INTERVIEW_PRACTICAL_TEST'} + > + 실기관련 + +
+ + )} + + {category !== null && ( + + )} + {type !== null && category !== null && ( { return ; })}
- {type !== null && ( + {type !== null && category !== null && (
- +
)}