From e1999e71d952dfe7ec2fd93afdfab00c1f429db7 Mon Sep 17 00:00:00 2001
From: da-in <da-in@wavve.com>
Date: Sun, 7 Jan 2024 16:59:21 +0900
Subject: [PATCH] feat: region modal

---
 src/pages/home/HomePage.vue                | 4 +++-
 src/pages/home/_components/RegionModal.vue | 7 ++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/pages/home/HomePage.vue b/src/pages/home/HomePage.vue
index 0c03071..c6f0ad1 100644
--- a/src/pages/home/HomePage.vue
+++ b/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' ? '최신 오픈순' : '종료 날짜순')
 
diff --git a/src/pages/home/_components/RegionModal.vue b/src/pages/home/_components/RegionModal.vue
index 01a0394..e9ac2f6 100644
--- a/src/pages/home/_components/RegionModal.vue
+++ b/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')
 }