feat(page): 데이터 없을때 UI 처리

kakao-tech-campus-2nd-step3 · Nov 15, 2024 · 2f97dcc · 2f97dcc
1 parent 72d351a
commit 2f97dcc
Showing 1 changed file with 16 additions and 8 deletions.
diff --git a/src/pages/SearchResults/index.tsx b/src/pages/SearchResults/index.tsx
@@ -57,20 +57,28 @@ const SearchResultsContent = () => {
               <SubTitleFont>
                 작품 <ResultLightFont>({searchProductLen})</ResultLightFont>
               </SubTitleFont>
-              <HorizontalWRapper>
-                <HorizontalFrame children={productsData} />
-                <MoreButton onClick={() => handleTabClick('작품')}> 더보기 </MoreButton>
-              </HorizontalWRapper>
+              {searchProductLen === 0 ? (
+                <div>데이터가 없습니다.</div>
+              ) : (
+                <HorizontalWRapper>
+                  <HorizontalFrame children={productsData} />
+                  <MoreButton onClick={() => handleTabClick('작품')}> 더보기 </MoreButton>
+                </HorizontalWRapper>
+              )}
             </Section>
             <G.Gap height={12} />
             <Section>
               <SubTitleFont>
                 작가 <ResultLightFont>({searchArtistLen})</ResultLightFont>
               </SubTitleFont>
-              <HorizontalWRapper>
-                <HorizontalFrame children={artistsData} />
-                <MoreButton onClick={() => handleTabClick('작가')}> 더보기 </MoreButton>
-              </HorizontalWRapper>
+              {searchArtistLen === 0 ? (
+                <div>데이터가 없습니다.</div>
+              ) : (
+                <HorizontalWRapper>
+                  <HorizontalFrame children={artistsData} />
+                  <MoreButton onClick={() => handleTabClick('작가')}> 더보기 </MoreButton>
+                </HorizontalWRapper>
+              )}
             </Section>
           </AllContentWrapper>
         )}