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

개요

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

기능 활성화/비활성화

PortalProperty 설정

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

-- 활성화
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 배열에서 관리됩니다:

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' }
    }
  }
];

새 디자인 옵션 추가 예시

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

styles 객체 구조

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)

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

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

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

주의사항

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

문의

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

4.0 KiB Raw Blame History