14. 마이페이지-2 (댓글 관리와 개인정보 수정)

1. 댓글관리

 

(Comment Entity)

 

 

https://dwc04112.tistory.com/172

11. 책 상세보기

상세보기에서 제공하는 정렬과, 책 상세보기에서와 같은 동작을 하는 그래프이다.

댓글목록의 우측 상단 X버튼을 통해 해당 댓글을 삭제 가능하다.

 

(MyComment 의 Vue-Script)

   //댓글 삭제
    deleteComment(){
      let cid = this.setCid
      this.$axios.delete("comment/" + cid)
          .then(response=>{
            console.log(response.data.message)
            this.getBookComment();
            this.setDialog(0);
            this.snackbarDelay();
          }).catch(error =>{
        console.log(error.response);
      })
    },

삭제를 성공적으로 수행하면 삭제 확인 메시지를 닫고 다시 댓글목록을 불러온다.

 

(아래는 댓글관련 Springboot 코드)

GitHub - dwc04112/BookStoreApi

 

 

 

2. 개인정보 수정

 

2-1. 프로필 수정

프로필 수정은? 닉네임과 프로필 사진을 수정 또는 등록이 가능하다.

꼭 닉네임이랑 프로필을 같이 수정해야 하는 것이 아니라

닉네임이나 프로필 사진만 따로 수정이 가능하다.

 

닉네임

단 닉네임을 수정하려면 닉네임 중복확인을 꼭 실행 후 통과해야 변경이 가능하다 (nickCheck = true)

! 닉네임 중복확인을 거치지 않거나 

! 닉네임 중복확인 후 다시 입력이 감지되면

(watch를 통해 닉네임 model값이 변경됐는지 아닌지 확인한다.)

다시 nickCheck가 false로 변하니 주의!

  watch: {
    nickName(){
      this.nickNameCheck = false;
    }
  },

 

프로필사진

프로필 사진은 미리보기 기능을 제공한다.

(EditProfile Vue의 script-methods부분)

  upload(e) {
      let imageFile = e.target.files; // 업로드한 파일의 데이터가 여기있음.
      this.imgFile = imageFile[0] // 파일의 필요한 데이터만을 url 변수에 넣음
      this.imageUrl = URL.createObjectURL(imageFile[0]); // 미리보기
      // 미리 작성해둔 imageUrl : ' ' 변수에 가지고있는 경로데이터를 넣는다
    },

프로필 사진 업로드가 되면? 필요한 데이터를 가공 후 Data에서 선언한 imgFile과 imageUrl에 저장한다.

 

 

 

 

2-2. 개인정보 수정

처음 화면에는 Store에서 가져온 email과 phone번호가 입력되어있다.

변경을 원하는 텍스트 필드에서 정보를 입력 후 

(이메일과 전화번호) 정규식을 통과해야 변경이 가능하다.

infoCheck(){
      let numCheck= false;
      let emailCheck= false;

      var regEmail = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/;
      var regPhone = /^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$/;

      if(this.email!==''){
        emailCheck = regEmail.test(this.email);
      }else{
        emailCheck = false;
      }

      if(this.num!==''){
        numCheck = regPhone.test(this.num);
      }else{
        numCheck = false;
      }


      if(numCheck && emailCheck){
        if( (this.email === this.$store.state.member.loginData.email) &&(this.num === this.$store.state.member.userData.phoneNum) ){
          return null;
        }else{
          this.editInfo(this.email,this.num)
        }
      }else{
        this.snackbarMsg = "입력한 정보를 확인해주세요."
        this.snackbar = true;
      }
    },

(infoEditComponent Vue의 Script부분)

 

만약 정규식을 통과했지만

기존 Store에 있는 정보와 새로 입력한 정보들이 일치하면 변경되지 않고

(이메일과 전화번호 하나라도 같으면 변경)

새로운 정보면 변경을 수행한다.

 

 

   replaceNum(num){
      this.num= num.replace(/[^0-9]/g, '')
          .replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
    },

(infoEditComponent Vue의 Script부분)

전화번호는 @input을 통해 정규식과 맞는 입력이 들어오면 010-xxxx-xxxx형식으로 변경된다.

 

 

