[실습] 뷰(Vue)로 공지사항/게시판 구현하기 - 상세 화면 UI, 레이아웃(Layout) 구현하기

제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 

제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.

 

혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요!

---

오늘의 Vue.js 실습 목표는 "공지사항/게시판 만들어보기!" 입니다.

본 게시글에서 다루는 사항은 공지사항/게시판 상세 화면 Layout을 구현하는 과정입니다.

 

---

공지사항/게시판 구현하기 - 상세 화면 - 레이아웃(Layout) 

사전 준비

아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다.

• 프론트엔드(Frontend) 개발 환경 구축하기: https://logs-jejustone.tistory.com/45
  • 프로그램 설치
  • 프로젝트 구축
  • 프로젝트 구동 테스트
• 뷰(Vue.js)로 관리자/직원 전용 Web Application 개발하기
  • UI/Layout 구현하기: https://logs-jejustone.tistory.com/47
  • Navigation Bar, Side Bar, Menu 구현하기: https://logs-jejustone.tistory.com/48

 

혹시라도 아래 개념이 잘 기억나지 않으시는 분들은 관련 링크를 참조하시기 바랍니다.

• 뷰 싱글 파일 컴포넌트 체계: https://logs-jejustone.tistory.com/16
• 뷰 프로젝트 구조: https://logs-jejustone.tistory.com/12

 

---

파일 구조

Notice의 상세 화면의 기본적인 레이아웃을 구현하기 위해서 작업해야 할 파일은 총 1개입니다.

아래 폴더/파일 트리 구조와 호출 흐름도는 Notice 페이지가 전체 구현이 완료된 후 갖춰질 구조입니다.

작업할 파일에 대한 간략한 설명은 아래를 참고하시면 됩니다.

•  NoticeDetail.vue
  • 목적: Notice 페이지 내 우측에 위치한 영역을 관리하는 컴포넌트로 공지사항의 상세 정보 템플릿을 제공하는 파일
  • 경로: src\components\user-web\notice

 

---

결과 이미지

구현하기에 앞서 본 글을 따라하시면 아래와 같이 공지사항 기본(리스트, 테이블) 화면의 레이아웃이 구성되는 것을 확인하실 수 있습니다.

 

---

Layout 구조

공지사항 게시판의 상세 영역은 크게 2가지 Layout으로 구성되어 있습니다.

1. 조작 영역: 콘텐츠 영역에 대한 조작 버튼이 제공되는 영역
2. 콘텐츠 영역: 게시판의 상세 내용 템플릿으로 입력 필드들이 표시되는 영역\

 

---

소스 코드

src\components\user-web\notice\NoticeDetail.vue

상세 화면을 구현하는 파일로 기능 구현을 제외한 UI/Layout을 Vuetify를 이용하여 구현한 코드입니다.

 

<template>

UI/Layout을 구성하는 코드가 위치한 영역입니다.

<template>
  <div class="ma-md-5">
    <div class="d-flex justify-end">
      <v-btn
        text
        outlined
        class="mx-md-1 elevation-2"
        >REFRESH
      </v-btn>
    </div>

    <div class="mt-5">
      <v-combobox
        outlined
        dense
        hide-selected
        required
        label="Category"
        v-bind:items="categories"
      ></v-combobox>
      <v-text-field required label="Title"></v-text-field>
      <v-textarea required label="Content"></v-textarea>
    </div>

    <div class="d-flex justify-end">
      <v-btn text outlined class="mx-md-1 elevation-2">CANCEL</v-btn>
      <v-btn text outlined class="mx-md-1 elevation-2">OK</v-btn>
    </div>
  </div>
</template>

• 콘텐츠 영역:
  • 카테고리: <v-combobox>를 사용하여 제공하는 데이터만 선택할 수 있도록 제한
    • <script>의 data 영역에서 콤보박스의 항목들을 설정하는 코드로 구현되어 있음 
      • 향후 DB Table에서 데이터를 read하여 표시하는 방향으로 구현 변경 예정
  • 제목: <v-text-field>를 사용하여 짧은 길이의 제목을 입력하도록 제공
  • 내용: <v-textarea>를 사용하여 긴 길이의 내용을 입력하도록 제공
• 조작 영역:
  • <v-btn>: Vuetify에서 제공하는 버튼 태그
  • 우측을 기준으로 아이템이 보이도록 'd-flex justify-end' 를 class로 선언
  • 버튼의 스타일을 통일화하여 'text outlined'으로 지정, 약간의 그림자 효과를 위해 'elevation'을 class로 선언

 

<script>

UI/Layout에 해당하는 데이터나 동작하는 함수를 구현하는 코드가 위치한 영역입니다.

<script>
export default {
  data() {
    return {
      categories: ["Competition", "System Check", "Others"],
    };
  },
};
</script>

• categories: <v-combobox>가 지닐 콤보 아이템들의 정보를 담고 있는 변수

 

 

---

References

• Vuetify Tutorial: https://vuetifyjs.com/en/
• Vue.js 공식 사이트: https://vuejs.org/guide/quick-start.html