✨ feat: 영어 검색시 한글로 변환하는 로직 추가

FE/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@heroicons/react": "^2.1.5",
     "@tanstack/react-query": "^4.36.1",
+    "hangul-js": "^0.2.6",
     "lottie-react": "^2.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

FE/src/components/Search/KoreanMapping.ts

@@ -0,0 +1,50 @@
+type CharacterMap = {
+  [key: string]: string;
+};
+
+export class SimpleKoreanConverter {
+  private charMap: CharacterMap;
+
+  constructor() {
+    this.charMap = {
+      r: 'ㄱ',
+      R: 'ㄲ',
+      s: 'ㄴ',
+      e: 'ㄷ',
+      E: 'ㄸ',
+      f: 'ㄹ',
+      a: 'ㅁ',
+      q: 'ㅂ',
+      Q: 'ㅃ',
+      t: 'ㅅ',
+      T: 'ㅆ',
+      d: 'ㅇ',
+      w: 'ㅈ',
+      W: 'ㅉ',
+      c: 'ㅊ',
+      z: 'ㅋ',
+      x: 'ㅌ',
+      v: 'ㅍ',
+      g: 'ㅎ',
+
+      k: 'ㅏ',
+      o: 'ㅐ',
+      i: 'ㅑ',
+      O: 'ㅒ',
+      j: 'ㅓ',
+      p: 'ㅔ',
+      u: 'ㅕ',
+      P: 'ㅖ',
+      h: 'ㅗ',
+      y: 'ㅛ',
+      n: 'ㅜ',
+      b: 'ㅠ',
+      m: 'ㅡ',
+      l: 'ㅣ',
+    };
+  }
+
+  public convert(input: string): string[] {
+    return Array.from(input).map((char) => this.charMap[char] || char);
+  }
+}

FE/src/components/Search/index.tsx

@@ -12,25 +12,57 @@ import searchAnimation from 'assets/searchAnimation.json';
 import { useSearchHistory } from 'hooks/useSearchHistoryHook.ts';
 import { getSearchResults } from 'service/search.ts';
 import { formatNoSpecialChar } from 'utils/format.ts';
+import { SimpleKoreanConverter } from './KoreanMapping.ts';
+import * as Hangul from 'hangul-js';
 
 export default function SearchModal() {
   const { isOpen, toggleSearchModal } = useSearchModalStore();
   const { searchInput, setSearchInput } = useSearchInputStore();
   const { searchHistory, addSearchHistory, deleteSearchHistory } =
     useSearchHistory();
   const shouldSearch = searchInput.trim().length >= 2;
+  const converter = new SimpleKoreanConverter();
 
   const { debounceValue, isDebouncing } = useDebounce(
     shouldSearch ? searchInput : '',
     500,
   );
-  const { data, isLoading, isFetching } = useQuery({
+
+  const {
+    data: originalData,
+    isLoading: isOriginalLoading,
+    isFetching: isOriginalFetching,
+  } = useQuery({
     queryKey: ['search', debounceValue],
     queryFn: () => getSearchResults(formatNoSpecialChar(debounceValue)),
     enabled: !!debounceValue && !isDebouncing,
     staleTime: 1000,
     cacheTime: 1000 * 60,
   });
+  const convertedSearch = debounceValue
+    ? Hangul.assemble(converter.convert(debounceValue))
+    : '';
+
+  const {
+    data: convertedData,
+    isLoading: isConvertedLoading,
+    isFetching: isConvertedFetching,
+  } = useQuery({
+    queryKey: ['search', convertedSearch],
+    queryFn: () => getSearchResults(formatNoSpecialChar(convertedSearch)),
+    enabled:
+      !isOriginalLoading &&
+      !isOriginalFetching &&
+      !!convertedSearch &&
+      originalData !== undefined &&
+      originalData.length === 0,
+    staleTime: 1000,
+    cacheTime: 1000 * 60,
+  });
+
+  const data = originalData?.length ? originalData : convertedData || [];
+  const isLoading = isOriginalLoading || isConvertedLoading;
+  const isFetching = isOriginalFetching || isConvertedFetching;
 
   useEffect(() => {
     if (data && data.length > 0 && debounceValue && !isLoading) {
@@ -56,7 +88,6 @@ export default function SearchModal() {
         </div>
 
         <div className={'h-full px-3 pb-3 pt-[68px]'}>
-          {' '}
           {!searchInput ? (
             <SearchHistoryList
               searchHistory={searchHistory}