From 498ce1f0cdce1e8d3f86de00d0feeda05e5cf185 Mon Sep 17 00:00:00 2001
From: kimdaae328 <kimdaae328@gmail.com>
Date: Thu, 23 Jan 2025 11:15:55 +0900
Subject: [PATCH 01/12] =?UTF-8?q?=EC=BD=94=EB=A9=98=ED=8A=B8,=20=EC=A1=B0?=
 =?UTF-8?q?=ED=9A=8C=EC=88=98=20=EC=88=98=EC=A0=95=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                     | 19 +++++++++++++++++--
 package.json                          |  1 +
 src/components/board/BoardProfile.vue | 17 +++++++++++------
 3 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b68528b..7a47e84 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "front",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "front",
-      "version": "0.0.0",
+      "version": "0.0.1",
       "dependencies": {
         "@fullcalendar/core": "^6.1.15",
         "@fullcalendar/daygrid": "^6.1.15",
@@ -18,6 +18,7 @@
         "axios": "^1.7.9",
         "bootstrap": "^5.3.3",
         "dayjs": "^1.11.13",
+        "dompurify": "^3.2.3",
         "flatpickr": "^4.6.13",
         "front": "file:",
         "heic2any": "^0.0.4",
@@ -1483,6 +1484,12 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "optional": true
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.1.tgz",
@@ -2258,6 +2265,14 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.3.tgz",
+      "integrity": "sha512-U1U5Hzc2MO0oW3DF+G9qYN0aT7atAou4AgI0XjWz061nyBPbdxkfdhfy5uMgGn6+oLFCfn44ZGbdDqCzVmlOWA==",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
diff --git a/package.json b/package.json
index 638b6a7..823ef27 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "axios": "^1.7.9",
     "bootstrap": "^5.3.3",
     "dayjs": "^1.11.13",
+    "dompurify": "^3.2.3",
     "flatpickr": "^4.6.13",
     "front": "file:",
     "heic2any": "^0.0.4",
diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue
index c8a90c3..b79eece 100644
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@@ -10,13 +10,10 @@
                     <span>2024.12.10 10:46</span>
                     <template v-if="showDetail">
                         <span>
-                            <i class="fa-regular fa-eye"></i> 1
+                            <i class="fa-regular fa-eye"></i> {{ views }}
                         </span>
                         <span>
-                            <i class="fa-regular fa-thumbs-up"></i> 1
-                        </span>
-                        <span>
-                            <i class="fa-regular fa-thumbs-down"></i> 1
+                            <i class="bx bx-comment"></i> {{ comments }}
                         </span>
                     </template>
                 </div>
@@ -54,7 +51,7 @@ import { onMounted } from 'vue';
 const router = useRouter();
 
 // Props 정의
-defineProps({
+const props = defineProps({
     profileName: {
         type: String,
         default: '익명',
@@ -71,6 +68,14 @@ defineProps({
         type: Boolean,
         default: false,
     },
+    views: {
+        type: Number,
+        default: 0,
+    },
+    comments: {
+        type: Number,
+        default: 0,
+    },
 });
 
 const boardId = 100; //수정필요!!

From 02a542c12ec63a4316b917128570c9c8ddfa0583 Mon Sep 17 00:00:00 2001
From: kimdaae328 <kimdaae328@gmail.com>
Date: Thu, 23 Jan 2025 14:03:16 +0900
Subject: [PATCH 02/12] =?UTF-8?q?=EC=88=98=EC=A0=95=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardProfile.vue | 54 +++++++--------------------
 1 file changed, 14 insertions(+), 40 deletions(-)

diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue
index b79eece..5e925ec 100644
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@@ -1,40 +1,30 @@
 <template>
-    <div class="d-flex align-items-center flex-wrap">
+    <div class="d-flex flex-column flex-sm-row align-items-center">
         <div class="d-flex align-items-center">
+            <!-- 프로필 이미지 부분 -->
             <div class="avatar me-2" v-if="unknown">
                 <img src="/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
             </div>
             <div class="me-2">
                 <h6 class="mb-0">{{ profileName }}</h6>
-                <div class="profile-detail">
-                    <span>2024.12.10 10:46</span>
+                <div>
+                    <span class="me-3">2024.12.10 10:46</span>
                     <template v-if="showDetail">
-                        <span>
+                        <span class="me-2">
                             <i class="fa-regular fa-eye"></i> {{ views }}
                         </span>
-                        <span>
+                        <span class="me-2">
                             <i class="bx bx-comment"></i> {{ comments }}
                         </span>
                     </template>
                 </div>
             </div>
         </div>
-        <div class="ms-auto btn-area">
+        <div class="ms-auto w-100 mt-2 mt-sm-0">
             <template v-if="showDetail">
-                <EditButton @click="handleEdit" />
+                <EditButton @click="handleEdit" class="me-2" style="border:1px solid blue"/>
                 <DeleteButton @click="handleDelete" />
             </template>
-            <template v-else>
-                <template v-if="author">
-                    <button class="btn author btn-label-primary btn-icon" @click="handleEdit">
-                        <i class='bx bx-edit-alt'></i>
-                    </button>
-                    <button class="btn author btn-label-primary btn-icon" @click="handleDelete">
-                        <i class='bx bx-trash'></i>
-                    </button>
-                </template>
-                <BoardRecommendBtn :likeClicked="true" :dislikeClicked="false" />
-            </template>
         </div>
     </div>
 </template>
@@ -64,10 +54,10 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
-    author: {
-        type: Boolean,
-        default: false,
-    },
+    // author: {
+    //     type: Boolean,
+    //     default: true,
+    // },
     views: {
         type: Number,
         default: 0,
@@ -101,26 +91,10 @@ const handleDelete = async () => {
 </script>
 
 <style scoped>
-.profile-detail span ~ span {
-    margin-left: 5px;
-}
-
-.ms-auto button + button {
-    margin-left: 5px;
-}
-
-.btn.author {
-    height: 30px;
-}
-
-@media screen and (max-width: 450px) {
+/* @media screen and (max-width: 450px) {
     .btn-area {
         margin-top: 10px;
         width: 100%;
     }
-
-    .btn.author {
-        height: 30px;
-    }
-}
+} */
 </style>

From 8b38019b95098c5da844dca2f45556ec4607cb03 Mon Sep 17 00:00:00 2001
From: kimdaae328 <kimdaae328@gmail.com>
Date: Fri, 24 Jan 2025 12:26:46 +0900
Subject: [PATCH 03/12] =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=95=84,=20=EB=8C=93?=
 =?UTF-8?q?=EA=B8=80=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardComment.vue       | 94 ++++++++++++---------
 src/components/board/BoardCommentList.vue   | 52 ++++++++++++
 src/components/board/BoardProfile.vue       | 71 ++++++++++------
 src/components/button/BoardRecommendBtn.vue |  6 +-
 src/views/board/BoardView.vue               | 22 +++--
 5 files changed, 177 insertions(+), 68 deletions(-)
 create mode 100644 src/components/board/BoardCommentList.vue

diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue
index e71b3ee..a06851e 100644
--- a/src/components/board/BoardComment.vue
+++ b/src/components/board/BoardComment.vue
@@ -1,56 +1,74 @@
 <template>
-    <ul class="list-unstyled">
-        <li>
-            <BoardProfile profileName=곤데리 :showDetail="false" :author="true" />
-            <div class="mt-2">저도 궁금합니다.</div>
-            <PlusButton  @click="toggleComment"/>
-            <BoardComentArea v-if="comment" />
-            <ul class="list-unstyled twoDepth">
-                <li>
-                    <BoardProfile profileName=곤데리2 :showDetail="false" />
-                    <div class="mt-2">저도 궁금합니다.</div>
-                    <BoardComentArea v-if="comment" />
-                </li>
-            </ul>
-        </li>
-        <li>
-            <BoardProfile profileName=곤데리 :showDetail="false" />
-            <div class="mt-2">저도 궁금합니다.</div>
-            <PlusButton  @click="toggleComment"/>
-            <BoardComentArea v-if="comment" />
-        </li>
-        <li>
-            <BoardProfile profileName=곤데리 :showDetail="false" />
-            <div class="mt-2">저도 궁금합니다.</div>
-            <PlusButton  @click="toggleComment"/>
-            <BoardComentArea v-if="comment" />
-        </li>
-    </ul>
-    <Pagination/>
+    <div>
+        <BoardProfile :profileName="comment.author" :showDetail="false" :author="true" />
+        <div class="my-6">
+            <p>{{ comment.content }}</p>
+        </div>
+        <PlusButton v-if="isPlusButton" @click="toggleComment"/>
+        <BoardComentArea v-if="isComment" @submit="submitComment"/>
+        
+        <!-- 대댓글 -->
+        <ul v-if="comment.children && comment.children.length" class="list-unstyled">
+            <li
+                v-for="child in comment.children"
+                :key="child.id"
+                class="pt-6 ps-10 border-top"
+                style="border-color:blue !important;"
+            >
+                <BoardComment :comment="child" :isPlusButton="false" @submitComment="addChildComment" />
+            </li>
+        </ul>
+        <!-- <ul class="list-unstyled twoDepth">
+            <li>
+                <BoardProfile profileName=곤데리2 :showDetail="false" />
+                <div class="mt-2">저도 궁금합니다.</div>
+                <BoardComentArea v-if="comment" />
+            </li>
+        </ul> -->
+        <!-- <BoardProfile profileName=곤데리 :showDetail="false" />
+        <div class="mt-2">저도 궁금합니다.</div>
+        <PlusButton  @click="toggleComment"/>
+        <BoardComentArea v-if="comment" /> -->
+    </div>
 </template>
 
 <script setup>
-
 import BoardProfile from './BoardProfile.vue';
 import BoardComentArea from './BoardComentArea.vue';
-import { ref, computed } from 'vue';
-import Pagination from '../pagination/Pagination.vue';
 import PlusButton from '../button/PlusBtn.vue';
+import { ref } from 'vue';
 import { defineEmits } from 'vue';
 
-const comment = ref(false);
-
-const toggleComment = () => {
-    comment.value = !comment.value
-};
+const props = defineProps({
+  comment: {
+    type: Object,
+    required: true,
+  },
+  isPlusButton: {
+    type: Boolean,
+    default: true,
+  }
+});
 
 // emits 정의
 const emit = defineEmits(['submitComment']);
 
+// 댓글 입력 창 토글
+const isComment = ref(false);
+const toggleComment = () => {
+    isComment.value = !isComment.value;
+};
+
+// 부모 컴포넌트에 대댓글 추가 요청
+const addChildComment = (parentId, newComment) => {
+  emit('submitComment', parentId, newComment);
+};
+
+
 </script>
 
 <style scoped>
-    .twoDepth {
+    /* .twoDepth {
         margin-top: 10px;
         padding-left: 40px;
     }
@@ -66,5 +84,5 @@ const emit = defineEmits(['submitComment']);
     .btn-text-primary:active,
     .btn-text-primary:focus {
         background-color: transparent
-    }
+    } */
 </style>
diff --git a/src/components/board/BoardCommentList.vue b/src/components/board/BoardCommentList.vue
new file mode 100644
index 0000000..6384fa5
--- /dev/null
+++ b/src/components/board/BoardCommentList.vue
@@ -0,0 +1,52 @@
+<template>
+    <ul class="list-unstyled mt-10">
+        <li
+            v-for="comment in comments"
+            :key="comment.id"
+            class="mt-6 border-bottom"
+            style="border-color:red !important;"
+        >
+            <BoardComment :comment="comment" @submitComment="addComment" />
+        </li>
+    </ul>
+
+    <Pagination/>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Pagination from '../pagination/Pagination.vue';
+import BoardComment from './BoardComment.vue'
+
+const comments = ref([
+  {
+    id: 1,
+    author: '홍길동',
+    content: '저도 궁금합니다.',
+    children: [
+      {
+        id: 2,
+        author: '사용자1',
+        content: '저도요!',
+      },
+      {
+        id: 3,
+        author: '사용자2',
+        content: '저도..',
+      },
+    ],
+  },
+  {
+    id: 4,
+    author: '사용자4',
+    content: '흥미로운 주제네요.',
+    children: [],
+  },
+  {
+    id: 5,
+    author: '사용자5',
+    content: '우오아아아아아앙',
+    children: [],
+  },
+]);
+</script>
\ No newline at end of file
diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue
index 5e925ec..9640046 100644
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@@ -1,30 +1,45 @@
 <template>
-    <div class="d-flex flex-column flex-sm-row align-items-center">
+    <div class="d-flex align-items-center flex-wrap">
         <div class="d-flex align-items-center">
-            <!-- 프로필 이미지 부분 -->
             <div class="avatar me-2" v-if="unknown">
                 <img src="/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
             </div>
             <div class="me-2">
                 <h6 class="mb-0">{{ profileName }}</h6>
-                <div>
-                    <span class="me-3">2024.12.10 10:46</span>
+                <div class="profile-detail">
+                    <span>2024.12.10 10:46</span>
                     <template v-if="showDetail">
-                        <span class="me-2">
-                            <i class="fa-regular fa-eye"></i> {{ views }}
+                        <span>
+                            <i class="fa-regular fa-eye"></i> 1
                         </span>
-                        <span class="me-2">
-                            <i class="bx bx-comment"></i> {{ comments }}
+                        <span>
+                            <i class="fa-regular fa-thumbs-up"></i> 1
+                        </span>
+                        <span>
+                            <i class="fa-regular fa-thumbs-down"></i> 1
                         </span>
                     </template>
                 </div>
             </div>
         </div>
-        <div class="ms-auto w-100 mt-2 mt-sm-0">
+        <div class="ms-auto btn-area">
             <template v-if="showDetail">
-                <EditButton @click="handleEdit" class="me-2" style="border:1px solid blue"/>
+                <EditButton @click="handleEdit" />
                 <DeleteButton @click="handleDelete" />
             </template>
+            <template v-else>
+                <template v-if="author">
+                    <EditButton />
+                    <DeleteButton />
+                    <!-- <button class="btn author btn-label-primary btn-icon" @click="handleEdit">
+                        <i class='bx bx-edit-alt'></i>
+                    </button>
+                    <button class="btn author btn-label-primary btn-icon" @click="handleDelete">
+                        <i class='bx bx-trash'></i>
+                    </button> -->
+                </template>
+                <BoardRecommendBtn :likeClicked="true" :dislikeClicked="false" :isRecommend="false" />
+            </template>
         </div>
     </div>
 </template>
@@ -41,7 +56,7 @@ import { onMounted } from 'vue';
 const router = useRouter();
 
 // Props 정의
-const props = defineProps({
+defineProps({
     profileName: {
         type: String,
         default: '익명',
@@ -54,17 +69,9 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
-    // author: {
-    //     type: Boolean,
-    //     default: true,
-    // },
-    views: {
-        type: Number,
-        default: 0,
-    },
-    comments: {
-        type: Number,
-        default: 0,
+    author: {
+        type: Boolean,
+        default: false,
     },
 });
 
@@ -91,10 +98,26 @@ const handleDelete = async () => {
 </script>
 
 <style scoped>
-/* @media screen and (max-width: 450px) {
+.profile-detail span ~ span {
+    margin-left: 5px;
+}
+
+.ms-auto button + button {
+    margin-left: 5px;
+}
+
+.btn.author {
+    height: 30px;
+}
+
+@media screen and (max-width: 450px) {
     .btn-area {
         margin-top: 10px;
         width: 100%;
     }
-} */
+
+    .btn.author {
+        height: 30px;
+    }
+}
 </style>
diff --git a/src/components/button/BoardRecommendBtn.vue b/src/components/button/BoardRecommendBtn.vue
index d2452b1..71fae76 100644
--- a/src/components/button/BoardRecommendBtn.vue
+++ b/src/components/button/BoardRecommendBtn.vue
@@ -1,4 +1,4 @@
-<template>
+<template v-if="isRecommend">
     <button class="btn btn-label-primary btn-icon" :class="likeClicked ? 'clicked' : '', bigBtn ? 'big' : '' ">
         <i class="fa-regular fa-thumbs-up"></i> <span class="num">1</span>
     </button>
@@ -20,6 +20,10 @@ defineProps({
     bigBtn : {
         type :Boolean,
         default : false,
+    },
+    isRecommend: {
+        type:Boolean,
+        default:true,
     }
 });
 </script>
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index fd20dc0..a33324a 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -6,6 +6,7 @@
                     <!-- 프로필 헤더 -->
                     <div class="card-header">
                         <BoardProfile :boardId="currentBoardId" :profileName="profileName" />
+                        <hr/>
                     </div>
                     <!-- 게시글 내용 -->
                     <div class="card-body">
@@ -14,20 +15,29 @@
                         <div class="board-content text-body" style="line-height: 1.6;"  v-html="$common.contentToHtml(boardContent)">
 
                         </div>
+                        
+                        <!-- 좋아요 버튼 -->
+                        <div class="row justify-content-center my-10">
+                            <BoardRecommendBtn :bigBtn="true"/>
+                        </div>
+
                         <!-- 첨부파일 목록 -->
                         <ul v-if="attachments.length" class="attachments mt-4 list-unstyled">
                             <li v-for="(attachment, index) in attachments" :key="index" class="mb-2">
                                 <a :href="attachment.url" target="_blank" class="text-decoration-none">{{ attachment.name }}</a>
                             </li>
                         </ul>
+
                         <!-- 댓글 영역 -->
                         <BoardComentArea :comments="comments" />
-                    </div>
-                    <!-- 수정 버튼 -->
-                    <div class="card-footer d-flex justify-content-end">
-                        <button class="btn btn-primary" @click="goToEditPage">
+
+                        <!-- 수정 버튼 -->
+                        <!-- <button class="btn btn-primary" @click="goToEditPage">
                             글 수정
-                        </button>
+                        </button> -->
+                    </div>
+                    <div class="card-footer">
+                        <BoardCommentList/>
                     </div>
                 </div>
             </div>
@@ -37,7 +47,9 @@
 
 <script setup>
 import BoardComentArea from '@c/board/BoardComentArea.vue';
+import BoardCommentList from '@/components/board/BoardCommentList.vue';
 import BoardProfile from '@c/board/BoardProfile.vue';
+import BoardRecommendBtn from '@/components/button/BoardRecommendBtn.vue';
 import { ref, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import axios from '@api';

From dd9a94e3a938de648ef7b2ba515bb5b1ca93fbe4 Mon Sep 17 00:00:00 2001
From: kimdaae328 <kimdaae328@gmail.com>
Date: Fri, 24 Jan 2025 14:09:09 +0900
Subject: [PATCH 04/12] =?UTF-8?q?=EB=A7=90=EC=A4=84=EC=9E=84=20=EB=B0=8F?=
 =?UTF-8?q?=20=EC=BB=A8=ED=85=90=EC=B8=A0=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/list/BoardCard.vue | 3 ++-
 src/views/board/BoardList.vue     | 2 ++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/list/BoardCard.vue b/src/components/list/BoardCard.vue
index 456aa3e..e7468f0 100644
--- a/src/components/list/BoardCard.vue
+++ b/src/components/list/BoardCard.vue
@@ -25,7 +25,7 @@
                         </span>
                     </h5>
                     <!-- 본문 -->
-                    <div class="card-text str_wrap" v-html="$common.contentToHtml(content)"></div>
+                    <div class="card-text str_wrap my-5">{{ content }}</div>
                     <!-- 날짜 -->
                     <div class="d-flex justify-content-between">
                         <small class="text-muted">{{ formattedDate }}</small>
@@ -125,6 +125,7 @@ const formattedDate = computed(() => {
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
+    -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
 }
 
diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue
index 87c4d0a..a56cc80 100644
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@@ -136,6 +136,7 @@ const fetchGeneralPosts = async (page = 1) => {
             likes: post.likeCount != null ? post.likeCount : null,
             comments: post.commentCount != null ? post.commentCount : null,
             attachment: post.hasAttachment || false,
+            content: post.plainContent || '',
         }));
 
         // 페이지네이션 정보 업데이트
@@ -173,6 +174,7 @@ const fetchNoticePosts = async () => {
             img: post.img || null,
             views: post.cnt || 0,
             attachment: post.hasAttachment || false,
+            content: post.plainContent || '',
         }));
     } else {
         console.error("데이터 오류:", response.data);

From 88c90718281954cb02d4e64e28bd8c37ed81b6d3 Mon Sep 17 00:00:00 2001
From: kimdaae328 <kimdaae328@gmail.com>
Date: Fri, 24 Jan 2025 15:15:49 +0900
Subject: [PATCH 05/12] =?UTF-8?q?=EB=9D=BC=EC=9D=B8=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardComment.vue     | 3 +--
 src/components/board/BoardCommentList.vue | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue
index a06851e..30bb704 100644
--- a/src/components/board/BoardComment.vue
+++ b/src/components/board/BoardComment.vue
@@ -12,8 +12,7 @@
             <li
                 v-for="child in comment.children"
                 :key="child.id"
-                class="pt-6 ps-10 border-top"
-                style="border-color:blue !important;"
+                class="pt-6 ps-10"
             >
                 <BoardComment :comment="child" :isPlusButton="false" @submitComment="addChildComment" />
             </li>
diff --git a/src/components/board/BoardCommentList.vue b/src/components/board/BoardCommentList.vue
index 6384fa5..3288f6b 100644
--- a/src/components/board/BoardCommentList.vue
+++ b/src/components/board/BoardCommentList.vue
@@ -3,8 +3,7 @@
         <li
             v-for="comment in comments"
             :key="comment.id"
-            class="mt-6 border-bottom"
-            style="border-color:red !important;"
+            class="mt-6"
         >
             <BoardComment :comment="comment" @submitComment="addComment" />
         </li>

From b4df01f01c03096a1d386bb473448d05eda09bb8 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Fri, 24 Jan 2025 15:35:11 +0900
Subject: [PATCH 06/12] =?UTF-8?q?=ED=8C=8C=EC=9D=BC=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EB=A8=B8=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/FormFile.vue | 43 +++++++++++++++++++++----------
 1 file changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/components/input/FormFile.vue b/src/components/input/FormFile.vue
index 71070db..bc45bea 100644
--- a/src/components/input/FormFile.vue
+++ b/src/components/input/FormFile.vue
@@ -10,14 +10,15 @@
                 multiple
             />
             <div v-if="showError" class="text-danger mt-1">
-                {{ errorMsg }}
+                {{ errorMessage }}
             </div>
         </div>
     </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { ref ,computed} from 'vue';
+import { fileMsg } from '@/common/msgEnum';
 
 // Props
 const prop = defineProps({
@@ -38,27 +39,43 @@ const prop = defineProps({
     },
 });
 
-// Emits
 const emits = defineEmits(['update:data', 'update:isValid']);
 
-// Constants
 const MAX_TOTAL_SIZE = 5 * 1024 * 1024; // 5MB
-const errorMsg = ref('첨부파일의 총 용량이 5MB를 초과합니다.');
-const showError = ref(false);
+const MAX_FILE_COUNT = 5; // 최대 파일 개수
+const ALLOWED_FILE_TYPES = ['image/jpeg', 'image/png', 'application/pdf']; // 허용된 파일 유형
+
+const showError = ref(false);
+const fileMsgKey = ref(''); // 에러 메시지 키
 
-// Change Handler
 const changeHandler = (event) => {
     const files = Array.from(event.target.files);
     const totalSize = files.reduce((sum, file) => sum + file.size, 0);
+    const invalidFiles = files.filter(file => !ALLOWED_FILE_TYPES.includes(file.type));
 
+    // 파일 검증 로직
     if (totalSize > MAX_TOTAL_SIZE) {
-        showError.value = true; // 에러 메시지 표시
-        emits('update:data', []); // 부모 컴포넌트로 빈 배열 전달
-        emits('update:isValid', false); // 유효하지 않은 상태 전달
+        showError.value = true;
+        fileMsgKey.value = 'FileMaxSizeMsg';
+        emits('update:data', []);
+        emits('update:isValid', false);
+    } else if (files.length > MAX_FILE_COUNT) {
+        showError.value = true;
+        fileMsgKey.value = 'FileMaxLengthMsg';
+        emits('update:data', []);
+        emits('update:isValid', false);
+    } else if (invalidFiles.length > 0) {
+        showError.value = true;
+        fileMsgKey.value = 'FileNotTypeMsg';
+        emits('update:data', []);
+        emits('update:isValid', false);
     } else {
-        showError.value = false; // 에러 메시지 숨기기
-        emits('update:data', files); // 부모 컴포넌트로 파일 전달
-        emits('update:isValid', true); // 유효한 상태 전달
+        showError.value = false;
+        fileMsgKey.value = '';
+        emits('update:data', files);
+        emits('update:isValid', true);
     }
 };
+
+const errorMessage = computed(() => (fileMsg[fileMsgKey.value] || ''));
 </script>

From e4df1117250f55bda318f60fe531722a3889126e Mon Sep 17 00:00:00 2001
From: kimdaae328 <kimdaae328@gmail.com>
Date: Fri, 24 Jan 2025 15:39:30 +0900
Subject: [PATCH 07/12] =?UTF-8?q?=EC=8D=B8=EB=84=A4=EC=9D=BC=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/list/BoardCard.vue | 8 ++++----
 src/views/board/BoardList.vue     | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/list/BoardCard.vue b/src/components/list/BoardCard.vue
index e7468f0..1ddac0f 100644
--- a/src/components/list/BoardCard.vue
+++ b/src/components/list/BoardCard.vue
@@ -2,7 +2,7 @@
     <div class="card mb-3 shadow-sm">
         <div class="row g-0">
             <!-- 이미지 섹션 -->
-            <div v-if="img" class="col-md-2">
+            <div v-if="img" class="col-sm-2">
                 <img
                     :src="img"
                     alt="이미지"
@@ -27,10 +27,10 @@
                     <!-- 본문 -->
                     <div class="card-text str_wrap my-5">{{ content }}</div>
                     <!-- 날짜 -->
-                    <div class="d-flex justify-content-between">
+                    <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start">
                         <small class="text-muted">{{ formattedDate }}</small>
                         <!-- 조회수, 좋아요, 댓글 -->
-                        <div>
+                        <div class="d-flex mt-2 mt-sm-0">
                             <span class="text-muted me-3">
                                 <i class="fa-regular fa-eye"></i> {{ views || 0 }}
                             </span>
@@ -94,7 +94,7 @@ const props = defineProps({
 
 // computed 속성
 const contentColClass = computed(() => {
-    return props.img ? 'col-md-10 col-12' : 'col-md-12';
+    return props.img ? 'col-sm-10 col-12' : 'col-sm-12';
 });
 
 // formattedDate을 computed로 정의
diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue
index a56cc80..3b173dc 100644
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@@ -131,7 +131,7 @@ const fetchGeneralPosts = async (page = 1) => {
         generalList.value = data.list.map((post, index) => ({
             ...post,
             id: post.id || index,
-            img: post.img || null,
+            img: post.firstImageUrl || null,
             views: post.cnt || 0,
             likes: post.likeCount != null ? post.likeCount : null,
             comments: post.commentCount != null ? post.commentCount : null,
@@ -171,7 +171,7 @@ const fetchNoticePosts = async () => {
         noticeList.value = response.data.data.map((post, index) => ({
             ...post,
             id: post.id || index,
-            img: post.img || null,
+            img: post.firstImageUrl || null,
             views: post.cnt || 0,
             attachment: post.hasAttachment || false,
             content: post.plainContent || '',

From dbc0ad83ae34561fafafc56dfedfd83af6ecfd57 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Mon, 3 Feb 2025 10:48:21 +0900
Subject: [PATCH 08/12] =?UTF-8?q?=EB=B3=B4=EB=93=9C=EB=A6=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20width=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/board/BoardList.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue
index 3b173dc..1c1c2c3 100644
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@@ -1,21 +1,20 @@
 <template>
-    <div class="container-xxl flex-grow-1 container-p-y">
+    <div class="container flex-grow-1 container-p-y">
         <div class="row mb-4">
             <!-- 검색창 -->
-            <div class="col">
+            <div class="container col-9 px-10 ">
                 <search-bar @update:data="search" />
             </div>
-        </div>
-
-        <div class="row">
             <!-- 새 글쓰기 -->
-            <div class="mb-4">
+            <div class="container col-1 px-12 py-2">
                 <router-link to="/board/write">
                     <WriteButton />
                 </router-link>
             </div>
         </div>
 
+        <div class="container flex-grow-1 container-p-y col-11">
+
         <!-- 공지사항 리스트 -->
         <div v-if="pagination.currentPage === 1" class="mb-8">
             <div class="row g-3">
@@ -65,6 +64,7 @@
             </div>
         </div>
     </div>
+    </div>
 </template>
 
 <script setup>

From f853c4e25d21466ea925da309e30403be9f44e3b Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Mon, 3 Feb 2025 14:31:48 +0900
Subject: [PATCH 09/12] =?UTF-8?q?board-view-profile1=20=EB=A8=B8=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardProfile.vue |  28 +++-
 src/components/list/BoardCard.vue     | 202 ++++++++++++--------------
 src/components/list/BoardCardList.vue |  18 ++-
 src/views/board/BoardList.vue         |  34 ++---
 src/views/board/BoardView.vue         |  88 +++++++++--
 5 files changed, 210 insertions(+), 160 deletions(-)

diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue
index 9640046..c15a60b 100644
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@@ -10,13 +10,13 @@
                     <span>2024.12.10 10:46</span>
                     <template v-if="showDetail">
                         <span>
-                            <i class="fa-regular fa-eye"></i> 1
+                            <i class="fa-regular fa-eye"></i> {{ views }}
                         </span>
                         <span>
-                            <i class="fa-regular fa-thumbs-up"></i> 1
+                            <i class="fa-regular fa-thumbs-up"></i> {{ likes }}
                         </span>
                         <span>
-                            <i class="fa-regular fa-thumbs-down"></i> 1
+                            <i class="fa-regular fa-thumbs-down"></i> {{ dislikes }}
                         </span>
                     </template>
                 </div>
@@ -38,7 +38,7 @@
                         <i class='bx bx-trash'></i>
                     </button> -->
                 </template>
-                <BoardRecommendBtn :likeClicked="true" :dislikeClicked="false" :isRecommend="false" />
+                <BoardRecommendBtn v-if="!isChild" :isRecommend="false" />
             </template>
         </div>
     </div>
@@ -50,13 +50,12 @@ import axios from '@api';
 import DeleteButton from '../button/DeleteBtn.vue';
 import EditButton from '../button/EditBtn.vue';
 import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
-import { onMounted } from 'vue';
 
 // Vue Router 인스턴스
 const router = useRouter();
 
 // Props 정의
-defineProps({
+const props = defineProps({
     profileName: {
         type: String,
         default: '익명',
@@ -73,6 +72,22 @@ defineProps({
         type: Boolean,
         default: false,
     },
+    views: {
+        type: Number,
+        default: 0,
+    },
+    likes: {
+        type: Number,
+        default: null,
+    },
+    dislikes: {
+        type: Number,
+        default: null,
+    },
+    isChild: {
+        type: Boolean,
+        default: false,
+    }
 });
 
 const boardId = 100; //수정필요!!
@@ -89,7 +104,6 @@ const handleDelete = async () => {
             alert('게시물이 성공적으로 삭제되었습니다.');
             router.push({ name: 'BoardList' });
         } catch (error) {
-            console.error('게시물 삭제 중 오류 발생:', error);
             alert('게시물 삭제에 실패했습니다.');
         }
     }
diff --git a/src/components/list/BoardCard.vue b/src/components/list/BoardCard.vue
index 1ddac0f..3f22a7d 100644
--- a/src/components/list/BoardCard.vue
+++ b/src/components/list/BoardCard.vue
@@ -1,142 +1,124 @@
 <template>
-    <div class="card mb-3 shadow-sm">
-        <div class="row g-0">
-            <!-- 이미지 섹션 -->
-            <div v-if="img" class="col-sm-2">
-                <img
-                    :src="img"
-                    alt="이미지"
-                    class="img-fluid rounded-start"
-                    style="object-fit: cover; height: 100%; width: 100%;"
-                />
-            </div>
-            <!-- 게시물 내용 섹션 -->
-            <div :class="contentColClass">
-                <div class="card-body">
-                    <!-- 태그 -->
-                    <h6 class="badge rounded-pill bg-primary text-white mb-2">
-                        {{ category }}
-                    </h6>
-                    <!-- 제목 -->
-                    <h5 class="card-title">
-                        {{ title }}
-                        <span class="text-muted me-3" v-if="attachment">
-                            <i class="fa-solid fa-paperclip"></i>
-                        </span>
-                    </h5>
-                    <!-- 본문 -->
-                    <div class="card-text str_wrap my-5">{{ content }}</div>
-                    <!-- 날짜 -->
-                    <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start">
-                        <small class="text-muted">{{ formattedDate }}</small>
-                        <!-- 조회수, 좋아요, 댓글 -->
-                        <div class="d-flex mt-2 mt-sm-0">
-                            <span class="text-muted me-3">
-                                <i class="fa-regular fa-eye"></i> {{ views || 0 }}
-                            </span>
-                            <span class="text-muted me-3" v-if="likes != null">
-                                <i class="bx bx-like"></i> {{ likes }}
-                            </span>
-                            <span class="text-muted" v-if="comments !== null">
-                                <i class="bx bx-comment"></i> {{ comments }}
-                            </span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+    <div class="card mb-3 shadow-sm fixed-card" style="width: 18rem;">
+      <!-- 이미지가 있을 경우 card-img-top으로 표시 -->
+      <img
+        v-if="img"
+        :src="img"
+        class="card-img-top"
+        alt="이미지"
+        style="object-fit: cover; height: 100px;"
+      />
+      <div class="card-body">
+        <!-- 카테고리 태그 (존재할 경우) -->
+        <h6 v-if="category" class="badge rounded-pill bg-primary text-white mb-2">
+          {{ category }}
+        </h6>
+        <!-- 제목과 첨부파일 아이콘 -->
+        <h5 class="card-title">
+          {{ title }}
+          <span class="text-muted" v-if="attachment">
+            <i class="fa-solid fa-paperclip"></i>
+          </span>
+        </h5>
+        <!-- 본문 -->
+        <p class="card-text limit-two-lines">{{ content }}</p>
+        <!-- 날짜 및 조회수, 좋아요, 댓글 -->
+        <p class="card-text">
+          <small class="text-muted">{{ formattedDate }}</small>
+          <div class="d-flex mt-2 mt-sm-0">
+            <span class="text-muted me-3">
+              <i class="fa-regular fa-eye"></i> {{ views || 0 }}
+            </span>
+            <span class="text-muted me-3" v-if="comments !== null">
+              <i class="bx bx-comment"></i> {{ comments }}
+            </span>
+            <span class="text-muted me-3" v-if="likes != null">
+              <i class="bx bx-like"></i> {{ likes }}
+            </span>
+            <span class="text-muted me-3" v-if="dislikes != null">
+              <i class="bx bx-dislike"></i> {{ dislikes }}
+            </span>
+          </div>
+        </p>
+      </div>
     </div>
-</template>
+  </template>
 
-<script setup>
-import { computed } from 'vue';
-import { defineProps } from 'vue';
+  <script setup>
+  import { computed } from 'vue';
+  import { defineProps } from 'vue';
 
-// Props 정의
-const props = defineProps({
+  const props = defineProps({
     img: {
-        type: String,
-        default: null,
+      type: String,
+      default: null,
     },
     category: {
-        type: String,
-        required: false,
+      type: String,
+      required: false,
     },
     title: {
-        type: String,
-        required: true,
+      type: String,
+      required: true,
     },
     content: {
-        type: String,
-        required: true,
+      type: String,
+      required: true,
     },
     date: {
-        type: String,
-        required: true,
+      type: String,
+      required: true,
     },
     views: {
-        type: Number,
-        default: 0,
+      type: Number,
+      default: 0,
     },
     likes: {
-        type: Number,
-        default: null,
+      type: Number,
+      default: null,
+    },
+    dislikes: {
+      type: Number,
+      default: null,
     },
     comments: {
-        type: Number,
-        default: null,
+      type: Number,
+      default: null,
     },
     attachment: {
-        type: Boolean,
-        default: false,
+      type: Boolean,
+      default: false,
     }
-});
+  });
 
-// computed 속성
-const contentColClass = computed(() => {
-    return props.img ? 'col-sm-10 col-12' : 'col-sm-12';
-});
+  const formattedDate = computed(() => {
+    const dateObj = new Date(props.date);
+    return `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')} ${String(dateObj.getHours()).padStart(2, '0')}:${String(dateObj.getMinutes()).padStart(2, '0')}`;
+  });
+  </script>
 
-// formattedDate을 computed로 정의
-const formattedDate = computed(() => {
-    const date = new Date(props.date);
-    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(
-        date.getDate()
-    ).padStart(2, "0")} ${String(date.getHours()).padStart(2, "0")}:${String(
-        date.getMinutes()
-    ).padStart(2, "0")}`;
-});
-</script>
-
-<style>
-/* 카드 스타일 */
-.card {
+  <style scoped>
+  .card {
     border: 1px solid #e6e6e6;
     border-radius: 8px;
     transition: transform 0.2s ease-in-out;
-}
+  }
 
-.card:hover {
+  .card:hover {
     transform: scale(1.02);
-}
+  }
 
-/* 텍스트 줄임 표시 */
-.str_wrap {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-}
+  /* card-img-top의 모서리 둥글게 처리 */
+  .card-img-top {
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+  }
 
-/* 이미지 스타일 */
-.img-fluid {
-    border-radius: 8px 0 0 8px;
+  /* 내용 텍스트를 두 줄로 제한 */
+.limit-two-lines {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
-
-/* 태그 배지 스타일 */
-.badge {
-    font-size: 0.8rem;
-    padding: 5px 10px;
-}
-</style>
+  </style>
diff --git a/src/components/list/BoardCardList.vue b/src/components/list/BoardCardList.vue
index f727c6e..430a73d 100644
--- a/src/components/list/BoardCardList.vue
+++ b/src/components/list/BoardCardList.vue
@@ -1,21 +1,25 @@
 <template>
-    <div class="mt-4">
+     <div class="container my-4">
+        <div class="row">
         <div v-if="posts.length === 0" class="text-center">
             <p class="text-muted mt-4">게시물이 없습니다.</p>
         </div>
-        <div v-for="post in posts" :key="post.id" @click="handleClick(post.id)">
+        <div class="col-md-3 mb-4 d-flex justify-content-center" v-for="post in posts" :key="post.id" @click="handleClick(post.id)">
             <BoardCard
-                :img="post.img || null" 
-                :category="post.category || ''" 
+                :img="post.img || null"
+                :category="post.category || ''"
                 :title="post.title"
                 :content="post.content"
                 :date="post.date"
-                :views="post.views || 0" 
+                :views="post.views || 0"
+                :likes="post.likes"
+                :dislikes="post.dislikes"
                 v-bind="getBoardCardProps(post)"
-                :attachment="post.attachment || false" 
-                @click="() => goDetail(post.id)" 
+                :attachment="post.attachment || false"
+                @click="() => goDetail(post.id)"
                 />
         </div>
+        </div>
     </div>
 </template>
 
diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue
index 1c1c2c3..89eb2e8 100644
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@@ -2,7 +2,7 @@
     <div class="container flex-grow-1 container-p-y">
         <div class="row mb-4">
             <!-- 검색창 -->
-            <div class="container col-9 px-10 ">
+            <div class="container col-11 px-10 ">
                 <search-bar @update:data="search" />
             </div>
             <!-- 새 글쓰기 -->
@@ -13,23 +13,7 @@
             </div>
         </div>
 
-        <div class="container flex-grow-1 container-p-y col-11">
-
-        <!-- 공지사항 리스트 -->
-        <div v-if="pagination.currentPage === 1" class="mb-8">
-            <div class="row g-3">
-                <h3>공지사항</h3>
-            </div>
-            <div class="row">
-                <BoardCardList :posts="noticeList" @click="goDetail" />
-            </div>
-        </div>
-
-        <!-- 일반 리스트 -->
-        <div>
-            <div class="row g-3">
-                <h3 class="col">일반게시판</h3>
-
+        <div class="row g-3">
                 <!-- 셀렉트 박스 -->
                 <div class="col-12 col-md-auto">
                     <select class="form-select" v-model="selectedOrder" @change="handleSortChange">
@@ -38,6 +22,16 @@
                     </select>
                 </div>
             </div>
+
+        <!-- 공지사항 리스트 -->
+        <div v-if="pagination.currentPage === 1" class="mb-8">
+            <div class="row">
+                <BoardCardList :posts="noticeList" @click="goDetail" />
+            </div>
+        </div>
+
+        <!-- 일반 리스트 -->
+        <div>
             <div class="row">
                 <BoardCardList :posts="generalList" @click="goDetail" />
             </div>
@@ -64,7 +58,6 @@
             </div>
         </div>
     </div>
-    </div>
 </template>
 
 <script setup>
@@ -133,7 +126,8 @@ const fetchGeneralPosts = async (page = 1) => {
             id: post.id || index,
             img: post.firstImageUrl || null,
             views: post.cnt || 0,
-            likes: post.likeCount != null ? post.likeCount : null,
+            likes: post.likeCount != null ? post.dislikeCount : null,
+            dislikes: post.dislikeCount != null ? post.likeCount : null,
             comments: post.commentCount != null ? post.commentCount : null,
             attachment: post.hasAttachment || false,
             content: post.plainContent || '',
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index a33324a..2f0ff56 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -5,28 +5,62 @@
                 <div class="card">
                     <!-- 프로필 헤더 -->
                     <div class="card-header">
-                        <BoardProfile :boardId="currentBoardId" :profileName="profileName" />
-                        <hr/>
+                        <BoardProfile
+                            :boardId="currentBoardId"
+                            :profileName="profileName"
+                            :views="views"
+                            :likes="likes"
+                            :dislikes="dislikes"
+                            class="pb-6 border-bottom"
+                        />
                     </div>
                     <!-- 게시글 내용 -->
                     <div class="card-body">
-                        <h5 class="mb-4">{{ boardTitle }}</h5>
-                        <!-- HTML 콘텐츠 렌더링 -->
-                        <div class="board-content text-body" style="line-height: 1.6;"  v-html="$common.contentToHtml(boardContent)">
 
+                        <div class="d-flex justify-content-between align-items-center flex-wrap mb-6 gap-2">
+                            <!-- 제목 섹션 -->
+                            <div class="me-1">
+                                <h5 class="mb-4">{{ boardTitle }}</h5>
+                            </div>
+
+                            <!-- 첨부파일 섹션 -->
+                            <div v-if="attachments" class="btn-group">
+                                <button type="button" class="btn btn-label-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+                                    <i class="fa-solid fa-download me-2"></i>
+                                    첨부파일
+                                    <!-- (<span class="attachment-num">{{ dropdownItems.length }}</span>) -->
+                                </button>
+                                <!-- <ul class="dropdown-menu">
+                                    <li v-for="(item, index) in dropdownItems" :key="index">
+                                        <a class="dropdown-item" href="javascript:void(0);">
+                                            {{ item.label }}
+                                        </a>
+                                    </li>
+                                </ul> -->
+                            </div>
                         </div>
-                        
+
+                        <!-- HTML 콘텐츠 렌더링 -->
+                        <div class="board-content text-body" style="line-height: 1.6;" v-html="$common.contentToHtml(boardContent)"></div>
+
                         <!-- 좋아요 버튼 -->
                         <div class="row justify-content-center my-10">
-                            <BoardRecommendBtn :bigBtn="true"/>
+                            <BoardRecommendBtn
+                                :bigBtn="true"
+                                :boardId="currentBoardId"
+                                :commentId="null"
+                                :likeCount="currentLikeCount"
+                                :dislikeCount="currentDislikeCount"
+                                @updateReaction="handleUpdateReaction"
+                            />
                         </div>
 
                         <!-- 첨부파일 목록 -->
-                        <ul v-if="attachments.length" class="attachments mt-4 list-unstyled">
+                        <!-- <ul v-if="attachments.length" class="attachments mt-4 list-unstyled">
                             <li v-for="(attachment, index) in attachments" :key="index" class="mb-2">
                                 <a :href="attachment.url" target="_blank" class="text-decoration-none">{{ attachment.name }}</a>
                             </li>
-                        </ul>
+                        </ul> -->
 
                         <!-- 댓글 영역 -->
                         <BoardComentArea :comments="comments" />
@@ -38,6 +72,8 @@
                     </div>
                     <div class="card-footer">
                         <BoardCommentList/>
+
+                        <Pagination/>
                     </div>
                 </div>
             </div>
@@ -47,21 +83,24 @@
 
 <script setup>
 import BoardComentArea from '@c/board/BoardComentArea.vue';
-import BoardCommentList from '@/components/board/BoardCommentList.vue';
 import BoardProfile from '@c/board/BoardProfile.vue';
+import BoardCommentList from '@/components/board/BoardCommentList.vue';
 import BoardRecommendBtn from '@/components/button/BoardRecommendBtn.vue';
+import Pagination from '@/components/pagination/Pagination.vue';
 import { ref, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import axios from '@api';
-import Quill from 'quill';
 
 // 게시물 데이터 상태
 const profileName = ref('익명 사용자');
 const boardTitle = ref('제목 없음');
 const boardContent = ref('');
-const convertedContent = ref('내용 없음');
 const comments = ref([]);
 const attachments = ref([]);
+const views = ref(0);
+const likes = ref(0);
+const dislikes = ref(0);
+const attachment = ref(false);
 
 // 라우트에서 ID 가져오기
 const route = useRoute();
@@ -81,19 +120,36 @@ const fetchBoardDetails = async () => {
 
         // API 응답 데이터 반영
         const boardDetail = data.boardDetail || {};
-        profileName.value = boardDetail.author || '익명 사용자';
-        boardTitle.value = boardDetail.title || '제목 없음';
-        boardContent.value = boardDetail.content || '';
 
+        profileName.value = data.author || '익명 사용자';
+        boardTitle.value = data.title || '제목 없음';
+        boardContent.value = data.content || '';
+        views.value = data.cnt || 0;
+        likes.value = data.likeCount || 0;
+        dislikes.value = data.dislikeCount || 0;
+        attachment.value = data.hasAttachment || null;
 
         attachments.value = data.attachments || [];
         comments.value = data.comments || [];
     } catch (error) {
-        console.error('게시물 가져오기 오류:', error);
         alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
     }
 };
 
+const currentLikeCount = ref(10);
+const currentDislikeCount = ref(2);
+
+// 좋아요, 싫어요
+const handleUpdateReaction = async ({ type, boardId, commentId }) => {
+    try {
+        const cmtId = commentId !== null ? commentId : 0;
+
+        const response = await axios.post(`/board/${boardId}/${cmtId}/reaction`, { type });
+    } catch (error) {
+        alert('반응을 업데이트하는 중 오류 발생');
+    }
+};
+
 // 컴포넌트 마운트 시 데이터 로드
 onMounted(() => {
     fetchBoardDetails();

From 9937e8591e411c74a02b5a7d275ad081fbe5263c Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Mon, 3 Feb 2025 14:51:51 +0900
Subject: [PATCH 10/12] =?UTF-8?q?=EA=B2=8C=EC=8B=9C=ED=8C=90=EB=A8=B8?=
 =?UTF-8?q?=EC=A7=802?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardComment.vue       | 20 +++---
 src/components/board/BoardCommentList.vue   |  7 +-
 src/components/board/BoardContent.vue       |  2 +-
 src/components/board/BoardProfile.vue       |  1 +
 src/components/button/BoardRecommendBtn.vue | 75 ++++++++++++++++++---
 src/views/board/BoardView.vue               |  1 +
 6 files changed, 84 insertions(+), 22 deletions(-)

diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue
index 30bb704..7ebe4a5 100644
--- a/src/components/board/BoardComment.vue
+++ b/src/components/board/BoardComment.vue
@@ -1,20 +1,20 @@
 <template>
     <div>
-        <BoardProfile :profileName="comment.author" :showDetail="false" :author="true" />
-        <div class="my-6">
-            <p>{{ comment.content }}</p>
+        <BoardProfile :profileName="comment.author" :showDetail="false" :author="true" :isChild="isChild" />
+        <div class="mt-6">
+            <p class="m-0">{{ comment.content }}</p>
         </div>
-        <PlusButton v-if="isPlusButton" @click="toggleComment"/>
+        <PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6"/>
         <BoardComentArea v-if="isComment" @submit="submitComment"/>
-        
+
         <!-- 대댓글 -->
         <ul v-if="comment.children && comment.children.length" class="list-unstyled">
             <li
                 v-for="child in comment.children"
                 :key="child.id"
-                class="pt-6 ps-10"
+                class="pt-8 ps-10"
             >
-                <BoardComment :comment="child" :isPlusButton="false" @submitComment="addChildComment" />
+                <BoardComment :comment="child" :isPlusButton="false" :isChild="true" @submitComment="addChildComment" />
             </li>
         </ul>
         <!-- <ul class="list-unstyled twoDepth">
@@ -46,7 +46,11 @@ const props = defineProps({
   isPlusButton: {
     type: Boolean,
     default: true,
-  }
+  },
+  isChild: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 // emits 정의
diff --git a/src/components/board/BoardCommentList.vue b/src/components/board/BoardCommentList.vue
index 3288f6b..319345c 100644
--- a/src/components/board/BoardCommentList.vue
+++ b/src/components/board/BoardCommentList.vue
@@ -3,18 +3,15 @@
         <li
             v-for="comment in comments"
             :key="comment.id"
-            class="mt-6"
+            class="mt-8"
         >
             <BoardComment :comment="comment" @submitComment="addComment" />
         </li>
     </ul>
-
-    <Pagination/>
 </template>
 
 <script setup>
 import { ref } from 'vue';
-import Pagination from '../pagination/Pagination.vue';
 import BoardComment from './BoardComment.vue'
 
 const comments = ref([
@@ -48,4 +45,4 @@ const comments = ref([
     children: [],
   },
 ]);
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/board/BoardContent.vue b/src/components/board/BoardContent.vue
index 2b5abbd..7b46e86 100644
--- a/src/components/board/BoardContent.vue
+++ b/src/components/board/BoardContent.vue
@@ -3,7 +3,7 @@
     <div class="d-flex justify-content-between align-items-center flex-wrap mb-6 gap-2">
         <!-- 제목 섹션 -->
         <div class="me-1">
-            <h5 class="mb-0">{{ boardTitle }}</h5>
+            <h5 class="mb-0">{{ boardTitle }}adada</h5>
         </div>
         <!-- 첨부파일 섹션 -->
         <div v-if="dropdownItems.length > 0" class="btn-group">
diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue
index c15a60b..d5091f5 100644
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@@ -104,6 +104,7 @@ const handleDelete = async () => {
             alert('게시물이 성공적으로 삭제되었습니다.');
             router.push({ name: 'BoardList' });
         } catch (error) {
+            console.error('게시물 삭제 중 오류 발생:', error);
             alert('게시물 삭제에 실패했습니다.');
         }
     }
diff --git a/src/components/button/BoardRecommendBtn.vue b/src/components/button/BoardRecommendBtn.vue
index 71fae76..b179da3 100644
--- a/src/components/button/BoardRecommendBtn.vue
+++ b/src/components/button/BoardRecommendBtn.vue
@@ -1,14 +1,16 @@
 <template v-if="isRecommend">
-    <button class="btn btn-label-primary btn-icon" :class="likeClicked ? 'clicked' : '', bigBtn ? 'big' : '' ">
-        <i class="fa-regular fa-thumbs-up"></i> <span class="num">1</span>
+    <button class="btn btn-label-primary btn-icon" :class="{'clicked': likeClicked, 'big': bigBtn}" @click="handleLike">
+        <i class="fa-regular fa-thumbs-up"></i> <span class="num">{{ likeCount }}</span>
     </button>
-    <button class="btn btn-label-danger btn-icon" :class="dislikeClicked ? 'clicked' : '', bigBtn ? 'big' : '' ">
-        <i class="fa-regular fa-thumbs-down"></i> <span class="num">1</span>
+    <button class="btn btn-label-danger btn-icon" :class="{'clicked': dislikeClicked, 'big': bigBtn}" @click="handleDislike">
+        <i class="fa-regular fa-thumbs-down"></i> <span class="num">{{ dislikeCount }}</span>
     </button>
 </template>
 
 <script setup>
-defineProps({
+import { ref, watch } from 'vue';
+
+const props = defineProps({
     likeClicked : {
         type : Boolean,
         default : false,
@@ -24,14 +26,71 @@ defineProps({
     isRecommend: {
         type:Boolean,
         default:true,
-    }
+    },
+    boardId: {
+        type: Number,
+        required: true,
+    },
+    commentId: {
+        type: Number,
+        default: null,
+    },
+    likeCount: {
+        type: Number,
+        default: 0,
+    },
+    dislikeCount: {
+        type: Number,
+        default: 0,
+    },
 });
+
+const emit = defineEmits(['updateReaction']);
+
+const likeClicked = ref(props.likeClicked);
+const dislikeClicked = ref(props.dislikeClicked);
+const likeCount = ref(props.likeCount);
+const dislikeCount = ref(props.dislikeCount);
+
+// 부모에서 likeCount 또는 dislikeCount가 변경되면 로컬 상태를 업데이트
+watch(() => props.likeCount, (newVal) => {
+    likeCount.value = newVal;
+});
+
+watch(() => props.dislikeCount, (newVal) => {
+    dislikeCount.value = newVal;
+});
+
+const handleLike = () => {
+    likeClicked.value = !likeClicked.value;
+    likeCount.value += likeClicked.value ? 1 : -1;
+    emit('updateReaction', { type: 'like', boardId: props.boardId, commentId: props.commentId });
+    if(likeClicked.value === true){
+        if(dislikeClicked.value ===  true) {
+            dislikeClicked.value = false;
+            dislikeCount.value += -1
+        }
+    }
+};
+
+const handleDislike = () => {
+    dislikeClicked.value = !dislikeClicked.value;
+    dislikeCount.value += dislikeClicked.value ? 1 : -1;
+    emit('updateReaction', { type: 'dislike', boardId: props.boardId, commentId: props.commentId });
+    if(dislikeClicked.value === true){
+        if(likeClicked.value ===  true) {
+            likeClicked.value = false;
+            likeCount.value += -1
+        }
+    }
+};
+
 </script>
 
 <style scoped>
 .btn + .btn {
     margin-left: 5px;
-} 
+}
 
 .num {
     margin-left: 5px;
@@ -73,4 +132,4 @@ defineProps({
         font-size: 12px;
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index 2f0ff56..18df4be 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -120,6 +120,7 @@ const fetchBoardDetails = async () => {
 
         // API 응답 데이터 반영
         const boardDetail = data.boardDetail || {};
+        // console.log('boardDetail:', boardDetail);
 
         profileName.value = data.author || '익명 사용자';
         boardTitle.value = data.title || '제목 없음';

From 8e42b6b2b504a8a3a57c9c6a8852f3e6f309bb4f Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Mon, 3 Feb 2025 14:57:34 +0900
Subject: [PATCH 11/12] =?UTF-8?q?=EC=B9=B4=EB=93=9C=20=EB=84=93=EC=9D=B4?=
 =?UTF-8?q?=EA=B3=A0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/list/BoardCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/list/BoardCard.vue b/src/components/list/BoardCard.vue
index 3f22a7d..fe0eecc 100644
--- a/src/components/list/BoardCard.vue
+++ b/src/components/list/BoardCard.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="card mb-3 shadow-sm fixed-card" style="width: 18rem;">
+    <div class="card mb-3 shadow-sm fixed-card" style="width: 18rem; height: 17rem">
       <!-- 이미지가 있을 경우 card-img-top으로 표시 -->
       <img
         v-if="img"

From 8cfffa661049dc5af632086d059d9306a1f378b0 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Mon, 3 Feb 2025 16:18:31 +0900
Subject: [PATCH 12/12] =?UTF-8?q?=EA=B8=80=EC=93=B0=EA=B8=B0=20=EC=B9=B4?=
 =?UTF-8?q?=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EA=B3=B5=ED=86=B5=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=EC=88=98=EC=A0=95=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/board/BoardWrite.vue | 44 +++++++++++++++++++++++-----------
 1 file changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/views/board/BoardWrite.vue b/src/views/board/BoardWrite.vue
index 30d432a..94d1d9f 100644
--- a/src/views/board/BoardWrite.vue
+++ b/src/views/board/BoardWrite.vue
@@ -22,7 +22,7 @@
                         <label class="col-md-2 col-form-label">카테고리 <span class="text-danger">*</span></label>
                         <div class="d-flex flex-wrap align-items-center mt-3 ms-1">
                             <div
-                                v-for="(categoryName, index) in categoryList"
+                                v-for="(category, index) in categoryList"
                                 :key="index"
                                 class="form-check me-3"
                             >
@@ -30,18 +30,19 @@
                                     class="form-check-input"
                                     type="radio"
                                     :id="`category-${index}`"
-                                    :value="index"
-                                    v-model="category"
+                                    :value="category.CMNCODVAL"
+                                    v-model="categoryValue"
                                 />
                                 <label class="form-check-label" :for="`category-${index}`">
-                                    {{ categoryName }}
+                                    {{ category.CMNCODNAM }}
                                 </label>
                             </div>
                         </div>
+                        <div class="invalid-feedback" :class="categoryAlert ? 'display-block' : ''">카테고리를 선택해주세요.</div>
                     </div>
 
                     <!-- 비밀번호 필드 -->
-                    <div v-if="category === 1" class="mb-4">
+                    <div v-if="categoryValue === 300102" class="mb-4">
                         <FormInput
                             title="비밀번호"
                             name="pw"
@@ -94,25 +95,39 @@
 import QEditor from '@c/editor/QEditor.vue';
 import FormInput from '@c/input/FormInput.vue';
 import FormFile from '@c/input/FormFile.vue';
-import { getCurrentInstance, ref } from 'vue';
+import { getCurrentInstance, ref, onMounted } from 'vue';
 import router from '@/router';
 import axios from '@api';
 
-const categoryList = ['자유', '익명', '공지사항']; // 카테고리 이름
+const categoryList = ref([]);
 const title = ref('');
 const password = ref('');
-const category = ref(0); // 기본값 0
+const categoryValue = ref(null);
 const content = ref('');
 const attachFiles = ref(null);
-const isFileValid = ref(true); // 파일 유효성 상태 추가
+const isFileValid = ref(true);
 
 const titleAlert = ref(false);
 const passwordAlert = ref(false);
 const contentAlert = ref(false);
+const categoryAlert = ref(false);
 const attachFilesAlert = ref(false);
 
 const { appContext } = getCurrentInstance();
-const $common = appContext.config.globalProperties.$common; // $common에 접근
+const $common = appContext.config.globalProperties.$common;
+
+const fetchCategories = async () => {
+    try {
+        const response = await axios.get('board/categories');
+        categoryList.value = response.data.data;
+    } catch (error) {
+        console.error('카테고리 불러오기 오류:', error);
+    }
+};
+
+onMounted(() => {
+    fetchCategories();
+});
 
 const goList = () => {
     router.push('/board');
@@ -120,10 +135,11 @@ const goList = () => {
 
 const write = async () => {
     titleAlert.value = !title.value;
-    passwordAlert.value = category.value === 1 && !password.value;
+    passwordAlert.value = categoryValue.value === 300102 && !password.value;
     contentAlert.value = !content.value;
+    categoryAlert.value = !categoryValue.value;
 
-    if (titleAlert.value || passwordAlert.value || contentAlert.value || !isFileValid.value) {
+    if (titleAlert.value || passwordAlert.value || contentAlert.value || categoryAlert.value || !isFileValid.value) {
         return;
     }
 
@@ -131,8 +147,8 @@ const write = async () => {
         const boardData = {
             LOCBRDTTL: title.value,
             LOCBRDCON: $common.deltaAsJson(content.value),
-            LOCBRDPWD: category.value === 1 ? password.value : null,
-            LOCBRDTYP: category.value === 1 ? 'S' : 'F',
+            LOCBRDPWD: categoryValue.value === 300102 ? password.value : null,
+            LOCBRDTYP: categoryValue.value
         };
 
         const { data: boardResponse } = await axios.post('board', boardData);