Front/feat/add multiple language

frontend/src/app.js

@@ -1,10 +1,17 @@
-import { initializeRouter } from "./core/router.js";
+import { initializeRouter, createRoutes } from "./core/router.js";
 
 class App {
 	app;
-	constructor() { this.app = document.querySelector("#app"); }
+	lan;
+	constructor() {
+		this.app = document.querySelector("#app");
+		this.lan = { value: 0 };
+		console.log("start!!");
+		console.log(this.lan);
+	}
 }
 
 export const root = new App();
+export const routes = createRoutes(root);
 
-initializeRouter();
+initializeRouter(routes);

frontend/src/components/Edit-Profile.js

@@ -3,6 +3,45 @@ import { changeUrl } from "../core/router.js";
 
 export class EditProfile extends Component {
 
+	translate() {
+		const languages = {
+			0: {
+				headText: "Edit Profile",
+				nickText: "Nickname",
+				urlText: "Image URL",
+				twofaText: "Enable 2FA",
+				saveText: "Save Changes",
+				deleteText: "Delete Account",
+				deleteMsgText: "Are you sure you want to delete your account?",
+				yesText: "Yes",
+				noText: "No"
+			},
+			1: {
+				headText: "프로필 수정",
+				nickText: "닉네임",
+				urlText: "이미지 URL",
+				twofaText: "2단계 인증 활성화",
+				saveText: "변경 사항 저장",
+				deleteText: "계정 삭제",
+				deleteMsgText: "계정을 정말 삭제하시겠습니까?",
+				yesText: "예",
+				noText: "아니요"
+			},
+			2: {
+				headText: "プロフィール編集",
+				nickText: "ニックネーム",
+				urlText: "画像URL",
+				twofaText: "2FAを有効にする",
+				saveText: "変更を保存",
+				deleteText: "アカウント削除",
+				deleteMsgText: "本当にアカウントを削除しますか？",
+				yesText: "はい",
+				noText: "いいえ"
+			}
+		};
+		this.translations = languages[this.props.lan.value];
+	}
+
 	initState() {
 		this.nickname = "";
 		this.img_url = "";
@@ -29,39 +68,40 @@ export class EditProfile extends Component {
 	}
 
 	template () {
+		const translations = this.translations;
 		return `
 			<div id="edit-box">
-				<div id="deleteButton">Delete Account</div>
+				<div id="deleteButton">${translations.deleteText}</div>
 				<div id="deleteDoubleCheck">
 					<div id="deleteAlertMsg">
-						Are you sure you want to delete your account?
+						${translations.deleteMsgText}
 					</div>
 					<div id="deleteChoiceBox">
-						<div id="deleteYesButton">Yes</div>
-						<div id="deleteNoButton">No</div>
+						<div id="deleteYesButton">${translations.yesText}</div>
+						<div id="deleteNoButton">${translations.noText}</div>
 					</div>
 				</div>
 				<img src="/img/back.png" id="goBack"></img>
 				<div id="editTitle">
-					Edit Profile
+					${translations.headText}
 				</div>
 				<div id="editContents">
 					<div id="prevProfile">
 						<div id="edit-nick">
-							<label for="nickname">Nickname:</label>
+							<label for="nickname">${translations.nickText}:</label>
 							<div id="presentNick">${this.state.nickname}</div>
 						</div>
 						<div id="edit-img">
 							<div id="image-preview">
 								<img id="presentImage" src="${this.state.img_url}" alt="Profile Image"></img>
 							</div>
 							<div id="url-upload-wrapper">
-								<label for="image-url">Present Image URL</label>
+								<label for="image-url">${translations.urlText}</label>
 								<input type="text" class="profile-image-url" value="${this.state.img_url}" placeholder="Enter image URL" readonly>
 							</div>
 						</div>
 						<div id="edit-2FA">
-							<label for="2fa-toggle">Enable 2FA:</label>
+							<label for="2fa-toggle">${translations.twofaText}:</label>
 							${this.state.is_2FA ? `<input type="checkbox" checked disabled>` : `<input type="checkbox" disabled>`}
 						</div>
 					</div>
@@ -70,23 +110,23 @@ export class EditProfile extends Component {
 					</div>
 					<div id="changedProfile">
 						<div class="edit" id="edit-nick">
-							<label for="nickname">Nickname:</label>
+							<label for="nickname">${translations.nickText}:</label>
 							<input type="text" id="nickname" value="${this.state.nickname}" autocomplete="off" maxlength="10">
 						</div>
 						<div class="edit" id="edit-img">
 							<div id="image-preview">
 								<img id="profile-image" src="${this.state.img_url}" alt="Profile Image"></img>
 							</div>
 							<div id="url-upload-wrapper">
-								<label for="image-url">Enter Image URL</label>
+								<label for="image-url">${translations.urlText}</label>
 								<input type="text" class="profile-image-url" id="image-url" value="${this.state.img_url}" placeholder="Enter image URL">
 							</div>
 						</div>
 						<div id="edit-2FA">
-							<label for="2fa-toggle">Enable 2FA:</label>
+							<label for="2fa-toggle">${translations.twofaText}:</label>
 							${this.state.is_2FA ? `<input type="checkbox" id="2fa-toggle" checked>` : `<input type="checkbox" id="2fa-toggle">`}
 						</div>
-						<button id="profileChange" type="submit">Save Changes</button>
+						<button id="profileChange" type="submit">${translations.saveText}</button>
 					</div>
 				</div>
 			</div>

frontend/src/components/Friends-Info.js

@@ -3,7 +3,7 @@ import { Component } from "../core/Component.js";
 export class FriendsInfo extends Component {
 
 	template () {
-		const { is_online, nickname, img_url } = this.props;
+		const { is_online, nickname, img_url, profileText, removeText } = this.props;
 		return `
 			<div id="onlineInfo">
 				${is_online ? `<div id="online"></div>` : `<div id="offline"></div>`}
@@ -13,8 +13,8 @@ export class FriendsInfo extends Component {
 				<img id="friendImage" src="${img_url}"></img>
 			</div>
 			<div id="friendBottom">
-				<div class="goProfile" id="${nickname}">View Profile</div>
-				<div class="removeFriend" id="${nickname}">Remove</div>
+				<div class="goProfile" id="${nickname}">${profileText}</div>
+				<div class="removeFriend" id="${nickname}">${removeText}</div>
 			</div>
 		`;
 	}

frontend/src/components/Friends-List.js

@@ -6,15 +6,45 @@ import { Input } from "./Input.js";
 
 export class FriendsList extends Component {
 
+	translate() {
+		const languages = {
+			0: {
+				headText: "Friends List",
+				addText: "Add",
+				profileText: "View Profile",
+				removeText: "Remove",
+				searchText: "Search for friends..."
+			},
+			1: {
+				headText: "친구 목록",
+				addText: "추가",
+				profileText: "프로필 보기",
+				removeText: "제거",
+				searchText: "친구 검색..."
+			},
+			2: {
+				headText: "友達リスト",
+				addText: "追加",
+				profileText: "プロフィール",
+				removeText: "削除",
+				searchText: "友達を探す..."
+			}
+		};
+
+		this.translations = languages[this.props.lan.value];
+
+	}
+
 	template () {
 		this.info = null;  // friend의 정보
 		this.search = null; // add 버튼 눌렀을때 나오는 검색창 객체 (Input)
+		const translations = this.translations;
 		return `
 			<div id="friendsBox">
 				<img src="/img/back.png" id="goBack"></img>
 				<div id="friendsWindow">
 					<div id="friendsMenu">
-						<p id="friendsMenu">Friends List</p>
+						<p id="friendsMenu">${translations.headText}</p>
 					</div>
 					<div id="friendsBody">
 						<div id="friendsList">
@@ -28,7 +58,7 @@ export class FriendsList extends Component {
 					</div>
 					<div id="friendsEdit">
 						<div id="addDiv">
-							<div class="friendsEdit" id="addFriend">Add</div>
+							<div class="friendsEdit" id="addFriend">${translations.addText}</div>
 						</div>
 						<div id="search"></div>
 					</div>
@@ -54,12 +84,12 @@ export class FriendsList extends Component {
 			this.friends = data; // 응답에서 friends list 꺼내기
 
 			// 친구 목록에서 닉네임 리스트를 추출합니다.
-			const friendNicknameList = this.friends.map(friend => `${friend.nickname}#${friend.user_id}`);
-
+			const friendNicknameList = this.friends.map(friend => `${friend.nickname}`);
+			const friendIdList = this.friends.map(friend => `${friend.user_id}`);
 			// 친구 닉네임 리스트를 이용해 친구 목록 생성
 			const ulElement = document.querySelector("ul#friendsLists");
 			this.children.push(new List(ulElement, 
-				{ className: "fList", contents: friendNicknameList }));
+				{ className: "fList", ids: friendIdList, contents: friendNicknameList }));
 		})
 		.catch(error => {
 			console.error('Fetch operation failed:', error);
@@ -77,13 +107,12 @@ export class FriendsList extends Component {
 					this.children.splice(index, 1);
 				}
 			}
-
-			const part = event.target.id.split('#');
-			const uid = parseInt(part[1]);
+
+			const uid = parseInt(event.target.id);
 			const friend = this.friends.find(user => user.user_id === uid);
-
 			// 새로운 FriendsInfo 인스턴스를 생성하고, this.children에 추가
-			this.info = new FriendsInfo(ulElement, {is_online: friend.is_online, nickname: `${friend.nickname}#${friend.user_id}`, img_url: friend.img_url});
+			this.info = new FriendsInfo(ulElement, {is_online: friend.is_online, nickname: `${friend.nickname}#${friend.user_id}`,
+								 img_url: friend.img_url, profileText: this.translations.profileText, removeText: this.translations.removeText});
 			this.children.push(this.info);
 		});
 
@@ -104,7 +133,7 @@ export class FriendsList extends Component {
 				const index = this.children.indexOf(this.search);
 				if (index !== -1) this.children.splice(index, 1);
 			}
-			this.search = new Input(ulElement, {inputId: "searchInput", imageId: "addInputImage", img: "/img/plus.jpeg"});
+			this.search = new Input(ulElement, {inputId: "searchInput", imageId: "addInputImage", img: "/img/plus.jpeg", searchText: this.translations.searchText});
 			this.children.push(this.search);
 		});
 

