๐ฝ ์์ ํ๋ userInfo์ css ์ js ์๋๋ค์ ํ์ธํ๊ณ
sidebar๋ฅผ ํ๋ฌ ๊ฐ๋ณด๊ฒ ์ต๋๋ค.
.main-container {
margin: 10px auto;
width: 550px;
height: 100%;
}
.main-hidden {
display: none;
}
.main-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.main-title {
margin: 20px 0px 0px 20px;
font-size: 36px;
}
.info-photo {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
width: 100%;
height: 300px;
overflow: hidden;
cursor: pointer;
}
.info-photo:hover {
opacity: 0.8;
}
.photo-file {
display: none;
}
.info-photo img {
width: 100%;
}
.change-nav {
position: absolute;
bottom: 3px;
right: 3px;
display: none;
border-radius: 5px;
padding: 5px;
background-color: #121212bb;
color: #f0f0f0;
font-size: 12px;
}
.info-photo:hover .change-nav {
display: block;
}
.info-main {
margin-top: 30px;
padding: 20px;
}
.info-title {
font-size: 20px;
margin-bottom: 10px;
cursor: default;
}
.button-hidden {
display: none;
}
.info-detail {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.detail-left, .detail-right {
width: 48%;
}
.info-input-container {
display: flex;
flex-direction: column;
width: 100%;
}
.info-input-container label {
font-weight: 600;
margin-bottom: 5px;
}
.info-input {
margin-bottom: 10px;
border-bottom: 1px solid #dbdbdb;
width: 100%;
background-color: #f0f0f0;
}
.introduce-input {
border-bottom: 1px solid #dbdbdb;
width: 100%;
height: 100px;
resize: none;
background-color: #f0f0f0;
}
.info-input:disabled, .introduce-input:disabled {
background-color: #fff;
}
์ด userInfo์์์ ๊ธฐ๋ฅ์ photo๋ฅผ ๋ฐ๊ฟ ๋ ํด๋ฆญ๋๋ ๊ฒ๊ณผ
์ด๋ฏธ์ง๊ฐ ๋ณ๊ฒฝ๋๋ ๊ฒ ๊ทธ๋ฆฌ๊ณ ์๋์ ์ ๋ณด๋ค์ ์์ ๋ฒํผ์ ๋๋ ์ ๋
์์ ์ด ๊ฐ๋ฅํ๊ฒ ํ๋ ๊ฒ ์ ๋๋๊ฒ ๋ค.
์๋์ ์ฝ๋๋ฅผ ๋ณด๋ฉด์ ๋ถ์ํด๋ณด์
// ์ต๋ํ ์ฝ๋๋ฅผ ์ฌํ์ฉ ํ๊ณ ์ ๊ทผ์ ์ธ์คํด์ค๋ฅผ ์ด์ฉํด์ผ๋ง ์ ๊ทผ
// ๊ฐ๋ฅํ๋๋ก ์ฑ๊ธํค์ผ๋ก ์ ์ํ ์์ ์ด๋ค
class InformationEvent {
static #instance = null;
static getInstance() {
if(this.#instance == null){
this.#instance = new InformationEvent();
}
return this.#instance;
}
// ์ฌ์ง์ ํด๋ฆญ ํ์ ๋ input์ด ํด๋ฆญ๋๋๋ก ์ค์ ํด์ฃผ๋ ๊ธฐ๋ฅ์ด๋ค.
addEventPhotoChangeClick() {
const infoPhoto = document.querySelector('.info-photo');
infoPhoto.onclick = () => {
const photoFile = document.querySelector('.photo-file');
photoFile.click();
}
}
// ์ฌ์ง์ด ํด๋ฆญ๋์ด input์ด ์ด๋ฆฌ๊ณ ์ฌ์ง์ด ๋ณ๊ฒฝ ๋ฌ์ ๊ฒฝ์ฐ ์๋์ ๊ธฐ๋ฅ์ด ์งํ๋๋ค.
addEventPhotoChange() {
const photoFile = document.querySelector('.photo-file');
photoFile.onchange = () => {
// ์๋์ FileService ๋ํ ์ฑ๊ธํค์ผ๋ก ์ ์๋์ด ์๋ค.
FileService.getInstance().changePhoto();
}
}
// information์ edit ๋ฒํผ์ด ํด๋ฆญ๋์์ ๊ฒฝ์ฐ
addEventInformationEdit() {
this.addEventAboutMeModifyClick();
this.addEventAboutMeSaveClick();
}
// introduction์ edit์ด ํด๋ฆญ๋์์ ๊ฒฝ์ฐ
addEventIntrodutionEdit() {
this.addEventSelfIntroductionModifyClick();
this.addEventSelfIntroductionSaveClick();
}
// ํด๋น ํจ์๋ click ํ ๋ฒํผ์ด ์์ ๋ฒํผ์ธ์ง ์์ ์๋ฃํ ์ ์ฅ ๋ฒํผ์ธ์ง ๊ตฌ๋ณํด์ ์๋์ ํ๋ ๊ฒ์ ์ ์ ํด๋์๋ค.
addEventAboutMeModifyClick() {
const aboutMeModifyButton = document.querySelector('.m-aboutme');
aboutMeModifyButton.onclick = () => {
const aboutMeSaveButton = document.querySelector('.s-aboutme');
aboutMeSaveButton.classList.remove('button-hidden');
aboutMeModifyButton.classList.add('button-hidden');
const infoInputContainers = document.querySelectorAll('.info-input-container');
infoInputContainers.forEach(infoInputContainer => {
const infoInput = infoInputContainer.querySelector('.info-input');
infoInput.disabled = false;
});
}
}
// ํด๋น ํจ์๋ save๋ฒํผ์ด ํด๋ฆญ ๋์์ ๋ ์ด๋ค์์ผ๋ก ์๋ํ ์ง ์ ์ ํด๋์ ํจ์ ์ด๋ค.
addEventAboutMeSaveClick() {
const aboutMeSaveButton = document.querySelector('.s-aboutme');
aboutMeSaveButton.onclick = () => {
const aboutMeModifyButton = document.querySelector('.m-aboutme');
aboutMeModifyButton.classList.remove('button-hidden');
aboutMeSaveButton.classList.add('button-hidden');
const infoInputContainers = document.querySelectorAll('.info-input-container');
infoInputContainers.forEach(infoInputContainer => {
const infoInput = infoInputContainer.querySelector('.info-input');
infoInput.disabled = true;
});
}
}
addEventSelfIntroductionModifyClick() {
const selfIntroductionModifyButton = document.querySelector('.m-introduce');
selfIntroductionModifyButton.onclick = () => {
const selfIntroductionSaveButton = document.querySelector('.s-introduce');
selfIntroductionSaveButton.classList.remove('button-hidden');
selfIntroductionModifyButton.classList.add('button-hidden');
const introduceInput = document.querySelector('.introduce-input');
introduceInput.disabled = false;
}
}
addEventSelfIntroductionSaveClick() {
const selfIntroductionSaveButton = document.querySelector('.s-introduce');
selfIntroductionSaveButton.onclick = () => {
const selfIntroductionModifyButton = document.querySelector('.m-introduce');
selfIntroductionModifyButton.classList.remove('button-hidden');
selfIntroductionSaveButton.classList.add('button-hidden');
const introduceInput = document.querySelector('.introduce-input');
introduceInput.disabled = true;
}
}
}
class InformationService {
static #instance = null;
static getInstance() {
if(this.#instance == null){
this.#instance = new InformationService();
}
return this.#instance;
}
// ํ๋ฉด์ด ๋ก๋๋๋ ๋์์ ์งํ๋๋ ๋ก์ง์ด๋ค
// ์ฐ๋ฆฌ๋ ๋ก์ปฌ์คํ ๋ฆฌ์ง์ ์ ๋ณด๋ฅผ ์ ์ฅํ์ฌ ์๋ก๊ณ ์นจ์ ํ์ฌ๋
// ์ ๋ณด๊ฐ ๋ ์๊ฐ์ง ์๊ฒ ํ์์ต๋๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์
// ์ต์ด์ ๊ฐ์ด ์์ ๋ ๊ธฐ๋ณธ๊ฐ์ผ๋ก ๋ฐ์์ฌ์ ์๊ฒ ์๋์ ์ฝ๋์ฒ๋ผ
// ๊ตฌํํด์ฃผ์ด์ผ ํฉ๋๋ค.
loadInfo() {
this.loadInfoPhoto();
}
loadInfoPhoto() {
const infoPhotoImg = document.querySelector('.info-photo img');
const infoPhoto = localStorage.getItem('infoPhoto');
if (infoPhoto== null) {
infoPhotoImg.src = './images/noimage-760x460.png'
}else {
infoPhotoImg.src = infoPhoto;
}
}
}
class FileService {
static #instance = null;
static getInstance() {
if(this.#instance == null){
this.#instance = new FileService();
}
return this.#instance;
}
changePhoto() {
const photoForm = document.querySelector('.photo-form');
const formData = new FormData(photoForm);
const fileValue = formData.get('file');
if(fileValue.size == 0) {
return;
}
this.showPreview(fileValue);
}
showPreview(fileValue) {
const fileReader = new FileReader();
fileReader.readAsDataURL(fileValue);
fileReader.onload = (e) => {
const photoImg = document.querySelector('.info-photo img');
photoImg.src = e.target.result;
localStorage.setItem('infoPhoto', photoImg.src);
}
}
}
js, css ๋ฅผ ๋ค๋ฃจ๊ณ side bar ๊น์ง ๊ธฐ๋ก์ ํ๋ ค ํ์ผ๋ ๋ด์ฉ์ด
๊ฝค๋ ๊ธธ์๋ ๊ด๊ณ๋ก ๋ค์ ์ฑํฐ์์ ๊ธฐ๋ก์ ํ ์์ ์ ๋๋ค.
์ข๋ ์ข์ js ๋ฐฉ์์ด ์์ ๊ฒ์ด๊ณ jquery๋ฑ ๋ค๋ฅธ ๋ฐฉ๋ฒ๋ ์๊ฒ ์ง๋ง
์์ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ชจ๋ ๊ฒ์ ์ ์ดํ๋๊ฒ ๋ชฉํ์๊ธฐ ๋๋ฌธ์
์ฝ๋๊ฐ ๋ง์ด ๊ธธ๊ณ ์ด์ํ ์๋ ์์ต๋๋ค!!