물어보기XpressEngine

최근에 제작하여 배포 중인 ncenterlite 전용 스킨(https://www.xetown.com/rxe_point/724361)에서 다음과 같은 버그가 발생했습니다.

 

1.png

저 위에 있는 모두삭제를 누르면?

 

2.png

두둥-

알림센터만 사라져야 하는데 페이지까지 날라가버립니다.

 

이게 PC는 정상작동하는데 모바일만 이렇더라구요. 그것도 일부 모바일 스킨에서만 발생합니다.

그래서 개발자 도구로 확인해보니

 

3.png

레이아웃에 ID값이 page인 요소를 display: none 해버리더라고요.

 

 

그래서 원본 ncenterlite의 모바일 스킨을 적용해보니 멀쩡합니다. 코드를 확인해보니 js는 토시하나 빠짐없이 똑같고, 단지 컨테이너 하나만 추가되어 있더라고요.

 

4.png

원래는 이 아이가 display: none 되어야 하는데 무슨 이유에서인지 제 스킨에서는 id값이 page인 요소가 display: none 되어버립니다.

 

그래서 일단은 저 코드를 제 스킨에 넣어봤는데...

저 컨테이너가 사라졌습니다.

5.png

코드상에는 멀쩡하게! 저렇게! 뙇! 있는데! 왜 없는 것이냐ㅠㅠ

 

도대체 저 망할 요물이 왜 있어서 이렇게 된건지 알아보기 위해 저 요소의 용도를 찾아보니

 

 

6.png

 

PC 화면에서 알림센터 높이만큼 레이아웃을 밑으로 밀어내고 알림센터를 눌렀을 때 나오는 저 드롭다운 리스트만 화면 위에 오버레이되도록 하기 위해 만들어 놓은 것이었습니다. 그런데 모바일에서는 저 리스트가 오버레이되지 않고 리스트의 높이만큼 레이아웃을 밑으로 밀어내기 때문에 저 요소가 필요없어 display: none을 해놨더라고요. (정말 거지같은 디자인이네...)

 

id값으로 page를 쓰는 레이아웃이 그렇게 많지도 않고, 애초에 저렇게 전역전역스러운 네이밍을 쓴 레이아웃 제작자가 문제라고 단정지어 버릴 수도 있겠지만, 조금이라도 더 많은 분들이 문제없이 사용할 수 있도록 최대한 원본 코드를 기반으로 제작했는데... 이렇게 되어버리니 두 손 두 발 다 놓고 싶어지네요ㅠㅠ

 

혹시 방법 아시는 분들 도와주세요ㅠㅠ

  • profile
    기진곰 2017.09.16 19:44:53

    이미 말씀하신 것처럼 id를 다른 것으로 바꾸면 될 것 같네요. HTML에서 바꾸고 JS에서 바꾸면 되는 것 아닌가요?

     

    웹 페이지에서 id는 절대 중복되어서는 안된다는 것이 표준이기 때문에, 중복 상태에서는 id와 관련된 기능들이 모두 엉뚱하게 동작할 수 있습니다. 이게 랜덤일 수도 있기 때문에 다른 스킨은 괜찮은데 왜 내 것만 이렇냐고 따질 수도 없습니다. 일단 중복부터 제거해 놓고 나서 따져봐야 합니다.

  • profile
    Booth 2017.09.16 20:02:42
    모두삭제 눌렀을 때 display: none 시키는 코 드는 스킨이 아니라 모듈 내에서 동작하는 것같아요. 그래서 스킨에서는 display: none시킬 id값을 변경할 수 없네요ㅠㅠ
    근데 그것보다 더 혼란스러운건 기본스킨에서는 정상작동한다는 거에요. 일단은 문제가 발생하는 레이아웃을 사용하고 계신 분들에게는 일단 id값을 바꾸라고 말씀드리긴 했지만... 어딘가 제가 놓친 부분이 있어서 이런건 아닐런지 자꾸 고민하게 만드네요ㅠ
  • profile
    기진곰 2017.09.16 20:17:56

    그런데 이제 보니 알림센터 기본 스킨에는 page라는 id를 사용하는 곳이 없는데요?
    https://github.com/xe-public/xe-module-ncenterlite/search?q=page

  • profile
    Booth 2017.09.16 20:57:40
    으잉?... 뭐죠?! 레이아웃이 원흉이었던걸까요. 뭔가 찜찜하네요ㅋㅋㅠㅠ
  • ?
    yoon 2017.09.17 19:00:32
    booth님

    "일단 id값을 바꾸라고 말씀드리긴 했지만... "
    -> sweet 모바일 레이아웃 사용중입니다. layout.html에서 <div id="page">를 변경하는 건 알겠는데요 js파일에서 어떤 부분을 변경해야 할지 혹시 도움 좀 받을 수 있을까요?
  • profile
    Booth 2017.09.17 19:51:32
    sweet 모바일이 어떤 구조인자 잘 모르겠네요... js 파일 내에서 #page 이렇게 된 부분을 찾아보세요.
  • profile
    다이오니 2017.09.17 09:22:32
    레이아웃과의 문제 같습니다.
    저희 사이트 모바일에서 모두 삭제를 눌러도 잘 삭제 됩니다.

서버에 요청 중입니다. 잠시만 기다려 주십시오...