diff --git a/layers/types/api/pageData.ts b/layers/types/api/pageData.ts
index e5d129b..53a3d94 100644
--- a/layers/types/api/pageData.ts
+++ b/layers/types/api/pageData.ts
@@ -60,25 +60,25 @@ export interface PageDataResourceGroupResPath {
path_pc?: string
}
+export interface PageDataResourceGroupBtnInfo {
+ color_code_btn: string
+ color_name_btn: string
+ color_code_txt: string
+ color_name_txt: string
+ disabled: boolean
+ txt_btn_name: string
+ detail: Record
+}
+
// 리소스 그룹 타입
export interface PageDataResourceGroup {
group_type?: string
group_code?: string
res_path?: PageDataResourceGroupResPath
- btn_info?: {
- color_code_btn: string
- color_code_txt: string
- disabled: boolean
- txt_btn_name: string
- detail: Record
- }
+ btn_info?: PageDataResourceGroupBtnInfo
display?: {
text: string
txt: string
- color_code_btn?: string
- color_name_btn?: string
- color_code_txt?: string
- color_name_txt?: string
color_code?: string
color_name?: string
}
diff --git a/layers/types/components/button.ts b/layers/types/components/button.ts
index be3a92c..6de1956 100644
--- a/layers/types/components/button.ts
+++ b/layers/types/components/button.ts
@@ -1,10 +1,2 @@
-// 버튼 크기 타입
+export type ButtonType = 'internal' | 'external' | 'download' | 'action'
export type ButtonSize = 'large' | 'medium' | 'small' | 'extra-small'
-
-// 버튼 설정 인터페이스
-export interface ButtonConfig {
- padding: string
- height: string
- text: string
- rounded: string
-}
diff --git a/layers/utils/dataUtil.ts b/layers/utils/dataUtil.ts
index 0bc3f65..0179fc1 100644
--- a/layers/utils/dataUtil.ts
+++ b/layers/utils/dataUtil.ts
@@ -1,13 +1,8 @@
import type {
PageDataValue,
- PageDataResourceGroupResPath,
PageDataComponent,
} from '#layers/types/api/pageData'
-// ============================================================================
-// 페이지 데이터 관련 유틸리티
-// ============================================================================
-
/**
* 페이지 데이터를 기반으로 레이아웃 타입을 결정합니다.
* @param pageData 페이지 데이터
@@ -19,10 +14,6 @@ export const getLayoutType = (
return pageData?.page_type === 1 ? 'default' : 'promotion'
}
-// ============================================================================
-// 컴포넌트 데이터 접근 관련 유틸리티
-// ============================================================================
-
/**
* 그룹의 첫 번째 데이터를 반환합니다.
* @param source props.components 또는 group 객체
@@ -72,72 +63,3 @@ export const getComponentGroupAry = (source: any, componentName: string) => {
return source[componentName]?.groups || []
}
-
-// ============================================================================
-// 리소스/이미지 처리 관련 유틸리티
-// ============================================================================
-
-/**
- * 이미지 경로를 완전한 호스트 URL로 변환합니다.
- * @param path 이미지 경로
- * @returns 완전한 이미지 URL
- */
-export const getResolvedHost = (path: string): string => {
- const config = useRuntimeConfig()
- // const isDev = process.env.NODE_ENV === "development";
- // const rootPath = isDev ? "/images" : `${config.public.staticUrl}`;
-
- const rootPath = config.public.staticUrl
-
- return `${rootPath}${path}`
-}
-
-/**
- * 반응형 리소스(이미지/비디오)를 처리하여 PC/모바일 버전을 반환합니다.
- * @param pathArray 리소스 경로 배열
- * @param options 리소스 타입 옵션
- * @returns 반응형 리소스 객체 또는 null
- */
-export const getResponsiveSrc = (
- pathArray: PageDataResourceGroupResPath,
- options: {
- resourcesType?: 'image' | 'bg' | 'video'
- } = {}
-) => {
- const { resourcesType = 'image' } = options
- const pcField = resourcesType === 'video' ? 'path_vid_pc' : 'path_pc'
- const mobileField = resourcesType === 'video' ? 'path_vid_mo' : 'path_mo'
-
- if (!pathArray?.[mobileField]) {
- return null
- }
-
- const resolvedImages = {
- pc: getResolvedHost(pathArray[pcField] || pathArray[mobileField]),
- mobile: getResolvedHost(pathArray[mobileField]),
- }
-
- if (resourcesType === 'bg') {
- return {
- '--pc-bg': `url(${resolvedImages.pc})`,
- '--mobile-bg': `url(${resolvedImages.mobile})`,
- }
- }
-
- return {
- mobileSrc: resolvedImages.mobile,
- pcSrc: resolvedImages.pc,
- }
-}
-
-// ============================================================================
-// 스타일링 관련 유틸리티
-// ============================================================================
-
-/**
- * 반응형 배경 이미지를 위한 CSS 클래스를 반환합니다.
- * @returns 반응형 배경 클래스 배열
- */
-export const getResponsiveClass = () => {
- return ['bg-[image:var(--mobile-bg)]', 'md:bg-[image:var(--pc-bg)]']
-}
diff --git a/layers/utils/styleUtil.ts b/layers/utils/styleUtil.ts
new file mode 100644
index 0000000..ee90ee9
--- /dev/null
+++ b/layers/utils/styleUtil.ts
@@ -0,0 +1,82 @@
+import type { PageDataResourceGroupResPath } from '#layers/types/api/pageData'
+
+/**
+ * 이미지 경로를 완전한 호스트 URL로 변환합니다.
+ * @param path 이미지 경로
+ * @returns 완전한 이미지 URL
+ */
+export const getResolvedHost = (path: string): string => {
+ const config = useRuntimeConfig()
+ // const isDev = process.env.NODE_ENV === "development";
+ // const rootPath = isDev ? "/images" : `${config.public.staticUrl}`;
+
+ const rootPath = config.public.staticUrl
+
+ return `${rootPath}${path}`
+}
+
+/**
+ * 반응형 리소스(이미지/비디오)를 처리하여 PC/모바일 버전을 반환합니다.
+ * @param pathArray 리소스 경로 배열
+ * @param options 리소스 타입 옵션
+ * @returns 반응형 리소스 객체 또는 null
+ */
+export const getResponsiveSrc = (
+ pathArray: PageDataResourceGroupResPath,
+ options: {
+ resourcesType?: 'image' | 'bg' | 'video'
+ } = {}
+) => {
+ const { resourcesType = 'image' } = options
+ const pcField = resourcesType === 'video' ? 'path_vid_pc' : 'path_pc'
+ const mobileField = resourcesType === 'video' ? 'path_vid_mo' : 'path_mo'
+
+ if (!pathArray?.[mobileField]) {
+ return null
+ }
+
+ const resolvedImages = {
+ pc: getResolvedHost(pathArray[pcField] || pathArray[mobileField]),
+ mobile: getResolvedHost(pathArray[mobileField]),
+ }
+
+ if (resourcesType === 'bg') {
+ return {
+ '--pc-bg': `url(${resolvedImages.pc})`,
+ '--mobile-bg': `url(${resolvedImages.mobile})`,
+ }
+ }
+
+ return {
+ mobileSrc: resolvedImages.mobile,
+ pcSrc: resolvedImages.pc,
+ }
+}
+
+/**
+ * 반응형 배경 이미지를 위한 CSS 클래스를 반환합니다.
+ * @returns 반응형 배경 클래스 배열
+ */
+export const getResponsiveClass = () => {
+ return ['bg-[image:var(--mobile-bg)]', 'md:bg-[image:var(--pc-bg)]']
+}
+
+/**
+ * 색상값을 반환합니다.
+ * @param colorName 색상 이름
+ * @param colorCode 색상 코드
+ * @returns 색상 값
+ */
+export const getColorCode = ({
+ colorName,
+ colorCode,
+}: {
+ colorName: string
+ colorCode: string
+}) => {
+ if (colorName) {
+ return `var(--${colorName})`
+ } else if (colorCode) {
+ return colorCode
+ }
+}