diff --git a/frontend/src/components/Edit-Profile.js b/frontend/src/components/Edit-Profile.js
index bca33ee..62365ea 100644
--- 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 `
-
@@ -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);
+ // }
+ });
}
}
\ No newline at end of file
diff --git a/frontend/style.css b/frontend/style.css
index 0ebf777..46f26a0 100644
--- 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;
}
\ No newline at end of file