add rank item event yn

src/pages/rank/_components/Rank.vue

@@ -2,27 +2,29 @@
   <div :class="style({type})">
     <div class="min-w-14">
       <span v-if="item?.rank && item?.rank > 4 ">{{ item?.rank }}</span>
-      <img v-else-if="item?.rank===1" :src="medal1" alt="1st"/>
-      <img v-else-if="item?.rank===2" :src="medal2" alt="1st"/>
-      <img v-else-if="item?.rank===3" :src="medal3" alt="1st"/>
-      <img v-else-if="item?.rank===4" :src="medal4" alt="1st"/>
+      <img v-else-if="item?.rank===1" :src="medal1" alt="1st" />
+      <img v-else-if="item?.rank===2" :src="medal2" alt="1st" />
+      <img v-else-if="item?.rank===3" :src="medal3" alt="1st" />
+      <img v-else-if="item?.rank===4" :src="medal4" alt="1st" />
     </div>
     <span class="flex-1 text-caption-b">{{ item?.nickName }}</span>
     <div class="flex text-body-b">
+      <img v-if="item?.eventYn" class="mr-1" :src="gift" alt="이벤트 참여" />
       <span class="pr-1">{{ item?.score }}</span>
-      <img :src="coinSm" alt="코인"/>
+      <img :src="coinSm" alt="코인" />
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import {computed, PropType} from 'vue'
-import {RankItem} from '../../../requests/fetch/getRank.ts'
-import medal1 from '../../../assets/medal1.svg'
-import medal2 from '../../../assets/medal2.svg'
-import medal3 from '../../../assets/medal3.svg'
-import medal4 from '../../../assets/medal4.svg'
-import coinSm from '../../../assets/coin-sm.svg'
-import {cva} from 'class-variance-authority'
+import { computed, PropType } from 'vue'
+import { RankItem } from '../../../requests/fetch/getRank.ts'
+import medal1 from '@/assets/medal1.svg'
+import medal2 from '@/assets/medal2.svg'
+import medal3 from '@/assets/medal3.svg'
+import medal4 from '@/assets/medal4.svg'
+import coinSm from '@/assets/coin-sm.svg'
+import gift from '@/assets/gift.svg'
+import { cva } from 'class-variance-authority'
 
 const props = defineProps({
   item: {
@@ -45,8 +47,8 @@ const style = cva(
     variants: {
       type: {
         'highlight': 'rounded-lg bg-white mt-1 border-2 pl-2 pr-4',
-        'normal': 'border-b-solid border-b-2 last:border-b-0 border-b-dark-green px-4'
-      }
+        'normal': 'border-b-solid border-b-2 last:border-b-0 border-b-dark-green px-4',
+      },
     },
   })
 </script>

src/requests/fetch/getRank.ts

@@ -1,25 +1,26 @@
-import {zaxios} from '../zaxios.ts'
+import { zaxios } from '../zaxios.ts'
 
 export interface GetRankParams {
-    pageNumber: number,
-    dateTime: number,
+  pageNumber: number
+  dateTime: number
 }
 
 export interface RankItem {
-    nickName: string,
-    score: number,
-    rank: number
+  nickName: string
+  score: number
+  rank: number
+  eventYn: boolean
 }
 
 export interface GetRankResult {
-    nextPageNumber: number
-    rankList: RankItem[],
-    totalCount: number
+  nextPageNumber: number
+  rankList: RankItem[]
+  totalCount: number
 }
 
 export const getRank = async (params: GetRankParams): Promise<GetRankResult> => {
   const response = await zaxios.get('/rank', {
-    params
+    params,
   })
   return response.data
 }