[FE] front디렉토리 path-alias 설정 (#121)

frontend/config-overrides.js

@@ -0,0 +1,10 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const { override, addWebpackAlias } = require('customize-cra');
+const path = require('path');
+
+module.exports = override(
+  addWebpackAlias({
+    '@': path.resolve(__dirname, 'src'),
+  }),
+);

frontend/package.json

@@ -24,9 +24,9 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -53,11 +53,18 @@
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.42.1",
     "@typescript-eslint/parser": "^5.42.1",
+    "customize-cra": "^1.0.0",
     "eslint": "^8.27.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "react-app-rewired": "^2.2.1",
     "prettier": "^2.7.1"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "@/(.*)": "<rootDir>/src/$1"
+    }
   }
-}
+}

frontend/src/App.tsx

@@ -1,15 +1,15 @@
+import { LoaderWrapper } from '@/components';
+import { PATH_DETAIL, PATH_MAIN, PATH_SEARCH_LIST } from '@/constants/path';
+import { ErrorBoundary } from '@/error';
+import GlobalStyle from '@/style/GlobalStyle';
+import theme from '@/style/theme';
 import { AxiosError } from 'axios';
 import React, { Suspense } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
 import { Route, Routes, useLocation } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
 import { Reset } from 'styled-reset';
-import LoaderWrapper from './components/loader/LoaderWrapper';
-import { PATH_DETAIL, PATH_MAIN, PATH_SEARCH_LIST } from './constants/path';
-import ErrorBoundary from './error/ErrorBoundary';
-import GlobalStyle from './style/GlobalStyle';
-import theme from './style/theme';
 
 const Main = React.lazy(() => import('./pages/Main/Main'));
 const SearchList = React.lazy(() => import('./pages/SearchList/SearchList'));

frontend/src/components/Footer.tsx

@@ -1,5 +1,5 @@
+import { GithubLogoIcon } from '@/icons';
 import styled from 'styled-components';
