merge: 주소 검색어가 없을 때 불필요한 메시지 표시 제거

[FIX] 주소 검색어가 없을 때 불필요한 메시지 표시 제거

Author: young-jin-son

frontend/src/components/SearchAddress/SearchAddressResult/index.tsx

@@ -6,38 +6,43 @@ import Icon from '@/components/Icon';
 interface SearchAddressResultProps {
   addresses: SearchAddressType[];
   handleSelectAddress: (address: SearchAddressType) => void;
+  isAddressInputEmpty: boolean;
 }
 
-const SearchAddressResult = ({ addresses, handleSelectAddress }: SearchAddressResultProps) => {
+const SearchAddressResult = ({
+  addresses,
+  handleSelectAddress,
+  isAddressInputEmpty,
+}: SearchAddressResultProps) => {
   return (
     <S.SearchResultContainer>
       <S.SearchResultTitle>검색 결과</S.SearchResultTitle>
       <S.SearchResultList>
-        {addresses.length > 0 ? (
-          addresses.map((item) => (
-            <S.SearchResultItem key={item.title} onClick={() => handleSelectAddress(item)}>
-              <S.ResultIconWrapper>
-                <Icon icon="Map" width={20} height={20} />
-              </S.ResultIconWrapper>
-              <S.AddressWrapper>
-                <S.ResultItemTitle>{item.title}</S.ResultItemTitle>
-                <S.ResultItemAddress>{item.roadAddress}</S.ResultItemAddress>
-              </S.AddressWrapper>
-            </S.SearchResultItem>
-          ))
-        ) : (
-          <S.SearchResultEmpty>
-            <S.ResultEmptyText>
-              <span>검색 결과가 없어요.</span>
-              <span>아래의 조합으로 검색해볼까요?</span>
-            </S.ResultEmptyText>
-            <S.ResultEmptySuggestion>
-              <span>도로명 + 건물 번호</span>
-              <span>지역명 + 번지</span>
-              <span>건물명, 아파트명</span>
-            </S.ResultEmptySuggestion>
-          </S.SearchResultEmpty>
-        )}
+        {addresses.length > 0
+          ? addresses.map((item) => (
+              <S.SearchResultItem key={item.title} onClick={() => handleSelectAddress(item)}>
+                <S.ResultIconWrapper>
+                  <Icon icon="Map" width={20} height={20} />
+                </S.ResultIconWrapper>
+                <S.AddressWrapper>
+                  <S.ResultItemTitle>{item.title}</S.ResultItemTitle>
+                  <S.ResultItemAddress>{item.roadAddress}</S.ResultItemAddress>
+                </S.AddressWrapper>
+              </S.SearchResultItem>
+            ))
+          : !isAddressInputEmpty && (
+              <S.SearchResultEmpty>
+                <S.ResultEmptyText>
+                  <span>검색 결과가 없어요.</span>
+                  <span>아래의 조합으로 검색해볼까요?</span>
+                </S.ResultEmptyText>
+                <S.ResultEmptySuggestion>
+                  <span>도로명 + 건물 번호</span>
+                  <span>지역명 + 번지</span>
+                  <span>건물명, 아파트명</span>
+                </S.ResultEmptySuggestion>
+              </S.SearchResultEmpty>
+            )}
       </S.SearchResultList>
     </S.SearchResultContainer>
   );

frontend/src/components/SearchAddress/index.tsx

@@ -63,7 +63,11 @@ const SearchAddress = ({ onSelectAddressMain, onSelectAddress, onClose }: Search
       {isLoading ? (
         <div>Loading...</div>
       ) : (
-        <SearchAddressResult addresses={addresses} handleSelectAddress={handleSelectAddress} />
+        <SearchAddressResult
+          addresses={addresses}
+          handleSelectAddress={handleSelectAddress}
+          isAddressInputEmpty={addressInput.length === 0}
+        />
       )}
     </S.SearchAddressLayout>
   );