gil/web-temp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix. 미디어쿼리 구간 추가 정의

Browse Source 
Made-with: Cursor
This commit is contained in:
clkim
2026-03-13 10:16:09 +09:00
parent 76b052f698
commit a0e3fa3887
2 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
layers/composables/useBreakpoints.ts
View File

@@ -6,6 +6,7 @@ export const BREAKPOINTS = {
sm: 768, sm: 768,
md: 1024, md: 1024,
lg: 1440, lg: 1440,
xl: 1920,
} as const } as const
/** /**
@@ -13,14 +14,19 @@ export const BREAKPOINTS = {
*/ */
export const useResponsiveBreakpoints = () => { export const useResponsiveBreakpoints = () => {
const breakpoints = useBreakpoints(BREAKPOINTS) const breakpoints = useBreakpoints(BREAKPOINTS)
const isXs = breakpoints.smaller('sm') // < 768 const isXs = breakpoints.smaller('sm') // x < 768
const isSm = breakpoints.between('sm', 'md') // 768 <= x < 1024 const isSm = breakpoints.between('sm', 'md') // 768 <= x < 1024
const isMd = breakpoints.between('md', 'lg') // 1024 <= x < 1440 const isMd = breakpoints.between('md', 'lg') // 1024 <= x < 1440
const isLg = breakpoints.greaterOrEqual('lg') // >= 1440 const isLg = breakpoints.greaterOrEqual('lg') // x >= 1440
const isMobile = breakpoints.smaller('md') // < 1024 const isMobile = breakpoints.smaller('md') // < 1024
const isDesktop = breakpoints.greaterOrEqual('md') // >= 1024 const isDesktop = breakpoints.greaterOrEqual('md') // >= 1024
const isAboveSm = breakpoints.greaterOrEqual('sm') // x >= 768
const isAboveMd = breakpoints.greaterOrEqual('md') // x >= 1024
const isAboveLg = breakpoints.greaterOrEqual('lg') // x >= 1440
const isAboveXl = breakpoints.greaterOrEqual('xl') // x >= 1920
return computed(() => ({ return computed(() => ({
isXs: isXs.value, isXs: isXs.value,
isSm: isSm.value, isSm: isSm.value,
@@ -28,6 +34,10 @@ export const useResponsiveBreakpoints = () => {
isLg: isLg.value, isLg: isLg.value,
isMobile: isMobile.value, isMobile: isMobile.value,
isDesktop: isDesktop.value, isDesktop: isDesktop.value,
isAboveSm: isAboveSm.value,
isAboveMd: isAboveMd.value,
isAboveLg: isAboveLg.value,
isAboveXl: isAboveXl.value,
})) }))
} }

9
tailwind.config.ts
View File

@@ -9,11 +9,12 @@ export default {
theme: { theme: {
extend: { extend: {
screens: { screens: {
xxs: '0px', // 0px ~ 359px xxs: '0px', // 0px+
xs: '360px', // Mobile: 360px ~ 767px xs: '360px', // Mobile: 360px+
sm: '768px', // Tablet: 768px ~ 1023px sm: '768px', // Tablet: 768px+
md: '1024px', // PC: 1024px ~ 1439px md: '1024px', // PC: 1024px+
lg: '1440px', // Large PC: 1440px+ lg: '1440px', // Large PC: 1440px+
xl: '1920px', // Extra Large PC: 1920px+
}, },
colors: { colors: {
'theme-foreground': 'var(--foreground)', 'theme-foreground': 'var(--foreground)',