feat. GR_BOARD_01 템플릿 제작

layers/composables/useBreakpoints.ts

@@ -1,8 +1,8 @@
-import { useMediaQuery } from '@vueuse/core'
+import { useBreakpoints } from '@vueuse/core'
 import { getDeviceSrc } from '#layers/utils/styleUtil'
 import type { PageDataResourceGroupResPath } from '#layers/types/api/pageData'
 
-const BREAKPOINTS = {
+export const BREAKPOINTS = {
   xs: 360,
   sm: 768,
   md: 1024,
@@ -10,24 +10,16 @@ const BREAKPOINTS = {
 } as const
 
 /**
- * useMediaQuery 기반 반응형 브레이크포인트
+ * useBreakpoints 기반 반응형 브레이크포인트
  */
 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,
-  })
+  const breakpoints = useBreakpoints(BREAKPOINTS)
+  const isXs = breakpoints.smaller('sm') // < 768px
+  const isSm = breakpoints.smaller('md') // < 1024px
+  const isMd = breakpoints.smaller('lg') // < 1440px
+  const isLg = breakpoints.greater('lg') // >= 1440px
+  const isMobile = isXs || isSm
+  const isDesktop = isLg || isMd
 
   return computed(() => ({
     isXs: isXs.value,
@@ -35,7 +27,6 @@ export const useResponsiveBreakpoints = () => {
     isMd: isMd.value,
     isLg: isLg.value,
     isMobile: isMobile.value,
-    isTablet: isTablet.value,
     isDesktop: isDesktop.value,
   }))
 }

layers/composables/useResourcesData.ts

@@ -2,9 +2,18 @@ import type {
   getOperateResourcesDataParams,
   OperateResourcesDataResponse,
   OperateComponents,
+  getCwmsArticleDataParams,
+  CwmsArticleDataResponse,
+  CwmsArticleData,
 } from '#layers/types/api/resourcesData'
 
 export const useResourcesData = () => {
+  /**
+   *
+   * @param params getOperateResourcesDataParams
+   * @returns OperateComponents | null
+   * @description 운영 리소스 데이터 조회
+   */
   const getOperateResourcesData = async (
     params: getOperateResourcesDataParams
   ): Promise<OperateComponents | null> => {
@@ -35,7 +44,60 @@ export const useResourcesData = () => {
     return null
   }
 
+  /**
+   *
+   * @param articleGroupCode 게시판 그룹 코드 (예: 128093)
+   * @param options 옵션 객체
+   * @returns 게시판 글 목록 응답
+   */
+  const getCwmsArticleData = async (
+    articleGroupCode: string,
+    articleGroupSeq: number,
+    params: getCwmsArticleDataParams
+  ): Promise<CwmsArticleData | null> => {
+    const {
+      lang,
+      sortTypeCode,
+      interactionTypeCodes,
+      handleCode,
+      contentYn,
+      summaryYn,
+      headlineTitleYn,
+      translationYn,
+      page,
+      size,
+    } = params
+
+    const config = useRuntimeConfig()
+    const stoveApiBaseUrl = config.public.stoveApiUrl
+    const apiUrl = `${stoveApiBaseUrl}/cwms/v3.0/article_group/${articleGroupCode}/${articleGroupSeq}/article/list`
+
+    const queryParams: Record<string, string | number | boolean> = {
+      lang: lang,
+      sort_type_code: sortTypeCode,
+      interaction_type_code: interactionTypeCodes?.join(','),
+      handle_code: handleCode ? 'Y' : 'N',
+      content_yn: contentYn ? 'Y' : 'N',
+      summary_yn: summaryYn ? 'Y' : 'N',
+      headline_title_yn: headlineTitleYn ? 'Y' : 'N',
+      translation_yn: translationYn ? 'Y' : 'N',
+      page: page,
+      size: size,
+    }
+
+    const response = (await commonFetch('GET', apiUrl, {
+      query: queryParams,
+      loading: true,
+    })) as CwmsArticleDataResponse | null
+
+    if (response?.code === 0 && 'value' in response) {
+      return response.value
+    }
+    return null
+  }
+
   return {
     getOperateResourcesData,
+    getCwmsArticleData,
   }
 }

layers/composables/useTemplateRegistry.ts

@@ -7,7 +7,7 @@ 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 GrBoard01 from '#layers/templates/GrBoard01/index.vue'
 import GrContents01 from '#layers/templates/GrContents01/index.vue'
 
 const templateRegistry = {
@@ -17,7 +17,7 @@ const templateRegistry = {
   GR_GALLERY_01: { component: GrGallery01 },
   GR_GALLERY_02: { component: GrGallery02 },
   GR_GALLERY_03: { component: GrGallery03 },
-  // GR_BOARD_01: { component: GrBoard01 },
+  GR_BOARD_01: { component: GrBoard01 },
   GR_DETAIL_01: { component: GrDetail01 },
   GR_DETAIL_02: { component: GrDetail02 },
   GR_DETAIL_03: { component: GrDetail03 },