feat: error page 다국어 지원

MomHelpMe · Sep 1, 2024 · 1cd2356 · 1cd2356
1 parent 60d1956
commit 1cd2356
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 12 deletions.
diff --git a/frontend/src/app.js b/frontend/src/app.js
@@ -1,7 +1,6 @@
 import { initializeRouter, createRoutes, changeUrl } from "./core/router.js";
 import { getCookie } from "./core/jwt.js";
 
-
 class App {
 	app;
 	lan;

diff --git a/frontend/src/components/Error-page.js b/frontend/src/components/Error-page.js
@@ -1,16 +1,36 @@
 import { Component } from "../core/Component.js";
-import { changeUrl } from "../core/router.js";
 
 export class ErrorPage extends Component {
 
+	translate() {
+		const languages = {
+			0: {
+				errorText: ["Oops!", "There seems to be a problem."]
+			},
+			1: {
+				errorText: ["이런!", "문제가 발생한 것 같습니다."]
+			},
+			2: {
+				errorText: ["おっと！", "問題が発生したようです。"]
+			}
+		};
+
+		this.translations = languages[this.props.lan.value];
+
+	}
+
 	template () {
+
+		const translations = this.translations;
+
 		return `
 			<div id="error-box">
 				<div id="error-msg-box">
-					<h1 id="error-title">Oops! There seems to be a problem.</h1>
+					<h1 id="error-title2">${translations.errorText[0]}</h1>
+					<h1 id="error-title2">${translations.errorText[1]}</h1>
 				</div>
 				<div id="error-img-box">
-					<img id="notFound" src="/img/error.jpeg"></img>
+					<img id="error-img" src="/img/error.png"></img>
 				</div>
 			</div>
 		`;

diff --git a/frontend/src/components/Error404-page.js b/frontend/src/components/Error404-page.js
@@ -3,15 +3,38 @@ import { changeUrl } from "../core/router.js";
 
 export class Error404Page extends Component {
 
+	translate() {
+		const languages = {
+			0: {
+				errorText: ["Oops!", "We can't seem to find", "the page you're looking for.", "Error code: 404"],
+				returnText: "Return Main",
+			},
+			1: {
+				errorText: ["이런!", "찾고 계신 페이지를", "찾을 수 없습니다.", "오류 코드: 404"],
+				returnText: "메인 화면",
+			},
+			2: {
+				errorText: ["おっと！", "お探しのページが", "見つかりません。", "エラーコード: 404"],
+				returnText: "メインに戻る",
+			}
+		};
+
+		this.translations = languages[this.props.lan.value];
+
+	}
+
 	template () {
+
+		const translations = this.translations;
+
 		return `
-			<div id="error-box">
+		<div id="error-box">
 				<div id="error-msg-box">
-					<h1 id="error-title">Oops!</h1>
-					<h2 id="error-body">We can't seem to find</h2>
-					<h2 id="error-body">the page you're looking for.</h2>
-					<p id="error-code">Error code: 404</p>
-					<div id="goMainMenu">Return Main</div>
+					<h1 id="error-title">${translations.errorText[0]}</h1>
+					<h2 id="error-body">${translations.errorText[1]}</h2>
+					<h2 id="error-body">${translations.errorText[2]}</h2>
+					<p id="error-code">${translations.errorText[3]}</p>
+					<div id="goMainMenu">${translations.returnText}</div>
 				</div>
 				<div id="error-img-box">
 					<img id="notFound" src="/img/404.jpeg"></img>

diff --git a/frontend/style.css b/frontend/style.css
@@ -1381,15 +1381,15 @@ div#error-box {
 	width: 100%;
 	height: 100%;
 	display: flex;
-	justify-content: flex-end;
+	justify-content: space-between;
 	align-items: center;
 }
 
 div#error-msg-box {
 	width: 550px;
 	height: 100%;
 	display: flex;
-	padding-left: 50px;
+	padding-left: 200px;
 	flex-direction: column;
 	justify-content: center;
 }
@@ -1399,7 +1399,14 @@ h1#error-title {
 	font-size: 50px;
 }
 
+h1#error-title2 {
+	width: 600px;
+	font-weight: 700;
+	font-size: 50px;
+}
+
 h2#error-body {
+	width: 500px;
 	font-weight: 600;
 	font-size: 40px;
 }
@@ -1420,6 +1427,12 @@ div#error-img-box {
 	justify-content: flex-end;
 }
 
+img#error-img {
+	width: 500px;
+	height: 500px;
+	margin-right: 100px;
+}
+
 img#notFound {
 	width: 700px;
 	height: 700px;