도시 검색 기능 특수문자 작성시 버그 수정 + 검색어와 매칭되는 제안도시가 하나일 시 엔터로 적용가능

frontend/src/components/common/CitySearchBar/CitySearchBar.tsx

@@ -30,7 +30,7 @@ const CitySearchBar = ({ initialCities, updateCityInfo, required = false }: City
   const { cityTags, addCityTag, deleteCityTag } = useCityTags(initialCities ?? []);
   const { isOpen: isSuggestionOpen, open: openSuggestion, close: closeSuggestion } = useOverlay();
   const inputRef = useRef<HTMLInputElement>(null);
-  const debouncedQueryWord = useDebounce(queryWord, 300);
+  const debouncedQueryWord = useDebounce(queryWord, 150);
 
   useEffect(() => {
     updateCityInfo(cityTags);
@@ -44,6 +44,11 @@ const CitySearchBar = ({ initialCities, updateCityInfo, required = false }: City
   };
 
   const handleSuggestionClick = (selectedCity: CityData) => {
+    if (!selectedCity) {
+      closeSuggestion();
+      return;
+    }
+
     addCityTag(selectedCity);
     resetAll();
   };
@@ -64,7 +69,7 @@ const CitySearchBar = ({ initialCities, updateCityInfo, required = false }: City
   };
 
   const handleInputFocus = () => {
-    if (queryWord) {
+    if (debouncedQueryWord) {
       openSuggestion();
     }
   };

frontend/src/components/common/CitySuggestion/CitySuggestion.tsx

@@ -29,34 +29,40 @@ const CitySuggestion = ({ queryWord, onItemSelect }: SuggestionProps) => {
   const { scrollToFocusedItem } = useAutoScroll(listRef, itemRef);
 
   useEffect(() => {
+    if (!queryWord) return;
+
     setNewSuggestions(queryWord);
   }, [queryWord]);
 
-  const handleItemClick = (city: CityData) => () => {
-    onItemSelect(city);
-  };
-
   useEffect(() => {
     scrollToFocusedItem();
   }, [focusedSuggestionIndex]);
 
+  const handleItemClick = (city: CityData) => () => {
+    onItemSelect(city);
+  };
+
   return (
-    <SuggestionList css={containerStyling} ref={listRef}>
-      {suggestions.length ? (
-        suggestions.map((city, index) => (
-          <SuggestionsItem
-            key={city.id}
-            onClick={handleItemClick(city)}
-            css={getItemStyling(isFocused(index))}
-            ref={isFocused(index) ? itemRef : null}
-          >
-            {city.name}
-          </SuggestionsItem>
-        ))
-      ) : (
-        <Text css={emptyTextStyling}>검색어에 해당하는 도시가 없습니다.</Text>
+    <>
+      {queryWord && (
+        <SuggestionList css={containerStyling} ref={listRef}>
+          {suggestions.length ? (
+            suggestions.map((city, index) => (
+              <SuggestionsItem
+                key={city.id}
+                onClick={handleItemClick(city)}
+                css={getItemStyling(isFocused(index))}
+                ref={isFocused(index) ? itemRef : null}
+              >
+                {city.name}
+              </SuggestionsItem>
+            ))
+          ) : (
+            <Text css={emptyTextStyling}>검색어에 해당하는 도시가 없습니다.</Text>
+          )}
+        </SuggestionList>
       )}
-    </SuggestionList>
+    </>
   );
 };
 

frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.style.ts

@@ -11,6 +11,10 @@ export const formStyling = css({
   },
 });
 
+export const dateInputSupportingText = css({
+  wordBreak: 'keep-all',
+});
+
 export const titleStyling = css({
   flexDirection: 'column',
   width: '400px',

frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.tsx

@@ -15,6 +15,7 @@ import { useTripEditForm } from '@hooks/trip/useTripEditForm';
 import CitySearchBar from '@components/common/CitySearchBar/CitySearchBar';
 import DateInput from '@components/common/DateInput/DateInput';
 import {
+  dateInputSupportingText,
   formStyling,
   textareaStyling,
   titleStyling,
@@ -59,7 +60,7 @@ const TripInfoEditModal = ({ isOpen, onClose, ...information }: TripInfoEditModa
           />
           <Flex styles={{ width: '400px', align: 'center', gap: '10px' }}>
             <WarningIcon />
-            <SupportingText>
+            <SupportingText css={dateInputSupportingText}>
               방문 기간을 단축하면 마지막 날짜부터 작성한 기록들이 삭제됩니다.
             </SupportingText>
           </Flex>

frontend/src/hooks/common/useCitySuggestion.ts

@@ -3,15 +3,22 @@ import type { CityData } from '@type/city';
 import { useEffect, useState } from 'react';
 
 import { makeRegexByCho } from '@utils/cityFilter';
+import { stringToOnlyLetter } from '@utils/formatter';
 
 export const useCitySuggestion = ({ onItemSelect }: { onItemSelect: (item: CityData) => void }) => {
   const queryClient = useQueryClient();
   const cityData = queryClient.getQueryData<CityData[]>(['city']);
   const [suggestions, setSuggestions] = useState<CityData[]>([]);
   const [focusedSuggestionIndex, setFocusedSuggestionIndex] = useState(-1);
 
+  useEffect(() => {
+    setFocusedSuggestionIndex(-1);
+    focusOnlySuggestion();
+  }, [suggestions]);
+
   const setNewSuggestions = (word: string) => {
-    const regex = makeRegexByCho(word);
+    const query = stringToOnlyLetter(word);
+    const regex = makeRegexByCho(query);
 
     if (cityData) {
       const filteredSuggestions = cityData.filter(({ name }) => regex.test(name));
@@ -31,6 +38,12 @@ export const useCitySuggestion = ({ onItemSelect }: { onItemSelect: (item: CityD
     );
   };
 
+  const focusOnlySuggestion = () => {
+    if (suggestions.length === 1) {
+      setFocusedSuggestionIndex(0);
+    }
+  };
+
   const isFocused = (index: number) => {
     return index === focusedSuggestionIndex;
   };
@@ -49,6 +62,11 @@ export const useCitySuggestion = ({ onItemSelect }: { onItemSelect: (item: CityD
         onItemSelect(suggestions[focusedSuggestionIndex]);
       }
     }
+
+    if (e.key === 'Escape') {
+      //이거 onClose 프롭스로 받기 싫어서 꼼수로 일단 구현함....
+      onItemSelect(suggestions[-1]);
+    }
   };
 
   useEffect(() => {

frontend/src/utils/formatter.ts

@@ -19,3 +19,15 @@ export const dateRangeToString = (dateRange: DateRangeData) => {
 
   return `${formatDate(start)} - ${formatDate(end)}`;
 };
+
+export const stringToOnlyLetter = (string: string) => {
+  const koreanCharacterRegex = /^[A-Za-z가-힣ㄱ-ㅎ]+$/g;
+
+  const matches = string.match(koreanCharacterRegex);
+
+  if (matches) {
+    return matches[0];
+  }
+
+  return '';
+};