Merge branch 'feature/20251126_jo_bugfix' into 'feature/202501107-all'

feat: 디자인QA 개선 및 버그 수정

See merge request sgp-web-d/web-template-fe!10
This commit is contained in:
김채린
2025-11-26 06:00:33 +00:00
3 changed files with 83 additions and 53 deletions

View File

@@ -626,7 +626,7 @@ body .date-picker-menu-wrap .dp__calendar_item {
padding: 2px 4px !important;
}
body .date-picker-menu-wrap .dp__cell_inner {
padding: 8px !important;
padding: 0px !important;
border-radius: 100% !important;
outline: none !important;
border: none !important;

View File

@@ -521,10 +521,6 @@ onMounted(async () => {
@click="handleCouponUse"
>
<span>{{ tm('Coupon_Registration') }}</span>
<AtomsIconsCouponFill
:size="breakpoints.isMobile ? 16 : 20"
color="#FFFFFF"
/>
</AtomsButton>
</div>
@@ -804,7 +800,7 @@ onMounted(async () => {
<style scoped>
/* Button Style */
.btn-period {
@apply border border-solid border-[#D9D9D9] rounded-[0] w-auto h-[40px] px-[16px] before:content-none after:content-none
@apply border border-solid border-[#D9D9D9] rounded-[0] w-auto h-[40px] px-[16px] font-[700] before:content-none after:content-none
transition-all duration-300 ease-in-out
hover:z-[4] hover:!bg-[#FFFFFF] hover:border-[#404040] hover:!text-[#1F1F1F];
}

View File

@@ -164,7 +164,7 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
</span>
<h4
class="relative flex justify-left items-center w-full gap-[4px] text-left text-[#1F1F1F] text-[18px] font-bold leading-[26px] tracking-[-0.54px] md:text-[24px] md:leading-[34px] md:tracking-[0.72px]"
class="relative flex justify-left items-center w-full gap-[4px] text-left text-[#1F1F1F] text-[18px] font-bold leading-[26px] tracking-[-0.54px] md:text-[24px] md:leading-[34px] md:tracking-[-0.72px]"
>
<span>{{ tm('Download_Box_PC_Title') }}</span>
@@ -299,10 +299,13 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
<section ref="specPCRef" class="section-static">
<WidgetsFixSubTitle :title="tm('Download_Section_PC_Title')" />
<div
class="relative w-full border border-solid border-[#D9D9D9] rounded-[12px] overflow-hidden md:rounded-[16px]"
>
<table>
<thead>
<tr>
<th class="w-[80px] md:w-[172px]">
<th class="w-[80px] md:w-[172px] !border-l-[0]">
{{ tm('Download_Table_Item') }}
</th>
<th>{{ tm('Download_Table_Min_Spec') }}</th>
@@ -310,16 +313,30 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
</tr>
</thead>
<tbody>
<template v-for="tr in pcSpecList" :key="tr.id">
<template v-for="(tr, trIdx) in pcSpecList" :key="tr.id">
<tr>
<th class="w-[80px] md:w-[172px]">{{ tr.itemText }}</th>
<th
:class="[
'w-[80px] md:w-[172px] !border-l-[0]',
trIdx === pcSpecList.length - 1 ? '!border-b-[0]' : '',
]"
>
{{ tr.itemText }}
</th>
<template v-for="td in tr.itemData" :key="td.display.text">
<td>{{ td.display.text }}</td>
<td
:class="
trIdx === pcSpecList.length - 1 ? '!border-b-[0]' : ''
"
>
{{ td.display.text }}
</td>
</template>
</tr>
</template>
</tbody>
</table>
</div>
<div
v-if="!breakpoints.isMobile"
@@ -420,10 +437,13 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
<section ref="specMobileRef" class="section-static">
<WidgetsFixSubTitle :title="tm('Download_Section_MOBILE_Title')" />
<div
class="relative w-full border border-solid border-[#D9D9D9] rounded-[12px] overflow-hidden md:rounded-[16px]"
>
<table>
<thead>
<tr>
<th rowspan="2" class="w-[80px] md:w-[172px]">
<th rowspan="2" class="w-[80px] md:w-[172px] !border-l-[0]">
{{ tm('Download_Table_Item') }}
</th>
<th colspan="2">{{ tm('Download_Table_Min_Spec') }}</th>
@@ -437,16 +457,30 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
</tr>
</thead>
<tbody>
<template v-for="tr in mobileSpecList" :key="tr.id">
<template v-for="(tr, trIdx) in mobileSpecList" :key="tr.id">
<tr>
<th class="w-[80px] md:w-[172px]">{{ tr.itemText }}</th>
<th
:class="[
'w-[80px] md:w-[172px] !border-l-[0]',
trIdx === mobileSpecList.length - 1 ? '!border-b-[0]' : '',
]"
>
{{ tr.itemText }}
</th>
<template v-for="td in tr.itemData" :key="td.display.text">
<td>{{ td.display.text }}</td>
<td
:class="
trIdx === mobileSpecList.length - 1 ? '!border-b-[0]' : ''
"
>
{{ td.display.text }}
</td>
</template>
</tr>
</template>
</tbody>
</table>
</div>
</section>
</div>
</template>
@@ -457,11 +491,11 @@ 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]
@apply py-[8px] px-[12px] border-l border-b border-solid border-[#D9D9D9] bg-[#FAFAFA] text-center 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]
@apply h-[64px] py-[8px] px-[12px] border-l border-b border-[#D9D9D9] bg-[#FFFFFF] text-center 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];
}