52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import { useBreakpoints } from '@vueuse/core'
|
|
import { getDeviceSrc } from '#layers/utils/styleUtil'
|
|
import type { PageDataResourceGroupResPath } 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 = (
|
|
path: PageDataResourceGroupResPath,
|
|
options?: {
|
|
resourcesType?: 'image' | 'video'
|
|
imageType?: 'game' | 'common'
|
|
}
|
|
) => {
|
|
const result = getDeviceSrc(path, options)
|
|
if (!result) return ''
|
|
return breakpoints.value.isMobile ? result.mobileSrc : result.pcSrc
|
|
}
|
|
|
|
return { getCurrentSrc }
|
|
}
|