MyTemplatePage 초기 랜더링 Layoutshift 개선

frontend/src/api/templates.ts

@@ -41,7 +41,6 @@ export const getTemplateList = async ({
   memberId,
 }: TemplateListRequest) => {
   const queryParams = new URLSearchParams({
-    keyword,
     sort,
     page: page.toString(),
     size: size.toString(),
@@ -59,6 +58,10 @@ export const getTemplateList = async ({
     queryParams.append('tagIds', tagIds.toString());
   }
 
+  if (keyword) {
+    queryParams.append('keyword', keyword);
+  }
+
   const url = `${TEMPLATE_API_URL}${memberId ? '/login' : ''}?${queryParams.toString()}`;
 
   const response = await customFetch<TemplateListResponse>({

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/pages/MyTemplatesPage/MyTemplatePage.tsx

@@ -3,12 +3,10 @@ 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 { Flex, Heading, Input, PagingButtons, Dropdown, Button, Modal, Text } 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';
@@ -36,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);
@@ -73,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 = () => {
@@ -89,11 +86,7 @@ const MyTemplatePage = () => {
   };
 
   const renderTemplateContent = () => {
-    if (isPending) {
-      return <LoadingBall />;
-    }
-
-    if (templates.length === 0) {
+    if (templateList.length === 0) {
       if (debouncedKeyword !== '') {
         return (
           <Flex justify='center' align='center' padding='2rem'>
@@ -108,7 +101,7 @@ const MyTemplatePage = () => {
 
     return (
       <TemplateGrid
-        templates={templates}
+        templateList={templateList}
         cols={getGridCols(windowWidth)}
         isEditMode={isEditMode}
         selectedList={selectedList}
@@ -122,7 +115,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'>
@@ -133,7 +126,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'}
@@ -168,45 +161,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>
   );
 };
@@ -240,3 +216,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;

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

@@ -11,40 +11,40 @@ import * as S from './TagFilterMenu.style';
 const LINE_HEIGHT_REM = 1.875;
 
 interface Props {
-  tags: Tag[];
+  tagList: Tag[];
   selectedTagIds: number[];
   onSelectTags: (selectedTagIds: number[]) => void;
 }
 
-const TagFilterMenu = ({ tags, selectedTagIds, onSelectTags }: Props) => {
+const TagFilterMenu = ({ tagList, selectedTagIds, onSelectTags }: Props) => {
   const [deselectedTags, setDeselectedTags] = useState<Tag[]>([]);
   const [isTagBoxOpen, toggleTagBox] = useToggle(false);
-  const [height, setHeight] = useState('auto');
+  const [height, setHeight] = useState(`${LINE_HEIGHT_REM}rem`);
   const containerRef = useRef<HTMLDivElement>(null);
   const [showMoreButton, setShowMoreButton] = useState(false);
   const windowWidth = useWindowWidth();
 
-  const updateTagContainerState = () => {
-    if (containerRef.current) {
-      const containerHeight = containerRef.current.scrollHeight;
+  useEffect(() => {
+    const updateTagContainerState = () => {
+      if (containerRef.current) {
+        const containerHeight = containerRef.current.scrollHeight;
 
-      setHeight(isTagBoxOpen ? `${containerHeight}px` : `${LINE_HEIGHT_REM}rem`);
+        setHeight(isTagBoxOpen ? `${containerHeight}px` : `${LINE_HEIGHT_REM}rem`);
 
-      if (containerHeight > remToPx(LINE_HEIGHT_REM)) {
-        setShowMoreButton(true);
-      } else {
-        setShowMoreButton(false);
+        if (containerHeight > remToPx(LINE_HEIGHT_REM)) {
+          setShowMoreButton(true);
+        } else {
+          setShowMoreButton(false);
+        }
       }
-    }
-  };
+    };
 
-  useEffect(() => {
     updateTagContainerState();
-  }, [tags, selectedTagIds, isTagBoxOpen, windowWidth]);
+  }, [tagList, selectedTagIds, isTagBoxOpen, windowWidth]);
 
   const handleButtonClick = (tagId: number) => {
     if (selectedTagIds.includes(tagId)) {
-      const deselectedTag = tags.find((tag) => tag.id === tagId);
+      const deselectedTag = tagList.find((tag) => tag.id === tagId);
 
       if (deselectedTag) {
         setDeselectedTags((prev) => [deselectedTag, ...prev.filter((tag) => tag.id !== tagId)]);
@@ -57,10 +57,10 @@ const TagFilterMenu = ({ tags, selectedTagIds, onSelectTags }: Props) => {
     }
   };
 
-  const selectedTags = selectedTagIds.map((id) => tags.find((tag) => tag.id === id)!).filter(Boolean);
+  const selectedTags = selectedTagIds.map((id) => tagList.find((tag) => tag.id === id)!).filter(Boolean);
 
   const unselectedTags = deselectedTags.concat(
-    tags.filter(
+    tagList.filter(
       (tag) => !selectedTagIds.includes(tag.id) && !deselectedTags.some((deselectedTag) => deselectedTag.id === tag.id),
     ),
   );