diff --git a/src/main/webapp/WEB-INF/jsp/framework/frameworkIncludeBase.jsp b/src/main/webapp/WEB-INF/jsp/framework/frameworkIncludeBase.jsp
index 89a34e2e..540bea45 100644
--- a/src/main/webapp/WEB-INF/jsp/framework/frameworkIncludeBase.jsp
+++ b/src/main/webapp/WEB-INF/jsp/framework/frameworkIncludeBase.jsp
@@ -20,56 +20,8 @@
 
 
 <script src="${ctx}/resources/3rd-party/sneat/js/helpers.js"></script>
+<script src="${ctx}/resources/3rd-party/sneat/js/config.js"></script>
 
-<script>
-    /**
-     * Config
-     * -------------------------------------------------------------------------------------
-     * ! IMPORTANT: Make sure you clear the browser local storage In order to see the config changes in the template.
-     * ! To clear local storage: (https://www.leadshook.com/help/how-to-clear-local-storage-in-google-chrome-browser/).
-     */
-
-    'use strict';
-
-    // JS global variables
-    let config = {
-        colors: {
-            primary: '#696cff',
-            secondary: '#8592a3',
-            success: '#71dd37',
-            info: '#03c3ec',
-            warning: '#ffab00',
-            danger: '#ff3e1d',
-            dark: '#233446',
-            black: '#000',
-            white: '#fff',
-            cardColor: '#fff',
-            bodyBg: '#f5f5f9',
-            bodyColor: '#697a8d',
-            headingColor: '#566a7f',
-            textMuted: '#a1acb8',
-            borderColor: '#eceef1'
-        },
-        colors_label: {
-            primary: '#666ee81a',
-            secondary: '#8897aa1a',
-            success: '#28d0941a',
-            info: '#1e9ff21a',
-            warning: '#ff91491a',
-            danger: '#ff49611a',
-            dark: '#181c211a'
-        },
-        colors_dark: {
-            cardColor: '#2b2c40',
-            bodyBg: '#232333',
-            bodyColor: '#a3a4cc',
-            headingColor: '#cbcbe2',
-            textMuted: '#7071a4',
-            borderColor: '#444564'
-        },
-        enableMenuLocalStorage: true // Enable menu state with local storage support
-    };
-</script>
 
 <!-- 부트스트랩 -->
 <script src="${ctx}/resources/3rd-party/sneat/js/bootstrap.js"></script>
diff --git a/src/main/webapp/resources/3rd-party/sneat/js/config.js b/src/main/webapp/resources/3rd-party/sneat/js/config.js
new file mode 100644
index 00000000..a5861018
--- /dev/null
+++ b/src/main/webapp/resources/3rd-party/sneat/js/config.js
@@ -0,0 +1,113 @@
+/**
+ * Config
+ * -------------------------------------------------------------------------------------
+ * ! IMPORTANT: Make sure you clear the browser local storage In order to see the config changes in the template.
+ * ! To clear local storage: (https://www.leadshook.com/help/how-to-clear-local-storage-in-google-chrome-browser/).
+ */
+
+'use strict';
+
+// JS global variables
+let config = {
+  colors: {
+    primary: '#696cff',
+    secondary: '#8592a3',
+    success: '#71dd37',
+    info: '#03c3ec',
+    warning: '#ffab00',
+    danger: '#ff3e1d',
+    dark: '#233446',
+    black: '#000',
+    white: '#fff',
+    cardColor: '#fff',
+    bodyBg: '#f5f5f9',
+    bodyColor: '#697a8d',
+    headingColor: '#566a7f',
+    textMuted: '#a1acb8',
+    borderColor: '#eceef1'
+  },
+  colors_label: {
+    primary: '#666ee81a',
+    secondary: '#8897aa1a',
+    success: '#28d0941a',
+    info: '#1e9ff21a',
+    warning: '#ff91491a',
+    danger: '#ff49611a',
+    dark: '#181c211a'
+  },
+  colors_dark: {
+    cardColor: '#2b2c40',
+    bodyBg: '#232333',
+    bodyColor: '#a3a4cc',
+    headingColor: '#cbcbe2',
+    textMuted: '#7071a4',
+    borderColor: '#444564'
+  },
+  enableMenuLocalStorage: true // Enable menu state with local storage support
+};
+
+let assetsPath = document.documentElement.getAttribute('data-assets-path'),
+  templateName = document.documentElement.getAttribute('data-template'),
+  rtlSupport = true; // set true for rtl support (rtl + ltr), false for ltr only.
+
+/**
+ * TemplateCustomizer
+ * ! You must use(include) template-customizer.js to use TemplateCustomizer settings
+ * -----------------------------------------------------------------------------------------------
+ */
+
+// To use more themes, just push it to THEMES object.
+
+/* TemplateCustomizer.THEMES.push({
+  name: 'theme-raspberry',
+  title: 'Raspberry'
+}); */
+
+// To add more languages, just push it to LANGUAGES object.
+/*
+TemplateCustomizer.LANGUAGES.fr = { ... };
+*/
+
+/**
+ * TemplateCustomizer settings
+ * -------------------------------------------------------------------------------------
+ * cssPath: Core CSS file path
+ * themesPath: Theme CSS file path
+ * displayCustomizer: true(Show customizer), false(Hide customizer)
+ * lang: To set default language, Add more langues and set default. Fallback language is 'en'
+ * controls: [ 'rtl','style','layoutType','showDropdownOnHover','layoutNavbarFixed','layoutFooterFixed','themes'] | Show/Hide customizer controls
+ * defaultTheme: 0(Default), 1(Semi Dark), 2(Bordered)
+ * defaultStyle: 'light', 'dark' (Mode)
+ * defaultTextDir: 'ltr', 'rtl' (rtlSupport must be true for rtl mode)
+ * defaultLayoutType: 'static', 'fixed'
+ * defaultMenuCollapsed: true, false
+ * defaultNavbarFixed: true, false
+ * defaultFooterFixed: true, false
+ * defaultShowDropdownOnHover : true, false (for horizontal layout only)
+ */
+
+if (typeof TemplateCustomizer !== 'undefined') {
+  window.templateCustomizer = new TemplateCustomizer({
+    cssPath: assetsPath + 'vendor/css' + (rtlSupport ? '/rtl' : '') + '/',
+    themesPath: assetsPath + 'vendor/css' + (rtlSupport ? '/rtl' : '') + '/',
+    displayCustomizer: true,
+    // lang: 'fr',
+    // defaultTheme: 2,
+    // defaultStyle: 'light',
+    // defaultTextDir: 'ltr',
+    // defaultLayoutType: 'fixed',
+    // defaultMenuCollapsed: true,
+    // defaultNavbarFixed: true,
+    // defaultFooterFixed: false
+    defaultShowDropdownOnHover: true
+    // controls: [
+    //   'rtl',
+    //   'style',
+    //   'layoutType',
+    //   'showDropdownOnHover',
+    //   'layoutNavbarFixed',
+    //   'layoutFooterFixed',
+    //   'themes'
+    // ],
+  });
+}