woowacourse-teams · vi-wolhwa · Aug 13, 2024 · Aug 12, 2024 · Aug 12, 2024 · Aug 12, 2024
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -1,6 +1,20 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <!-- Google Tag Manager -->
+    <script>
+      (function (w, d, s, l, i) {
+        w[l] = w[l] || [];
+        w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
+        var f = d.getElementsByTagName(s)[0],
+          j = d.createElement(s),
+          dl = l != 'dataLayer' ? '&l=' + l : '';
+        j.async = true;
+        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+        f.parentNode.insertBefore(j, f);
+      })(window, document, 'script', 'dataLayer', 'GTM-PK45Q6HC');
+    </script>
+    <!-- End Google Tag Manager -->
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-3LRVC2N26K"></script>
     <script>
@@ -18,6 +32,16 @@
     <base href="/" />
   </head>
   <body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript
+      ><iframe
+        src="https://www.googletagmanager.com/ns.html?id=GTM-PK45Q6HC"
+        height="0"
+        width="0"
+        style="display: none; visibility: hidden"
+      ></iframe
+    ></noscript>
+    <!-- End Google Tag Manager (noscript) -->
     <div id="root"></div>
   </body>
 </html>
diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
@@ -20,4 +20,10 @@ export {
   LOGIN_STATE_API_URL,
   SIGNUP_API_URL,
   LOGOUT_API_URL,
+  postSignup,
+  postLogin,
+  postLogout,
+  getLoginState,
+  checkEmail,
+  checkUsername,
 } from './authentication';
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
@@ -6,6 +6,7 @@ export { default as Header } from './Header/Header';
 export { default as Heading } from './Heading/Heading';
 export { default as Input } from './Input/Input';
 export { default as Layout } from './Layout/Layout';
+export { default as Modal } from './Modal/Modal';
 export { default as PagingButton } from './PagingButton/PagingButton';
 export { default as SelectList } from './SelectList/SelectList';
 export { default as SnippetEditor } from './SnippetEditor/SnippetEditor';
@@ -17,4 +18,3 @@ export { default as TemplateEdit } from './TemplateEdit/TemplateEdit';
 export { default as TemplateGrid } from './TemplateGrid/TemplateGrid';
 export { default as Text } from './Text/Text';
 export { default as Toast } from './Toast/Toast';
-export { default as Modal } from './Modal/Modal';
diff --git a/frontend/src/contexts/authContext.tsx → frontend/src/contexts/AuthContext.tsx b/frontend/src/contexts/authContext.tsx → frontend/src/contexts/AuthContext.tsx
diff --git a/frontend/src/context/HeaderContext.tsx → frontend/src/contexts/HeaderContext.tsx b/frontend/src/context/HeaderContext.tsx → frontend/src/contexts/HeaderContext.tsx
diff --git a/frontend/src/context/ToastContext.tsx → frontend/src/contexts/ToastContext.tsx b/frontend/src/context/ToastContext.tsx → frontend/src/contexts/ToastContext.tsx
diff --git a/frontend/src/contexts/index.ts b/frontend/src/contexts/index.ts
@@ -0,0 +1,3 @@
+export { AuthContext, AuthProvider } from './AuthContext';
+export { HeaderContext, HeaderProvider } from './HeaderContext';
+export { ToastContext, ToastProvider } from './ToastContext';
diff --git a/frontend/src/hooks/authentication/index.ts b/frontend/src/hooks/authentication/index.ts
@@ -1,3 +1,5 @@
 export { useShowPassword } from './useShowPassword';
 export { useSignupForm } from './useSignupForm';
 export { useCheckLoginState } from './useCheckLoginState';
