gil/web-temp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/20251201-gil_qa' into feature/202501107-all

Browse Source
This commit is contained in:
“hyeonggkim”
2025-12-02 14:41:35 +09:00
parent cc5f7e3ef4 4e783d2700
commit 8ee1528eb4
1 changed files with 126 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
layers/templates/FxSecure01/index.vue
View File

@@ -23,7 +23,7 @@ const resultGetMultilingual = await useGetMultilingual({
baseApiUrl: dataResourcesUrl,
fileName: multilingualFileName,
})
const { tm }: any = useI18n({
const { tm, locale }: any = useI18n({
useScope: 'local',
messages: Object(resultGetMultilingual?.value?.multilingual),
})
@@ -88,7 +88,7 @@ const backgroundData = computed(() =>
// Computed
const secureCards = computed(() => {
return [
const allCards = [
{
id: 'SECURE_CARD_0',
title: tm('Secure_Stove_otp') || '스토브 인증기 (OTP)',
@@ -112,7 +112,7 @@ const secureCards = computed(() => {
benefitTitle: '',
benefitDesc: '',
benefitIcon: '',
buttonDisabled: true,
buttonDisabled: false,
url: tm('Secure_AbroadLogin_Url'),
},
{
@@ -129,6 +129,12 @@ const secureCards = computed(() => {
url: tm('Secure_PcRegister_Url'),
},
]
// 한국어일 때는 모든 카드 노출, 그 외 언어일 때는 SECURE_CARD_0만 노출
if (locale.value === 'ko') {
return allCards
}
return allCards.filter(card => card.id === 'SECURE_CARD_0')
})
// 유의사항 내용 다국어 조회
const cautionText = computed(() => {
@@ -150,42 +156,65 @@ onMounted(() => {
<div class="section-container static">
<section class="section-secure bg-[#F0F0F0] pb-50">
<div class="section-static content-standa md:max-w-[1300px] mx-auto">
<!-- Title Section -->
<div class="section-static content-standa flex-wrap md:max-w-[1300px] mx-auto">
<!-- Title Section (Non-Korean only) -->
<div
class="flex flex-col md:flex-row w-full md:items-end justify-between gap-5 mb-6"
v-if="locale !== 'ko'"
class="flex flex-col md:flex-row md:items-end md:justify-between gap-2 md:gap-5 mb-4 md:mb-6"
>
<h3
class="text-[#1F1F1F] text-2xl font-bold leading-8 tracking-[-0.72px]"
class="text-[#1F1F1F] text-[18px] md:text-[24px] font-bold leading-[26px] md:leading-[34px] tracking-[-0.54px] md:tracking-[-0.72px]"
>
{{ tm('Secure_Section_Title') || '보안 서비스' }}
{{ tm('Secure_Page_Title') || 'Security Settings' }}
</h3>
<p
class="text-gray-500 text-[14px] font-[400] leading-[24px] tracking-[-0.42px] text-left md:text-right"
class="text-[#666666] text-[13px] md:text-[14px] font-normal leading-[22px] md:leading-[24px] tracking-[-0.39px] md:tracking-[-0.42px]"
>
{{
tm('Secure_Section_Description') ||
'*OTP / 해외 로그인 차단 / 지정 PC 관리 설정하고, 로드나인 계정을 보다 안전하게 보호하세요.'
}}
*{{ tm('Secure_Global_Desc') || 'Set up the STOVE Authenticator to better protect your account.' }}
</p>
</div>
<!-- Secure Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 w-full gap-3 md:gap-5 mb-6">
<!-- Content Wrapper (Non-Korean: row layout with card and caution) -->
<div
:class="[
'w-full',
locale === 'ko' ? '' : 'flex flex-col md:flex-row gap-5 md:gap-6',
]"
>
<!-- Secure Cards -->
<div
v-for="card in secureCards"
:key="card.id"
class="flex-1 min-h-[308px] md:min-h-[384px] p-[10px] md:p-3 lg:p-4 bg-[#FFFFFF] rounded-2xl flex flex-col gap-3 transition-all duration-300 ease-in-out"
:class="[
locale === 'ko'
? 'grid grid-cols-1 md:grid-cols-3 w-full gap-3 md:gap-5 mb-6'
: 'w-full md:w-auto md:flex-shrink-0',
]"
>
<div
v-for="card in secureCards"
:key="card.id"
:class="[
'bg-[#FFFFFF] rounded-2xl flex flex-col transition-all duration-300 ease-in-out',
locale === 'ko'
? 'flex-1 min-h-[308px] md:min-h-[384px] p-[10px] md:p-3 lg:p-4 gap-3'
: 'w-full md:w-[420px] h-auto md:h-[392px] p-[10px] md:p-4 gap-3',
]"
>
<!-- Card Content -->
<div
class="flex-1 p-[10px] md:p-3 lg:p-4 flex flex-col gap-[8px] md:gap-3 text-left"
:class="[
'flex flex-col text-left',
locale === 'ko'
? 'flex-1 p-[10px] md:p-3 lg:p-4 gap-[8px] md:gap-3'
: 'flex-1 p-[10px] md:p-4 gap-2 md:gap-3',
]"
>
<!-- Badge -->
<div class="inline-flex">
<span
:class="[
'px-1.5 md:px-2 py-0.5 md:py-1 rounded-full text-[12px] md:text-[14px] font-medium leading-5',
locale === 'ko'
? 'px-1.5 md:px-2 py-0.5 md:py-1 rounded-full text-[12px] md:text-[14px] font-medium leading-5'
: 'px-[6px] md:px-2 py-[2px] md:py-1 rounded-full text-[12px] md:text-[14px] font-medium leading-[18px] md:leading-5',
card.status === 'Y'
? 'bg-[#E2EAFF] text-[#3C75FF]'
: 'bg-[#EBEBEB] text-[#999999]',
@@ -201,14 +230,24 @@ onMounted(() => {
<!-- Title -->
<h4
class="text-[#1F1F1F] text-[18px] md:text-[24px] font-bold leading-[26px] md:leading-[34px] tracking-[-0.54px] md:tracking-[-0.72px]"
:class="[
'text-[#1F1F1F] font-bold',
locale === 'ko'
? 'text-[18px] md:text-[24px] leading-[26px] md:leading-[34px] tracking-[-0.54px] md:tracking-[-0.72px]'
: 'text-[18px] md:text-[24px] leading-[26px] md:leading-[34px] tracking-[-0.54px] md:tracking-[-0.72px]',
]"
>
{{ card.title }}
</h4>
<!-- Description -->
<p
class="flex-1 text-[#999999] text-[14px] md:text-base font-[400] leading-[22px] md:leading-[26px] tracking-[-0.42px] md:tracking-[-0.48px]"
:class="[
'flex-1 text-[#999999] font-[400]',
locale === 'ko'
? 'text-[14px] md:text-base leading-[22px] md:leading-[26px] tracking-[-0.42px] md:tracking-[-0.48px]'
: 'text-[14px] md:text-base leading-[24px] md:leading-[26px] tracking-[-0.42px] md:tracking-[-0.48px]',
]"
>
{{ card.description }}
</p>
@@ -217,38 +256,64 @@ onMounted(() => {
<!-- Benefit Section -->
<div
:class="[
'self-stretch p-[10px] md:p-4 rounded-2xl flex flex-col gap-4',
'rounded-2xl flex flex-col',
locale === 'ko'
? 'self-stretch p-[10px] md:p-4 gap-4'
: 'p-[10px] md:p-4 gap-3 md:gap-4',
card.benefitTitle ? 'bg-[#F0F4FF]' : '',
]"
>
<!-- Benefit Info -->
<div
v-if="card.benefitTitle"
class="flex items-center gap-[12px]"
:class="[
'flex items-center',
locale === 'ko' ? 'gap-[12px]' : 'gap-2 md:gap-[12px]',
]"
>
<div
v-if="card.benefitIcon"
class="w-[48px] h-[48px] bg-[#3C75FF] rounded-[8px] flex items-center justify-center"
:class="[
'bg-[#3C75FF] rounded-[8px] flex items-center justify-center',
locale === 'ko'
? 'w-[48px] h-[48px]'
: 'w-[40px] h-[40px] md:w-[48px] md:h-[48px]',
]"
>
<img
:src="
formatPathHost(card.benefitIcon, { imageType: 'common' })
"
:alt="card.benefitTitle"
class="w-[48px] h-[48px] object-contain rounded-2xl"
:class="[
'object-contain rounded-2xl',
locale === 'ko'
? 'w-[48px] h-[48px]'
: 'w-[40px] h-[40px] md:w-[48px] md:h-[48px]',
]"
loading="lazy"
draggable="false"
/>
</div>
<div class="flex-1 flex flex-col text-left">
<div
class="text-[#3C75FF] text-[14px] md:text-[18px] font-bold leading-[22px] md:leading-[26px] tracking-[-0.42px] md:tracking-[-0.54px]"
:class="[
'text-[#3C75FF] font-bold',
locale === 'ko'
? 'text-[14px] md:text-[18px] leading-[22px] md:leading-[26px] tracking-[-0.42px] md:tracking-[-0.54px]'
: 'text-[14px] md:text-[18px] leading-[20px] md:leading-[26px] tracking-[-0.42px] md:tracking-[-0.54px]',
]"
>
{{ card.benefitTitle }}
</div>
<div
v-if="card.benefitDesc"
class="text-[#3C75FF] text-[12px] md:text-[13px] font-[400] leading-[18px] md:leading-[22px] tracking-[-0.325px] opacity-90"
:class="[
'text-[#3C75FF] font-[400] opacity-90',
locale === 'ko'
? 'text-[12px] md:text-[13px] leading-[18px] md:leading-[22px] tracking-[-0.325px]'
: 'text-[12px] md:text-[13px] leading-[18px] md:leading-[22px] tracking-[-0.24px] md:tracking-[-0.325px]',
]"
>
{{ card.benefitDesc }}
</div>
@@ -260,7 +325,7 @@ onMounted(() => {
v-if="card.status === 'N'"
type="external"
button-size="size-small md:size-large"
background-color="#000000"
background-color="#383838"
text-color="#FFFFFF"
@click="
isLogin
@@ -295,15 +360,25 @@ onMounted(() => {
</svg>
</AtomsButton>
</div>
</div>
</div>
</div>
<!-- Caution Section -->
<div
class="self-stretch p-8 bg-[#FAFAFA] rounded-2xl flex flex-col gap-3 text-left"
>
<!-- Caution Section -->
<div
:class="[
'bg-[#FAFAFA] rounded-2xl flex flex-col text-left',
locale === 'ko'
? 'self-stretch p-8 mb-6 gap-3'
: 'w-full md:flex-1 p-5 md:p-8 gap-2 md:gap-3',
]"
>
<h5
class="text-[#333333] text-[20px] font-bold leading-[30px] tracking-[-0.6px]"
:class="[
'text-[#333333] font-bold',
locale === 'ko'
? 'text-[20px] leading-[30px] tracking-[-0.6px]'
: 'text-[16px] md:text-[20px] leading-[24px] md:leading-[30px] tracking-[-0.48px] md:tracking-[-0.6px]',
]"
>
{{ tm('Secure_Notice') }}
</h5>
@@ -312,11 +387,26 @@ onMounted(() => {
v-for="caution in cautionText"
:key="caution"
v-dompurify-html="caution"
class="relative pl-[22px] before:content-[''] before:absolute before:top-[10px] before:left-[9px] before:w-[3px] before:h-[3px] before:rounded-full before:bg-[#999999] text-[#999999] text-[14px] font-[400] leading-[24px] tracking-[-0.42px]"
:class="[
'relative pl-[22px] before:content-[\'\'] before:absolute before:top-[10px] before:left-[9px] before:w-[3px] before:h-[3px] before:rounded-full before:bg-[#999999] text-[#999999] font-[400]',
locale === 'ko'
? 'text-[14px] leading-[24px] tracking-[-0.42px]'
: 'text-[14px] leading-[24px] tracking-[-0.42px]',
]"
></li>
</ul>
</div>
</div>
</div>
</section>
</div>
</template>
<style scoped>
:deep(.btn-base.disabled) {
@apply border-solid border border-[#d3d3d3];
}
:deep(.btn-base.disabled .btn-content) {
@apply opacity-100;
}
</style>