feat: region modal

src/pages/home/HomePage.vue

@@ -2,7 +2,7 @@
   <nav-bar show-logo show-setting />
   <div class='px-4'>
     <div class='flex justify-between my-3'>
-      <region-button :count='0' @click='onClickRegion' />
+      <region-button :count='filterCount' @click='onClickRegion' />
       <button @click='changeSort'>{{ sortTextRef }}</button>
     </div>
     <popup-list :popup-list='data' @click='onClick' />
@@ -23,6 +23,8 @@ const router = useRouter()
 const data = getPopupList()
 
 const isModalOpen = ref(false)
+const filter = ref<string[]>([])
+const filterCount = computed(() => filter.value.length)
 const sortRef = ref<'new' | 'end'>('new')
 const sortTextRef = computed(() => sortRef.value === 'new' ? '최신 오픈순' : '종료 날짜순')
 

src/pages/home/_components/RegionModal.vue

@@ -8,7 +8,8 @@
         </div>
       </div>
       <div class='bg-grey-5'>
-        <div v-for='region in regions' :key='region' class='h-14 flex justify-center items-center px-6 body-1'>
+        <div v-for='region in regions' :key='region' @click='onClickItem'
+             class='h-14 flex justify-center items-center px-6 body-1'>
           {{ region }}
         </div>
       </div>
@@ -27,6 +28,10 @@ const regions = ['강남구', '서초구', '성동구', '광진구', '마포구'
 
 const emit = defineEmits(['close'])
 
+const onClickItem = (id: number) => {
+  emit('select', id)
+}
+
 const onClose = () => {
   emit('close')
 }