fix. 디자인 가이드 수정

layers/assets/css/components/_layout.css

@@ -16,10 +16,10 @@
 
   /* Title Utility Classes */
   .title-lg {
-    @apply line-clamp-3 text-[24px] font-[700] leading-[34px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:text-[50px] md:leading-[70px];
+    @apply line-clamp-4 text-[24px] font-[700] leading-[34px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-3 md:text-[50px] md:leading-[70px];
   }
   .title-md {
-    @apply line-clamp-2 text-[20px] font-[700] leading-[30px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-1 md:text-[42px] md:leading-[56px];
+    @apply line-clamp-4 text-[20px] font-[700] leading-[30px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-3 md:text-[42px] md:leading-[56px];
   }
   .title-sm {
     @apply line-clamp-2 text-[16px] font-[500] leading-[24px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-1 md:text-[24px] md:leading-[34px];
@@ -29,6 +29,6 @@
 
   /* Description Utility Classes */
   .description-lg {
-    @apply line-clamp-3 text-[15px] font-[400] leading-[24px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:text-[20px] md:leading-[30px];
+    @apply line-clamp-4 text-[15px] font-[400] leading-[24px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-3  md:text-[20px] md:leading-[30px];
   }
 }

layers/components/blocks/slide/Thumbnail.vue

@@ -144,7 +144,7 @@ onBeforeUnmount(() => {
   @apply h-full;
 }
 .thumbnail-carousel.thumbnail-default .thumbnail-splide {
-  @apply absolute bottom-[32px] left-1/2 -translate-x-1/2 md:bottom-[48px] md:px-[72px];
+  @apply absolute bottom-[32px] left-1/2 -translate-x-1/2 max-w-[100%] md:bottom-[48px] md:max-w-[896px] md:px-[72px];
 }
 .thumbnail-carousel.thumbnail-default:deep(.arrow-prev) {
   @apply left-0;

layers/composables/useTemplateRegistry.ts

@@ -6,6 +6,7 @@ import GrGallery02 from '#layers/templates/GrGallery02/index.vue'
 import GrGallery03 from '#layers/templates/GrGallery03/index.vue'
 import GrDetail01 from '#layers/templates/GrDetail01/index.vue'
 import GrDetail02 from '#layers/templates/GrDetail02/index.vue'
+import GrDetail03 from '#layers/templates/GrDetail03/index.vue'
 
 const templateRegistry = {
   GR_VISUAL_01: { component: GrVisual01 },
@@ -17,7 +18,7 @@ const templateRegistry = {
   // GR_BOARD_01: { component: GrBoard01 },
   GR_DETAIL_01: { component: GrDetail01 },
   GR_DETAIL_02: { component: GrDetail02 },
-  // GR_DETAIL_03: { component: GrDetail03 },
+  GR_DETAIL_03: { component: GrDetail03 },
   // GR_CONTENTS_01: { component: GrContents01 },
 } as const
 

layers/templates/GrDetail01/index.vue

@@ -63,7 +63,7 @@ onMounted(() => {
           <WidgetsSubTitle
             v-if="hasComponentGroup(item, 'subTitle')"
             :resources-data="getComponentGroup(item, 'subTitle')"
-            class="title-sm mt-0.5 md:mt-1"
+            class="title-sm mt-0.5 line-clamp-3 md:mt-1 md:line-clamp-2"
           />
           <WidgetsDescription
             v-if="hasComponentGroup(item, 'description')"
@@ -91,7 +91,7 @@ onMounted(() => {
         >
           <span class="item-bullet"></span>
           <span class="item-title">
-            {{ getComponentGroup(item, 'naviTitle')?.display?.text || '' }}
+            {{ getComponentGroup(item, 'pagenaviTitle')?.display?.text || '' }}
           </span>
         </button>
         <div v-if="index !== slideData.length - 1" class="progress-bar">

layers/templates/GrDetail02/index.vue

@@ -31,7 +31,7 @@ const slideData = computed(() => {
           <WidgetsSubTitle
             v-if="hasComponentGroup(item, 'subTitle')"
             :resources-data="getComponentGroup(item, 'subTitle')"
-            class="title-sm mt-0.5 md:mt-1"
+            class="title-sm mt-0.5 line-clamp-3 md:mt-1 md:line-clamp-2"
           />
           <WidgetsDescription
             v-if="hasComponentGroup(item, 'description')"

layers/templates/GrGallery03/index.vue

@@ -23,7 +23,7 @@ const mainTitleData = computed(() =>
 const slideData = computed(() => {
   return ensureMinimumSlideData(props.components)
 })
-const subTitleData = ref(getComponentGroup(slideData?.value[0], 'imgTitle'))
+const imgTitleData = ref(getComponentGroup(slideData?.value[0], 'imgTitle'))
 const descriptionData = ref(
   getComponentGroup(slideData?.value[0], 'description')
 )
@@ -50,7 +50,7 @@ const handleChange = (
   _oldIndex: number,
   _destIndex: number
 ) => {
-  subTitleData.value = getComponentGroup(slideData.value[newIndex], 'imgTitle')
+  imgTitleData.value = getComponentGroup(slideData.value[newIndex], 'imgTitle')
   descriptionData.value = getComponentGroup(
     slideData.value[newIndex],
     'description'
@@ -90,9 +90,9 @@ const handleChange = (
         </SplideSlide>
       </BlocksSlideCenterHighlight>
       <WidgetsSubTitle
-        v-if="subTitleData"
+        v-if="imgTitleData"
-        :resources-data="subTitleData"
+        :resources-data="imgTitleData"
-        class="title-md mt-[32px]"
+        class="title-md mt-[32px] line-clamp-2 md:line-clamp-1"
       />
       <WidgetsDescription
         v-if="descriptionData"