From e9de82f98f1e82d0aa4e8f74be99d3595d88152b Mon Sep 17 00:00:00 2001
From: CHOI GIHOAWN <rlghks3004@gmail.com>
Date: Mon, 30 Sep 2024 18:01:55 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=A3=BC=EC=86=8C=20=EA=B2=80=EC=83=89?=
 =?UTF-8?q?=20=EA=B2=B0=EA=B3=BC=20=EC=97=86=EC=9D=84=EC=8B=9C=20UI=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EC=84=A0=ED=83=9D=20UI=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/register/RegionList.tsx | 12 ++++++++++--
 src/funnel/register/LocationFunnel.tsx |  7 +++++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/register/RegionList.tsx b/src/components/register/RegionList.tsx
index ba551b0..cb44ca1 100644
--- a/src/components/register/RegionList.tsx
+++ b/src/components/register/RegionList.tsx
@@ -2,13 +2,15 @@ import { useGetRegions } from '@/queries/useGetRegions.ts';
 import { regions } from '@/mocks/mockDatas/regions.ts';
 import { useCallback, useEffect, useState } from 'react';
 import { debounce } from 'es-toolkit';
+import { cn } from '@/utils.ts';
 
 interface RegionListProps {
   search: string;
+  selectedLocation: { id: number; name: string } | null;
   onSelectLocation: (location: (typeof regions)[number]) => void;
 }
 
-export const RegionList = ({ onSelectLocation, search }: RegionListProps) => {
+export const RegionList = ({ onSelectLocation, search, selectedLocation }: RegionListProps) => {
   const [deferredSearch, setSearch] = useState(search);
   const { data: locationList } = useGetRegions(deferredSearch);
 
@@ -24,9 +26,15 @@ export const RegionList = ({ onSelectLocation, search }: RegionListProps) => {
 
   return (
     <ul className={'h-full overflow-auto hide-scrollbar'}>
+      {locationList?.length === 0 && (
+        <li className={'py-4 text-regular-body font-medium text-Gray600'}>검색 결과가 없습니다.</li>
+      )}
       {locationList.map((location) => (
         <li
-          className={'py-4 text-regular-body text-Gray800 font-medium'}
+          className={cn(
+            'py-4 text-regular-body font-medium transition-colors',
+            selectedLocation?.id === location.id ? 'text-BloomingGreen500' : 'text-Gray800',
+          )}
           key={`searched-location-list-${location.id}`}
           onClick={() => onSelectLocation(location)}
         >
diff --git a/src/funnel/register/LocationFunnel.tsx b/src/funnel/register/LocationFunnel.tsx
index 5defb11..18c37af 100644
--- a/src/funnel/register/LocationFunnel.tsx
+++ b/src/funnel/register/LocationFunnel.tsx
@@ -31,7 +31,6 @@ const LocationFunnel = ({ toNotificationTimeFunnel, goBack }: LocationFunnelProp
 
   const onSelectLocation = (location: (typeof regions)[number]) => {
     setSelectedLocation(location);
-    setSearch(location.name);
   };
 
   const changeSearchHandler = (e: ChangeEvent<HTMLInputElement>) => {
@@ -67,7 +66,11 @@ const LocationFunnel = ({ toNotificationTimeFunnel, goBack }: LocationFunnelProp
           </div>
         }
       >
-        <RegionList search={search} onSelectLocation={onSelectLocation} />
+        <RegionList
+          selectedLocation={selectedLocation}
+          search={search}
+          onSelectLocation={onSelectLocation}
+        />
       </Suspense>
       <CTAButton
         text={'다음'}