vue: Board(WIP)

2021-09-05 03:59:00 +09:00
parent 4efb380a61
commit 1c985e227f
12 changed files with 472 additions and 190 deletions
@@ -0,0 +1,72 @@
+<template>
+  <table class="articleFrame bg0">
+    <thead>
+      <tr class="bg1">
+        <th class="authorName"></th>
+        <th class="articleTitle"></th>
+        <th class="date"></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><img class="authorIcon generalIcon" width="64" height="64" /></td>
+        <td class="text" colspan="2"></td>
+      </tr>
+    </tbody>
+    <tbody class="commentList">
+      <board-comment
+        v-for="comment in article.comment"
+        :key="comment.no"
+        :comment="comment"
+      />
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="bg2 inputCommentHeader">댓글 달기</td>
+        <td>
+          <input
+            class="commentText"
+            type="text"
+            maxlength="250"
+            placeholder="새 댓글 내용"
+            :value="newCommentText"
+          />
+        </td>
+        <td><button type="button" class="submitComment">등록</button></td>
+      </tr>
+    </tfoot>
+  </table>
+</template>
+<script lang="ts">
+import { BoardArticleItem } from "board.vue";
+import BoardComment from "./BoardComment.vue";
+import { defineComponent, PropType } from "vue";
+
+export default defineComponent({
+  name: "BoardArticle",
+  components: {
+    BoardComment,
+  },
+  data() {
+    return {
+      newCommentText: "",
+    };
+  },
+  props: {
+    article: {
+      type: Object as PropType<BoardArticleItem>,
+      required: true,
+    },
+  },
+  methods: {
+    submitComment() {
+      console.log(this.newCommentText);
+    },
+  },
+  /*
+  setup(props) {
+    toRef(props, "article");
+  },
+  */
+});
+</script>
@@ -0,0 +1,22 @@
+<template>
+  <tr class="comment">
+    <th class="author">{{ comment.author }}</th>
+    <td class="text">{{ comment.text }}</td>
+    <td class="date">{{ comment.date }}</td>
+    <!-- 삭제도 나중에 추가? -->
+  </tr>
+</template>
+<script lang="ts">
+import { BoardCommentItem } from "board.vue";
+import { defineComponent, PropType } from "vue";
+
+export default defineComponent({
+  name: "BoardComment",
+  props: {
+    comment: {
+      type: Object as PropType<BoardCommentItem>,
+      required: true,
+    },
+  },
+});
+</script>
@@ -0,0 +1,51 @@
+<template>
+  <table style="width: 1000px; margin: auto" class="tb_layout bg0">
+    <tr>
+      <td style="text-align: left">
+        {{title}}<br /><button
+          type="button"
+          class="btn btn-primary"
+          @click="back"
+        >돌아가기</button><br />
+      </td>
+    </tr>
+  </table>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+import "../../scss/game_bg.scss";
+
+export default defineComponent({
+  name: "TopBackBar",
+  methods: {
+    back(){
+      if(this.type === 'normal'){
+        location.href = './';
+      }
+      else if(this.type == 'chief'){
+        location.href = 'b_chiefcenter.php';
+      }
+      else{
+        //TODO: window.close하려면 부모창이 있어야함!
+        window.close();
+      }
+    }
+  },
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String as PropType<"normal"|"chief"|"close">,
+      default: "normal",
+      required: false,
+    },
+  },
+});
+</script>
+
+
+<style>
+</style>