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,25 +84,17 @@ export type BoardCommentItem = {
   text: string;
 };
 
-export default defineComponent({
+const props = defineProps({
-  name: "PageBoard",
-  components: {
-    TopBackBar,
-    BottomBar,
-    BoardArticle,
-  },
-  props: {
   isSecretBoard: {
     type: Boolean,
     required: true,
   },
-  },
+});
 
-  setup(props) {
+const newArticleTextForm = ref<HTMLInputElement>();
-    const newArticleTextForm = ref<HTMLInputElement>();
+const articles = reactive<BoardArticleItem[]>([]);
-    const articles = reactive<BoardArticleItem[]>([]);
 
-    const reloadArticles = async () => {
+const reloadArticles = async () => {
   let boardResponse: BoardResponse;
 
   try {
@@ -129,31 +120,20 @@ export default defineComponent({
   articles.length = 0;
   articles.push(...Object.values(boardResponse.articles));
   articles.reverse();
-    };
+};
 
-    onMounted(async () => {
+onMounted(async () => {
   await reloadArticles();
-    });
+});
 
-    return {
+const title = ref(props.isSecretBoard ? "기밀실" : "회의실");
-      newArticleTextForm,
+const newArticle = ref({
-      articles,
-      reloadArticles,
-    };
-  },
-  data() {
-    return {
-      title: this.isSecretBoard ? "기밀실" : "회의실",
-      newArticle: {
   title: "",
   text: "",
-      },
+});
-    };
+
-  },
+async function submitArticle() {
-  methods: {
+  const { title, text } = newArticle.value;
-    autoResizeTextarea,
-    async submitArticle() {
-      const { title, text } = this.newArticle;
   if (!title && !text) {
     return;
   }
@@ -166,7 +146,7 @@ export default defineComponent({
       method: "post",
       responseType: "json",
       data: convertFormData({
-            isSecret: this.isSecretBoard,
+        isSecret: props.isSecretBoard,
         title,
         text,
       }),
@@ -181,12 +161,11 @@ export default defineComponent({
     return;
   }
 
-      this.newArticle = { title: "", text: "" };
+  newArticle.value = { title: "", text: "" };
-      const newArticleTextForm = unwrap(this.newArticleTextForm);
+  if (newArticleTextForm.value !== undefined) {
-      newArticleTextForm.style.height = "auto";
+    newArticleTextForm.value.style.height = "auto";
+  }
 
-      await this.reloadArticles();
+  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",
-  props: {
   comment: {
     type: Object as PropType<BoardCommentItem>,
     required: true,
   },
-  },
 });
 </script>