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

src/main/resources/static/css/main.css

@@ -697,18 +697,6 @@ body.design-survey-active .global-header {
   }
 }
 
-body.design-variant-B .logo-text {
-  font-size: 18px !important;
-}
-body.design-variant-B .nav-link {
-  margin: 0 20px !important;
-}
-
-body.design-variant-C .nav-link {
-  margin: 0 20px !important;
-  font-weight: bold !important;
-}
-
 .blind {
   position: absolute;
   width: 1px;

src/main/resources/static/sass/layout/_header.scss

@@ -100,16 +100,8 @@ body.design-survey-active {
   }
 }
 
-// Design Variant B
-body.design-variant-B {
-  .logo-text { font-size: 18px !important; }
-  .nav-link { margin: 0 20px !important; }
-}
-
-// Design Variant C
-body.design-variant-C {
-  .nav-link { margin: 0 20px !important; font-weight: bold !important; }
-}
+// 디자인 변형 스타일은 JavaScript에서 동적으로 적용됩니다.
+// header_container.html의 DESIGN_OPTIONS 참조
 
 // Blind text for screen readers
 .blind {

src/main/resources/templates/views/fragment/kjbank/header_container.html

@@ -7,10 +7,8 @@
   <div th:if="${designSurveyEnabled}" class="design-survey-bar" id="designSurveyBar">
     <div class="survey-container">
       <span class="survey-label">네비게이션 디자인을 선택해주세요:</span>
-      <div class="survey-buttons">
-        <button type="button" class="survey-btn active" data-design="A">A (현재)</button>
-        <button type="button" class="survey-btn" data-design="B">B</button>
-        <button type="button" class="survey-btn" data-design="C">C</button>
+      <div class="survey-buttons" id="surveyButtons">
+        <!-- 버튼은 JavaScript에서 동적으로 생성됩니다 -->
       </div>
     </div>
   </div>
@@ -341,16 +339,68 @@
         }
       });
 
-      // Design Survey
+      // ============================================================
+      // Design Survey Configuration
+      // 새 디자인 옵션 추가: DESIGN_OPTIONS 배열에 항목 추가
+      // 예: { id: 'D', label: 'D', styles: { '.logo-text': { 'font-size': '16px' } } }
+      // ============================================================
+      const DESIGN_OPTIONS = [
+        {
+          id: 'A',
+          label: 'A (현재)',
+          isDefault: true,
+          styles: {} // 기본 스타일 (변경 없음)
+        },
+        {
+          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' }
+          }
+        }
+        // 새 디자인 추가 예시:
+        // {
+        //   id: 'D',
+        //   label: 'D',
+        //   styles: {
+        //     '.logo-text': { 'font-size': '16px', 'color': '#333' },
+        //     '.nav-link': { 'padding': '10px 24px' }
+        //   }
+        // }
+      ];
+
+      // Design Survey Logic
       const surveyBar = document.getElementById('designSurveyBar');
       if (surveyBar) {
         const body = document.body;
-        const surveyButtons = surveyBar.querySelectorAll('.survey-btn');
+        const buttonContainer = document.getElementById('surveyButtons');
         const STORAGE_KEY = 'design-survey-selection';
+        let styleElement = null;
 
         body.classList.add('design-survey-active');
 
-        const savedDesign = localStorage.getItem(STORAGE_KEY) || 'A';
+        // 버튼 동적 생성
+        DESIGN_OPTIONS.forEach(option => {
+          const btn = document.createElement('button');
+          btn.type = 'button';
+          btn.className = 'survey-btn';
+          btn.dataset.design = option.id;
+          btn.textContent = option.label;
+          buttonContainer.appendChild(btn);
+        });
+
+        const surveyButtons = buttonContainer.querySelectorAll('.survey-btn');
+        const defaultOption = DESIGN_OPTIONS.find(o => o.isDefault) || DESIGN_OPTIONS[0];
+        const savedDesign = localStorage.getItem(STORAGE_KEY) || defaultOption.id;
+
         applyDesign(savedDesign);
         surveyButtons.forEach(btn => {
           btn.classList.toggle('active', btn.dataset.design === savedDesign);
@@ -365,9 +415,29 @@
           });
         });
 
-        function applyDesign(design) {
-          body.classList.remove('design-variant-B', 'design-variant-C');
-          if (design !== 'A') body.classList.add('design-variant-' + design);
+        function applyDesign(designId) {
+          // 기존 동적 스타일 제거
+          if (styleElement) {
+            styleElement.remove();
+            styleElement = null;
+          }
+
+          const option = DESIGN_OPTIONS.find(o => o.id === designId);
+          if (!option || Object.keys(option.styles).length === 0) return;
+
+          // 동적 스타일 생성
+          let css = '';
+          for (const [selector, props] of Object.entries(option.styles)) {
+            const propsStr = Object.entries(props)
+              .map(([prop, val]) => `${prop}: ${val} !important`)
+              .join('; ');
+            css += `${selector} { ${propsStr}; }\n`;
+          }
+
+          styleElement = document.createElement('style');
+          styleElement.id = 'design-survey-styles';
+          styleElement.textContent = css;
+          document.head.appendChild(styleElement);
         }
       }
     });