스파르타코딩클럽 내일배움캠프 88일차

오늘 일과 간단 요약

1. 오전 스크럼
2. SNS 공유 기능 버그 수정
3. 이메일/비밀번호 수정 기능 추가
4. 회원 탈퇴 기능 추가
5. 오후 스크럼

 

 

 

 

 

 

 

 

(주말) 로그인, 회원가입 페이지 생성

 까먹고 WIL에 안 적었는데, 주말동안 로그인/회원가입 페이지로 리팩토링했다. 유저 피드백을 받으면서 의외로 모달창으로 구현한 로그인 부분에서 불편하다는 점이 많았다. 모달 바깥을 클릭하면 모달이 사라지게 구현했는데, 그 부분 때문에 잘못 눌렀다가 아예 회원가입 과정이 날라갔다는 분도 있었고, 모달창이 너무 좁아보인다는 의견도 있었다.

 

 그래서 아예 모달창 크기를 크게 늘리고 UI를 수정해야 하나 했는데, 그냥 모달창 대신에 새로 페이지를 만드는 게 더 익숙하는 피드백에 따라 페이지로 리팩토링했다. 자연스럽게 로그인 이전에 헤더에 로그인/회원가입 버튼을 따로 만들자고 했다가 사라진 것도 추가할 수 있었다.

 

 주말동안 새로 페이지 생성하고 router에 추가하고, 페이지에 맞게 UI를 수정하느라 시간을 다 보냈다. 다행히 그 외에는 고칠 점들은 나오지 않았고 페이지 생성에 따라 모달창은 아예 삭제하는 등 대대적인 공사(?)를 했다. 확실히 모달보다는 편하긴 하다. 나중에 프로젝트를 진행할 때면 이메일/비밀번호로 회원가입, 로그인 하는 곳은 모달창 바깥 클릭을 막아두거나 아예 소셜로그인만 존재할 때 모달을 하는게 나을 것 같기도 하다.

 

 아니면...생각해보면 거의 대부분의 페이지가 새로 페이지가 있는 것 같기도 하고...? 페이지가 더 편하려나. 아무튼 거의 초반에 구현했는데 빼서 조금 아쉽지만 유저 피드백을 받았으니 보다 더 편한 길로 갔다는 생각을 하고 오전에 마무리하고 PR을 했다.

 

 

 

 

 

 

 

SNS 공유 기능 버그 수정

 유저 피드백에서, SNS 공유할 때 웹 링크 복사 시 아무런 alert가 뜨지 않아서 실제로 복사가 되었는지 안되었는지 모르겠다는 의견이 있었다. 생각해보니 진짜로 alert창을 추가하지 않은 것이다..! 생각도 안하고 그냥 복사한 뒤에 다른 창에서 복사가 되었나만 확인했지 그걸 생각 못했다. 그래서 급하기 그 부분도 추가했다.

 

 그리고 모바일 버전에서는 SNS 공유 버튼 여러개가 아닌 mobile web api를 사용했는데 그게 배포한 페이지에는 보이지 않는 걸 확인했다. 그래서 다시 코드를 보니 주석처리...ㅋㅋㅋ 버그가 아니라 그냥 휴먼에러였다....ㅋㅋㅋ

 

 아무튼 SNS 공유 기능도 다시 하나씩 확인하면서 수정했다. 확실히 유저 피드백을 받고 나니 몰랐던 불편한 점들이 나오는 듯 하다.

 

 

 

 

 

 

 

이메일/비밀번호 재설정 기능 추가

 거의 모든 웹페이지에는 자기 이메일, 비밀번호를 재설정하는 게 있는데 우리 웹페이지에도 있으면 좋을 것 같아서 오늘 추가했다. 사실은 한 분이 회원 탈퇴도 있었으면 좋겠다, 라는 의견을 남겨주셔서 그것 먼저 구현하려고 하다가 기왕 하는 거 이메일, 비밀번호도 수정이 되었으면 좋겠다 싶어서 추가했다.

 

 firebase는 역시 편리하다. 

https://firebase.google.com/docs/auth/unity/manage-users?hl=ko 

Firebase에서 사용자 관리하기

 

 firebase 문서를 보면 아주 잘 나와있다. 이메일을 수정하는 건 updateEmail, 비밀번호를 수정하는 건 updatePassword 라는 걸 이용하면 되었다.

 

// 비밀번호 변경
  const changePasswordBtn = () => {
    const pwRegex = /^[A-Za-z0-9]{8,15}$/;

    // 유효성 검사
    if (!newPassword?.trim()) {
      Swal.fire({
        icon: "warning",
        title: "비밀번호를 입력해 주세요.",
        showConfirmButton: false,
        timer: 1500,
      });
      return;
    } else if (!pwRegex.test(newPassword)) {
      Swal.fire({
        icon: "warning",
        title: "비밀번호 형식에 맞지 않습니다",
        text: "비밀번호는 영문 대소문자, 숫자를 혼합하여 8~15자로 입력해주세요.",
        showConfirmButton: false,
        timer: 1500,
      });
      setNewPassword("");
      return;
    }
    updatePassword(user, newPassword)
      .then(() => {
        Swal.fire({
          position: "center",
          icon: "success",
          title: "비밀번호를 수정했습니다",
          showConfirmButton: false,
          timer: 1500,
        });
        setUserEdit(false);
        navigate(`/user/${userID}`);
      })
      .catch((error) => {
        console.log("error: ", error);
      });
  };

 

