Merge pull request #643 from woowacourse-teams/refactor/639-change-fo…

…lder-structure

�프론트엔드 폴더 구조 변경 및 Sentry org 변경

frontend/.eslintrc.json

@@ -51,10 +51,7 @@
     "import/order": [
       "error",
       {
-        "groups": [
-          ["builtin", "external"],
-          ["internal", "parent", "sibling", "index", "type"]
-        ],
+        "groups": [["builtin", "external"], ["internal"], ["parent", "sibling", "index", "type"]],
         "warnOnUnassignedImports": true,
         "alphabetize": { "order": "asc" },
         "newlines-between": "always",
@@ -71,7 +68,22 @@
             "position": "before"
           },
           {
-            "pattern": "./**",
+            "pattern": "../",
+            "group": "parent",
+            "position": "before"
+          },
+          {
+            "pattern": "./components",
+            "group": "sibling",
+            "position": "before"
+          },
+          {
+            "pattern": "./hooks",
+            "group": "sibling",
+            "position": "before"
+          },
+          {
+            "pattern": "./*.style",
             "group": "sibling",
             "position": "after"
           }

frontend/package.json

@@ -1,12 +1,12 @@
 {
   "name": "code-zap",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "jest",
     "dev": "webpack-dev-server --config webpack.dev.js --open",
-    "tsc": "npx tsc --noEmit",
+    "tsc": "tsc --noEmit",
     "build": "webpack --mode production --config webpack.prod.js",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",

frontend/src/components/Button/Button.style.ts

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { theme } from '@/style/theme';
+
 import type { Props } from './Button';
 
 const variants = (color: string | undefined) => ({

frontend/src/components/Dropdown/Dropdown.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { useDropdown } from '@/hooks/utils/useDropdown';
+import { useDropdown } from '@/hooks';
+
 import Dropdown from './Dropdown';
 
 const meta: Meta<typeof Dropdown> = {

frontend/src/components/Dropdown/Dropdown.tsx

@@ -1,4 +1,5 @@
 import { ChevronIcon } from '@/assets/images';
+
 import { theme } from '../../style/theme';
 import Text from '../Text/Text';
 import * as S from './Dropdown.style';

frontend/src/components/Footer/Footer.tsx

@@ -1,4 +1,5 @@
 import { Text } from '@/components';
+
 import * as S from './Footer.style';
 
 const Footer = () => (

frontend/src/components/Header/Header.style.ts

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { theme } from '@/style/theme';
+
 import Button from '../Button/Button';
 
 export const HeaderContainer = styled.nav`

frontend/src/components/Header/Header.tsx

@@ -4,12 +4,13 @@ import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { CodeZapLogo, HamburgerIcon, PlusIcon } from '@/assets/images';
 import { Button, Flex, Heading, Text } from '@/components';
 import { ToastContext } from '@/contexts';
+import { useCustomContext, useToggle } from '@/hooks';
 import { useAuth } from '@/hooks/authentication/useAuth';
-import { useCustomContext, useToggle } from '@/hooks/utils';
-import { usePressESC } from '@/hooks/utils/usePressESC';
-import { useScrollDisable } from '@/hooks/utils/useScrollDisable';
+import { usePressESC } from '@/hooks/usePressESC';
+import { useScrollDisable } from '@/hooks/useScrollDisable';
 import { useLogoutMutation } from '@/queries/authentication/useLogoutMutation';
 import { END_POINTS } from '@/routes';
+
 import { theme } from '../../style/theme';
 import * as S from './Header.style';
 

frontend/src/components/Layout/Layout.tsx

@@ -4,8 +4,9 @@ import { useEffect, useRef } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 
 import { Footer, Header } from '@/components';
-import { useHeaderHeight } from '@/hooks/utils/useHeaderHeight';
+import { useHeaderHeight } from '@/hooks/useHeaderHeight';
 import { NotFoundPage } from '@/pages';
+
 import * as S from './Layout.style';
 
 const Layout = () => {

frontend/src/components/PagingButtons/PagingButtons.tsx

@@ -1,5 +1,6 @@
 import { Text } from '@/components';
 import { theme } from '@/style/theme';
+
 import * as S from './PagingButtons.style';
 
 interface Props {

frontend/src/components/SelectList/SelectList.tsx

@@ -2,6 +2,7 @@ import { useTheme } from '@emotion/react';
 import { PropsWithChildren } from 'react';
 
 import { Text } from '@/components';
+
 import * as S from './SelectList.style';
 
 export interface OptionProps {

frontend/src/components/SourceCodeEditor/SourceCodeEditor.tsx

@@ -5,9 +5,10 @@ import CodeMirror, { ReactCodeMirrorRef } from '@uiw/react-codemirror';
 import { ChangeEvent, useRef } from 'react';
 
 import { ToastContext } from '@/contexts';
-import { useCustomContext } from '@/hooks/utils';
+import { useCustomContext } from '@/hooks';
 import { validateFileName, validateSourceCode } from '@/service';
 import { getLanguageByFilename } from '@/utils';
+
 import * as S from './SourceCodeEditor.style';
 
 interface Props {

frontend/src/components/TagInput/TagInput.tsx

@@ -2,7 +2,7 @@ import { ChangeEvent, Dispatch, KeyboardEvent, SetStateAction } from 'react';
 
 import { Flex, Input, TagButton, Text } from '@/components';
 import { ToastContext } from '@/contexts';
-import { useCustomContext } from '@/hooks/utils';
+import { useCustomContext } from '@/hooks';
 import { validateTagLength } from '@/service/validates';
 import { theme } from '@/style/theme';
 import { removeAllWhitespace } from '@/utils/removeAllWhitespace';

frontend/src/components/TemplateCard/TemplateCard.tsx

@@ -4,11 +4,12 @@ import CodeMirror, { EditorView } from '@uiw/react-codemirror';
 
 import { PersonIcon } from '@/assets/images';
 import { Button, Flex, TagButton, Text } from '@/components';
-import { useToggle } from '@/hooks/utils';
+import { useToggle } from '@/hooks';
 import { theme } from '@/style/theme';
 import type { Tag, TemplateListItem } from '@/types';
 import { getLanguageByFilename } from '@/utils';
 import { formatRelativeTime } from '@/utils/formatRelativeTime';
+
 import * as S from './TemplateCard.style';
 
 interface Props {

frontend/src/components/index.ts

@@ -1,6 +1,4 @@
 export { default as Button } from './Button/Button';
-export { default as CategoryEditModal } from './CategoryEditModal/CategoryEditModal';
-export { default as CategoryFilterMenu } from './CategoryFilterMenu/CategoryFilterMenu';
 export { default as Dropdown } from './Dropdown/Dropdown';
 export { default as Flex } from './Flex/Flex';
 export { default as Header } from './Header/Header';
@@ -12,11 +10,8 @@ export { default as PagingButtons } from './PagingButtons/PagingButtons';
 export { default as SelectList } from './SelectList/SelectList';
 export { default as SourceCodeEditor } from './SourceCodeEditor/SourceCodeEditor';
 export { default as TagButton } from './TagButton/TagButton';
-export { default as TagFilterMenu } from './TagFilterMenu/TagFilterMenu';
 export { default as TagInput } from './TagInput/TagInput';
 export { default as TemplateCard } from './TemplateCard/TemplateCard';
-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 Guide } from './Guide/Guide';

frontend/src/hooks/authentication/index.ts

@@ -1,3 +1 @@
-export { useSignupForm } from './useSignupForm';
 export { useAuth } from './useAuth';
-export { useLoginForm } from './useLoginForm';

frontend/src/hooks/category/useCategory.ts

@@ -1,6 +1,7 @@
-import { useCategoryListQuery } from '@/queries/category';
+import { useCategoryListQuery } from '@/queries/categories';
 import type { Category } from '@/types';
-import { useDropdown } from '../utils/useDropdown';
+
+import { useDropdown } from '../';
 
 export const useCategory = (initCategory?: Category) => {
   const { data } = useCategoryListQuery();

frontend/src/hooks/utils/useSelectList.ts → frontend/src/hooks/useSelectList.ts

@@ -1,6 +1,7 @@
 import { useRef, useState } from 'react';
 
 import { SourceCodes } from '@/types';
+
 import { useScrollToTargetElement } from './useScrollToTargetElement';
 
 export const useSelectList = (sourceCodes: SourceCodes[]) => {

frontend/src/index.tsx

@@ -6,6 +6,7 @@ import ReactDOM from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
 
 import { AuthProvider, HeaderProvider, ToastProvider } from '@/contexts';
+
 import router from './routes/router';
 import GlobalStyles from './style/GlobalStyles';
 import { theme } from './style/theme';
@@ -33,9 +34,9 @@ const enableMocking = async () => {
     return;
   }
 
-  const { worker } = await import('./mocks/browser');
+  // const { worker } = await import('./mocks/browser');
 
-  await worker.start();
+  // await worker.start();
 };
 
 enableMocking().then(() => {

frontend/src/pages/LandingPage/LandingPage.style.ts

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { EditorView } from '@uiw/react-codemirror';
 
 export const Container = styled.div`
   max-width: 1200px;
@@ -101,3 +102,8 @@ export const SyntaxHighlighterWrapper = styled.div<{ isOpen: boolean }>`
   max-height: ${({ isOpen }) => (isOpen ? '1000rem' : '0')};
   animation: ${({ isOpen }) => (!isOpen ? 'collapse' : 'expand')} 0.7s ease-in-out forwards;
 `;
+
+export const CustomCodeMirrorTheme = EditorView.theme({
+  '.cm-activeLine': { backgroundColor: `transparent !important` },
+  '.cm-activeLineGutter': { backgroundColor: `transparent !important` },
+});

frontend/src/pages/LandingPage/LandingPage.tsx

@@ -5,13 +5,13 @@ import { Link } from 'react-router-dom';
 
 import { CheckCircleIcon, ChevronIcon, ZapzapLogo } from '@/assets/images';
 import { Button, Flex, Heading, Text } from '@/components';
-import { CustomCodeMirrorTheme } from '@/components/TemplateCard/TemplateCard.style';
 import { ToastContext } from '@/contexts';
+import { useCustomContext } from '@/hooks';
 import { useAuth } from '@/hooks/authentication';
-import { useCustomContext } from '@/hooks/utils';
 import { theme } from '@/style/theme';
 import { SourceCodes } from '@/types';
 import { getLanguageByFilename } from '@/utils';
+
 import * as S from './LandingPage.style';
 
 const LandingPage = () => {
@@ -158,7 +158,7 @@ const ExamCode = () => {
           theme={quietlight}
           extensions={[
             loadLanguage(getLanguageByFilename(sourceCode?.filename) as LanguageName) || [],
-            CustomCodeMirrorTheme,
+            S.CustomCodeMirrorTheme,
             EditorView.editable.of(false),
           ]}
           css={{

frontend/src/pages/LoginPage/LoginPage.tsx

@@ -2,9 +2,10 @@ import { Link } from 'react-router-dom';
 
 import { EyeIcon, ZapzapLogo } from '@/assets/images';
 import { Button, Flex, Input, Text } from '@/components';
-import { useLoginForm } from '@/hooks/authentication/useLoginForm';
-import { useToggle } from '@/hooks/utils';
+import { useToggle } from '@/hooks';
 import { END_POINTS } from '@/routes';
+
+import { useLoginForm } from './hooks';
 import * as S from './LoginPage.style';
 
 const LoginPage = () => {

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

@@ -0,0 +1 @@
+export { useLoginForm } from './useLoginForm';

frontend/src/hooks/authentication/useLoginForm.ts → frontend/src/pages/LoginPage/hooks/useLoginForm.ts

@@ -1,6 +1,6 @@
 import { FormEvent } from 'react';
 
-import { useInputWithValidate } from '@/hooks/utils';
+import { useInputWithValidate } from '@/hooks';
 import { useLoginMutation } from '@/queries/authentication';
 import { validateName, validatePassword } from '@/service';
 

frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx

@@ -3,30 +3,17 @@ import { useNavigate } from 'react-router-dom';
 
 import { DEFAULT_SORTING_OPTION, SORTING_OPTIONS } from '@/api';
 import { ArrowUpIcon, PlusIcon, SearchIcon, ZapzapCuriousLogo } from '@/assets/images';
-import {
-  CategoryFilterMenu,
-  Flex,
-  Heading,
-  Input,
-  TemplateGrid,
-  PagingButtons,
-  Dropdown,
-  TagFilterMenu,
-  Button,
-  Modal,
-  Text,
-  LoadingBall,
-} from '@/components';
-import { useAuth } from '@/hooks/authentication/useAuth';
-import { useWindowWidth, useDebounce, useToggle } from '@/hooks/utils';
-import { useDropdown } from '@/hooks/utils/useDropdown';
-import { useInput } from '@/hooks/utils/useInput';
-import { useCategoryListQuery } from '@/queries/category';
-import { useTagListQuery } from '@/queries/tag';
-import { useTemplateDeleteMutation, useTemplateListQuery } from '@/queries/template';
+import { Flex, Heading, Input, PagingButtons, Dropdown, Button, Modal, Text, LoadingBall } 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 { END_POINTS } from '@/routes';
 import { theme } from '@/style/theme';
 import { scroll } from '@/utils';
+
+import { CategoryFilterMenu, TemplateGrid, TagFilterMenu } from './components';
 import * as S from './MyTemplatePage.style';
 
 const getGridCols = (windowWidth: number) => (windowWidth <= 1024 ? 1 : 2);

frontend/src/components/CategoryEditModal/CategoryEditModal.tsx → frontend/src/pages/MyTemplatesPage/components/CategoryEditModal/CategoryEditModal.tsx

@@ -4,10 +4,11 @@ import { useState } from 'react';
 import { PencilIcon, SpinArrowIcon, TrashcanIcon } from '@/assets/images';
 import { Text, Modal, Input, Flex, Button } from '@/components';
 import { useCategoryNameValidation } from '@/hooks/category';
-import { useCategoryDeleteMutation, useCategoryEditMutation, useCategoryUploadMutation } from '@/queries/category';
+import { useCategoryDeleteMutation, useCategoryEditMutation, useCategoryUploadMutation } from '@/queries/categories';
 import { validateCategoryName } from '@/service/validates';
 import { theme } from '@/style/theme';
 import type { Category, CustomError } from '@/types';
+
 import * as S from './CategoryEditModal.style';
 
 interface CategoryEditModalProps {

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { categories } from '@/mocks/categoryList.json';
+
 import CategoryFilterMenu from './CategoryFilterMenu';
 
 const meta: Meta<typeof CategoryFilterMenu> = {

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

@@ -1,10 +1,12 @@
 import { useMemo, useState } from 'react';
 
 import { BooksIcon, Chevron2Icon, SettingIcon } from '@/assets/images';
-import { Text, CategoryEditModal } from '@/components';
-import { useToggle, useWindowWidth } from '@/hooks/utils';
+import { Text } from '@/components';
+import { useToggle, useWindowWidth } from '@/hooks';
 import { theme } from '@/style/theme';
 import type { Category } from '@/types';
+
+import { CategoryEditModal } from '../';
 import * as S from './CategoryFilterMenu.style';
 
 interface CategoryMenuProps {

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

@@ -2,9 +2,10 @@ import { useState, useRef, useEffect } from 'react';
 
 import { ChevronIcon } from '@/assets/images';
 import { TagButton } from '@/components';
-import { useToggle, useWindowWidth } from '@/hooks/utils';
+import { useToggle, useWindowWidth } from '@/hooks';
 import type { Tag } from '@/types';
 import { remToPx } from '@/utils';
+
 import * as S from './TagFilterMenu.style';
 
 const LINE_HEIGHT_REM = 1.875;

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

@@ -0,0 +1,4 @@
+export { default as CategoryEditModal } from './CategoryEditModal/CategoryEditModal';
+export { default as CategoryFilterMenu } from './CategoryFilterMenu/CategoryFilterMenu';
+export { default as TagFilterMenu } from './TagFilterMenu/TagFilterMenu';
+export { default as TemplateGrid } from './TemplateGrid/TemplateGrid';

frontend/src/pages/SignupPage/SignupPage.tsx

@@ -2,8 +2,9 @@ import { Link } from 'react-router-dom';
 
 import { EyeIcon, ZapzapLogo } from '@/assets/images';
 import { Button, Flex, Input, Text } from '@/components';
-import { useSignupForm } from '@/hooks/authentication';
-import { useToggle } from '@/hooks/utils';
+import { useToggle } from '@/hooks';
+
+import { useSignupForm } from './hooks';
 import * as S from './SignupPage.style';
 
 const SignupPage = () => {

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

@@ -0,0 +1 @@
+export { useSignupForm } from './useSignupForm';