# 네비게이션 바 디자인 Survey 기능 가이드

## 개요

직원 대상 네비게이션 바 디자인 선호도 조사를 위한 UI 기능입니다.
사용자가 A, B, C 등의 버튼을 클릭하면 실시간으로 네비게이션 바 디자인이 변경됩니다.

## 기능 활성화/비활성화

### PortalProperty 설정

DB의 `ptl_property` 테이블에서 `ui.design-survey` 값을 설정합니다.

```sql
-- 활성화
UPDATE ptl_property
SET property_value = 'true'
WHERE property_group_name = 'Portal' AND property_name = 'ui.design-survey';

-- 비활성화
UPDATE ptl_property
SET property_value = 'false'
WHERE property_group_name = 'Portal' AND property_name = 'ui.design-survey';
```

> 최초 페이지 로드 시 속성이 자동 생성됩니다 (기본값: `false`)

---

## 디자인 옵션 추가/수정 방법

### 파일 위치
`src/main/resources/templates/views/fragment/kjbank/header_container.html`

### DESIGN_OPTIONS 배열

디자인 옵션은 JavaScript의 `DESIGN_OPTIONS` 배열에서 관리됩니다:

```javascript
const DESIGN_OPTIONS = [
  {
    id: 'A',           // 고유 식별자 (필수)
    label: 'A (현재)', // 버튼에 표시될 텍스트 (필수)
    isDefault: true,   // 기본 선택 옵션 (선택, 하나만 true)
    styles: {}         // 적용할 CSS 스타일 (필수)
  },
  {
    id: 'B',
    label: 'B',
    styles: {
      '.logo-text': { 'font-size': '18px' },
      '.nav-link': { 'margin': '0 20px' }
    }
  },
  {
    id: 'C',
    label: 'C',
    styles: {
      '.nav-link': { 'margin': '0 20px', 'font-weight': 'bold' }
    }
  }
];
```

### 새 디자인 옵션 추가 예시

```javascript
// D 옵션 추가
{
  id: 'D',
  label: 'D',
  styles: {
    '.logo-text': {
      'font-size': '16px',
      'color': '#333333'
    },
    '.nav-link': {
      'padding': '10px 24px',
      'font-weight': '600'
    }
  }
}
```

### styles 객체 구조

```javascript
styles: {
  'CSS 셀렉터': {
    'CSS 속성': '값',
    'CSS 속성2': '값2'
  },
  '다른 셀렉터': {
    'CSS 속성': '값'
  }
}
```

---

## 자주 사용되는 CSS 셀렉터

| 셀렉터 | 설명 |
|--------|------|
| `.logo-text` | 로고 텍스트 "API Portal" |
| `.nav-link` | 네비게이션 메뉴 링크 |
| `.nav-menu` | 네비게이션 메뉴 컨테이너 |
| `.header-content` | 헤더 콘텐츠 영역 |
| `.global-header` | 전체 헤더 |
| `.logo-wrapper` | 로고 래퍼 (이미지 + 텍스트) |

## 자주 사용되는 CSS 속성

| 속성 | 예시 값 | 설명 |
|------|---------|------|
| `font-size` | `18px`, `1.2rem` | 글자 크기 |
| `font-weight` | `400`, `500`, `600`, `bold` | 글자 두께 |
| `margin` | `0 20px`, `10px 15px` | 바깥 여백 |
| `padding` | `8px 16px` | 안쪽 여백 |
| `color` | `#333333`, `#0049b4` | 글자 색상 |
| `background` | `#ffffff`, `#f5f5f5` | 배경 색상 |
| `gap` | `12px`, `20px` | flex 아이템 간격 |

---

## 사용자 선택 저장

사용자의 디자인 선택은 브라우저의 `localStorage`에 저장됩니다.

- Key: `design-survey-selection`
- Value: 선택한 디자인 ID (예: `A`, `B`, `C`)

```javascript
// 저장된 선택 확인 (개발자 도구 콘솔)
localStorage.getItem('design-survey-selection')

// 선택 초기화
localStorage.removeItem('design-survey-selection')
```

---

## 관련 파일

| 파일 | 역할 |
|------|------|
| `GlobalControllerAdvice.java` | `designSurveyEnabled` ModelAttribute 제공 |
| `header_container.html` | Survey 바 HTML 및 DESIGN_OPTIONS 설정 |
| `_header.scss` | Survey 바 스타일 |

---

## 주의사항

1. **디자인 옵션 ID는 고유해야 합니다** - 중복 ID 사용 시 오동작
2. **isDefault는 하나의 옵션에만 설정** - 여러 개 설정 시 첫 번째만 적용
3. **CSS 속성명은 kebab-case 사용** - `fontSize` (X) → `font-size` (O)
4. **스타일 적용 시 `!important` 자동 추가** - 기존 스타일 덮어씀
5. **Survey 기능 종료 후** - `ui.design-survey`를 `false`로 설정하여 비활성화

---

## 문의

기능 관련 문의는 개발팀에 연락해주세요.