fix. 버튼 컴포넌트 링크 적용, 코드 리팩토링

layers/components/widgets/Background.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { getResponsiveClass, getResponsiveSrc } from '#layers/utils/dataUtil'
 import type { PageDataResourceGroup } from '#layers/types/api/pageData'
 
 interface Props {

layers/components/widgets/ButtonList.vue

@@ -1,25 +1,69 @@
 <script setup lang="ts">
-import type { PageDataResourceGroup } from '#layers/types/api/pageData'
+import type {
+  PageDataResourceGroup,
+  PageDataResourceGroupBtnInfo,
+} from '#layers/types/api/pageData'
+import type { ButtonType } from '#layers/types/components/button'
 
-const props = defineProps<{
+interface ButtonListProps {
   resourcesData: PageDataResourceGroup[]
-  buttonType?: string
-}>()
+}
+
+const props = defineProps<ButtonListProps>()
+
+// 상수 정의
+const BUTTON_TYPE_MAP = {
+  URL: {
+    _self: 'internal' as const,
+    _blank: 'external' as const,
+  },
+  DOWNLOAD: 'download' as const,
+} as const
+const DEFAULT_BUTTON_TYPE: ButtonType = 'action'
+
+const getButtonType = (btnInfo: PageDataResourceGroupBtnInfo): ButtonType => {
+  const btnType = btnInfo?.detail?.btn_type
+  const btnTarget = btnInfo?.detail?.action?.link_target
+
+  if (btnType === 'URL' && btnTarget) {
+    return BUTTON_TYPE_MAP.URL[btnTarget] || DEFAULT_BUTTON_TYPE
+  }
+
+  if (btnType === 'DOWNLOAD') {
+    return BUTTON_TYPE_MAP.DOWNLOAD
+  }
+
+  return DEFAULT_BUTTON_TYPE
+}
+
+const getButtonProps = (button: PageDataResourceGroup) => ({
+  type: getButtonType(button.btn_info),
+  target: button.btn_info?.detail?.action?.link_target,
+  href: button.btn_info?.detail?.action?.url,
+  rel: button.btn_info?.detail?.action?.rel,
+  backgroundColor: getColorCode({
+    colorName: button.btn_info?.color_name_btn,
+    colorCode: button.btn_info?.color_code_btn,
+  }),
+  textColor: getColorCode({
+    colorName: button.btn_info?.color_name_txt,
+    colorCode: button.btn_info?.color_code_txt,
+  }),
+  disabled: button.btn_info?.disabled,
+  text: button.btn_info?.txt_btn_name,
+})
 </script>
 
 <template>
   <div
-    v-if="props.resourcesData"
+    v-if="props.resourcesData?.length"
     class="flex flex-wrap justify-center gap-3 md:gap-4"
   >
     <AtomsButton
-      v-for="button in props.resourcesData"
-      :key="button.group_code"
-      :button-type="props.buttonType"
+      v-for="(button, index) in props.resourcesData"
+      :key="`${button.group_code}-${index}`"
+      v-bind="getButtonProps(button)"
       class="size-extra-small md:size-medium"
-      :background-color="button.btn_info?.color_code_btn"
-      :text-color="button.btn_info?.color_code_txt"
-      :disabled="button.btn_info?.disabled"
     >
       {{ button.btn_info?.txt_btn_name }}
     </AtomsButton>