파일 이식(0.31.1)

2022-07-08 00:11:41 +09:00
parent db08cec2cb
commit 96d76a06ef
217 changed files with 29966 additions and 2 deletions
@@ -0,0 +1,105 @@
+<template>
+  <div class="articleFrame bg0">
+    <div class="bg1 row gx-0">
+      <div class="authorName center">
+        {{ article.author }}
+      </div>
+      <div class="col articleTitle center">
+        {{ article.title }}
+      </div>
+      <div class="col-2 col-md-1 date center">
+        {{ article.date.slice(5, 16) }}
+      </div>
+    </div>
+    <div class="row gx-0 s-border-b">
+      <div class="col-2 col-md-1 authorIcon center">
+        <img class="generalIcon" width="64" height="64" :src="article.author_icon" />
+      </div>
+      <div class="col text">
+        {{ article.text }}
+      </div>
+    </div>
+    <div class="commentList">
+      <board-comment v-for="comment in article.comment" :key="comment.no" :comment="comment" />
+    </div>
+    <div class="row gx-0">
+      <div class="bg2 inputCommentHeader center d-grid">
+        <div class="align-self-center">댓글 달기</div>
+      </div>
+      <div class="col d-grid">
+        <input
+          v-model.trim="newCommentText"
+          class="commentText"
+          type="text"
+          maxlength="250"
+          placeholder="새 댓글 내용"
+          @keyup.enter="submitComment"
+        />
+      </div>
+      <div class="col-2 col-md-1 d-grid">
+        <b-button class="submitComment" size="sm" @click="submitComment"> 등록 </b-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import type { BoardArticleItem } from "@/PageBoard.vue";
+import BoardComment from "@/components/BoardComment.vue";
+import { ref, type PropType } from "vue";
+import axios from "axios";
+import { convertFormData } from "@util/convertFormData";
+import type { InvalidResponse } from "@/defs";
+
+const newCommentText = ref("");
+
+const props = defineProps({
+  article: {
+    type: Object as PropType<BoardArticleItem>,
+    required: true,
+  },
+});
+
+const emit = defineEmits<{
+  (event: "submit-comment"): void;
+}>();
+
+async function submitComment() {
+  const comment = newCommentText.value;
+  if (!comment) {
+    return;
+  }
+  const articleNo = props.article.no;
+
+  let result: InvalidResponse;
+
+  try {
+    const response = await axios({
+      url: "j_board_comment_add.php",
+      method: "post",
+      responseType: "json",
+      data: convertFormData({
+        articleNo: articleNo,
+        text: comment,
+      }),
+    });
+    result = response.data;
+    if (!result.result) {
+      throw result.reason;
+    }
+  } catch (e) {
+    console.error(e);
+    alert(`실패했습니다: ${e}`);
+    return;
+  }
+
+  newCommentText.value = "";
+
+  emit("submit-comment");
+}
+</script>
+
+<style>
+td.text {
+  white-space: pre;
+}
+</style>