디테일 링크를 클릭했을 때 팝업이 위에서 아래 순서대로 뜨는 문제가 있었습니다. 예로 Total-win Detail 링크를 클릭 후 Bonus Detail 링크를 클릭하면 Total-win 디테일 팝업이 앞에 나와 Bonus Detail 팝업이 보이지 않는 문제가 있었습니다.
생각한 해결 방안
- 한개의 Detail 팝업을 클릭하면 그 것을 제외한 모든 팝업을 제거 시키자
- 쌓이는 것을 z-index 값을 props를 주어 위로 겹치게 쌓이게 하자
이 중에 1번을 선택했습니다. 사실 1번 로직도 문제가 있습니다. 예로 Bonus 팝업이 켜져 있고 그 위에 Total Win 팝업을 쌓게 된다면 Bonus 팝업을 제외한 다른 팝업들은 켜지지도 않았는데 모두 삭제하는 비효율적인 현상이 발생하게 됩니다.
자세한 코드는 보여드릴 수는 없지만 제가 생각한 로직은
showModal(props) -> 모달을 보여주는 로직의 함수입니다.
self.$store.commit("NOMODAL", key); -> 모달을 보여주지 않게 하는 상태 값 변경
self.$store.commit("MODAL", key) -> 모달을 보여주게 하는 상태 값 변경
keyArr = ['Bonus-modal', 'TotalDeposit-modal', 등등] -> props로 받아오는 이름의 배열입니다.
showModal(key){
const keyArr = ["bonus-log-modal", "game-log-modal", "cash-log-modal", "tip-log-modal", "tip-modal"]
for (let i = 0; i < keyArr.length; i++) {
if(keyArr[i] == key){
keyArr.splice(i, 1);
i--
}
}
for(let j=0; j<keyArr.length; j++){
self.$store.commit("NOMODAL", keyArr[j]);
}
self.$store.commit("MODAL", key)
}
showModal 속에서 keyArr 배열을 항상 초기화 시켜주고 첫번째 for문을 돌려 자기 자신을 제외한 모든 값들을 keyArr에 저장합니다.
2번째 for문 속에서 keyArr을 돌려 모든 값들의 창을 제거한 이후
자신이 클릭한 모달을 엽니다.
부족한 실력으로 로직을 짰지만 PR 후에 코드리뷰를 받는데 Danny님께서 훨씬 효율적인 로직이 있다는 것을 설명해주셔서 수정하였습니다 :)
설명해주신 방법
- 배열에서 해당 팝업을 빼주지 않고 마지막 팝업을(let lastName = null) 변수로 지정해줘서 팝업을 켜면 그 변수에(lastName) 해당 팝업의 값을 넣어주고 다음 팝업을 열었을 때 lastName의 값이 존재한다면 그 값을 전달해줘서 Modal을 제거해라.
let lastName = null;
showModal(key) {
if(lastName){
self.$store.commit("NOMODAL", lastName);
}
lastName = key
self.$store.commit("MODAL", key)
}
코드가 훨씬 깔끔해졌다...
나는 언제 이렇게 유연하게 사고할 수 있을까
그래도 신입인데 어떻게든 되긴 했잖아...?
