채팅 기능 구현을 얼추 마무리하고 다음으로 구현한 것은 마이페이지였다.

현재 마이페이지에 들어간 내용은 자신의 프로필을 확인하고, 프로필을 수정하는 것이다.

MyProfile.js에서 프로필 확인 페이지(ShowProfile.js) 또는 프로필 수정 페이지(EditProfile.js)가 뜨도록 했다.

 

 

ShowProfile.js

 

레이아웃은 배경 이미지, 프로필 사진, 소개글, 이메일, 가입 날짜가 출력되도록 배치를 했고

현재 실제 데이터를 출력하는 부분은 프로필 사진, 소개글, 이메일이다.

 

배경 이미지는 기본으로 되어있어서 이 이미지를 고정으로 할지, 사용자가 변경할 수 있게 할지 고민중이고

가입 날짜는 나중에 회원가입 구현 코드를 수정해서 날짜를 저장하고 불러올 예정이다.

 

 

EditProfile.js

 

프로필 수정 화면이다. 수정할 수 있는 항목이 몇 가지 없어서 굉장히 심플한 모습..^^

Material UI의 TextField를 이용했다.

 

 

프로필 이미지는 <input type="file">을 이용해서 위와 같이 파일을 선택할 수 있었고

파일 선택 직후에 적용될 프로필 미리보기는 http://yoonbumtae.com/?p=3304 이 포스팅을 참고해서 작성했다.

수정 완료 버튼을 클릭하면 Firebase DB에 이름과 소개글을 업데이트하고

Firebase Storage에 이미지를 저장하도록 구현했다.

 

Storage와 관련된 주요 코드만 나타낸 것 👇

 

services - firebase.js

import firebase from 'firebase/compat/app';
import 'firebase/compat/storage';

const firebaseConfig = {
	...
    storageBucket: "버킷아이디",
    ...
};

...
firebase.initializeApp(firebaseConfig);
const storage = firebase.storage();

export {storage};

 

profile - EditProfile.js 에서 이미지 업로드하기

import { firestore, storage } from "../services/firebase";

const EditProfile = (props) => {
    const [image, setImage] = useState('');	//이미지를 변경하면 상태 변경
    const id = useSelector(state => state.user.id);	//redux에 저장된 사용자 아이디

    const uploadImg = () => {
        if (image === '') {
            return;
        }
        //사용자 아이디를 이미지 이름으로 지정해서 storage 업로드
        storage.ref(`/profile/${id}`).put(image).then(() => {   
        	//업로드 이후 처리
        });
    }

 

profile - MyProfile.js 에서 Storage 이미지 가져오기

  const id = useSelector(state => state.user.id);

  function changeImg() {
    imgUrl = storage.ref(`profile/${id}`).getDownloadURL().then((url) => {
      //받아온 url 처리
    })
  }

 

코드는 간단하다. ref로 경로를 지정하고 put으로 업로드, getDownloadURL로 가져오면 된다.

 

이미지 변경을 완료하고 나서 사이트에 바로 반영하기 위해

이미지 url을 상태로 가지고 프로필 수정 완료 시 상태를 변경하도록 했다.

 

 

프로필 수정은 쉽게 구현했고 이제 웹사이트 전체 레이아웃을 수정한 다음, 단체방 생성 기능 구현을 고려해봐야겠다.

 

+ Recent posts