Skip to content

Commit 6a02bf2

Browse files
six-standardsix-standard
authored
[24.03.06 / TASK-133] Feature - 서버 오류 핸들링 페이지 퍼블리싱 (#21)
* modify: 캐시 충돌 관련 이슈 해결 * modify: 로그아웃 시에도 캐시 잔존 오류 해결 * modify: 사소한 휴먼에러 해결 * refactor: 필요없는 주석 제거 * feature: 서버 에러 핸들링 페이지 퍼블리싱 * feature: 순수 HTML 형태의 오류 페이지 제작 * modify: 빌드 오류 수정 * modify: 리뷰 반영 * refactor: 파일명 변경
1 parent 2827add commit 6a02bf2

File tree

3 files changed

+190
-0
lines changed

3 files changed

+190
-0
lines changed

‎500.html‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Velog Dashboard - 500</title>
7+
<style>
8+
@media (min-width: 1200px) {
9+
div.layout {
10+
background: #1e1e1e;
11+
width: 500px;
12+
height: 300px;
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
flex-direction: column;
17+
gap: 20px;
18+
}
19+
div.titleLayout {
20+
display: flex;
21+
align-items: center;
22+
gap: 20px;
23+
}
24+
div.iconLayout {
25+
width: 100px;
26+
height: 100px;
27+
background: #1ec996;
28+
display: flex;
29+
align-items: center;
30+
justify-content: center;
31+
border-radius: 4px;
32+
}
33+
span.iconText {
34+
font-style: italic;
35+
font-size: 50px;
36+
font-weight: bold;
37+
color: white;
38+
margin-top: 10px;
39+
margin-left: -10px;
40+
}
41+
span.text {
42+
color: white;
43+
font-size: 24px;
44+
font-weight: 500;
45+
}
46+
h2.titleText {
47+
color: white;
48+
font-size: 28px;
49+
font-weight: bold;
50+
}
51+
}
52+
@media (min-width: 992px) and (max-width: 1199px) {
53+
div.layout {
54+
background: #1e1e1e;
55+
width: 450px;
56+
height: 250px;
57+
display: flex;
58+
align-items: center;
59+
justify-content: center;
60+
flex-direction: column;
61+
gap: 20px;
62+
}
63+
div.titleLayout {
64+
display: flex;
65+
align-items: center;
66+
gap: 20px;
67+
}
68+
div.iconLayout {
69+
width: 80px;
70+
height: 80px;
71+
background: #1ec996;
72+
display: flex;
73+
align-items: center;
74+
justify-content: center;
75+
border-radius: 4px;
76+
}
77+
span.iconText {
78+
font-style: italic;
79+
font-size: 40px;
80+
font-weight: bold;
81+
color: white;
82+
margin-top: 10px;
83+
margin-left: -10px;
84+
}
85+
span.text {
86+
color: white;
87+
font-size: 20px;
88+
font-weight: 500;
89+
}
90+
h2.titleText {
91+
color: white;
92+
font-size: 24px;
93+
font-weight: bold;
94+
}
95+
}
96+
97+
@media (max-width: 991px) {
98+
div.layout {
99+
background: #1e1e1e;
100+
width: 350px;
101+
height: 250px;
102+
display: flex;
103+
align-items: center;
104+
justify-content: center;
105+
flex-direction: column;
106+
gap: 20px;
107+
}
108+
div.titleLayout {
109+
display: flex;
110+
align-items: center;
111+
gap: 20px;
112+
}
113+
div.iconLayout {
114+
width: 80px;
115+
height: 80px;
116+
background: #1ec996;
117+
display: flex;
118+
align-items: center;
119+
justify-content: center;
120+
border-radius: 4px;
121+
}
122+
span.iconText {
123+
font-style: italic;
124+
font-size: 40px;
125+
font-weight: normal;
126+
color: white;
127+
margin-top: 10px;
128+
margin-left: -10px;
129+
}
130+
span.text {
131+
color: white;
132+
font-size: 18px;
133+
font-weight: 500;
134+
}
135+
h2.titleText {
136+
color: white;
137+
font-size: 22px;
138+
font-weight: bold;
139+
}
140+
}
141+
* {
142+
transition: all;
143+
transition-duration: 300ms;
144+
}
145+
body {
146+
width: 100%;
147+
height: 100vh;
148+
overflow: hidden;
149+
background: #121212;
150+
display: flex;
151+
align-items: center;
152+
justify-content: center;
153+
}
154+
</style>
155+
</head>
156+
<body>
157+
<div class="layout">
158+
<div class="titleLayout">
159+
<div class="iconLayout">
160+
<span class="iconText"><span style="font-weight: 400">V</span>D</span>
161+
</div>
162+
<h2 class="titleText">Velog Dashboard</h2>
163+
</div>
164+
<span class="text">알 수 없는 오류가 발생했습니다.</span>
165+
</div>
166+
<script
167+
async
168+
src="https://www.googletagmanager.com/gtag/js?id=G-8G3N74JV82"
169+
></script>
170+
<script>
171+
window.dataLayer = window.dataLayer || [];
172+
function gtag() {
173+
dataLayer.push(arguments);
174+
}
175+
gtag('js', new Date());
176+
177+
gtag('config', 'G-8G3N74JV82');
178+
</script>
179+
</body>
180+
</html>

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"dependencies": {
1616
"@channel.io/channel-web-sdk-loader": "^2.0.0",
1717
"@next/third-parties": "^15.1.7",
18+
"@sentry/core": "^9.4.0",
1819
"@sentry/nextjs": "^8.47.0",
1920
"@tanstack/react-query": "^5.61.3",
2021
"@tanstack/react-query-devtools": "^5.62.11",

‎pnpm-lock.yaml‎

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)