From 677246734a6d27185d4230869fd7e8f9f1d06814 Mon Sep 17 00:00:00 2001
From: haerong22 <haerong22@naver.com>
Date: Mon, 1 Aug 2022 01:07:01 +0900
Subject: [PATCH] #14 simple blog : front - edit view

---
 simpleblog/front/src/router/index.ts    |  7 ++++
 simpleblog/front/src/views/EditView.vue | 53 +++++++++++++++++++++++++
 simpleblog/front/src/views/ReadView.vue |  9 +++++
 3 files changed, 69 insertions(+)
 create mode 100644 simpleblog/front/src/views/EditView.vue

diff --git a/simpleblog/front/src/router/index.ts b/simpleblog/front/src/router/index.ts
index 9e9c03c2..36cf67f0 100644
--- a/simpleblog/front/src/router/index.ts
+++ b/simpleblog/front/src/router/index.ts
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import WriteView from "../views/WriteView.vue";
 import ReadView from "../views/ReadView.vue";
+import EditView from "../views/EditView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -21,6 +22,12 @@ const router = createRouter({
       name: "read",
       component: ReadView,
       props: true,
+    },
+    {
+      path: "/edit/:postId",
+      name: "edit",
+      component: EditView,
+      props: true,
     }
     // {
     //   path: "/about",
diff --git a/simpleblog/front/src/views/EditView.vue b/simpleblog/front/src/views/EditView.vue
new file mode 100644
index 00000000..c9cc82cb
--- /dev/null
+++ b/simpleblog/front/src/views/EditView.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import {useRouter} from "vue-router";
+import {ref} from "vue";
+import axios from "axios";
+
+const router = useRouter();
+
+const post = ref({
+  id: 0,
+  title: "",
+  content: "",
+});
+
+const props = defineProps({
+  postId: {
+    type: [Number, String],
+    require: true,
+  },
+});
+
+axios.get(`/api/posts/${props.postId}`).then((response) => {
+  post.value = response.data;
+});
+
+const edit = () => {
+  axios.patch(`/api/posts/${props.postId}`, post.value).then(() => {
+    router.replace({ name: "home"})
+  });
+}
+
+</script>
+
+<template>
+
+  <div>
+    <div>
+      <el-input v-model="post.title" placeholder="제목을 입력해주세요." />
+    </div>
+
+    <div class="mt-2">
+      <el-input v-model="post.content" type="textarea" rows="15" />
+    </div>
+
+    <div class="mt-2">
+      <el-button type="warning" @click="edit()">수정완료</el-button>
+    </div>
+  </div>
+
+</template>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/simpleblog/front/src/views/ReadView.vue b/simpleblog/front/src/views/ReadView.vue
index 6bae4f65..f5664381 100644
--- a/simpleblog/front/src/views/ReadView.vue
+++ b/simpleblog/front/src/views/ReadView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {onMounted, ref} from "vue";
 import axios from "axios";
+import {useRouter} from "vue-router";
 
 const props = defineProps({
   postId: {
@@ -15,6 +16,12 @@ const post = ref({
   content: "",
 });
 
+const router = useRouter();
+
+const moveToEdit = () => {
+  router.push({ name: "edit", params: { postId: props.postId } })
+}
+
 onMounted(() => {
   axios.get(`/api/posts/${props.postId}`).then((response) => {
     post.value = response.data;
@@ -26,4 +33,6 @@ onMounted(() => {
 <template>
   <h2>{{ post.title }}</h2>
   <div>{{ post.content }}</div>
+
+  <el-button type="warning" @click="moveToEdit()">수정</el-button>
 </template>
\ No newline at end of file