[QUASAR] Typography (routes.js 설정, eslint) / Colors (Sass 변수)

6. Typography

• Style & Identity > Typography

6-1. script 수정

• <script> 내부 내용 삭제하고 setup 문법으로 변경
  • C:\Users\YNJCH\learn-quasar\src\App.vue
  • C:\Users\YNJCH\learn-quasar\src\pages\ErrorNotFound.vue
  • C:\Users\YNJCH\learn-quasar\src\pages\IndexPage.vue

<script setup></script>

• C:\Users\YNJCH\learn-quasar\src\layouts\MainLayout.vue
  • setup 문법으로 변경하면서, 해당하지 않는 소스 이동
  • setup 문법에서는 import 만으로도 사용할 수 있음

<script>
const linksList = [
  {
    title: 'Typography',
    caption: 'quasar.dev',
    icon: 'school',
    link: 'https://quasar.dev',
  },
];
</script>

<script setup>
import { defineComponent, ref } from 'vue';
import EssentialLink from 'components/EssentialLink.vue';

const leftDrawerOpen = ref(false);
const essentialLinks = linksList;
const toggleLeftDrawer = () => (leftDrawerOpen.value = !leftDrawerOpen.value);
</script>

6-2. 새창 열기 변경

• 현재 새창으로 열리는 메뉴를 내부에서 라우터에 의해 렌더링되도록 변경
• link 를 to 속성으로 변경

<script>
const linksList = [
  {
    title: 'Typography',
    caption: 'quasar.dev',
    icon: 'school',
    to: '/typography',
  },
];
</script>

• 이 메뉴 목록은 EssentialLink 로 렌더링되므로 해당 소스 수정 필요
• C:\Users\YNJCH\learn-quasar\src\components\EssentialLink.vue (<EssentialLink 태그를 타고 이동)
• script : setup 문법으로 변경 / link 를 to 속성으로 변경

// asis 코드
<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'EssentialLink',
  props: {
    title: {
      type: String,
      required: true,
    },

    caption: {
      type: String,
      default: '',
    },

    link: {
      type: String,
      default: '#',
    },

    icon: {
      type: String,
      default: '',
    },
  },
});
</script>

// tobe 코드
// setup 문법으로 바뀌면서 defineProps() 사용
<script setup>
defineProps({
  title: {
    type: String,
    required: true,
  },

  caption: {
    type: String,
    default: '',
  },

  link: {
    type: String,
    default: '#',
  },

  icon: {
    type: String,
    default: '',
  },
});
</script>

• 상단 <q-item clickable tag="a" target="_blank" :href="link">
  • 새 창 대신 to 속성 사용되도록 <q-item clickable tag="a" :to="to"> 로 변경

6-3. Typography.vue 생성

• C:\Users\YNJCH\learn-quasar\src\pages\ > Typography.vue 생성
• 확장 프로그램 Vue VSCode Snippets 설치 > vbase-3-setup 입력하여 템플릿 자동완성 되게 함

6-4. 라우터 설정

• C:\Users\YNJCH\learn-quasar\src\router\routes.js
• 기존과 같이 비동기 컴포넌트로 로딩되도록 함
• MainLayout.vue 은 동일하게 사용할 것이므로 children 에 삽입
  • path 는 root 뒤에 typography 임

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/IndexPage.vue') },
      { path: 'typography', component: () => import('pages/Typography.vue') },
    ],
  },

6-5. eslint 설정

• 위의 내용대로 하면 eslint 에서 에러 발생 : eslint vue/multi-word-component-names 검색 가능
  • 컴포넌트명은 여러 개의 단여여야 함

[plugin:quasar:eslint] C:\Users\YNJCH\learn-quasar\src\pages\Typography.vue
  1:1  error  Component name "Typography" should always be multi-word  vue/multi-word-component-names

✖ 1 problem (1 error, 0 warnings)

• 아래와 같이 두 단어로 컴포넌트명 지정하면 에러가 사라짐

<script>
export default {
  name: 'TypographyComp',
};
</script>

