♻️ Refactor: 웹스톰 문제점 항목 반영

src/Components/BeerListFunction.js

@@ -1,15 +1,17 @@
 /* eslint-disable react/prop-types */
+// noinspection JSIgnoredPromiseFromCall
+
 import React from 'react';
 import styled, { css } from 'styled-components/macro';
-import { Button, Tooltip, Popconfirm, message } from 'antd';
+import { Button, message, Popconfirm, Tooltip } from 'antd';
 import { ControlFilled } from '@ant-design/icons';
 import { useDispatch, useSelector } from 'react-redux';
 import FunctionWrapper from './FunctionWrapper';
 import { abvRange } from '../Constants';
 import { resetColumns } from '../Modules/tableColumns';
 
 const BeerListFunction = function ({ selectedRange, setSelectedRange }) {
-  const { isModified } = useSelector(state => state.tableColumns);
+  const { isModified } = useSelector(({ tableColumns }) => tableColumns);
   const dispatch = useDispatch();
 
   const resetColumn = () => {

src/Components/FavoriteEntry.js

@@ -1,8 +1,10 @@
 /* eslint-disable react/prop-types */
+// noinspection JSIgnoredPromiseFromCall
+
 import React from 'react';
 import styled from 'styled-components/macro';
 import { useDispatch } from 'react-redux';
-import { Popconfirm, message, Modal } from 'antd';
+import { message, Modal, Popconfirm } from 'antd';
 import { removeFromFavorites } from '../Modules/favoriteList';
 import ModalContents from './ModalContents';
 import { beerInfoEntries } from '../Constants';

src/Components/ModalContents.js

@@ -103,7 +103,6 @@ S.ContentWrapper = styled.section`
   }
 
   h1 {
-    text-align: center;
     margin: 5px 0;
     color: gray;
     text-align: left;

src/Components/NotFoundPage.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components/macro';
-import { Result, Button } from 'antd';
+import { Button, Result } from 'antd';
 import { ContainerStyle } from '../Styles/commonStyles';
 
 const NotFoundPage = function ({ history }) {
@@ -37,7 +37,7 @@ const Container = styled.section`
 
   .ant-result-title, .ant-result-subtitle {
     color: white;
-    font-weight: 500px;
+    font-weight: 500;
   }
 `;
 

src/Hooks/useImage.js

@@ -4,7 +4,7 @@ import styled from 'styled-components/macro';
 
 const useImage = function (src, spinSize = 'default') {
   const [isLoading, setIsLoading] = useState(true);
-  const Image = function () {
+  return function Image() {
     return (
       <>
         {isLoading && <Spin size={spinSize} />}
@@ -17,8 +17,6 @@ const useImage = function (src, spinSize = 'default') {
       </>
     );
   };
-
-  return Image;
 };
 
 const StyledImage = styled.img`

src/Pages/BeerListPage.js

@@ -1,24 +1,24 @@
 import React, { useState } from 'react';
 import MaterialTable from 'material-table';
-import { useSelector, useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components/macro';
 import { AddBox } from '@material-ui/icons';
-import { notification, Modal } from 'antd';
+import { Modal, notification } from 'antd';
 import ModalContents from '../Components/ModalContents';
 import tableIcons from '../Assets/tableIcons';
 import Pagination from '../Components/PatchedPagination';
 import { ContainerStyle, ScrollStyle } from '../Styles/commonStyles';
 import { setColumnsRequest } from '../Modules/tableColumns';
 import { addToFavorites } from '../Modules/favoriteList';
-import { getTableOptions, filterDataByAbv } from '../Utils';
+import { filterDataByAbv, getTableOptions } from '../Utils';
 import { abvRange } from '../Constants';
 import BeerListFunction from '../Components/BeerListFunction';
 
 const BeerListPage = function () {
   const dispatch = useDispatch();
-  const beers = useSelector(state => state.beerList);
-  const columns = useSelector(state => state.tableColumns);
-  const { favorites } = useSelector(state => state.favoriteList);
+  const beers = useSelector(({ beerList }) => beerList);
+  const columns = useSelector(({ tableColumns }) => tableColumns);
+  const { favorites } = useSelector(({ favoriteList }) => favoriteList);
 
   const [selectedRange, setSelectedRange] = useState(new Set());
 
@@ -94,12 +94,12 @@ const BeerListPage = function () {
 
 const S = {};
 S.Container = styled.section`
-  ${ContainerStyle}
+  ${ContainerStyle};
   font-size: 1rem;
 `;
 
 S.TableWrapper = styled.section`
-  ${ScrollStyle}
+  ${ScrollStyle};
   width: 75vw;
   max-height: 68vh;
   overflow: auto;

src/Pages/FavoritePage.js

@@ -1,7 +1,9 @@
+// noinspection JSIgnoredPromiseFromCall
+
 import React from 'react';
 import styled, { css } from 'styled-components/macro';
-import { useSelector, useDispatch } from 'react-redux';
-import { Modal, message, Empty, Button, Tooltip } from 'antd';
+import { useDispatch, useSelector } from 'react-redux';
+import { Button, Empty, message, Modal, Tooltip } from 'antd';
 import { DeleteFilled } from '@ant-design/icons';
 import { clearFavorites } from '../Modules/favoriteList';
 import FavoriteEntry from '../Components/FavoriteEntry';
@@ -10,8 +12,8 @@ import FunctionWrapper from '../Components/FunctionWrapper';
 
 const FavoritePage = function () {
   const dispatch = useDispatch();
-  const { rawData: beers } = useSelector(state => state.beerList);
-  const { favorites } = useSelector(state => state.favoriteList);
+  const { rawData: beers } = useSelector(({ beerList }) => beerList);
+  const { favorites } = useSelector(({ favoriteList }) => favoriteList);
 
   const clearFavoritesHandler = () => {
     if (favorites?.length === 0) {

src/Pages/HomePage.js

@@ -7,7 +7,7 @@ import beerIcon from '../Assets/beer.png';
 import { ContainerStyle, UnderlineStyle } from '../Styles/commonStyles';
 
 const HomePage = function ({ history }) {
-  const { rawData, loading } = useSelector(state => state.beerList);
+  const { rawData, loading } = useSelector(({ beerList }) => beerList);
 
   return (
     <S.Container>

src/Routes.js

@@ -2,9 +2,9 @@ import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   BrowserRouter as Router,
+  Redirect,
   Route,
   Switch,
-  Redirect,
 } from 'react-router-dom';
 import Nav from './Components/Nav';
 import HomePage from './Pages/HomePage';
@@ -15,7 +15,7 @@ import NotFoundPage from './Components/NotFoundPage';
 
 const Routes = function () {
   const dispatch = useDispatch();
-  const { rawData } = useSelector(state => state.beerList);
+  const { rawData } = useSelector(({ beerList }) => beerList);
 
   useEffect(() => {
     if (!rawData || rawData.length < 325) dispatch(getBeerListRequest());

src/Utils/index.js

@@ -14,7 +14,7 @@ export const filterDataByAbv = (selectedRange, data, abvRange) => {
 };
 
 export const getTableOptions = styles => {
-  const defaultOptions = {
+  return {
     headerStyle: styles?.headerStyle ?? {
       backgroundColor: '#1890FF',
       color: '#FFF',
@@ -23,5 +23,4 @@ export const getTableOptions = styles => {
     pageSize: styles?.pageSize ?? 6,
     pageSizeOptions: styles?.pageSizeOptions ?? [6, 10, 15],
   };
-  return defaultOptions;
 };