웹 개발 Spring Day12 프로필 관리 / 프로필 수정, data-func

김지원·2022년 8월 23일

WebDevelop2

목록 보기

33/34

응답결과를 JSON으로 넘겨주자.
-> JSON 의존성 추가

-> ProfileController postAdd

responseJson.put(IResult.ATTRIBUTE_NAME, result.name().toLowerCase());
// {"result":"failure"}
result를 가지고와서 JSONObject에 추가를 한다.
IResult.ATTRIBUTTE_NAME = result가 되고 result.name().toLowerCase() = failure이 된다.
xhr.responseText => {"result":"failure"}
문자열을 JSON 타입으로 parsing 해야된다.
responseJson.toString() 해준다.

지금까지는 서버로 데이터를 넘기는 것이 없다.
그 데이터를 빌드시커야한다.
const data = new FormData(); : 데이터를 넘겨주자.

-> choose.js

-> profile table

checkbox 를 클릭하면 kids_flag 가 1이되며 체크를 하지않으면 0으로 들어간다.

프로필 관리

data-func

: 어떠한 요소를 클릭해서 어떠한 함수를 실행시키고자 할 때 사용한다.

element = x = data-func 이 있는 요소 그 자체
지금 설정한 data-func은 프로필 관리와 완료 버튼 이렇게 두 개를 다 잡아서 forEach 를 돌린다. const dataFuncValue = x.dataset.func; 은 handleEditStart 혹은 handleEditComplete 라는 것을 문자열로 받아 오게 된다.
if (typeof('handleEditStart') === 'string' && typeof(functions['handleEditStart']) === 'function')
   string 타입인지 확인                            함수인지 확인
이러한 형태로 변하게 된다.
그렇기 때문에 현재 프로필 관리를 누르게 되면 alert("편집시작"); 이 뜨게 된다.

<script>
const functions = {
    handleEditStart: (element) => {
        profileDialog.classList.add('edit-mode');
    },
    handleEditComplete: (element) => {
        profileDialog.classList.remove('edit-mode');
    }
};
window.document.body.querySelectorAll('[data-func]').forEach(x => {
   x.addEventListener('click', () => {
       const dataFuncValue = x.dataset.func; // handleEditStart
       if (typeof(dataFuncValue) === 'string' && typeof(functions[dataFuncValue]) === 'function') {
           functions[dataFuncValue](x);
       }
   })
});
</script>

어떠한 a태그를 누르냐에 따라 edit-mode 클래스를 add 하고 remove 시킴으로써 한 페이지에서 두 가지 화면을 구현할 수 있게 되었다.

여기서 문제는 프로필 관리를 누르기 전에 각각의 프로필을 누르게 되면 해당 프로필이 로그인한 메인페이지로 연결되지만 프로필 관리를 누른 후에는 메인페이지로 연결되는 것이 아닌 프로필 관리 페이지로 연결이 되어야 하기 때문에 각 a링크에 대해서도 다르게 처리를 해주어야한다.

profile a태그에 data-func="handleEditEachStart" 과 data-name / data-kids 를 추가해준다.

element가 아닌 object받아서 (x) 가 아닌 ({}) 오브젝트로 변함으로 코드를 수정해준다.

<script>
handleEditEachStart: (params) => {
    const name = params.element.dataset.name;
    const kids = params.element.dataset.kids;
    alert(`${name} = ${kids}`);
}
</script>

관리모드에서는 프로필을 클릭했을 메인이 아닌 프로필 관리 페이지로 이동해야한다.
어떠한 요소에 클릭이벤트를 붙였을 때 발생해야하는 일을 발생하지 않도록 하기 위해서 event.preventDefault(); 도 해주자. 그러면 전송이 되지 않고 그대로 유지가 될 것이다.

이렇게 하면 프로필 모드일때는 alert가 안뜨고 로그인된 페이지로 이동이 되고 관리 모드일때는 alert가 뜨고 이동이 되지 않는다.

-> 프로필 변경 form 추가

addForm을 긁어와서 수정해주자. 대문자는 대문자로 소문자는 소문자로 해주는 Preserve Case를 사용했다. css도 마찬가지로 진행해준다.

th:data-profileIndex="${profile.getProfileIndex()}"

프로필 관리에서 각각의 프로필을 누르게 되면 프로필 변경 페이지로 넘어가도록 설정.

프로필 수정페이지에서 취소 버튼을 누르면 돌아가도록 하자. handleEditEachCancel

프로필 수정을 하려면 원래의 값이 들어와있어야한다. 값을 받아오도록 하자.

프로필 수정 페이지로 가게 되면 실제로 설정된 값이 들어와있으면 된다.

프로필 수정 : 프로필 사진 / 이름 / 어린이 여부 총 3가지의 수정이 필요하다.

→ html 추가 / css

선택되어있는 프로필 사진 혹은 선택할 프로필 사진 border 유지하게 하자.

body > .profile-edit-form > .profile-container > .radio-container > .radio:checked ~ .image {
    border: 0.2rem solid rgb(255, 255, 255);
}
프로필 수정에서 프로필 image 클릭하면 border 흰색이 고정이 되어있는다.

type이 radio 이기 떄문에 가능한 것이다.
선택되어있는 프로필이미지에 checked가 되어있다. 6번째 인걸 찾아서 체크해놓는다.

새로운 정보를 넣기 위해서는 email / name 이 필요하다. name은 primaryKey 로 설정이 되어있다.
만일 관리자라는 이름의 계정에 들어가서 관리자가 아닌 다름 이름으로 수정을 하고 완료를 누르게 되면 "관리자" 라는 이름을 찾아서 수정하려고 적은 "이름" 으로 수정을 해야하는데 관리자라는 데이터는 아무데도 남아있지 않은 상황이다.

로그인한 사용자와 oldName을 기준으로 바꾼다.
oldName값을 아무데도 지정을 해놓지 않았음으로 지정해주자.

프로필을 수정하고 완료를 누르게 되면 경로가 이렇게 바뀐다.

이제 Ajax로 처리를 해주면 될 것이다.

-> 값을 제대로 받는지 확인하기 위해 ProfileController postModify

여기서 문제가 발생했다.

name  kids_flag 
----- ---------
관리자   false
 ↓       ↓ 
관리자   true

이름은 그대로 사용하고 kids_flag 을 false에서 true로 바꾸고 싶을경우를 가정해보자.
새로운 이름을 Select로 가져와서 비교를 하게 된다.
안바꾸어도 name이 겹치는 이유로 실패했다는 결과를 얻을 것이다.
그래서 name이 기본키로 설정이 되었으면 안되었다.

-> ModifyResult 생성 FAILURE_DUPLICATE_NAME

-> ProfileService modifyProfile

만약 oldName이 newProfile.getName() 과 같지 않고 새로운 프로필에서 가져온 이메일과 이름이 0을 초과하게 되면 이름이 겹쳐서 실패했다는 Result 를 날려준다. 즉, 원래 이름과 새로운 이름이 다른 상황에서 그 이름으로 유저의 정보를 가져왔더니 0을 초과했다는 것이다.