MyTemplatePage 초기 랜더링 Layoutshift 개선

frontend/src/components/Footer/Footer.tsx

@@ -1,23 +1,32 @@
 import { Text } from '@/components';
+import { useAuth } from '@/hooks/authentication';
 
 import * as S from './Footer.style';
 
-const Footer = () => (
-  <S.FooterContainer>
-    <Text.Small color='inherit'>
-      Copyright{' '}
-      <Text.Small color='inherit' weight='bold'>
-        Codezap
-      </Text.Small>{' '}
-      © All rights reserved.
-    </Text.Small>
-    <S.ContactEmail href='mailto:[email protected]'>
-      <Text.Small color='inherit' weight='bold'>
-        문의 :
-      </Text.Small>{' '}
-      <Text.Small color='inherit'>[email protected]</Text.Small>{' '}
-    </S.ContactEmail>
-  </S.FooterContainer>
-);
+const Footer = () => {
+  const { isChecking } = useAuth();
+
+  if (isChecking) {
+    return null;
+  }
+
+  return (
+    <S.FooterContainer>
+      <Text.Small color='inherit'>
+        Copyright{' '}
+        <Text.Small color='inherit' weight='bold'>
+          Codezap
+        </Text.Small>{' '}
+        © All rights reserved.
+      </Text.Small>
+      <S.ContactEmail href='mailto:[email protected]'>
+        <Text.Small color='inherit' weight='bold'>
+          문의 :
+        </Text.Small>{' '}
+        <Text.Small color='inherit'>[email protected]</Text.Small>{' '}
+      </S.ContactEmail>
+    </S.FooterContainer>
+  );
+};
 
 export default Footer;

