first commit

ljlm0402 · ljlm0402 · commit 8dbaa985c73a · 2020-03-06T16:58:37.000+09:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "vuex-project",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "vue": "^2.5.17",
+    "vue-router": "^3.0.1",
+    "vuetify": "^1.3.0",
+    "vuex": "^3.0.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.0.5",
+    "@vue/cli-service": "^3.0.5",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.1",
+    "vue-cli-plugin-vuetify": "^0.4.4",
+    "vue-template-compiler": "^2.5.17",
+    "vuetify-loader": "^1.0.5"
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>vuex-project</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but vuex-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,49 @@
+<template>
+  <v-app id="inspire">
+    <v-navigation-drawer v-model="drawer" fixed app>
+      <v-list dense>
+        <v-list-tile router :to="{name: 'home'}" exact>
+          <v-list-tile-action>
+            <v-icon>home</v-icon>
+          </v-list-tile-action>
+          <v-list-tile-content>
+            <v-list-tile-title>Home</v-list-tile-title>
+          </v-list-tile-content>
+        </v-list-tile>
+
+        <v-list-tile router :to="{name: 'users'}" exact>
+          <v-list-tile-action>
+            <v-icon>person</v-icon>
+          </v-list-tile-action>
+          <v-list-tile-content>
+            <v-list-tile-title>Users</v-list-tile-title>
+          </v-list-tile-content>
+        </v-list-tile>
+      </v-list>
+    </v-navigation-drawer>
+
+    <v-toolbar color="indigo" dark fixed app>
+      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
+      <v-toolbar-title>Application</v-toolbar-title>
+    </v-toolbar>
+
+    <v-content>
+      <router-view></router-view>
+    </v-content>
+
+    <v-footer color="indigo" app>
+      <span class="white--text">&copy; 2019 AGUMON</span>
+    </v-footer>
+  </v-app>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    drawer: null
+  }),
+  props: {
+    source: String
+  }
+};
+</script>
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
diff --git a/src/components/Users/AllUsers.vue b/src/components/Users/AllUsers.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <h1>회원 리스트</h1>
+    <h3>총 {{ allUsersCount }}명</h3>
+    <h3>서울 거주 회원 : {{ countOfSeoul }}명 ({{ percentOfSeoul }}%)</h3>
+    <v-list two-line>
+      <v-list-tile v-for="(user, index) in allUsers" :key="index" avatar>
+        <v-list-tile-avatar color="grey lighten-3">
+          <img :src="user.src" />
+        </v-list-tile-avatar>
+
+        <v-list-tile-content>
+          <v-list-tile-title v-html="user.name"></v-list-tile-title>
+          <v-list-tile-sub-title>id:#{{ index }} / {{ user.address }} 거주</v-list-tile-sub-title>
+        </v-list-tile-content>
+      </v-list-tile>
+    </v-list>
+  </div>
+</template>
+
+<script>
+import { EventBus } from "@/main.js";
+import { mapState, mapGetters } from "vuex";
+
+export default {
+  data() {
+    return {
+    }
+  },
+  computed: {
+    ...mapState(['allUsers']),
+    ...mapGetters(['allUsersCount', 'countOfSeoul', 'percentOfSeoul'])
+  },
+  mounted() {
+    EventBus.$on("signUp", users => {
+      this.$store.state.allUsers.push(users);
+    });
+  }
+};
+</script>
diff --git a/src/components/Users/SignUp.vue b/src/components/Users/SignUp.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <h1>회원 가입</h1>
+    <v-text-field v-model="userId" label="아이디"></v-text-field>
+    <v-text-field type="password" v-model="password" label="비밀번호"></v-text-field>
+    <v-text-field v-model="name" label="이름"></v-text-field>
+    <v-text-field v-model="address" label="주소"></v-text-field>
+    <v-text-field v-model="src" label="이미지"></v-text-field>
+    <v-btn @click="signUp">가입하기</v-btn>
+  </div>
+</template>
+
+<script>
+import { EventBus } from '@/main.js';
+import { mapMutations, mapActions } from 'vuex';
+
+export default {
+  data() {
+    return {
+      userId: null,
+      password: null,
+      name: null,
+      address: null,
+      src: null
+    };
+  },
+  methods: {
+    ...mapActions(['addUsers']),
+    signUp() {
+      const userObj = {
+        userId: this.userId,
+        password: this.password,
+        name: this.name,
+        address: this.address,
+        src: this.src
+      };
+      this.addUsers(userObj);
+      this.clearForm();
+    },
+    clearForm() {
+      this.userId = null;
+      this.password = null;
+      this.name = null;
+      this.address = null;
+      this.src = null;
+    }
+  }
+};
+</script>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,15 @@
+import App from '@/App.vue';
+import '@/plugins/vuetify';
+import router from '@/router';
+import store from '@/store';
+import Vue from 'vue';
+
+Vue.config.productionTip = false;
+
+export const EventBus = new Vue();
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app');
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify/lib'
+import 'vuetify/src/stylus/app.styl'
+
+Vue.use(Vuetify, {
+  iconfont: 'md',
+})
diff --git a/src/router.js b/src/router.js
@@ -0,0 +1,23 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+
+Vue.use(Router);
+
+export default new Router({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: () =>
+        import(/* webpackChunkName: 'about' */ '@/views/Home.vue')
+    },
+    {
+      path: '/users',
+      name: 'users',
+      component: () =>
+        import(/* webpackChunkName: 'users' */ '@/views/Users.vue')
+    }
+  ]
+});
diff --git a/src/store.js b/src/store.js
@@ -0,0 +1,53 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: { //data
+    allUsers: [
+      {
+        userId: 'hoza123',
+        password: '123',
+        name: 'Hoza',
+        address: 'Seoul',
+        src: 'https://goo.gl/oqLfJR'
+      },
+      {
+        userId: 'max123',
+        password: '456',
+        name: 'Max',
+        address: 'Berlin',
+        src: 'https://goo.gl/Ksk9B9'
+      },
+      {
+        userId: 'lego123',
+        password: '789',
+        name: 'Lego',
+        address: 'Busan',
+        src: 'https://goo.gl/x7SpCD'
+      }
+    ]
+  },
+  getters: { // computed
+    allUsersCount: state => {
+      return state.allUsers.length;
+    },
+    countOfSeoul: state => {
+      return state.allUsers.filter(user => user.address === 'Seoul').length;
+    },
+    percentOfSeoul: (state, getters) => {
+      return Math.round(getters.countOfSeoul / getters.allUsersCount * 100);
+    }
+  },
+  mutations: { // methods - 동기식
+    addUsers: (state, payload) => {
+      state.allUsers.push(payload);
+    }
+  },
+  actions: { // methods - 비동기
+    addUsers: ({ commit }, payload) => {
+      commit('addUsers', payload);
+    }
+  }
+});
diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -0,0 +1,6 @@
+<template>
+  <v-container>
+    <h1>Home</h1>
+    <h4>회원 수 : {{ $store.getters.allUsersCount }}</h4>
+  </v-container>
+</template>
diff --git a/src/views/Users.vue b/src/views/Users.vue
@@ -0,0 +1,24 @@
+<template>
+  <v-container grid-list-xl>
+    <v-layout row wrap>
+      <v-flex xs6>
+        <AllUsers></AllUsers>
+      </v-flex>
+      <v-flex xs6>
+        <SignUp></SignUp>
+      </v-flex>
+    </v-layout>
+  </v-container>
+</template>
+
+<script>
+import AllUsers from '@/components/Users/AllUsers';
+import SignUp from '@/components/Users/SignUp';
+
+export default {
+  components: {
+    AllUsers,
+    SignUp
+  }
+};
+</script>
