Skip to content

Commit

Permalink
feat: profile edit 페이지 구현 (event 제외)
Browse files Browse the repository at this point in the history
  • Loading branch information
@seonjo1
seonjo1 committed Aug 10, 2024
1 parent 93afbd1 commit 560203e
Show file tree
Hide file tree
Showing 6 changed files with 282 additions and 21 deletions.
Binary file added frontend/arrow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified frontend/friends.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
80 changes: 62 additions & 18 deletions frontend/src/components/Edit-Profile.js
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,78 @@
import { Component } from "../core/Component.js";
import { changeUrl } from "../core/router.js";

export class EditProfile extends Component {

template () {
this.user = { nickname: "seonjo", img_url: "../../소년명수.png"};
// api로 win, lose, rate 호출
this.win = 35;
this.lose = 20;
this.rate = (35 / 55) * 100;
this.matches = [
{startTime: "7/5 18:05", playTime: "30 min", img_url: "../../소년명수.png", type: "win", myScore: 5, opScore: 3, opNick: "michang" },
{startTime: "7/3 18:25", playTime: "22 min", img_url: "../../소년명수.png", type: "lose", myScore: 3, opScore: 5, opNick: "jiko" },
{startTime: "7/1 21:15", playTime: "18 min", img_url: "../../소년명수.png", type: "win", myScore: 5, opScore: 2, opNick: "jaehejun" },
{startTime: "6/25 10:34", playTime: "22 min", img_url: "../../소년명수.png", type: "win", myScore: 5, opScore: 3, opNick: "seunan" },
{startTime: "6/18 22:53", playTime: "17 min", img_url: "../../소년명수.png", type: "lose", myScore: 1, opScore: 5, opNick: "michang" },
{startTime: "6/17 12:14", playTime: "50 min", img_url: "../../소년명수.png", type: "lose", myScore: 0, opScore: 5, opNick: "jaehejun" },
{startTime: "6/5 18:21", playTime: "43 min", img_url: "../../소년명수.png", type: "lose", myScore: 2, opScore: 5, opNick: "jiko" },
{startTime: "6/2 11:43", playTime: "23 min", img_url: "../../소년명수.png", type: "win", myScore: 5, opScore: 3, opNick: "seunan" },
];
console.log(this.props.nickname, this.user);
this.nickname = "seonjo";
this.img_url = "/friends.png";
this.TwoFA = true;
return `
<div id="edit-box">
<div id="editTitle">
Edit Profile
</div>
<div id="editContents">
<div id="prevProfile">
<div id="edit-nick">
<label for="nickname">Nickname:</label>
<div id="presentNick">${this.nickname}</div>
</div>
<div id="edit-img">
<div id="image-preview">
<img id="presentImage" src="${this.img_url}" alt="Profile Image"></img>
</div>
</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">`}
</div>
</div>
<div id="Arrow">
<img id="arrowImg" src="/arrow.png"></img>
</div>
<div id="changedProfile">
<div id="edit-nick">
<label for="nickname">Nickname:</label>
<input type="text" id="nickname" value="${this.nickname}">
</div>
<div id="edit-img">
<div id="image-preview">
<img id="profile-image" src="${this.img_url}" alt="Profile Image"></img>
</div>
<div id="file-upload-wrapper">
<div id="custom-file-upload">
<span>Click to choose a file</span>
</div>
<input type="file" id="file-upload" accept="image/*">
</div>
</div>
<div id="edit-2FA">
<label for="2fa-toggle">Enable 2FA:</label>
${this.TwoFA ? `<input type="checkbox" id="2fa-toggle" checked>` : `<input type="checkbox" id="2fa-toggle">`}
</div>
<button id="profileChange" type="submit">Save Changes</button>
</div>
</div>
</div>
`;
}

setEvent() {
this.addEvent('click', '#goBack', (event) => {
window.history.back();
});

this.addEvent('change', '#file-upload', (event) => { // ID를 #file-upload로 수정
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
document.getElementById('profile-image').src = e.target.result;
};
reader.readAsDataURL(file);
}
});

this.addEvent('')
}
}
1 change: 1 addition & 0 deletions frontend/src/components/Friends-Info.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Component } from "../core/Component.js";

export class FriendsInfo extends Component {

template () {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/Profile-info.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export class ProfileInfo extends Component {
});

this.addEvent('click', '#profile-edit', (event) => {
changeUrl("/main/profile/:nickname/edit");
changeUrl(`/main/profile/${this.nickname}/edit`);
});

// 컴포넌트가 렌더링된 후 원형 진행 막대를 그립니다.
Expand Down
220 changes: 218 additions & 2 deletions frontend/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,8 +93,8 @@ div#margin {
}

div#border {
min-width: 1300px;
min-height: 700px;
min-width: 1540px;
min-height: 830px;
width: 75%;
height: 80%;
display: flex;
Expand Down Expand Up @@ -964,4 +964,220 @@ span#vsSign {
span#opScore {
font-size: 30px;
font-weight: 700;
}

div#edit-box {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

div#editTitle {
margin-bottom: 30px;
margin-top: 30px;
width: 30%;
height: 10%;
font-weight: 900;
color:#31363F;
font-size: 3.0rem;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}

div#editContents{
width: 100%;
height: 90%;
display: flex;
justify-content: center;
}

div#prevProfile {
min-height: 620px;
width: 40%;
height: 95%;
display: flex;
flex-direction: column;
align-items: center;
}

div#Arrow {
background-color: white;
width: 10%;
height: 90%;
display: flex;
justify-content: center;
align-items: center;
}

img#arrowImg {
width: 80px;
height: 80px;
}

div#changedProfile {
width: 40%;
height: 95%;
display: flex;
flex-direction: column;
align-items: center;
}

div#presentNick {
font-weight: 500;
width: 30%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 16px;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
transition: border-color 0.3s ease;
}

div#edit-nick{
width: 100%;
height: 12%;
background-color: rgba(137, 137, 141, 0.1);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
}


#edit-nick label {
display: block;
margin-right: 20px;
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
color: #333;
}


#edit-nick input[type="text"] {
width: 30%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 16px;
font-weight: 500;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
transition: border-color 0.3s ease;
}

#edit-nick input[type="text"]:focus {
border-color: #4A90E2;
outline: none;
}

div#edit-img {
width: 100%;
height: 60%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(137, 137, 141, 0.1);
border-radius: 20px;
margin-top: 30px;
}

#file-upload-wrapper {
position: relative;
width: 300px;
height: 50px;
}

#custom-file-upload {
width: 100%;
height: 100%;
background-color: #4A90E2;
color: white;
text-align: center;
line-height: 50px;
font-size: 16px;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease;
}

#custom-file-upload:hover {
background-color: #357ABD;
}

#file-upload {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
cursor: pointer;
}

#image-preview {
margin-bottom: 10px;
text-align: center;
}

#presentImage {
margin-top: 20px;
width: 280px;
height: 240px;
object-fit: cover;
border-radius: 10px;
}

#profile-image {
margin-top: 20px;
width: 280px;
height: 240px;
object-fit: cover;
border-radius: 10px;
}

div#edit-2FA{
width: 100%;
height: 10%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(137, 137, 141, 0.1);
border-radius: 20px;
margin-top: 30px;
}

#edit-2FA label {
font-size: 16px;
font-weight: bold;
color: #333;
}

#edit-2FA input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
transition: all 0.3s ease;
}

button#profileChange {
margin-top: 20px;
width: 40%;
padding: 10px 20px;
background-color: #4A90E2;
color: white;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

button#profileChange:hover {
background-color: #357ABD;
}

0 comments on commit 560203e

Please sign in to comment.