[ISSUE][Nexts.js] 반응형 페이지 작업중 특정사이즈 이하로 반응형이 작동하지 않을 때

Reason

한창 웹 페이지 작업중에 모바일 버전으로 창을 줄여서보니까 어느새 해당 페이지에서 모바일 버전으로 보면 가로로 스크롤이 생기고 반응형으로 딱 맞게 줄어들지 않음.. 가로 700px쯤 부터 화면이 더 안줄어들고 가로스크롤이 발생한다.

 

 

 

---

 

Try

 

어디서 문제인지 찾으려고 코드를 들여다 봤으나 찾기가 너무 어려운 것 . . 

 

그래서 이렇게 섹션별로 주석처리하여 찾아넀다.

아래 컴포넌트를 주석 처리했을 때 내가 원하는 반응형 페이지로 구성된다. 

 

 

 

이 정도 가로길이일때 헤더부터 모든게 같이 이쁘게 정렬 되어야한다. 

 

캐러셀 안 아이템으로 작성했던 'SongCard' 컴포넌트가 문제인듯하다.

여기서도 주석 처리해가면서 원인 찾아내기..!

이것 저것 건드려본 결과

위에 주석처리한 곳에서 문제가 생김을 감지했다.

flex 속성을 넣으면서  하위에 song.rank, song.name 컴포넌트들이 들어갈때 문제가 생긴다.

 

---

Solution

해결 방법은

absolute left-16

위의 속성을 추가로 넣어서 상위 relative 요소에 영향을 주지 않도록 한 다음 위치를 고정시켰다.

 <div className="flex flex-row items-center gap-4 absolute left-16">
        <div>
          {song.rank === song.prevRank ? (
            <FaCircle size={10} />
          ) : song.rank > song.prevRank ? (
            <AiOutlineCaretUp size={10} color="#3CA63F" />
          ) : (
            <AiOutlineCaretDown size={10} color="#FF0000" />
          )}
        </div>
        <div>{song.rank + 1}</div>
        <div>{song.name}</div>
      </div>

 

 

그 결과 원하는대로 반응형이 잘 작동한다.

 

근데 사실 이게 좋은 방법은 아닌 것 같다는 느낌이..

원래 이런 느낌이 들면 대개 좋지 않은 방법이 맞았던 것 같다.

 

그래도 일단은 넘어가고 다른 방안이 생각나거나 시간이 될 때(...) 다시 리팩토링 해보는 걸로!

지금은 이거 붙잡다간 못 끝낼것 같다😇

css 어렵다. flutter가 편하긴 편한듯.. 언젠가 이 모든것들이 익숙해지는 날이 오겠지.