Vuetify를 사용하여 디자인을 추가했습니다.

이번 기사는 전회의 기사의 속편으로, Vuetify를 사용해, 디자인을 정돈해 나가고 싶습니다.

이전 기사에서는 GraphQL로 DynamoDB에 저장된 데이터를 실제로 화면에 출력하는 방법을 기재하고 있으므로, 흥미가 있는 분은 꼭 봐 주세요
GraphQL+DynamoDB를 사용하여 화면에 데이터를 출력해 보았다

환경

Pug 사용

Vuetify 구성 요소를 UI에서 사용

코딩 규칙은 Nuxt.js에 따라 StandardJS

Visual Studio Code

현재 상태

방 번호는 sort되어 있지만 디자인이없는 상태

데이터 구조

현재 다음과 같은 데이터 구조입니다.

v-icon을 사용해 보자.

v-icon 구성 요소를 사용하여 원하는 아이콘을 사용해보십시오. 아이콘 목록은 공식 Material Icons 에 페이지에 요약되어 있습니다.

방의 종류에 맞추어 아이콘을 아래와 같이 표시시켜 가려고 생각합니다.
※아이콘의 종류에는 특별히 구애되어 있지 않으므로 양해 바랍니다.


유형
아이콘


single
사람

double
wc

트리플
people

family
홈

실제로 v-icon을 표시해 봅시다.

switch 문을 사용하여 방의 데이터에 맞게 v-icon 이름을 반환합니다 getRoomTypeIcon
methods

getRoomTypeIcon (room) {
      if (room.guestInfo) {
        switch (room.type) {
          case 'single':
            return 'person'
          case 'double':
            return 'wc'
          case 'triple':
            return 'people'
          case 'family':
            return 'home'
        }
      }
      return 'no_meeting_room'
    }

Vue에서 getRoomTypeIcon 메서드를 호출합시다.

home.vue

<template lang="pug">
v-container
   v-layout(
        row
        wrap
      )
        v-flex(
          xs12
          sm6
          md4
          lg4
          v-for="room in rooms"
          :key="room.name"
        )
          v-card.ma-3(
            flat
          )
            v-card-title
              | {{ room.number }}
              v-spacer
              span.mr-1(
               ) {{ room.status }}
            v-card-text(
               style="text-align:center; font-size:24px;"
            )
              v-icon(
                large
              ) {{ getRoomTypeIcon(room) }}
              v-spacer
               span(
                v-if="room.guestInfo"
               ) {{ room.guestInfo.name }}
</template>

아래와 같이 디자인이 바뀝니다. 좋은 느낌이네요.

두 날짜의 차이를 찾습니다.

숙박자의 데이터에는 숙박 개시일( startedAt )과 체크아웃을 하는 날( leavesAt )의 데이터가 있습니다.
며칠 동안 숙박하거나 각 방마다 표시하고 싶습니다.

미리 javascript가 준비해 주는 내장 함수 new Date 객체를 사용해 일수의 차이를 계산해 갑니다.

methods

getRoomDate (room) {
      if (room.guestInfo) {
        const day1 = new Date(room.guestInfo.startedAt)
        const day2 = new Date(room.guestInfo.leavesAt)
        const termDay = (day2 - day1) / 8640000 //24 * 60 * 60 * 1000

        return termDay
      } else {
        return 0
      }
    }

termDay 에서 day2 에서 day1 의 차이를 구한 후, 86400000으로 나누고 있는 것은,
Date 객체에서 Date 객체를 빼면 밀리미터 단위로 값이 반환되기 때문입니다.
그 때문에, 값을 1일분의 밀리 세컨드(24시간 x60분 x60초 x1,000밀리초=86,400,000밀리초)인 일수를 구합니다.
※참고: Date 객체 MDN

Vue에서 getRoomDate 메서드를 호출합시다.

home.vue

<template lang="pug">
v-container
  v-layout(
        row
        wrap
      )
        v-flex(
          xs12
          sm6
          md4
          lg4
          v-for="room in rooms"
          :key="room.name"
        )
          v-card.ma-3(
            flat
          )
            v-card-title
              | {{ room.number }}
              v-spacer
              span.mr-1(
               ) {{ room.status }}
            v-card-text(
               style="text-align:center; font-size:24px;"
            )
              v-icon(
                large
              ) {{ getRoomTypeIcon(room) }}
              v-spacer
               span(
                v-if="room.guestInfo"
               ) {{ room.guestInfo.name }}
             v-card-actions
                div.mr-2
                  v-icon.mr-1(
                    small
                  ) event
                  | {{ getRoomDate(room) }} {{ "days" }}

</template>

아래와 같이 디자인이 바뀌었습니다.


vuetify 아이콘을 중심으로 소개했습니다. 최근 도서관이 새롭습니다. 그 밖에도 디자인을 풍부하게 하는 컴퍼넌트가 많이 준비되어 있습니다. 꼭 시험해보세요!