fix. 스토리북 대응 수정

layers/components/atoms/Input.vue

@@ -41,17 +41,14 @@ const onInput = (event: Event) => {
       @input="onInput"
       @keydown="emit('keydown', $event)"
     />
-    <AtomsButton
+    <button
       v-if="props.useClearButton && localValue.length > 0"
-      type="action"
-      size="size-small md:size-medium"
-      background-color="#00000000"
-      text-color="transparent"
-      class="!absolute top-[50%] right-[12px] translate-y-[-50%] flex items-center justify-center w-auto p-0 md:right-[16px]"
+      type="button"
+      class="absolute top-[50%] right-[12px] translate-y-[-50%] flex items-center justify-center w-auto p-0 md:right-[16px]"
       @click="onClickClearButton"
     >
       <AtomsIconsCloseCircleFill :size="16" color="rgba(0,0,0,0.15)" />
-    </AtomsButton>
+    </button>
   </div>
 </template>
 

layers/components/blocks/Pagination.vue

@@ -87,7 +87,7 @@ const handlePagination = (page: number) => {
       >
         <AtomsIconsArrowRightLine
           :size="16"
-          :color="currentPage === firstPage ? '#CCCCCC' : '#333333'"
+          :fill="currentPage === firstPage ? '#CCCCCC' : '#333333'"
           class="rotate-180"
         />
       </button>
@@ -97,21 +97,18 @@ const handlePagination = (page: number) => {
         <li
           class="relative inline-flex items-center justify-center w-[32px] h-[32px]"
         >
-          <AtomsButton
-            type="action"
-            size="size-small"
-            background-color="transparent"
-            text-color="#333333"
+          <button
+            type="button"
             :class="[
-              '!w-full !h-full p-0 rounded-full text-center text-[14px] font-[500] leading-[24px] tracking-[-0.42px]',
+              'w-full h-full p-0 rounded-full text-center text-[14px] font-[500] text-[#333333] leading-[24px] tracking-[-0.42px]',
               page === currentPage
-                ? '!bg-[var(--primary)] !text-white cursor-default'
+                ? 'bg-[var(--primary)] text-white cursor-default'
                 : '',
             ]"
             @click="handlePagination(page)"
           >
             <span>{{ page }}</span>
-          </AtomsButton>
+          </button>
         </li>
       </template>
     </ol>
@@ -124,7 +121,7 @@ const handlePagination = (page: number) => {
       >
         <AtomsIconsArrowRightLine
           :size="16"
-          :color="currentPage === lastPage ? '#CCCCCC' : '#333333'"
+          :fill="currentPage === lastPage ? '#CCCCCC' : '#333333'"
         />
       </button>
       <button

layers/components/widgets/slide/Default.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Splide, SplideTrack } from '@splidejs/vue-splide'
+import { getPaginationClass } from '#layers/utils/styleUtil'
 import type { Splide as SplideType, ResponsiveOptions } from '@splidejs/splide'
 import type { PageDataResourceGroups } from '#layers/types/api/pageData'
 

layers/components/widgets/slide/Thumbnail.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { Splide, SplideTrack, SplideSlide } from '@splidejs/vue-splide'
+import { BREAKPOINTS } from '#layers/composables/useBreakpoints'
+import { getPaginationClass } from '#layers/utils/styleUtil'
 import type { Splide as SplideType, Options } from '@splidejs/splide'
 import type {
   PageDataResourceGroups,
@@ -176,7 +178,7 @@ onBeforeUnmount(() => {
           <AtomsImg
             :src="getThumbnailSrc(item)"
             alt="thumbnail image"
-            class="slide-image"
+            class="slide-thumbnail"
           />
         </SplideSlide>
       </SplideTrack>
@@ -189,6 +191,7 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
+.thumbnail-carousel:deep(picture),
 .thumbnail-carousel:deep(img) {
   @apply w-full h-full object-cover;
 }
@@ -213,14 +216,11 @@ onBeforeUnmount(() => {
 .thumbnail-slide.is-active::after {
   @apply border-[var(--pagination-active)];
 }
-.thumbnail-slide:hover picture,
-.thumbnail-slide:hover img,
-.thumbnail-slide.is-active picture,
-.thumbnail-slide.is-active img {
+.thumbnail-slide:hover .slide-thumbnail,
+.thumbnail-slide.is-active .slide-thumbnail {
   @apply opacity-100;
 }
-.thumbnail-slide picture,
-.thumbnail-slide img {
+.slide-thumbnail {
   @apply opacity-50 transition-opacity duration-200 ease-in-out;
 }
 
@@ -243,11 +243,13 @@ onBeforeUnmount(() => {
   @apply aspect-[1/1] w-[8px] md:w-[80px] backdrop-blur-[15px]
   after:hidden md:after:block;
 }
-.thumbnail-carousel.thumbnail-default .thumbnail-slide:hover picture,
-.thumbnail-carousel.thumbnail-default .thumbnail-slide.is-active picture {
+.thumbnail-carousel.thumbnail-default .thumbnail-slide:hover .slide-thumbnail,
+.thumbnail-carousel.thumbnail-default
+  .thumbnail-slide.is-active
+  .slide-thumbnail {
   @apply md:grayscale-0;
 }
-.thumbnail-carousel.thumbnail-default .thumbnail-slide picture {
+.thumbnail-carousel.thumbnail-default .thumbnail-slide .slide-thumbnail {
   @apply hidden md:block md:grayscale;
 }
 

layers/templates/GrVisual02/index.vue

@@ -3,6 +3,7 @@ import { SplideSlide } from '@splidejs/vue-splide'
 import { globalDateFormat } from '@seed-next/date'
 import {
   getComponentGroup,
+  getComponentGroupAry,
   getComponentContainer,
 } from '#layers/utils/dataUtil'
 

layers/types/api/pageData.ts

@@ -79,8 +79,10 @@ export type PageDataResourceGroupType =
   | 'IMG'
 
 export interface PageDataResourceGroupResPath {
-  path_mo: string
+  path_mo?: string
   path_pc?: string
+  path_vid_mo?: string
+  path_vid_pc?: string
 }
 
 export interface PageDataResourceGroupBtnInfo extends ColorObject {
@@ -118,7 +120,8 @@ export type PageDataTemplateComponent = Record<
 >
 
 // 그룹 세트 아이템 타입
-export type PageDataTemplateComponentSet = PageDataTemplateComponent & {
+export interface PageDataTemplateComponentSet
+  extends Record<string, PageDataResourceContainer | number> {
   set_order?: number
 }