강의 숨기기 기능 사용 시 레이아웃이 깨지는 문제

[nbsp1221]

사진과 같이 강의 숨기기 기능을 사용할 경우 가끔씩 레이아웃이 깨지는 문제가 발생합니다. 새로고침을 하거나 새로운 강의로 이동하면 다시 복구되기는 합니다.

원인

appModule.setRowspan 함수는 표 레이아웃을 설정해 주는 함수입니다. 이 코드가 강의 숨기기 기능과 맞지 않아서 발생하는 문제입니다. 그래서 #21 부분과 같이 유저 스크립트에서 저 함수를 수정해서 해결하기는 했지만, 새로고침 시에 유저 스크립트가 코드를 덮어 씌우기 전에 먼저 setRowspan 함수가 호출돼서 발생하는 문제로 보입니다.

해결 방안

setRowspan 함수가 호출되기 전에 유저 스크립트에서 먼저 덮어씌우면 해결될 것으로 보입니다. 하지만 그 부분을 어떻게 할 수 있을지 잘 모르겠네요. 이 버그를 해결할 수 있거나 다른 좋은 아이디어가 있다면 댓글을 남겨주시거나 풀 리퀘스트를 보내주시면 감사하겠습니다!

[0420syj]

setRowspan 함수 문제도 맞겠지만, 근본적으로 '주차', '학습단원'이 비어있는 것이 문제가 아닐까 싶습니다. 제가 수강하는 과목에선 저런 현상이 안 보여서 확인이 어렵네요 😢

위의 이미지는 제가 수강중인 "휴먼컴퓨터인터페이스" 과목의 한 강의의 객체 데이터 값을 console창을 통해 확인해본 결과입니다. appModule._data.list 에서 확인 가능한데, 저 현상이 발생하는 부분의 값이 어떤지 확인 부탁드리겠습니다.
저 초록색 박스로 표시한 멤버가 아예 존재하지 않는다면, 이를 강제로 ""으로 할당하여, 해결할 수 있을 것으로 사료됩니다.

PS. setRowspan 함수가 호출되기 전에 유저 스크립트에서 먼저 덮어씌울 수 있다면 좋겠지만, 저도 이 부분을 잘 모르겠네요.

[nbsp1221]

앗, 그렇군요. 직접 확인해보니까 weeklyseq 항목이 undefined 되어있는 부분이 정말 있네요. 아무래도 원인이 이게 맞는 것 같긴 한데 setRowspan 문제와 마찬가지로 강제로 ''로 할당하기 전에 setRowspan이 실행되어 버리니까 같은 문제가 발생하지 않을까요?

[0420syj]

저런 버그가 강의 숨기기 ON 상태에서만 발생한다면, 강의 숨기기 버튼 클릭 이벤트 핸들러 뒷부분에 값을 할당함으로써 해결할 수 있지 않을까 싶어요.

// 강의 숨기기 버튼에 이벤트 설정
$('.btn-clean').click(() => {
    if (appModule.origin == undefined) {
        appModule.origin = appModule.cntntList;
        let copy = [];
        appModule.cntntList.forEach(item => {
            if (item.prog != '100') copy.push(item)
        })
        appModule.cntntList = copy;
    }
    else {
        appModule.cntntList = appModule.origin;
        appModule.origin = undefined;
    }
    
    /* 
    
    undefined 된 멤버에 대해 "" 할당
    
    */

    $('.btn-clean').toggleClass('btn-green');
    $('.btn-clean').toggleClass('btn-gray');
});

현재 코드에서 저 부분에서 작성해보면 어떨까요?

[nbsp1221]

테스트를 해보긴 했는데 역시 안되네요. 강의 숨기기 ON 상태일 때만 된다기보다는 강의 숨기기를 사용하면 깨지는 것으로 보입니다. 다시 OFF로 돌려놔도 깨진 레이아웃이 그대로 유지가 되어있어요.

[0420syj]

어렵네요... 😢 혹시 저 버그가 나는 부분의 강의 숨기기 활성화 전,후 객체가 어떤 값들인지 알려주실 수 있을까요? 시간나는대로 조사해보겠습니다.

[nbsp1221]

객체 자체의 값 변화는 없는 것 같고요. 일단 제가 분석한 결과로는 setRowspan 방식이 강의 목록을 표로 생성한 뒤에, 나중에 rowspan에 맞게 태그를 아예 제거해서 만드는 것 같더라고요. 태그가 제거되면서 강의 숨기기 기능과 맞지 않아서 레이아웃이 깨지는 문제가 발생했던 거고, 이걸 제거하는 대신 hide로 숨겨서 다시 살릴 수 있도록 수정했습니다.

[nbsp1221]

아예 표를 다시 처음부터 그려서 만들던지, 아니면 아예 실행 시점을 바꾸는 방법밖엔 없을 것 같네요.. 전자는 많이 비효율적일 것 같고, 후자는 지금 방식이 window.onload에 넣어서 실행하는데, 이걸 좀 바꾸면 되려나요?

너무 빠르면 appModule이 생성되기 전이라 오류가 발생하고, 너무 늦으면 지금처럼 이런 오류가 생기고.. 어렵네요 😂

[0420syj]

기능만 생각하고 후다닥 만들었더니 이런 문제가... 혹 해결하게 되면 comment, PR 남기겠습니다 😂