-import GithubLogoIcon from '../icons/GithubLogoIcon';
 
 interface FooterProps {
   bgColor?: string;

frontend/src/components/index.ts

@@ -0,0 +1,6 @@
+export { default as Footer } from './Footer';
+export { default as IconButton } from './IconButton';
+export { default as LoaderWrapper } from './loader/LoaderWrapper';
+export { default as MoonLoader } from './loader/MoonLoader';
+export { default as Pagination } from './Pagination';
+export { default as Search } from './search/Search';

frontend/src/components/loader/MoonLoader.tsx

@@ -1,7 +1,7 @@
+import theme from '@/style/theme';
 import * as d3 from 'd3';
 import { memo, useEffect, useRef } from 'react';
 import styled from 'styled-components';
-import theme from '../../style/theme';
 
 const MoonLoader = () => {
   const pathRef = useRef<SVGPathElement>(null);

frontend/src/components/search/AutoCompletedList.tsx

@@ -1,8 +1,7 @@
+import { IAutoCompletedItem } from '@/api/api';
+import { highlightKeyword, removeTag, sliceTitle } from '@/utils/format';
 import { Dispatch, SetStateAction, useEffect } from 'react';
 import styled from 'styled-components';
-import { IAutoCompletedItem } from '../../api/api';
-import { highlightKeyword, removeTag, sliceTitle } from '../../utils/format';
-
 interface AutoCompletedListProps {
   autoCompletedItems?: IAutoCompletedItem[];
   keyword: string;

frontend/src/components/search/RecentKeywordsList.tsx

@@ -1,7 +1,7 @@
+import { ClockIcon } from '@/icons';
 import { isEmpty } from 'lodash-es';
 import { Dispatch, SetStateAction, useEffect } from 'react';
 import styled from 'styled-components';
-import Clockicon from '../../icons/ClockIcon';
 
 interface RecentKeywordsListProps {
   recentKeywords: string[];
@@ -30,7 +30,7 @@ const RecentKeywordsList = ({
             onMouseOver={() => setHoveredIndex(i)}
             onMouseDown={() => handleMouseDown(keyword)}
           >
-            <Clockicon />
+            <ClockIcon />
             {keyword}
           </Keyword>
         ))

frontend/src/components/search/Search.tsx

@@ -1,16 +1,15 @@
+import { IPaperDetail } from '@/api/api';
+import { IconButton, MoonLoader } from '@/components';
+import { PATH_SEARCH_LIST } from '@/constants/path';
+import { useDebouncedValue } from '@/hooks';
+import { MagnifyingGlassIcon } from '@/icons';
+import { useAutoCompleteQuery } from '@/queries/queries';
+import { createDetailQuery } from '@/utils/createQueryString';
+import { getDoiKey, isDoiFormat } from '@/utils/format';
+import { getLocalStorage, setLocalStorage } from '@/utils/storage';
 import { ChangeEvent, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createSearchParams, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
-import { IPaperDetail } from '../../api/api';
-import { PATH_SEARCH_LIST } from '../../constants/path';
-import useDebounceValue from '../../hooks/useDebouncedValue';
-import MaginifyingGlassIcon from '../../icons/MagnifyingGlassIcon';
-import { useAutoCompleteQuery } from '../../queries/queries';
-import { createDetailQuery } from '../../utils/createQueryString';
-import { getDoiKey, isDoiFormat } from '../../utils/format';
-import { getLocalStorage, setLocalStorage } from '../../utils/storage';
-import IconButton from '../IconButton';
-import MoonLoader from '../loader/MoonLoader';
 import AutoCompletedList from './AutoCompletedList';
 import RecentKeywordsList from './RecentKeywordsList';
 
@@ -32,7 +31,7 @@ const Search = ({ initialKeyword = '' }: SearchProps) => {
   const [hoverdIndex, setHoveredIndex] = useState<number>(-1);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const debouncedValue = useDebounceValue(keyword, 150);
+  const debouncedValue = useDebouncedValue(keyword, 150);
 
   const { isLoading, data: autoCompletedItems } = useAutoCompleteQuery(debouncedValue, {
     enabled: !!(debouncedValue && debouncedValue.length >= 2 && isFocused),
@@ -193,7 +192,7 @@ const Search = ({ initialKeyword = '' }: SearchProps) => {
             onKeyDown={handleInputKeyDown}
           />
           <IconButton
-            icon={<MaginifyingGlassIcon />}
+            icon={<MagnifyingGlassIcon />}
             onClick={() => handleSearchButtonClick(keyword)}
             aria-label="검색"
           />

frontend/src/error/index.ts

@@ -0,0 +1,3 @@
+export { default as ErrorBoundary } from './ErrorBoundary';
+export { default as GlobalErrorFallback } from './GlobalErrorFallback';
+export { default as RankingErrorFallback } from './RankingErrorFallback';

frontend/src/hooks/graph/useGraphData.ts

@@ -1,5 +1,5 @@
+import { IPaperDetail } from '@/api/api';
 import { useEffect, useRef, useState } from 'react';
-import { IPaperDetail } from './../../api/api';
 
 export default function useGraphData<T>(data: IPaperDetail) {
   const [links, setLinks] = useState<any[]>([]);

frontend/src/hooks/graph/useNodeUpdate.ts

@@ -1,6 +1,6 @@
+import theme from '@/style/theme';
 import * as d3 from 'd3';
 import { useCallback } from 'react';
-import theme from '../../style/theme';
 
 const NORMAL_SYMBOL_SIZE = 20;
 const STAR_SYMBOL_SIZE = 100;

frontend/src/hooks/index.ts

@@ -0,0 +1,7 @@
+export { default as useGraphData } from './graph/useGraphData';
+export { default as useGraphEmphasize } from './graph/useGraphEmphasize';
+export { default as useGraphZoom } from './graph/useGraphZoom';
+export { default as useLinkUpdate } from './graph/useLinkUpdate';
+export { default as useNodeUpdate } from './graph/useNodeUpdate';
+export { default as useDebouncedValue } from './useDebouncedValue';
+export { default as useInterval } from './useInterval';

frontend/src/icons/ClockIcon.tsx

@@ -1,4 +1,4 @@
-import theme from '../style/theme';
+import theme from '@/style/theme';
 
 const Clockicon = () => {
   return (

frontend/src/icons/index.ts

@@ -0,0 +1,7 @@
+export { default as ClockIcon } from './ClockIcon';
+export { default as DropdownIcon } from './DropdownIcon';
+export { default as DropdownReverseIcon } from './DropdownReverseIcon';
+export { default as GithubLogoIcon } from './GithubLogoIcon';
+export { default as LogoIcon } from './LogoIcon';
+export { default as MagnifyingGlassIcon } from './MagnifyingGlassIcon';
+export { default as PreviousButtonIcon } from './PreviousButtonIcon';

frontend/src/pages/Main/Main.tsx

@@ -1,9 +1,7 @@
+import { Footer, Search } from '@/components';
+import { ErrorBoundary, RankingErrorFallback } from '@/error';
+import { LogoIcon } from '@/icons';
 import styled from 'styled-components';
-import Footer from '../../components/Footer';
-import Search from '../../components/search/Search';
-import ErrorBoundary from '../../error/ErrorBoundary';
-import RankingErrorFallback from '../../error/RankingErrorFallback';
-import LogoIcon from '../../icons/LogoIcon';
 import KeywordRanking from './components/KeywordRanking';
 import StarLayer from './components/StarLayer';
 

frontend/src/pages/Main/components/KeywordRanking.tsx

@@ -1,11 +1,10 @@
+import { IconButton } from '@/components';
+import { DropdownIcon, DropdownReverseIcon } from '@/icons';
+import { useKeywordRankingQuery } from '@/queries/queries';
+import { createSearchQuery } from '@/utils/createQueryString';
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
-import IconButton from '../../../components/IconButton';
-import DropdownIcon from '../../../icons/DropdownIcon';
-import DropDownReverseIcon from '../../../icons/DropdownReverseIcon';
-import { useKeywordRankingQuery } from '../../../queries/queries';
-import { createSearchQuery } from '../../../utils/createQueryString';
 import RankingSlide from './RankingSlide';
 
 const KeywordRanking = () => {
@@ -26,7 +25,7 @@ const KeywordRanking = () => {
             {!isLoading && rankingData?.length ? <RankingSlide rankingData={rankingData} /> : '데이터가 없습니다.'}
           </RankingContent>
           <IconButton
-            icon={isRankingListOpen ? <DropDownReverseIcon /> : <DropdownIcon />}
+            icon={isRankingListOpen ? <DropdownReverseIcon /> : <DropdownIcon />}
             onClick={handleRankingClick}
             aria-label={isRankingListOpen ? '인기검색어 목록 닫기' : '인기검색어 목록 펼치기'}
           />

frontend/src/pages/Main/components/RankingSlide.tsx

@@ -1,6 +1,6 @@
+import { useInterval } from '@/hooks';
 import { useState } from 'react';
 import styled from 'styled-components';
-import useInterval from '../../../hooks/useInterval';
 
 interface IRankingData {
   keyword: string;

frontend/src/pages/Main/components/StarLayer.tsx

@@ -1,7 +1,7 @@
+import theme from '@/style/theme';
 import { debounce } from 'lodash-es';
 import { useEffect, useMemo, useState } from 'react';
 import styled, { keyframes } from 'styled-components';
-import theme from '../../../style/theme';
 
 const COLORS = [
   theme.COLOR.secondary1,