Merge pull request #49 from woowacourse-teams/feature/47-frontend-layout

#47 프론트엔드 레이아웃 구성하기

src/frontend/package.json

@@ -8,10 +8,12 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.19.2",
     "core-js": "^3.6.5",
     "path": "^0.12.7",
     "request": "^2.88.2",
     "vue": "^2.6.11",
+    "vue-axios": "^2.1.5",
     "vue-router": "^3.2.0",
     "vuetify": "^2.2.11",
     "vuex": "^3.4.0"

src/frontend/src/App.vue

@@ -1,56 +1,27 @@
 <template>
-  <v-app>
-    <v-app-bar app color="primary" dark>
-      <div class="d-flex align-center">
-        <v-img
-          alt="Vuetify Logo"
-          class="shrink mr-2"
-          contain
-          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
-          transition="scale-transition"
-          width="40"
-        />
-
-        <v-img
-          alt="Vuetify Name"
-          class="shrink mt-1 hidden-sm-and-down"
-          contain
-          min-width="100"
-          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
-          width="100"
-        />
-      </div>
-
-      <v-spacer></v-spacer>
-
-      <v-btn
-        href="https://github.com/vuetifyjs/vuetify/releases/latest"
-        target="_blank"
-        text
-      >
-        <span class="mr-2">Latest Release</span>
-        <v-icon>mdi-open-in-new</v-icon>
-      </v-btn>
-    </v-app-bar>
-
+  <v-app id="inspire">
+    <Header></Header>
     <v-main>
-      <HelloWorld />
+      <v-container fluid>
+        <router-view />
+      </v-container>
     </v-main>
+    <bottom-navigation />
   </v-app>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld';
+import Header from './components/Header';
+import BottomNavigation from './components/BottomNavigation';
 
 export default {
-  name: 'App',
-
-  components: {
-    HelloWorld
-  },
-
-  data: () => ({
-    //
-  })
+  components: { Header, BottomNavigation },
+  props: { source: String }
 };
 </script>
+
+<style scoped>
+#inspire {
+  background-color: rgba(227, 214, 244, 0.5);
+}
+</style>

src/frontend/src/api/index.js

@@ -0,0 +1,43 @@
+import Vue from 'vue';
+import axios from 'axios';
+import VueAxios from 'vue-axios';
+const API_PREFIX = '/api';
+
+const ApiService = {
+  init() {
+    Vue.use(VueAxios, axios);
+  },
+  get(uri) {
+    return Vue.axios.get(API_PREFIX + `${uri}`, {
+      headers: {
+        // Authorization: `Bearer ${localStorage.getItem('token')}` || ''
+      }
+    });
+  },
+  login(uri, config) {
+    return Vue.axios.post(API_PREFIX + `${uri}`, {}, config);
+  },
+  post(uri, params) {
+    return Vue.axios.post(API_PREFIX + `${uri}`, params, {
+      headers: {
+        // Authorization: `Bearer ${localStorage.getItem('token')}` || ''
+      }
+    });
+  },
+  update(uri, params) {
+    return Vue.axios.put(API_PREFIX + uri, params, {
+      headers: {
+        // Authorization: `Bearer ${localStorage.getItem('token')}` || ''
+      }
+    });
+  },
+  delete(uri) {
+    return Vue.axios.delete(API_PREFIX + uri, {
+      headers: {
+        // Authorization: `Bearer ${localStorage.getItem('token')}` || ''
+      }
+    });
+  }
+};
+ApiService.init();
+export default ApiService;

src/frontend/src/components/BottomNavigation.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-bottom-navigation v-model="bottomNav" color="#B2A4D4" shift>
+    <v-btn to="/feed" height="100%">
+      <span>Feed</span>
+      <v-icon large>mdi-rss</v-icon>
+    </v-btn>
+
+    <v-btn to="/post" height="100%">
+      <span>Write</span>
+      <v-icon large>mdi-pencil</v-icon>
+    </v-btn>
+
+    <v-btn to="/my-page" height="100%">
+      <span>MyPage</span>
+      <v-icon large>mdi-note</v-icon>
+    </v-btn>
+  </v-bottom-navigation>
+</template>
+
+<script>
+export default {
+  name: 'bottom-navigation',
+  data() {
+    return {
+      bottomNav: 3
+    };
+  }
+};
+</script>

src/frontend/src/components/Card.vue

@@ -0,0 +1,28 @@
+<template>
+  <v-card class="mx-auto" color="#faf9f5" max-width="400">
+    <v-card-title>
+      <v-icon large left>mdi-twitter</v-icon>
+      <span class="title font-weight-light">기뻐요</span>
+    </v-card-title>
+
+    <v-card-text class="headline">
+      "Turns out semicolon-less style is easier and safer in TS because most
+      gotcha edge cases are type invalid as well."
+    </v-card-text>
+
+    <v-card-actions>
+      <v-list-item class="grow">
+        <v-row align="center" justify="end">
+          <v-icon class="mr-1">mdi-hand-heart</v-icon>
+          <span class="subheading mr-2">256</span>
+          <v-icon class="mr-1">mdi-alarm-light</v-icon>
+          <span class="subheading">45</span>
+        </v-row>
+      </v-list-item>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+export default {};
+</script>

src/frontend/src/components/Editor.vue

@@ -0,0 +1,11 @@
+<template>
+  <v-container fluid>
+    <v-col cols="12" md="8">
+      <v-textarea solo name="input-7-4" label="Solo textarea"></v-textarea>
+    </v-col>
+  </v-container>
+</template>
+
+<script>
+export default {};
+</script>

src/frontend/src/components/Header.vue

@@ -0,0 +1,19 @@
+<template>
+  <v-app-bar app clipped-right color="#B2A4D4" flat dark>
+    <v-app-bar-nav-icon>
+      <v-icon large>mdi-filter</v-icon>
+    </v-app-bar-nav-icon>
+    <v-spacer></v-spacer>
+    <v-toolbar-title>
+      <span class="title">🧚🏻 새벽 🧚🏻</span>
+    </v-toolbar-title>
+    <v-spacer></v-spacer>
+    <v-app-bar-nav-icon>
+      <v-icon large>mdi-cog</v-icon>
+    </v-app-bar-nav-icon>
+  </v-app-bar>
+</template>
+
+<script>
+export default {};
+</script>

src/frontend/src/components/MyPageTabs.vue

@@ -0,0 +1,10 @@
+<template>
+  <v-tabs fixed-tabs background-color="indigo" dark>
+    <v-tab to="/my-page/analysis">분석</v-tab>
+    <v-tab to="/my-page/diary">기록</v-tab>
+  </v-tabs>
+</template>
+
+<script>
+export default {};
+</script>