카테고리, 태그, 템플릿 목록 로딩 처리 개선

frontend/src/hooks/template/index.ts

@@ -1,3 +1,3 @@
 export { useSourceCode } from './useSourceCode';
 export { useTag } from './useTag';
-export { useKeyword } from './useKeyword';
+export { useSearchKeyword } from './useSearchKeyword';

frontend/src/hooks/template/useKeyword.ts → frontend/src/hooks/template/useSearchKeyword.ts

@@ -1,6 +1,6 @@
-import { useInput, useDebounce } from '../';
+import { useInput, useDebounce } from '..';
 
-export const useKeyword = () => {
+export const useSearchKeyword = () => {
   const [keyword, handleKeywordChange] = useInput('');
   const debouncedKeyword = useDebounce(keyword, 300);
 

frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx

@@ -15,7 +15,7 @@ import {
   TemplateDeleteSelection,
   TemplateListSectionLoading,
 } from './components';
-import { useSelectAndDeleteTemplateList, useShowTemplateList } from './hooks';
+import { useSelectAndDeleteTemplateList, useFilteredTemplateList } from './hooks';
 import * as S from './MyTemplatePage.style';
 
 const MyTemplatePage = () => {
@@ -38,7 +38,7 @@ const MyTemplatePage = () => {
     handleTagMenuClick,
     handleSearchSubmit,
     handlePageChange,
-  } = useShowTemplateList();
+  } = useFilteredTemplateList();
 
   const {
     isEditMode,

frontend/src/pages/MyTemplatesPage/components/CategoryListSection/CategoryListSection.style.ts

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+
+export const CategoryListSectionContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+  margin-top: 4.5rem;
+`;

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

@@ -1,7 +1,7 @@
-import { Flex } from '@/components';
 import { useCategoryListQuery } from '@/queries/categories';
 
 import { CategoryFilterMenu } from '..';
+import * as S from './CategoryListSection.style';
 
 interface Props {
   onSelectCategory: (selectedCategoryId: number) => void;
@@ -12,9 +12,9 @@ const CategoryListSection = ({ onSelectCategory }: Props) => {
   const categoryList = categoryData?.categories || [];
 
   return (
-    <Flex direction='column' gap='2.5rem' style={{ marginTop: '4.5rem' }}>
+    <S.CategoryListSectionContainer>
       <CategoryFilterMenu categoryList={categoryList} onSelectCategory={onSelectCategory} />
-    </Flex>
+    </S.CategoryListSectionContainer>
   );
 };
 

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

@@ -1,27 +1,25 @@
-import { Button, Flex, Modal, Text } from '@/components';
+import { Button, Modal, Text } from '@/components';
 
-interface ConfirmDeleteModalProps {
+interface Props {
   isDeleteModalOpen: boolean;
   toggleDeleteModal: () => void;
   handleDelete: () => void;
 }
 
-const ConfirmDeleteModal = ({ isDeleteModalOpen, toggleDeleteModal, handleDelete }: ConfirmDeleteModalProps) => (
+const ConfirmDeleteModal = ({ isDeleteModalOpen, toggleDeleteModal, handleDelete }: Props) => (
   <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.Body>
+      <Text.Large color='black' weight='bold'>
+        정말 삭제하시겠습니까?
+      </Text.Large>
+      <Text.Medium color='black'>삭제된 템플릿은 복구할 수 없습니다.</Text.Medium>
+    </Modal.Body>
+    <Modal.Footer>
+      <Button variant='outlined' onClick={toggleDeleteModal}>
+        취소
+      </Button>
+      <Button onClick={handleDelete}>삭제</Button>
+    </Modal.Footer>
   </Modal>
 );
 

frontend/src/pages/MyTemplatesPage/hooks/index.ts

@@ -1,2 +1,2 @@
-export { useShowTemplateList } from './useShowTemplateList';
+export { useFilteredTemplateList } from './useFilteredTemplateList';
 export { useSelectAndDeleteTemplateList } from './useSelectAndDeleteTemplateList';

frontend/src/pages/MyTemplatesPage/hooks/useShowTemplateList.ts → frontend/src/pages/MyTemplatesPage/hooks/useFilteredTemplateList.ts

@@ -2,16 +2,16 @@ import { useCallback, useState } from 'react';
 
 import { DEFAULT_SORTING_OPTION } from '@/api';
 import { useDropdown } from '@/hooks';
-import { useKeyword } from '@/hooks/template';
+import { useSearchKeyword } from '@/hooks/template';
 import { useTemplateListQuery } from '@/queries/templates';
 import { scroll } from '@/utils';
 
 const FIRST_PAGE = 1;
 
-export const useShowTemplateList = () => {
+export const useFilteredTemplateList = () => {
   const [selectedCategoryId, setSelectedCategoryId] = useState<number | undefined>(undefined);
   const [selectedTagIds, setSelectedTagIds] = useState<number[]>([]);
-  const { keyword, debouncedKeyword, handleKeywordChange } = useKeyword();
+  const { keyword, debouncedKeyword, handleKeywordChange } = useSearchKeyword();
   const { currentValue: sortingOption, ...dropdownProps } = useDropdown(DEFAULT_SORTING_OPTION);
   const [page, setPage] = useState<number>(FIRST_PAGE);
 

frontend/src/queries/categories/useCategoryListQuery.ts

@@ -9,8 +9,14 @@ export const useCategoryListQuery = () => {
     memberInfo: { memberId },
   } = useAuth();
 
-  return useSuspenseQuery<CategoryListResponse, Error>({
+  const result = useSuspenseQuery<CategoryListResponse, Error>({
     queryKey: [QUERY_KEY.CATEGORY_LIST],
     queryFn: () => getCategoryList({ memberId }),
   });
+
+  if (result.error && !result.isFetching) {
+    throw result.error;
+  }
+
+  return result;
 };

frontend/src/queries/tags/useTagListQuery.ts

@@ -9,8 +9,14 @@ export const useTagListQuery = () => {
     memberInfo: { memberId },
   } = useAuth();
 
-  return useSuspenseQuery<TagListResponse, Error>({
+  const result = useSuspenseQuery<TagListResponse, Error>({
     queryKey: [QUERY_KEY.TAG_LIST],
     queryFn: () => getTagList({ memberId }),
   });
+
+  if (result.error && !result.isFetching) {
+    throw result.error;
+  }
+
+  return result;
 };