From 4f993f1daa544faf6b7f2be62f7d1de674b4ec72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B0=A8=EC=A4=80=ED=98=B8?= <ckwnsgh4@naver.com>
Date: Mon, 12 Oct 2026 10:03:48 +0900
Subject: [PATCH 1/2] =?UTF-8?q?fix(mobile):=20=EA=B4=80=EB=A6=AC=EC=9E=90?=
 =?UTF-8?q?=20=ED=91=9C=EA=B0=80=20=EB=AA=A8=EB=B0=94=EC=9D=BC=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=EA=B0=80=EB=A1=9C=EB=A1=9C=20=EB=B0=80=EB=A6=AC?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8D=98=20=EA=B2=83=20=EB=93=B1=20?=
 =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EC=A0=90=EA=B2=80=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

2026-10-06 Web 56개 화면을 360·390px 로 전수 점검하며 고친 것.

- 관리자 표 카드(ADMIN_TABLE_CARD)가 overflow-hidden 이라 오른쪽 열이
  잘린 채 스와이프도 안 됐다(Users·Members·Core 지원서·Core 출석).
  overflow-x-auto + 표 min-w-max. 360px 터치 스와이프로 Users 표가
  201px 밀리는 것을 확인 — 같은 카드를 overflow-hidden 으로 되돌리면 0.
- Core 출석: 그리드 아이템 min-w-0 누락으로 문서가 409px 로 넘침.
- 관리자 입력칸 13~15px → iOS 포커스 확대. mobile:text-base.
- 온보딩 헤더: LEAD 로그인 시 「지원하기」가 잘림 → 「콘텐츠 관리」를
  모바일에서 숨김.
- 신청자 표 이름이 한 글자씩 꺾임 → 고정 열 whitespace-nowrap.
  링크 첨부 말줄임.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ji3KHVeQmBERyUWeWzTzDM
---
 src/app/dashboard/club/review/page.tsx        |  2 +-
 src/app/dashboard/club/team/page.tsx          |  2 +-
 src/app/dashboard/core-applications/page.tsx  |  2 +-
 src/app/dashboard/core/attendance/page.tsx    |  6 +++---
 src/app/dashboard/events/applicants/page.tsx  | 14 +++++++++----
 src/app/dashboard/events/form/page.tsx        |  2 +-
 src/app/dashboard/members/page.tsx            |  2 +-
 src/app/dashboard/page.tsx                    |  4 ++--
 src/app/dashboard/users/page.tsx              | 12 +++++------
 src/components/admin/dashboard/adminStyles.ts | 21 +++++++++++++------
 src/components/board/AttachmentList.tsx       |  5 +++--
 src/components/club/admin/ClubTermCard.tsx    |  2 +-
 .../eventApplication/QuestionEditor.tsx       |  2 +-
 .../landing/onboarding/LandingHeader.tsx      |  6 +++++-
 14 files changed, 51 insertions(+), 31 deletions(-)

