From 378795f265ed8500d3d957d28e8d3225a06e50ce Mon Sep 17 00:00:00 2001
From: leejooy96 <leejooy96@gmail.com>
Date: Thu, 23 Jun 2022 12:36:38 +0900
Subject: [PATCH] renderer: implements of default layout structure

---
 _runner/dev.mjs                               |  2 +-
 src/locales/en.json                           |  4 +--
 src/locales/ko.json                           |  5 ++++
 src/renderer/App.vue                          |  8 +++++-
 .../components/layout/DefaultLayout.vue       | 14 ++++++++++
 .../components/layout/HeaderLayout.vue        |  8 ++++++
 src/renderer/components/layout/index.js       |  7 +++++
 src/renderer/components/screen/MainScreen.vue | 26 ++++++++++++-------
 src/renderer/router/index.js                  | 10 +++++--
 9 files changed, 69 insertions(+), 15 deletions(-)
 create mode 100644 src/locales/ko.json
 create mode 100644 src/renderer/components/layout/DefaultLayout.vue
 create mode 100644 src/renderer/components/layout/HeaderLayout.vue
 create mode 100644 src/renderer/components/layout/index.js

diff --git a/_runner/dev.mjs b/_runner/dev.mjs
index 62666c9..dbaf3ba 100644
--- a/_runner/dev.mjs
+++ b/_runner/dev.mjs
@@ -61,7 +61,7 @@ function startRenderer () {
           setupMiddlewares (middlewares, devServer) {
             devServer.app.use(webpackHotMiddleware(compiler, {
               log: false,
-              heartbeat: 2500
+              heartbeat: 5000
             }))
             devServer.middleware.waitUntilValid(() => {
               resolve()
diff --git a/src/locales/en.json b/src/locales/en.json
index a10dfe4..bd09c8c 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,5 +1,5 @@
 {
-  "app": {
-    "title": "Vutron"
+  "desc": {
+    "welcome": "Thank you for using Vutron. This cool template makes it easy to create a variety of cross-platform applications."
   }
 }
diff --git a/src/locales/ko.json b/src/locales/ko.json
new file mode 100644
index 0000000..8eebcb7
--- /dev/null
+++ b/src/locales/ko.json
@@ -0,0 +1,5 @@
+{
+  "desc": {
+    "welcome": "Vutron을 이용해주셔서 감사드립니다. 이 멋진 템플릿을 활용하면 다양한 크로스플랫폼 애플리케이션을 손쉽게 제작할 수 있습니다."
+  }
+}
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 3e5013d..877a81f 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -1,5 +1,11 @@
+<script setup>
+import { DefaultLayout } from './components/layout'
+</script>
+
 <template>
-  <router-view />
+  <DefaultLayout>
+    <router-view />
+  </DefaultLayout>
 </template>
 
 <style>
diff --git a/src/renderer/components/layout/DefaultLayout.vue b/src/renderer/components/layout/DefaultLayout.vue
new file mode 100644
index 0000000..9b6b51f
--- /dev/null
+++ b/src/renderer/components/layout/DefaultLayout.vue
@@ -0,0 +1,14 @@
+<script setup>
+import HeaderLayout from './HeaderLayout'
+</script>
+
+<template>
+  <v-app>
+    <v-layout>
+      <HeaderLayout />
+      <v-main>
+        <slot />
+      </v-main>
+    </v-layout>
+  </v-app>
+</template>
diff --git a/src/renderer/components/layout/HeaderLayout.vue b/src/renderer/components/layout/HeaderLayout.vue
new file mode 100644
index 0000000..97d28d1
--- /dev/null
+++ b/src/renderer/components/layout/HeaderLayout.vue
@@ -0,0 +1,8 @@
+<template>
+  <v-app-bar
+    color="primary"
+    density="compact"
+  >
+    <v-app-bar-title>{{ $route.meta.title }}</v-app-bar-title>
+  </v-app-bar>
+</template>
diff --git a/src/renderer/components/layout/index.js b/src/renderer/components/layout/index.js
new file mode 100644
index 0000000..d9b6da3
--- /dev/null
+++ b/src/renderer/components/layout/index.js
@@ -0,0 +1,7 @@
+import DefaultLayout from './DefaultLayout.vue'
+import HeaderLayout from './HeaderLayout.vue'
+
+export {
+  DefaultLayout,
+  HeaderLayout
+}
diff --git a/src/renderer/components/screen/MainScreen.vue b/src/renderer/components/screen/MainScreen.vue
index 5fe7a1a..4a8a850 100644
--- a/src/renderer/components/screen/MainScreen.vue
+++ b/src/renderer/components/screen/MainScreen.vue
@@ -1,14 +1,22 @@
 <script setup>
-import { ref } from 'vue'
-import { useTempStore } from '../../store/temp'
-
-const test = ref(1)
-const temp = useTempStore()
 </script>
 
 <template>
-  <div>
-    Main Screen {{ test }}
-    {{ temp.text }}
-  </div>
+  <v-container>
+    <v-row
+      align="center"
+      class="text-center"
+    >
+      <v-col cols="12">
+        <v-img
+          class="ma-auto"
+          src="/static/vutron-logo.png"
+          width="600"
+        />
+      </v-col>
+      <v-col cols="12">
+        {{ $t('desc.welcome') }}
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
diff --git a/src/renderer/router/index.js b/src/renderer/router/index.js
index ee19fd5..edb9400 100644
--- a/src/renderer/router/index.js
+++ b/src/renderer/router/index.js
@@ -6,11 +6,17 @@ export default createRouter({
   routes: [
     {
       path: '/',
-      component: MainScreen
+      component: MainScreen,
+      meta: {
+        title: 'Main'
+      }
     },
     {
       path: '/error',
-      component: ErrorScreen
+      component: ErrorScreen,
+      meta: {
+        title: 'Unknown error occurred'
+      }
     },
     {
       path: '/:pathMatch(.*)*',