refactor: 스토브 gnb 테마 적용, 보안강화 로그인 팝업 수정

layers/components/blocks/StoveGnbNew.vue

@@ -13,7 +13,7 @@ onMounted(() => {
   const currentDomain =
     window.location.protocol + '//' + window.location.hostname
   if (typeof window !== 'undefined' && (window as any).StoveGnb) {
-    mountedInstance = (window as any).StoveGnb.mount('#stove-wrap', {
+    const stoveGnbOptions = {
       logArea: currentDomain,
       useLanguageCodeFromPath: true,
       serviceTitle: {
@@ -39,15 +39,18 @@ onMounted(() => {
       },
       mode: {
         theme: {
-          default:
-          designTheme === 1 ? 'light' : 'dark',
-          support: ['dark', 'light'],
+          support: ['light', 'dark'],
+          default: designTheme === 1 ? 'light' : 'dark',
+          // support: designTheme === 1 ? ['light'] : ['dark'],
         },
         mini: true,
         layout: 'wide',
         fixed: false,
-      },
-    })
+      }
+    }
+    mountedInstance = (window as any).StoveGnb.mount('#stove-wrap', stoveGnbOptions)
+
+    console.log("🚀 ~ onMounted ~ stoveGnbOptions:", stoveGnbOptions)
   }
 })
 

layers/components/layouts/Footer.vue

@@ -111,14 +111,14 @@
           class="smilegate"
         >
           <img
-            :src="getImageHost(`/local/template/l9/common/logo_smilegate.png`, { imageType: 'game' })"
+            :src="getImageHost(`/images/common/logo_smilegate.png`, { imageType: 'common' })"
             alt="스마일게이트 로고"
             class="w-auto h-auto"
           />
         </a>
         <a
           v-if="setDevCi.dev_ci_yn"
-          :href="footerData.use_dev_ci_url ? setDevCi.dev_ci_img_path : '#'"
+          :href="footerData.use_dev_ci_url ? footerData.dev_ci_url : '#'"
           target="_blank"
           class="nx3 ml-2.5 md:ml-4"
         >
@@ -190,12 +190,12 @@ const getContentInfoImage = computed((): string[] => {
 
   const contentTypeMap: Record<string, string> = {
     '1': 'Type-sexual',
-    '2': 'Type-fear',
-    '3': 'Type-inapposite',
-    '4': 'Type-drug',
-    '5': 'Type-crime',
-    '6': 'Type-speculation',
-    '7': 'Type-violence'
+    '2': 'Type-violence',
+    '3': 'Type-fear',
+    '4': 'Type-inapposite',
+    '5': 'Type-drug',
+    '6': 'Type-crime',
+    '7': 'Type-speculation',
   }
 
   return contentInfo.map(item => {

layers/composables/useSecure.ts

@@ -1,44 +0,0 @@
-/**
- * [보안 캠페인] 보안 캠페인 - 회원 보안 설정 정보 조회
- */
-export const getSecuritySetting = async (accessToken: string) => {
-  const config = useRuntimeConfig()
-  const stoveApiBaseUrl = config.public.stoveApiUrl
-  const apiBase = `${stoveApiBaseUrl}/auth-secure/v1.0`
-  const headers = {
-    'caller-id': String(config.public.stoveCallerId),
-    Authorization: `Bearer ${accessToken}`,
-    'Content-Type': 'application/json;charset=UTF-8'
-  }
-
-  try {
-    return await commonFetch('GET', `${apiBase}/security/setting`, { headers })
-  } catch (error) {
-    console.error(error)
-    return null
-  }
-}
-
-// 로그인 모달 표시
-const showLoginModal = () => {
-  modalStore.handleOpenConfirm({
-    contentText: '로그인이 필요합니다.',
-    confirmButtonText: '스토브 로그인',
-    modalName: 'modal-login',
-    confirmButtonEvent: () => {
-      csrGoStoveLogin()
-    },
-  })
-}
-
-// 토큰 유효성 체크
-const { validateToken } = useTokenValidation()
-const validateTokenResult = await validateToken(accessTokenSub.value || '')
-
-// 토큰 유효성 체크 실패 시 로그인 모달 표시
-if (!validateTokenResult) {
-  showLoginModal()
-  isProcessing.value = false
-  return
-}
-

layers/composables/useTokenValidation.ts

@@ -26,6 +26,7 @@ export const useTokenValidation = () => {
   const showLoginModal = (alertKey: string) => {
     modalStore.handleOpenConfirm({
       contentText: tm(alertKey),
+      isShowDimmed: true,
       confirmButtonText: tm('Text_StoveLogin'),
       modalName: 'modal-login',
       confirmButtonEvent: () => {

layers/templates/FxSecure01/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { getComponentGroup, getComponentGroupAry } from '#layers/utils/dataUtil'
+import { getComponentGroup } from '#layers/utils/dataUtil'
 import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
 import { getImageHost } from '#layers/utils/styleUtil'
 
@@ -9,12 +9,14 @@ interface Props {
   pageVerTmplSeq: number
 }
 const props = defineProps<Props>()
-const modalStore = useModalStore()
+
+const { handleTokenValidation } = useTokenValidation()
 
 // Configuration
-const runtimeConfig = useRuntimeConfig()
-const dataResourcesUrl = runtimeConfig.public.dataResourcesUrl as string
+const config = useRuntimeConfig()
+const dataResourcesUrl = config.public.dataResourcesUrl as string
 const multilingualFileName = 'test_homepage_brand_secure.json'
+const stoveApiBaseUrl = config.public.stoveApiUrl
 
 // Multilingual
 const resultGetMultilingual = await useGetMultilingual({
@@ -26,23 +28,41 @@ const { tm }: any = useI18n({
   messages: Object(resultGetMultilingual?.value?.multilingual),
 })
 
+const isLogin = ref(false)
+
 const secureSetting = ref({
   otpLoginYn: 'N',
   abroadLoginBlockYn: 'N',
   pcRegisterYn: 'N'
 })
 
-// Functions
+// 회원 보안 설정 설정
 const handleSecureSetting = (url: string) => {
   window.open(url, '_blank')
 }
 
+// 로그인 유효성 체크
+const checkLoginValidation = async () => {
+  const accessToken = useCookie('SUAT')
+  const validateTokenResult = await handleTokenValidation(
+    accessToken.value || ''
+  )
+  isLogin.value = validateTokenResult
+}
+
 // 회원 보안 설정 조회
 const fnGetSecuritySetting = async () => {
+
+  const accessToken = useCookie('SUAT')
+  checkLoginValidation()
+
+  const apiBase = `${stoveApiBaseUrl}/auth-secure/v1.0`
+  const headers = {
+    Authorization: `Bearer ${accessToken.value}`,
+    'Content-Type': 'application/json;charset=UTF-8'
+  }
   try {
-    const accessToken = csrGetAccessToken() ?? ''
-    const result = (await getSecuritySetting(accessToken)) as { code: number; message: string; value: any[] }
-    console.log("🚀 ~ fnGetSecuritySetting ~ result:", result)
+    const result = await commonFetch('GET', `${apiBase}/security/setting`, { headers })
 
     if (result?.code === 0 && Array.isArray(result.value)) {
       const arrSecure = result.value
@@ -53,49 +73,18 @@ const fnGetSecuritySetting = async () => {
         abroadLoginBlockYn: getValue('ABROAD_LOGIN_BLOCK_YN'),
         pcRegisterYn: getValue('PC_REGISTER_YN')
       }
-    } else {
-      secureSetting.value = {
-        otpLoginYn: 'N',
-        abroadLoginBlockYn: 'N',
-        pcRegisterYn: 'N'
-      }
     }
   } catch (e) {
     console.error(e)
-    secureSetting.value = {
-      otpLoginYn: 'N',
-      abroadLoginBlockYn: 'N',
-      pcRegisterYn: 'N'
-    }
   }
 }
-
 // Data
 const backgroundData = computed(() =>
   getComponentGroup(props.components, 'background')
 )
-// const secureCardsData = computed(() =>
-//   getComponentGroup(props.components, 'secureCard')
-// )
 
 // Computed
 const secureCards = computed(() => {
-  // if (secureCardsData.value && secureCardsData.value.length > 0) {
-  //   return secureCardsData.value.map((card, index) => ({
-  //     id: `SECURE_CARD_${index}`,
-  //     title: card?.display?.text || '',
-  //     description: card?.display?.description || '',
-  //     status: card?.display?.status || 'off', // 'on' | 'off'
-  //     benefitTitle: card?.display?.benefitTitle || '',
-  //     benefitDesc: card?.display?.benefitDesc || '',
-  //     benefitIcon: card?.display?.benefitIcon || '',
-  //     buttonText: card?.display?.buttonText || '설정하기',
-  //     buttonDisabled: card?.display?.buttonDisabled || false,
-  //   }))
-  // }
-  // 기본 데이터 (Figma 디자인 기반)
-
-
   return [
     {
       id: 'SECURE_CARD_0',
@@ -132,34 +121,14 @@ const secureCards = computed(() => {
     },
   ]
 })
-console.log("🚀 ~ secureCards:", secureCards)
 // 유의사항 내용 다국어 조회
 const cautionText = computed(() => {
   return tm('Secure_Notice_Content') || []
 })
-const isLogin = () => {
-  const accessToken = csrGetAccessToken() ?? ''
-  return Boolean(accessToken)
-}
 
-  // 로그인 모달 표시
-  const showLoginModal = () => {
-    modalStore.handleOpenConfirm({
-      contentText: '로그인이 필요합니다.',
-      confirmButtonText: '스토브 로그인',
-      modalName: 'modal-login',
-      
-      confirmButtonEvent: () => {
-        csrGoStoveLogin()
-      },
-    })
-  }
-onMounted(async () => {
-  if (!isLogin()) {
-    showLoginModal()
-  } else {
-    await fnGetSecuritySetting()
-  }
+
+onMounted(() => {
+  fnGetSecuritySetting()
 })
 </script>
 
@@ -261,7 +230,7 @@ onMounted(async () => {
                 button-size="size-small md:size-large"
                 background-color="#000000"
                 text-color="#FFFFFF"
-                @click="isLogin() ? handleSecureSetting(card.url): showLoginModal()"
+                @click="isLogin ? handleSecureSetting(card.url) : checkLoginValidation()"
               >
                 <span>{{ tm('Secure_Action_setup') }}</span>
               </AtomsButton>
@@ -300,24 +269,4 @@ onMounted(async () => {
       </div>
     </section>
   </div>
-</template>
-
-<style scoped>
-/* 고정형 페이지 Table Style */
-table {
-  @apply w-full h-auto border-collapse border-spacing-0 table-fixed;
-}
-table th {
-  @apply py-[8px] px-[12px] border border-[#D9D9D9] bg-[#FAFAFA] text-[#1F1F1F] text-[14px] font-bold leading-[24px] tracking-[-0.42px]
-  md:py-[11px] md:px-[20px] md:text-[16px] md:leading-[26px] md:tracking-[-0.48px];
-}
-table td {
-  @apply h-[64px] py-[8px] px-[12px] border border-[#D9D9D9] bg-[#FFFFFF] text-[#666666] text-[14px] font-[400] leading-[24px] tracking-[-0.42px]
-  md:h-[80px] md:py-[14px] md:px-[20px] md:text-[16px] md:leading-[26px] md:tracking-[-0.48px];
-}
-
-/* 플랫폼별 다운로드 Mobile Overflow Visible 처리 */
-.splide :deep(.splide__track) {
-  overflow: visible !important;
-}
-</style>
+</template>