Skip to content
Draft
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/frontend/app/(client)/(main)/_components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ export function Header() {
const session = useSession()
const { headerTitle } = useHeaderTitle()
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]">

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

fixed 포지션을 사용하는 헤더에 top-0 속성이 누락되어 있습니다. 브라우저 환경이나 다른 요소의 배치에 따라 헤더가 최상단에 고정되지 않을 수 있으므로, 명시적으로 top-0을 추가하는 것이 안전합니다. 또한 left-0 w-full 대신 inset-x-0을 사용하면 더 간결하게 표현할 수 있습니다.

Suggested change
<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]">

<div className="flex w-full max-w-[1440px] items-center justify-between gap-5">

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

div는 현재 19번 라인의 div 하나만을 자식으로 가지고 있습니다. 자식 요소가 w-full 클래스를 가지고 있어 부모의 전체 너비를 차지하므로, 부모인 이 div에 설정된 flex, items-center, justify-between, gap-5 클래스들은 실제 레이아웃에 영향을 주지 않는 중복 코드입니다. 상위 headergrid place-items-center가 이미 중앙 정렬을 수행하고 있으므로, 코드를 단순화하여 유지보수성을 높이는 것을 권장합니다.

Suggested change
<div className="flex w-full max-w-[1440px] items-center justify-between gap-5">
<div className="w-full max-w-[1440px]">

{/* FIXME: If you uncomment a group tab, you have to remove a pr-20 tailwind class */}
<div className="flex w-full items-center justify-between text-base">
{/* Mobile */}
Expand Down
Loading