From 6265359e018cfc70057c111d046ea6446094d758 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B0=A8=EC=A4=80=ED=98=B8?= Date: Mon, 12 Oct 2026 10:41:32 +0900 Subject: [PATCH] =?UTF-8?q?fix(nav):=20dev=20=EB=9D=A0=EA=B0=80=20?= =?UTF-8?q?=ED=97=A4=EB=8D=94=20=EC=98=A4=EB=A5=B8=EC=AA=BD=20=EC=9C=84=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=EC=9D=98=20=EC=9C=97=EB=B6=80=EB=B6=84?= =?UTF-8?q?=EC=9D=84=20=EA=B0=80=EB=A6=AC=EB=8D=98=20=EA=B2=83=EC=9D=84=20?= =?UTF-8?q?=EA=B3=A0=EC=B9=9C=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 「운영」·「내 정보」가 잘 안 눌린다는 제보. dev 에만 뜨는 「Dev 서버입니다」 띠(DevHeader)가 화면 맨 위 32px 을 투명하게 덮고 터치를 받고 있었다. 버튼은 8~48px 이라 윗부분 60% 를 누르면 띠가 가져갔다 — dev 에서 버튼 안 다섯 높이를 찍어 위 셋이 막힘을 확인했다. 운영에는 띠가 없다. - DevHeader 에 pointer-events-none - 「운영」 버튼 36 → 40px (내 정보 아이콘과 같게) - 메인 헤더 텍스트 링크(게시판·내 정보)는 글자 높이만큼만 눌려서 세로 여백으로 누르는 면적을 40px 대로. 헤더 높이가 고정이라 모양은 같다 dev 조건 빌드(NEXT_PUBLIC_APP_ENV=dev) + 스텁에서 다섯 높이 모두 버튼에 닿고, 메인 헤더 360px 폭은 그대로(오른쪽 끝 340). Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01Ji3KHVeQmBERyUWeWzTzDM --- .../landing/onboarding/LandingHeader.tsx | 5 +++-- src/components/ui/common/DevHeader.tsx | 17 ++++++++++++----- .../ui/design-system/GdgSiteHeader.tsx | 2 +- 3 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/components/landing/onboarding/LandingHeader.tsx b/src/components/landing/onboarding/LandingHeader.tsx index e4b402ce..1ebb87ae 100644 --- a/src/components/landing/onboarding/LandingHeader.tsx +++ b/src/components/landing/onboarding/LandingHeader.tsx @@ -20,15 +20,16 @@ const ANCHORS = [ { label: 'FAQ', id: 'faq' } ] +// 세로 여백은 누르는 면적용이다 — 글자 높이(20px)만으로는 손가락으로 잘 안 눌린다. 헤더 높이는 고정이라 모양은 그대로다. const LINK_CLASS = - 'whitespace-nowrap text-[15px] text-dusk-ink-500 transition-colors hover:text-dusk-ink-100' + 'whitespace-nowrap py-2.5 text-[15px] text-dusk-ink-500 transition-colors hover:text-dusk-ink-100' /** * 운영진만 보는 진입 버튼. 지원하기(ember)와 겹치지 않게 테두리만 준다 — * 방문자에게 가장 중요한 버튼이 두 개로 보이면 안 된다. */ const ADMIN_LINK_CLASS = - 'whitespace-nowrap rounded-full border border-[rgba(240,234,228,0.22)] px-3.5 py-1.5 text-[13px] text-dusk-ink-400 transition-colors hover:border-[rgba(208,129,85,0.6)] hover:text-dusk-ink-100' + 'inline-flex h-10 items-center whitespace-nowrap rounded-full border border-[rgba(240,234,228,0.22)] px-3.5 text-[13px] text-dusk-ink-400 transition-colors hover:border-[rgba(208,129,85,0.6)] hover:text-dusk-ink-100' export function scrollToSection(id: string) { document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' }) diff --git a/src/components/ui/common/DevHeader.tsx b/src/components/ui/common/DevHeader.tsx index 1362f185..f2e1a178 100644 --- a/src/components/ui/common/DevHeader.tsx +++ b/src/components/ui/common/DevHeader.tsx @@ -1,13 +1,20 @@ import React from 'react' +/** + * 안내 문구일 뿐이라 터치를 받지 않는다. 화면 맨 위 32px 을 투명하게 덮고 있어서, + * 받게 두면 그 아래 헤더 버튼(운영·내 정보)의 윗부분이 눌리지 않는다 — dev 에서만 생기는 일이라 놓치기 쉽다. + */ export default function DevHeader() { return ( <> -
-
-
Dev 서버입니다.
-
+
+
+
Dev 서버입니다.
+
) -} \ No newline at end of file +} diff --git a/src/components/ui/design-system/GdgSiteHeader.tsx b/src/components/ui/design-system/GdgSiteHeader.tsx index d057d880..142c3c5c 100644 --- a/src/components/ui/design-system/GdgSiteHeader.tsx +++ b/src/components/ui/design-system/GdgSiteHeader.tsx @@ -49,7 +49,7 @@ const PROFILE_URL = '/profile/' * 일반 메뉴와 섞여 보이면 안 되고, 강조색(ember)은 지원하기 같은 주 행동 몫이다. */ const ADMIN_ENTRY_CLASS = - 'inline-flex h-9 shrink-0 items-center whitespace-nowrap rounded-full border border-[rgba(240,234,228,0.22)] px-3.5 text-[13px] text-dusk-ink-400 transition-colors hover:border-[rgba(208,129,85,0.6)] hover:text-dusk-ink-100' + 'inline-flex h-10 shrink-0 items-center whitespace-nowrap rounded-full border border-[rgba(240,234,228,0.22)] px-3.5 text-[13px] text-dusk-ink-400 transition-colors hover:border-[rgba(208,129,85,0.6)] hover:text-dusk-ink-100' export function GdgSiteHeader({ menus,