diff --git a/src/app/dashboard/club/review/page.tsx b/src/app/dashboard/club/review/page.tsx
index 3ee87ca..e378205 100644
--- a/src/app/dashboard/club/review/page.tsx
+++ b/src/app/dashboard/club/review/page.tsx
@@ -235,7 +235,7 @@ export default function ClubReviewPage() {
                   maxLength={1000}
                   onChange={(e) => setReason(e.target.value)}
                   placeholder="예: 모임 장면이 보이는 사진을 추가해 주세요"
-                  className="resize-y rounded-xl border border-admin-line bg-admin-base px-4 py-3 text-[14px] text-admin-ink outline-none focus:border-admin-accent"
+                  className="resize-y rounded-xl border border-admin-line bg-admin-base px-4 py-3 text-[14px] mobile:text-base text-admin-ink outline-none focus:border-admin-accent"
                 />
               </label>
               <div className="flex justify-end gap-2">
diff --git a/src/app/dashboard/club/team/page.tsx b/src/app/dashboard/club/team/page.tsx
index 479e2e3..fa4c2fe 100644
--- a/src/app/dashboard/club/team/page.tsx
+++ b/src/app/dashboard/club/team/page.tsx
@@ -50,7 +50,7 @@ const STATE_CLASS: Record<ClubWeekState, string> = {
 const CARD =
   'flex flex-col gap-3 rounded-[20px] border border-admin-line-soft bg-admin-card p-[22px] shadow-admin'
 const FIELD =
-  'resize-y rounded-xl border border-admin-line bg-admin-base px-4 py-3 text-[14px] text-admin-ink outline-none focus:border-admin-accent'
+  'resize-y rounded-xl border border-admin-line bg-admin-base px-4 py-3 text-[14px] mobile:text-base text-admin-ink outline-none focus:border-admin-accent'
 
 /**
  * 팀 상세·완주 확정 (C 담당). 계산상 미충족이어도 확정할 수 있다 — 확정 전에 한 번 더 묻는다.
diff --git a/src/app/dashboard/core-applications/page.tsx b/src/app/dashboard/core-applications/page.tsx
index a136d9c..e2c6a12 100644
--- a/src/app/dashboard/core-applications/page.tsx
+++ b/src/app/dashboard/core-applications/page.tsx
@@ -384,7 +384,7 @@ export default function DashboardCoreApplicationsPage() {
 
       <section data-admin-reveal className={`${ADMIN_CONTAINER} pt-4`}>
         <div className={ADMIN_TABLE_CARD}>
-          <table className="w-full border-collapse">
+          <table className="w-full min-w-max border-collapse">
             <thead>
               <tr>
                 {['이름', '학과 · 학번', '지원 팀', '상태', '제출 시각'].map((label) => (
diff --git a/src/app/dashboard/core/attendance/page.tsx b/src/app/dashboard/core/attendance/page.tsx
index f600107..aaff091 100644
--- a/src/app/dashboard/core/attendance/page.tsx
+++ b/src/app/dashboard/core/attendance/page.tsx
@@ -526,7 +526,7 @@ export default function DashboardCoreAttendancePage() {
                 aria-label="추가할 일정 날짜"
                 value={newDate}
                 onChange={(e) => setNewDate(e.target.value)}
-                className="rounded-full border border-admin-line bg-admin-card px-3.5 py-1.5 text-[13px] text-admin-ink outline-none transition-colors duration-200 focus:border-admin-accent"
+                className="rounded-full border border-admin-line bg-admin-card px-3.5 py-1.5 text-[13px] mobile:text-base text-admin-ink outline-none transition-colors duration-200 focus:border-admin-accent"
               />
               <button
                 type="button"
@@ -600,7 +600,7 @@ export default function DashboardCoreAttendancePage() {
           </div>
         </div>
 
-        <div data-admin-reveal>
+        <div data-admin-reveal className="min-w-0">
           <div className="flex flex-wrap items-baseline justify-between gap-3">
             <div>
               <p className={ADMIN_CAPTION}>Members</p>
@@ -621,7 +621,7 @@ export default function DashboardCoreAttendancePage() {
           </div>
 
           <div className={`${ADMIN_TABLE_CARD} mt-3`}>
-            <table className="w-full border-collapse">
+            <table className="w-full min-w-max border-collapse">
               <thead>
                 <tr>
                   {['이름', '팀', '상태', '최종 수정'].map((label) => (
diff --git a/src/app/dashboard/events/applicants/page.tsx b/src/app/dashboard/events/applicants/page.tsx
index cfc9d50..e926502 100644
--- a/src/app/dashboard/events/applicants/page.tsx
+++ b/src/app/dashboard/events/applicants/page.tsx
@@ -243,7 +243,7 @@ export default function EventApplicantsPage() {
                 ) : (
                   applicants.map((applicant) => (
                     <tr key={applicant.applicationId} className={ADMIN_TR}>
-                      <td className={ADMIN_TD}>
+                      <td className={`${ADMIN_TD} whitespace-nowrap`}>
                         {applicant.name}
                         {applicant.userId == null && (
                           <span className="ml-1.5 text-[12px] text-admin-ink-dim">(비로그인)</span>
@@ -252,9 +252,15 @@ export default function EventApplicantsPage() {
                           <span className="ml-1.5 text-[12px] text-admin-ink-dim">(취소)</span>
                         )}
                       </td>
-                      <td className={ADMIN_TD_MUTED}>{applicant.studentId}</td>
-                      <td className={ADMIN_TD_MUTED}>{formatMajorLabel(applicant.major)}</td>
-                      <td className={ADMIN_TD_MUTED}>{formatDate(applicant.appliedAt)}</td>
+                      <td className={`${ADMIN_TD_MUTED} whitespace-nowrap`}>
+                        {applicant.studentId}
+                      </td>
+                      <td className={`${ADMIN_TD_MUTED} whitespace-nowrap`}>
+                        {formatMajorLabel(applicant.major)}
+                      </td>
+                      <td className={`${ADMIN_TD_MUTED} whitespace-nowrap`}>
+                        {formatDate(applicant.appliedAt)}
+                      </td>
                       <td className={ADMIN_TD}>
                         <div className="flex items-center gap-1.5">
                           <select
diff --git a/src/app/dashboard/events/form/page.tsx b/src/app/dashboard/events/form/page.tsx
index a67acb1..c2bb8a7 100644
--- a/src/app/dashboard/events/form/page.tsx
+++ b/src/app/dashboard/events/form/page.tsx
@@ -43,7 +43,7 @@ const HEADER_LINKS = [
 ]
 
 const INPUT =
-  'rounded-[10px] border border-admin-line bg-admin-card px-3 py-2 text-[14px] text-admin-ink outline-none transition-colors duration-200 focus:border-admin-accent'
+  'rounded-[10px] border border-admin-line bg-admin-card px-3 py-2 text-[14px] mobile:text-base text-admin-ink outline-none transition-colors duration-200 focus:border-admin-accent'
 
 const LABEL = 'text-[12px] tracking-[0.06em] text-admin-ink-dim'
 
diff --git a/src/app/dashboard/members/page.tsx b/src/app/dashboard/members/page.tsx
index 6b88c58..8614220 100644
--- a/src/app/dashboard/members/page.tsx
+++ b/src/app/dashboard/members/page.tsx
@@ -351,7 +351,7 @@ export default function DashboardMembersPage() {
 
       <section data-admin-reveal className={`${ADMIN_CONTAINER} pt-4`}>
         <div className={ADMIN_TABLE_CARD}>
-          <table className="w-full border-collapse">
+          <table className="w-full min-w-max border-collapse">
             <thead>
               <tr>
                 {['이름', '학과 · 학번', '지원 학기', '제출 시각', '전화번호', '회비'].map(
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 4bfd737..4b11b25 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -252,7 +252,7 @@ export default function DashboardIndexPage() {
               value={query}
               onChange={(event) => setQuery(event.target.value)}
               placeholder="페이지 검색  ( / 키로 이동 )"
-              className="min-w-0 flex-1 border-0 bg-transparent text-[15px] text-admin-ink outline-none"
+              className="min-w-0 flex-1 border-0 bg-transparent text-[15px] mobile:text-base text-admin-ink outline-none"
             />
           </label>
 
@@ -262,7 +262,7 @@ export default function DashboardIndexPage() {
               <select
                 value={effectiveRole}
                 onChange={(event) => setViewRole(event.target.value)}
-                className="cursor-pointer border-0 bg-transparent text-[15px] text-admin-ink outline-none"
+                className="cursor-pointer border-0 bg-transparent text-[15px] mobile:text-base text-admin-ink outline-none"
               >
                 {roleOptions.map((role) => (
                   <option key={role} value={role} className="bg-admin-card text-admin-ink">
diff --git a/src/app/dashboard/users/page.tsx b/src/app/dashboard/users/page.tsx
index 750e849..7190a65 100644
--- a/src/app/dashboard/users/page.tsx
+++ b/src/app/dashboard/users/page.tsx
@@ -74,7 +74,7 @@ const SIBLING_SCREENS = [
 const isTeamAssignableRole = (role: string) => role === 'CORE' || role === 'LEAD'
 
 const selectClassName =
-  'w-full min-w-[96px] cursor-pointer rounded-[10px] border border-admin-line bg-admin-card px-2.5 py-2 text-[14px] text-admin-ink outline-none transition-colors duration-200 hover:border-admin-accent disabled:cursor-not-allowed disabled:opacity-40'
+  'w-full min-w-[96px] cursor-pointer rounded-[10px] border border-admin-line bg-admin-card px-2.5 py-2 text-[14px] mobile:text-base text-admin-ink outline-none transition-colors duration-200 hover:border-admin-accent disabled:cursor-not-allowed disabled:opacity-40'
 
 const pillClassName =
   'flex items-center gap-2.5 rounded-full border border-admin-line bg-admin-card px-4 py-2.5'
@@ -332,7 +332,7 @@ export default function DashboardUsersPage() {
               }}
               onBlur={runSearch}
               placeholder="이름 · 이메일 · 학번 검색"
-              className="min-w-0 flex-1 border-0 bg-transparent text-[15px] text-admin-ink outline-none"
+              className="min-w-0 flex-1 border-0 bg-transparent text-[15px] mobile:text-base text-admin-ink outline-none"
             />
           </label>
 
@@ -344,7 +344,7 @@ export default function DashboardUsersPage() {
                 setPage(1)
                 setRoleFilter(event.target.value)
               }}
-              className="cursor-pointer border-0 bg-transparent text-[15px] text-admin-ink outline-none"
+              className="cursor-pointer border-0 bg-transparent text-[15px] mobile:text-base text-admin-ink outline-none"
             >
               <option value="ALL" className="bg-admin-card text-admin-ink">
                 전체
@@ -365,7 +365,7 @@ export default function DashboardUsersPage() {
                 setPage(1)
                 setTeamFilter(event.target.value)
               }}
-              className="cursor-pointer border-0 bg-transparent text-[15px] text-admin-ink outline-none"
+              className="cursor-pointer border-0 bg-transparent text-[15px] mobile:text-base text-admin-ink outline-none"
             >
               <option value="ALL" className="bg-admin-card text-admin-ink">
                 전체
@@ -408,8 +408,8 @@ export default function DashboardUsersPage() {
         data-admin-reveal
         className="mx-auto w-full max-w-[1240px] px-[clamp(20px,4vw,40px)] pt-4"
       >
-        <div className="overflow-hidden rounded-[20px] border border-admin-line-soft bg-admin-card shadow-admin">
-          <table className="w-full border-collapse">
+        <div className="overflow-x-auto rounded-[20px] border border-admin-line-soft bg-admin-card shadow-admin">
+          <table className="w-full min-w-max border-collapse">
             <thead>
               <tr>
                 {['ID', '이름', '이메일', '학과 · 학번', '권한', '팀'].map((label) => (
diff --git a/src/components/admin/dashboard/adminStyles.ts b/src/components/admin/dashboard/adminStyles.ts
index 84a766c..249b606 100644
--- a/src/components/admin/dashboard/adminStyles.ts
+++ b/src/components/admin/dashboard/adminStyles.ts
@@ -9,23 +9,28 @@
 export const ADMIN_PILL =
   'flex items-center gap-2.5 rounded-full border border-admin-line bg-admin-card px-4 py-2.5'
 
-/** 알약 안에 들어가는 네이티브 셀렉트 */
+/**
+ * 알약 안에 들어가는 네이티브 셀렉트.
+ *
+ * 입력 컨트롤은 모바일에서 16px 이상이어야 한다 — iOS Safari 는 그보다 작은 칸에 포커스하면
+ * 화면을 확대하고 되돌리지 않는다.
+ */
 export const ADMIN_PILL_SELECT =
-  'cursor-pointer border-0 bg-transparent text-[15px] text-admin-ink outline-none'
+  'cursor-pointer border-0 bg-transparent text-[15px] mobile:text-base text-admin-ink outline-none'
 
 /** 셀렉트 옵션 — 브라우저가 배경을 상속하지 않아 직접 준다 */
 export const ADMIN_OPTION = 'bg-admin-card text-admin-ink'
 
 /** 표 안에서 쓰는 셀렉트 */
 export const ADMIN_CELL_SELECT =
-  'w-full min-w-[96px] cursor-pointer rounded-[10px] border border-admin-line bg-admin-card px-2.5 py-2 text-[14px] text-admin-ink outline-none transition-colors duration-200 hover:border-admin-accent disabled:cursor-not-allowed disabled:opacity-40'
+  'w-full min-w-[96px] cursor-pointer rounded-[10px] border border-admin-line bg-admin-card px-2.5 py-2 text-[14px] mobile:text-base text-admin-ink outline-none transition-colors duration-200 hover:border-admin-accent disabled:cursor-not-allowed disabled:opacity-40'
 
 /** 검색 필드를 감싸는 라벨 */
 export const ADMIN_SEARCH_FIELD =
   'flex min-w-0 flex-1 basis-[300px] items-center gap-2.5 rounded-full border border-admin-line bg-admin-card px-4 py-2.5 shadow-admin transition duration-[250ms] focus-within:border-admin-accent focus-within:shadow-admin-ring'
 
 export const ADMIN_SEARCH_INPUT =
-  'min-w-0 flex-1 border-0 bg-transparent text-[15px] text-admin-ink outline-none'
+  'min-w-0 flex-1 border-0 bg-transparent text-[15px] mobile:text-base text-admin-ink outline-none'
 
 /** 강조 버튼 (저장 등) */
 export const ADMIN_ACCENT_BUTTON =
@@ -39,9 +44,13 @@ export const ADMIN_ACCENT_BUTTON_SM =
 export const ADMIN_GHOST_BUTTON =
   'whitespace-nowrap rounded-full border border-admin-line px-[18px] py-2 text-[13px] text-admin-ink-muted transition-colors duration-200 hover:border-admin-accent hover:text-admin-ink disabled:cursor-not-allowed disabled:opacity-40'
 
-/** 표를 감싸는 카드 — `overflow-hidden` 이 라운드를 지킨다 */
+/**
+ * 표를 감싸는 카드. `overflow-x-auto` 가 라운드를 지키면서 좁은 화면에서 가로 스크롤을 준다 —
+ * `overflow-hidden` 이던 때는 모바일에서 오른쪽 열이 잘린 채 밀어도 움직이지 않았다.
+ * 안의 표는 `min-w-max` 등으로 폭을 지켜야 열이 찌그러지지 않는다.
+ */
 export const ADMIN_TABLE_CARD =
-  'overflow-hidden rounded-[20px] border border-admin-line-soft bg-admin-card shadow-admin'
+  'overflow-x-auto rounded-[20px] border border-admin-line-soft bg-admin-card shadow-admin'
 
 /**
  * 표 헤더 셀. `top-0` 이어야 한다 — 68px 을 주면 첫 행과 겹친다.
diff --git a/src/components/board/AttachmentList.tsx b/src/components/board/AttachmentList.tsx
index 443d70f..c4a109f 100644
--- a/src/components/board/AttachmentList.tsx
+++ b/src/components/board/AttachmentList.tsx
@@ -59,9 +59,10 @@ export function AttachmentList({ attachments }: AttachmentListProps) {
               href={href ?? '#'}
               target="_blank"
               rel="noreferrer"
-              className="flex items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap rounded-[10px] bg-[rgba(240,234,228,0.06)] px-4 py-[9px] text-[15px] text-tag-info underline transition-colors hover:bg-[rgba(240,234,228,0.11)]"
+              className="flex items-center gap-2 rounded-[10px] bg-[rgba(240,234,228,0.06)] px-4 py-[9px] text-[15px] text-tag-info underline transition-colors hover:bg-[rgba(240,234,228,0.11)]"
             >
-              {attachment.url}
+              {/* flex 컨테이너에 직접 둔 텍스트에는 말줄임이 안 걸려 긴 URL 이 오른쪽 여백까지 잘린다. */}
+              <span className="truncate">{attachment.url}</span>
             </a>
           </li>
         )
