네비게이션 바 디자인 전환 기능 추가

2026-01-08 13:22:23 +09:00
parent 6e53098ed5
commit 00fc6d6e09
5 changed files with 248 additions and 33 deletions
@@ -0,0 +1,165 @@
+# 네비게이션 바 디자인 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`로 설정하여 비활성화
+
+---
+
+## 문의
+
+기능 관련 문의는 개발팀에 연락해주세요.