fix(ui): PC에서 상단 메뉴가 두 줄로 깨지던 문제 수정

- 메뉴 링크에 white-space: nowrap + flex: none — 글자를 단어 중간에서 쪼개지 않음
- 상단바 컨테이너 max-width 960 → 1140px (메뉴 6개가 쓸 폭 확보)
- 넘칠 경우 가로 스크롤로 처리(min-width: 0 필요), 1080px 이하는 로고 부제부터 접음
- '멘토 멘토' 중복 표시 수정 — 이름과 역할 배지를 분리

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/App.jsx

@@ -84,15 +84,16 @@ function Layout() {
             )}
           </nav>
           <div className="topnav-user">
-            <span>
-              {user?.name}
-              {user?.role === 'MENTOR' ? ' 멘토' : ''}
-            </span>
+            {/* 학습 포인트: 예전엔 {name}{role==='MENTOR' ? ' 멘토' : ''} 였는데,
+                멘토 계정 이름이 "멘토"라서 화면에 "멘토 멘토"로 나왔다.
+                이름과 역할은 다른 정보이니 역할은 배지로 분리한다 — 중복도 없어지고 폭도 준다. */}
+            <span className="topnav-name">{user?.name}</span>
+            {user?.role === 'MENTOR' && <span className="badge badge-primary">멘토</span>}
             {/* 비밀번호 변경 — 처음 받은 비밀번호를 바꿀 수 있는 통로. 눈에 띄는 곳에 둔다. */}
             <NavLink to="/change-password" className="btn btn-ghost" title="비밀번호 변경">
               🔑
             </NavLink>
-            <button className="btn btn-ghost" onClick={logout}>
+            <button className="btn btn-ghost" onClick={logout} title="로그아웃">
               로그아웃
             </button>
           </div>

frontend/src/styles/global.css

@@ -78,14 +78,21 @@ a {
   box-shadow: var(--shadow);
 }
 
+/* 학습 포인트: 상단바는 로고·메뉴·사용자 영역이 한 줄의 폭을 나눠 갖는다.
+   메뉴가 늘어나면 셋이 서로 폭을 뺏는데, flex는 기본적으로 아이템을 "줄여서라도" 맞추려 한다.
+   그래서 메뉴 글자가 단어 중간에서 잘려 두 줄이 되는 사고가 났다.
+   해법은 세 가지를 함께 쓴다:
+     1) 메뉴 항목: white-space: nowrap + flex: none  → 글자를 절대 쪼개지 않는다
+     2) 컨테이너: max-width를 본문(960)보다 넓게    → 메뉴가 쓸 폭을 확보
+     3) 그래도 넘치면 가로 스크롤                    → 깨지는 대신 밀어서 볼 수 있게 */
 .topnav-inner {
-  max-width: 960px;
+  max-width: 1140px;
   margin: 0 auto;
   padding: 0 20px;
   height: 56px;
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: 16px;
 }
 
 .topnav-logo {
@@ -93,6 +100,7 @@ a {
   font-size: 15px;
   color: var(--ink);
   white-space: nowrap;
+  flex: none;
 }
 
 .topnav-logo span {
@@ -101,15 +109,24 @@ a {
 
 .topnav-menu {
   display: flex;
-  gap: 4px;
+  gap: 2px;
   flex: 1;
+  min-width: 0;          /* flex 자식이 내용보다 작아질 수 있게 — 이게 없으면 스크롤이 안 생긴다 */
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.topnav-menu::-webkit-scrollbar {
+  display: none;
 }
 
 .topnav-menu a {
-  padding: 6px 12px;
+  padding: 6px 11px;
   border-radius: 10px;
   color: var(--muted);
   font-weight: 500;
+  white-space: nowrap;   /* 글자를 단어 중간에서 쪼개지 않는다 */
+  flex: none;            /* 폭이 모자라도 줄어들지 않는다 */
 }
 
 .topnav-menu a.active {
@@ -121,9 +138,27 @@ a {
 .topnav-user {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 6px;
   color: var(--muted);
   font-size: 14px;
+  flex: none;
+  white-space: nowrap;
+}
+
+.topnav-name {
+  font-weight: 600;
+  color: var(--ink);
+  max-width: 90px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 화면이 좁아지면 로고의 부제("수습 플랫폼")부터 접어 메뉴에 폭을 양보한다.
+   학습 포인트: 무엇을 먼저 버릴지 정하는 것도 반응형 설계다 — 브랜드보다 기능이 먼저다. */
+@media (max-width: 1080px) {
+  .topnav-logo span {
+    display: none;
+  }
 }
 
 /* ---------- 모바일 반응형 ----------
@@ -145,8 +180,10 @@ a {
     margin-left: auto;
   }
 
-  /* 좁은 화면에선 이름을 숨기고 로그아웃 버튼만 남긴다 */
-  .topnav-user > span {
+  /* 좁은 화면에선 이름·역할 배지를 숨기고 버튼(🔑·로그아웃)만 남긴다.
+     내가 누구인지는 대시보드 인사말에 이미 나오므로, 좁은 화면에선 중복이다. */
+  .topnav-name,
+  .topnav-user > .badge {
     display: none;
   }