diff --git a/layers/components/blocks/slide/Thumbnail.vue b/layers/components/blocks/slide/Thumbnail.vue
index 43666c1..04c5165 100644
--- a/layers/components/blocks/slide/Thumbnail.vue
+++ b/layers/components/blocks/slide/Thumbnail.vue
@@ -1,10 +1,14 @@
-
+
+import { SplideSlide } from '@splidejs/vue-splide'
+import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
+
+interface Props {
+ components: PageDataTemplateComponents
+ pageVerTmplSeq: string
+}
+
+const props = defineProps()
+
+const slideData = computed(() => {
+ return getComponentContainer(props.components, 'group_sets', {
+ maxLength: 10,
+ })
+})
+const paginationData = computed(() => {
+ return getComponentGroupAry(props.components, 'pagination')
+})
+
+
+
+
+
diff --git a/layers/utils/styleUtil.ts b/layers/utils/styleUtil.ts
index 9e795fa..6228288 100644
--- a/layers/utils/styleUtil.ts
+++ b/layers/utils/styleUtil.ts
@@ -3,7 +3,10 @@
* @description 스타일 처리에 필요한 유틸리티 함수를 제공합니다.
*/
-import type { PageDataResourceGroupResPath } from '#layers/types/api/pageData'
+import type {
+ PageDataResourceGroups,
+ PageDataResourceGroupResPath,
+} from '#layers/types/api/pageData'
/**
* [TODO] 수정 필요
@@ -94,3 +97,45 @@ export const getColorCode = ({
return colorCode
}
}
+
+/**
+ * pagination 활성화, 비활성화 style을 반환합니다.
+ * @param paginationGroups pagination groups 배열
+ * @param options type: 'thumbnail' | 'bullet' (기본값: 'thumbnail')
+ * @returns Record CSS 변수 객체
+ */
+export const getPaginationClass = (
+ paginationGroups?: PageDataResourceGroups,
+ { type }: { type: 'thumbnail' | 'bullet' } = { type: 'bullet' }
+): Record => {
+ // 기본 색상 상수
+ const DEFAULT_ACTIVE = 'var(--primary)'
+ const DEFAULT_DISABLED =
+ type === 'bullet' ? 'rgba(0,0,0,0.5)' : 'rgba(255,255,255,0.1)'
+
+ // Early return: 데이터가 없거나 충분하지 않은 경우
+ if (!paginationGroups || paginationGroups.length < 2) {
+ return {
+ '--pagination-active': DEFAULT_ACTIVE,
+ '--pagination-disabled': DEFAULT_DISABLED,
+ }
+ }
+
+ // 색상 추출 또는 기본값 사용
+ const paginationActive =
+ getColorCode({
+ colorName: paginationGroups[0]?.display?.color_name,
+ colorCode: paginationGroups[0]?.display?.color_code,
+ }) || DEFAULT_ACTIVE
+
+ const paginationDisabled =
+ getColorCode({
+ colorName: paginationGroups[1]?.display?.color_name,
+ colorCode: paginationGroups[1]?.display?.color_code,
+ }) || DEFAULT_DISABLED
+
+ return {
+ '--pagination-active': paginationActive,
+ '--pagination-disabled': paginationDisabled,
+ }
+}