Vue.js로 웹페이지 리빌드하기 - (5) 메뉴 만들기

Quasar로 웹페이지 만들기.

이번엔 메뉴쪽을 건들어보려고 합니다.

 

앱에서 이렇게 생긴 부분으로, 타이틀 부분의 문구는 수정했지만 문구만 수정한 상태.

이걸 이제 수정 해 볼 생각인데, 어떤 모양새로 수정하려고 하냐면...

 

원래 이런 녀석을, 퀘이사 템플릿에 맞춰서 수정해 넣으려고 합니다.

일단 타이틀은 맞춰서 수정이 되어있고, 

메뉴들만 손을 쓰면 되죠.

 

그럼 이 구조가 어떻게 되어있는지를 알아야합니다. 

 

      <q-list>
        <q-item-label
          header
        >
          {{ $t('menuTitle') }}
        </q-item-label>

        <EssentialLink
          v-for="link in essentialLinks"
          :key="link.title"
          v-bind="link"
        />
      </q-list>
      
      # MainLayout.vue 파일의 일부분

 

저 리스트는 MainLayout.vue의 q-list 태그에서 만들어지고 있습니다.

(상위에 닫고 여는 이벤트 역할을 하는 q-drawer이 있지만 이벤트 효과쪽이니 일단은 무시합니다.) 

이 태그의 하위 엘레멘트들을 살펴보면, 

 

q-item-label

EssentialLink

이렇게 존재하고, 그 중 q-item-label은 태그 이름에서 느껴지듯 해당 메뉴의 타이틀 역할을 합니다. 

전 그냥 여기에 사이트 타이틀을 박았습니다.

header이라는 옵션이 주어져있는데, html 태그에서 div class="" 같이 css 클래스를 지정하는 것을

퀘이사에서는 좀 더 간략한 버전으로 준비해뒀더군요. 

caption, overline, lines 같은 옵션이 추가로 존재하는데, 공식 홈페이지에 자세히 설명되어있습니다.

 

그리고 EssentialLink은 컴포넌트 부분입니다.

그래서,

<script lang="ts">
import EssentialLink from 'components/EssentialLink.vue'

# MainLayout.vue의 일부분

import 되어있는 컴포넌트 파일을 찾아가면, 

<template>
  <q-item
    clickable
    tag="a"
    target="_blank"
    :href="link"
  >
    <q-item-section
      v-if="icon"
      avatar
    >
      <q-icon :name="icon" />
    </q-item-section>

    <q-item-section>
      <q-item-label>{{ title }}</q-item-label>
      <q-item-label caption>
        {{ caption }}
      </q-item-label>
    </q-item-section>
  </q-item>
</template>

# EssentialLink.vue 파일의 일부분

이걸 확인 할 수 있습니다.

MainLayout에서 EssentialLink에서 v-for를 돌렸는데, 이는 이 컴포넌트를 여러번 반복한다는 이야기죠.

즉 EssentialLink.vue는 저 많은 메뉴중 1개를 만들기 위한 템플릿이라 보면 됩니다.

 

이걸 살펴보니, q-item라는게 있는데, 이 태그의 역할은 어떤 태그로 만들지,

그리고 이동할 링크 (혹은 라우터) 정보를 담고 있네요.

공홈을 보니까 vue-router를 대체하는 역할이라고 합니다.

api를 불러올 것이라, 어떻게 써야할지 조금 생각은 해봐야겠지만.. 우선은 그렇다고 합니다.

q-item-selection 태그는 q-item 내부에서 영역을 나눌때 쓰고,

세부적인 사항은 그 안에서 아이콘이 있다면 아이콘을 설정하거나, 메뉴의 이름 같은걸 정하고 있네요.

 

그럼 수정해야 할 것은 대충 보이기 시작했습니다.

그럼 이제 수정을 해보도록 하죠. 

 

 

우선 링크에 들어갈 항목부터 수정합니다.

 

const linksList = [
  {
    title: 'Docs',
    caption: 'quasar.dev',
    icon: 'school',
    link: 'https://quasar.dev'
  },
  {
    title: 'Github',
    caption: 'github.com/quasarframework',
    icon: 'code',
    link: 'https://github.com/quasarframework'
  },
  
  ...

# MainLayout.vue의 일부분

리스트로 선언 되어있는 부분을 손봐줍니다.

우선 icon.

이 아이콘은 퀘이사 홈페이지에 따르면,

Material Icons
Font Awesome
Ionicons
MDI
Eva Icons
Themify Icons
Line Awesome
Bootstrap Icons

이 아이콘들을 기본 제공한다고 합니다.

공식 홈페이지에 사용 방법도 나와 있으니 참고하시면 되겠습니다.

단, quasar.conf.js의 extras에서 사용하고자 하는 툴킷의 주석을 해제하지 않으면 자동 import가 되지않으니,

한번 확인해보심이 좋을 거 같네요.

 

 

 

const linksList = [
  {
    title: '알리미 추가 및 수정',
    caption: '추출 할 계정 정보 등록',
    icon: 'fas fa-info-circle',
    link: ''
  },
  {
    title: '생방송 정보 취득',
    caption: '등록한 계정 정보 기준 트위터 탐색',
    icon: 'fab fa-twitter-square',
    link: ''
  },
  {
    title: '등록 내용 확인',
    caption: '등록한 방송 정보를 확인, 수정, 삭제',
    icon: 'fas fa-book-reader',
    link: ''
  },
  {
    title: '정보 수동 등록',
    caption: '다른 곳에서 공지 된 정보 등록',
    icon: 'fas fa-hand-paper',
    link: ''
  }
];

# MainLayout.vue 의 일부분

화면상의 모습

저는 Font Awesome를 사용했습니다. 

원래는 라우터까지 다 하는 걸 생각했는데, 지금 보니 라우터까지 하려면 다른 화면이 다 완성 되어있어야 가능하다는 걸 깨닫았습니다... 보이는 것 부터 하려다보니 이렇게 되네요.

우선 메뉴의 겉은 완성 되었으니, 화면을 하나하나 만든 후 더미데이터를 보내서 테스트 하는 쪽으로 해야겠습니다.

좀 빠르게 진행 해봐야겠네요.