fix(fe): modify menubar to full width#3559
Conversation
![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
This pull request adjusts the layout and padding of the Header component, specifically increasing the large-screen horizontal padding on the header and removing it from the inner container. The review feedback suggests adding 'top-0' to the fixed header to ensure it stays at the top of the viewport and using 'inset-x-0' for more concise styling. Additionally, it is recommended to remove redundant flexbox classes from the inner container to simplify the code and improve maintainability.
| return ( | ||
| <header className="backdrop-blur-xs fixed left-0 z-40 grid h-[60px] w-full place-items-center bg-white px-5 lg:bg-white/80 lg:px-[30px]"> | ||
| <div className="flex w-full max-w-[1440px] items-center justify-between gap-5 lg:px-[116px]"> | ||
| <header className="backdrop-blur-xs fixed left-0 z-40 grid h-[60px] w-full place-items-center bg-white px-5 lg:bg-white/80 lg:px-[45px]"> |
There was a problem hiding this comment.
fixed 포지션을 사용하는 헤더에 top-0 속성이 누락되어 있습니다. 브라우저 환경이나 다른 요소의 배치에 따라 헤더가 최상단에 고정되지 않을 수 있으므로, 명시적으로 top-0을 추가하는 것이 안전합니다. 또한 left-0 w-full 대신 inset-x-0을 사용하면 더 간결하게 표현할 수 있습니다.
| <header className="backdrop-blur-xs fixed left-0 z-40 grid h-[60px] w-full place-items-center bg-white px-5 lg:bg-white/80 lg:px-[45px]"> | |
| <header className="backdrop-blur-xs fixed inset-x-0 top-0 z-40 grid h-[60px] w-full place-items-center bg-white px-5 lg:bg-white/80 lg:px-[45px]"> |
| <header className="backdrop-blur-xs fixed left-0 z-40 grid h-[60px] w-full place-items-center bg-white px-5 lg:bg-white/80 lg:px-[30px]"> | ||
| <div className="flex w-full max-w-[1440px] items-center justify-between gap-5 lg:px-[116px]"> | ||
| <header className="backdrop-blur-xs fixed left-0 z-40 grid h-[60px] w-full place-items-center bg-white px-5 lg:bg-white/80 lg:px-[45px]"> | ||
| <div className="flex w-full max-w-[1440px] items-center justify-between gap-5"> |
There was a problem hiding this comment.
이 div는 현재 19번 라인의 div 하나만을 자식으로 가지고 있습니다. 자식 요소가 w-full 클래스를 가지고 있어 부모의 전체 너비를 차지하므로, 부모인 이 div에 설정된 flex, items-center, justify-between, gap-5 클래스들은 실제 레이아웃에 영향을 주지 않는 중복 코드입니다. 상위 header의 grid place-items-center가 이미 중앙 정렬을 수행하고 있으므로, 코드를 단순화하여 유지보수성을 높이는 것을 권장합니다.
| <div className="flex w-full max-w-[1440px] items-center justify-between gap-5"> | |
| <div className="w-full max-w-[1440px]"> |
|
✅ Syncing Preview App Succeeded Application: |
|
❗ Syncing Preview App Failed Application: |
|
❗ Syncing Preview App Failed Application: |
|
✅ Syncing Preview App Succeeded Application: |
1 participant
Description
중단된 작업입니다.
Additional context
Before submitting the PR, please make sure you do the following
fixes #123).closes TAS-2687