# InsuRo 공지/커뮤니티 — 모바일 탭 버튼 깨짐 수정

## 작업 레벨: Lv.1

## 프로젝트
- InsuRo: `/home/jay/projects/InsuRo`

## 문제
모바일에서 공지/커뮤니티 페이지(Notices.tsx)의 탭 버튼 4개(공지사항, 사용자 후기, Q&A 문의, 추가 기능 요청)가 한 줄에 들어가지 못해 텍스트가 잘림. "사용자 후"로 표시됨.

## 현재 코드
`src/pages/Notices.tsx` (71-87줄):
- 컨테이너: `flex gap-2 overflow-x-auto pb-1`
- 버튼: `whitespace-nowrap px-4 py-2.5`

## 수정 방안 (택1 또는 조합)

### A. 모바일에서 텍스트 축약 (추천)
```tsx
const tabs = [
  { value: "notices", label: "공지사항", mobileLabel: "공지", icon: ... },
  { value: "review", label: "사용자 후기", mobileLabel: "후기", icon: ... },
  { value: "qna", label: "Q&A 문의", mobileLabel: "Q&A", icon: ... },
  { value: "feature-request", label: "추가 기능 요청", mobileLabel: "요청", icon: ... },
];

// 렌더링
<span className="hidden sm:inline">{tab.label}</span>
<span className="sm:hidden">{tab.mobileLabel}</span>
```

### B. 모바일에서 스크롤 가능 + 스크롤 힌트
```tsx
<div className="flex gap-2 overflow-x-auto pb-1 scrollbar-hide -mx-4 px-4">
```
스크롤 가능하게 + 좌우 여유 패딩.

### C. 모바일에서 2줄 그리드
```tsx
<div className="grid grid-cols-2 sm:flex gap-2">
```

## affected_files
- `src/pages/Notices.tsx` (수정 — 탭 레이아웃 모바일 대응)

## 검증 시나리오
1. 모바일(375px)에서 4개 탭 모두 읽을 수 있음 (잘림 없음)
2. 데스크탑에서 기존과 동일하게 표시
3. 탭 클릭 시 정상 전환
4. npm run build 성공