diff --git a/src/components/club/admin/ClubTermCard.tsx b/src/components/club/admin/ClubTermCard.tsx
index 49d4fa9..7d7f284 100644
--- a/src/components/club/admin/ClubTermCard.tsx
+++ b/src/components/club/admin/ClubTermCard.tsx
@@ -16,7 +16,7 @@ import { cn } from '@/utils/cn'
 const CARD =
   'flex flex-col gap-3 rounded-[20px] border border-admin-line-soft bg-admin-card p-[22px] shadow-admin'
 const FIELD =
-  'rounded-xl border border-admin-line bg-admin-base px-4 py-3 text-[14px] text-admin-ink outline-none focus:border-admin-accent'
+  'rounded-xl border border-admin-line bg-admin-base px-4 py-3 text-[14px] mobile:text-base text-admin-ink outline-none focus:border-admin-accent'
 
 /**
  * 기수 설정 (C 담당) — `/dashboard/club/leaders` 오른쪽 칸. 이름과 참석 비율만 있다. 활동 기간은 소모임마다 둔다.
diff --git a/src/components/eventApplication/QuestionEditor.tsx b/src/components/eventApplication/QuestionEditor.tsx
index 4309cfe..d02658c 100644
--- a/src/components/eventApplication/QuestionEditor.tsx
+++ b/src/components/eventApplication/QuestionEditor.tsx
@@ -20,7 +20,7 @@ import {
 } from '@/types/eventApplication'
 
 const INPUT =
-  'w-full rounded-[10px] border border-admin-line bg-admin-card px-3 py-2 text-[14px] text-admin-ink outline-none transition-colors duration-200 focus:border-admin-accent disabled:cursor-not-allowed disabled:opacity-40'
+  'w-full rounded-[10px] border border-admin-line bg-admin-card px-3 py-2 text-[14px] mobile:text-base text-admin-ink outline-none transition-colors duration-200 focus:border-admin-accent disabled:cursor-not-allowed disabled:opacity-40'
 
 const LABEL = 'shrink-0 whitespace-nowrap text-[12px] tracking-[0.06em] text-admin-ink-dim'
 
diff --git a/src/components/landing/onboarding/LandingHeader.tsx b/src/components/landing/onboarding/LandingHeader.tsx
index d13e0ac..c9b0c97 100644
--- a/src/components/landing/onboarding/LandingHeader.tsx
+++ b/src/components/landing/onboarding/LandingHeader.tsx
@@ -67,8 +67,12 @@ export default function LandingHeader() {
       </a>
 
       <nav className="flex items-center gap-[clamp(14px,2.4vw,34px)]">
+        {/*
+          좁은 화면에서는 숨긴다. 넣으면 nav 가 헤더보다 길어져 지원하기가 잘린다(360px 기준 62px 초과).
+          운영진은 대시보드 허브의 온보딩 관리로 같은 화면에 갈 수 있다.
+        */}
         {canEditContent && (
-          <a href="/dashboard/landing/" className={ADMIN_LINK_CLASS}>
+          <a href="/dashboard/landing/" className={`${ADMIN_LINK_CLASS} mobile:hidden`}>
             콘텐츠 관리
           </a>
         )}

