add detail api

src/pages/detail/DetailPage.vue

@@ -1,42 +1,42 @@
 <template>
   <nav-bar />
-  <img :src='mock' alt='popup store thumbnail'>
+  <img :src='url' alt='popup store thumbnail'>
   <div class="flex flex-col py-5 px-5 gap-2">
-    <span class="cap-1 text-coral-60">{{data.category}}</span>
-    <h1 class="head-1">{{ data.title }}</h1>
+    <span class="cap-1 text-coral-60">{{data?.category}}</span>
+    <h1 class="head-1">{{ data?.title }}</h1>
     <div class="flex flex-col body-2 gap-2">
-      <div v-if="data.startDate || data.endDate" class="row">
+      <div v-if="data?.startDate || data?.endDate" class="row">
         <img :src="calendar" class="icon" alt="운영 기간" />
-        <span>{{ data.startDate }}</span>
-        <span v-if="data.startDate && data.endDate"> ~ </span>
-        <span>{{ data.endDate }}</span><br />
+        <span>{{ data?.startDate }}</span>
+        <span v-if="data?.startDate && data?.endDate"> ~ </span>
+        <span>{{ data?.endDate }}</span><br />
       </div>
-      <div v-if="data.time" class="row">
+      <div class="row">
         <img :src="time" class="icon" alt="운영 시간"/>
-        <span>{{ data.time }}</span><br />
+        <span>{{ data?.startTime }} ~ {{data?.endTime}}</span><br />
       </div>
-      <div v-if='data.region' class="row">
+      <div class="row">
         <img :src="location" class="icon" alt="지역"/>
-        <span >서울시 {{ data.region }}</span>
+        <span >{{data?.sido}} {{ data?.sigungu }}</span>
       </div>
-      <div v-if='data.link' class="row">
+      <div v-if='data?.urlLink' class="row">
         <img :src="link" class="icon" alt="링크"/>
-        <a :href='url' class="text-link truncate" >{{ data.link }}</a>
+        <a :href='url' class="text-link truncate" >{{ data.urlLink }}</a>
       </div>
     </div>
   </div>
   <division/>
   <div class="flex flex-col items-start py-5 px-5 gap-2">
     <h2 class='sub-1 mb-3'>소개</h2>
-    <span :class="`body-1 whitespace-pre-wrap ${!showMore && 'line-clamp-[9]'}`">{{ data.description }}</span>
+    <span :class="`body-1 whitespace-pre-wrap ${!showMore && 'line-clamp-[9]'}`">{{ data?.introduction }}</span>
     <button class="body-2 text-tertiary" @click="toggleShorMore">{{ showMore ? '접기' : '더보기' }}</button>
   </div>
   <division/>
   <div class="flex flex-col py-5 px-5 gap-2">
     <h2 class='sub-1 mb-3'>위치</h2>
     <span class="body-1 inline-block">
-      {{ data.location }}
-      <img :src="link" />
+      {{data?.sido}} {{ data?.sigungu }}
+      <img :src="link" alt="popup image" />
       <span>
         복사
       </span>
@@ -46,13 +46,19 @@
 <script setup lang='ts'>
 
 import NavBar from '../../components/nav/NavBar.vue'
-import mock from '../../assets/mock.png'
-// import { getPopup } from '../../requests/getPopup.ts'
 import {computed, ref} from 'vue'
 import Division from '../../components/divide-line/DivideLine.vue'
 import {time, calendar, location, link} from '../../assets'
+import {useGetPopup} from '../../requests/use/use-get-popup.ts'
 
-// const data = getPopup()
+const props = defineProps({
+  id: {
+    type: Number,
+    default: 0,
+  },
+})
+
+const {data} = useGetPopup({id: props?.id ?? 0})
 
 const showMore = ref(false)
 
@@ -61,10 +67,10 @@ const toggleShorMore = () => {
 }
 
 const url = computed(() => {
-  if (data.link.startsWith('https://')) {
-    return data.link
+  if (data?.value?.images[0].startsWith('https://')) {
+    return data?.value?.images[0]
   } else {
-    return 'https://' + data.link
+    return 'https://' + data?.value?.images[0]
   }
 })
 </script>

src/requests/fetches/getPopup.ts

@@ -0,0 +1,31 @@
+import {oaxios} from '../axios.ts'
+
+export interface GetPopupParams {
+    id: number
+}
+
+export interface Popup {
+    images: string[],
+    category: string,
+    title: string,
+    startDate: string,
+    endDate: string,
+    startTime: string,
+    endTime: string,
+    urlLink: string,
+    introduction: string,
+    sido: string,
+    sigungu: string,
+    location: Location
+}
+
+export interface Location {
+    address: string,
+    lat: string,
+    lng: string,
+}
+
+export const getPopup = async (params: GetPopupParams) => {
+  const response = await oaxios.get(`/popup/${params.id}`,)
+  return response.data
+}

src/requests/use/use-get-popup.ts

@@ -0,0 +1,13 @@
+import {useQuery, UseQueryReturnType} from '@tanstack/vue-query'
+import {reactive} from 'vue'
+import {getPopup, GetPopupParams, Popup} from '../fetches/getPopup.ts'
+
+export const useGetPopup = (
+  payload: GetPopupParams
+): UseQueryReturnType<Popup | null, unknown> => {
+  const _payload = reactive(payload)
+  return useQuery({
+    queryKey: ['getPopupList', _payload],
+    queryFn: () => getPopup({..._payload})
+  })
+}

src/router/index.ts

@@ -12,6 +12,7 @@ const routes = [
   {
     path: '/detail/:id',
     component: DetailPage,
+    props: true,
   },
   {
     path: '/settings',