59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import { useMediaQuery } from '@vueuse/core'
|
|
import { getDeviceSrc } from '#layers/utils/styleUtil'
|
|
import type { PageDataResourceGroupResPath } from '#layers/types/api/pageData'
|
|
|
|
const BREAKPOINTS = {
|
|
xs: 360,
|
|
sm: 768,
|
|
md: 1024,
|
|
lg: 1440,
|
|
} as const
|
|
|
|
/**
|
|
* useMediaQuery 기반 반응형 브레이크포인트
|
|
*/
|
|
export const useResponsiveBreakpoints = () => {
|
|
const ssrWidth = BREAKPOINTS.xs
|
|
const isXs = useMediaQuery(`(min-width: ${BREAKPOINTS.xs}px)`, { ssrWidth })
|
|
const isSm = useMediaQuery(`(min-width: ${BREAKPOINTS.sm}px)`, { ssrWidth })
|
|
const isMd = useMediaQuery(`(min-width: ${BREAKPOINTS.md}px)`, { ssrWidth })
|
|
const isLg = useMediaQuery(`(min-width: ${BREAKPOINTS.lg}px)`, { ssrWidth })
|
|
const isMobile = useMediaQuery(`(max-width: ${BREAKPOINTS.md - 1}px)`, {
|
|
ssrWidth,
|
|
})
|
|
const isTablet = useMediaQuery(
|
|
`(min-width: ${BREAKPOINTS.sm}px) and (max-width: ${BREAKPOINTS.md - 1}px)`,
|
|
{ ssrWidth }
|
|
)
|
|
const isDesktop = useMediaQuery(`(min-width: ${BREAKPOINTS.md}px)`, {
|
|
ssrWidth,
|
|
})
|
|
|
|
return computed(() => ({
|
|
isXs: isXs.value,
|
|
isSm: isSm.value,
|
|
isMd: isMd.value,
|
|
isLg: isLg.value,
|
|
isMobile: isMobile.value,
|
|
isTablet: isTablet.value,
|
|
isDesktop: isDesktop.value,
|
|
}))
|
|
}
|
|
|
|
export const useResponsiveSrc = () => {
|
|
const breakpoints = useResponsiveBreakpoints()
|
|
|
|
const getCurrentSrc = (
|
|
path: PageDataResourceGroupResPath,
|
|
options?: {
|
|
resourcesType?: 'image' | 'video'
|
|
}
|
|
) => {
|
|
const result = getDeviceSrc(path, options)
|
|
if (!result) return ''
|
|
return breakpoints.value.isMobile ? result.mobileSrc : result.pcSrc
|
|
}
|
|
|
|
return { getCurrentSrc }
|
|
}
|