frontend/src/components/Friends.js

@@ -4,6 +4,6 @@ import { FriendsList } from "./Friends-List.js";
 export class Friends extends Default {
 
 	mounted(){
-		new FriendsList(document.querySelector("div#contents"));
+		new FriendsList(document.querySelector("div#contents"), this.props);
 	}
 }

frontend/src/components/Home.js

@@ -4,6 +4,6 @@ import { Login } from "./Home-Login.js";
 export class Home extends Default {
 
 	mounted(){
-		new Login(document.querySelector("div#contents"));
+		new Login(document.querySelector("div#contents"), this.props);
 	}
 }

frontend/src/components/Input.js

@@ -3,9 +3,10 @@ import { Component } from "../core/Component.js";
 export class Input extends Component {
 
 	template () {
+		console.log(this.props.searchText);
 		return `
 			<div id="inputBox">
-				<input type="text" id="${this.props.inputId}" required autocomplete="off" placeholder="Search for friends...">
+				<input type="text" id="${this.props.inputId}" required autocomplete="off" placeholder="${this.props.searchText}">
 				<div id="searchResults" class="search-results"></div>
 			</div>
 			<img id="${this.props.imageId}" src="${this.props.img}"></img>

frontend/src/components/List.js

@@ -3,12 +3,12 @@ import { Component } from "../core/Component.js";
 export class List extends Component {
 
 	template () {
-		const { className, contents } = this.props;
+		const { className, ids, contents } = this.props;
 		return `
-			${contents.map(element => {
+			${contents.map((element, index) => {
 				const part = element.split('#');
 				const nickname = part[0];
-				return `<li class="${className}" id="${element}">${nickname}</li>`
+				return `<li class="${className}" id="${ids[index]}">${nickname}</li>`
 			}).join('')}
 		`;
 	}

frontend/src/components/Main-Menu.js

@@ -5,29 +5,60 @@ import { parseJWT } from "../core/jwt.js";
 
 export class Menu extends Component {
 
+	translate() {
+		const languages = {
+			0: {
+				gameMenuTexts: ["Local Game", "Multi Game", "AI", "Tournament"],
+				userMenuTexts: ["Friends", "Profile", "Logout"],
+				lanText: "Change Language"
+			},
+			1: {
+				gameMenuTexts: ["로컬 게임", "멀티 게임", "AI", "토너먼트"],
+				userMenuTexts: ["친구", "프로필", "로그아웃"],
+				lanText: "언어 변경"
+			},
+			2: {
+				gameMenuTexts: ["ローカルゲーム", "マルチゲーム", "AI", "トーナメント"],
+				userMenuTexts: ["友達", "プロフィール", "ログアウト"],
+				lanText: "言語を変更"
+			}
+		};
+
+		this.translations = languages[this.props.lan.value];
+
+	}
+
 	template () {
 		const payload = parseJWT();
 		if (!payload) this.uid = null;
 		else this.uid = payload.id;
 
+		const translations = this.translations;
+
 		return `
 			<div id="menuBox">
-			<ul id="gameMenu"></ul>
-			<ul id="userMenu"></ul>
+				<div id="lanButton">${translations.lanText}</div>
+				<ul id="gameMenu"></ul>
+				<ul id="userMenu"></ul>
 			</div>
 		`;
 	}
 
 	mounted(){
-		new List(document.querySelector("ul#gameMenu"), { className: "gameMode", contents: ["Local Game", "Multi Game", "AI", "Tournament"]});
-		new List(document.querySelector("ul#userMenu"), { className: "showInfo", contents: ["Friends", "Profile", "Logout"]});
+		new List(document.querySelector("ul#gameMenu"), { className: "gameMode", ids: ["Local Game", "Multi Game", "AI", "Tournament"], contents: this.translations.gameMenuTexts});
+		new List(document.querySelector("ul#userMenu"), { className: "showInfo", ids: ["Friends", "Profile", "Logout"], contents: this.translations.userMenuTexts});
 	}
 
 	setEvent () {
 		this.addEvent('click', '#Friends', () => {
 			changeUrl("/main/friends");
 		});
 
+		this.addEvent('click', '#lanButton', () => {
+			this.props.lan.value = (this.props.lan.value + 1) % 3;
+			changeUrl("/main")
+		});
+
 		this.addEvent('click', '#Profile', () => {
 			if (this.uid) changeUrl(`/main/profile/${this.uid}`);
 			else changeUrl("/");

frontend/src/components/Main.js

@@ -3,6 +3,7 @@ import { Menu } from "./Main-Menu.js";
 
 export class Main extends Default {
 	mounted(){
-		new Menu(document.querySelector("div#contents"));
+		new Menu(document.querySelector("div#contents"), this.props);
+		console.log(this.props.lan.value);
 	}
 }