feat: detail page

src/assets/index.ts

@@ -9,3 +9,6 @@ export { default as reset } from './reset.svg'
 export { default as check } from './check.svg'
 export { default as sort } from './sort.svg'
 export { default as next } from './next.svg'
+export { default as link } from './link.svg'
+export { default as location } from './location.svg'
+export { default as time } from './time.svg'

src/components/division/Division.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="h-[9px] bg-grey-20 w-full"/>
+</template>

src/pages/detail/DetailPage.vue

@@ -1,41 +1,74 @@
 <template>
   <nav-bar />
   <img :src='mock' alt='popup store thumbnail'>
-  <div>
-    <h1>{{ data.title }}</h1>
-    <span>{{ data.startDate }}</span>
-    <span> ~ </span>
-    <span>{{ data.endDate }}</span><br />
-    <span>{{ data.time }}</span><br />
-    <span v-if='data.region'>{{ data.region.join(' ') }}</span>
+  <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>
+    <div class="flex flex-col body-2 gap-2">
+      <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 />
+      </div>
+      <div v-if="data.time" class="row">
+        <img :src="time" class="icon" alt="운영 시간"/>
+        <span>{{ data.time }}</span><br />
+      </div>
+      <div v-if='data.region' class="row">
+        <img :src="location" class="icon" alt="지역"/>
+        <span >서울시 {{ data.region }}</span>
+      </div>
+      <div v-if='data.link' class="row">
+        <img :src="link" class="icon" alt="링크"/>
+        <a :href='url' class="text-link truncate" >{{ data.link }}</a>
+      </div>
+    </div>
   </div>
-  <div>
-    <h2 class='font-bold'>소개</h2>
-    <span>{{ data.description }}</span>
+  <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>
+    <button class="body-2 text-tertiary" @click="toggleShorMore">{{ showMore ? '접기' : '더보기' }}</button>
   </div>
-  <div>
-    <h2 class='font-bold'>위치</h2>
-    <span>{{ data.location }}</span>
-  </div>
-  <div>
-    <h2 class='font-bold'>홈페이지</h2>
-    <a :href='link'>{{ data.link }}</a>
+  <division/>
+  <div class="flex flex-col py-5 px-5 gap-2">
+    <h2 class='sub-1 mb-3'>위치</h2>
+    <span class="body-1">{{ data.location }}</span>
   </div>
 </template>
 <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 } from 'vue'
+import {computed, ref} from 'vue'
+import Division from '../../components/division/Division.vue'
+import {time, calendar, location, link} from '../../assets'
 
 const data = getPopup()
 
-const link = computed(() => {
+const showMore = ref(false)
+
+const toggleShorMore = () => {
+  showMore.value = !showMore.value
+}
+
+const url = computed(() => {
   if (data.link.startsWith('https://')) {
     return data.link
   } else {
     return 'https://' + data.link
   }
 })
 </script>
+<style scoped>
+.icon {
+  width: 22px;
+  height: 22px;
+  margin-right: 8px;
+}
+.row {
+  display: flex;
+}
+</style>

src/requests/getPopup.ts

@@ -3,25 +3,31 @@ export interface PopupDetail {
   title: string,
   startDate?: string,
   endDate?: string,
-  region?: string[]
+  region?: string
   img?: string,
   time: string,
   description: string,
   location: string,
   link: string,
+  category: string,
 }
 
 const mock: PopupDetail = {
   id: 0,
-  title: '빵빵이와 끼꼬의 크리스마스 팝업스토어',
-  startDate: '2024-01-01',
-  endDate: '2024-01-01',
-  region: ['서울시', '성동구'],
+  title: 'TAMBURINS at The Hyundai Seoul ',
+  startDate: '2023-12-14',
+  endDate: '2034-12-27',
+  region: '성동구',
   img: '',
   time: '12:00 ~ 22:00',
-  description: '귀엽고 재밌는 빵빵이 굿즈들과 500평 규모의 초대형 스케일로 구성된 전시 공간, 콜라보 제품까지! 다양한 이야기와 볼거리가 어우러진  어쩌구',
+  description: '탬버린즈(TAMBURINS)가 홀리데이 시즌을 맞아 더현대 서울에서 단독 팝업 스토어를 오픈합니다. \n' +
+      '\n' +
+      '이번 팝업 스토어는 성수 플래그십 스토어를 연상시키는 콘크리트 골조 인테리어를 중심으로 새로운 퍼퓸 컬렉션 8종과 알 모양 ‘더 에그 퍼퓸’ 3종 그리고 쉘 핸드 퍼퓸 3종을 선보입니다.\n' +
+      '\n' +
+      '연말 선물로도 제격인 ‘퍼퓸 캔들’은 펌키니부터 홀리메탈, 레이트어텀 그리고 베이더인더레이크까지 4가지의 다채로운 향으로 만나볼 수 있죠',
   location: '서울시 성동구 성수동2가 273-13, 성수 에스팩토리 D동',
-  link: 'booking.kakao.com/detail/ticketStore/21869',
+  link: 'https://www.instagram.com/p/Cs8UYdivFQ9/?igshid=MTI1ZDU5ODQ3Yw%3D%3D',
+  category: '팝업스토어'
 }
 
 export const getPopup = (): PopupDetail => {

src/style.css

@@ -48,7 +48,7 @@ body {
     line-height: 24px;
 }
 
-.body-1 {
+.body-2 {
     font-weight: 500;
     font-size: 14px;
     line-height: 22px;