• 원활한 실습을 위해 eslint 규칙 제거
  • C:\Users\YNJCH\learn-quasar\.eslintrc.cjs
  • 규칙명 : vue/multi-word-component-names (off 값을 주어 규칙 제거)

  // add your custom rules here
  rules: {
    'prefer-promise-reject-errors': 'off',
    'vue/multi-word-component-names': 'off',
    // allow debugger during development only
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },

6-6. Typography 실습

• 아래와 같이 테스트해볼 수 있음

<template>
  <q-page class="q-pa-xl">
    <section>
      <div class="text-h4 nanumBrush">HEADINGS</div>
      <p class="text-h1">Headline 1</p>
      <p class="text-h6">Headline 6</p>
      <p class="text-subtitle1">Subtitle 1</p>
      <p class="text-subtitle2">Subtitle 2</p>
      <p class="text-body1">
        Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore
        consectetur, neque doloribus, cupiditate numquam dignissimos laborum
        fugiat deleniti? Eum quasi quidem quibusdam.
      </p>
      <p class="text-caption">Caption text</p>
      <p class="text-overline">Overline</p>
    </section>
    <section>
      <div class="text-h4 nanumBrush">CSS HELPER CLASS</div>
      <p class="text-weight-thin text-right">
        Lorem Ipsum is simply dummy text
      </p>
      <p class="text-weight-light text-center">
        Lorem Ipsum is simply dummy text
      </p>
      <p class="text-weight-regular text-strike text-uppercase">
        Lorem Ipsum is simply dummy text
      </p>
    </section>
  </q-page>
</template>

6-7. 글꼴 설정

• https://quasar.dev/style/typography > Default Font > roboto-font 로 설정되어 있는 것 확인
• https://fonts.google.com/ 에서 Google Web Font 사용 가능
  • 폰트의 종류 (Regular 400, Bold 700 등) 선택
  • Get Font > Get embed code > @import 내용 복붙

@import url('https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&family=Nanum+Brush+Script&display=swap')

• 전체 스타일 지정을 위해 C:\Users\YNJCH\learn-quasar\src\css\app.scss 에 아래 내용 작성

@import url('https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&family=Nanum+Brush+Script&display=swap')
.nanumBrush {
    font-family: "Nanum Brush Script", cursive;
}

• 전체 적용 시, 이미 설정된 roboto-font 주석 처리
  • C:\Users\YNJCH\learn-quasar\quasar.config.js : // 'roboto-font',

기타 Style Class

• q-my-md : 상하 여백 (Vertical)
• q-mx-md : 좌우 여백 (Horizontal)
• q-mb-xl : 하단 여백 xlarge

7. Colors

• Style & Identity > Color Palette
• Material Design 참고 : https://m3.material.io/
• Color Palette > Brand Colors 의 색상 확인
  • Primary Color : 애플리케이션에서 자주 사용하는 메인 컬러
  • Secondary Color : 일부를 강조할 때 사용하는 보조 컬러

7-1. 실습용 페이지 생성

• C:\Users\YNJCH\learn-quasar\src\layouts\MainLayout.vue : 메뉴 추가
• C:\Users\YNJCH\learn-quasar\src\pages\Colors.vue : 초기화 (vbase-3-setup 입력하여 템플릿 자동완성)
• C:\Users\YNJCH\learn-quasar\src\router\routes.js : 라우터 설정

7-2. Colors.vue

• 아래와 같이 색상 값을 class 에 추가하여, 배경색 지정

<q-page class="q-pa-xl">
    <section class="q-mb-xl">
      <div class="text-h4 nanumBrush">Brand Colors</div>
      <q-separator class="q-my-md" />
      <div class="bg-primary">Primary</div>
      <div class="bg-secondary">Secondary</div>
      <div class="bg-accent">Accent</div>
      <div class="bg-dark">Dark</div>
      <div class="bg-positive">Positive</div>
      <div class="bg-negative">Negative</div>
      <div class="bg-info">Info</div>
      <div class="bg-warning">Warning</div>
      <q-separator class="q-my-md" />
      <div class="text-h4 nanumBrush">Color List</div>
      <div class="bg-red-6">red-6</div>
      <div class="bg-lime-7">lime-7</div>
      <div class="bg-pink-4">pink-4</div>
      <div class="bg-yellow-8">yellow-8</div>
      <div class="bg-teal-14">teal-14</div>
      <q-separator class="q-my-md" />
      <div class="text-h4 nanumBrush">Text</div>
      <div class="text-primary bg-grey-2">Text Primary</div>
      <div class="text-secondary bg-grey-8">Text Secondary</div>
      <div class="text-red-6 bg-grey-10">Text Red</div>
    </section>
  </q-page>

