From 8437bc49041171093dc657d2259e3bc1b92caefb Mon Sep 17 00:00:00 2001 From: Dahye <06robin11@gmail.com> Date: Wed, 26 Jul 2023 14:41:07 +0900 Subject: [PATCH 1/8] =?UTF-8?q?feat:=ED=95=9C=EA=B5=AD=EC=96=B4=20?= =?UTF-8?q?=EC=95=84=EB=8B=8C=20=EA=B8=80=EC=9E=90=20=EC=9E=85=EB=A0=A5?= =?UTF-8?q?=EC=8B=9C=20=EC=A0=9C=EC=99=B8=ED=95=98=EA=B3=A0=20=EA=B2=80?= =?UTF-8?q?=EC=83=89=ED=95=84=ED=84=B0=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/common/useCitySuggestion.ts | 4 +++- frontend/src/utils/formatter.ts | 12 ++++++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/frontend/src/hooks/common/useCitySuggestion.ts b/frontend/src/hooks/common/useCitySuggestion.ts index e65dea27c..c6d9282b8 100644 --- a/frontend/src/hooks/common/useCitySuggestion.ts +++ b/frontend/src/hooks/common/useCitySuggestion.ts @@ -3,6 +3,7 @@ import type { CityData } from '@type/city'; import { useEffect, useState } from 'react'; import { makeRegexByCho } from '@utils/cityFilter'; +import { stringToKorean } from '@utils/formatter'; export const useCitySuggestion = ({ onItemSelect }: { onItemSelect: (item: CityData) => void }) => { const queryClient = useQueryClient(); @@ -11,7 +12,8 @@ export const useCitySuggestion = ({ onItemSelect }: { onItemSelect: (item: CityD const [focusedSuggestionIndex, setFocusedSuggestionIndex] = useState(-1); const setNewSuggestions = (word: string) => { - const regex = makeRegexByCho(word); + const query = stringToKorean(word); + const regex = makeRegexByCho(query); if (cityData) { const filteredSuggestions = cityData.filter(({ name }) => regex.test(name)); diff --git a/frontend/src/utils/formatter.ts b/frontend/src/utils/formatter.ts index c83e74247..842407e9d 100644 --- a/frontend/src/utils/formatter.ts +++ b/frontend/src/utils/formatter.ts @@ -19,3 +19,15 @@ export const dateRangeToString = (dateRange: DateRangeData) => { return `${formatDate(start)} - ${formatDate(end)}`; }; + +export const stringToKorean = (string: string) => { + const koreanCharacterRegex = /[가-힣ㄱ-ㅎ]+/g; + + const matches = string.match(koreanCharacterRegex); + + if (matches) { + return matches[0]; + } + + return ''; +}; From 5b7d418590cab9a38dfcb22f2d2cf22ee10f8f81 Mon Sep 17 00:00:00 2001 From: Dahye <06robin11@gmail.com> Date: Wed, 26 Jul 2023 15:43:39 +0900 Subject: [PATCH 2/8] =?UTF-8?q?refactor:=20=EA=B2=80=EC=83=89=EC=96=B4=20?= =?UTF-8?q?=EC=9E=85=EB=A0=A5=EC=8B=9C=20=EC=A0=84=EC=B2=B4=EB=8F=84?= =?UTF-8?q?=EC=8B=9C=EB=AA=A9=EB=A1=9D=20=EA=B9=9C=EB=B9=A1=EC=9D=B4?= =?UTF-8?q?=EB=8A=94=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/CitySearchBar/CitySearchBar.tsx | 9 +++-- .../common/CitySuggestion/CitySuggestion.tsx | 36 +++++++++---------- 2 files changed, 25 insertions(+), 20 deletions(-) diff --git a/frontend/src/components/common/CitySearchBar/CitySearchBar.tsx b/frontend/src/components/common/CitySearchBar/CitySearchBar.tsx index ab7b91b29..917eed3c3 100644 --- a/frontend/src/components/common/CitySearchBar/CitySearchBar.tsx +++ b/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(null); - const debouncedQueryWord = useDebounce(queryWord, 300); + const debouncedQueryWord = useDebounce(queryWord, 150); useEffect(() => { updateCityInfo(cityTags); @@ -40,6 +40,11 @@ const CitySearchBar = ({ initialCities, updateCityInfo, required = false }: City const word = event.currentTarget.value; setQueryWord(word); + if (!word) { + closeSuggestion(); + return; + } + openSuggestion(); }; @@ -64,7 +69,7 @@ const CitySearchBar = ({ initialCities, updateCityInfo, required = false }: City }; const handleInputFocus = () => { - if (queryWord) { + if (debouncedQueryWord) { openSuggestion(); } }; diff --git a/frontend/src/components/common/CitySuggestion/CitySuggestion.tsx b/frontend/src/components/common/CitySuggestion/CitySuggestion.tsx index 11a8caa2d..5a34de272 100644 --- a/frontend/src/components/common/CitySuggestion/CitySuggestion.tsx +++ b/frontend/src/components/common/CitySuggestion/CitySuggestion.tsx @@ -29,33 +29,33 @@ 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 ( - {suggestions.length ? ( - suggestions.map((city, index) => ( - - {city.name} - - )) - ) : ( - 검색어에 해당하는 도시가 없습니다. - )} + {suggestions.length + ? suggestions.map((city, index) => ( + + {city.name} + + )) + : !!queryWord && 검색어에 해당하는 도시가 없습니다.} ); }; From 29d05b609a36cb4a5946872781777114bad554be Mon Sep 17 00:00:00 2001 From: Dahye <06robin11@gmail.com> Date: Wed, 26 Jul 2023 16:59:47 +0900 Subject: [PATCH 3/8] =?UTF-8?q?feat:=EA=B2=80=EC=83=89=EC=96=B4=20?= =?UTF-8?q?=EB=A7=A4=EC=B9=AD=EA=B2=B0=EA=B3=BC=EA=B0=80=20=ED=95=98?= =?UTF-8?q?=EB=82=98=EC=9D=BC=20=EB=95=8C=20=EC=9E=90=EB=8F=99=20=ED=8F=AC?= =?UTF-8?q?=EC=BB=A4=EC=8A=A4=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/CitySuggestion/CitySuggestion.tsx | 34 +++++++++++-------- .../src/hooks/common/useCitySuggestion.ts | 10 ++++++ 2 files changed, 30 insertions(+), 14 deletions(-) diff --git a/frontend/src/components/common/CitySuggestion/CitySuggestion.tsx b/frontend/src/components/common/CitySuggestion/CitySuggestion.tsx index 5a34de272..9c4ef85d5 100644 --- a/frontend/src/components/common/CitySuggestion/CitySuggestion.tsx +++ b/frontend/src/components/common/CitySuggestion/CitySuggestion.tsx @@ -43,20 +43,26 @@ const CitySuggestion = ({ queryWord, onItemSelect }: SuggestionProps) => { }; return ( - - {suggestions.length - ? suggestions.map((city, index) => ( - - {city.name} - - )) - : !!queryWord && 검색어에 해당하는 도시가 없습니다.} - + <> + {queryWord && ( + + {suggestions.length ? ( + suggestions.map((city, index) => ( + + {city.name} + + )) + ) : ( + 검색어에 해당하는 도시가 없습니다. + )} + + )} + ); }; diff --git a/frontend/src/hooks/common/useCitySuggestion.ts b/frontend/src/hooks/common/useCitySuggestion.ts index c6d9282b8..cf56fd2df 100644 --- a/frontend/src/hooks/common/useCitySuggestion.ts +++ b/frontend/src/hooks/common/useCitySuggestion.ts @@ -11,6 +11,10 @@ export const useCitySuggestion = ({ onItemSelect }: { onItemSelect: (item: CityD const [suggestions, setSuggestions] = useState([]); const [focusedSuggestionIndex, setFocusedSuggestionIndex] = useState(-1); + useEffect(() => { + focusOnlySuggestion(); + }, [suggestions]); + const setNewSuggestions = (word: string) => { const query = stringToKorean(word); const regex = makeRegexByCho(query); @@ -33,6 +37,12 @@ export const useCitySuggestion = ({ onItemSelect }: { onItemSelect: (item: CityD ); }; + const focusOnlySuggestion = () => { + if (suggestions.length === 1) { + setFocusedSuggestionIndex(0); + } + }; + const isFocused = (index: number) => { return index === focusedSuggestionIndex; }; From f7fbc240e1c35ce2248dfa1ee60905f6479d0eb7 Mon Sep 17 00:00:00 2001 From: Dahye <06robin11@gmail.com> Date: Wed, 26 Jul 2023 17:25:01 +0900 Subject: [PATCH 4/8] =?UTF-8?q?fix:=20=EC=A0=9C=EC=95=88=EC=96=B4=20?= =?UTF-8?q?=EA=B2=80=EC=83=89=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/common/CitySearchBar/CitySearchBar.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/frontend/src/components/common/CitySearchBar/CitySearchBar.tsx b/frontend/src/components/common/CitySearchBar/CitySearchBar.tsx index 917eed3c3..7a6144675 100644 --- a/frontend/src/components/common/CitySearchBar/CitySearchBar.tsx +++ b/frontend/src/components/common/CitySearchBar/CitySearchBar.tsx @@ -40,11 +40,6 @@ const CitySearchBar = ({ initialCities, updateCityInfo, required = false }: City const word = event.currentTarget.value; setQueryWord(word); - if (!word) { - closeSuggestion(); - return; - } - openSuggestion(); }; From fc6439dc5a76b52c7febf281dae93f9791c8f962 Mon Sep 17 00:00:00 2001 From: Dahye <06robin11@gmail.com> Date: Wed, 26 Jul 2023 17:41:52 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat:=EC=98=81=EC=96=B4=EA=B2=80=EC=83=89?= =?UTF-8?q?=EC=96=B4=EB=8F=84=20=ED=97=88=EC=9A=A9=ED=95=98=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/common/useCitySuggestion.ts | 5 +++-- frontend/src/utils/formatter.ts | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/frontend/src/hooks/common/useCitySuggestion.ts b/frontend/src/hooks/common/useCitySuggestion.ts index cf56fd2df..5209a7a65 100644 --- a/frontend/src/hooks/common/useCitySuggestion.ts +++ b/frontend/src/hooks/common/useCitySuggestion.ts @@ -3,7 +3,7 @@ import type { CityData } from '@type/city'; import { useEffect, useState } from 'react'; import { makeRegexByCho } from '@utils/cityFilter'; -import { stringToKorean } from '@utils/formatter'; +import { stringToOnlyLetter } from '@utils/formatter'; export const useCitySuggestion = ({ onItemSelect }: { onItemSelect: (item: CityData) => void }) => { const queryClient = useQueryClient(); @@ -12,11 +12,12 @@ export const useCitySuggestion = ({ onItemSelect }: { onItemSelect: (item: CityD const [focusedSuggestionIndex, setFocusedSuggestionIndex] = useState(-1); useEffect(() => { + setFocusedSuggestionIndex(-1); focusOnlySuggestion(); }, [suggestions]); const setNewSuggestions = (word: string) => { - const query = stringToKorean(word); + const query = stringToOnlyLetter(word); const regex = makeRegexByCho(query); if (cityData) { diff --git a/frontend/src/utils/formatter.ts b/frontend/src/utils/formatter.ts index 842407e9d..d8d5f6b64 100644 --- a/frontend/src/utils/formatter.ts +++ b/frontend/src/utils/formatter.ts @@ -20,8 +20,8 @@ export const dateRangeToString = (dateRange: DateRangeData) => { return `${formatDate(start)} - ${formatDate(end)}`; }; -export const stringToKorean = (string: string) => { - const koreanCharacterRegex = /[가-힣ㄱ-ㅎ]+/g; +export const stringToOnlyLetter = (string: string) => { + const koreanCharacterRegex = /^[A-Za-z가-힣ㄱ-ㅎ]+$/g; const matches = string.match(koreanCharacterRegex); From 821b817087147e2e750cf3f4581575be19999df7 Mon Sep 17 00:00:00 2001 From: Dahye <06robin11@gmail.com> Date: Wed, 26 Jul 2023 17:52:49 +0900 Subject: [PATCH 6/8] =?UTF-8?q?feat:=20=EC=A0=9C=EC=95=88=EC=B0=BD=20?= =?UTF-8?q?=EC=97=B4=EB=A6=B0=20=EC=B1=84=EB=A1=9C=20esc=20=EB=88=84?= =?UTF-8?q?=EB=A5=BC=20=EC=8B=9C=20=EC=A0=9C=EC=95=88=EC=B0=BD=20=EB=8B=AB?= =?UTF-8?q?=ED=9E=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/common/CitySearchBar/CitySearchBar.tsx | 5 +++++ .../trip/TripInfoEditModal/TripInfoEditModal.style.ts | 4 ++++ .../trip/TripInfoEditModal/TripInfoEditModal.tsx | 7 +++++-- frontend/src/hooks/common/useCitySuggestion.ts | 5 +++++ 4 files changed, 19 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/common/CitySearchBar/CitySearchBar.tsx b/frontend/src/components/common/CitySearchBar/CitySearchBar.tsx index 7a6144675..3ffa993f7 100644 --- a/frontend/src/components/common/CitySearchBar/CitySearchBar.tsx +++ b/frontend/src/components/common/CitySearchBar/CitySearchBar.tsx @@ -44,6 +44,11 @@ const CitySearchBar = ({ initialCities, updateCityInfo, required = false }: City }; const handleSuggestionClick = (selectedCity: CityData) => { + if (!selectedCity) { + closeSuggestion(); + return; + } + addCityTag(selectedCity); resetAll(); }; diff --git a/frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.style.ts b/frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.style.ts index ac00a7e1d..c4a735747 100644 --- a/frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.style.ts +++ b/frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.style.ts @@ -10,3 +10,7 @@ export const formStyling = css({ width: '400px', }, }); + +export const dateInputSupportingText = css({ + wordBreak: 'keep-all', +}); diff --git a/frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.tsx b/frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.tsx index 3d5cdcc83..a915a2052 100644 --- a/frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.tsx +++ b/frontend/src/components/trip/TripInfoEditModal/TripInfoEditModal.tsx @@ -15,7 +15,10 @@ import { useTripEditForm } from '@hooks/trip/useTripInfoForm'; import CitySearchBar from '@components/common/CitySearchBar/CitySearchBar'; import DateInput from '@components/common/DateInput/DateInput'; -import { formStyling } from '@components/trip/TripInfoEditModal/TripInfoEditModal.style'; +import { + dateInputSupportingText, + formStyling, +} from '@components/trip/TripInfoEditModal/TripInfoEditModal.style'; interface TripInfoEditModalProps extends Omit { isOpen: boolean; @@ -61,7 +64,7 @@ const TripInfoEditModal = ({ isOpen, onClose, ...information }: TripInfoEditModa /> - + 방문 기간을 단축하면 마지막 날짜부터 작성한 기록들이
삭제됩니다. diff --git a/frontend/src/hooks/common/useCitySuggestion.ts b/frontend/src/hooks/common/useCitySuggestion.ts index 5209a7a65..623109b64 100644 --- a/frontend/src/hooks/common/useCitySuggestion.ts +++ b/frontend/src/hooks/common/useCitySuggestion.ts @@ -62,6 +62,11 @@ export const useCitySuggestion = ({ onItemSelect }: { onItemSelect: (item: CityD onItemSelect(suggestions[focusedSuggestionIndex]); } } + + if (e.key === 'Escape') { + //이거 onClose 프롭스로 받기 싫어서 꼼수로 일단 구현함.... + onItemSelect(suggestions[-1]); + } }; useEffect(() => { From 533299534b59fcc899ff60080b3753525cf9dcf9 Mon Sep 17 00:00:00 2001 From: Dahye <06robin11@gmail.com> Date: Fri, 28 Jul 2023 10:21:47 +0900 Subject: [PATCH 7/8] =?UTF-8?q?refactor:=EC=A0=9C=EC=95=88=EC=B0=BD=20?= =?UTF-8?q?=EB=8B=AB=EB=8A=94=20=ED=95=A8=EC=88=98=20props=EB=A1=9C=20?= =?UTF-8?q?=EC=A0=84=EB=8B=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/common/CitySearchBar/CitySearchBar.tsx | 11 +++++------ .../common/CitySuggestion/CitySuggestion.tsx | 4 +++- frontend/src/hooks/common/useCitySuggestion.ts | 10 +++++++--- 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/frontend/src/components/common/CitySearchBar/CitySearchBar.tsx b/frontend/src/components/common/CitySearchBar/CitySearchBar.tsx index 3ffa993f7..ace9390d9 100644 --- a/frontend/src/components/common/CitySearchBar/CitySearchBar.tsx +++ b/frontend/src/components/common/CitySearchBar/CitySearchBar.tsx @@ -44,11 +44,6 @@ const CitySearchBar = ({ initialCities, updateCityInfo, required = false }: City }; const handleSuggestionClick = (selectedCity: CityData) => { - if (!selectedCity) { - closeSuggestion(); - return; - } - addCityTag(selectedCity); resetAll(); }; @@ -109,7 +104,11 @@ const CitySearchBar = ({ initialCities, updateCityInfo, required = false }: City {isSuggestionOpen && ( - + )} diff --git a/frontend/src/components/common/CitySuggestion/CitySuggestion.tsx b/frontend/src/components/common/CitySuggestion/CitySuggestion.tsx index 9c4ef85d5..18371ac66 100644 --- a/frontend/src/components/common/CitySuggestion/CitySuggestion.tsx +++ b/frontend/src/components/common/CitySuggestion/CitySuggestion.tsx @@ -18,11 +18,13 @@ import { interface SuggestionProps { queryWord: string; onItemSelect: (city: CityData) => void; + closeSuggestion: () => void; } -const CitySuggestion = ({ queryWord, onItemSelect }: SuggestionProps) => { +const CitySuggestion = ({ queryWord, onItemSelect, closeSuggestion }: SuggestionProps) => { const { suggestions, focusedSuggestionIndex, isFocused, setNewSuggestions } = useCitySuggestion({ onItemSelect, + closeSuggestion, }); const listRef = useRef(null); const itemRef = useRef(null); diff --git a/frontend/src/hooks/common/useCitySuggestion.ts b/frontend/src/hooks/common/useCitySuggestion.ts index 623109b64..628b2e64b 100644 --- a/frontend/src/hooks/common/useCitySuggestion.ts +++ b/frontend/src/hooks/common/useCitySuggestion.ts @@ -5,7 +5,12 @@ import { useEffect, useState } from 'react'; import { makeRegexByCho } from '@utils/cityFilter'; import { stringToOnlyLetter } from '@utils/formatter'; -export const useCitySuggestion = ({ onItemSelect }: { onItemSelect: (item: CityData) => void }) => { +interface useCitySuggestionProps { + onItemSelect: (city: CityData) => void; + closeSuggestion: () => void; +} + +export const useCitySuggestion = ({ onItemSelect, closeSuggestion }: useCitySuggestionProps) => { const queryClient = useQueryClient(); const cityData = queryClient.getQueryData(['city']); const [suggestions, setSuggestions] = useState([]); @@ -64,8 +69,7 @@ export const useCitySuggestion = ({ onItemSelect }: { onItemSelect: (item: CityD } if (e.key === 'Escape') { - //이거 onClose 프롭스로 받기 싫어서 꼼수로 일단 구현함.... - onItemSelect(suggestions[-1]); + closeSuggestion(); } }; From 174179ae0328155ff2591210081f80d5d7d1d9f0 Mon Sep 17 00:00:00 2001 From: Dahye <06robin11@gmail.com> Date: Fri, 28 Jul 2023 17:23:14 +0900 Subject: [PATCH 8/8] =?UTF-8?q?refactor:regex=20=EC=83=81=EC=88=98?= =?UTF-8?q?=EB=A1=9C=20=EB=B6=84=EB=A6=AC,=20=EB=B3=80=EC=88=98=EB=AA=85?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/common/DateInput/DateInput.tsx | 6 +++--- frontend/src/constants/regex.ts | 3 +++ frontend/src/hooks/common/useCitySuggestion.ts | 4 ++-- frontend/src/utils/formatter.ts | 15 ++++++++------- 4 files changed, 16 insertions(+), 12 deletions(-) create mode 100644 frontend/src/constants/regex.ts diff --git a/frontend/src/components/common/DateInput/DateInput.tsx b/frontend/src/components/common/DateInput/DateInput.tsx index f341ff3e6..38eaae7bc 100644 --- a/frontend/src/components/common/DateInput/DateInput.tsx +++ b/frontend/src/components/common/DateInput/DateInput.tsx @@ -3,7 +3,7 @@ import type { DateRangeData } from '@type/trips'; import { Box, DateRangePicker, Flex, Input, Label, Menu, useOverlay } from 'hang-log-design-system'; import { useEffect, useState } from 'react'; -import { dateRangeToString } from '@utils/formatter'; +import { formatDateRange } from '@utils/formatter'; import { calendarStyling, @@ -22,7 +22,7 @@ const DateInput = ({ updateDateInfo, required = false, }: DateInputProps) => { - const [inputValue, setInputValue] = useState(dateRangeToString(initialDateRange)); + const [inputValue, setInputValue] = useState(formatDateRange(initialDateRange)); const [selectedDateRange, setSelectedDateRange] = useState(initialDateRange); const { isOpen: isCalendarOpen, close: closeCalendar, toggle: toggleCalendar } = useOverlay(); @@ -34,7 +34,7 @@ const DateInput = ({ if (!dateRange.end) return; setSelectedDateRange(dateRange); - setInputValue(dateRangeToString(dateRange)); + setInputValue(formatDateRange(dateRange)); }; return ( diff --git a/frontend/src/constants/regex.ts b/frontend/src/constants/regex.ts new file mode 100644 index 000000000..ddd7fddd5 --- /dev/null +++ b/frontend/src/constants/regex.ts @@ -0,0 +1,3 @@ +export const REGEX = { + ONLY_LETTER: '^[A-Za-z가-힣ㄱ-ㅎ]+$', +}; diff --git a/frontend/src/hooks/common/useCitySuggestion.ts b/frontend/src/hooks/common/useCitySuggestion.ts index 628b2e64b..d60be65bb 100644 --- a/frontend/src/hooks/common/useCitySuggestion.ts +++ b/frontend/src/hooks/common/useCitySuggestion.ts @@ -3,7 +3,7 @@ import type { CityData } from '@type/city'; import { useEffect, useState } from 'react'; import { makeRegexByCho } from '@utils/cityFilter'; -import { stringToOnlyLetter } from '@utils/formatter'; +import { formatStringToLetter } from '@utils/formatter'; interface useCitySuggestionProps { onItemSelect: (city: CityData) => void; @@ -22,7 +22,7 @@ export const useCitySuggestion = ({ onItemSelect, closeSuggestion }: useCitySugg }, [suggestions]); const setNewSuggestions = (word: string) => { - const query = stringToOnlyLetter(word); + const query = formatStringToLetter(word); const regex = makeRegexByCho(query); if (cityData) { diff --git a/frontend/src/utils/formatter.ts b/frontend/src/utils/formatter.ts index d8d5f6b64..6e885242f 100644 --- a/frontend/src/utils/formatter.ts +++ b/frontend/src/utils/formatter.ts @@ -1,3 +1,4 @@ +import { REGEX } from '@constants/regex'; import { DateRangeData } from '@type/trips'; export const formatDate = (date: string) => { @@ -12,7 +13,7 @@ export const formatNumberToMoney = (number: number) => { return number === 0 ? 0 : number.toLocaleString(); }; -export const dateRangeToString = (dateRange: DateRangeData) => { +export const formatDateRange = (dateRange: DateRangeData) => { const { start, end } = dateRange; if (!start || !end) return ''; @@ -20,14 +21,14 @@ export const dateRangeToString = (dateRange: DateRangeData) => { return `${formatDate(start)} - ${formatDate(end)}`; }; -export const stringToOnlyLetter = (string: string) => { - const koreanCharacterRegex = /^[A-Za-z가-힣ㄱ-ㅎ]+$/g; +export const formatStringToLetter = (string: string) => { + const letterRegex = new RegExp(REGEX.ONLY_LETTER, 'g'); - const matches = string.match(koreanCharacterRegex); + const matches = string.match(letterRegex); - if (matches) { - return matches[0]; + if (!matches) { + return ''; } - return ''; + return matches[0]; };