Feat: Add home card

src/components/search/SearchBar.vue

@@ -1,10 +1,12 @@
 <script setup>
-import { reactive, ref, watch } from 'vue';
+import { inject, reactive, ref, watch } from 'vue';
 import Select from '../common/Select.vue';
 import { useAttractionStore } from '@/stores/attractionStore';
 import SearchBox from '../common/SearchBox.vue';
 import { getGugun, getSido } from '@/api/area';
 
+const { initSido, clearInitSido } = inject('initSido');
+const { initGugun, clearInitGugun } = inject('initGugun');
 const contentTypeList = reactive([
   { value: 0, name: '전체' },
   { value: 12, name: '관광지' },
@@ -31,11 +33,24 @@ watch(sido, ({ sidoCode }) => {
   }
   getGugun(sidoCode).then(({ data }) => {
     gugunList.value = [{ gugunCode: 0, gugunName: '전체' }, ...data];
+    if (initGugun !== null) {
+      gugun.value = gugunList.value.find((gugun) => gugun.gugunCode === Number(initGugun)) ?? null;
+      clearInitGugun();
+      handleSubmit();
+    }
+    if (initSido !== null) {
+      clearInitSido();
+    }
   });
 });
 
 if (sidoList.value.length === 0) {
-  getSido().then(({ data }) => (sidoList.value = [{ sidoCode: 0, sidoName: '전체' }, ...data]));
+  getSido().then(({ data }) => {
+    sidoList.value = [{ sidoCode: 0, sidoName: '전체' }, ...data];
+    if (initSido !== null) {
+      sido.value = sidoList.value.find((sido) => sido.sidoCode === Number(initSido)) ?? null;
+    }
+  });
 }
 
 function handleSubmit() {

src/router/index.js

@@ -59,14 +59,9 @@ const router = createRouter({
     },
     {
       path: '/search',
+      name: 'search',
       component: () => import('@/views/SearchView.vue'),
-      children: [
+      props: true,
-        {
-          path: '',
-          name: 'search',
-          component: () => import('@/components/common/KakaoMap.vue'),
-        },
-      ],
     },
   ],
 });

src/views/HomeView.vue

@@ -16,7 +16,7 @@ import { RouterLink } from 'vue-router';
       <h1>여행지를 골라보세요</h1>
       <ul class="card-list">
         <li>
-          <RouterLink :to="{ name: 'home' }" class="card">
+          <RouterLink :to="{ name: 'search', query: { sidoCode: 1 } }" class="card">
             <img src="/img/Seoul.jpg" alt="seoul" class="bg" />
             <div class="info">
               <h2>서울</h2>
@@ -24,7 +24,7 @@ import { RouterLink } from 'vue-router';
           </RouterLink>
         </li>
         <li>
-          <RouterLink :to="{ name: 'home' }" class="card">
+          <RouterLink :to="{ name: 'search', query: { sidoCode: 6 } }" class="card">
             <img src="/img/Busan.jpg" alt="busan" class="bg" />
             <div class="info">
               <h2>부산</h2>
@@ -32,7 +32,7 @@ import { RouterLink } from 'vue-router';
           </RouterLink>
         </li>
         <li>
-          <RouterLink :to="{ name: 'home' }" class="card">
+          <RouterLink :to="{ name: 'search', query: { sidoCode: 39 } }" class="card">
             <img src="/img/Jeju.jpg" alt="jeju" class="bg" />
             <div class="info">
               <h2>제주</h2>
@@ -40,7 +40,7 @@ import { RouterLink } from 'vue-router';
           </RouterLink>
         </li>
         <li>
-          <RouterLink :to="{ name: 'home' }" class="card">
+          <RouterLink :to="{ name: 'search', query: { sidoCode: 35, gugunCode: 2 } }" class="card">
             <img src="/img/Gyeongju.jpg" alt="seoul" class="bg" />
             <div class="info">
               <h2>경주</h2>

src/views/SearchView.vue

@@ -3,6 +3,28 @@ import AppHeader from '@/components/AppHeader.vue';
 import ChatBotButton from '@/components/chatbot/ChatBotButton.vue';
 import KakaoMap from '@/components/common/KakaoMap.vue';
 import SideBar from '@/components/search/SideBar.vue';
+import { useRoute, useRouter } from 'vue-router';
+import { provide, ref } from 'vue';
+
+const route = useRoute();
+const router = useRouter();
+const initSido = ref(route.query.sidoCode);
+const initGugun = ref(route.query.gugunCode);
+
+router.replace({ query: {} });
+
+provide('initSido', {
+  initSido: initSido.value,
+  clearInitSido: () => {
+    initSido.value = null;
+  },
+});
+provide('initGugun', {
+  initGugun: initGugun.value,
+  clearInitGugun: () => {
+    initGugun.value = null;
+  },
+});
 </script>
 
 <template>