Merge branch 'feature/20250910-all' into feature/20251001-gil

layers/composables/useAnalytics.ts

@@ -1,9 +1,11 @@
 import * as amplitude from '@amplitude/analytics-browser'
-import type {
-  AnalyticsDetailType,
-} from '../types/AnalyticsType'
 import type { PageDataResourceGroup } from '#layers/types/api/pageData'
-import type { IdentityInfo, ActionInfo, MarketingInfo } from '../types/Stove'
+import type { AnalyticsDetailType } from '#layers/types/AnalyticsType'
+import type {
+  IdentityInfo,
+  ActionInfo,
+  MarketingInfo,
+} from '#layers/types/Stove'
 
 declare const svcLog: any
 declare const twq: any
@@ -63,7 +65,6 @@ export const useAnalyticsLogDataDirect = (
   return logData
 }
 
-
 // target에 {XX1, XX2}와 같은 형태가 포함되어 있을 경우 options.clickItem으로부터 값 추출하여 세팅
 const findValueFromOption = (target: string, { options = {} }: any) => {
   if (target.includes('{') && target.includes('}')) {
@@ -340,5 +341,11 @@ const sendMarketingScript = ({
 }
 
 export default () => {
-  return { sendGA, sendSA, sendLog, sendMarketingScript, useAnalyticsLogDataDirect }
+  return {
+    sendGA,
+    sendSA,
+    sendLog,
+    sendMarketingScript,
+    useAnalyticsLogDataDirect,
+  }
 }

layers/composables/useBreakpoints.ts

@@ -1,3 +1,7 @@
+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,
@@ -6,18 +10,49 @@ const BREAKPOINTS = {
 } as const
 
 /**
- * 확실한 반응형 브레이크포인트 헬퍼 (useWindowSize 기반)
+ * useMediaQuery 기반 반응형 브레이크포인트
  */
-export const useResponsiveBreakpointsReliable = () => {
-  const { width } = useWindowSize()
+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(() => ({
-    xs: width.value >= BREAKPOINTS.xs,
-    sm: width.value >= BREAKPOINTS.sm,
-    md: width.value >= BREAKPOINTS.md,
-    lg: width.value >= BREAKPOINTS.lg,
-    isMobile: width.value < BREAKPOINTS.md,
-    isTablet: width.value >= BREAKPOINTS.sm && width.value < BREAKPOINTS.md,
-    isDesktop: width.value >= BREAKPOINTS.md,
+    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 }
+}

layers/composables/useResourcesData.ts

@@ -14,7 +14,7 @@ export const useResourcesData = () => {
     const stoveApiBaseUrl = config.public.stoveApiUrl
     const apiUrl = `${stoveApiBaseUrl}/pub-comm/v1.0/template/operateResources`
 
-    const queryParams: Record<string, string> = {
+    const queryParams: Record<string, string | number> = {
       page_seq: pageSeq,
       page_ver: pageVer,
       page_ver_tmpl_seq: pageVerTmplSeq,

layers/composables/useTemplateRegistry.ts

@@ -7,6 +7,8 @@ import GrGallery03 from '#layers/templates/GrGallery03/index.vue'
 import GrDetail01 from '#layers/templates/GrDetail01/index.vue'
 import GrDetail02 from '#layers/templates/GrDetail02/index.vue'
 import GrDetail03 from '#layers/templates/GrDetail03/index.vue'
+// import GrBoard01 from '#layers/templates/GrBoard01/index.vue'
+import GrContents01 from '#layers/templates/GrContents01/index.vue'
 
 const templateRegistry = {
   GR_VISUAL_01: { component: GrVisual01 },
@@ -19,7 +21,7 @@ const templateRegistry = {
   GR_DETAIL_01: { component: GrDetail01 },
   GR_DETAIL_02: { component: GrDetail02 },
   GR_DETAIL_03: { component: GrDetail03 },
-  // GR_CONTENTS_01: { component: GrContents01 },
+  GR_CONTENTS_01: { component: GrContents01 },
 } as const
 
 type TemplateKey = keyof typeof templateRegistry