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

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>