From 1af29ada844fc610f96a872a2d660d8d48c3dfe3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B0=A8=EC=A4=80=ED=98=B8?= <ckwnsgh4@naver.com>
Date: Mon, 12 Oct 2026 10:24:15 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat(nav):=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=EB=A9=94=EB=89=B4=EB=A5=BC=20=EC=83=81=EB=8B=A8=20=ED=83=AD?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EA=BA=BC=EB=82=B4=EA=B3=A0=20=EC=9A=B4?=
 =?UTF-8?q?=EC=98=81=EC=A7=84=20=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20?=
 =?UTF-8?q?=EC=9E=85=EA=B5=AC=EB=A5=BC=20=EB=91=94=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

모바일에서 게시판을 옮기려면 ☰ 서랍을 열어야 했고, 운영진 대시보드로
가는 링크는 사이트 어디에도 없었다(주소를 직접 입력).

- GdgSiteHeader 모바일: 서랍을 없애고 두 줄로 —
  로고 + [운영] + [내 정보 아이콘 / 로그인], 아래에 「홈 + 메뉴」 탭.
  게시판·소모임·마이페이지·지원 등 이 헤더를 쓰는 화면 전부에 적용된다.
- 「운영」은 CORE 이상에게만 보인다. 기준을 role.ts 의
  DASHBOARD_MIN_ROLE 하나로 두고 dashboard/layout.tsx 가드도 이걸 쓰게
  했다 — 따로 적으면 버튼은 보이는데 열면 막히는 일이 생긴다.
  숨기는 것은 화면일 뿐이고 막는 것은 가드와 서버다.
