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

fix: [디자인QA] 컨텐츠 영역의 max-width 추가

Browse Source
This commit is contained in:
clkim
2025-11-26 17:50:26 +09:00
parent 97e6ab912a
commit e06ee97764
12 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
layers/assets/css/components/_layout.css
View File

@@ -36,9 +36,9 @@
@apply line-clamp-2 text-[16px] font-[500] tracking-[-0.48px] leading-[24px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:tracking-[-0.72px] md:line-clamp-1 md:text-[24px] md:leading-[34px];
}
.title-sm {
@apply text-[15px] font-[500] leading-[24px] tracking-[-0.45px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:text-[20px] md:leading-[30px] md:tracking-[-0.6px];
@apply line-clamp-4 text-[15px] font-[500] leading-[24px] tracking-[-0.45px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:tracking-[-0.6px] md:line-clamp-3 md:text-[20px] md:leading-[30px];
}
.title-xs {
@apply text-[14px] font-[500] leading-[20px] tracking-[-0.42px] md:text-[18px] md:leading-[26px] md:tracking-[-0.54px];
@apply line-clamp-1 text-[14px] font-[500] leading-[20px] tracking-[-0.42px] md:text-[18px] md:leading-[26px] md:tracking-[-0.54px];
}
}

2
layers/components/blocks/slide/Thumbnail.vue
View File

@@ -173,8 +173,6 @@ onBeforeUnmount(() => {
</template>
<style scoped>
.thumbnail-carousel {
}
.thumbnail-carousel:deep(img) {
@apply w-full h-full object-cover;
}

5
layers/templates/FxPreregist01/index.vue
View File

@@ -371,7 +371,10 @@ const handlePreregistClick = () => {
</template>
<style scoped>
/* destroy되었을 때 (슬라이드 비활성화) 중앙 정렬 */
.content-standard {
@apply max-w-[1024px] mx-auto;
}
.splide:not(.is-active):deep(.splide__list) {
@apply flex justify-center gap-3 md:gap-4;
}

4
layers/templates/GrBoard01/index.vue
View File

@@ -121,7 +121,7 @@ const onArrowClick = (direction, targetIndex) => {
<WidgetsMainTitle
v-if="mainTitleData"
:resources-data="mainTitleData"
class="title-md"
class="title-md max-w-[944px] mx-[20px] sm:mx-[40px]"
/>
<ClientOnly>
<BlocksSlideDefault
@@ -156,7 +156,7 @@ const onArrowClick = (direction, targetIndex) => {
<WidgetsDescription
v-if="descriptionData"
:resources-data="descriptionData"
class="mt-[32px] md:mt-[48px]"
class="max-w-[944px] mt-[32px] mx-[20px] sm:mx-[40px] md:mt-[48px]"
/>
</div>
</section>

6
layers/templates/GrContents01/index.vue
View File

@@ -36,12 +36,12 @@ const buttonListData = computed(() => {
<WidgetsMainTitle
v-if="mainTitleData"
:resources-data="mainTitleData"
class="title-xlg"
class="title-xlg max-w-[944px]"
/>
<WidgetsSubTitle
v-if="subTitleData"
:resources-data="subTitleData"
class="title-sm mt-2"
class="title-sm max-w-[944px] mt-2"
/>
<div v-if="imgListData" class="img-container">
<div v-for="(item, index) in imgListData" :key="index" class="img-item">
@@ -62,7 +62,7 @@ const buttonListData = computed(() => {
<WidgetsDescription
v-if="descriptionData"
:resources-data="descriptionData"
class="mt-8"
class="max-w-[944px] mt-8"
/>
</div>
</section>

6
layers/templates/GrDetail01/index.vue
View File

@@ -62,17 +62,17 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
<WidgetsMainTitle
v-if="hasComponentGroup(item, 'mainTitle')"
:resources-data="getComponentGroup(item, 'mainTitle')"
class="title-lg"
class="title-lg max-w-[944px]"
/>
<WidgetsSubTitle
v-if="hasComponentGroup(item, 'subTitle')"
:resources-data="getComponentGroup(item, 'subTitle')"
class="title-md mt-0.5 line-clamp-3 md:mt-1 md:line-clamp-2"
class="title-md max-w-[944px] mt-0.5 line-clamp-3 md:mt-1 md:line-clamp-2"
/>
<WidgetsDescription
v-if="hasComponentGroup(item, 'description')"
:resources-data="getComponentGroup(item, 'description')"
class="mt-4 md:mt-6"
class="max-w-[944px] mt-4 md:mt-6"
/>
</div>
</SplideSlide>

6
layers/templates/GrDetail02/index.vue
View File

@@ -36,17 +36,17 @@ const paginationData = computed(() => {
<WidgetsMainTitle
v-if="hasComponentGroup(item, 'mainTitle')"
:resources-data="getComponentGroup(item, 'mainTitle')"
class="title-lg"
class="title-lg max-w-[944px]"
/>
<WidgetsSubTitle
v-if="hasComponentGroup(item, 'subTitle')"
:resources-data="getComponentGroup(item, 'subTitle')"
class="title-md mt-0.5 line-clamp-3 md:mt-1 md:line-clamp-2"
class="title-md max-w-[944px] mt-0.5 line-clamp-3 md:mt-1 md:line-clamp-2"
/>
<WidgetsDescription
v-if="hasComponentGroup(item, 'description')"
:resources-data="getComponentGroup(item, 'description')"
class="mt-4 md:mt-6"
class="max-w-[944px] mt-4 md:mt-6"
/>
</div>
</SplideSlide>

10
layers/templates/GrDetail03/index.vue
View File

@@ -59,28 +59,28 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
:resources-data="getComponentGroup(item, 'foreground')"
/>
<div
class="content-standard max-w-[1024px] mx-auto items-start pt-[48px] md:pt-0"
class="content-standard max-w-[335px] mx-auto items-start pt-[48px] md:max-w-[1024px] md:pt-0"
>
<WidgetsSubTitle
v-if="hasComponentGroup(item, 'category')"
:resources-data="getComponentGroup(item, 'category')"
class="title-xs mb-2 line-clamp-1 text-left md:mb-5"
class="title-xs max-w-[540px] mb-2 line-clamp-1 text-left md:mb-5"
/>
<WidgetsMainTitle
v-if="hasComponentGroup(item, 'mainTitle')"
:resources-data="getComponentGroup(item, 'mainTitle')"
class="title-lg line-clamp-1 text-left"
class="title-lg max-w-[540px] line-clamp-1 text-left"
/>
<WidgetsSubTitle
v-if="hasComponentGroup(item, 'subTitle')"
:resources-data="getComponentGroup(item, 'subTitle')"
tag="p"
class="title-md mt-1 line-clamp-1 text-left"
class="title-md max-w-[540px] mt-1 line-clamp-1 text-left"
/>
<WidgetsDescription
v-if="hasComponentGroup(item, 'description')"
:resources-data="getComponentGroup(item, 'description')"
class="mt-2 text-left md:mt-5"
class="max-w-[540px] mt-2 text-left md:mt-5"
/>
<AtomsVideo
v-if="hasComponentGroup(item, 'video')"

4
layers/templates/GrGallery01/index.vue
View File

@@ -125,7 +125,7 @@ const onArrowClick = (direction, targetIndex) => {
<WidgetsMainTitle
v-if="mainTitleData"
:resources-data="mainTitleData"
class="title-md"
class="title-md max-w-[944px]"
/>
<BlocksSlideThumbnail
ref="slideThumbnailRef"
@@ -170,7 +170,7 @@ const onArrowClick = (direction, targetIndex) => {
<style scoped>
.thumbnail-carousel {
@apply w-full max-w-[688px] md:max-w-[944px];
@apply w-full max-w-[944px];
}
.thumbnail-carousel:deep(.main-splide) {
@apply overflow-hidden rounded-lg border border-white/10 shadow-[0_4px_20px_0_rgba(0,0,0,0.5)];

2
layers/templates/GrGallery02/index.vue
View File

@@ -69,7 +69,7 @@ const onArrowClick = (direction, targetIndex) => {
<WidgetsMainTitle
v-if="mainTitleData"
:resources-data="mainTitleData"
class="title-md mx-[20px] sm:mx-[40px]"
class="title-md max-w-[944px] mx-[20px] sm:mx-[40px]"
/>
<BlocksSlideCenterFocus
v-if="slideData"

6
layers/templates/GrGallery03/index.vue
View File

@@ -78,7 +78,7 @@ const onArrowClick = (direction, targetIndex) => {
<WidgetsMainTitle
v-if="mainTitleData"
:resources-data="mainTitleData"
class="title-md mx-[20px] sm:mx-[40px]"
class="title-md max-w-[944px] mx-[20px] sm:mx-[40px]"
/>
<BlocksSlideCenterHighlight
v-if="slideData"
@@ -101,12 +101,12 @@ const onArrowClick = (direction, targetIndex) => {
<WidgetsSubTitle
v-if="imgTitleData"
:resources-data="imgTitleData"
class="title-lg mt-[32px] mx-[20px] line-clamp-2 sm:mx-[40px] md:line-clamp-1"
class="title-lg max-w-[944px] mt-[32px] mx-[20px] line-clamp-2 sm:mx-[40px] md:line-clamp-1"
/>
<WidgetsDescription
v-if="descriptionData"
:resources-data="descriptionData"
class="mt-[8px] mx-[20px] sm:mx-[40px] md:mt-[16px]"
class="max-w-[944px] mt-[8px] mx-[20px] sm:mx-[40px] md:mt-[16px]"
/>
<WidgetsButtonList
v-if="buttonListData"

5
layers/templates/GrVisual03/index.vue
View File

@@ -51,16 +51,17 @@ const onArrowClick = direction => {
<WidgetsSubTitle
v-if="hasComponentGroup(item, 'subTitle')"
:resources-data="getComponentGroup(item, 'subTitle')"
class="title-md"
class="title-md max-w-[944px]"
/>
<WidgetsMainTitle
v-if="hasComponentGroup(item, 'mainTitle')"
:resources-data="getComponentGroup(item, 'mainTitle')"
class="title-xlg"
class="title-xlg max-w-[944px]"
/>
<WidgetsDescription
v-if="hasComponentGroup(item, 'description')"
:resources-data="getComponentGroup(item, 'description')"
class="max-w-[944px]"
/>
<WidgetsButtonList
v-if="hasComponentGroup(item, 'buttonList')"