+export { useAuth } from './useAuth';
+export { useLoginForm } from './useLoginForm';
diff --git a/frontend/src/hooks/authentication/useAuth.ts b/frontend/src/hooks/authentication/useAuth.ts
@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 
-import { AuthContext } from '@/contexts/authContext';
+import { AuthContext } from '@/contexts';
 
 export const useAuth = () => {
   const context = useContext(AuthContext);

diff --git a/frontend/src/hooks/authentication/useCheckLoginState.ts b/frontend/src/hooks/authentication/useCheckLoginState.ts
@@ -1,9 +1,9 @@
 import { useCallback, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { ToastContext } from '@/context/ToastContext';
-import { useLoginStateQuery } from '@/queries/authentication/useLoginStateQuery';
-import useCustomContext from '../utils/useCustomContext';
+import { ToastContext } from '@/contexts';
+import { useLoginStateQuery } from '@/queries/authentication';
+import { useCustomContext } from '../utils';
 import { useAuth } from './useAuth';
 
 export const useCheckLoginState = () => {

diff --git a/frontend/src/hooks/authentication/useLoginForm.ts b/frontend/src/hooks/authentication/useLoginForm.ts
@@ -1,8 +1,8 @@
 import { FormEvent } from 'react';
 
-import { useLoginMutation } from '@/queries/authentication/useLoginMutation';
-import { useInputWithValidate } from '../useInputWithValidate';
-import { validateEmail, validatePassword } from './validates';
+import { useInputWithValidate } from '@/hooks/utils';
+import { useLoginMutation } from '@/queries/authentication';
+import { validateEmail, validatePassword } from '@/service';
 
 export const useLoginForm = () => {
   const { mutateAsync } = useLoginMutation();

diff --git a/frontend/src/hooks/authentication/useSignupForm.ts b/frontend/src/hooks/authentication/useSignupForm.ts
@@ -2,10 +2,9 @@ import { FormEvent, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { postSignup } from '@/api/authentication';
-import { useCheckEmailQuery } from '@/queries/authentication';
-import { useCheckUsernameQuery } from '@/queries/authentication/useCheckUsernameQuery';
-import { useInputWithValidate } from '../useInputWithValidate';
-import { validateEmail, validateUsername, validatePassword, validateConfirmPassword } from './validates';
+import { useInputWithValidate } from '@/hooks/utils';
+import { useCheckEmailQuery, useCheckUsernameQuery } from '@/queries/authentication';
+import { validateEmail, validateUsername, validatePassword, validateConfirmPassword } from '@/service';
 
 export const useSignupForm = () => {
   const navigate = useNavigate();

diff --git a/frontend/src/hooks/category/index.ts b/frontend/src/hooks/category/index.ts
@@ -0,0 +1 @@
+export { useCategory } from './useCategory';
diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts
diff --git a/frontend/src/hooks/template/index.ts b/frontend/src/hooks/template/index.ts
@@ -1,5 +1,3 @@
-export { useTemplateQuery } from './useTemplateQuery';
-export { useTemplateUploadQuery } from './useTemplateUploadQuery';
-export { useTemplateEditQuery } from './useTemplateEditQuery';
-export { useTemplateDeleteQuery } from './useTemplateDeleteQuery';
 export { useTemplateUpload } from './useTemplateUpload';
+export { useTemplateEdit } from './useTemplateEdit';
+export { useTemplate } from './useTemplate';
diff --git a/frontend/src/hooks/template/useTemplate.ts b/frontend/src/hooks/template/useTemplate.ts
@@ -1,16 +1,15 @@
 import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { useScrollToTargetElement } from '../utils/useScrollToTargetElement';
-import { useTemplateDeleteQuery } from './useTemplateDeleteQuery';
-import { useTemplateQuery } from './useTemplateQuery';
+import { useTemplateDeleteMutation, useTemplateQuery } from '@/queries/template';
+import { useScrollToTargetElement } from '../utils';
 
 export const useTemplate = (id: number) => {
   const navigate = useNavigate();
   const scrollTo = useScrollToTargetElement();
 
   const { data: template } = useTemplateQuery(Number(id));
-  const { mutateAsync: deleteTemplate } = useTemplateDeleteQuery(Number(id));
+  const { mutateAsync: deleteTemplate } = useTemplateDeleteMutation(Number(id));
 
   const [currentFile, setCurrentFile] = useState<number | null>(null);
   const [isEdit, setIsEdit] = useState(false);

diff --git a/frontend/src/hooks/template/useTemplateEdit.ts b/frontend/src/hooks/template/useTemplateEdit.ts
@@ -1,11 +1,10 @@
 import { useCallback, useState } from 'react';
 
-import { ToastContext } from '@/context/ToastContext';
+import { ToastContext } from '@/contexts';
+import { useTemplateEditMutation } from '@/queries/template';
 import type { Template, TemplateEditRequest } from '@/types';
-import { useCategory } from '../category/useCategory';
-import useCustomContext from '../utils/useCustomContext';
-import { useInput } from '../utils/useInput';
-import { useTemplateEditQuery } from './useTemplateEditQuery';
+import { useCategory } from '../category';
+import { useCustomContext, useInput } from '../utils';
 
 interface Props {
   template: Template;
@@ -27,7 +26,7 @@ export const useTemplateEdit = ({ template, toggleEditButton }: Props) => {
   const [tags, setTags] = useState<string[]>(initTags);
   const [value, handleValue, resetValue] = useInput('');
 
-  const { mutateAsync, error } = useTemplateEditQuery(template.id);
+  const { mutateAsync, error } = useTemplateEditMutation(template.id);
 
   const handleAddButtonClick = () => {
     setSnippets((prevSnippets) => [

diff --git a/frontend/src/hooks/template/useTemplateUpload.ts b/frontend/src/hooks/template/useTemplateUpload.ts
@@ -1,12 +1,11 @@
 import { useCallback, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { ToastContext } from '@/context/ToastContext';
+import { ToastContext } from '@/contexts';
+import { useTemplateUploadMutation } from '@/queries/template';
 import type { Snippet, TemplateUploadRequest } from '@/types';
-import { useCategory } from '../category/useCategory';
-import useCustomContext from '../utils/useCustomContext';
-import { useInput } from '../utils/useInput';
-import { useTemplateUploadQuery } from './useTemplateUploadQuery';
+import { useCategory } from '../category';
+import { useCustomContext, useInput } from '../utils';
 
 export const useTemplateUpload = () => {
   const navigate = useNavigate();
@@ -28,7 +27,7 @@ export const useTemplateUpload = () => {
   const [value, handleValue, resetValue] = useInput('');
   const [tags, setTags] = useState<string[]>([]);
 
-  const { mutateAsync: uploadTemplate, error } = useTemplateUploadQuery();
+  const { mutateAsync: uploadTemplate, error } = useTemplateUploadMutation();
 
   const handleCodeChange = useCallback((newContent: string, idx: number) => {
     setSnippets((prevSnippets) =>

diff --git a/frontend/src/hooks/utils/index.ts b/frontend/src/hooks/utils/index.ts
@@ -0,0 +1,9 @@
+export { useCustomContext } from './useCustomContext';
+export { useDebounce } from './useDebounce';
+export { useDropdown } from './useDropdown';
+export { useHeaderHeight } from './useHeaderHeight';
+export { useInput } from './useInput';
+export { useInputWithValidate } from './useInputWithValidate';
+export { useModal } from './useModal';
+export { useScrollToTargetElement } from './useScrollToTargetElement';
+export { useWindowWidth } from './useWindowWidth';
diff --git a/...tend/src/hooks/utils/useCustomContext.tsx → frontend/src/hooks/utils/useCustomContext.ts b/...tend/src/hooks/utils/useCustomContext.tsx → frontend/src/hooks/utils/useCustomContext.ts
@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 
-const useCustomContext = <T,>(context: React.Context<T>) => {
+export const useCustomContext = <T>(context: React.Context<T>) => {
   const value = useContext(context);
 
   if (!value) {
@@ -9,5 +9,3 @@ const useCustomContext = <T,>(context: React.Context<T>) => {
 
   return value;
 };
-
-export default useCustomContext;
diff --git a/frontend/src/hooks/utils/useHeaderHeight.ts b/frontend/src/hooks/utils/useHeaderHeight.ts
@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 
-import { HeaderContext } from '@/context/HeaderContext';
+import { HeaderContext } from '@/contexts';
 
 export const useHeaderHeight = () => {
   const context = useContext(HeaderContext);

diff --git a/frontend/src/hooks/useInputWithValidate.ts → ...d/src/hooks/utils/useInputWithValidate.ts b/frontend/src/hooks/useInputWithValidate.ts → ...d/src/hooks/utils/useInputWithValidate.ts
diff --git a/frontend/src/hooks/useWindowWidth.ts → frontend/src/hooks/utils/useWindowWidth.ts b/frontend/src/hooks/useWindowWidth.ts → frontend/src/hooks/utils/useWindowWidth.ts
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -5,9 +5,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
 
-import { HeaderProvider } from './context/HeaderContext';
-import { ToastProvider } from './context/ToastContext';
-import { AuthProvider } from './contexts/authContext';
+import { AuthProvider, HeaderProvider, ToastProvider } from '@/contexts';
 import router from './routes/router';
 import GlobalStyles from './style/GlobalStyles';
 import { theme } from './style/theme';

diff --git a/frontend/src/mocks/templateList_2.json b/frontend/src/mocks/templateList_2.json
diff --git a/frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx b/frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx
@@ -12,8 +12,8 @@ import {
   Dropdown,
   TagFilterMenu,
 } from '@/components';
-import { useWindowWidth, useDebounce } from '@/hooks';
 import { useAuth } from '@/hooks/authentication/useAuth';
+import { useWindowWidth, useDebounce } from '@/hooks/utils';
 import { useDropdown } from '@/hooks/utils/useDropdown';
 import { useInput } from '@/hooks/utils/useInput';
 import { useCategoryListQuery } from '@/queries/category';

diff --git a/frontend/src/pages/TemplateEditPage/TemplateEditPage.tsx b/frontend/src/pages/TemplateEditPage/TemplateEditPage.tsx
@@ -1,5 +1,5 @@
 import { TemplateEdit } from '@/components';
-import { useTemplateEdit } from '@/hooks/template/useTemplateEdit';
+import { useTemplateEdit } from '@/hooks/template';
 import type { Template } from '@/types';
 
 interface Props {

diff --git a/frontend/src/pages/TemplatePage/TemplatePage.tsx b/frontend/src/pages/TemplatePage/TemplatePage.tsx
@@ -5,10 +5,9 @@ import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
 import { chevron, pencilIcon, trashcanIcon } from '@/assets/images';
 import { Button, Flex, Heading, Modal, SelectList, TagButton, Text } from '@/components';
-import { ToastContext } from '@/context/ToastContext';
-import { useTemplate } from '@/hooks/template/useTemplate';
-import useCustomContext from '@/hooks/utils/useCustomContext';
-import { useModal } from '@/hooks/utils/useModal';
+import { ToastContext } from '@/contexts';
+import { useTemplate } from '@/hooks/template';
+import { useCustomContext, useModal } from '@/hooks/utils';
 import { TemplateEditPage } from '@/pages';
 import type { Snippet } from '@/types';
 import { formatRelativeTime, getLanguageByFilename } from '@/utils';

diff --git a/frontend/src/pages/index.ts b/frontend/src/pages/index.ts
@@ -1,8 +1,8 @@
+export { default as LandingPage } from './LandingPage/LandingPage';
+export { default as LoginPage } from './LoginPage/LoginPage';
 export { default as MyTemplatePage } from './MyTemplatesPage/MyTemplatePage';
+export { default as NotFoundPage } from './NotFoundPage/NotFoundPage';
+export { default as SignupPage } from './SignupPage/SignupPage';
 export { default as TemplateEditPage } from './TemplateEditPage/TemplateEditPage';
 export { default as TemplatePage } from './TemplatePage/TemplatePage';
 export { default as TemplateUploadPage } from './TemplateUploadPage/TemplateUploadPage';
-export { default as SignupPage } from './SignupPage/SignupPage';
-export { default as LoginPage } from './LoginPage/LoginPage';
-export { default as LandingPage } from './LandingPage/LandingPage';
-export { default as NotFoundPage } from './NotFoundPage/NotFoundPage';
diff --git a/frontend/src/queries/authentication/index.ts b/frontend/src/queries/authentication/index.ts
@@ -1,3 +1,5 @@
 export { useCheckEmailQuery } from './useCheckEmailQuery';
 export { useCheckUsernameQuery } from './useCheckUsernameQuery';
 export { useLoginStateQuery } from './useLoginStateQuery';
+export { useLoginMutation } from './useLoginMutation';
+export { useLogoutMutation } from './useLogoutMutation';
diff --git a/frontend/src/queries/authentication/useLoginMutation.ts b/frontend/src/queries/authentication/useLoginMutation.ts
@@ -2,9 +2,9 @@ import { useMutation } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 
 import { postLogin } from '@/api/authentication';
-import { ToastContext } from '@/context/ToastContext';
+import { ToastContext } from '@/contexts';
 import { useAuth } from '@/hooks/authentication/useAuth';
-import useCustomContext from '@/hooks/utils/useCustomContext';
+import { useCustomContext } from '@/hooks/utils';
 import { LoginRequest } from '@/types';
 
 export const useLoginMutation = () => {

diff --git a/frontend/src/queries/category/index.ts b/frontend/src/queries/category/index.ts
@@ -1,2 +1,2 @@
 export { useCategoryListQuery } from './useCategoryListQuery';
-export { useCategoryUpload } from './useCategoryUpload';
+export { useCategoryUploadMutation as useCategoryUpload } from './useCategoryUploadMutation';
diff --git a/...src/queries/category/useCategoryUpload.ts → ...ies/category/useCategoryUploadMutation.ts b/...src/queries/category/useCategoryUpload.ts → ...ies/category/useCategoryUploadMutation.ts
@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { QUERY_KEY, postCategory } from '@/api';
 
-export const useCategoryUpload = () => {
+export const useCategoryUploadMutation = () => {
   const queryClient = useQueryClient();
 
   return useMutation({

diff --git a/frontend/src/queries/template/index.ts b/frontend/src/queries/template/index.ts
@@ -1 +1,5 @@
 export { useTemplateListQuery } from './useTemplateListQuery';
+export { useTemplateQuery } from './useTemplateQuery';
+export { useTemplateUploadMutation } from './useTemplateUploadMutation';
+export { useTemplateEditMutation } from './useTemplateEditMutation';
+export { useTemplateDeleteMutation } from './useTemplateDeleteMutation';
diff --git a/.../template/useTemplateDeleteQuery.spec.tsx → ...mplate/useTemplateDeleteMutation.spec.tsx b/.../template/useTemplateDeleteQuery.spec.tsx → ...mplate/useTemplateDeleteMutation.spec.tsx
@@ -2,17 +2,17 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { renderHook, waitFor } from '@testing-library/react';
 import { PropsWithChildren } from 'react';
 
-import { useTemplateDeleteQuery } from './useTemplateDeleteQuery';
+import { useTemplateDeleteMutation } from './useTemplateDeleteMutation';
 
 const queryClient = new QueryClient();
 
 const queryWrapper = ({ children }: PropsWithChildren) => (
   <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 );
 
-describe('useTemplateDeleteQuery', () => {
+describe('useTemplateDeleteMutation', () => {
   it('templates을 삭제할 수 있다.', async () => {
-    const { result } = renderHook(() => useTemplateDeleteQuery(2024), { wrapper: queryWrapper });
+    const { result } = renderHook(() => useTemplateDeleteMutation(2024), { wrapper: queryWrapper });
 
     await result.current.mutateAsync();