♻️ Refactor: 라우팅 예외 컴포넌트 추가 / 리듀서&액션 이름 수정

src/Components/BeerListFunction.js

@@ -6,10 +6,10 @@ import { ControlFilled } from '@ant-design/icons';
 import { useDispatch, useSelector } from 'react-redux';
 import FunctionWrapper from './FunctionWrapper';
 import { abvRange } from '../Constants';
-import { resetColumns } from '../Modules/listColumns';
+import { resetColumns } from '../Modules/tableColumns';
 
 const BeerListFunction = function ({ selectedRange, setSelectedRange }) {
-  const { isModified } = useSelector(state => state.listColumnReducer);
+  const { isModified } = useSelector(state => state.tableColumns);
   const dispatch = useDispatch();
 
   const resetColumn = () => {

src/Components/FavoriteEntry.js

@@ -3,7 +3,7 @@ import React from 'react';
 import styled from 'styled-components/macro';
 import { useDispatch } from 'react-redux';
 import { Popconfirm, message, Modal } from 'antd';
-import { removeFromFavorite } from '../Modules/favoriteList';
+import { removeFromFavorites } from '../Modules/favoriteList';
 import ModalContents from './ModalContents';
 import { beerInfoEntries } from '../Constants';
 import useImage from '../Hooks/useImage';
@@ -13,7 +13,7 @@ const FavoriteEntry = function ({ data }) {
   const Image = useImage(data.image_url);
 
   const removeHandler = () => {
-    dispatch(removeFromFavorite(data.id));
+    dispatch(removeFromFavorites(data.id));
     message.success('삭제 되었습니다');
   };
 

src/Components/NotFoundPage.js

@@ -0,0 +1,32 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import styled from 'styled-components/macro';
+import { Result, Button } from 'antd';
+import { ContainerStyle } from '../Styles/commonStyles';
+
+const NotFoundPage = function ({ history }) {
+  return (
+    <Container>
+      <Result
+        status="404"
+        title="페이지를 찾을 수 없어요!"
+        extra={
+          <Button type="primary" onClick={() => history.push('/home')}>
+            Back Home
+          </Button>
+        }
+      />
+    </Container>
+  );
+};
+
+const Container = styled.section`
+  ${ContainerStyle}
+
+  .ant-result-title, .ant-result-subtitle {
+    color: white;
+    font-weight: 500px;
+  }
+`;
+
+export default NotFoundPage;

src/Modules/beerList.js

@@ -22,7 +22,7 @@ export const getBeerListFailed = payload => ({
   payload,
 });
 
-const beerListReducer = (state = initialState, { type, payload } = {}) => {
+export default function reducer(state = initialState, { type, payload } = {}) {
   switch (type) {
     case GET_BEER_LIST_REQUEST:
       return {
@@ -45,6 +45,4 @@ const beerListReducer = (state = initialState, { type, payload } = {}) => {
     default:
       return state;
   }
-};
-
-export default beerListReducer;
+}

src/Modules/favoriteList.js

@@ -4,41 +4,39 @@ const initialState = {
   favorites: [],
 };
 
-export const ADD_FAVORITE = '/favoriteList/ADD_FAVORITE';
-export const REMOVE_FAVORITE = '/favoriteList/REMOVE_FAVORITE';
-export const CLEAR_FAVORITE = '/favoriteList/CLEAR_FAVORITE';
+export const ADD_FAVORITES = 'favoriteList/ADD_FAVORITES';
+export const REMOVE_FAVORITES = 'favoriteList/REMOVE_FAVORITES';
+export const CLEAR_FAVORITES = 'favoriteList/CLEAR_FAVORITES';
 
-export const addToFavorite = beerId => ({
-  type: ADD_FAVORITE,
+export const addToFavorites = beerId => ({
+  type: ADD_FAVORITES,
   payload: beerId,
 });
 
-export const removeFromFavorite = beerId => ({
-  type: REMOVE_FAVORITE,
+export const removeFromFavorites = beerId => ({
+  type: REMOVE_FAVORITES,
   payload: beerId,
 });
 
-export const clearFavorite = () => ({
-  type: CLEAR_FAVORITE,
+export const clearFavorites = () => ({
+  type: CLEAR_FAVORITES,
 });
 
-const favoriteListReducer = (state = initialState, { type, payload } = {}) => {
+export default function reducer(state = initialState, { type, payload } = {}) {
   switch (type) {
-    case ADD_FAVORITE:
+    case ADD_FAVORITES:
       return {
         favorites: [...state.favorites, payload],
       };
-    case REMOVE_FAVORITE:
+    case REMOVE_FAVORITES:
       return {
         favorites: state.favorites.filter(id => id !== payload),
       };
-    case CLEAR_FAVORITE:
+    case CLEAR_FAVORITES:
       return {
         favorites: [],
       };
     default:
       return state;
   }
-};
-
-export default favoriteListReducer;
+}

src/Modules/index.js

@@ -6,25 +6,25 @@ import { all } from 'redux-saga/effects';
 import { enableES5 } from 'immer';
 import { persistReducer } from 'redux-persist';
 import storage from 'redux-persist/lib/storage';
-import beerListReducer from './beerList';
-import favoriteListReducer from './favoriteList';
-import listColumnReducer from './listColumns';
+import beerList from './beerList';
+import favoriteList from './favoriteList';
+import tableColumns from './tableColumns';
 import getBeerListSaga from './saga/beerListSaga';
-import listColumnSaga from './saga/listColumnSaga';
+import tableColumnsSaga from './saga/tableColumnsSaga';
 
 enableES5();
 
 const persistConfig = {
   key: 'root',
   storage,
-  whitelist: ['beerListReducer', 'listColumnReducer', 'favoriteListReducer'],
+  whitelist: ['beerList', 'favoriteList', 'tableColumns'],
   // blacklist: [], // 블랙리스트에 있는 항목을 제외하고 모두 포함
 };
 
 const rootReducer = combineReducers({
-  beerListReducer,
-  listColumnReducer,
-  favoriteListReducer,
+  beerList,
+  favoriteList,
+  tableColumns,
 });
 
 export default persistReducer(persistConfig, rootReducer);
@@ -33,7 +33,7 @@ export default persistReducer(persistConfig, rootReducer);
 // 1)Action Dispatch 2)Saga 미들웨어 실행(takeLatest) 3)비동기 통신(yield call)
 // 4)통신 성공/실패에 따라 상응하는 액션 Dispatch(yield put) 5)상태 업데이트
 export function* rootSaga() {
-  yield all([getBeerListSaga(), listColumnSaga()]);
+  yield all([getBeerListSaga(), tableColumnsSaga()]);
 }
 
 /**

src/Modules/saga/listColumnSaga.js → src/Modules/saga/tableColumnsSaga.js

@@ -3,7 +3,7 @@ import {
   SET_COLUMNS_REQUEST,
   setColumnsSuccess,
   setColumnsFailed,
-} from '../listColumns';
+} from '../tableColumns';
 
 const changeColumnIndex = (fromIdx, toIdx, columns) => {
   const [fromValue, toValue] = [columns[fromIdx], columns[toIdx]];
@@ -12,7 +12,7 @@ const changeColumnIndex = (fromIdx, toIdx, columns) => {
   return columns;
 };
 
-function* setColumn({ payload }) {
+function* setTableColumns({ payload }) {
   const { fromIdx, toIdx, columns } = payload;
   try {
     // yield call 첫번째 함수의 파라미터를 넘길 땐 call 두번째 파라미터에 명시
@@ -30,6 +30,6 @@ function* setColumn({ payload }) {
   }
 }
 
-export default function* listColumnSaga() {
-  yield takeLatest(SET_COLUMNS_REQUEST, setColumn);
+export default function* tableColumnsSaga() {
+  yield takeLatest(SET_COLUMNS_REQUEST, setTableColumns);
 }

src/Modules/listColumns.js → src/Modules/tableColumns.js

@@ -14,10 +14,10 @@ const initialState = {
   modifiedColumns: [...tableColumns],
 };
 
-export const SET_COLUMNS_REQUEST = 'listColumns/SET_COLUMNS_REQUEST';
-export const SET_COLUMNS_SUCCESS = 'listColumns/SET_COLUMNS_SUCCESS';
-export const SET_COLUMNS_FAILED = 'listColumns/SET_COLUMNS_FAILED';
-export const RESET_COLUMNS = 'listColumns/RESET_COLUMNS';
+export const SET_COLUMNS_REQUEST = 'tableColumns/SET_COLUMNS_REQUEST';
+export const SET_COLUMNS_SUCCESS = 'tableColumns/SET_COLUMNS_SUCCESS';
+export const SET_COLUMNS_FAILED = 'tableColumns/SET_COLUMNS_FAILED';
+export const RESET_COLUMNS = 'tableColumns/RESET_COLUMNS';
 
 export const setColumnsRequest = (fromIdx, toIdx, columns) => ({
   type: SET_COLUMNS_REQUEST,
@@ -36,7 +36,7 @@ export const setColumnsFailed = payload => ({
 
 export const resetColumns = () => ({ type: RESET_COLUMNS });
 
-const listColumnReducer = (state = initialState, { type, payload } = {}) => {
+export default function reducer(state = initialState, { type, payload } = {}) {
   switch (type) {
     case SET_COLUMNS_REQUEST:
       return {
@@ -66,6 +66,4 @@ const listColumnReducer = (state = initialState, { type, payload } = {}) => {
     default:
       return state;
   }
-};
-
-export default listColumnReducer;
+}

src/Pages/BeerListPage.js

@@ -8,17 +8,17 @@ 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/listColumns';
-import { addToFavorite } from '../Modules/favoriteList';
+import { setColumnsRequest } from '../Modules/tableColumns';
+import { addToFavorites } from '../Modules/favoriteList';
 import { getTableOptions, filterDataByAbv } from '../Utils';
 import { abvRange } from '../Constants';
 import BeerListFunction from '../Components/BeerListFunction';
 
 const BeerListPage = function () {
   const dispatch = useDispatch();
-  const beers = useSelector(state => state.beerListReducer);
-  const columns = useSelector(state => state.listColumnReducer);
-  const { favorites } = useSelector(state => state.favoriteListReducer);
+  const beers = useSelector(state => state.beerList);
+  const columns = useSelector(state => state.tableColumns);
+  const { favorites } = useSelector(state => state.favoriteList);
 
   const [selectedRange, setSelectedRange] = useState(new Set());
 
@@ -38,7 +38,7 @@ const BeerListPage = function () {
   const actionClickHandler = (_, { name, id }) => {
     const isAdded = favorites?.some(favoriteId => favoriteId === id);
     if (!isAdded) {
-      dispatch(addToFavorite(id));
+      dispatch(addToFavorites(id));
       notification.open({
         message: `${name}`,
         description: '즐겨찾기에 추가되었습니다',

src/Pages/FavoritePage.js

@@ -3,15 +3,15 @@ import styled, { css } from 'styled-components/macro';
 import { useSelector, useDispatch } from 'react-redux';
 import { Modal, message, Empty, Button, Tooltip } from 'antd';
 import { DeleteFilled } from '@ant-design/icons';
-import { clearFavorite } from '../Modules/favoriteList';
+import { clearFavorites } from '../Modules/favoriteList';
 import FavoriteEntry from '../Components/FavoriteEntry';
 import { ContainerStyle } from '../Styles/commonStyles';
 import FunctionWrapper from '../Components/FunctionWrapper';
 
 const FavoritePage = function () {
   const dispatch = useDispatch();
-  const { rawData: beers } = useSelector(state => state.beerListReducer);
-  const { favorites } = useSelector(state => state.favoriteListReducer);
+  const { rawData: beers } = useSelector(state => state.beerList);
+  const { favorites } = useSelector(state => state.favoriteList);
 
   const clearFavoritesHandler = () => {
     if (favorites?.length === 0) {
@@ -23,7 +23,7 @@ const FavoritePage = function () {
       content: `즐겨찾기에 있는 모든 맥주(${favorites.length})를 삭제하시겠습니까?`,
       maskClosable: true,
       onOk: () => {
-        dispatch(clearFavorite());
+        dispatch(clearFavorites());
         message.success('모든 즐겨찾기가 삭제되었습니다');
       },
     });

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.beerListReducer);
+  const { rawData, loading } = useSelector(state => state.beerList);
 
   return (
     <S.Container>

src/Routes.js

@@ -11,6 +11,7 @@ import HomePage from './Pages/HomePage';
 import BeerListPage from './Pages/BeerListPage';
 import FavoritePage from './Pages/FavoritePage';
 import { getBeerListRequest } from './Modules/beerList';
+import NotFoundPage from './Components/NotFoundPage';
 
 const Routes = function () {
   const dispatch = useDispatch();
@@ -26,7 +27,10 @@ const Routes = function () {
         <Route exact path="/home" component={HomePage} />
         <Route exact path="/" render={() => <Redirect to="/home" />} />
         <Route exact path="/beerlist" component={BeerListPage} />
+        <Route exact path="/beerlist/:id" component={BeerListPage} />
         <Route exact path="/favorites" component={FavoritePage} />
+        <Route component={NotFoundPage} />
+        {/* path를 정의 안 하면 모든 경로에 매칭됨 */}
       </Switch>
     </Router>
   );