editInfo(email, num){
      let data = {}
      data.email = email;
      data.phoneNum = num;
      this.$axios.post("edit/info",JSON.stringify(data),{
        headers: {
          "Content-Type": `application/json`,
        },
      }).then(response => {
        console.log(response.data)
        this.dialogMsg = "개인정보를 성공적으로 변경하였습니다. 로그아웃 처리 됩니다."
        this.$store.dispatch('logout').then(()=> this.dialog =true)
      }).catch(error => {
        console.log(error.response);
      })
    },

(infoEditComponent Vue의 Script부분)

정보가 성공적으로 변경되면 로그아웃 처리되고 dialog가 켜진다.

dialog에서 확인을 누르면 -> Home화면으로 이동된다.

 

 

 

2-3. 배송지 등록

배송지 등록/수정 에서 등록한 배송지들은 결제시 선택하여 사용이 가능하다

	
    @Id
    @Column(name = "addrId")
    private long addrId;

    @Column(unique = true)
    private long mid;
    private String addrName;
    private String postcode;
    private String addr;
    private String detailAddr;
    private String phoneNum;
    private String isDel;

(나의 배송지 리스트 Entity)

 

배송지 수정 페이지에서 추가하기를 누르면 위 사진과 같은 Dialog가 나온다.

dialog안의 내용을 정규식에 맞게 입력하면 저장하기 버튼이 활성화 된다.

우편번호는 텍스트필드를 클릭하거나 오른쪽 돋보기 버튼을 클릭하면 -> 카카오 우편번호 찾기API를 사용해

우편번호를 찾을 수 있다.

 

아래는 카카오 우편번호 API Script 코드이다

 //카카오 우편번호 api
    getPostcode(){
      new window.daum.Postcode({
        oncomplete: (data) => {
          if (this.extra_addr !== "") {
            this.extra_addr = "";
          }
          if (data.userSelectedType === "R") {
            // 사용자가 도로명 주소를 선택했을 경우
            this.addr = data.roadAddress;
          } else {
            // 사용자가 지번 주소를 선택했을 경우(J)
            this.addr = data.jibunAddress;
          }

          // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
          if (data.userSelectedType === "R") {
            // 법정동명이 있을 경우 추가한다. (법정리는 제외)
            // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
            if (data.bname !== "" && /[동|로|가]$/g.test(data.bname)) {
              this.extra_addr += data.bname;
            }
            // 건물명이 있고, 공동주택일 경우 추가한다.
            if (data.buildingName !== "" && data.apartment === "Y") {
              this.extra_addr +=
                  this.extra_addr !== ""
                      ? `, ${data.buildingName}`
                      : data.buildingName;
            }
            // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
            if (this.extra_addr !== "") {
              this.extra_addr = `(${this.extra_addr})`;
            }
          } else {
            this.extra_addr = "";
          }
          // 우편번호를 입력한다.
          this.postcode = data.zonecode;
        },
      }).open();
    },

 

.

2-4. 비밀번호 변경

비밀번호는 이전비밀번호, 새로운 비밀번호, 비밀번호 확인 3가지 필드를 입력 및 통과해야 수정이 가능하다.

watch를 통해 비밀번호와 비밀번호 확인이 일치하는지 확인하고 

  watch: {
    newPassword(val) {
      this.matchPass = val === this.confirmNewPassword;
    },
    confirmNewPassword(val) {
      this.matchPass = val === this.newPassword;
    },
  },

* 새로운 비밀번호 입력과, 비밀번호 확인 두가지 필드의 입력을 같이 확인해야한다

왜냐하면 비밀번호 확인을 수행 후 -> 다시 새로운 비밀번호를 변경하면? 일치한다고 뜨기 때문에.

텍스트필드 우측에 아이콘으로 바로 확인가능한 구조이다.

 

그리고 비밀번호 수정을 진행하면 아래 정규식을 진행 후 비밀번호 변경을 수행한다.

    //버튼 누르면 비밀번호 체크
    checkRules(){
      if(!(this.numPass&&this.smallPass&&this.spacePass&&this.minPass)){
        alert("사용 불가능한 비밀번호입니다.")
        return null;
      }
      if(!this.matchPass){
        alert("비밀번호가 일치하지 않습니다")
        return null;
      }
      this.updatePassword();
    },