[Firebase&Web연동 12] 프로필 페이지 수정 버튼 구현

[Firebase&Web연동 12] 프로필 페이지 수정하기 구현

● 들어가기 전

지난 포스팅에서는 session체크를 해서 로그인한 유저만 마이페이지 접근 할 수 있게 만들었다. 그리고 sessoincheck 로직을 공통모듈로 사용하기 위해서 js 파일을 따로 만들어서 분리시켜주었다. 이번에는 수정 버튼의 id를 이용해서 수정버튼이 눌렸을 때 file 버튼이 활성화 되고, 한줄 글을 적을 수 있는 textarea 태그를 활성화 시켜주는 법을 살펴보자. 시작전에 제일 아래에 첨부한 전체 소스코드를 열어서 살펴보자. 그리고 firebase api script는 꼭 자신이 부여받은 값으로 바꾸는거 잊지말자.

● 실습순서

1.mypage에서 수정하기 버튼을 눌렀을 때 작동할 함수 만들어 주기

2.함수안에 새로운 file버튼 엘리먼트, textarea 엘리먼트 활성화 시켜주기

3.로직 설명

4.실행

1. 수정하기 버튼 눌렀을때 작동할 함수

먼저 mypage.js 페이지로 가서 $(document).ready()...부분 아래 button 아이디(changeBtn)를 이용해서 클릭 이벤트가 발생이되면 changeButtonAction() 함수를 호출해준다.

<script>

$(document).ready(function () {

//세션체크 함수먼저 호출!

userSessionCheck();

});

//수정 버튼이 click 되기를 대기하고 있는 이벤트 함수

$(document).on('click', '#changeBtn', function () {

changeButtonAction();

});

 

2. 로직 설명과 새로운 엘리먼트 생성 

먼저 mypage.js 페이지로 가서 $(document).ready()...부분 아래를보자. <button> id를 이용해서 클릭 이벤트가 발생이되면 changeButtonAction() 함수를 호출해준다.

changeButtonAction()함수내용은 아래와 같다. 이부분도 javascript 내용이기 때문에 자세한 설명보다 대략적인 설명을 하고 넘어가도록 하겠다. (또한 이 부분을 반드시 이렇게 구현하지 않아도된다는 점을 알려둔다. .hide 함수등 다양한 함수를 이용할 수 있다.) 

 각각의 위치에 console.log를 달아 놓았다. 먼저 javascript dom 선택자를 이용해서 버튼의 내용을 가져와서 if문으로 체크를 해준다. 수정하기 버튼이면 file을 업로드할 태그를 append()를 이용해서 붙여준다. 한줄 메시지도 마찬가지로 dom을 이용해서 삭제 처리 해주고, 새로운 textarea 엘리먼트를 붙여준다. 마지막으로 버튼의 이름을 저장하기로 바꾸고, 버튼의 색깔을 녹색으로 바꾼다. 또한 버튼의 이름이 수정하기가 아니라면 저장하기 함수가 작동되도록 한다. 저장하기 부분은 다음 포스팅에서 살펴보겠다.

//수정, 저장하기 버튼 눌렀을 때 작동하는 함수

function changeButtonAction(){

console.log("버튼이 눌렀습니다");

var changeBtn = document.getElementById("changeBtn");

var changeBtnText = changeBtn.textContent; //버튼의 text제목을 가져온다.

//버튼이 수정하기 버튼이면

if (changeBtnText == "수정하기") {

console.log("수정하기 버튼 - input file 나타나고 - p 태그 대신 input text 태그로 변경시키기 - 저장버튼 활성화 작업을 시작합니다");

//input file 붙여주기 - id가 fileButton 인 filetpye의 엘리먼트를 붙여주었다.

var html = "<input type=\"file\" id=\"fileButton\" />";

$("#showfile").append(html);

console.log("input file 붙여주기 완료");

//기존에 한줄 메시지 없애주고, 새로운 input text 붙여주기

var parent = document.getElementById("statetxtP");

var child = document.getElementById("statetxt");

parent.removeChild(child);

console.log("한줄 메시지가 들어있는 p 태그 삭제 완료");

//한줄 메시지 적을 textarea 창 활성화

var newTextarea = "<textarea class=\"form-control\" rows=\"3\" id=\"comment\"></textarea>";

$("#statetxtP").append(newTextarea);

console.log("한줄 메시지 적을 textarea 창 활성화 완료");

//저장하기 버튼 활성화

changeBtn.textContent = "저장하기"

changeBtn.className = "btn btn-success"; //bootstrap 클래스 속성 변경해주기

} else {

console.log("저장 버튼 - input file 사라지게 input text태그 사라지고 p 태그에 넣고 저장버튼 비활성화 수정버튼 활성화를 시작합니다");

//저장하기 함수 호출

console.log("저장하기 함수 호출");

}

}

3. 실행

터미널을 열고 firebase 서버를 실행시켜 보자. 그리고 로그인한 후 mypage로 이동해서 노란색 수정하기 버튼을 클릭하면 사진아래 file 버튼이 활성화 되고, 한줄 상태 메시지를 작성할 수 있는 textarea 창이 활성화 된다. 그리고 버튼의 이름은 저장하기, 색깔은 녹색으로 바뀐다. 

4. 마무리

다음포스팅에는  저장하기 버튼을 클릭했을 때 선택한 이미지를 저장하고, 한줄 상태 메시지를 저장하는 로직을 같이 살펴보도록 하겠다. 이번시간에는 js에 관한 내용이 거의 전부였다. 이제 firebase의 file storage를 알아볼 시간이다.

5. 소스코드

thanksMemo.zip

보다 자세한 설명은 유튜브에 영상으로 정리해 놓았으니 공부하시다가 참고하셔도 좋을것 같습니다