[FIX] 스크롤 시 서랍장 헤더 잘림 이슈

[Hanna922]

ISSUE ✅ : BUG

📖 Summary

화면이 작아질 경우 헤더 잘림

2024-05-27.9.06.16.2.mov

Photo

ETC

cc. @2wndrhs

[2wndrhs]

뭐야 이거

[Hanna922]

@2wndrhs 담당 하시는 거죵?

[2wndrhs]

[2wndrhs]

오잉 제 환경에서는 버그 재현이 안되네요🤔

버그가 일어나는 화면 크기를 알려주실 수 있을까요

[nijuy]

개발자도구 사이즈를 늘려서 화면을 작게 만들거나 or 확대하다보면 재현 가능해요!
가로 스크롤 생기는 지점에서부터 생기는 거 같습니다..?!
코멘트를 회의록 쓰기 전에 봤어야 하는데 🥺

[2wndrhs]

감사합니다 말씀하신 대로 가로 스크롤이 생기는 지점부터 문제가 발생하네요!

디버깅을 해보았는데 화면의 크기가 카드 3개를 표시할만큼 충분하지 않을 때 Header 컴포넌트는 부모 컴포넌트인 DrawerLayout 컴포넌트의 크기(width: 100%)에 맞게 줄어들지만 Card 컴포넌트의 크기는 25.5rem(408px)로 고정되어 있어 부모 컴포넌트인 DrawerLayout을 벗어나게 되어 헤더가 잘린 것처럼 보이는 문제였습니다.

• Ranking.style.ts

export const StyledCardContainer = styled.section`
  grid-template-columns: repeat(3, 25.5rem); // width를 408px로 고정시킴(원인 1)
  ...
`;

• Card.style.ts

export const StyledContainer = styled.div<StyledContainerProps>`
  width: ${(props) => `${props.$width}rem`}; // width를 408px로 고정시킴(원인 2)
  ...
`;

export const StyledThumbnail = styled.img<StyledThumbnailProps>`
  width: ${(props) => `${props.$width}rem`}; // width를 408px로 고정시킴(원인 3)
  ...
`;

be2013e 커밋처럼 코드를 수정하여 문제를 해결할 수 있지만 Card 컴포넌트의 레이아웃이 변경되어 Card 컴포넌트를 사용하는 다른 컴포넌트들에게까지 영향을 미치기 때문에 Card 컴포넌트를 근본적으로 변경하지 않는한 문제를 해결하기가 어려울 것 같습니다..

배포가 얼마 안남은 상황에서 짧은 시간내에 해결하기는 어려울 것 같아 배포 이후에 해결하는 것이 어떨까 싶습니다🥲

추후 리팩토링 과정에서 Card 컴포넌트의 추상화 단계를 높여 Card 컴포넌트에서 레이아웃을 결정하지 않고 외부에서 컴포넌트를 주입받아 카드의 레이아웃을 결정하는 방식으로 구현한다면 다양한 카드 레이아웃에 대응할 수 있을 것 같네요🤔