비밀번호 변경하는 코드만 가져왔는데, 이메일도 이와 마찬가지이다. 처음에는 유효성 검사를 넣지 않았다가, input 창이 공백임에도 비밀번호가 변경되는 불상사가 생겨서 급하게 추가했다.

 로그인, 회원가입에도 쓰이는 거라서 거기 파일에서 가져왔고 공백일 때도 생각해서 두 가지 유효성 검사를 추가했다. 생각해보니 에러 경고가 나온 뒤에는 input 창이 비워져야 할 것 같아서 그것도 추가.

 

 직접 비밀번호랑 이메일을 추가하다보니까 여러 경우의 수가 자꾸 생각나서 추가했다. 오히려 이대로 배포했다가 큰일나는 것보다는 낫지. 유효성 검사를 추가하고 나니 공백임에도 변경되는 일은 없어서 다행이었다.

 

 회원가입할 때 딱 닉네임, 이메일, 비밀번호를 적기 때문에 막 대단한 유저 정보를 바꿀수는 없지만 그래도 기능을 추가해서 제법 진짜 웹페이지(?) 같아진 느낌...? 나만 느낄수도 있지만 ㅋㅋㅋ

 

 프로플 수정이랑 하나로 합칠까 하다가 그냥 따로 뺐다. 아무래도 프로필 수정은 사진이랑 닉네임 둘다 업데이트 되도록 해놓아서 수정하려면 좀 복잡할 듯 해서...그래서 유저 페이지에서는 모달이 두 개가 되었다. 이것도 모달창 바깥 클릭하면 닫히는데, 회원가입이나 로그인 같은 중요한 건 아니라서 그냥 이렇게 했다. 변경하고 싶으면 다시 모달 띄우면 되니까 뭐... 여튼 이메일/비밀번호 수정도 완료.

 

 

 

 

 

 

 

회원 탈퇴 기능 추가

 이번에는 유저 피드백에도 나왔던 회원 탈퇴하기 기능. 이 역시도 firebase에서는 delete 메서드를 쓰면 간단하게 사용자 계정을 삭제할 수 있다.

 

 

 

이런 식으로 회원 탈퇴하기 버튼을 누르면 confirm 창이 먼저 뜨고, 확인을 누르면 회원 탈퇴가 되는 거고 아니요를 클릭하면 취소하는 형식이다.

 

 그런데 여기서 회원 탈퇴는, 이메일/비밀번호 재설정하는 모달창에 들어가야만 할 수 있다. 유저 이탈을 막기 위함인데 보통 회원 탈퇴는 어디서 하는지 헷갈려서 그냥 모달창에 넣어뒀다. 뭐...나중에 다시 융저 피드백을 받거나 이렇다면 바꿀 수 있겠지만 안 그래도 이용자가 없는 초반이기 때문에 회원 탈퇴 현상은 없는 편이 좋으니까...

 

 기능을 넣었고 기능이 제대로 구현되나 확인용으로 test로 가입해서 탈퇴해보니까 실제로 잘 되었다. 원래 생각치 못한 기능인데 유저 피드백에 하나 있어서 해봤는데, 생각보다 괜찮은 것 같기도..?ㅋㅋㅋ 코드 생각하는 게 오래 걸렸지 메소드는 delete만 쓰면 되서 괜찮았다.

 

const ondeleteUser = () => {
    Swal.fire({
      title: "정말 회원 탈퇴를 진행하시겠습니까?",
      icon: "question",
      showCancelButton: true,
      confirmButtonColor: "#B3261E",
      cancelButtonColor: "#50AA72",
      confirmButtonText: "네, 탈퇴할래요",
      cancelButtonText: "아니요, 취소할래요",
    })
      .then((result) => {
        if (result.isConfirmed) {
          deleteUser(user)
            .then(() => {
              Swal.fire({
                position: "center",
                icon: "success",
                title: "회원 탈퇴가 완료되었습니다",
                text: "NILILI를 사용해주셔서 감사했습니다.",
                showConfirmButton: false,
                timer: 1500,
              });
              setUserEdit(false);
              navigate("/");
            })
            .catch((error) => {
              console.log("error: ", error);
            });
        }
      })
      .catch((error) => {
        console.log("error: ", error);
      });
  };

 

위의 코드가 회원 탈퇴하는 함수인데 confirm 창을 처음 써봐서 (alert만 써봤다) 확인을 눌러야 하는 걸 생각하고, 실제로 유저가 있어야 회원탈퇴가 되니까 그것도 생각하고 등등...처음에는 firebase에서 delteUser 함수가 import가 안되어서 그것도 직접 import 하고 생각보다 삽질을 좀 했다.

 

 그래도 직접 테스트 해보니 제대로 탈퇴되어서 다행이다.

 

 

 

 

 

 

 

 

 

짧은 일기

 어느덧 최종 발표가 다음주다. 주말 제외하고는 이제 정말 4일밖에 남지 않았다. 이 와중에 수요일에 1차 발표 영상을 보내야 하니까 적어도 내일까지는 모든 기능을 완료해야 한다. 지금 다 최적화 작업 중이고, 유저 피드백 받기 전에 다 완료하지 못했던 반응형도 구현 중이다.

 나는 유저 피드백 받은 부분에서 로그인/회가입 피드백을 받고 하느라 오늘은 기능 추가를 좀 많이 했던 것 같다. 내일은 최적화 할 수 있는게 있나 살펴봐야지.

 

 생각보다 유저 피드백에서 많은 걸 배워간다. 정말 자세하게 써주신 분들도 많아서 다 읽어보고 최종 배포 전에 할 수 있으면 하는 중이다. 물론 로그인 부분이라서 빨리 수정할 수 있어서 다행이다. 내일은 최종 마무리도 하고, 발표 준비도 해야 하고...내일도 할게 많다. 그래도 잘 정리해서 성공적으로 프로젝트를 끝냈으면 좋겠다. (늘 하는 말이지만?ㅋㅋㅋ)