feat(TS-23): 에러 페이지 생성 (#93)

* feat: 에러 페이지 생성

- 잘못된 경로일 때 보여줄 에러 페이지를 만들었습니다.

* bugfix: 로그인 후 탭이 없는 오류 해결

- 로그인 후에 선택된 탭이 없는 오류를 해결했습니다.
- '본 사이트는 실제 수강신청 사이트가 아닙니다.' 알림을 로그인 후 홈으로 가기 전에 뜨도록 변경했습니다.

src/App.tsx

@@ -9,6 +9,7 @@ import Home from '@pages/index/Home.tsx';
 import Login from '@pages/index/Login.tsx';
 import DeleteAccount from '@pages/DeleteAccount.tsx';
 import ScrollToTop from './utils/scrollToTop';
+import NotFound from './pages/index/NotFound';
 
 function initializeAnalytics() {
   ReactGA.initialize(import.meta.env.VITE_GTM_ID);
@@ -34,6 +35,7 @@ function App() {
             </ProtectedRoute>
           }
         />
+        <Route path='/*' element={<NotFound />} />
       </Routes>
     </ThemeProvider>
   );

src/components/Header/TopMenu.tsx

@@ -5,7 +5,6 @@ import Cookies from 'js-cookie';
 import {baseAPI} from '@/apis/utils/instance';
 import {useAppSelector} from '@/store/hooks';
 import {clearUserInfo} from '@/store/modules/userSlice';
-import {deleteAll} from '@/store/modules/tabSlice';
 import logout from '@assets/img/logout.png';
 import Clock from './Clock';
 
@@ -16,7 +15,6 @@ function TopMenu() {
 
   const handleLogout = () => {
     dispatch(clearUserInfo());
-    dispatch(deleteAll());
     delete baseAPI.defaults.headers.common['Authorization'];
     Cookies.remove('accessToken');
     navigate('/login');

src/components/LoginForm/index.tsx

@@ -11,6 +11,7 @@ import {generateRandomStudentId} from '@/utils/randomUtils.ts';
 
 import copyIcon from '@/assets/img/file-copy-line.png';
 import reloadIcon from '@/assets/img/refresh-line.png';
+import {resetTab} from '@/store/modules/tabSlice';
 
 export type setType = string | number | undefined;
 
@@ -76,6 +77,9 @@ function LoginForm({isTermsCheck}: {isTermsCheck: boolean}) {
         }),
       );
 
+      dispatch(resetTab());
+
+      alert('※ 본 사이트는 실제 수강신청 사이트가 아닙니다. ※');
       navigate('/');
     } catch (error) {
       console.error('Login failed', error);

src/pages/index/Home.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useState} from 'react';
+import {useState} from 'react';
 import styled from 'styled-components';
 import Menubar from '@components/Menubar';
 import Header from '@components/Header';
@@ -35,10 +35,6 @@ function Home() {
     dispatch(clearModalInfo());
   });
 
-  useEffect(() => {
-    alert('※ 본 사이트는 실제 수강신청 사이트가 아닙니다. ※');
-  }, []);
-
   const renderContent = () => {
     switch (focused) {
       case 0:

src/pages/index/NotFound.tsx

@@ -0,0 +1,80 @@
+import styled from 'styled-components';
+import {useNavigate} from 'react-router-dom';
+import Bg from '@assets/img/login_bg.webp';
+import Logo from '@assets/img/tutorial_sejong_logo.webp';
+
+function NotFound() {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate('/');
+  };
+  return (
+    <Container>
+      <Box>
+        <LogoWrap>
+          <img src={Logo} />
+        </LogoWrap>
+        <TextWrap>
+          해당 페이지를 찾을 수 없습니다.
+          <p>
+            찾으시는 페이지의 주소를 잘못 입력하였거나,
+            <br /> 해당 페이지의 주소가 변경 또는 삭제되었을 수 있습니다.
+          </p>
+        </TextWrap>
+        <HomeBtn onClick={handleClick}>홈으로 이동</HomeBtn>
+      </Box>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  background: url(${Bg}) 50% 50% no-repeat;
+  background-size: cover;
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Box = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const LogoWrap = styled.div`
+  margin-bottom: 1.7rem;
+
+  > img {
+    width: 15rem;
+  }
+`;
+
+const TextWrap = styled.div`
+  font-size: 3.5rem;
+  font-weight: 700;
+  color: ${props => props.theme.colors.neutral6};
+  text-align: center;
+
+  > p {
+    ${props => props.theme.texts.tabTitle};
+    color: ${props => props.theme.colors.neutral6};
+    line-height: 2rem;
+    margin-top: 1.5rem;
+  }
+`;
+
+const HomeBtn = styled.button`
+  ${props => props.theme.texts.subtitle};
+  color: ${props => props.theme.colors.neutral6};
+  text-decoration: underline;
+  margin-top: 2.5rem;
+
+  &:hover {
+    color: ${props => props.theme.colors.primary};
+  }
+`;
+
+export default NotFound;

src/store/modules/tabSlice.ts

@@ -38,11 +38,11 @@ const tabSlice = createSlice({
     setFocused(state, action: PayloadAction<number>) {
       state.focused = action.payload;
     },
-    deleteAll: () => {
-      return {tab: [], focused: 0};
+    resetTab: () => {
+      return initialState;
     },
   },
 });
 
-export const {addTab, delTab, setFocused, deleteAll} = tabSlice.actions;
+export const {addTab, delTab, setFocused, resetTab} = tabSlice.actions;
 export default tabSlice.reducer;