상단 프레임 작업
현재 컴포넌트 구조는 아래와 같습니다.
NintendoScreen ┗ NintendoFrame
NintendoFrame┗ NintendoTopFrame
NintendoTopFrame┗ NintendoBottomFrame
NintendoBottomFrame때문에 TopFrame 에 들어갈 component 들을 따로 만들고 아래와 같이 import 하는 방식을 사용하였습니다.
<template>
<UserMain />
</template>
<script>
import UserMain from '@/portal/user/UserMain'
export default {
name: 'NintendoTopFrame',
components: {
UserMain
}
}
</script>
Plain Text
복사
상단의 경우 url 에 따라 화면이 이동하는게 아니기 때문에 나중에 컴포넌트를 다 모아서 조건문을 걸어서 분기(?) 해야 할 듯 합니다. 아직 vue.js 와 친하지 않아서 잘 모르겠습니다.
UserPage 작업
/main 으로 접속하면 아래와 같은 화면이 나타납니다.
여기서 npc 를 클릭하면 아래와 같은 화면이 나오고, 상황에 맞게 대답을 클릭해주면 해당하는 화면이 나오게 됩니다.
첫번째 대답을 클릭한 경우
두번째 대답을 클릭한 경우
화면을 나눌 때에는 v-if 문을 사용하였고, 여기에 data 항목을 사용하였습니다.
마지막으로 data 의 값에 따라 실행될 메소드를 methods: 에 작성해주었습니다.
