5. Vue 화면 디자인

강혜성·2023년 8월 8일
0

사이드 프로젝트

목록 보기
5/12

Layout Application bar

  • Layout Application bar에 Veutify MENU : Activator Slot1, 2 추가 (HelloWorld.vue)

    https://vuetifyjs.com/en/components/menus/

  • Application bar 부분인 사이에 작성
  • Activator Slot에 Items로 Data가 Binding 되어 있으므로, 2개의 Activation Slot 생성을 위해 Data bind Id 변경
<template>
  <v-layout class="rounded rounded-md">
    <v-navigation-drawer color="grey-darken-2" permanent></v-navigation-drawer>
    
    <v-app-bar
      :order="order"
      color="grey-lighten-2"
      flat
      title="Application bar"
    >
      <template v-slot:append>
        <v-switch
          v-model="order"
          hide-details
          inset
          label="Toggle order"
          true-value="-1"
          false-value="0"
        ></v-switch>
      </template>

      <!-- Activator Slot Start -->
      <v-menu>
        <template v-slot:activator="{ props }">
          <v-btn
            color="primary"
            v-bind="props"
          >
            Activator slot
          </v-btn>
        </template>
        <v-list>
          <v-list-item
            v-for="(item, index) in items"
            :key="index"
            :value="index"
          >
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
      <!-- Activator Slot End -->

      <!-- Activator2 Slot Start -->
      <v-menu>
        <template v-slot:activator="{ props }">
          <v-btn
            color="primary"
            v-bind="props"
          >
            Activator2 slot
          </v-btn>
        </template>
        <v-list>
          <v-list-item
            v-for="(item, index) in items2"
            :key="index"
            :value="index"
          >
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
      <!-- Activator2 Slot End -->

    </v-app-bar>

    <v-main class="d-flex align-center justify-center" style="min-height: 500px;">
      Main Content
    </v-main>
  </v-layout>
  
</template>

<script>

export default {
  name: 'HelloWorld',

  data: () => ({
    order: 0,
    items: [
        { title: 'Item1 Click Me 1' },
        { title: 'Item1 Click Me 2' },
        { title: 'Item1 Click Me 3' },
        { title: 'Item1 Click Me 4' },
      ],
    items2: [
        { title: 'Item2 Click Me 1' },
        { title: 'Item2 Click Me 2' },
        { title: 'Item2 Click Me 3' },
        { title: 'Item2 Click Me 4' },
      ],
  }),
}
</script>

Vuetify Wireframes

Inbox Navigation var

  • Wireframes를 이용해서 화면을 구성할 예정, Inbox의 Navigation var와 현재 페이지의 Toggle 기능을 살려둔 채로
    main에는 System Bar를 적용한다.
  • inbox의 v-navigation-drawer만 적용 (HelloWorld.vue)
