[FEAT] 404 not found page & 500 server error page

src/App.tsx

@@ -14,6 +14,7 @@ import { checkToken, getUserInfo } from './api/auth.ts'
 import userStore from './store/User.ts'
 import Home from './pages/Home'
 import Admin from './pages/Admin.tsx'
+import { NotFound } from './pages/error/NotFound.tsx'
 
 function App() {
   const [location] = useLocation()
@@ -46,6 +47,7 @@ function App() {
       <Route path='/post/:post_id' component={PostDetail} />
       <Route path='/profile' component={Profile} />
       <Route path='/admin' component={Admin} />
+      <Route path='*' component={NotFound} />
     </Switch>
   )
 }

src/pages/Admin.tsx

@@ -7,6 +7,7 @@ import { TUser } from '../types'
 import { Color } from '../palette'
 import icon_search from '../assets/icon_search.svg'
 import { Pagination } from '../components/Pagination'
+import { ServerError } from './error/ServerError'
 
 const Style = {
   wrapper: css`
@@ -142,7 +143,7 @@ const Admin: React.FC = () => {
     ))
   }
 
-  if (studentRequestError || studentListError) return <div>Error</div>
+  if (studentRequestError || studentListError) return <ServerError />
 
   if (!isAuthorized) {
     return <div>관리자만 접근 가능한 페이지입니다.</div>

src/pages/PostDetail.tsx

@@ -24,6 +24,7 @@ import {
 import icon_default_profile from '../assets/icon_default_profile.svg'
 import userStore from '../store/User'
 import { mutate } from 'swr'
+import { ServerError } from './error/ServerError'
 
 const PostStyle = {
   wrapper: css`
@@ -202,8 +203,8 @@ const Post: React.FC = () => {
     mutate: commentMutate,
   } = useGetComments(post_id!)
 
-  if (isLoading || isCommentsLoading) return <>Loading..</>
-  if (error || commentsError) return <>Error occured!</>
+  if (isLoading || isCommentsLoading) return <></>
+  if (error || commentsError) return <ServerError />
 
   const comments: TComment[] = commentsData.content
 

src/pages/Profile.tsx

@@ -17,6 +17,7 @@ import { CustomPlusButton } from '../components/CustomPlusButton'
 import { useLocation } from 'wouter'
 
 import { CustomInput } from '../components/CustomInput'
+import { ServerError } from './error/ServerError'
 
 const Style = {
   wrapper: css`
@@ -248,8 +249,8 @@ const Profile: React.FC = () => {
     }
   }, [data])
 
-  if (error || postsError) return <div>로그인 후 이용해주세요!</div>
-  if (isLoading || postLoading || !profileData) return <div>Loading...</div>
+  if (isLoading || postLoading || !profileData) return <div></div>
+  if (error || postsError) return <ServerError />
 
   const profiles: TUser = profileData
 

src/pages/Project.tsx

@@ -13,6 +13,7 @@ import { ProjectCard } from '../components/ProjectCard'
 import { TProject } from '../types'
 import userStore from '../store/User'
 import { Pagination } from '../components/Pagination'
+import { ServerError } from './error/ServerError'
 
 const containerStyle = css`
   display: flex;
@@ -102,16 +103,16 @@ const Project: FC = () => {
     size: '7',
   }).toString()
 
-  const { data, error } = useSWR(`project?${params}`, fetcher)
+  const { data, error, isLoading } = useSWR(`project?${params}`, fetcher)
 
   useEffect(() => {
     if (data) {
       setTotalPages(Math.ceil(data.data.totalElements / 7))
     }
   }, [data])
 
-  if (error) return <div>Failed to load profile</div>
-  if (!data) return <div>Loading...</div>
+  if (isLoading) return <div></div>
+  if (error) return <ServerError />
 
   const projectList: TProject[] = data.data.content
 

src/pages/ProjectDetail.tsx

@@ -12,6 +12,7 @@ import 'swiper/css/effect-fade'
 import { SwiperBullets } from '../components/SwiperBullets'
 import { Swiper as SwiperClass } from 'swiper/types' // Swiper 인스턴스 타입
 import { Header } from '../common/Header'
+import { ServerError } from './error/ServerError'
 
 const Style = {
   wrapper: css`
@@ -197,7 +198,8 @@ const ProjectDetail: React.FC = () => {
   const [, navigate] = useLocation()
 
   const { data, isLoading, error } = useSWR(`project/${project_id!}`, fetcher)
-  if (isLoading || error) return <div>Error</div>
+  if (isLoading) return <div></div>
+  if (error) return <ServerError />
 
   const projectInfo: TProject = data.data
 

src/pages/TechBlog.tsx

@@ -8,6 +8,7 @@ import { Header } from '../common/Header'
 import { TPost } from '../types'
 import { useGetPostList } from '../hooks/query/post.api'
 import { Pagination } from '../components/Pagination'
+import { ServerError } from './error/ServerError'
 
 const TechBlog: React.FC = () => {
   const [currentPage, setCurrentPage] = useState<number>(0)
@@ -31,8 +32,8 @@ const TechBlog: React.FC = () => {
     }
   }, [data])
 
-  if (isLoading) return <div>Failed to load profiles</div>
-  if (error) return <div>Error!</div>
+  if (isLoading) return <div></div>
+  if (error) return <ServerError />
 
   const postList: TPost[] = data.content
 

src/pages/error/NotFound.tsx

@@ -0,0 +1,43 @@
+import { css } from '@emotion/react'
+import main_image from '../../assets/main_image.svg'
+import { Link } from 'wouter'
+import { Color } from '../../palette'
+
+export const NotFound = () => {
+  return (
+    <div css={Wrapper}>
+      <img src={main_image} alt='404' />
+      <div css={TextContainer}>
+        <h1>404</h1>
+        <p>페이지를 찾을 수 없습니다.</p>
+        <Link to='/'>홈으로 돌아가기</Link>
+      </div>
+    </div>
+  )
+}
+
+const Wrapper = css`
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`
+
+const TextContainer = css`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 1.5rem;
+
+  a {
+    font-weight: 600;
+    color: ${Color.Primary};
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+`

src/pages/error/ServerError.tsx

@@ -0,0 +1,43 @@
+import { css } from '@emotion/react'
+import main_image from '../../assets/main_image.svg'
+import { Link } from 'wouter'
+import { Color } from '../../palette'
+
+export const ServerError = () => {
+  return (
+    <div css={Wrapper}>
+      <img src={main_image} alt='404' />
+      <div css={TextContainer}>
+        <h1>500</h1>
+        <p>에러가 발생했습니다.</p>
+        <Link to='/'>홈으로 돌아가기</Link>
+      </div>
+    </div>
+  )
+}
+
+const Wrapper = css`
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`
+
+const TextContainer = css`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 1.5rem;
+
+  a {
+    font-weight: 600;
+    color: ${Color.Primary};
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+`