fix(blog): 레이아웃 잔버그와 모바일 탐색 수정 - #93
Conversation
방문자 관점에서 보이는 레이아웃 잔버그를 정리했어요. 모바일 하단 네비게이션을 좌측 드로어로 바꾸고 헤더와 글로벌 레이아웃의 간섭을 줄였어요. 베트남 여행 글의 어색한 문장 배치도 함께 정리했어요.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: f4b93843b7
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| <div className="hidden h-14 grid-cols-[1fr_minmax(0,560px)_1fr] items-center gap-3 px-6 md:grid"> | ||
| <div /> | ||
| <div className="flex justify-center"> | ||
| <div className="w-full max-w-xl"> |
There was a problem hiding this comment.
This change mounts SearchButton twice (mobile and desktop variants) and relies on CSS (md:hidden / hidden md:grid) to hide one of them, but hidden components still mount. Because SearchButton registers a global / key handler in its useEffect, both listeners fire and call query.toggle() twice, which can immediately close the command palette after opening and make the keyboard shortcut appear broken across breakpoints.
Useful? React with 👍 / 👎.
| <button | ||
| type="button" | ||
| aria-label="메뉴 닫기" | ||
| className={clsx( | ||
| 'absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity', |
There was a problem hiding this comment.
When the drawer is closed, the backdrop and drawer content remain mounted and only pointer events/transform are toggled. Keyboard users can still tab to invisible controls (notably the full-screen close button and hidden links), creating off-screen focus targets and accidental activation risk on mobile. The closed state should fully remove these elements from sequential focus (e.g., conditional render or inert/tabindex management).
Useful? React with 👍 / 👎.
1 participant
Summary
Validation