feat: profile edit 이벤트 구현

MomHelpMe · Aug 11, 2024 · 2dbb7f5 · 2dbb7f5
1 parent 560203e
commit 2dbb7f5
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 5 deletions.
diff --git a/frontend/src/components/Edit-Profile.js b/frontend/src/components/Edit-Profile.js
@@ -5,9 +5,10 @@ export class EditProfile extends Component {
   template () {
 	this.nickname = "seonjo";
 	this.img_url = "/friends.png";
-	this.TwoFA = true;
+	this.TwoFA = false;
     return `
 		<div id="edit-box">
+			<img src="/back.png" id="goBack"></img>
 			<div id="editTitle">
 				Edit Profile
 			</div>
@@ -24,18 +25,19 @@ export class EditProfile extends Component {
 					</div>
 					<div id="edit-2FA">
 						<label for="2fa-toggle">Enable 2FA:</label>
-						${this.TwoFA ? `<input type="checkbox" id="2fa-toggle" checked disabled>` : `<input type="checkbox" id="2fa-toggle">`}
+						${this.TwoFA ? `<input type="checkbox" id="2fa-toggle" checked disabled>` : `<input type="checkbox" id="2fa-toggle" disabled>`}
 					</div>
 				</div>
 				<div id="Arrow">
 					<img id="arrowImg" src="/arrow.png"></img>
 				</div>
 				<div id="changedProfile">
-					<div id="edit-nick">
+					<div class="edit" id="edit-nick">
 						<label for="nickname">Nickname:</label>
 						<input type="text" id="nickname" value="${this.nickname}">
+						<div id="nickname-error" class="error-message"></div>
 					</div>
-					<div id="edit-img">
+					<div  class="edit" id="edit-img">
 						<div id="image-preview">
 							<img id="profile-image" src="${this.img_url}" alt="Profile Image"></img>
 						</div>
@@ -45,6 +47,7 @@ export class EditProfile extends Component {
 							</div>
 							<input type="file" id="file-upload" accept="image/*">
 						</div>
+						<div id="image-error" class="error-message"></div>
 					</div>
 					<div id="edit-2FA">
 						<label for="2fa-toggle">Enable 2FA:</label>
@@ -73,6 +76,58 @@ export class EditProfile extends Component {
 			}
 		});
 
-		this.addEvent('')
+		this.addEvent('click', '#profileChange', async (event) => {
+			event.preventDefault();
+
+			// Clear any previous error messages
+			document.getElementById('nickname-error').textContent = '';
+			document.getElementById('image-error').textContent = '';
+
+			// Fetch the values
+			const nickname = document.getElementById('nickname').value;
+			const imgFile = document.getElementById('file-upload').files[0];
+			const twoFA = document.getElementById('2fa-toggle').checked;
+
+			// Create FormData object to send file and other data
+			const formData = new FormData();
+			formData.append('nickname', nickname);
+			formData.append('twoFA', twoFA);
+			if (imgFile) {
+				formData.append('profileImage', imgFile);
+			}
+
+			document.getElementById('nickname-error').textContent = "nickname is invalid!";
+			document.getElementById('image-error').textContent = "image is invalid!"
+
+		// 	try {
+		// 		const response = await fetch('https://your-backend-api.com/api/update-profile', {
+		// 		  method: 'POST',
+		// 		  body: formData
+		// 		});
+
+		// 		if (response.ok) {
+		// 		  const result = await response.json();
+
+		// 		  // Handle validation results
+		// 		  if (!result.nicknameValid) {
+		// 			document.getElementById('nickname-error').textContent = result.message.nickname;
+		// 		  }
+
+		// 		  if (!result.imageValid) {
+		// 			document.getElementById('image-error').textContent = result.message.image;
+		// 		  }
+
+		// 		  if (result.nicknameValid && result.imageValid) {
+		// 			console.log('Profile updated successfully:', result);
+		// 			// 성공적인 업데이트 후의 추가 작업 (예: 메시지 표시, 리다이렉트 등)
+		// 		  }
+
+		// 		} else {
+		// 		  console.error('Failed to update profile. Status:', response.status);
+		// 		}
+		// 	  } catch (error) {
+		// 		console.error('Error updating profile:', error);
+		// 	  }
+		  });
 	}
 }
diff --git a/frontend/style.css b/frontend/style.css
@@ -973,6 +973,7 @@ div#edit-box {
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
+	position: relative;
 }
 
 div#editTitle {
@@ -1039,6 +1040,7 @@ div#presentNick {
 }
 
 div#edit-nick{
+	min-height: 80px;
 	width: 100%;
 	height: 12%;
 	background-color: rgba(137, 137, 141, 0.1);
@@ -1048,6 +1050,19 @@ div#edit-nick{
 	justify-content: center;
 }
 
+div.edit{
+	position: relative;
+}
+
+div#nickname-error {
+	position: absolute;
+	bottom: 3px;
+}
+
+div#image-error {
+	position: absolute;
+	bottom: 10px;
+}
 
 #edit-nick label {
     display: block;
@@ -1076,6 +1091,7 @@ div#edit-nick{
 }
 
 div#edit-img {
+	min-height: 400px;
 	width: 100%;
 	height: 60%;
 	display: flex;
@@ -1180,4 +1196,10 @@ button#profileChange {
 
 button#profileChange:hover {
     background-color: #357ABD;
+}
+
+.error-message {
+	color: red;
+	font-size: 12px;
+	margin-top: 5px;
 }