# GlobalHeader 레이아웃 리팩토링 (Overlay → Flexbox)

> **일시**: 2026-02-12 17:05
> **참석자**: Antigravity (Assistant)
> **안건**: 상세 페이지 상단 네비게이션(로고, 탭, 뒤로가기) 무반응 문제 해결을 위한 헤더 구조 변경

---

## 1. 배경 및 문제점
*   **현상**: 문서 상세 페이지(`docs/[id]`) 진입 시, 상단바의 좌측 영역(InsuWiki 로고, Wiki/My/Daily 탭) 및 서브 네비게이션의 '뒤로가기' 버튼이 클릭되지 않음.
*   **원인 분석**:
    *   현재 `GlobalHeader.tsx`는 검색창을 `absolute left-1/2 -translate-x-1/2`로 중앙 정렬하고 있음.
    *   이 절대 위치 요소가 `w-full max-w-sm` 등으로 설정되어 있으나, 특정 해상도나 컨테이너 상황에서 투명한 영역이 좌측 버튼들 위를 덮고 있는 것('Overlay')으로 추정됨.
    *   `pointer-events-none` 처리가 되어있으나, 내부의 `pointer-events-auto` 요소나 다른 스타킹 컨텍스트 문제로 인해 클릭 이벤트를 차단하고 있음.

## 2. 해결 방안 (Flexbox 구조 도입)
헤더의 레이아웃을 기존 **겹침(Overlay)** 방식에서 **분할(Flexbox)** 방식으로 변경하여, 물리적으로 영역이 겹치지 않도록 격리함.

### 기존 구조 (AS-IS)
```jsx
<div className="flex justify-between">
  <div>좌측 메뉴</div>
  <div className="absolute center">검색창 (잠재적 겹침 발생)</div>
  <div>우측 메뉴</div>
</div>
```

### 변경 구조 (TO-BE)
```jsx
<div className="flex items-center gap-4">
  <div className="flex-1 flex justify-start">좌측 메뉴 (로고, 탭)</div>
  <div className="flex-0 w-full max-w-md">검색창 (중앙 고정, 겹침 없음)</div>
  <div className="flex-1 flex justify-end">우측 메뉴 (프로필)</div>
</div>
```

## 3. 기대 효과
*   **안전성**: 검색창 영역이 물리적으로 좌/우 메뉴와 분리되므로, 어떤 해상도에서도 버튼을 가리는 현상이 원천 차단됨.
*   **반응형**: Flexbox의 `flex-1`을 통해 자연스러운 반응형 동작 구현 가능.

## 4. 수행 계획
1.  `GlobalHeader.tsx` 수정: 절대 위치 스타일 제거 및 3단 Flex 구조 적용.
2.  `layout.tsx` 및 `page.tsx` 영향도 확인 (헤더 높이 등).
3.  상세 페이지에서 클릭 테스트 진행.