Hanna922 commented 3 months ago

ISSUE ✅ : BUG

📖 Summary

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

https://github.com/yourssu/Soomsil-Web/assets/84809236/41ff0997-d10d-4072-9506-09b739312824

Photo

ETC

cc. @2wndrhs

2wndrhs commented 3 months ago

뭐야 이거

Hanna922 commented 3 months ago

@2wndrhs 담당 하시는 거죵?

2wndrhs commented 3 months ago

2wndrhs commented 2 months ago

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

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

nijuy commented 2 months ago

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

header

2wndrhs commented 2 months ago

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

디버깅을 해보았는데 화면의 크기가 카드 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 width: ${(props) =>${props.$width}rem}; // width를 408px로 고정시킴(원인 3) ... ;



<img width="1512" alt="image" src="https://github.com/yourssu/Soomsil-Web/assets/76615094/66194598-e4ba-47d3-82e4-cc4de461479a">

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

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

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

yourssu / Soomsil-Web

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

ISSUE ✅ : BUG

📖 Summary

Photo

ETC