Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 22f4d24

Browse files
pkalshpkalsh
authoredFeb 21, 2019
todo
1 parent 84e151f commit 22f4d24

27 files changed

+8249
-8072
lines changed
 

‎README.md

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,29 @@
1-
# vueproject
1+
# todo
22

3-
> A Vue.js project
4-
5-
## Build Setup
6-
7-
``` bash
8-
# install dependencies
3+
## Project setup
4+
```
95
npm install
6+
```
107

11-
# serve with hot reload at localhost:8080
12-
npm run dev
8+
### Compiles and hot-reloads for development
9+
```
10+
npm run serve
11+
```
1312

14-
# build for production with minification
13+
### Compiles and minifies for production
14+
```
1515
npm run build
16+
```
1617

17-
# build for production and view the bundle analyzer report
18-
npm run build --report
19-
20-
# run unit tests
21-
npm run unit
18+
### Run your tests
19+
```
20+
npm run test
21+
```
2222

23-
# run all tests
24-
npm test
23+
### Lints and fixes files
24+
```
25+
npm run lint
2526
```
2627

27-
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
28+
### Customize configuration
29+
See [Configuration Reference](https://cli.vuejs.org/config/).

‎babel.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/app'
4+
]
5+
}

‎dist/css/app.4cc5d57a.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/favicon.ico

1.12 KB
Binary file not shown.

‎dist/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!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"><link rel="shortcut icon" href=favicon.ico type=image/x-icon><link rel=icon href=favicon.ico type=image/x-icon><link rel=stylesheet href=https://use.fontawesome.com/releases/v5.7.1/css/all.css integrity=sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr crossorigin=anonymous><link href="https://fonts.googleapis.com/css?family=Ubuntu" rel=stylesheet><title>todo</title><link href=/css/app.4cc5d57a.css rel=preload as=style><link href=/js/app.048cf631.js rel=preload as=script><link href=/js/chunk-vendors.f9aa2304.js rel=preload as=script><link href=/css/app.4cc5d57a.css rel=stylesheet></head><body><noscript><strong>We're sorry but todo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.f9aa2304.js></script><script src=/js/app.048cf631.js></script></body></html>

‎dist/js/app.048cf631.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/app.048cf631.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/chunk-vendors.f9aa2304.js

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/chunk-vendors.f9aa2304.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json

Lines changed: 7618 additions & 7964 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 17 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,25 @@
11
{
2-
"name": "vueproject",
3-
"version": "1.0.0",
4-
"description": "A Vue.js project",
5-
"author": "sennom3 <sennom3@naver.com>",
2+
"name": "todo",
3+
"version": "0.1.0",
64
"private": true,
75
"scripts": {
8-
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
9-
"start": "npm run dev",
10-
"test": "npm run unit",
11-
"lint": "eslint --ext .js,.vue src test/unit",
12-
"build": "node build/build.js"
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
139
},
1410
"dependencies": {
15-
"vue": "^2.5.2",
16-
"vue-router": "^3.0.1"
11+
"vue": "^2.5.22",
12+
"vue-router": "^3.0.1",
13+
"vuex": "^3.1.0"
1714
},
1815
"devDependencies": {
19-
"autoprefixer": "^7.1.2",
20-
"babel-core": "^6.22.1",
21-
"babel-eslint": "^8.2.1",
22-
"babel-helper-vue-jsx-merge-props": "^2.0.3",
23-
"babel-loader": "^7.1.1",
24-
"babel-plugin-syntax-jsx": "^6.18.0",
25-
"babel-plugin-transform-runtime": "^6.22.0",
26-
"babel-plugin-transform-vue-jsx": "^3.5.0",
27-
"babel-preset-env": "^1.3.2",
28-
"babel-preset-stage-2": "^6.22.0",
29-
"chalk": "^2.0.1",
30-
"copy-webpack-plugin": "^4.0.1",
31-
"css-loader": "^0.28.0",
32-
"eslint": "^4.15.0",
33-
"eslint-config-standard": "^10.2.1",
34-
"eslint-friendly-formatter": "^3.0.0",
35-
"eslint-loader": "^1.7.1",
36-
"eslint-plugin-import": "^2.7.0",
37-
"eslint-plugin-node": "^5.2.0",
38-
"eslint-plugin-promise": "^3.4.0",
39-
"eslint-plugin-standard": "^3.0.1",
40-
"eslint-plugin-vue": "^4.0.0",
41-
"extract-text-webpack-plugin": "^3.0.0",
42-
"file-loader": "^1.1.4",
43-
"friendly-errors-webpack-plugin": "^1.6.1",
44-
"html-webpack-plugin": "^2.30.1",
45-
"node-notifier": "^5.1.2",
46-
"optimize-css-assets-webpack-plugin": "^3.2.0",
47-
"ora": "^1.2.0",
48-
"portfinder": "^1.0.13",
49-
"postcss-import": "^11.0.0",
50-
"postcss-loader": "^2.0.8",
51-
"postcss-url": "^7.2.1",
52-
"rimraf": "^2.6.0",
53-
"semver": "^5.3.0",
54-
"shelljs": "^0.7.6",
55-
"uglifyjs-webpack-plugin": "^1.1.1",
56-
"url-loader": "^0.5.8",
57-
"vue-loader": "^13.3.0",
58-
"vue-style-loader": "^3.0.1",
59-
"vue-template-compiler": "^2.5.2",
60-
"webpack": "^3.6.0",
61-
"webpack-bundle-analyzer": "^2.9.0",
62-
"webpack-dev-server": "^2.9.1",
63-
"webpack-merge": "^4.1.0"
64-
},
65-
"engines": {
66-
"node": ">= 6.0.0",
67-
"npm": ">= 3.0.0"
68-
},
69-
"browserslist": [
70-
"> 1%",
71-
"last 2 versions",
72-
"not ie <= 8"
73-
]
16+
"@vue/cli-plugin-babel": "^3.4.0",
17+
"@vue/cli-plugin-eslint": "^3.4.0",
18+
"@vue/cli-service": "^3.4.0",
19+
"@vue/eslint-config-standard": "^4.0.0",
20+
"babel-eslint": "^10.0.1",
21+
"eslint": "^5.8.0",
22+
"eslint-plugin-vue": "^5.0.0",
23+
"vue-template-compiler": "^2.5.21"
24+
}
7425
}

‎postcss.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
plugins: {
3+
autoprefixer: {}
4+
}
5+
}

‎public/favicon.ico

1.12 KB
Binary file not shown.

‎public/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
8+
<link rel="icon" href="favicon.ico" type="image/x-icon">
9+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
10+
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
11+
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
12+
<title>todo</title>
13+
</head>
14+
<body>
15+
<noscript>
16+
<strong>We're sorry but todo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
17+
</noscript>
18+
<div id="app"></div>
19+
<!-- built files will be auto injected -->
20+
</body>
21+
</html>

‎src/App.vue

Lines changed: 43 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,57 @@
11
<template>
22
<div id="app">
3-
<img src="./assets/logo.png">
4-
<router-view/>
3+
<!-- <transition name="slide" mode="out-in"> -->
4+
<transition name="page" mode="out-in"
5+
enter-active-class="animated slideInRight" leave-active-class="animated slideOutLeft">
6+
<router-view></router-view>
7+
</transition>
8+
<nav class="navigation">
9+
<span><router-link to="/"><i class="fas fa-tasks fa-2x" aria-hidden="true"></i></router-link></span>
10+
<span><router-link to="/editor"><i class="far fa-edit fa-2x" aria-hidden="true"></i></router-link></span>
11+
<span><router-link to="/calendar"><i class="far fa-clock fa-2x"></i></router-link></span>
12+
</nav>
513
</div>
614
</template>
715

816
<script>
17+
918
export default {
10-
name: 'App'
19+
1120
}
1221
</script>
1322

1423
<style>
15-
#app {
16-
font-family: 'Avenir', Helvetica, Arial, sans-serif;
17-
-webkit-font-smoothing: antialiased;
18-
-moz-osx-font-smoothing: grayscale;
24+
@import "https://cdn.jsdelivr.net/npm/animate.css@3.5.1";
25+
26+
body {
1927
text-align: center;
20-
color: #2c3e50;
21-
margin-top: 60px;
28+
background-color: #f6f6f6
29+
}
30+
input {
31+
border-style: groove;
32+
width: 200px;
33+
}
34+
button {
35+
border-style: groove;
36+
}
37+
.shadow {
38+
box-shadow: 5px 5px 10px rgba(0, 0, 0 , 0.03);
39+
}
40+
.navigation {
41+
width:100%;
42+
position: fixed;
43+
margin-bottom: 10px;
44+
margin-top: 10px;
45+
bottom: 0px;
46+
}
47+
/* 왜 i를 선택해야 width 조절이 될까 */
48+
.navigation i {
49+
width: 32%;
50+
}
51+
.navigation a:visited {
52+
color: #000000;
53+
}
54+
.router-link-exact-active i {
55+
color: #848484;
2256
}
2357
</style>

‎src/components/ContentBox.vue

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template lang="html">
2+
<span class="contentBox shadow">
3+
{{ propsdata }}
4+
</span>
5+
</template>
6+
7+
<script>
8+
export default {
9+
props: ['propsdata']
10+
}
11+
</script>
12+
13+
<style lang="css" scoped>
14+
.contentBox {
15+
margin: 10px;
16+
padding: 20px;
17+
width: 110px;
18+
height: 60px;
19+
20+
21+
border-radius: 10px;
22+
display:inline-grid;
23+
background-color: white;
24+
text-align: center;
25+
}
26+
</style>

‎src/components/TodoFooter.vue

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<footer class="clearAllContainer">
3+
<span class="clearAllBtn" @click="clearTodo">Clear All</span>
4+
</footer>
5+
</template>
6+
7+
<script>
8+
export default {
9+
methods:{
10+
clearTodo() {
11+
this.$store.commit('clearAllItems');
12+
}
13+
}
14+
}
15+
</script>
16+
17+
<style scoped>
18+
.clearAllContainer {
19+
width: 8.5rem;
20+
height: 50px;
21+
line-height: 50px;
22+
background-color: white;
23+
border-radius: 5px;
24+
margin: 0 auto;
25+
}
26+
.clearAllBtn {
27+
color: #e20303;
28+
display: block;
29+
}
30+
</style>

‎src/components/TodoHeader.vue

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<header>
3+
<h1>TODO it!</h1>
4+
</header>
5+
</template>
6+
7+
<style scoped>
8+
h1 {
9+
color: #2F3B52;
10+
font-weight: 900;
11+
margin: 2.5rem 0 1.5rem;
12+
}
13+
</style>

‎src/components/TodoInput.vue

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<template>
2+
<div class = "inputBox shadow">
3+
<input type="text" v-model="newTodoItem" @keyup.enter = "addTodo">
4+
<span class = "addContainer" v-on:click = "addTodo">
5+
<i class="addBtn fas fa-plus" aria-hidden="true"></i>
6+
</span>
7+
<!-- use the modal component, pass in the prop -->
8+
<Modal v-if="showModal" @close="showModal = false">
9+
<!--
10+
you can use custom content here to overwrite
11+
default content
12+
-->
13+
<h3 slot="header">
14+
경고!
15+
<i class="fas fa-times closeModalBtn" @click="showModal = false"></i>
16+
</h3>
17+
<div slot="body">
18+
아무것도 입력하지 않으셨습니다.
19+
</div>
20+
21+
</Modal>
22+
</div>
23+
</template>
24+
25+
<script>
26+
import Modal from './common/Modal.vue'
27+
28+
export default {
29+
data() {
30+
return {
31+
newTodoItem: "",
32+
showModal: false
33+
}
34+
},
35+
methods: {
36+
addTodo() {
37+
if(this.newTodoItem !== '') {
38+
// this.$emit('addTodoItem', this.newTodoItem);
39+
this.$store.commit('addOneItem', this.newTodoItem);
40+
this.clearInput();
41+
}else {
42+
this.showModal = !this.showModal;
43+
}
44+
},
45+
clearInput() {
46+
this.newTodoItem = '';
47+
}
48+
},
49+
components: {
50+
Modal
51+
}
52+
}
53+
</script>
54+
55+
<style>
56+
57+
input:focus {
58+
outline: none;
59+
}
60+
.inputBox {
61+
background: white;
62+
height: 50px;
63+
line-height: 50px;
64+
border-radius: 5px;
65+
}
66+
.inputBox input {
67+
border-style: none;
68+
font-size: 0.9rem;
69+
}
70+
.addContainer {
71+
float: right;
72+
background: linear-gradient(to right, #6478FB, #8763FB);
73+
display: inline-block;
74+
width: 3rem;
75+
border-radius: 0 5px 5px 0;
76+
}
77+
.addBtn {
78+
color: white;
79+
vertical-align: middle;
80+
}
81+
.closeModalBtn {
82+
color: #42b983;
83+
}
84+
85+
</style>

‎src/components/TodoList.vue

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<template>
2+
<div>
3+
<transition-group name="list" tag="ul">
4+
<li v-for="(todoItem, index) in this.storedTodoItems" :key="todoItem.item" class="shadow">
5+
<span class="toggleBtn" type="button" @click="toggleComplete(todoItem, index)">
6+
<i class="fas fa-check checkBtn" :class="{checkBtnCompleted: todoItem.completed}" aria-hidden="true"></i>
7+
</span>
8+
<span :class="{textCompleted: todoItem.completed}">{{ todoItem.item }}</span>
9+
<span class="importanceIcon">
10+
<i class="far fa-star" aria-hidden="true"></i>
11+
</span>
12+
<span class="removeBtn" type="button" @click="removeTodo(todoItem, index)">
13+
<i class="far fa-trash-alt" aria-hidden="true"></i>
14+
</span>
15+
</li>
16+
</transition-group>
17+
</div>
18+
</template>
19+
20+
<script>
21+
import { mapGetters } from 'vuex'
22+
23+
export default {
24+
methods: {
25+
removeTodo(todoItem, index) {
26+
this.$store.commit('removeOneItem', {todoItem, index});
27+
},
28+
toggleComplete(todoItem, index) {
29+
this.$store.commit('toggleOneItem', {todoItem, index});
30+
}
31+
},
32+
computed: {
33+
...mapGetters(['storedTodoItems'])
34+
// getters의 메소드 이름과 computed에 명명하는 이름을 달리하고 싶을 때
35+
// ...mapGetters({
36+
// todoItems: 'storedTodoItems'
37+
// })
38+
}
39+
}
40+
</script>
41+
42+
<style scoped>
43+
ul {
44+
list-style-type: none;
45+
padding-left: 0px;
46+
margin-top: 0;
47+
text-align: left;
48+
}
49+
li {
50+
display: flex;
51+
min-height: 50px;
52+
height: 50px;
53+
line-height: 50px;
54+
margin: 0.5rem 0;
55+
padding: 0 0.9rem;
56+
background: white;
57+
border-radius: 5px;
58+
}
59+
.checkBtn {
60+
line-height: 45px;
61+
color: #62acde;
62+
margin-right: 5px;
63+
}
64+
.checkBtnCompleted {
65+
color: #b3adad;
66+
}
67+
.textCompleted {
68+
text-decoration: line-through;
69+
color: #b3adad;
70+
}
71+
.importanceIcon {
72+
margin-left: auto;
73+
color: #dfa018;
74+
}
75+
.removeBtn {
76+
margin-left: 7px;
77+
color: #de4343;
78+
}
79+
.list-enter-active, .list-leave-active {
80+
transition: all 1s;
81+
}
82+
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
83+
opacity: 0;
84+
transform: translateY(30px);
85+
}
86+
</style>

‎src/components/common/Modal.vue

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<template lang="html">
2+
<transition name="modal">
3+
<div class="modal-mask">
4+
<div class="modal-wrapper">
5+
<div class="modal-container">
6+
7+
<div class="modal-header">
8+
<slot name="header">
9+
default header
10+
</slot>
11+
</div>
12+
13+
<div class="modal-body">
14+
<slot name="body">
15+
default body
16+
</slot>
17+
</div>
18+
</div>
19+
</div>
20+
</div>
21+
</transition>
22+
</template>
23+
24+
<script>
25+
export default {
26+
}
27+
</script>
28+
29+
<style lang="css">
30+
.modal-mask {
31+
position: fixed;
32+
z-index: 9998;
33+
top: 0;
34+
left: 0;
35+
width: 100%;
36+
height: 100%;
37+
background-color: rgba(0, 0, 0, .5);
38+
display: table;
39+
transition: opacity .3s ease;
40+
}
41+
42+
.modal-wrapper {
43+
display: table-cell;
44+
vertical-align: middle;
45+
}
46+
47+
.modal-container {
48+
width: 300px;
49+
margin: 0px auto;
50+
padding: 20px 30px;
51+
background-color: #fff;
52+
border-radius: 2px;
53+
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
54+
transition: all .3s ease;
55+
font-family: Helvetica, Arial, sans-serif;
56+
}
57+
58+
.modal-header h3 {
59+
margin-top: 0;
60+
color: #42b983;
61+
}
62+
63+
.modal-body {
64+
margin: 20px 0;
65+
}
66+
67+
.modal-default-button {
68+
float: right;
69+
}
70+
71+
/*
72+
* The following styles are auto-applied to elements with
73+
* transition="modal" when their visibility is toggled
74+
* by Vue.js.
75+
*
76+
* You can easily play with the modal transition by editing
77+
* these styles.
78+
*/
79+
80+
.modal-enter {
81+
opacity: 0;
82+
}
83+
84+
.modal-leave-active {
85+
opacity: 0;
86+
}
87+
88+
.modal-enter .modal-container,
89+
.modal-leave-active .modal-container {
90+
-webkit-transform: scale(1.1);
91+
transform: scale(1.1);
92+
}
93+
</style>

‎src/main.js

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
1-
// The Vue build version to load with the `import` command
2-
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3-
import Vue from 'vue'
4-
import App from './App'
5-
import router from './router'
6-
7-
Vue.config.productionTip = false
8-
9-
/* eslint-disable no-new */
10-
new Vue({
11-
el: '#app',
12-
router,
13-
components: { App },
14-
template: '<App/>'
15-
})
1+
import Vue from 'vue'
2+
import App from './App.vue'
3+
import router from './router'
4+
import { store } from './store/store'
5+
6+
Vue.config.productionTip = false
7+
8+
new Vue({
9+
store,
10+
router,
11+
render: h => h(App)
12+
}).$mount('#app')

‎src/router.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import Vue from 'vue'
2+
import Router from 'vue-router'
3+
import Tasks from './views/Tasks.vue'
4+
5+
Vue.use(Router)
6+
7+
export default new Router({
8+
// nested-routing
9+
routes: [
10+
{
11+
path: '/',
12+
name: 'tasks',
13+
component: Tasks
14+
},
15+
{
16+
path: '/editor',
17+
name: 'editor',
18+
// route level code-splitting
19+
// this generates a separate chunk (about.[hash].js) for this route
20+
// which is lazy-loaded when the route is visited.
21+
component: () => import(/* webpackChunkName: "about" */ './views/Editor.vue')
22+
},
23+
{
24+
path: '/calendar',
25+
name: 'calendar',
26+
component: () => import('./views/Calendar.vue')
27+
}
28+
]
29+
})

‎src/store/store.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import Vue from 'vue'
2+
import Vuex from 'vuex'
3+
4+
Vue.use(Vuex);
5+
6+
const storage = {
7+
fetch() {
8+
const arr=[];
9+
if(localStorage.length > 0){
10+
for(let i=0; i < localStorage.length; i++){
11+
if(localStorage.key(i) !== 'loglevel:webpack-dev-server') {
12+
arr.push(JSON.parse(localStorage.getItem(localStorage.key(i))));
13+
// this.todoItems.push(localStorage.key(i));
14+
}
15+
}
16+
}
17+
return arr;
18+
}
19+
}
20+
21+
export const store = new Vuex.Store({
22+
state: {
23+
todoItems: storage.fetch(),
24+
},
25+
getters: {
26+
storedTodoItems(state) {
27+
return state.todoItems;
28+
}
29+
},
30+
mutations: {
31+
addOneItem(state, todoItem) {
32+
var obj = { completed: false, item: todoItem };
33+
localStorage.setItem(todoItem, JSON.stringify(obj));
34+
state.todoItems.push(obj);
35+
},
36+
removeOneItem(state, payload) {
37+
localStorage.removeItem(payload.todoItem.item);
38+
state.todoItems.splice(payload.index, 1);
39+
},
40+
toggleOneItem(state, payload) {
41+
state.todoItems[payload.index].completed = !state.todoItems[payload.index].completed;
42+
localStorage.removeItem(payload.todoItem.item);
43+
localStorage.setItem(payload.todoItem.item, JSON.stringify(payload.todoItem));
44+
},
45+
clearAllItems(state) {
46+
state.todoItems = [];
47+
localStorage.clear();
48+
}
49+
}
50+
});

‎src/views/Calendar.vue

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<TodoHeader></TodoHeader>
3+
</template>
4+
5+
<script>
6+
import TodoHeader from '@/components/TodoHeader.vue'
7+
8+
export default {
9+
components: {
10+
TodoHeader
11+
}
12+
}
13+
</script>
14+
15+
<style>
16+
17+
</style>

‎src/views/Editor.vue

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template>
2+
<div id="editor">
3+
<TodoHeader></TodoHeader>
4+
<section>
5+
<!-- 컴포넌트에는 자체 범위가 분리되어있기 때문에 컴포넌트에 데이터를 자동으로 전달하지는 않습니다. -->
6+
<!-- 반복할 데이터를 컴포넌트로 전달하려면 props도 사용해야합니다. -->
7+
<content-box v-for="todoItem in this.storedTodoItems" :propsdata="todoItem.item" :key="todoItem.item"></content-box>
8+
</section>
9+
</div>
10+
</template>
11+
12+
<script>
13+
import TodoHeader from '@/components/TodoHeader.vue'
14+
import ContentBox from '@/components/ContentBox.vue'
15+
import { mapGetters } from 'vuex'
16+
17+
export default {
18+
name: 'editor',
19+
components: {
20+
TodoHeader,
21+
'content-box': ContentBox
22+
},
23+
computed: {
24+
...mapGetters(['storedTodoItems'])
25+
// getters의 메소드 이름과 computed에 명명하는 이름을 달리하고 싶을 때
26+
// ...mapGetters({
27+
// todoItems: 'storedTodoItems'
28+
// })
29+
}
30+
}
31+
</script>
32+
33+
<style>
34+
35+
</style>

‎src/views/Tasks.vue

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<div id="tasks">
3+
<TodoHeader></TodoHeader>
4+
<TodoInput></TodoInput>
5+
<TodoList></TodoList>
6+
<TodoFooter></TodoFooter>
7+
</div>
8+
</template>
9+
10+
<script>
11+
import TodoHeader from '@/components/TodoHeader.vue'
12+
import TodoInput from '@/components/TodoInput.vue'
13+
import TodoList from '@/components/TodoList.vue'
14+
import TodoFooter from '@/components/TodoFooter.vue'
15+
16+
export default {
17+
// 네임드 뷰
18+
name: 'tasks',
19+
components: {
20+
TodoHeader,
21+
TodoInput,
22+
TodoList,
23+
TodoFooter
24+
}
25+
}
26+
</script>
27+
28+
<style>
29+
30+
</style>

0 commit comments

Comments
 (0)
Please sign in to comment.