[fix] 스크롤 수정#120
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
이번 풀리퀘스트는 여러 화면 컴포넌트(지역 설정, 프로필 수정, 구매/판매 내역, 리뷰, 알림 설정 등)의 레이아웃과 스크롤 동작을 개선하기 위해 min-h-0, shrink-0, overflow-hidden, no-scrollbar 등의 Tailwind CSS 클래스를 추가 및 수정합니다. 리뷰어는 부모 레이아웃 내부에서 렌더링될 때 콘텐츠가 잘리는 현상을 방지하기 위해 h-dvh 대신 h-full 및 max-h-full을 사용할 것을 제안했습니다. 또한, 내부 스크롤 영역이 정상적으로 동작하고 루트 컨테이너가 의도치 않게 스크롤되는 것을 막기 위해 구매 및 판매 내역 화면의 루트 컨테이너에 overflow-hidden 클래스를 추가하도록 권장하고 있습니다.
| animate={{ opacity: 1, x: 0 }} | ||
| exit={{ opacity: 0, x: -20 }} | ||
| className="flex-1 flex flex-col bg-white" | ||
| className="flex-1 flex flex-col h-dvh max-h-dvh min-h-0 overflow-hidden bg-white" |
There was a problem hiding this comment.
부모 레이아웃(예: 헤더나 네비게이션 바가 포함된 레이아웃) 내부에서 이 컴포넌트가 렌더링될 때, h-dvh를 사용하면 뷰포트 전체 높이를 차지하게 되어 화면 아래로 콘텐츠가 넘치거나 잘리는 현상이 발생할 수 있습니다. h-full과 max-h-full을 사용하면 부모 컨테이너가 제공하는 영역 내에서 안전하게 채워지도록 레이아웃을 구성할 수 있습니다.
| className="flex-1 flex flex-col h-dvh max-h-dvh min-h-0 overflow-hidden bg-white" | |
| className="flex-1 flex flex-col h-full max-h-full min-h-0 overflow-hidden bg-white" |
| animate={{ opacity: 1, x: 0 }} | ||
| exit={{ opacity: 0, x: -20 }} | ||
| className="flex-1 flex flex-col" | ||
| className="flex-1 flex flex-col h-dvh max-h-dvh min-h-0 overflow-hidden bg-white" |
There was a problem hiding this comment.
부모 레이아웃(예: 하단 네비게이션 바나 헤더가 포함된 레이아웃) 내부에서 이 컴포넌트가 렌더링될 때, h-dvh를 사용하면 뷰포트 전체 높이를 차지하게 되어 화면 아래로 콘텐츠가 넘치거나 잘리는 현상이 발생할 수 있습니다. h-full과 max-h-full을 사용하면 부모 컨테이너가 제공하는 영역 내에서 안전하게 채워지도록 레이아웃을 구성할 수 있습니다.
| className="flex-1 flex flex-col h-dvh max-h-dvh min-h-0 overflow-hidden bg-white" | |
| className="flex-1 flex flex-col h-full max-h-full min-h-0 overflow-hidden bg-white" |
| if (selectedItem) { | ||
| return ( | ||
| <div className="flex-1 flex flex-col bg-gray-100 h-full"> | ||
| <div className="flex-1 flex flex-col bg-gray-100 h-full min-h-0"> |
There was a problem hiding this comment.
루트 컨테이너에 overflow-hidden 클래스를 추가하면 내부의 스크롤 영역(overflow-y-auto)이 정상적으로 동작하고, 루트 컨테이너 자체가 의도치 않게 스크롤되거나 레이아웃이 깨지는 현상을 방지할 수 있습니다.
| <div className="flex-1 flex flex-col bg-gray-100 h-full min-h-0"> | |
| <div className="flex-1 flex flex-col bg-gray-100 h-full min-h-0 overflow-hidden"> |
|
|
||
| return ( | ||
| <div className="flex-1 flex flex-col bg-gray-50 h-full"> | ||
| <div className="flex-1 flex flex-col bg-gray-50 h-full min-h-0"> |
There was a problem hiding this comment.
루트 컨테이너에 overflow-hidden 클래스를 추가하면 내부의 스크롤 영역(overflow-y-auto)이 정상적으로 동작하고, 루트 컨테이너 자체가 의도치 않게 스크롤되거나 레이아웃이 깨지는 현상을 방지할 수 있습니다.
| <div className="flex-1 flex flex-col bg-gray-50 h-full min-h-0"> | |
| <div className="flex-1 flex flex-col bg-gray-50 h-full min-h-0 overflow-hidden"> |
| if (selectedItem) { | ||
| return ( | ||
| <div className="flex-1 flex flex-col bg-gray-100 h-full"> | ||
| <div className="flex-1 flex flex-col bg-gray-100 h-full min-h-0"> |
There was a problem hiding this comment.
루트 컨테이너에 overflow-hidden 클래스를 추가하면 내부의 스크롤 영역(overflow-y-auto)이 정상적으로 동작하고, 루트 컨테이너 자체가 의도치 않게 스크롤되거나 레이아웃이 깨지는 현상을 방지할 수 있습니다.
| <div className="flex-1 flex flex-col bg-gray-100 h-full min-h-0"> | |
| <div className="flex-1 flex flex-col bg-gray-100 h-full min-h-0 overflow-hidden"> |
|
|
||
| return ( | ||
| <div className="flex-1 flex flex-col bg-gray-50 h-full"> | ||
| <div className="flex-1 flex flex-col bg-gray-50 h-full min-h-0"> |
There was a problem hiding this comment.
루트 컨테이너에 overflow-hidden 클래스를 추가하면 내부의 스크롤 영역(overflow-y-auto)이 정상적으로 동작하고, 루트 컨테이너 자체가 의도치 않게 스크롤되거나 레이아웃이 깨지는 현상을 방지할 수 있습니다.
| <div className="flex-1 flex flex-col bg-gray-50 h-full min-h-0"> | |
| <div className="flex-1 flex flex-col bg-gray-50 h-full min-h-0 overflow-hidden"> |
1 participant
🚀 Summary
스크롤 수정
✨ Description
판매내역,구매내역,프로필 수정,배송지 관리,알림설정 페이지 스크롤 문제 해결
🎲 Issue Number
close #119