53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import { useBreakpoints } from '@vueuse/core'
|
|
import type { PageDataResourceGroup } from '#layers/types/api/pageData'
|
|
|
|
export const BREAKPOINTS = {
|
|
xs: 360,
|
|
sm: 768,
|
|
md: 1024,
|
|
lg: 1440,
|
|
} as const
|
|
|
|
/**
|
|
* useBreakpoints 기반 반응형 브레이크포인트
|
|
*/
|
|
export const useResponsiveBreakpoints = () => {
|
|
const breakpoints = useBreakpoints(BREAKPOINTS)
|
|
const isXs = breakpoints.smaller('sm') // < 768
|
|
const isSm = breakpoints.between('sm', 'md') // 768 <= x < 1024
|
|
const isMd = breakpoints.between('md', 'lg') // 1024 <= x < 1440
|
|
const isLg = breakpoints.greaterOrEqual('lg') // >= 1440
|
|
|
|
const isMobile = breakpoints.smaller('md') // < 1024
|
|
const isDesktop = breakpoints.greaterOrEqual('md') // >= 1024
|
|
|
|
return computed(() => ({
|
|
isXs: isXs.value,
|
|
isSm: isSm.value,
|
|
isMd: isMd.value,
|
|
isLg: isLg.value,
|
|
isMobile: isMobile.value,
|
|
isDesktop: isDesktop.value,
|
|
}))
|
|
}
|
|
|
|
export const useResponsiveSrc = () => {
|
|
const breakpoints = useResponsiveBreakpoints()
|
|
|
|
const getCurrentSrc = (
|
|
resourcesData: PageDataResourceGroup,
|
|
options?: {
|
|
imageType?: 'public' | 'cdn'
|
|
resourcesType?: 'IMG' | 'VID'
|
|
}
|
|
) => {
|
|
const result = getResourceSrc(resourcesData, options?.resourcesType)
|
|
if (!result) return ''
|
|
return breakpoints.value.isMobile
|
|
? formatPathHost(result.mo, { imageType: options?.imageType })
|
|
: formatPathHost(result.pc, { imageType: options?.imageType })
|
|
}
|
|
|
|
return { getCurrentSrc }
|
|
}
|