관리자만 접근 가능한 페이지입니다.
+ }
return (
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 9114c52..9e49a93 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -160,6 +160,7 @@ const HistorySection = css`
const HistoryContainer = css`
display: flex;
+ /* height: 100%; */
flex-direction: column;
z-index: 999;
`
@@ -169,7 +170,7 @@ const HistoryTitle = css`
line-height: 38.4px;
font-weight: 900;
color: ${Color.Gray100};
- margin-bottom: 136px;
+ margin-bottom: 11vh;
`
const HistorySubtitle = css`
@@ -194,7 +195,7 @@ const HistoryBold = css`
const HistoryContentContainer = css`
position: relative;
- padding-top: 167px;
+ padding-top: 14vh;
margin-left: 70px;
`
@@ -214,7 +215,7 @@ const HistoryContents = css`
display: flex;
flex-direction: column;
margin-left: 30px;
- gap: 200px;
+ gap: 16vh;
`
const HistoryContent = css`
diff --git a/src/pages/PostDetail.tsx b/src/pages/PostDetail.tsx
index 6da4308..480ec27 100644
--- a/src/pages/PostDetail.tsx
+++ b/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
const comments: TComment[] = commentsData.content
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
index cb8f99c..8720746 100644
--- a/src/pages/Profile.tsx
+++ b/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
로그인 후 이용해주세요!
- if (isLoading || postLoading || !profileData) return
Loading...
+ if (isLoading || postLoading || !profileData) return
+ if (error || postsError) return
const profiles: TUser = profileData
diff --git a/src/pages/Project.tsx b/src/pages/Project.tsx
index 9d1b2af..ec5defe 100644
--- a/src/pages/Project.tsx
+++ b/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,7 +103,7 @@ const Project: FC = () => {
size: '7',
}).toString()
- const { data, error } = useSWR(`project?${params}`, fetcher)
+ const { data, error, isLoading } = useSWR(`project?${params}`, fetcher)
useEffect(() => {
if (data) {
@@ -110,8 +111,8 @@ const Project: FC = () => {
}
}, [data])
- if (error) return
Failed to load profile
- if (!data) return
Loading...
+ if (isLoading) return
+ if (error) return
const projectList: TProject[] = data.data.content
diff --git a/src/pages/ProjectDetail.tsx b/src/pages/ProjectDetail.tsx
index 97066a1..fe790c4 100644
--- a/src/pages/ProjectDetail.tsx
+++ b/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
Error
+ if (isLoading) return
+ if (error) return
const projectInfo: TProject = data.data
diff --git a/src/pages/TechBlog.tsx b/src/pages/TechBlog.tsx
index f6d9a9e..9948a6c 100644
--- a/src/pages/TechBlog.tsx
+++ b/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
(0)
@@ -31,8 +32,8 @@ const TechBlog: React.FC = () => {
}
}, [data])
- if (isLoading) return Failed to load profiles
- if (error) return Error!
+ if (isLoading) return
+ if (error) return
const postList: TPost[] = data.content
diff --git a/src/pages/error/NotFound.tsx b/src/pages/error/NotFound.tsx
new file mode 100644
index 0000000..6c9022d
--- /dev/null
+++ b/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 (
+
+

+
+
404
+
페이지를 찾을 수 없습니다.
+
홈으로 돌아가기
+
+
+ )
+}
+
+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;
+ }
+ }
+`
diff --git a/src/pages/error/ServerError.tsx b/src/pages/error/ServerError.tsx
new file mode 100644
index 0000000..95ce7db
--- /dev/null
+++ b/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 (
+
+

+
+
500
+
에러가 발생했습니다.
+
홈으로 돌아가기
+
+
+ )
+}
+
+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;
+ }
+ }
+`