[Feature] NotFound(404) 페이지를 구현하라

src/App.jsx

@@ -11,13 +11,15 @@ import { setUser } from './reducers/authSlice';
 
 import { lightTheme, darkTheme } from './styles/theme';
 
+import ErrorBoundary from './ErrorBoundary';
+
 import MainPage from './pages/MainPage';
 import WritePage from './pages/WritePage';
-import GlobalStyles from './styles/GlobalStyles';
-import IntroducePage from './pages/IntroducePage';
 import LoginPage from './pages/LoginPage';
 import RegisterPage from './pages/RegisterPage';
-import HeaderContainer from './containers/base/HeaderContainer';
+import NotFoundPage from './pages/NotFoundPage';
+import GlobalStyles from './styles/GlobalStyles';
+import IntroducePage from './pages/IntroducePage';
 
 const App = () => {
   const dispatch = useDispatch();
@@ -34,17 +36,19 @@ const App = () => {
   }, [dispatch, user]);
 
   return (
-    <ThemeProvider theme={theme ? darkTheme : lightTheme}>
-      <GlobalStyles />
-      <HeaderContainer />
-      <Switch>
-        <Route exact path="/" component={MainPage} />
-        <Route path="/introduce/:id" component={IntroducePage} />
-        <Route path="/write" component={WritePage} />
-        <Route path="/login" component={LoginPage} />
-        <Route path="/register" component={RegisterPage} />
-      </Switch>
-    </ThemeProvider>
+    <ErrorBoundary>
+      <ThemeProvider theme={theme ? darkTheme : lightTheme}>
+        <GlobalStyles />
+        <Switch>
+          <Route exact path="/" component={MainPage} />
+          <Route exact path="/introduce/:id" component={IntroducePage} />
+          <Route path="/write" component={WritePage} />
+          <Route path="/login" component={LoginPage} />
+          <Route path="/register" component={RegisterPage} />
+          <Route component={NotFoundPage} />
+        </Switch>
+      </ThemeProvider>
+    </ErrorBoundary>
   );
 };
 

src/App.test.jsx

@@ -58,6 +58,7 @@ describe('App', () => {
       },
       commonReducer: {
         theme: given.theme,
+        errorType: null,
       },
     }));
   });
@@ -101,6 +102,16 @@ describe('App', () => {
     });
   });
 
