Vue.js로 웹페이지 리빌드하기 - (8) 나머지 화면 만들기

이제 남은 화면을 만들려고 합니다.

 

이 전에 등록한 정보를 토대로, 트위터 api 검색을 통해 원하는 정보를 추출한 뒤,

그 내용을 보여주는 페이지입니다.

 

여기서 보여지는 저 템플릿은, 남은 화면 모두 사용하는 템플릿입니다.

그래서, 이 부분을 vue의 컴포넌트로 분리하게 되면 나머지 화면은 한번에 다 만들 수 있겠다~ 싶었습니다.

 

(구) 화면 소스코드

뭐, 기존 화면도 import로 통합할 수 있었으나, 소스 복붙을 해서 다른부분 살짝 수정을 하고 그랬는데..

이번엔 컴포넌트 통합을 하고, vue의 기능을 사용해 소스 길이를 줄이기로 했습니다.

 

 

<template>
    <div
      v-for="data in dataList"
      :key="data.broadcastTitle">
        <LiveInfoComp v-bind:dataOne="data" v-bind:buttonFlag="1"/>
    </div>
</template>

<script>
import LiveInfoComp from '@/components/LiveInfoComp.vue'

const dataList = [
    {
      broadcastTitle: '방송1',
      broadcastContext: '방송1 본문',
      broadcastTag: '태그1, 태그2',
      broadcastDate: '2022-01-03 12:00',
      source: 'https://naver.com',
    },
    {
      broadcastTitle: '방송2',
      broadcastContext: '방송2 본문',
      broadcastTag: '태그3, 태그4',
      broadcastDate: '2022-01-04 12:00',
      source: 'https://naver.com',
    }
]


export default {
    components : {
        LiveInfoComp
    },
    setup() {
        return {
            dataList
        }
    }
}
</script>

<style>

</style>

각 화면의 vue 파일은 템플릿에 LiveInfoComp라는 컴포넌트를 불러오게 해서,

그 컴포넌트의 내용으로 화면을 채우도록 했습니다.

처음엔 LiveInfoComp에 직접 v-for를 사용해서 여러개를 만들려했으나, 

v-for를 사용해서 넣을 경우 하위 컴포넌트 내부의 html에 {{ }}를 사용해 출력을 하게 되는데,

저는 하위 컴포넌트 내부의 스크립트 영역에서 사용하고 싶었단 말이죠... 

그래서, 컴포넌트 위에 div로 감싸서 div부터 v-for를 사용하여,

하위 컴포넌트를 부를 때 v-bind로 넘겨줘서 하위 컴포넌트 내부의 스크립트 영역에서 사용가능하게 했습니다.

 

export default {
    props: ['dataOne', 'buttonFlag'],
    data () {
        return {
        title: this.dataOne.broadcastTitle,
        context: this.dataOne.broadcastContext,
        tag: this.dataOne.broadcastTag,
        bcDate: this.dataOne.broadcastDate,
        bcSource: this.dataOne.source,
        flag: this.buttonFlag,
        }
    }
}

상위 컴포넌트에서 v-bind로 넘겨주게 된 데이터를

하위 컴포넌트에서 props로 받아서, 각 항목의 기본값을 넣어주도록 했습니다.

quasar의 q-input은 기본값 설정을 스크립트쪽에서 해야하더군요...

조금 귀찮게 되었지만, 어떻게든 답을 찾아내서 다행이라 생각합니다.. 

 

<template>
  <div class="q-pa-md">
        <div class="row">
            <div class="col-xs-12 col-sm-5">
            <q-input
                v-model="title"
                label="방송명 (요약)"
                hint="최대한 간단하게. ex)아쿠아 생방송"
                />
            </div>
            <div class="col-xs-12 col-sm-5">
            <q-input
                v-model="context"
                label="방송 정보 내용"
                hint="@을 제외한 트위터 계정명"
                />
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-5">
            <q-input
                v-model="tag"
                label="방송 정보 태그 (카테고리)"
                hint="3개까지 기억됩니다. 여러개일 경우 , 로 구분해주세요."
                />
            </div>
            <div class="col-xs-12 col-sm-5">
            <div class="q-mt-md">
                <q-item-label class="q-field__label">방송 정보 일시</q-item-label>
                <q-input filled v-model="bcDate">
                <template v-slot:prepend>
                    <q-icon name="event" class="cursor-pointer">
                    <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                        <q-date v-model="bcDate" mask="YYYY-MM-DD HH:mm">
                        <div class="row items-center justify-end">
                            <q-btn v-close-popup label="Close" color="primary" flat />
                        </div>
                        </q-date>
                    </q-popup-proxy>
                    </q-icon>
                </template>

                <template v-slot:append>
                    <q-icon name="access_time" class="cursor-pointer">
                    <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                        <q-time v-model="bcDate" mask="YYYY-MM-DD HH:mm" format24h>
                        <div class="row items-center justify-end">
                            <q-btn v-close-popup label="Close" color="primary" flat />
                        </div>
                        </q-time>
                    </q-popup-proxy>
                    </q-icon>
                </template>
                </q-input>
            </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-5">
            <q-input
                v-model="bcSource"
                label="출처"
                hint="http://로 시작하는 주소"
                />
            </div>
            <div class="col-xs-3 col-sm-2 q-mt-lg">
            <q-btn push color="secondary" label="정보 등록" />            
            </div>
            <div class="col-xs-3 col-sm-2 q-mt-lg">
            <q-btn v-if="buttonFlag==1" push color="red" label="삭제" />
            <q-btn v-if="buttonFlag==2" push color="red" label="정보 삭제" />
            </div>
        </div>
    </div>
</template>

LiveInfoComp.vue의 템플릿부분

이 컴포넌트를 3화면에서 공유하는 느낌입니다.

 

 

(신) 생방송 정보 취득 화면

(신) 등록 내용 확인 화면

(신) 정보 수동 등록 화면

 

일단 이로서 겉모습은 만들어졌습니다.

이제 기존에 있던 api와 연결하는 작업인데...

api도 변경해야 할 거 같은 느낌이 드네요... 화면 설계가 바뀌다보니 어쩔 수가 없나..