- 메인(온보딩) 헤더에도 「운영」. 홈 화면 앱의 첫 화면이라서다.
  CORE 이상은 항목이 다섯 개라 360px 에서 지원하기가 25px 잘려
  모바일 간격만 줄였다(PC 그대로).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ji3KHVeQmBERyUWeWzTzDM
---
 src/app/dashboard/layout.tsx                  |   3 +-
 src/components/board/boardMenus.ts            |   6 +-
 .../landing/onboarding/LandingHeader.tsx      |  19 +-
 .../ui/design-system/GdgSiteHeader.tsx        | 214 +++++++++---------
 .../ui/design-system/GdgSiteNav.types.ts      |   2 +
 src/utils/auth/role.ts                        |   9 +
 6 files changed, 137 insertions(+), 116 deletions(-)

diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index def2c51..bdd187d 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/dashboard/layout.tsx
@@ -1,10 +1,11 @@
 import type { ReactNode } from 'react'
 
 import ApiCodeGuard from '@/components/auth/ApiCodeGuard'
+import { DASHBOARD_MIN_ROLE } from '@/utils/auth/role'
 
 export default function DashboardLayout({ children }: { children: ReactNode }) {
   return (
-    <ApiCodeGuard requiredRole="CORE" nextOverride="/dashboard">
+    <ApiCodeGuard requiredRole={DASHBOARD_MIN_ROLE} nextOverride="/dashboard">
       {children}
     </ApiCodeGuard>
   )
diff --git a/src/components/board/boardMenus.ts b/src/components/board/boardMenus.ts
index fb66386..08e1ff6 100644
--- a/src/components/board/boardMenus.ts
+++ b/src/components/board/boardMenus.ts
@@ -8,8 +8,8 @@ import type { GdgMenuLink } from '@/components/ui/design-system'
  * 게시판이 늘어날 때 여기 한 곳만 고치면 8개 페이지가 함께 맞는다.
  */
 export const BOARD_MENUS: GdgMenuLink[] = [
-  { label: '공지사항', url: '/board/notices/' },
-  { label: '행사게시판', url: '/board/events/' },
-  { label: '자유게시판', url: '/board/free/' },
+  { label: '공지사항', url: '/board/notices/', shortLabel: '공지' },
+  { label: '행사게시판', url: '/board/events/', shortLabel: '행사' },
+  { label: '자유게시판', url: '/board/free/', shortLabel: '자유' },
   { label: '소모임', url: '/club/' }
 ]
diff --git a/src/components/landing/onboarding/LandingHeader.tsx b/src/components/landing/onboarding/LandingHeader.tsx
index c9b0c97..e4b402c 100644
--- a/src/components/landing/onboarding/LandingHeader.tsx
+++ b/src/components/landing/onboarding/LandingHeader.tsx
@@ -3,7 +3,7 @@
 import Image from 'next/image'
 
 import { useAuth } from '@/hooks/useAuth'
-import { hasAtLeast } from '@/utils/auth/role'
+import { canOpenDashboard, hasAtLeast } from '@/utils/auth/role'
 
 import gdgocPcLogo from '@public/icons/gdgocIcon/pc.svg'
 
@@ -39,9 +39,10 @@ export default function LandingHeader() {
   const isLoggedIn = Boolean(user)
   // 콘텐츠 관리 화면과 같은 기준이다 (dashboard/landing/layout.tsx).
   const canEditContent = hasAtLeast(user?.userRole, 'LEAD')
+  const canOpenAdmin = canOpenDashboard(user?.userRole)
 
   return (
-    <header className="fixed inset-x-0 top-0 z-50 flex h-[68px] items-center justify-between gap-6 border-b border-b-[rgba(240,234,228,0.07)] bg-[rgba(27,22,34,0.62)] px-[clamp(20px,4vw,44px)] backdrop-blur-[18px]">
+    <header className="fixed inset-x-0 top-0 z-50 flex h-[68px] items-center justify-between gap-3 border-b border-b-[rgba(240,234,228,0.07)] bg-[rgba(27,22,34,0.62)] px-[clamp(20px,4vw,44px)] backdrop-blur-[18px] pc:gap-6">
       <a
         href="#top"
         onClick={(event) => {
@@ -66,7 +67,11 @@ export default function LandingHeader() {
         </span>
       </a>
 
-      <nav className="flex items-center gap-[clamp(14px,2.4vw,34px)]">
+      {/*
+        모바일 여백은 운영진 기준으로 맞췄다. CORE 이상은 「운영」까지 다섯 개라 360px 에서
+        PC 와 같은 간격이면 지원하기가 25px 잘린다.
+      */}
+      <nav className="flex items-center gap-[clamp(10px,2.4vw,34px)]">
         {/*
           좁은 화면에서는 숨긴다. 넣으면 nav 가 헤더보다 길어져 지원하기가 잘린다(360px 기준 62px 초과).
           운영진은 대시보드 허브의 온보딩 관리로 같은 화면에 갈 수 있다.
@@ -76,6 +81,12 @@ export default function LandingHeader() {
             콘텐츠 관리
           </a>
         )}
+        {/* 홈 화면 앱을 열면 여기가 첫 화면이라 운영진 입구가 있어야 한다. 짧아서 모바일에도 들어간다. */}
+        {canOpenAdmin && (
+          <a href="/dashboard/" className={ADMIN_LINK_CLASS}>
+            운영
+          </a>
+        )}
         {ANCHORS.map((item) => (
           <a
             key={item.id}
@@ -102,7 +113,7 @@ export default function LandingHeader() {
         </a>
         <a
           href="/recruit/"
-          className="whitespace-nowrap rounded-full bg-ember px-5 py-2.5 text-[15px] font-medium text-ember-ink transition-colors hover:bg-dusk-ink-100 hover:text-dusk-base"
+          className="whitespace-nowrap rounded-full bg-ember px-4 py-2.5 pc:px-5 text-[15px] font-medium text-ember-ink transition-colors hover:bg-dusk-ink-100 hover:text-dusk-base"
         >
           지원하기
         </a>
diff --git a/src/components/ui/design-system/GdgSiteHeader.tsx b/src/components/ui/design-system/GdgSiteHeader.tsx
index 33127a1..d057d88 100644
--- a/src/components/ui/design-system/GdgSiteHeader.tsx
+++ b/src/components/ui/design-system/GdgSiteHeader.tsx
@@ -2,10 +2,11 @@
 
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import { useState } from 'react'
-import { Menu, X } from 'lucide-react'
+import { User } from 'lucide-react'
 
 import DuskBrand from '@/components/ui/common/DuskBrand'
+import { useAuth } from '@/hooks/useAuth'
+import { canOpenDashboard } from '@/utils/auth/role'
 import { cn } from '@/utils/cn'
 import type { GdgMenuLink } from './GdgSiteNav.types'
 
@@ -34,10 +35,22 @@ function useIsActive() {
   const pathname = usePathname()
   return (url: string) => {
     const base = url.endsWith('/') ? url.slice(0, -1) : url
+    // '/' 는 접두사로 비교하면 모든 경로에서 켜진다
+    if (!base) return pathname === '/'
     return pathname === base || pathname.startsWith(`${base}/`)
   }
 }
 
+const HOME_TAB: GdgMenuLink = { label: '홈', url: '/' }
+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'
+
 export function GdgSiteHeader({
   menus,
   brandHref = '/',
@@ -45,135 +58,120 @@ export function GdgSiteHeader({
   actionMenus,
   className
 }: GdgSiteHeaderProps) {
-  const [isMenuOpen, setIsMenuOpen] = useState(false)
   const isActive = useIsActive()
+  const pathname = usePathname()
+  const { user } = useAuth()
   const resolvedMenus = menus ?? DEFAULT_MENUS
   const resolvedActionMenus = actionMenus ?? (actionMenu ? [actionMenu] : [])
+  // 화면에서 숨기는 것일 뿐 막는 것은 대시보드 가드와 서버다
+  const showAdminEntry = canOpenDashboard(user?.userRole)
+
+  // 모바일은 서랍 없이 탭 줄에 다 꺼내 둔다. 내 정보는 오른쪽 위 아이콘이 맡으므로 탭에서 뺀다.
+  const mobileTabs = [HOME_TAB, ...resolvedMenus.filter((menu) => menu.url !== PROFILE_URL)]
 
   return (
-    <>
-      <header
-        className={cn(
-          'sticky top-0 z-40 w-full border-b border-b-[rgba(240,234,228,0.08)] bg-[rgba(27,22,34,0.72)] backdrop-blur-[18px] mobile:h-16 pc:h-[68px]',
-          className
-        )}
-      >
-        <div className="hidden h-full pc:block">
-          <div className="flex h-full items-center justify-between gap-6 px-[clamp(20px,4vw,44px)]">
-            <DuskBrand href={brandHref} />
+    <header
+      className={cn(
+        'sticky top-0 z-40 w-full border-b border-b-[rgba(240,234,228,0.08)] bg-[rgba(27,22,34,0.72)] backdrop-blur-[18px] pc:h-[68px]',
+        className
+      )}
+    >
+      <div className="hidden h-full pc:block">
+        <div className="flex h-full items-center justify-between gap-6 px-[clamp(20px,4vw,44px)]">
+          <DuskBrand href={brandHref} />
 
-            <nav className="flex items-center gap-[clamp(12px,2vw,28px)]">
-              {resolvedMenus.map((menu) => {
-                const active = isActive(menu.url)
-                return (
-                  <Link
-                    key={`${menu.label}-${menu.url}`}
-                    href={menu.url}
-                    aria-current={active ? 'page' : undefined}
-                    className={cn(
-                      'whitespace-nowrap border-b-2 pb-[3px] text-[15px] transition-colors',
-                      active
-                        ? 'border-b-ember text-dusk-ink-100'
-                        : 'border-b-transparent text-dusk-ink-500 hover:text-dusk-ink-100'
-                    )}
-                  >
-                    {menu.label}
-                  </Link>
-                )
-              })}
-              {resolvedActionMenus.map((menu) => (
+          <nav className="flex items-center gap-[clamp(12px,2vw,28px)]">
+            {resolvedMenus.map((menu) => {
+              const active = isActive(menu.url)
+              return (
                 <Link
-                  key={`action-${menu.label}-${menu.url}`}
+                  key={`${menu.label}-${menu.url}`}
                   href={menu.url}
-                  className="whitespace-nowrap text-[15px] text-dusk-ink-500 transition-colors hover:text-dusk-ink-100"
+                  aria-current={active ? 'page' : undefined}
+                  className={cn(
+                    'whitespace-nowrap border-b-2 pb-[3px] text-[15px] transition-colors',
+                    active
+                      ? 'border-b-ember text-dusk-ink-100'
+                      : 'border-b-transparent text-dusk-ink-500 hover:text-dusk-ink-100'
+                  )}
                 >
                   {menu.label}
                 </Link>
-              ))}
-            </nav>
-          </div>
+              )
+            })}
+            {resolvedActionMenus.map((menu) => (
+              <Link
+                key={`action-${menu.label}-${menu.url}`}
+                href={menu.url}
+                className="whitespace-nowrap text-[15px] text-dusk-ink-500 transition-colors hover:text-dusk-ink-100"
+              >
+                {menu.label}
+              </Link>
+            ))}
+            {showAdminEntry && (
+              <Link href="/dashboard/" className={ADMIN_ENTRY_CLASS}>
+                운영
+              </Link>
+            )}
+          </nav>
         </div>
+      </div>
 
-        <div className="flex h-full items-center justify-between px-5 pc:hidden">
+      <div className="pc:hidden">
+        <div className="flex h-14 items-center justify-between gap-3 px-5">
           <DuskBrand href={brandHref} />
-          <button
-            type="button"
-            onClick={() => setIsMenuOpen((prev) => !prev)}
-            className="inline-flex size-10 items-center justify-center rounded-full border border-dusk-line text-dusk-ink-200"
-            aria-label={isMenuOpen ? '메뉴 닫기' : '메뉴 열기'}
-          >
-            {isMenuOpen ? <X size={20} /> : <Menu size={20} />}
-          </button>
-        </div>
-      </header>
-
-      {/*
-        서랍은 header 밖에 둔다. header 에 backdrop-blur 가 걸려 있는데
-        backdrop-filter 는 fixed 자손의 컨테이닝 블록이 되어, 안에 두면 이 상자가
-        뷰포트가 아니라 헤더 높이(64px)로 잡힌다 — 서랍이 그만큼만 열린다.
-
-        상자 자체는 화면을 넘지 않고, 서랍은 그 안에서 absolute 로 밀어낸다.
-        닫힌 서랍을 fixed 로 화면 밖에 세우면 문서 폭이 늘어나 가로 스크롤이 생기는데,
-        overflow-hidden 인 이 상자가 그것도 같이 막는다.
-      */}
-      <div
-        className={cn(
-          'pointer-events-none fixed inset-0 z-50 overflow-hidden pc:hidden',
-          isMenuOpen && 'pointer-events-auto'
-        )}
-      >
-        <div
-          className={cn(
-            'absolute inset-0 bg-[rgba(15,12,19,0.72)] opacity-0 transition-opacity duration-200',
-            isMenuOpen && 'opacity-100'
-          )}
-          onClick={() => setIsMenuOpen(false)}
-        />
-
-        <aside
-          className={cn(
-            'absolute right-0 top-0 h-full w-[78%] max-w-[320px] border-l border-l-dusk-line bg-dusk-card px-6 py-6 transition-transform duration-200',
-            isMenuOpen ? 'translate-x-0' : 'translate-x-full'
-          )}
-        >
-          <div className="mb-8 flex items-center justify-end">
-            <button
-              type="button"
-              onClick={() => setIsMenuOpen(false)}
-              className="inline-flex size-9 items-center justify-center rounded-full border border-dusk-line text-dusk-ink-200"
-              aria-label="메뉴 닫기"
-            >
-              <X size={18} />
-            </button>
-          </div>
-
-          <nav className="flex flex-col gap-5">
-            {resolvedMenus.map((menu) => (
+          <div className="flex items-center gap-2">
+            {showAdminEntry && (
+              <Link href="/dashboard/" className={ADMIN_ENTRY_CLASS}>
+                운영
+              </Link>
+            )}
+            {user ? (
               <Link
-                key={`mobile-drawer-${menu.label}-${menu.url}`}
-                href={menu.url}
-                onClick={() => setIsMenuOpen(false)}
+                href={PROFILE_URL}
+                aria-label="내 정보"
+                aria-current={isActive(PROFILE_URL) ? 'page' : undefined}
                 className={cn(
-                  'text-base transition-colors',
-                  isActive(menu.url) ? 'text-ember' : 'text-dusk-ink-200 hover:text-dusk-ink-100'
+                  'inline-flex size-10 items-center justify-center rounded-full border transition-colors',
+                  isActive(PROFILE_URL)
+                    ? 'border-ember text-dusk-ink-100'
+                    : 'border-dusk-line text-dusk-ink-200'
                 )}
               >
-                {menu.label}
+                <User size={19} />
               </Link>
-            ))}
-            {resolvedActionMenus.map((menu) => (
+            ) : (
+              <Link
+                href={`/login?next=${encodeURIComponent(pathname)}`}
+                className="inline-flex h-10 items-center px-2 text-[15px] text-dusk-ink-300"
+              >
+                로그인
+              </Link>
+            )}
+          </div>
+        </div>
+
+        <nav aria-label="메뉴" className="no-scrollbar flex h-11 overflow-x-auto px-3">
+          {mobileTabs.map((menu) => {
+            const active = isActive(menu.url)
+            return (
               <Link
-                key={`mobile-action-${menu.label}-${menu.url}`}
+                key={`tab-${menu.label}-${menu.url}`}
                 href={menu.url}
-                onClick={() => setIsMenuOpen(false)}
-                className="text-base text-dusk-ink-500 hover:text-dusk-ink-100"
+                aria-current={active ? 'page' : undefined}
+                className={cn(
+                  'flex shrink-0 items-center border-b-2 px-3 text-[15px] transition-colors',
+                  active
+                    ? 'border-b-ember text-dusk-ink-100'
+                    : 'border-b-transparent text-dusk-ink-500'
+                )}
               >
-                {menu.label}
+                {menu.shortLabel ?? menu.label}
               </Link>
-            ))}
-          </nav>
-        </aside>
+            )
+          })}
+        </nav>
       </div>
-    </>
+    </header>
   )
 }
diff --git a/src/components/ui/design-system/GdgSiteNav.types.ts b/src/components/ui/design-system/GdgSiteNav.types.ts
index 804bc4e..786107b 100644
--- a/src/components/ui/design-system/GdgSiteNav.types.ts
+++ b/src/components/ui/design-system/GdgSiteNav.types.ts
@@ -1,4 +1,6 @@
 export type GdgMenuLink = {
   label: string
   url: string
+  /** 모바일 탭 줄처럼 폭이 좁은 곳에서 쓰는 짧은 이름 */
+  shortLabel?: string
 }
diff --git a/src/utils/auth/role.ts b/src/utils/auth/role.ts
index 381eac5..1879263 100644
--- a/src/utils/auth/role.ts
+++ b/src/utils/auth/role.ts
@@ -12,6 +12,15 @@ export const hasAtLeast = (
   minimumRole: UserRoleValue
 ): boolean => rankOf(currentRole) >= rankOf(minimumRole)
 
+/**
+ * 운영진 대시보드(`/dashboard`)에 들어갈 수 있는 최소 역할.
+ * 대시보드 가드와 헤더의 「운영」 버튼이 같이 본다 — 따로 적으면 버튼은 보이는데 열면 막히는 일이 생긴다.
+ */
+export const DASHBOARD_MIN_ROLE: UserRoleValue = 'CORE'
+
+export const canOpenDashboard = (currentRole: string | undefined | null): boolean =>
+  hasAtLeast(currentRole, DASHBOARD_MIN_ROLE)
+
 /**
  * 부원 정보를 고칠 수 있는가 — 서버 LEAD_OR_HR_RULE 과 같은 규칙이다.
  * CORE 는 조회만 되므로 쓰기 버튼은 이 판정으로 막는다.