fix: autoSearch data type undefined

MARU-EGG · Aug 19, 2024 · 7dc047a · 7dc047a
1 parent 4fc41e5
commit 7dc047a
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 15 deletions.
diff --git a/src/hooks/use-auto-complete.hooks.ts b/src/hooks/use-auto-complete.hooks.ts
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import useDebouce from './use-debounce.hooks';
 import { searchAutoComplete } from '../api/search-auto-complete';
+import useTypeStore from '../store/type-category-store';
 
 interface UseAutoCompleteProps {
   content: string;
@@ -15,6 +16,7 @@ export interface AutoCompleteResult {
 export const useAutoComplete = ({ content, delay = 300 }: UseAutoCompleteProps) => {
   const [results, setResults] = useState<AutoCompleteResult[]>([]);
   const [error, setError] = useState<string | null>(null);
+  const { type, category } = useTypeStore();
 
   const debouncedContent = useDebouce(content, delay);
 
@@ -24,7 +26,7 @@ export const useAutoComplete = ({ content, delay = 300 }: UseAutoCompleteProps)
       setError(null);
 
       try {
-        const response = await searchAutoComplete(debouncedContent);
+        const response = await searchAutoComplete(debouncedContent, type, category);
         setResults(response.data);
       } catch (err) {
         setError('자동완성 api 호출 실패');

diff --git a/src/store/type-category-store.ts b/src/store/type-category-store.ts
@@ -1,15 +1,15 @@
 import { create } from 'zustand';
 
 interface TypeCategoryState {
-  type: null | 'SUSI' | 'PYEONIP' | 'JEONGSI';
-  category: null | 'ADMISSION_GUIDELINE' | 'PASSING_RESULT' | 'PAST_QUESTIONS' | 'INTERVIEW_PRACTICAL_TEST';
+  type: undefined | 'SUSI' | 'PYEONIP' | 'JEONGSI';
+  category: undefined | 'ADMISSION_GUIDELINE' | 'PASSING_RESULT' | 'PAST_QUESTIONS' | 'INTERVIEW_PRACTICAL_TEST';
   setSelectedType: (button: TypeCategoryState['type']) => void;
   setSelectedCategory: (button: TypeCategoryState['category']) => void;
 }
 
 const useTypeStore = create<TypeCategoryState>()((set) => ({
-  type: null,
-  category: null,
+  type: undefined,
+  category: undefined,
   setSelectedType: (button) => set({ type: button }),
   setSelectedCategory: (button) => set({ category: button }),
 }));

diff --git a/src/ui/components/molecule/header/header.tsx b/src/ui/components/molecule/header/header.tsx
@@ -6,7 +6,7 @@ import IconButton from '../../atom/icon/icon-button';
 import MenuDrawer from '../menu-drawer/menu-drawer';
 
 interface HeaderProps {
-  type: null | 'SUSI' | 'PYEONIP' | 'JEONGSI';
+  type: undefined | 'SUSI' | 'PYEONIP' | 'JEONGSI';
 }
 
 const Header = ({ type }: HeaderProps) => {

diff --git a/src/ui/components/molecule/menu-drawer/menu-drawer.tsx b/src/ui/components/molecule/menu-drawer/menu-drawer.tsx
@@ -11,7 +11,7 @@ interface MenuDrawerProps {
 }
 
 const MenuDrawer = ({ open, onClose }: MenuDrawerProps) => {
-  const [selectedButton, setSelectedButton] = React.useState<'SUSI' | 'PYEONIP' | 'JEONGSI' | null>(null);
+  const [selectedButton, setSelectedButton] = React.useState<'SUSI' | 'PYEONIP' | 'JEONGSI' | undefined>(undefined);
   const { type } = useTypeStore();
 
   useEffect(() => {

diff --git a/src/ui/pages/maru-egg.tsx b/src/ui/pages/maru-egg.tsx
@@ -9,10 +9,12 @@ import PresetButton from '../components/atom/preset/preset-button';
 const MaruEgg: React.FC = () => {
   const { setSelectedType, type, setSelectedCategory, category } = useTypeStore();
   const { messages } = useChatStore();
-  const [selectedTypeButton, setSelectedTypeButton] = React.useState<'SUSI' | 'PYEONIP' | 'JEONGSI' | null>(null);
+  const [selectedTypeButton, setSelectedTypeButton] = React.useState<'SUSI' | 'PYEONIP' | 'JEONGSI' | undefined>(
+    undefined,
+  );
   const [selectedCategoryButton, setSelectedCategoryButton] = React.useState<
-    null | 'ADMISSION_GUIDELINE' | 'PASSING_RESULT' | 'PAST_QUESTIONS' | 'INTERVIEW_PRACTICAL_TEST'
-  >(null);
+    undefined | 'ADMISSION_GUIDELINE' | 'PASSING_RESULT' | 'PAST_QUESTIONS' | 'INTERVIEW_PRACTICAL_TEST'
+  >(undefined);
 
   const handleTypeButtonClick = (selectedType: 'SUSI' | 'PYEONIP' | 'JEONGSI') => {
     setSelectedType(selectedType);
@@ -53,10 +55,10 @@ const MaruEgg: React.FC = () => {
               정시
             </PresetButton>
           </div>
-          {type !== null && (
+          {type !== undefined && (
             <ChatCard role="user" content={type === 'SUSI' ? '수시' : type === 'JEONGSI' ? '정시' : '편입'} />
           )}
-          {type !== null && (
+          {type !== undefined && (
             <>
               <ChatCard content={`알고싶은 내용을 선택해주세요`} role="system" />
               <div className="flex flex-wrap space-x-2 space-y-1">
@@ -78,11 +80,17 @@ const MaruEgg: React.FC = () => {
                 >
                   면접등 기출문제
                 </PresetButton>
+                <PresetButton
+                  onClick={() => handleCategoryButtonClick('INTERVIEW_PRACTICAL_TEST')}
+                  isSelected={selectedCategoryButton === 'INTERVIEW_PRACTICAL_TEST'}
+                >
+                  실기관련
+                </PresetButton>
               </div>
             </>
           )}
 
-          {category !== null && (
+          {category !== undefined && (
             <ChatCard
               role="user"
               content={
@@ -96,7 +104,7 @@ const MaruEgg: React.FC = () => {
               }
             />
           )}
-          {type !== null && category !== null && (
+          {type !== undefined && category !== undefined && (
             <ChatCard
               role="system"
               content={`안녕하세요 입학처 챗봇 MARU-EGG입니다!  
@@ -108,7 +116,7 @@ const MaruEgg: React.FC = () => {
             return <ChatCard key={index} content={msg.content} role={msg.role} />;
           })}
         </div>
-        {type !== null && category !== null && (
+        {type !== undefined && category !== undefined && (
           <div className="absolute bottom-0 w-full rounded-bl-2xl rounded-br-2xl bg-white px-3 py-3">
             <ChatForm type={type} category={category} />
           </div>