2020.07.14 프론트엔드 메인 페이지 구현 - woowacourse-teams/2020-devbie GitHub Wiki

작성자 : 소니

Vue Style Guide - Multi-word component names

• 컴포넌트 파일 이름은 카멜 케이스를 사용한다. (components/MyComponent)
• 컴포넌트를 template에서 사용할 때는 케밥 케이스로 사용한다 (<my-component></my-component>)

Material Design 적용

https://vuetifyjs.com/en/customization/icons/

<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdiSvg', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4' || 'faSvg'
  },
})

폰트 + 컬러

• 배민 폰트
  • 도현체 (나중에 한나체로 변경 예정)
• 메인 테마 컬러 선정
  • design-seeds 사이트 참고
  • RGB:
    • rgb(232,232,232)
    • rgb(159,208,212)
    • rgb(135, 189, 214)
    • rgb(183, 215, 232)
    • rgb(207, 225, 232)
    • rgb(218, 235, 234)