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

* refactor(components): ScrollTopButton 컴포넌트 분리

* refactor(MyTemplatePage): 컴포넌트 분리 및 태그목록, 카테고리 목록 서스펜스 적용

* refactor(components): TemplateDeleteSelection, TemplateListSectionLoading 컴포넌트 분리

* refactor(src): useKeyword, useShowTemplateList, useSelectAndDeleteTemplateList 훅 분리 및 MyTemplatePage 적용

* refactor(templates): 사용하지 않는 useTemplateCategoryTagQueries 훅 삭제

* refactor(pages): useShowTemplateList => useFilteredTemplateList로 이름 변경

* refactor(src): useKeyword => useSearchKeyword로 이름 변경

* refactor(ConfirmDeleteModal): ConfirmDeleteModalProps =>Props 로 변경

* refactor(CategoryListSection): Flex 대신 스타일드 컴포넌트로 스타일 지정

* refactor(ConfirmDeleteModal): Modal 합성 컴포넌트의 하위 컴포넌트 사용하도록 변경

* refactor(queries): useSuspenseQuery를 사용하는 훅들 수동으로 error 전파

frontend/src/components/ScrollTopButton/ScrollTopButton.style.ts

@@ -0,0 +1,21 @@
+import styled from '@emotion/styled';
+
+import { theme } from '@/style/theme';
+
+export const ScrollTopButton = styled.button`
+  cursor: pointer;
+
+  position: fixed;
+  right: 2rem;
+  bottom: 2rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 0.75rem;
+
+  background-color: ${theme.color.light.primary_500};
+  border: none;
+  border-radius: 100%;
+`;

frontend/src/components/ScrollTopButton/ScrollTopButton.tsx

@@ -0,0 +1,16 @@
+import { ArrowUpIcon } from '@/assets/images';
+import { scroll } from '@/utils';
+
+import * as S from './ScrollTopButton.style';
+
+const ScrollTopButton = () => (
+  <S.ScrollTopButton
+    onClick={() => {
+      scroll.top('smooth');
+    }}
+  >
+    <ArrowUpIcon aria-label='맨 위로' />
+  </S.ScrollTopButton>
+);
+
+export default ScrollTopButton;

frontend/src/components/index.ts

@@ -27,6 +27,7 @@ export { default as NewCategoryInput } from './NewCategoryInput/NewCategoryInput
 export { default as NoSearchResults } from './NoSearchResults/NoSearchResults';
 export { default as Textarea } from './Textarea/Textarea';
 export { default as ContactUs } from './ContactUs/ContactUs';
+export { default as ScrollTopButton } from './ScrollTopButton/ScrollTopButton';
 
 // Skeleton UI
 export { default as LoadingBall } from './LoadingBall/LoadingBall';

frontend/src/hooks/template/index.ts

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

frontend/src/hooks/template/useSearchKeyword.ts

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

frontend/src/pages/MyTemplatesPage/MyTemplatePage.style.ts

@@ -21,23 +21,6 @@ export const MainContainer = styled.main`
   }
 `;
 
-export const TopBannerContainer = styled.div`
-  display: flex;
-  align-items: center;
-
-  width: 100%;
-  height: 10.25rem;
-
-  white-space: nowrap;
-`;
-
-export const TopBannerTextWrapper = styled.div`
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  margin-left: calc(12.5rem + clamp(1rem, calc(0.0888 * 100vw - 3.2618rem), 4.375rem));
-`;
-
 export const SearchInput = styled(Input)`
   box-shadow: inset 1px 2px 8px #00000030;
 `;
@@ -62,20 +45,7 @@ export const NewTemplateButton = styled.button`
   }
 `;
 
-export const ScrollTopButton = styled.button`
-  cursor: pointer;
-
-  position: fixed;
-  right: 2rem;
-  bottom: 2rem;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  padding: 0.75rem;
-
-  background-color: ${theme.color.light.primary_500};
-  border: none;
-  border-radius: 100%;
+export const TemplateListSectionWrapper = styled.div`
+  position: relative;
+  width: 100%;
 `;