NoSearchResults 생성 및 적용

frontend/src/components/NoSearchResults/NoSearchResults.style.ts

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+export const NoSearchResultsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  padding: 2rem;
+`;

frontend/src/components/NoSearchResults/NoSearchResults.tsx

@@ -0,0 +1,14 @@
+import { ZapzapCuriousLogo } from '@/assets/images';
+import { theme } from '@/style/theme';
+
+import { Text } from '../';
+import * as S from './NoSearchResults.style';
+
+const NoSearchResults = () => (
+  <S.NoSearchResultsContainer>
+    <ZapzapCuriousLogo width={48} height={48} />
+    <Text.Large color={theme.color.light.secondary_700}>검색 결과가 없습니다.</Text.Large>
+  </S.NoSearchResultsContainer>
+);
+
+export default NoSearchResults;

frontend/src/components/index.ts

@@ -19,6 +19,7 @@ export { default as Text } from './Text/Text';
 export { default as Toast } from './Toast/Toast';
 export { default as Guide } from './Guide/Guide';
 export { default as Footer } from './Footer/Footer';
+export { default as NoSearchResults } from './NoSearchResults/NoSearchResults';
 
 // Skeleton UI
 export { default as LoadingBall } from './LoadingBall/LoadingBall';

frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx

@@ -2,8 +2,19 @@ import { useState, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { DEFAULT_SORTING_OPTION, SORTING_OPTIONS } from '@/api';
-import { ArrowUpIcon, PlusIcon, SearchIcon, ZapzapCuriousLogo } from '@/assets/images';
-import { Flex, Heading, Input, PagingButtons, Dropdown, Button, Modal, Text, LoadingBall } from '@/components';
+import { ArrowUpIcon, PlusIcon, SearchIcon } from '@/assets/images';
+import {
+  Flex,
+  Heading,
+  Input,
+  PagingButtons,
+  Dropdown,
+  Button,
+  Modal,
+  Text,
+  LoadingBall,
+  NoSearchResults,
+} from '@/components';
 import { useWindowWidth, useDebounce, useToggle, useDropdown, useInput } from '@/hooks';
 import { useAuth } from '@/hooks/authentication';
 import { useCategoryListQuery } from '@/queries/categories';
@@ -95,12 +106,7 @@ const MyTemplatePage = () => {
 
     if (templates.length === 0) {
       if (debouncedKeyword !== '') {
-        return (
-          <Flex justify='center' align='center' padding='2rem'>
-            <ZapzapCuriousLogo width={48} height={48} />
-            <Text.Large color={theme.color.light.secondary_700}>검색 결과가 없습니다.</Text.Large>
-          </Flex>
-        );
+        return <NoSearchResults />;
       } else {
         return <NewTemplateButton />;
       }

frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx

@@ -3,7 +3,16 @@ import { Link } from 'react-router-dom';
 
 import { DEFAULT_SORTING_OPTION, SORTING_OPTIONS } from '@/api';
 import { ArrowUpIcon, SearchIcon, ZapzapLogo } from '@/assets/images';
-import { Dropdown, Flex, Heading, Input, PagingButtons, TemplateCard } from '@/components';
+import {
+  Dropdown,
+  Flex,
+  Heading,
+  Input,
+  LoadingBall,
+  NoSearchResults,
+  PagingButtons,
+  TemplateCard,
+} from '@/components';
 import { useDebounce, useDropdown, useInput, useWindowWidth } from '@/hooks';
 import { useTemplateExploreQuery } from '@/queries/templates';
 import { scroll } from '@/utils';
@@ -18,10 +27,14 @@ const TemplateExplorePage = () => {
   const debouncedKeyword = useDebounce(keyword, 300);
 
   const { currentValue: sortingOption, ...dropdownProps } = useDropdown(DEFAULT_SORTING_OPTION);
-  const { data: templateData } = useTemplateExploreQuery({ sort: sortingOption.key, page, keyword: debouncedKeyword });
+  const { data: templateData, isPending } = useTemplateExploreQuery({
+    sort: sortingOption.key,
+    page,
+    keyword: debouncedKeyword,
+  });
   const windowWidth = useWindowWidth();
 
-  const templates = templateData?.templates || [];
+  const templateList = templateData?.templates || [];
   const totalPages = templateData?.totalPages || 0;
 
   const handlePageChange = (page: number) => {
@@ -61,18 +74,27 @@ const TemplateExplorePage = () => {
           getOptionLabel={(option) => option.value}
         />
       </Flex>
+      {templateList.length === 0 ? (
+        isPending ? (
+          <LoadingBall />
+        ) : (
+          <NoSearchResults />
+        )
+      ) : (
+        <S.TemplateExplorePageContainer cols={getGridCols(windowWidth)}>
+          {templateList.map((template) => (
+            <Link to={`/templates/${template.id}`} key={template.id}>
+              <TemplateCard template={template} />
+            </Link>
+          ))}
+        </S.TemplateExplorePageContainer>
+      )}
 
-      <S.TemplateExplorePageContainer cols={getGridCols(windowWidth)}>
-        {templates.map((template) => (
-          <Link to={`/templates/${template.id}`} key={template.id}>
-            <TemplateCard template={template} />
-          </Link>
-        ))}
-      </S.TemplateExplorePageContainer>
-
-      <Flex justify='center' gap='0.5rem' margin='1rem 0' width='100%'>
-        <PagingButtons currentPage={page} totalPages={totalPages} onPageChange={handlePageChange} />
-      </Flex>
+      {templateList.length !== 0 && (
+        <Flex justify='center' gap='0.5rem' margin='1rem 0' width='100%'>
+          <PagingButtons currentPage={page} totalPages={totalPages} onPageChange={handlePageChange} />
+        </Flex>
+      )}
 
       <S.ScrollTopButton
         onClick={() => {