• .bg-* 클래스에 모두 text-center 를 넣고 싶은 경우, app.scss 에 다음과 같이 입력

[class*='bg-'] {
  text-align: center;
}

• bg-red-6 : 배경색 지정 / text-red-6 : 텍스트 색상 지정
  

7-3. Sass 변수

• Sass 변수($grey-7)로 색상이 정의되어 있어 css 에서 사용할 수 있음

<section class="q-mb-xl">
  <p>Variables</p>
</section>

<style lang="scss" scoped>
p {
  color: $yellow-6;
  background-color: $grey-7;
}
</style>

• C:\Users\YNJCH\learn-quasar\src\css\quasar.variables.scss 에 정의되어 있으며, 변경하여 사용 가능
• Theme Builder 에서 색상 변경 가능
  • 변경 후 export 하여 소스를 복붙함

사용자 지정 스타일

.text-ynjch {
  color: $red-3;
}
.bg-ynjch {
  background: $yellow-3;
}

7-4. 컴포넌트에서 사용

• 컴포넌트에서 스타일을 사용하면 편리
• 버튼 컴포넌트 확인 : https://quasar.dev/vue-components/button
  • QBtn API > Style > Color, Text Color 속성 확인
  • Color : bg-primary 라고 작성하던 것을 primary 라고 작성할 때 동일한 효과
  • Text Color : text-primary 라고 작성하던 것을 primary 라고 작성할 때 동일한 효과
  • 사용자 지정 스타일 값도 동일하게 적용됨

<section class="q-mb-xl">
  <div class="text-h4 nanumBrush">Components</div>
  <q-separator class="q-my-md" />
  <div class="q-pa-md q-gutter-sm">
    <q-btn label="버튼" color="primary" text-color="yellow-7"></q-btn>
    <q-btn label="버튼" color="ynjch" text-color="ynjch"></q-btn>
  </div>
</section>

• 아래와 같이 다양한 클래스 활용 가능

<section class="q-mb-xl">
  <div class="text-h4 nanumBrush">Components</div>
  <q-separator class="q-my-md" />
  <div class="q-pa-md q-gutter-sm">
    <q-btn color="white" text-color="black" label="Standard" />
    <q-btn color="primary" label="Primary" />
    <q-btn color="secondary" label="Secondary" />
    <q-btn color="amber" glossy label="Amber" />
    <q-btn color="brown-5" label="Brown 5" />
    <q-btn color="deep-orange" glossy label="Deep Orange" />
    <q-btn color="purple" label="Purple" />
    <q-btn color="black" label="Black" />
    <q-btn style="background: #ff0080; color: white" label="Fuchsia" />
    <q-btn flat style="color: #ff0080" label="Fuchsia Flat" />
    <q-btn style="background: goldenrod; color: white" label="Goldenrod" />
    <q-btn outline style="color: goldenrod" label="Goldenrod" />
    <q-btn color="grey-4" text-color="purple" glossy unelevated icon="camera_enhance" label="Purple text" />
  </div>
</section>

7-5. 동적 스타일 변경

• 아래와 같이 script 에서 동적 스타일 변경이 가능

import { setCssVar } from 'quasar'

setCssVar('light', '#DDD')
setCssVar('primary', '#33F')

• C:\Users\YNJCH\learn-quasar\quasar.config.js 에서 애플리케이션 시작 시점에 변경할 수 있음

    framework: {
      config: {
        brand: {
          primary: '#881155';
        }
      },

기타 Style Class

• rounded-borders : 둥근 모서리
• q-pa-xs : padding 값 지정
• q-mb-xl : 요소들 간 여백 지정