[bugfix] 타입 수정 및 디바운스 제거, 검색 버튼 클릭/엔터 입력시에만 검색 작동하는 구조로 변경 + 잊고있던 쿼리키 라이브러리 도입

src/api/auth/auth.ts

@@ -11,7 +11,7 @@ import type {
     TSignupValues,
     TSocialLoginResponse,
     TSocialLoginValues,
-} from '@/types/auth';
+} from '@/types/auth/auth';
 
 import { axiosInstance } from '../axiosInstance';
 

src/api/course/course.ts

@@ -1,4 +1,4 @@
-import type { TSearchRegionResponse, TSearchRegionValues } from '@/types/dateCourse';
+import type { TSearchRegionResponse, TSearchRegionValues } from '@/types/dateCourse/dateCourse';
 
 import { axiosInstance } from '../axiosInstance';
 

src/components/dateCourse/dateCourseOptionButton.tsx

@@ -1,4 +1,4 @@
-import type { TDateCourseOptionButtonProps } from '@/types/dateCourse';
+import type { TDateCourseOptionButtonProps } from '@/types/dateCourse/dateCourse';
 
 export default function DateCourseOptionButton({ option, isSelected, onClick }: TDateCourseOptionButtonProps) {
     return (

src/components/dateCourse/dateCourseSearchFilterOption.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react';
 
-import type { TDateCourseSearchFilterOption } from '@/types/dateCourse';
+import type { TDateCourseSearchFilterOption, TRegion } from '@/types/dateCourse/dateCourse';
 import DATE_KEYWORD from '@/constants/dateKeywords';
 
 import { useSearchRegion } from '@/hooks/course/useSearchRegion';
-import useDebounce from '@/hooks/useDebounce';
 
 import DateCourseOptionButton from './dateCourseOptionButton';
 import DateKeyword from './dateKeyword';
@@ -24,9 +23,6 @@ export default function DateCourseSearchFilterOption({ options, type, value, onC
     const [date, setDate] = useState(defaultDate);
     const [time, setTime] = useState(defaultTime);
     const [inputValue, setInputValue] = useState('');
-    const [showSearchResults, setShowSearchResults] = useState(false);
-
-    const debouncedInputValue = useDebounce(inputValue, 3000);
 
     useEffect(() => {
         onChange(`${date} ${time}`);
@@ -50,11 +46,12 @@ export default function DateCourseSearchFilterOption({ options, type, value, onC
         setInputValue(e.target.value);
     };
 
-    const { data: regionList } = useSearchRegion({ keyword: debouncedInputValue });
+    const { data: regionList, refetch } = useSearchRegion({ keyword: inputValue }, { enabled: false });
 
     const handleSearch = () => {
-        if (!inputValue.trim()) return;
-        setShowSearchResults(true);
+        const keyword = inputValue.trim();
+        if (!keyword) return;
+        refetch();
     };
 
     return (
@@ -96,22 +93,21 @@ export default function DateCourseSearchFilterOption({ options, type, value, onC
                                 onChange={handleInputChange}
                             />
                         </div>
-                        {showSearchResults && regionList && regionList.result.regions.length > 0 && (
+                        {regionList && regionList.result.regions.length > 0 && (
                             <ul className="mt-2 w-full border border-primary-500 rounding-16 shadow-default bg-white max-h-[200px] overflow-auto">
-                                {regionList.result.regions.map((region: string, idx: number) => (
+                                {regionList.result.regions.map((region: TRegion, idx: number) => (
                                     <li
                                         key={idx}
-                                        className="p-2 cursor-pointer hover:bg-gray-100 text-sm text-default-gray-800"
+                                        className="px-4 py-2 cursor-pointer hover:bg-gray-100 text-sm text-default-gray-800"
                                         onClick={() => {
                                             const current = Array.isArray(value) ? value : [];
-                                            if (!current.includes(region)) {
-                                                onChange([...current, region]);
+                                            if (!current.includes(region.name)) {
+                                                onChange([...current, region.name]);
                                             }
                                             setInputValue('');
-                                            setShowSearchResults(false);
                                         }}
                                     >
-                                        {region}
+                                        {region.name}
                                     </li>
                                 ))}
                             </ul>

src/components/dateCourse/dateKeyword.tsx

@@ -1,4 +1,4 @@
-import type { TDateKeyword } from '@/types/dateCourse';
+import type { TDateKeyword } from '@/types/dateCourse/dateCourse';
 
 import KeywordButton from './keywordButton';
 

src/components/dateCourse/info.tsx

@@ -1,4 +1,4 @@
-import type { TInfo } from '@/types/dateCourse';
+import type { TInfo } from '@/types/dateCourse/dateCourse';
 
 import InfoElement from './infoElement';
 

src/components/dateCourse/keywordButton.tsx

@@ -1,4 +1,4 @@
-import type { TKeywordButtonProps } from '@/types/dateCourse';
+import type { TKeywordButtonProps } from '@/types/dateCourse/dateCourse';
 
 export default function KeywordButton({ tag, selected = false, onClick, isButton }: TKeywordButtonProps) {
     return (

src/components/dateCourse/timeline.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import type { TTimeline } from '@/types/dateCourse';
+import type { TTimeline } from '@/types/dateCourse/dateCourse';
 
 import KeywordButton from './keywordButton';
 

src/hooks/auth/useAuth.ts

@@ -1,12 +1,8 @@
-// import { useNavigate } from 'react-router-dom';
-
 import { useCoreMutation } from '../customQuery';
 
 import { checkEmailVerifications, defaultLogin, defaultSignup, emailVerifications, findPassword, logout, socialLogin } from '@/api/auth/auth';
 
 export function useAuth() {
-    // const navigate = useNavigate();
-
     const useDefaultLogin = useCoreMutation(defaultLogin);
     const useDefaultSignup = useCoreMutation(defaultSignup);
     const useLogout = useCoreMutation(logout);

src/hooks/course/useSearchRegion.tsx

@@ -1,9 +1,11 @@
 import { useCoreQuery } from '../customQuery';
 
 import { searchRegion } from '@/api/course/course';
+import { regionKeys } from '@/queryKey/queryKey';
 
-export function useSearchRegion({ keyword }: { keyword: string }) {
-    return useCoreQuery(['searchRegion', keyword], () => searchRegion({ keyword }), {
-        enabled: !!keyword,
+export function useSearchRegion({ keyword }: { keyword: string }, options?: { enabled?: boolean }) {
+    return useCoreQuery(regionKeys.search(keyword).queryKey, () => searchRegion({ keyword }), {
+        enabled: options?.enabled ?? true,
+        staleTime: 1000 * 60 * 5,
     });
 }

src/pages/RedirectPage.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import type { TSocialLoginPlatform } from '@/types/auth';
+import type { TSocialLoginPlatform } from '@/types/auth/auth';
 
 import { useAuth } from '@/hooks/auth/useAuth';
 

src/pages/auth/FindPw.tsx

@@ -4,7 +4,7 @@ import { useForm, useWatch } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { zodResolver } from '@hookform/resolvers/zod';
 
-import type { TFormValues } from '@/types/auth';
+import type { TFormValues } from '@/types/auth/auth';
 
 import { findingSchema } from '@/utils/validation';
 

src/pages/auth/JoinPage.tsx

@@ -4,7 +4,7 @@ import { useForm, useWatch } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { zodResolver } from '@hookform/resolvers/zod';
 
-import type { TFormValues } from '@/types/auth';
+import type { TFormValues } from '@/types/auth/auth';
 
 import { signupSchema } from '@/utils/validation';
 

src/pages/auth/LoginPage.tsx

@@ -4,7 +4,7 @@ import { useForm, useWatch } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { zodResolver } from '@hookform/resolvers/zod';
 
-import type { TLoginFormValues } from '@/types/auth';
+import type { TLoginFormValues } from '@/types/auth/auth';
 
 import { loginSchema } from '@/utils/validation';
 

src/pages/auth/RedirectPage.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import type { TSocialLoginPlatform } from '@/types/auth';
+import type { TSocialLoginPlatform } from '@/types/auth/auth';
 
 import { useAuth } from '@/hooks/auth/useAuth';
 

src/pages/auth/UserSetting.tsx

@@ -4,8 +4,8 @@ import { Controller, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { zodResolver } from '@hookform/resolvers/zod';
 
-import type { TUserSettingFormValues } from '@/types/auth';
-import { Gender } from '@/types/auth';
+import type { TUserSettingFormValues } from '@/types/auth/auth';
+import { Gender } from '@/types/auth/auth';
 
 import formatDateInput from '@/utils/formatDateInput';
 import formatInputNumber from '@/utils/formatPhoneNumber';

src/pages/dateCourse/MakeCourseStep.tsx

@@ -2,7 +2,7 @@
 import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import type { IQuestion } from '@/types/dateCourse';
+import type { IQuestion } from '@/types/dateCourse/dateCourse';
 import { DateCourseQuestion } from '@/constants/dateCourseQuestion';
 
 import {

src/queryKey/queryKey.ts

@@ -0,0 +1,5 @@
+import { createQueryKeys } from '@lukemorales/query-key-factory';
+
+export const regionKeys = createQueryKeys('region', {
+    search: (keyword: string) => [keyword],
+});

src/types/auth.ts → src/types/auth/auth.ts

@@ -1,4 +1,4 @@
-import type { TCommonResponse } from './common/common';
+import type { TCommonResponse } from '@/types/common/common';
 
 export enum Gender {
     MALE = 'MALE',

src/types/dateCourse.ts → src/types/dateCourse/dateCourse.ts

@@ -1,6 +1,6 @@
 import type { Dispatch, SetStateAction } from 'react';
 
-import type { TCommonResponse } from './common/common';
+import type { TCommonResponse } from '@/types/common/common';
 
 export type TTimeline = {
     end?: boolean;
@@ -70,7 +70,24 @@ export type TSearchRegionValues = {
 };
 
 export type TSearchRegionResponse = TCommonResponse<{
-    regions: string[];
+    regions: TRegion[];
     keyword: string;
     resultCount: number;
 }>;
+
+export type TRegion = {
+    regionId: number;
+    name: string;
+    latitude: number;
+    longitude: number;
+    gridX: number;
+    gridY: number;
+    regionCode: {
+        landRegCode: string;
+        tempRegCode: string;
+        regionCodeId: number;
+        name: string;
+    };
+    createdAt: string;
+    updatedAt: string;
+};

src/utils/validation.tsx

@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-import { Gender } from '@/types/auth';
+import { Gender } from '@/types/auth/auth';
 
 const nicknamePattern = /^[a-zA-Z]+$/;
 const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

yarn.lock

@@ -600,7 +600,7 @@
 
 "@lukemorales/query-key-factory@^1.3.4":
   version "1.3.4"
-  resolved "https://registry.npmjs.org/@lukemorales/query-key-factory/-/query-key-factory-1.3.4.tgz"
+  resolved "https://registry.yarnpkg.com/@lukemorales/query-key-factory/-/query-key-factory-1.3.4.tgz#d14001dbd781b024df93ca73bd785db590924486"
   integrity sha512-A3frRDdkmaNNQi6mxIshsDk4chRXWoXa05US8fBo4kci/H+lVmujS6QrwQLLGIkNIRFGjMqp2uKjC4XsLdydRw==
 
 "@napi-rs/wasm-runtime@^0.2.11":