feat. GR_VISUAL_01 컴포넌트 제작

layers/components/widgets/ButtonList.vue

@@ -1,21 +1,32 @@
 <script setup lang="ts">
 import type { PageDataResourceGroup } from '#layers/types/api/pageData'
+import type { ButtonSize } from '#layers/types/components/button'
 
 const props = defineProps<{
   groupsData: PageDataResourceGroup[]
 }>()
+
+const breakpoints = useResponsiveBreakpoints()
+
+const buttonSize = computed<ButtonSize>(() => {
+  return breakpoints.md.value ? 'medium' : 'extra-small'
+})
 </script>
 
 <template>
-  <template v-if="props.groupsData">
+  <div
+    v-if="props.groupsData"
+    class="flex flex-wrap justify-center gap-3 sm:gap-4"
+  >
     <AtomsButton
       v-for="button in props.groupsData"
       :key="button.group_code"
+      :size="buttonSize"
       :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>
-  </template>
+  </div>
 </template>