<template>
  <v-layout class="rounded rounded-md">
    <v-navigation-drawer v-model="drawer">
      <v-sheet
        color="grey-lighten-4"
        class="pa-4"
      >
        <v-avatar
          class="mb-4"
          color="grey-darken-1"
          size="64"
        ></v-avatar>

        <div>john@google.com</div>
      </v-sheet>

      <v-divider></v-divider>

      <v-list>
        <v-list-item
          v-for="[icon, text] in links"
          :key="icon"
          link
        >
          <template v-slot:prepend>
            <v-icon>{{ icon }}</v-icon>
          </template>

          <v-list-item-title>{{ text }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    
    <v-app-bar
      :order="order"
      color="grey-lighten-2"
      flat
      title="Application bar"
    >
      <template v-slot:append>
        <v-switch
          v-model="order"
          hide-details
          inset
          label="Toggle order"
          true-value="-1"
          false-value="0"
        ></v-switch>
      </template>

      <!-- Activator Slot Start -->
      <v-menu>
        <template v-slot:activator="{ props }">
          <v-btn
            color="primary"
            v-bind="props"
          >
            Activator slot
          </v-btn>
        </template>
        <v-list>
          <v-list-item
            v-for="(item, index) in items"
            :key="index"
            :value="index"
          >
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
      <!-- Activator Slot End -->

      <!-- Activator2 Slot Start -->
      <v-menu>
        <template v-slot:activator="{ props }">
          <v-btn
            color="primary"
            v-bind="props"
          >
            Activator2 slot
          </v-btn>
        </template>
        <v-list>
          <v-list-item
            v-for="(item, index) in items2"
            :key="index"
            :value="index"
          >
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
      <!-- Activator2 Slot End -->

    </v-app-bar>

    <v-main class="d-flex align-center justify-center" style="min-height: 500px;">
      Main Content
    </v-main>
  </v-layout>
  
</template>

<script>

export default {
  name: 'HelloWorld',

  data: () => ({
    order: 0,
    items: [
        { title: 'Item1 Click Me 1' },
        { title: 'Item1 Click Me 2' },
        { title: 'Item1 Click Me 3' },
        { title: 'Item1 Click Me 4' },
      ],
    items2: [
        { title: 'Item2 Click Me 1' },
        { title: 'Item2 Click Me 2' },
        { title: 'Item2 Click Me 3' },
        { title: 'Item2 Click Me 4' },
      ],
  }),
}
</script>

  • 적용하니 문제 발생, 처음 화면에서 제대로 반영이 안되고 Toogle 하면 생성된다.

  • Toggle order 클릭 시 반영 됨

  • script에 drawer이 생략되어 발생 (HelloWorld.vue), 추가 후 정상반영 확인
<script>

export default {
  name: 'HelloWorld',

  data: () => ({
    order: 0,
    drawer: null,
    items: [
        { title: 'Item1 Click Me 1' },
        { title: 'Item1 Click Me 2' },
        { title: 'Item1 Click Me 3' },
        { title: 'Item1 Click Me 4' },
      ],
    items2: [
        { title: 'Item2 Click Me 1' },
        { title: 'Item2 Click Me 2' },
        { title: 'Item2 Click Me 3' },
        { title: 'Item2 Click Me 4' },
      ],
      links: [
        ['mdi-inbox-arrow-down', 'Inbox'],
        ['mdi-send', 'Send'],
        ['mdi-delete', 'Trash'],
        ['mdi-alert-octagon', 'Spam'],
      ],
  }),
}
</script>

System bar - Main

  • v-main 내용만 복사해서 적용 완료.
<template>
  <v-layout class="rounded rounded-md">
    <v-navigation-drawer v-model="drawer">
      <v-sheet
        color="grey-lighten-4"
        class="pa-4"
      >
        <v-avatar
          class="mb-4"
          color="grey-darken-1"
          size="64"
        ></v-avatar>

        <div>john@google.com</div>
      </v-sheet>

      <v-divider></v-divider>

      <v-list>
        <v-list-item
          v-for="[icon, text] in links"
          :key="icon"
          link
        >
          <template v-slot:prepend>
            <v-icon>{{ icon }}</v-icon>
          </template>

          <v-list-item-title>{{ text }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    
    <v-app-bar
      :order="order"
      color="grey-lighten-2"
      flat
      title="Application bar"
    >
      <template v-slot:append>
        <v-switch
          v-model="order"
          hide-details
          inset
          label="Toggle order"
          true-value="-1"
          false-value="0"
        ></v-switch>
      </template>

      <!-- Activator Slot Start -->
      <v-menu>
        <template v-slot:activator="{ props }">
          <v-btn
            color="primary"
            v-bind="props"
          >
            Activator slot
          </v-btn>
        </template>
        <v-list>
          <v-list-item
            v-for="(item, index) in items"
            :key="index"
            :value="index"
          >
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
      <!-- Activator Slot End -->

      <!-- Activator2 Slot Start -->
      <v-menu>
        <template v-slot:activator="{ props }">
          <v-btn
            color="primary"
            v-bind="props"
          >
            Activator2 slot
          </v-btn>
        </template>
        <v-list>
          <v-list-item
            v-for="(item, index) in items2"
            :key="index"
            :value="index"
          >
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
      <!-- Activator2 Slot End -->

    </v-app-bar>

    <v-main class="bg-grey-lighten-2">
      <v-container>
        <v-row>
          <template v-for="n in 4" :key="n">
            <v-col
              class="mt-2"
              cols="12"
            >
              <strong>Category {{ n }}</strong>
            </v-col>

            <v-col
              v-for="j in 6"
              :key="`${n}${j}`"
              cols="6"
              md="2"
            >
              <v-sheet height="150"></v-sheet>
            </v-col>
          </template>
        </v-row>
      </v-container>
    </v-main>
  </v-layout>
  
</template>

<script>

export default {
  name: 'HelloWorld',

  data: () => ({
    order: 0,
    drawer: null,
    items: [
        { title: 'Item1 Click Me 1' },
        { title: 'Item1 Click Me 2' },
        { title: 'Item1 Click Me 3' },
        { title: 'Item1 Click Me 4' },
      ],
    items2: [
        { title: 'Item2 Click Me 1' },
        { title: 'Item2 Click Me 2' },
        { title: 'Item2 Click Me 3' },
        { title: 'Item2 Click Me 4' },
      ],
      links: [
        ['mdi-inbox-arrow-down', 'Inbox'],
        ['mdi-send', 'Send'],
        ['mdi-delete', 'Trash'],
        ['mdi-alert-octagon', 'Spam'],
      ],
  }),
}
</script>

  • Application bar 부분과 Main 부분의 영역이 구분이 안되므로 색 변경
=== 기존
<v-app-bar
      :order="order"
      color="grey-lighten-2"
      flat
      title="Application bar"
    >
=== 변경
<v-app-bar
      :order="order"
      flat
      title="Application bar"
    >

  • 현재 v-layout으로 구성되어 있어, 화면 전체에 적용이 안되고 있어 v-layout을 v-app으로 변경

    화면 전체에 적용된 걸 확인할 수 있다.

전체 코드

<template>
  <v-app id="inspire">
    <v-navigation-drawer v-model="drawer">
      <v-sheet
        color="grey-lighten-4"
        class="pa-4"
      >
        <v-avatar
          class="mb-4"
          color="grey-darken-1"
          size="64"
        ></v-avatar>

        <div>john@google.com</div>
      </v-sheet>

      <v-divider></v-divider>

      <v-list>
        <v-list-item
          v-for="[icon, text] in links"
          :key="icon"
          link
        >
          <template v-slot:prepend>
            <v-icon>{{ icon }}</v-icon>
          </template>

          <v-list-item-title>{{ text }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    
    <v-app-bar
      :order="order"
      flat
      title="Application bar"
    >
      <template v-slot:append>
        <v-switch
          v-model="order"
          hide-details
          inset
          label="Toggle order"
          true-value="-1"
          false-value="0"
        ></v-switch>
      </template>

      <!-- Activator Slot Start -->
      <v-menu>
        <template v-slot:activator="{ props }">
          <v-btn
            color="primary"
            v-bind="props"
          >
            Activator slot
          </v-btn>
        </template>
        <v-list>
          <v-list-item
            v-for="(item, index) in items"
            :key="index"
            :value="index"
          >
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
      <!-- Activator Slot End -->

      <!-- Activator2 Slot Start -->
      <v-menu>
        <template v-slot:activator="{ props }">
          <v-btn
            color="primary"
            v-bind="props"
          >
            Activator2 slot
          </v-btn>
        </template>
        <v-list>
          <v-list-item
            v-for="(item, index) in items2"
            :key="index"
            :value="index"
          >
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
      <!-- Activator2 Slot End -->

    </v-app-bar>

    <v-main class="bg-grey-lighten-2">
      <v-container>
        <v-row>
          <template v-for="n in 4" :key="n">
            <v-col
              class="mt-2"
              cols="12"
            >
              <strong>Category {{ n }}</strong>
            </v-col>

            <v-col
              v-for="j in 6"
              :key="`${n}${j}`"
              cols="6"
              md="2"
            >
              <v-sheet height="150"></v-sheet>
            </v-col>
          </template>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
  
</template>

<script>

export default {
  name: 'HelloWorld',

  data: () => ({
    order: 0,
    drawer: null,
    items: [
        { title: 'Item1 Click Me 1' },
        { title: 'Item1 Click Me 2' },
        { title: 'Item1 Click Me 3' },
        { title: 'Item1 Click Me 4' },
      ],
    items2: [
        { title: 'Item2 Click Me 1' },
        { title: 'Item2 Click Me 2' },
        { title: 'Item2 Click Me 3' },
        { title: 'Item2 Click Me 4' },
      ],
      links: [
        ['mdi-inbox-arrow-down', 'Inbox'],
        ['mdi-send', 'Send'],
        ['mdi-delete', 'Trash'],
        ['mdi-alert-octagon', 'Spam'],
      ],
  }),
}
</script>

git push

  • git add . 명령어로 작업한 파일 전부 add
  • git commit -m 명령어로 커밋 메시지 작성
git commit -m '초기 화면 구성 완료
> Vuetify Wireframes를 이용한 화면 구성
> 1. Wireframes - Inbox : v-navigation-drawer
> 2. Application Bar : Toogle 적용, Activator Bar 생성
> 3. Wireframes - System bar : v-main 구현 완료'
  • git push
$ git push
Enumerating objects: 13, done.
Counting objects: 100% (13/13), done.
Delta compression using up to 12 threads
Compressing objects: 100% (5/5), done.
Writing objects: 100% (7/7), 1.60 KiB | 1.60 MiB/s, done.
Total 7 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
To https://github.com/Fortuna3Co/Toy-Project.git
   34a513c..2fd3135  feature -> feature
  • 정상적으로 반영 완료

GitHub

https://github.com/Fortuna3Co/Toy-Project/tree/feature

profile
강혜성
이전 포스트

4. Vue 초기 화면 구성, Git Push

다음 포스트

6. 로그인 방식 분석 (쿠키, Session, JWT)

0개의 댓글