frontend/src/components/LoadingFallback/LoadingFallback.style.ts

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+export const FallbackContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100vw;
+  height: 100vh;
+`;

frontend/src/components/LoadingFallback/LoadingFallback.tsx

@@ -0,0 +1,10 @@
+import LoadingBall from '../LoadingBall/LoadingBall';
+import * as S from './LoadingFallback.style';
+
+const LoadingFallback = () => (
+  <S.FallbackContainer>
+    <LoadingBall />
+  </S.FallbackContainer>
+);
+
+export default LoadingFallback;

frontend/src/components/index.ts

@@ -23,3 +23,4 @@ export { default as NoSearchResults } from './NoSearchResults/NoSearchResults';
 
 // Skeleton UI
 export { default as LoadingBall } from './LoadingBall/LoadingBall';
+export { default as LoadingFallback } from './LoadingFallback/LoadingFallback';

frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx

@@ -3,23 +3,10 @@ import { useNavigate } from 'react-router-dom';
 
 import { DEFAULT_SORTING_OPTION, SORTING_OPTIONS } from '@/api';
 import { ArrowUpIcon, PlusIcon, SearchIcon } from '@/assets/images';
-import {
-  Flex,
-  Heading,
-  Input,
-  PagingButtons,
-  Dropdown,
-  Button,
-  Modal,
-  Text,
-  LoadingBall,
-  NoSearchResults,
-} from '@/components';
+import { Flex, Heading, Input, PagingButtons, Dropdown, Button, Modal, Text, NoSearchResults } from '@/components';
 import { useWindowWidth, useDebounce, useToggle, useDropdown, useInput } from '@/hooks';
 import { useAuth } from '@/hooks/authentication';
-import { useCategoryListQuery } from '@/queries/categories';
-import { useTagListQuery } from '@/queries/tags';
-import { useTemplateDeleteMutation, useTemplateListQuery } from '@/queries/templates';
+import { useTemplateDeleteMutation, useTemplateCategoryTagQueries } from '@/queries/templates';
 import { END_POINTS } from '@/routes';
 import { theme } from '@/style/theme';
 import { scroll } from '@/utils';
@@ -47,18 +34,17 @@ const MyTemplatePage = () => {
 
   const [page, setPage] = useState<number>(1);
 
-  const { data: templateData, isPending } = useTemplateListQuery({
+  const [{ data: templateData }, { data: categoryData }, { data: tagData }] = useTemplateCategoryTagQueries({
     keyword: debouncedKeyword,
     categoryId: selectedCategoryId,
     tagIds: selectedTagIds,
     sort: sortingOption.key,
     page,
   });
-  const { data: categoryData } = useCategoryListQuery();
-  const { data: tagData } = useTagListQuery();
-  const templates = templateData?.templates || [];
-  const categories = categoryData?.categories || [];
-  const tags = tagData?.tags || [];
+
+  const templateList = templateData?.templates || [];
+  const categoryList = categoryData?.categories || [];
+  const tagList = tagData?.tags || [];
   const totalPages = templateData?.totalPages || 0;
 
   const { mutateAsync: deleteTemplates } = useTemplateDeleteMutation(selectedList);
@@ -84,13 +70,13 @@ const MyTemplatePage = () => {
   };
 
   const handleAllSelected = () => {
-    if (selectedList.length === templates.length) {
+    if (selectedList.length === templateList.length) {
       setSelectedList([]);
 
       return;
     }
 
-    setSelectedList(templates.map((template) => template.id));
+    setSelectedList(templateList.map((template) => template.id));
   };
 
   const handleDelete = () => {
@@ -100,11 +86,7 @@ const MyTemplatePage = () => {
   };
 
   const renderTemplateContent = () => {
-    if (isPending) {
-      return <LoadingBall />;
-    }
-
-    if (templates.length === 0) {
+    if (templateList.length === 0) {
       if (debouncedKeyword !== '') {
         return <NoSearchResults />;
       } else {
@@ -114,7 +96,7 @@ const MyTemplatePage = () => {
 
     return (
       <TemplateGrid
-        templates={templates}
+        templateList={templateList}
         cols={getGridCols(windowWidth)}
         isEditMode={isEditMode}
         selectedList={selectedList}
@@ -128,7 +110,7 @@ const MyTemplatePage = () => {
       <TopBanner name={name ?? '나'} />
       <S.MainContainer>
         <Flex direction='column' gap='2.5rem' style={{ marginTop: '4.5rem' }}>
-          <CategoryFilterMenu categories={categories} onSelectCategory={handleCategoryMenuClick} />
+          <CategoryFilterMenu categoryList={categoryList} onSelectCategory={handleCategoryMenuClick} />
         </Flex>
 
         <Flex direction='column' width='100%' gap='1rem'>
@@ -139,7 +121,7 @@ const MyTemplatePage = () => {
                   돌아가기
                 </Button>
                 <Button variant='outlined' size='small' onClick={handleAllSelected}>
-                  {selectedList.length === templates.length ? '전체 해제' : '전체 선택'}
+                  {selectedList.length === templateList.length ? '전체 해제' : '전체 선택'}
                 </Button>
                 <Button
                   variant={selectedList.length ? 'contained' : 'text'}
@@ -174,45 +156,28 @@ const MyTemplatePage = () => {
               getOptionLabel={(option) => option.value}
             />
           </Flex>
-          {tags.length !== 0 && (
-            <TagFilterMenu tags={tags} selectedTagIds={selectedTagIds} onSelectTags={handleTagMenuClick} />
+          {tagList.length !== 0 && (
+            <TagFilterMenu tagList={tagList} selectedTagIds={selectedTagIds} onSelectTags={handleTagMenuClick} />
           )}
           {renderTemplateContent()}
 
-          {templates.length !== 0 && (
+          {templateList.length !== 0 && (
             <Flex justify='center' gap='0.5rem' margin='1rem 0'>
               <PagingButtons currentPage={page} totalPages={totalPages} onPageChange={handlePageChange} />
             </Flex>
           )}
         </Flex>
 
         {isDeleteModalOpen && (
-          <Modal isOpen={isDeleteModalOpen} toggleModal={toggleDeleteModal} size='xsmall'>
-            <Flex direction='column' justify='space-between' align='center' margin='1rem 0 0 0' gap='2rem'>
-              <Flex direction='column' justify='center' align='center' gap='0.75rem'>
-                <Text.Large color='black' weight='bold'>
-                  정말 삭제하시겠습니까?
-                </Text.Large>
-                <Text.Medium color='black'>삭제된 템플릿은 복구할 수 없습니다.</Text.Medium>
-              </Flex>
-              <Flex justify='center' align='center' gap='0.5rem'>
-                <Button variant='outlined' onClick={toggleDeleteModal}>
-                  취소
-                </Button>
-                <Button onClick={handleDelete}>삭제</Button>
-              </Flex>
-            </Flex>
-          </Modal>
+          <ConfirmDeleteModal
+            isDeleteModalOpen={isDeleteModalOpen}
+            toggleDeleteModal={toggleDeleteModal}
+            handleDelete={handleDelete}
+          />
         )}
       </S.MainContainer>
 
-      <S.ScrollTopButton
-        onClick={() => {
-          scroll.top('smooth');
-        }}
-      >
-        <ArrowUpIcon aria-label='맨 위로' />
-      </S.ScrollTopButton>
+      <ScrollTopButton />
     </S.MyTemplatePageContainer>
   );
 };
@@ -246,3 +211,38 @@ const NewTemplateButton = () => {
 };
 
 export default MyTemplatePage;
+
+interface ConfirmDeleteModalProps {
+  isDeleteModalOpen: boolean;
+  toggleDeleteModal: () => void;
+  handleDelete: () => void;
+}
+
+const ConfirmDeleteModal = ({ isDeleteModalOpen, toggleDeleteModal, handleDelete }: ConfirmDeleteModalProps) => (
+  <Modal isOpen={isDeleteModalOpen} toggleModal={toggleDeleteModal} size='xsmall'>
+    <Flex direction='column' justify='space-between' align='center' margin='1rem 0 0 0' gap='2rem'>
+      <Flex direction='column' justify='center' align='center' gap='0.75rem'>
+        <Text.Large color='black' weight='bold'>
+          정말 삭제하시겠습니까?
+        </Text.Large>
+        <Text.Medium color='black'>삭제된 템플릿은 복구할 수 없습니다.</Text.Medium>
+      </Flex>
+      <Flex justify='center' align='center' gap='0.5rem'>
+        <Button variant='outlined' onClick={toggleDeleteModal}>
+          취소
+        </Button>
+        <Button onClick={handleDelete}>삭제</Button>
+      </Flex>
+    </Flex>
+  </Modal>
+);
+
+const ScrollTopButton = () => (
+  <S.ScrollTopButton
+    onClick={() => {
+      scroll.top('smooth');
+    }}
+  >
+    <ArrowUpIcon aria-label='맨 위로' />
+  </S.ScrollTopButton>
+);

frontend/src/pages/MyTemplatesPage/components/CategoryFilterMenu/CategoryFilterMenu.stories.tsx

@@ -7,7 +7,7 @@ import CategoryFilterMenu from './CategoryFilterMenu';
 const meta: Meta<typeof CategoryFilterMenu> = {
   title: 'CategoryFilterMenu',
   component: CategoryFilterMenu,
-  args: { categories },
+  args: { categoryList: categories },
 };
 
 export default meta;

frontend/src/pages/MyTemplatesPage/components/CategoryFilterMenu/CategoryFilterMenu.tsx

@@ -10,11 +10,11 @@ import { CategoryEditModal } from '../';
 import * as S from './CategoryFilterMenu.style';
 
 interface CategoryMenuProps {
-  categories: Category[];
+  categoryList: Category[];
   onSelectCategory: (selectedCategoryId: number) => void;
 }
 
-const CategoryFilterMenu = ({ categories, onSelectCategory }: CategoryMenuProps) => {
+const CategoryFilterMenu = ({ categoryList, onSelectCategory }: CategoryMenuProps) => {
   const [selectedId, setSelectedId] = useState<number>(0);
   const [isEditModalOpen, toggleEditModal] = useToggle();
   const [isMenuOpen, toggleMenu] = useToggle(false);
@@ -35,17 +35,17 @@ const CategoryFilterMenu = ({ categories, onSelectCategory }: CategoryMenuProps)
     }
   };
 
-  const [defaultCategory, ...userCategories] = categories.length ? categories : [{ id: 0, name: '' }];
+  const [defaultCategory, ...userCategories] = categoryList.length ? categoryList : [{ id: 0, name: '' }];
 
   const indexById: Record<number, number> = useMemo(() => {
-    const map: Record<number, number> = { 0: 0, [defaultCategory.id]: categories.length };
+    const map: Record<number, number> = { 0: 0, [defaultCategory.id]: categoryList.length };
 
     userCategories.forEach(({ id }, index) => {
       map[id] = index + 1;
     });
 
     return map;
-  }, [categories.length, defaultCategory.id, userCategories]);
+  }, [categoryList.length, defaultCategory.id, userCategories]);
 
   return (
     <>
@@ -81,7 +81,7 @@ const CategoryFilterMenu = ({ categories, onSelectCategory }: CategoryMenuProps)
           <S.HighlightBox
             data-testid='category-highlighter-box'
             selectedIndex={indexById[selectedId]}
-            categoryCount={categories.length}
+            categoryCount={categoryList.length}
             isMenuOpen={isMenuOpen}
           />
         </S.CategoryListContainer>

frontend/src/pages/MyTemplatesPage/components/TagFilterMenu/TagFilterMenu.stories.tsx

@@ -1,12 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { tags } from '@/mocks/tagList.json';
+
 import TagFilterMenu from './TagFilterMenu';
 
 const meta: Meta<typeof TagFilterMenu> = {
   title: 'TagFilterMenu',
   component: TagFilterMenu,
-  args: { tags },
+  args: { tagList: tags },
 };
 
 export default meta;