+  context('with Not Found path', () => {
+    given('group', () => ([]));
+
+    it('renders the study introduce page', () => {
+      const { container } = renderApp({ path: '/some-not-found' });
+
+      expect(container).toHaveTextContent('아무것도 없어요!');
+    });
+  });
+
   context('with path /introduce', () => {
     given('group', () => (STUDY_GROUP));
     it('renders the study introduce page', () => {

src/ErrorBoundary.jsx

@@ -0,0 +1,46 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable react/destructuring-assignment */
+import React from 'react';
+
+import useNotFound from './hooks/useNotFound';
+
+import NotFoundPage from './pages/NotFoundPage';
+
+function ErrorBoundaryWrapper({ children }) {
+  const { isNotFound } = useNotFound();
+
+  if (isNotFound) {
+    return <NotFoundPage />;
+  }
+
+  return <>{children}</>;
+}
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // logErrorToMyService(error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <h1>앗! 알 수 없는 오류가 발생했어요!</h1>;
+    }
+
+    return (
+      <ErrorBoundaryWrapper>
+        {this.props.children}
+      </ErrorBoundaryWrapper>
+    );
+  }
+}
+
+export default ErrorBoundary;

src/ErrorBoundary.test.jsx

@@ -0,0 +1,83 @@
+import './util/__mocks__/matchMedia';
+
+import React from 'react';
+
+import { useSelector, useDispatch } from 'react-redux';
+
+import { render } from '@testing-library/react';
+
+import ErrorBoundary from './ErrorBoundary';
+
+jest.mock('react-redux');
+
+describe('ErrorBoundary', () => {
+  const dispatch = jest.fn();
+
+  beforeEach(() => {
+    dispatch.mockClear();
+
+    useDispatch.mockImplementation(() => dispatch);
+
+    useSelector.mockImplementation((selector) => selector({
+      commonReducer: {
+        errorType: given.errorType,
+      },
+    }));
+  });
+
+  const renderErrorBoundary = (ui) => render(ui);
+
+  context('Has Unknown Error', () => {
+    given('errorType', () => null);
+
+    const MockComponent = () => {
+      throw new Error('error');
+    };
+
+    it('should be renders "앗! 알 수 없는 오류가 발생했어요!" Error Message', () => {
+      const { container } = renderErrorBoundary((
+        <ErrorBoundary>
+          <MockComponent />
+        </ErrorBoundary>
+      ));
+
+      expect(container).toHaveTextContent('앗! 알 수 없는 오류가 발생했어요!');
+    });
+  });
+
+  context("Hasn't Unknown Error", () => {
+    context('Without Not Found Error Type', () => {
+      given('errorType', () => null);
+      const MockComponent = () => (
+        <h1>정상입니다!</h1>
+      );
+
+      it('should be Success render component', () => {
+        const { container } = renderErrorBoundary((
+          <ErrorBoundary>
+            <MockComponent />
+          </ErrorBoundary>
+        ));
+
+        expect(container).toHaveTextContent('정상입니다!');
+      });
+    });
+
+    context('With Not Found Error Type', () => {
+      given('errorType', () => 'NOT_FOUND');
+      const MockComponent = () => (
+        <h1>정상입니다!</h1>
+      );
+
+      it('should be Success render component', () => {
+        const { container } = renderErrorBoundary((
+          <ErrorBoundary>
+            <MockComponent />
+          </ErrorBoundary>
+        ));
+
+        expect(container).toHaveTextContent('아무것도 없어요!');
+      });
+    });
+  });
+});

src/components/common/ErrorScreenTemplate.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+import styled from '@emotion/styled';
+
+import mq from '../../styles/responsive';
+import palette from '../../styles/palette';
+
+import Button from '../../styles/Button';
+
+const ErrorScreenTemplateBlock = styled.div`
+  top: -40px;
+  left: 0px;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const ErrorScreenWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  height: auto;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  -webkit-box-align: center;
+  -webkit-box-pack: center;
+
+  .message {
+    ${mq({ fontSize: ['2rem', '3rem'] })};
+
+    text-align: center;
+    line-height: 1.5;
+    margin-bottom: 2rem;
+  }
+`;
+
+const StyledButton = styled(Button)`
+  ${mq({
+    fontSize: ['1.2rem', '1.4rem'],
+    padding: ['0.4rem 1rem', '0.6rem 1.2rem'],
+
+  })};
+
+  transition: none;
+
+  &:hover {
+    background: ${palette.teal[4]};
+    color: white;
+    border: 2px solid ${palette.teal[4]};
+  }
+`;
+
+const ErrorScreenTemplate = ({
+  message, buttonText, onClick, children,
+}) => (
+  <ErrorScreenTemplateBlock>
+    <ErrorScreenWrapper>
+      {children}
+      <div className="message">
+        {message}
+      </div>
+      <StyledButton success onClick={onClick}>
+        {buttonText}
+      </StyledButton>
+    </ErrorScreenWrapper>
+  </ErrorScreenTemplateBlock>
+);
+
+export default ErrorScreenTemplate;

src/components/common/ErrorScreenTemplate.test.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { render, fireEvent } from '@testing-library/react';
+
+import ErrorScreenTemplate from './ErrorScreenTemplate';
+
+describe('ErrorScreenTemplate', () => {
+  const handleClick = jest.fn();
+
+  beforeEach(() => {
+    handleClick.mockClear();
+  });
+
+  const renderErrorScreenTemplate = ({ message, buttonText }) => render((
+    <ErrorScreenTemplate
+      message={message}
+      buttonText={buttonText}
+      onClick={handleClick}
+    />
+  ));
+
+  it('should be renders error template contents', () => {
+    const { container } = renderErrorScreenTemplate({
+      message: '아무것도 없어요!',
+      buttonText: '홈으로',
+    });
+
+    expect(container).toHaveTextContent('아무것도 없어요!');
+    expect(container).toHaveTextContent('홈으로');
+  });
+
+  it('handle Click event', () => {
+    const { getByText } = renderErrorScreenTemplate({
+      message: '아무것도 없어요!',
+      buttonText: '홈으로',
+    });
+
+    fireEvent.click(getByText('홈으로'));
+
+    expect(handleClick).toBeCalled();
+  });
+});

src/containers/error/NotFoundContainer.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { useHistory } from 'react-router-dom';
+
+import styled from '@emotion/styled';
+
+import mq from '../../styles/responsive';
+
+import useNotFound from '../../hooks/useNotFound';
+
+import NotFoundSvg from '../../assets/icons/404.svg';
+import ErrorScreenTemplate from '../../components/common/ErrorScreenTemplate';
+
+const NotFoundImage = styled(NotFoundSvg)`
+  ${mq({
+    width: ['500px', '700px', '800px'],
+  })};
+
+  height: auto;
+`;
+
+const NotFoundContainer = () => {
+  const history = useHistory();
+  const { reset } = useNotFound();
+
+  const onClick = () => {
+    history.push('/');
+    reset();
+  };
+
+  return (
+    <ErrorScreenTemplate
+      buttonText="홈으로"
+      message="아무것도 없어요!"
+      onClick={onClick}
+    >
+      <NotFoundImage
+        data-testid="not-found-image"
+      />
+    </ErrorScreenTemplate>
+  );
+};
+
+export default NotFoundContainer;