fix,refac: 회의실에서 줄 바꿈이 표기 안되는 버그 수정

hwe/ts/PageBoard.vue

@@ -32,7 +32,7 @@
     </div>
     <div id="board">
       <template v-if="articles && articles.length">
-        <board-article
+        <BoardArticle
           v-for="article in articles"
           :key="article.no"
           :article="article"
@@ -46,8 +46,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref } from "vue";
 import TopBackBar from "@/components/TopBackBar.vue";
 import BottomBar from "@/components/BottomBar.vue";
 import BoardArticle from "@/components/BoardArticle.vue";
@@ -55,7 +55,6 @@ import { convertFormData } from "@util/convertFormData";
 import axios from "axios";
 import type { InvalidResponse } from "@/defs";
 import { autoResizeTextarea } from "@util/autoResizeTextarea";
-import { unwrap } from "@util/unwrap";
 export type BoardResponse = {
   result: true;
   articles: Record<number, BoardArticleItem>;
@@ -85,108 +84,88 @@ export type BoardCommentItem = {
   text: string;
 };
 
-export default defineComponent({
+const props = defineProps({
-  name: "PageBoard",
+  isSecretBoard: {
-  components: {
+    type: Boolean,
-    TopBackBar,
+    required: true,
-    BottomBar,
-    BoardArticle,
-  },
-  props: {
-    isSecretBoard: {
-      type: Boolean,
-      required: true,
-    },
-  },
-
-  setup(props) {
-    const newArticleTextForm = ref<HTMLInputElement>();
-    const articles = reactive<BoardArticleItem[]>([]);
-
-    const reloadArticles = async () => {
-      let boardResponse: BoardResponse;
-
-      try {
-        const response = await axios({
-          url: "j_board_get_articles.php",
-          responseType: "json",
-          method: "post",
-          data: convertFormData({
-            isSecret: props.isSecretBoard,
-          }),
-        });
-        const result: InvalidResponse | BoardResponse = response.data;
-        if (!result.result) {
-          throw result.reason;
-        }
-        boardResponse = result;
-      } catch (e) {
-        console.error(e);
-        alert(`에러: ${e}`);
-        return;
-      }
-
-      articles.length = 0;
-      articles.push(...Object.values(boardResponse.articles));
-      articles.reverse();
-    };
-
-    onMounted(async () => {
-      await reloadArticles();
-    });
-
-    return {
-      newArticleTextForm,
-      articles,
-      reloadArticles,
-    };
-  },
-  data() {
-    return {
-      title: this.isSecretBoard ? "기밀실" : "회의실",
-      newArticle: {
-        title: "",
-        text: "",
-      },
-    };
-  },
-  methods: {
-    autoResizeTextarea,
-    async submitArticle() {
-      const { title, text } = this.newArticle;
-      if (!title && !text) {
-        return;
-      }
-
-      let result: InvalidResponse;
-
-      try {
-        const response = await axios({
-          url: "j_board_article_add.php",
-          method: "post",
-          responseType: "json",
-          data: convertFormData({
-            isSecret: this.isSecretBoard,
-            title,
-            text,
-          }),
-        });
-        result = response.data;
-        if (!result.result) {
-          throw result.reason;
-        }
-      } catch (e) {
-        console.error(e);
-        alert(`실패했습니다. :${e}`);
-        return;
-      }
-
-      this.newArticle = { title: "", text: "" };
-      const newArticleTextForm = unwrap(this.newArticleTextForm);
-      newArticleTextForm.style.height = "auto";
-
-      await this.reloadArticles();
-    },
   },
 });
+
+const newArticleTextForm = ref<HTMLInputElement>();
+const articles = reactive<BoardArticleItem[]>([]);
+
+const reloadArticles = async () => {
+  let boardResponse: BoardResponse;
+
+  try {
+    const response = await axios({
+      url: "j_board_get_articles.php",
+      responseType: "json",
+      method: "post",
+      data: convertFormData({
+        isSecret: props.isSecretBoard,
+      }),
+    });
+    const result: InvalidResponse | BoardResponse = response.data;
+    if (!result.result) {
+      throw result.reason;
+    }
+    boardResponse = result;
+  } catch (e) {
+    console.error(e);
+    alert(`에러: ${e}`);
+    return;
+  }
+
+  articles.length = 0;
+  articles.push(...Object.values(boardResponse.articles));
+  articles.reverse();
+};
+
+onMounted(async () => {
+  await reloadArticles();
+});
+
+const title = ref(props.isSecretBoard ? "기밀실" : "회의실");
+const newArticle = ref({
+  title: "",
+  text: "",
+});
+
+async function submitArticle() {
+  const { title, text } = newArticle.value;
+  if (!title && !text) {
+    return;
+  }
+
+  let result: InvalidResponse;
+
+  try {
+    const response = await axios({
+      url: "j_board_article_add.php",
+      method: "post",
+      responseType: "json",
+      data: convertFormData({
+        isSecret: props.isSecretBoard,
+        title,
+        text,
+      }),
+    });
+    result = response.data;
+    if (!result.result) {
+      throw result.reason;
+    }
+  } catch (e) {
+    console.error(e);
+    alert(`실패했습니다. :${e}`);
+    return;
+  }
+
+  newArticle.value = { title: "", text: "" };
+  if (newArticleTextForm.value !== undefined) {
+    newArticleTextForm.value.style.height = "auto";
+  }
+
+  await reloadArticles();
+}
 </script>

hwe/ts/components/BoardArticle.vue

@@ -20,7 +20,7 @@
       </div>
     </div>
     <div class="commentList">
-      <board-comment v-for="comment in article.comment" :key="comment.no" :comment="comment" />
+      <BoardComment v-for="comment in article.comment" :key="comment.no" :comment="comment" />
     </div>
     <div class="row gx-0">
       <div class="bg2 inputCommentHeader center d-grid">
@@ -98,8 +98,8 @@ async function submitComment() {
 }
 </script>
 
-<style>
+<style scoped>
-td.text {
+.text {
   white-space: pre;
 }
 </style>

hwe/ts/components/BoardComment.vue

@@ -15,17 +15,14 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import type { BoardCommentItem } from "@/PageBoard.vue";
-import { defineComponent, type PropType } from "vue";
+import type { PropType } from "vue";
 
-export default defineComponent({
+defineProps({
-  name: "BoardComment",
+  comment: {
-  props: {
+    type: Object as PropType<BoardCommentItem>,
-    comment: {
+    required: true,
-      type: Object as PropType<BoardCommentItem>,
-      required: true,
-    },
   },
 });
 </script>