Merge pull request #28 from MomHelpMe/front/feat/update-profile-router

Front/feat/update profile router
MomHelpMe · Aug 26, 2024 · 7f415cf · 7f415cf
2 parents d195bd9 + 7a2c0d4
commit 7f415cf
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 16 deletions.
diff --git a/frontend/src/components/Edit-Profile.js b/frontend/src/components/Edit-Profile.js
@@ -1,9 +1,15 @@
 import { Component } from "../core/Component.js";
 import { changeUrl } from "../core/router.js";
+import { parseJWT } from "../core/jwt.js";
 
 export class EditProfile extends Component {
 
 	translate() {
+		const payload = parseJWT();
+
+		if (parseInt(this.props.uid) !== payload.id)
+			changeUrl("/404", false);
+
 		const languages = {
 			0: {
 				headText: "Edit Profile",
@@ -147,7 +153,7 @@ export class EditProfile extends Component {
 	}
 
 	setEvent() {
-		this.addEvent('click', '#goBack', (event) => {
+		this.addEvent('click', '#goBack', () => {
 			window.history.back();
 		});
 
@@ -158,15 +164,15 @@ export class EditProfile extends Component {
 			}
 		});
 
-		this.addEvent('click', '#deleteButton', (event) => {
+		this.addEvent('click', '#deleteButton', () => {
 			document.getElementById('deleteDoubleCheck').style.display = 'flex';
 		});
 
-		this.addEvent('click', '#deleteNoButton', (event) => {
+		this.addEvent('click', '#deleteNoButton', () => {
 			document.getElementById('deleteDoubleCheck').style.display = 'none';
 		});
 
-		this.addEvent('click', '#deleteYesButton', (event) => {
+		this.addEvent('click', '#deleteYesButton', () => {
 			//API!! ME DELETE
 			fetch("https://localhost:443/api/me/", {
 				method: 'DELETE',
@@ -187,10 +193,6 @@ export class EditProfile extends Component {
 			const imageUrl = document.getElementById('image-url').value;
 			const is_2FA = document.getElementById('2fa-toggle').checked;	
 
-			console.log(nickname);
-			console.log(imageUrl);
-			console.log(is_2FA);
-
 			// Create FormData object to send file and other data
 			const formData = new FormData();
 			formData.append('nickname', nickname);

diff --git a/frontend/src/components/Profile-Info.js b/frontend/src/components/Profile-Info.js
@@ -54,11 +54,13 @@ export class ProfileInfo extends Component {
 		.then(data => {
 			this.state.games = data.games;
 			this.state.user = data.user;
-
 			this.state.rate = data.user.lose == 0 ? (data.user.win == 0 ? 0 : 100) :
 							Math.round((data.user.win / (data.user.lose + data.user.win)) * 100);
 		})
-		.catch(error => console.error('Fetch error:', error));
+		.catch(error => {
+			console.error('Fetch error:', error);
+			changeUrl("/404", false);
+		});
 		return { user: this.user, rate: this.rate, games: this.games };
 	}
 
@@ -125,6 +127,10 @@ export class ProfileInfo extends Component {
 			window.history.back();
 		});
 
+		this.addEvent('click', '.opNick', (event) => {
+			changeUrl(`/main/profile/${event.target.id}`);
+		});
+
 		this.addEvent('click', '#profile-edit', () => {
 			changeUrl(`/main/profile/${this.props.uid}/edit`);
 		});

diff --git a/frontend/src/components/Profile-List.js b/frontend/src/components/Profile-List.js
@@ -9,7 +9,6 @@ export class MatchList extends Component {
 		  ${matches.map(element => {
 			// Date 객체로 변환
 			const date = new Date(element.start_timestamp);
-			
 			// 월, 일, 시, 분 추출
 			const month = date.getMonth() + 1; // getMonth()는 0부터 시작하므로 1을 더해줍니다.
 			const day = date.getDate();
@@ -27,7 +26,7 @@ export class MatchList extends Component {
 						<span id="vs">VS</span>
 					</div>
 					<div id="opImg">
-						<span id="opNick">${element.op_user.nickname}</span>
+						<span class="opNick" id="${element.op_user.user_id}">${element.op_user.nickname}</span>
 						<img id="opImg" src=${element.op_user.img_url}></img>
 					</div>
 					<div id="matchScore">

diff --git a/frontend/src/core/router.js b/frontend/src/core/router.js
@@ -125,7 +125,6 @@ export async function parsePath(path) {
 			keys.forEach((key, index) => {
 				props[key.substring(1)] = values[index];
 			});
-			console.log(props);
 			route.component(props);
 			return;
 		}

diff --git a/frontend/style.css b/frontend/style.css
@@ -958,11 +958,16 @@ img#opImg {
 	aspect-ratio: 1 / 1;
 }
 
-span#opNick{
-	display: inline-block;
-	width: 100px;
+span.opNick{
+	margin-right: 30px;
 	font-size: 20px;
 	font-weight: 700;
+    color: #31363F;
+    cursor: pointer;
+}
+
+span.opNick:hover {
+	color: #f10000; /* 마우스를 올렸을 때 변경될 글자 색 */
 }
 
 div#matchScore {