From af4b18130acdee010db75f95a91360871f4cd57f Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Thu, 9 Jan 2025 10:30:51 +0900
Subject: [PATCH 01/12] =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83?=
 =?UTF-8?q?=ED=95=84=EC=9A=94=EC=97=86=EC=9D=84=EB=95=8C=20=EC=98=88?=
 =?UTF-8?q?=EC=8B=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index 30eaabd..41b78a5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -26,11 +26,12 @@ const routes = [
             }
         ]
     },
-    {
-        path: '/login',
-        component: () => import('@v/user/TheLogin.vue'),
-        meta: { layout: 'NoLayout' },
-    },
+    // 레이아웃 필요없을 때 예시
+    // {
+    //     path: '/login',
+    //     component: () => import('@v/user/TheLogin.vue'),
+    //     meta: { layout: 'NoLayout' },
+    // },
     {
         path: '/sample',
         component: () => import('@c/calendar/SampleCalendar.vue'),

From 76981b956a9569977169107be06cb4ac08b1e8de Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Thu, 9 Jan 2025 10:49:35 +0900
Subject: [PATCH 02/12] =?UTF-8?q?=EB=B2=84=ED=8A=BC,=ED=9C=B4=EA=B0=80?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=EC=B6=94=EA=B0=80=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardComment.vue     |  12 +-
 src/components/board/BoardProfile.vue     |  14 +-
 src/components/button/DeleteButton.vue    |  13 ++
 src/components/button/EditButton.vue      |  13 ++
 src/components/button/PlusButton.vue      |  13 ++
 src/layouts/TheMenu.vue                   |   6 +
 src/router/index.js                       |   4 +
 src/stores/calendarStore.js               |  20 +++
 src/views/AddEventModal.vue               |  55 +++++++
 src/views/vacation/ProfileList.vue        |  56 +++++++
 src/views/vacation/VacationManagement.vue | 181 ++++++++++++++++++++++
 11 files changed, 373 insertions(+), 14 deletions(-)
 create mode 100644 src/components/button/DeleteButton.vue
 create mode 100644 src/components/button/EditButton.vue
 create mode 100644 src/components/button/PlusButton.vue
 create mode 100644 src/stores/calendarStore.js
 create mode 100644 src/views/AddEventModal.vue
 create mode 100644 src/views/vacation/ProfileList.vue
 create mode 100644 src/views/vacation/VacationManagement.vue

diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue
index ecb3fec..bc718f3 100644
--- a/src/components/board/BoardComment.vue
+++ b/src/components/board/BoardComment.vue
@@ -3,13 +3,12 @@
         <li>
             <BoardProfile profileName=곤데리 :showDetail="false" :author="true" />
             <div class="mt-2">저도 궁금합니다.</div>
-            <button type="button" class="btn btn-text-primary" @click="toggleComment">답변달기</button>
+            <PlusButton  @click="toggleComment"/>
             <BoardComentArea v-if="comment" />
             <ul class="list-unstyled twoDepth">
                 <li>
                     <BoardProfile profileName=곤데리2 :showDetail="false" />
                     <div class="mt-2">저도 궁금합니다.</div>
-                    <button type="button" class="btn btn-text-primary" @click="toggleComment">답변달기</button>
                     <BoardComentArea v-if="comment" />
                 </li>
             </ul>
@@ -17,13 +16,13 @@
         <li>
             <BoardProfile profileName=곤데리 :showDetail="false" />
             <div class="mt-2">저도 궁금합니다.</div>
-            <button type="button" class="btn btn-text-primary" @click="toggleComment">답변달기</button>
+            <PlusButton  @click="toggleComment"/>
             <BoardComentArea v-if="comment" />
         </li>
         <li>
-            <BoardProfile :showDetail="false" :unknown="false" />
+            <BoardProfile profileName=곤데리 :showDetail="false" />
             <div class="mt-2">저도 궁금합니다.</div>
-            <button type="button" class="btn btn-text-primary" @click="toggleComment">답변달기</button>
+            <PlusButton  @click="toggleComment"/>
             <BoardComentArea v-if="comment" />
         </li>
     </ul>
@@ -36,6 +35,7 @@ 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/PlusButton.vue';
 
 const comment = ref(false);
 
@@ -63,4 +63,4 @@ const toggleComment = () => {
     .btn-text-primary:focus {
         background-color: transparent
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue
index fb0e6bb..359ed9c 100644
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@@ -24,12 +24,8 @@
         </div>
         <div class="ms-auto btn-area">
             <template v-if="showDetail">
-                <button class="btn btn-label-primary btn-icon">
-                    <i class='bx bx-edit-alt'></i>
-                </button>
-                <button class="btn btn-label-primary btn-icon">
-                    <i class='bx bx-trash' ></i>
-                </button>
+                <EditButton />
+                <DeleteButton />
             </template>
             <template v-else>
                 <template v-if="author">
@@ -47,6 +43,8 @@
 </template>
 
 <script setup>
+import DeleteButton from '../button/DeleteButton.vue';
+import EditButton from '../button/EditButton.vue';
 import BoardRecommendBtn from './BoardRecommendBtn.vue';
 
 defineProps({
@@ -85,7 +83,7 @@ defineProps({
     }
 
     @media screen and  (max-width:450px) {
-        .btn-area { 
+        .btn-area {
             margin-top: 10px;
             width: 100%;
         }
@@ -94,4 +92,4 @@ defineProps({
             height: 30px;
         }
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/button/DeleteButton.vue b/src/components/button/DeleteButton.vue
new file mode 100644
index 0000000..0a4748c
--- /dev/null
+++ b/src/components/button/DeleteButton.vue
@@ -0,0 +1,13 @@
+<template>
+    <button class="btn btn-label-primary btn-icon">
+        <i class='bx bx-trash' ></i>
+    </button>
+</template>
+
+<script>
+export default {
+    name: 'DeleteButton',
+    methods: {
+      },
+    };
+</script>
diff --git a/src/components/button/EditButton.vue b/src/components/button/EditButton.vue
new file mode 100644
index 0000000..9987ddb
--- /dev/null
+++ b/src/components/button/EditButton.vue
@@ -0,0 +1,13 @@
+<template>
+    <button class="btn btn-label-primary btn-icon">
+      <i class="bx bx-edit-alt"></i>
+    </button>
+</template>
+
+<script>
+export default {
+    name: 'EditButton',
+    methods: {
+      },
+    };
+</script>
diff --git a/src/components/button/PlusButton.vue b/src/components/button/PlusButton.vue
new file mode 100644
index 0000000..102282c
--- /dev/null
+++ b/src/components/button/PlusButton.vue
@@ -0,0 +1,13 @@
+<template>
+    <button class="btn btn-label-primary btn-icon">
+   <i class="icon-base bx bx-plus"></i>
+   </button>
+</template>
+
+<script>
+export default {
+   name: 'PlusButton',
+   methods: {
+     },
+   };
+</script>
diff --git a/src/layouts/TheMenu.vue b/src/layouts/TheMenu.vue
index f93eb55..44b32a0 100644
--- a/src/layouts/TheMenu.vue
+++ b/src/layouts/TheMenu.vue
@@ -43,6 +43,12 @@
                     <div class="text-truncate">Board</div>
                 </RouterLink>
             </li>
+            <li class="menu-item" :class="$route.path.includes('/vacation') ? 'active' : ''">
+                <RouterLink class="menu-link" to="/vacation">
+                    <i class="menu-icon tf-icons bx bx-calendar"></i>
+                    <div class="text-truncate">vacation</div>
+                </RouterLink>
+            </li>
             <li class="menu-item" :class="$route.path.includes('/sample') ? 'active' : ''">
                 <RouterLink class="menu-link" to="/sample"> <i class="bi "></i>
                     <i class="menu-icon tf-icons bx bx-calendar"></i>
diff --git a/src/router/index.js b/src/router/index.js
index 41b78a5..417ef6c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -32,6 +32,10 @@ const routes = [
     //     component: () => import('@v/user/TheLogin.vue'),
     //     meta: { layout: 'NoLayout' },
     // },
+    {
+        path: '/vacation',
+        component: () => import('@v/vacation/VacationManagement.vue'),
+    },
     {
         path: '/sample',
         component: () => import('@c/calendar/SampleCalendar.vue'),
diff --git a/src/stores/calendarStore.js b/src/stores/calendarStore.js
new file mode 100644
index 0000000..80c8525
--- /dev/null
+++ b/src/stores/calendarStore.js
@@ -0,0 +1,20 @@
+import { ref } from 'vue';
+import axios from 'axios';
+
+const events = ref([]);
+
+const fetchEvents = async () => {
+  const response = await axios.get('/api/calendar/events');
+  events.value = response.data;
+};
+
+const addEvent = async (event) => {
+  await axios.post('/api/calendar/event', event);
+  fetchEvents();
+};
+
+export default {
+  events,
+  fetchEvents,
+  addEvent,
+};
diff --git a/src/views/AddEventModal.vue b/src/views/AddEventModal.vue
new file mode 100644
index 0000000..22de25e
--- /dev/null
+++ b/src/views/AddEventModal.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class="modal">
+      <div class="modal-content">
+        <h3>휴가 추가</h3>
+        <input type="text" v-model="title" placeholder="제목" />
+        <input type="date" v-model="date" />
+        <button @click="addEvent">추가</button>
+        <button @click="$emit('close')">닫기</button>
+      </div>
+    </div>
+  </template>
+
+  <script>
+  import calendarStore from '@s/calendarStore';
+
+  export default {
+    data() {
+      return {
+        title: '',
+        date: '',
+      };
+    },
+    methods: {
+      addEvent() {
+        if (this.title && this.date) {
+          calendarStore.addEvent({ title: this.title, start: this.date });
+          this.$emit('close');
+        } else {
+          alert('모든 필드를 입력해주세요.');
+        }
+      },
+    },
+  };
+  </script>
+
+  <style scoped>
+  .modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .modal-content {
+    background: white;
+    padding: 20px;
+    border-radius: 5px;
+    width: 300px;
+    text-align: center;
+  }
+  </style>
diff --git a/src/views/vacation/ProfileList.vue b/src/views/vacation/ProfileList.vue
new file mode 100644
index 0000000..9f729d4
--- /dev/null
+++ b/src/views/vacation/ProfileList.vue
@@ -0,0 +1,56 @@
+<template>
+    <div class="profile-list">
+      <div v-for="profile in profiles" :key="profile.id" class="profile">
+        <img :src="profile.avatar" alt="프로필 사진" class="avatar" />
+        <div class="info">
+          <p class="name">{{ profile.name }}</p>
+          <p class="vacation-count">남은 휴가: {{ profile.remainingVacations }}일</p>
+        </div>
+      </div>
+    </div>
+  </template>
+
+  <script>
+  export default {
+    data() {
+      return {
+        profiles: [
+          { id: 1, name: '김철수', avatar: '/avatars/user1.png', remainingVacations: 15 },
+          { id: 2, name: '박영희', avatar: '/avatars/user2.png', remainingVacations: 11 },
+          { id: 3, name: '이민호', avatar: '/avatars/user3.png', remainingVacations: 10 },
+        ],
+      };
+    },
+  };
+  </script>
+
+  <style scoped>
+  .profile-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+  .profile {
+    display: flex;
+    align-items: center;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 10px;
+  }
+  .avatar {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    margin-right: 10px;
+  }
+  .info {
+    display: flex;
+    flex-direction: column;
+  }
+  .name {
+    font-weight: bold;
+  }
+  .vacation-count {
+    color: gray;
+  }
+  </style>
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
new file mode 100644
index 0000000..f5e414a
--- /dev/null
+++ b/src/views/vacation/VacationManagement.vue
@@ -0,0 +1,181 @@
+<template>
+    <div class="vacation-management">
+        <div class="container-xxl flex-grow-1 container-p-y">
+            <div class="save-button-container">
+                <button class="btn btn-success" @click="addVacationRequest">✔</button>
+            </div>
+            <div class="card app-calendar-wrapper">
+                <div class="row g-0">
+                    <div class="col app-calendar-content">
+                        <div class="card shadow-none border-0">
+                            <div class="card-body pb-0">
+                                <full-calendar
+                                    ref="fullCalendarRef"
+                                    :events="calendarEvents"
+                                    :options="calendarOptions"
+                                    defaultView="dayGridMonth"
+                                    class="flatpickr-calendar-only"
+                                >
+                                </full-calendar>
+                            </div>
+                        </div>
+                        <div class="half-day-buttons">
+                            <button class="btn btn-info" :class="{ active: halfDayType === 'AM' }" @click="toggleHalfDay('AM')">☀️ 오전반차</button>
+                            <button class="btn btn-warning" :class="{ active: halfDayType === 'PM' }" @click="toggleHalfDay('PM')">🌙 오후반차</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import FullCalendar from '@fullcalendar/vue3';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import 'flatpickr/dist/flatpickr.min.css';
+import '@/assets/css/app-calendar.css';
+import { reactive, ref } from 'vue';
+
+const fullCalendarRef = ref(null);
+const calendarEvents = ref([]);
+const selectedDates = ref([]);
+const halfDayType = ref(null); // 오전/오후 반차 선택
+
+const calendarOptions = reactive({
+    plugins: [dayGridPlugin, interactionPlugin],
+    initialView: 'dayGridMonth',
+    headerToolbar: {
+        left: 'today',
+        center: 'title',
+        right: 'prev,next',
+    },
+    locale: 'ko',
+    selectable: true,
+    dateClick: handleDateClick,
+});
+
+function handleDateClick(info) {
+    const date = info.dateStr;
+    const dayElement = info.dayEl;
+
+    if (!selectedDates.value.includes(date)) {
+        selectedDates.value.push(date);
+        if (halfDayType.value === 'AM') {
+            dayElement.style.backgroundImage = 'linear-gradient(to bottom, #ade3ff 50%, transparent 50%)';
+        } else if (halfDayType.value === 'PM') {
+            dayElement.style.backgroundImage = 'linear-gradient(to top, #ade3ff 50%, transparent 50%)';
+        } else {
+            dayElement.style.backgroundColor = '#ade3ff';
+        }
+    } else {
+        selectedDates.value = selectedDates.value.filter((d) => d !== date);
+        dayElement.style.backgroundColor = '';
+        dayElement.style.backgroundImage = '';
+    }
+
+    halfDayType.value = null; // 날짜 클릭 후 반차 선택 초기화
+}
+
+function toggleHalfDay(type) {
+    halfDayType.value = halfDayType.value === type ? null : type;
+}
+
+function addVacationRequest() {
+    if (selectedDates.value.length === 0) {
+        alert('Please select at least one date.');
+        return;
+    }
+
+    const newEvents = selectedDates.value.map((date) => ({
+        title: halfDayType.value ? `${halfDayType.value} Half Day Vacation` : 'Vacation',
+        start: date,
+        allDay: true,
+    }));
+
+    calendarEvents.value = [...calendarEvents.value, ...newEvents];
+    alert(`Vacation added for dates: ${selectedDates.value.join(', ')} as ${halfDayType.value || 'Full Day'}`);
+    selectedDates.value = [];
+    halfDayType.value = null;
+}
+</script>
+
+<style scoped>
+.vacation-management {
+    padding: 20px;
+}
+
+.save-button-container {
+    position: fixed;
+    top: 900px; /* 탑바 아래로 간격 조정 */
+    right: 400px;
+    z-index: 1050; /* 탑바보다 높은 값 */
+    background-color: white;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+@media (max-width: 768px) {
+    .save-button-container {
+        top: 70px; /* 모바일에서 탑바 아래 간격 조정 */
+        right: 5px;
+        left: 5px;
+        width: calc(100% - 10px); /* 모바일 화면에 맞게 크기 조정 */
+        text-align: center;
+    }
+}
+
+
+.half-day-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.fc-day-sun .fc-col-header-cell-cushion,
+.fc-day-sun a {
+    color: red;
+}
+
+.fc-day-sat .fc-col-header-cell-cushion,
+.fc-day-sat a {
+    color: blue;
+}
+
+.flatpickr-calendar-only input.flatpickr-input {
+    display: none;
+}
+
+.flatpickr-input {
+    display: none;
+}
+
+.pt-2.px-3 {
+    position: relative;
+}
+
+.flatpickr-calendar {
+    position: relative !important;
+    display: block !important;
+    width: 100% !important;
+    height: auto !important;
+    z-index: 1;
+}
+
+.btn-info {
+    background-color: #17a2b8;
+    color: white;
+}
+
+.btn-warning {
+    background-color: #ffc107;
+    color: white;
+}
+
+button.active {
+    opacity: 0.7;
+}
+</style>

From 76c02d04d125ca936e4a5c08aad30bb50c7bd65d Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Thu, 9 Jan 2025 12:37:50 +0900
Subject: [PATCH 03/12] =?UTF-8?q?=EC=9E=91=EC=84=B1=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardComentArea.vue | 34 +++++++++++++-----------
 src/components/board/BoardProfile.vue    |  8 ++----
 src/components/button/WriteButton.vue    | 13 +++++++++
 src/views/board/BoardList.vue            |  5 ++--
 4 files changed, 35 insertions(+), 25 deletions(-)
 create mode 100644 src/components/button/WriteButton.vue

diff --git a/src/components/board/BoardComentArea.vue b/src/components/board/BoardComentArea.vue
index 629cb1f..e408ffe 100644
--- a/src/components/board/BoardComentArea.vue
+++ b/src/components/board/BoardComentArea.vue
@@ -11,9 +11,9 @@
                 </div>
                 <!-- 텍스트박스 -->
                 <div class="w-100">
-                    <textarea 
-                        class="form-control" 
-                        placeholder="주제에 대한 생각을 자유롭게 댓글로 표현해 주세요. &#13;&#10;여러분의 다양한 의견을 기다립니다." 
+                    <textarea
+                        class="form-control"
+                        placeholder="주제에 대한 생각을 자유롭게 댓글로 표현해 주세요. &#13;&#10;여러분의 다양한 의견을 기다립니다."
                         rows="3"
                     ></textarea>
                 </div>
@@ -22,36 +22,38 @@
             <!-- 옵션 및 버튼 섹션 -->
             <div class="d-flex justify-content-between flex-wrap mt-4">
                 <div class="d-flex flex-wrap align-items-center">
-                    <!-- 익명 체크박스 -->
+                    <!-- 익명 체크박스 (익명게시판일 경우에만)-->
                     <div class="form-check form-check-inline mb-0 me-4">
-                        <input 
-                            class="form-check-input" 
-                            type="checkbox" 
-                            id="inlineCheckbox1" 
+                        <input
+                            class="form-check-input"
+                            type="checkbox"
+                            id="inlineCheckbox1"
                             v-model="isCheck"
                         />
                         <label class="form-check-label" for="inlineCheckbox1">익명</label>
                     </div>
-                    
+
                     <!-- 비밀번호 입력 필드 (익명이 선택된 경우에만 표시) -->
                     <div v-if="isCheck" class="d-flex align-items-center flex-grow-1">
                         <label class="form-label mb-0 me-3" for="basic-default-password">비밀번호</label>
                         <input
-                            type="password" 
+                            type="password"
                             id="basic-default-password"
-                            class="form-control flex-grow-1" 
-                            placeholder="" 
+                            class="form-control flex-grow-1"
+                            placeholder=""
                         />
                     </div>
                 </div>
-                
+
                 <!-- 답변 쓰기 버튼 -->
                 <div class="ms-auto mt-3 mt-md-0">
-                    <button class="btn btn-primary">답변 쓰기</button>
+                    <button class="btn btn-primary">
+                        <i class="icon-base bx bx-check"></i>
+                    </button>
                 </div>
-            </div>       
+            </div>
         </div>
-    </div>                                           
+    </div>
 </template>
 
 <script setup>
diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue
index 359ed9c..0efd3a2 100644
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@@ -29,12 +29,8 @@
             </template>
             <template v-else>
                 <template v-if="author">
-                    <button class="btn author btn-label-primary btn-icon">
-                        <i class='bx bx-edit-alt'></i>
-                    </button>
-                    <button class="btn author btn-label-primary btn-icon">
-                        <i class='bx bx-trash' ></i>
-                    </button>
+                    <EditButton />
+                    <DeleteButton />
                 </template>
                 <BoardRecommendBtn :likeClicked="true" :dislikeClicked="false"/>
             </template>
diff --git a/src/components/button/WriteButton.vue b/src/components/button/WriteButton.vue
new file mode 100644
index 0000000..a9b5ca1
--- /dev/null
+++ b/src/components/button/WriteButton.vue
@@ -0,0 +1,13 @@
+<template>
+    <button class="btn btn-label-primary btn-icon float-end">
+        <i class="bx bx-edit"></i>
+    </button>
+</template>
+
+<script>
+export default {
+   name: 'WriteButton',
+   methods: {
+     },
+   };
+</script>
diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue
index 734b05a..8d6e9db 100644
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@@ -5,9 +5,7 @@
         <div class="row g-3">
             <div class="mt-8">
                 <router-link to="/board/write">
-                    <button class="btn btn-label-primary btn-icon float-end">
-                        <i class="bx bx-edit-alt"></i>
-                    </button>
+                    <WriteButton />
                 </router-link>
             </div>
             <template v-for="(item, index) in list" :key="item.id">
@@ -41,6 +39,7 @@
     import SearchBar from '@/components/search/SearchBar.vue';
     import router from '@/router';
     import dummy from '@a/boardDummy.json';
+import WriteButton from '@/components/button/WriteButton.vue';
 
     const list = ref(dummy);
     const searchText = ref('');

From 692da670232d5fb95e84921c8531bf7f0c1bcfa8 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 9 Jan 2025 13:46:18 +0900
Subject: [PATCH 04/12] =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=9D=B4=EB=A6=84=20=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/button/{DeleteButton.vue => DeleteBtn.vue} | 0
 src/components/button/{EditButton.vue => EditBtn.vue}     | 0
 src/components/button/{PlusButton.vue => PlusBtn.vue}     | 0
 3 files changed, 0 insertions(+), 0 deletions(-)
 rename src/components/button/{DeleteButton.vue => DeleteBtn.vue} (100%)
 rename src/components/button/{EditButton.vue => EditBtn.vue} (100%)
 rename src/components/button/{PlusButton.vue => PlusBtn.vue} (100%)

diff --git a/src/components/button/DeleteButton.vue b/src/components/button/DeleteBtn.vue
similarity index 100%
rename from src/components/button/DeleteButton.vue
rename to src/components/button/DeleteBtn.vue
diff --git a/src/components/button/EditButton.vue b/src/components/button/EditBtn.vue
similarity index 100%
rename from src/components/button/EditButton.vue
rename to src/components/button/EditBtn.vue
diff --git a/src/components/button/PlusButton.vue b/src/components/button/PlusBtn.vue
similarity index 100%
rename from src/components/button/PlusButton.vue
rename to src/components/button/PlusBtn.vue

From 82ce223a15ae8befdfb1e3ed0539ace0b41ab697 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 9 Jan 2025 13:51:01 +0900
Subject: [PATCH 05/12] =?UTF-8?q?=ED=8F=B4=EB=8D=94=20=EB=AA=85=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardComment.vue                |  2 +-
 src/components/board/BoardProfile.vue                | 12 ++++++++----
 .../button/{WriteButton.vue => WriteBtn.vue}         |  0
 src/views/board/BoardList.vue                        |  8 ++++----
 src/views/board/BoardView.vue                        |  8 ++++----
 5 files changed, 17 insertions(+), 13 deletions(-)
 rename src/components/button/{WriteButton.vue => WriteBtn.vue} (100%)

diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue
index bc718f3..6128c7d 100644
--- a/src/components/board/BoardComment.vue
+++ b/src/components/board/BoardComment.vue
@@ -35,7 +35,7 @@ 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/PlusButton.vue';
+import PlusButton from '../button/PlusBtn.vue';
 
 const comment = ref(false);
 
diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue
index 0efd3a2..faa583e 100644
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@@ -29,8 +29,12 @@
             </template>
             <template v-else>
                 <template v-if="author">
-                    <EditButton />
-                    <DeleteButton />
+                    <button class="btn author btn-label-primary btn-icon">
+                        <i class='bx bx-edit-alt'></i>
+                    </button>
+                    <button class="btn author btn-label-primary btn-icon">
+                        <i class='bx bx-trash' ></i>
+                    </button>
                 </template>
                 <BoardRecommendBtn :likeClicked="true" :dislikeClicked="false"/>
             </template>
@@ -39,8 +43,8 @@
 </template>
 
 <script setup>
-import DeleteButton from '../button/DeleteButton.vue';
-import EditButton from '../button/EditButton.vue';
+import DeleteButton from '../button/DeleteBtn.vue';
+import EditButton from '../button/EditBtn.vue';
 import BoardRecommendBtn from './BoardRecommendBtn.vue';
 
 defineProps({
diff --git a/src/components/button/WriteButton.vue b/src/components/button/WriteBtn.vue
similarity index 100%
rename from src/components/button/WriteButton.vue
rename to src/components/button/WriteBtn.vue
diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue
index 8d6e9db..25109bd 100644
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@@ -34,12 +34,12 @@
 
 <script setup>
     import { ref } from 'vue';
-    import BoardCard from '@/components/list/BoardCard.vue';
-    import Pagination from '@/components/pagination/Pagination.vue';
-    import SearchBar from '@/components/search/SearchBar.vue';
+    import BoardCard from '@c/list/BoardCard.vue';
+    import Pagination from '@c/pagination/Pagination.vue';
+    import SearchBar from '@c/search/SearchBar.vue';
     import router from '@/router';
     import dummy from '@a/boardDummy.json';
-import WriteButton from '@/components/button/WriteButton.vue';
+    import WriteButton from '@c/button/WriteBtn.vue';
 
     const list = ref(dummy);
     const searchText = ref('');
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index 057c0cf..890e036 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -20,10 +20,10 @@
 </template>
 
 <script setup>
-import BoardComentArea from '@/components/board/BoardComentArea.vue';
-import BoardComment from '@/components/board/BoardComment.vue';
-import BoardContent from '@/components/board/BoardContent.vue';
-import BoardProfile from '@/components/board/BoardProfile.vue';
+import BoardComentArea from '@c/board/BoardComentArea.vue';
+import BoardComment from '@c/board/BoardComment.vue';
+import BoardContent from '@c/board/BoardContent.vue';
+import BoardProfile from '@c/board/BoardProfile.vue';
 import { ref } from 'vue';
 
 const dropdownItems = ref([

From 126b78d980524912b5aba080eee03817e7175b33 Mon Sep 17 00:00:00 2001
From: kimdaae328 <kimdaae328@gmail.com>
Date: Thu, 9 Jan 2025 15:44:52 +0900
Subject: [PATCH 06/12] =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardContent.vue                  | 2 +-
 src/components/board/BoardProfile.vue                  | 2 +-
 src/components/{board => button}/BoardRecommendBtn.vue | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename src/components/{board => button}/BoardRecommendBtn.vue (100%)

diff --git a/src/components/board/BoardContent.vue b/src/components/board/BoardContent.vue
index 839d39b..242ca51 100644
--- a/src/components/board/BoardContent.vue
+++ b/src/components/board/BoardContent.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script setup>
-import BoardRecommendBtn from './BoardRecommendBtn.vue';
+import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
 
 defineProps({
     boardTitle : {
diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue
index faa583e..d747800 100644
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@@ -45,7 +45,7 @@
 <script setup>
 import DeleteButton from '../button/DeleteBtn.vue';
 import EditButton from '../button/EditBtn.vue';
-import BoardRecommendBtn from './BoardRecommendBtn.vue';
+import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
 
 defineProps({
     profileName : {
diff --git a/src/components/board/BoardRecommendBtn.vue b/src/components/button/BoardRecommendBtn.vue
similarity index 100%
rename from src/components/board/BoardRecommendBtn.vue
rename to src/components/button/BoardRecommendBtn.vue

From 3aed02e3f121149b94e1878844a9cb3a8cd50087 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Mon, 13 Jan 2025 09:57:47 +0900
Subject: [PATCH 07/12] =?UTF-8?q?=EC=8A=A4=ED=94=84=EB=A7=81=EB=B6=80?=
 =?UTF-8?q?=ED=8A=B8=20=EC=97=B0=EA=B2=B0=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite.config.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/vite.config.js b/vite.config.js
index 617eec4..061e29f 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,6 +5,14 @@ import vueDevTools from 'vite-plugin-vue-devtools'
 
 // https://vite.dev/config/
 export default defineConfig({
+    server: {
+        proxy: {
+            '/api': {
+                target: 'http://localhost:10325', // Spring Boot 서버 주소
+                changeOrigin: true,
+            },
+        },
+    },
     plugins: [
         vue(),
         vueDevTools(),

From 4df399ac363e421356335442f098ca64e9c0f881 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Mon, 13 Jan 2025 12:52:44 +0900
Subject: [PATCH 08/12] =?UTF-8?q?=EA=B2=8C=EC=8B=9C=ED=8C=90=20insert?=
 =?UTF-8?q?=EC=98=88=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/board/BoardWrite.vue | 78 ++++++++++++++++++++++++++++++++--
 1 file changed, 75 insertions(+), 3 deletions(-)

diff --git a/src/views/board/BoardWrite.vue b/src/views/board/BoardWrite.vue
index f522ea4..e93b086 100644
--- a/src/views/board/BoardWrite.vue
+++ b/src/views/board/BoardWrite.vue
@@ -55,9 +55,10 @@ import FormSelect from '@c/input/FormSelect.vue';
 import FormFile from '@c/input/FormFile.vue';
 import { ref, watch } from 'vue';
 import router from '@/router';
+import axios from 'axios';
 
 const categoryList = ['자유', '익명', '공지사항'];
-// input 경고문 만들어야함
+// input 경고문 만들어야함!!
 const title = ref('');
 const password = ref('');
 const category = ref(0);
@@ -76,9 +77,80 @@ const goList = () => {
     router.push('/board');
 };
 
-const write = () => {
-    console.log('작성');
+const write = async () => {
+    // 입력값 유효성 검사
+    if (!title.value) {
+        titleAlert.value = true;
+        return;
+    } else {
+        titleAlert.value = false;
+    }
+
+    if (category.value === 1 && !password.value) {
+        passwordAlert.value = true;
+        return;
+    } else {
+        passwordAlert.value = false;
+    }
+
+    if (!content.value) {
+        contentAlert.value = true;
+        return;
+    } else {
+        contentAlert.value = false;
+    }
+
+    try {
+        // 게시물 작성 데이터 준비
+        const boardData = {
+            LOCBRDTTL: title.value,
+            LOCBRDCON: content.value,
+            LOCBRDPWD: category.value === 1 ? password.value : null,
+            LOCBRDTYP: category.value === 1 ? 'S' : 'F', //공지사항 추가해야함!!
+        };
+
+        // 게시물 작성 API 호출
+        const { data: boardResponse } = await axios.post('/api/board', boardData);
+        const boardId = boardResponse.data.boardId;
+
+        // 첨부파일 처리
+        if (attachFiles.value && attachFiles.value.length > 0) {
+            for (const file of attachFiles.value) {
+                const realName = file.name.substring(0, file.name.lastIndexOf('.'));
+                const fileInfo = {
+                    path: "/uploads", // 파일 경로 (수정 필요)
+                    originalName: realName, // 확장자를 제외한 파일명
+                    extension: file.name.split('.').pop(), // 파일 확장자
+                    registrantId: 1, // 등록자 ID (수정 필요)
+                };
+
+
+                const formData = new FormData();
+                formData.append("file", file); // 첨부 파일
+                formData.append("CMNFLEPAT", fileInfo.path); // 파일 경로
+                formData.append("CMNFLENAM", fileInfo.originalName); // 파일 명(확장자제외)
+                formData.append("CMNFLEORG", fileInfo.originalName); // 원본 파일명(확장자제외)
+                formData.append("CMNFLEEXT", fileInfo.extension); // 파일 확장자
+                formData.append("CMNFLESIZ", file.size); // 파일 크기
+                formData.append("CMNFLEREG", fileInfo.registrantId); // 등록자 ID
+
+                const response = await axios.post(`/api/board/${boardId}/attachments`, formData, {
+                    headers: {
+                        "Content-Type": "multipart/form-data",
+                    },
+                });
+            }
+        }
+
+        alert("게시물이 작성되었습니다.");
+        goList();
+    } catch (error) {
+        console.error(error);
+        alert("게시물 작성 중 오류가 발생했습니다.");
+    }
 };
+
+
 </script>
 
 <style>

From 559212e9e14c4a84a8e2cf03d7c3551a39b8e2ed Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Mon, 13 Jan 2025 13:01:11 +0900
Subject: [PATCH 09/12] =?UTF-8?q?=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 | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/board/BoardWrite.vue b/src/views/board/BoardWrite.vue
index e93b086..b4b3c11 100644
--- a/src/views/board/BoardWrite.vue
+++ b/src/views/board/BoardWrite.vue
@@ -107,6 +107,7 @@ const write = async () => {
             LOCBRDCON: content.value,
             LOCBRDPWD: category.value === 1 ? password.value : null,
             LOCBRDTYP: category.value === 1 ? 'S' : 'F', //공지사항 추가해야함!!
+            // MEMBERSEQ: 로그인이용자 id(세션)
         };
 
         // 게시물 작성 API 호출

From e87957c88a2cc61bd9d5c1f49f7003452632e754 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Tue, 14 Jan 2025 12:23:13 +0900
Subject: [PATCH 10/12] =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=20=EB=B0=8F=20=ED=85=8C=EC=8A=A4=ED=8A=B8=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardComment.vue |   4 +
 src/components/board/BoardContent.vue |   6 +-
 src/components/board/BoardProfile.vue |  78 ++++++++-----
 src/components/list/BoardCard.vue     | 154 +++++++++++++++++---------
 src/router/index.js                   |  10 +-
 src/stores/calendarStore.js           |   4 +-
 src/views/board/BoardEdit.vue         | 154 ++++++++++++++++++++++++++
 src/views/board/BoardList.vue         |  73 ++++++------
 src/views/board/BoardView.vue         | 108 ++++++++++++++++--
 src/views/board/BoardWrite.vue        |   6 +-
 vite.config.js                        |   2 +-
 11 files changed, 471 insertions(+), 128 deletions(-)
 create mode 100644 src/views/board/BoardEdit.vue

diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue
index 6128c7d..e71b3ee 100644
--- a/src/components/board/BoardComment.vue
+++ b/src/components/board/BoardComment.vue
@@ -36,6 +36,7 @@ import BoardComentArea from './BoardComentArea.vue';
 import { ref, computed } from 'vue';
 import Pagination from '../pagination/Pagination.vue';
 import PlusButton from '../button/PlusBtn.vue';
+import { defineEmits } from 'vue';
 
 const comment = ref(false);
 
@@ -43,6 +44,9 @@ const toggleComment = () => {
     comment.value = !comment.value
 };
 
+// emits 정의
+const emit = defineEmits(['submitComment']);
+
 </script>
 
 <style scoped>
diff --git a/src/components/board/BoardContent.vue b/src/components/board/BoardContent.vue
index 242ca51..2b5abbd 100644
--- a/src/components/board/BoardContent.vue
+++ b/src/components/board/BoardContent.vue
@@ -51,6 +51,10 @@ defineProps({
         type: Array,
         default: () => [],
     },
+    attachments: {
+        type: Array, // 첨부파일 배열 타입
+        default: () => [], // 기본값 설정
+    },
 });
 
 </script>
@@ -59,4 +63,4 @@ defineProps({
     .min-250 {
         min-height: 250px !important;
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue
index d747800..cfe80e3 100644
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@@ -24,72 +24,96 @@
         </div>
         <div class="ms-auto btn-area">
             <template v-if="showDetail">
-                <EditButton />
-                <DeleteButton />
+                <EditButton @click="handleEdit" />
+                <DeleteButton @click="handleDelete" />
             </template>
             <template v-else>
                 <template v-if="author">
-                    <button class="btn author btn-label-primary btn-icon">
+                    <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">
-                        <i class='bx bx-trash' ></i>
+                    <button class="btn author btn-label-primary btn-icon" @click="handleDelete">
+                        <i class='bx bx-trash'></i>
                     </button>
                 </template>
-                <BoardRecommendBtn :likeClicked="true" :dislikeClicked="false"/>
+                <BoardRecommendBtn :likeClicked="true" :dislikeClicked="false" />
             </template>
         </div>
     </div>
 </template>
 
 <script setup>
+import { useRouter } from 'vue-router';
+import axios from 'axios';
 import DeleteButton from '../button/DeleteBtn.vue';
 import EditButton from '../button/EditBtn.vue';
 import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
 
+// Vue Router 인스턴스
+const router = useRouter();
+
+// Props 정의
 defineProps({
-    profileName : {
+    profileName: {
         type: String,
         default: '익명',
     },
-    unknown : {
+    unknown: {
         type: Boolean,
         default: true,
     },
-    showDetail : {
+    showDetail: {
         type: Boolean,
         default: true,
     },
-    author : {
+    author: {
         type: Boolean,
         default: false,
-    }
+    },
 });
+const boardId = 80; //test용
 
+// 수정 버튼 핸들러
+const handleEdit = () => {
+    router.push({ name: 'BoardEdit', params: { id: boardId } });
+};
 
+// 삭제 버튼 핸들러
+const handleDelete = async () => {
+    if (confirm('정말 이 게시물을 삭제하시겠습니까?')) {
+        try {
+            await axios.delete(`/board/${boardId}`);
+            alert('게시물이 성공적으로 삭제되었습니다.');
+            router.push({ name: 'BoardList' });
+        } catch (error) {
+            console.error('게시물 삭제 중 오류 발생:', error);
+            alert('게시물 삭제에 실패했습니다.');
+        }
+    }
+};
 </script>
 
 <style scoped>
-    .profile-detail span ~ span {
-        margin-left: 5px;
-    }
+.profile-detail span ~ span {
+    margin-left: 5px;
+}
 
-    .ms-auto button + button {
-        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;
     }
-
-    @media screen and  (max-width:450px) {
-        .btn-area {
-            margin-top: 10px;
-            width: 100%;
-        }
-
-        .btn.author {
-            height: 30px;
-        }
-    }
+}
 </style>
diff --git a/src/components/list/BoardCard.vue b/src/components/list/BoardCard.vue
index c2ed3c0..02c8b18 100644
--- a/src/components/list/BoardCard.vue
+++ b/src/components/list/BoardCard.vue
@@ -1,23 +1,43 @@
 <template>
-    <div class="" role="button">
-        <div class="card">
-            <div class="d-sm-flex">
-                <div v-if="img">
-                    <img class="card-img card-img-left" :src="img" alt="" style="width: 200px; height: 200px; object-fit: cover" />
+    <div class="container mt-4">
+        <div v-if="posts.length === 0" class="text-center">
+            게시물이 없습니다.
+        </div>
+        <div v-for="post in posts" :key="post.id" class="card mb-3 shadow-sm">
+            <div class="row g-0">
+                <!-- 이미지 섹션 -->
+                <div v-if="post.img" class="col-md-2">
+                    <img
+                        :src="post.img"
+                        alt="이미지"
+                        class="img-fluid rounded-start"
+                        style="object-fit: cover; height: 100%; width: 100%;"
+                    />
                 </div>
-                <div class="col">
+                <!-- 게시물 내용 섹션 -->
+                <div class="col-md-10">
                     <div class="card-body">
-                        <h5 class="card-title align-items-center">
-                            <slot name="badgeType"></slot>
-                            {{ title }}
-                        </h5>
-                        <p class="card-text str_wrap pt-5">
-                            {{ content }}
-                        </p>
-                        <p class="card-text">
-                            <small class="text-muted">{{ date }}</small>
-                            <slot name="optInfo"></slot>
-                        </p>
+                        <!-- 태그 -->
+                        <h6 class="badge rounded-pill bg-primary text-white mb-2">
+                            {{ post.category }}
+                        </h6>
+                        <!-- 제목 -->
+                        <h5 class="card-title">{{ post.title }}</h5>
+                        <!-- 본문 -->
+                        <p class="card-text str_wrap">{{ post.content }}</p>
+                        <!-- 날짜 -->
+                        <div class="d-flex justify-content-between">
+                            <small class="text-muted">{{ formatDate(post.date) }}</small>
+                            <!-- 좋아요와 댓글 -->
+                            <div>
+                                <span class="text-muted me-3">
+                                    <i class="bx bx-like"></i> {{ post.likes || 0 }}
+                                </span>
+                                <span class="text-muted">
+                                    <i class="bx bx-comment"></i> {{ post.comments || 0 }}
+                                </span>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -25,41 +45,75 @@
     </div>
 </template>
 
-<script setup>
-    // const data = defineProps(['item']);
-    const prop = defineProps({
-        title: {
-            type: String,
-            default: '제목',
-            required: true,
-        },
-        content: {
-            type: String,
-            default: '내용',
-            required: true,
-        },
-        date: {
-            type: String,
-            default: 'date',
-            required: true,
-        },
-        img: {
-            type: String,
-            required: false,
-        },
-    });
+<script>
+import axios from "axios";
 
-    const colSetting = () => {
-        img ? 'col-9' : '';
-    };
+export default {
+    data() {
+        return {
+            posts: [], // 게시물 데이터 초기화
+        };
+    },
+    methods: {
+        async fetchPosts() {
+            try {
+                const response = await axios.get("/board/general");
+                if (response.data && Array.isArray(response.data.data)) {
+                    console.log("API Response:",response.data);
+                    this.posts = response.data.data.map((post) => ({
+                        ...post,
+                        img: post.img || null, // 이미지 경로 처리
+                        likes: post.likes || 0, // 좋아요 수
+                        comments: post.comments || 0, // 댓글 수
+                    }));
+                }
+            } catch (error) {
+                console.error("Failed to fetch posts:", error);
+            }
+        },
+        formatDate(dateString) {
+            const date = new Date(dateString);
+            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")}`;
+        },
+    },
+    mounted() {
+        this.fetchPosts();
+    },
+};
 </script>
 
 <style>
-    .str_wrap {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 3;
-        -webkit-box-orient: vertical;
-    }
+/* 카드 스타일 */
+.card {
+    border: 1px solid #e6e6e6;
+    border-radius: 8px;
+    transition: transform 0.2s ease-in-out;
+}
+
+.card:hover {
+    transform: scale(1.02);
+}
+
+/* 텍스트 줄임 표시 */
+.str_wrap {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+}
+
+/* 이미지 스타일 */
+.img-fluid {
+    border-radius: 8px 0 0 8px;
+}
+
+/* 태그 배지 스타일 */
+.badge {
+    font-size: 0.8rem;
+    padding: 5px 10px;
+}
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index 417ef6c..a19d7da 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,5 +1,4 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import BoardWrite from '@v/board/BoardWrite.vue';
 
 // 초기 렌더링 속도를 위해 지연 로딩 사용
 const routes = [
@@ -14,6 +13,7 @@ const routes = [
         children: [
             {
                 path: '',
+                name: 'BoardList',
                 component: () => import('@v/board/BoardList.vue')
             },
             {
@@ -21,8 +21,14 @@ const routes = [
                 component: () => import('@v/board/BoardWrite.vue')
             },
             {
-                path: 'get/:id',
+                path: ':id',
+                name: 'BoardDetail',
                 component: () => import('@v/board/BoardView.vue')
+            },
+            {
+                path: 'edit/:id',
+                name: 'BoardEdit',
+                component: () => import('@v/board/BoardEdit.vue')
             }
         ]
     },
diff --git a/src/stores/calendarStore.js b/src/stores/calendarStore.js
index 80c8525..a3616f9 100644
--- a/src/stores/calendarStore.js
+++ b/src/stores/calendarStore.js
@@ -4,12 +4,12 @@ import axios from 'axios';
 const events = ref([]);
 
 const fetchEvents = async () => {
-  const response = await axios.get('/api/calendar/events');
+  const response = await axios.get('/calendar/events');
   events.value = response.data;
 };
 
 const addEvent = async (event) => {
-  await axios.post('/api/calendar/event', event);
+  await axios.post('/calendar/event', event);
   fetchEvents();
 };
 
diff --git a/src/views/board/BoardEdit.vue b/src/views/board/BoardEdit.vue
new file mode 100644
index 0000000..36e81bd
--- /dev/null
+++ b/src/views/board/BoardEdit.vue
@@ -0,0 +1,154 @@
+<template>
+    <div class="container-xxl flex-grow-1 container-p-y">
+        <div class="card">
+            <div class="pb-4 rounded-top">
+                <div class="container py-12 px-xl-10 px-4" style="padding-bottom: 0px !important">
+                    <h3 class="text-center mb-2 mt-4">글 수정</h3>
+                </div>
+            </div>
+
+            <div class="col-xl-12">
+                <div class="card-body">
+                    <!-- 제목 입력 -->
+                    <FormInput
+                        title="제목"
+                        name="title"
+                        :is-essential="true"
+                        :is-alert="titleAlert"
+                        v-model="title"
+                    />
+
+                    <!-- 내용 입력 -->
+                    <div class="mb-4">
+                        <label for="html5-tel-input" class="col-md-2 col-form-label">
+                            내용
+                            <span class="text-red">*</span>
+                            <div class="invalid-feedback" :class="contentAlert ? 'display-block' : ''">
+                                내용을 확인해주세요.
+                            </div>
+                        </label>
+                        <div class="col-md-12">
+                            <QEditor v-model="content" />
+                        </div>
+                    </div>
+
+                    <!-- 버튼 -->
+                    <div class="mb-4 d-flex justify-content-end">
+                        <button type="button" class="btn btn-info right" @click="goList">
+                            <i class="bx bx-left-arrow-alt"></i>
+                        </button>
+                        <button type="button" class="btn btn-primary ms-1" @click="updateBoard">
+                            <i class="bx bx-check"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import QEditor from '@c/editor/QEditor.vue';
+import FormInput from '@c/input/FormInput.vue';
+import FormFile from '@c/input/FormFile.vue';
+import { ref, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import axios from '@api';
+
+// 상태 변수
+const title = ref('');
+const content = ref('');
+const attachFiles = ref([]);
+
+// 경고 상태
+const titleAlert = ref(false);
+const contentAlert = ref(false);
+const attachFilesAlert = ref(false);
+
+// 라우터
+const router = useRouter();
+const route = useRoute();
+const currentBoardId = ref(Number(route.params.id));
+
+// 게시물 데이터 로드
+const fetchBoardDetails = async () => {
+    try {
+        const response = await axios.get(`/board/${currentBoardId.value}`);
+        const data = response.data.data.boardDetail;
+
+        // 데이터 초기화
+        title.value = data.title || '';
+        content.value = data.content || '';
+        console.log('게시물 데이터 로드 완료:', { title: title.value, content: content.value });
+    } catch (error) {
+        console.error('게시물 가져오기 오류:', error.response || error.message);
+        alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
+    }
+};
+
+// 목록 페이지로 이동
+const goList = () => {
+    router.push('/board');
+};
+
+// 게시물 수정
+const updateBoard = async () => {
+    // 유효성 검사
+    if (!title.value) {
+        titleAlert.value = true;
+        return;
+    }
+    titleAlert.value = false;
+
+    if (!content.value) {
+        contentAlert.value = true;
+        return;
+    }
+    contentAlert.value = false;
+
+    try {
+        // 수정 데이터 전송
+        const boardData = {
+            LOCBRDTTL: title.value,
+            LOCBRDCON: content.value,
+        };
+
+        await axios.put(`/board/${currentBoardId.value}`, boardData);
+
+        // 첨부파일 처리
+        if (attachFiles.value && attachFiles.value.length > 0) {
+            for (const file of attachFiles.value) {
+                const formData = new FormData();
+                formData.append('file', file);
+                await axios.post(`/board/${currentBoardId.value}/attachments`, formData, {
+                    headers: {
+                        'Content-Type': 'multipart/form-data',
+                    },
+                });
+            }
+        }
+
+        alert('게시물이 수정되었습니다.');
+        goList();
+    } catch (error) {
+        console.error('게시물 수정 중 오류 발생:', error);
+        alert('게시물 수정에 실패했습니다.');
+    }
+};
+
+// 컴포넌트 마운트 시 데이터 로드
+onMounted(() => {
+    if (currentBoardId.value) {
+        fetchBoardDetails();
+    } else {
+        console.error('잘못된 게시물 ID:', currentBoardId.value);
+    }
+});
+</script>
+
+<style>
+.text-red {
+    color: red;
+    text-align: center;
+}
+</style>
diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue
index 25109bd..691fdba 100644
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@@ -1,30 +1,30 @@
 <template>
     <div class="container-xxl flex-grow-1 container-p-y">
         <search-bar @update:data="search" />
-
         <div class="row g-3">
             <div class="mt-8">
                 <router-link to="/board/write">
                     <WriteButton />
                 </router-link>
             </div>
-            <template v-for="(item, index) in list" :key="item.id">
-                <board-card :title="item.title" :content="item.content" :img="item.img" :date="item.date" @click="goDetail(item.id)">
+
+            <!-- 게시판 리스트 -->
+            <template v-for="(item, index) in filteredList" :key="item.id">
+                <board-card
+                    :title="item.title"
+                    :content="item.content"
+                    :img="item.img"
+                    :date="item.date"
+                    @click="goDetail(item.id)"
+                >
                     <template #badgeType>
-                        <span v-if="item.type == 1" class="badge rounded-pill bg-label-danger">공지</span>
-                        <span v-else-if="item.type == 2" class="badge rounded-pill bg-label-primary">자유</span>
-                        <span v-else-if="item.type == 3" class="badge rounded-pill bg-label-success">익명</span>
-                    </template>
-                    <template #optInfo>
-                        <small v-show="item.viewCount" style="padding-left: 10px" class="text-muted"
-                            ><i class="fa-regular fa-eye"></i> {{ item.viewCount }}
-                        </small>
-                        <small v-show="item.cmtCount" style="padding-left: 10px" class="text-muted"
-                            ><i class="fa-regular fa-comment-dots"></i> {{ item.cmtCount }}
-                        </small>
+                        <span v-if="item.type === 1" class="badge rounded-pill bg-label-danger">공지</span>
+                        <span v-else-if="item.type === 2" class="badge rounded-pill bg-label-primary">자유</span>
+                        <span v-else-if="item.type === 3" class="badge rounded-pill bg-label-success">익명</span>
                     </template>
                 </board-card>
             </template>
+
             <div class="mt-8">
                 <pagination />
             </div>
@@ -33,25 +33,36 @@
 </template>
 
 <script setup>
-    import { ref } from 'vue';
-    import BoardCard from '@c/list/BoardCard.vue';
-    import Pagination from '@c/pagination/Pagination.vue';
-    import SearchBar from '@c/search/SearchBar.vue';
-    import router from '@/router';
-    import dummy from '@a/boardDummy.json';
-    import WriteButton from '@c/button/WriteBtn.vue';
+import { ref, computed } from 'vue';
+import BoardCard from '@c/list/BoardCard.vue';
+import Pagination from '@c/pagination/Pagination.vue';
+import SearchBar from '@c/search/SearchBar.vue';
+import router from '@/router';
+import dummy from '@a/boardDummy.json';
+import WriteButton from '@c/button/WriteBtn.vue';
 
-    const list = ref(dummy);
-    const searchText = ref('');
+// 데이터 초기화
+const list = ref(dummy);
+const searchText = ref('');
 
-    /** 상세로 이동 */
-    const goDetail = idx => {
-        router.push(`/board/get/${idx}`);
-    };
+// 상세 페이지 이동
+const goDetail = (id) => {
+    router.push({ name: 'BoardDetail', params: { id } });
+};
 
-    const search = e => {
-        console.log('검색:', e);
-    };
+// 검색 처리
+const search = (e) => {
+    searchText.value = e.trim();
+};
+
+// 검색 결과 필터링
+const filteredList = computed(() =>
+    list.value.filter((item) =>
+        item.title.toLowerCase().includes(searchText.value.toLowerCase())
+    )
+);
 </script>
 
-<style></style>
+<style>
+/* 필요에 따라 스타일 추가 */
+</style>
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index 890e036..87b2403 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -3,15 +3,27 @@
         <div class="row">
             <div class="col">
                 <div class="card">
+                    <!-- 프로필 헤더 -->
                     <div class="card-header">
-                        <BoardProfile profileName="만드레야2"/>
+                        <BoardProfile :boardId="currentBoardId.value" :profileName="profileName" />
                     </div>
+                    <!-- 게시글 내용 -->
                     <div class="card-body">
-                        <BoardContent boardTitle="제목1" boardContent="내용1" :dropdownItems="dropdownItems" />
-                        <BoardComentArea />
+                        <h5 class="mb-4">{{ boardTitle }}</h5>
+                        <!-- HTML 콘텐츠 렌더링 -->
+                        <div class="board-content" v-html="boardContent"></div>
+                        <!-- 첨부파일 목록 -->
+                        <ul v-if="attachments.length" class="attachments mt-4">
+                            <li v-for="(attachment, index) in attachments" :key="index">
+                                <a :href="attachment.url" target="_blank">{{ attachment.name }}</a>
+                            </li>
+                        </ul>
+                        <!-- 댓글 영역 -->
+                        <BoardComentArea :comments="comments" />
                     </div>
+                    <!-- 댓글 입력 -->
                     <div class="card-footer">
-                        <BoardComment />
+                        <BoardComment @submitComment="addComment" />
                     </div>
                 </div>
             </div>
@@ -22,15 +34,89 @@
 <script setup>
 import BoardComentArea from '@c/board/BoardComentArea.vue';
 import BoardComment from '@c/board/BoardComment.vue';
-import BoardContent from '@c/board/BoardContent.vue';
 import BoardProfile from '@c/board/BoardProfile.vue';
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import axios from '@api';
 
-const dropdownItems = ref([
-    { label: '내용1'},
-    { label: '내용2'},
-    { label: '내용3'},
-]);
+// 게시물 데이터 상태
+const profileName = ref('익명 사용자');
+const boardTitle = ref('제목 없음');
+const boardContent = ref('내용 없음');
+const comments = ref([]);
+const attachments = ref([]);
 
+// 라우트에서 ID 가져오기
+const route = useRoute();
+const currentBoardId = ref(Number(route.params.id));
+console.log(currentBoardId.value)
+
+// 댓글 추가 함수
+const addComment = async (newComment) => {
+    try {
+        const requestData = {
+            content: newComment,
+        };
+        const response = await axios.post(`/board/${currentBoardId.value}/comment`, requestData);
+        comments.value.push(response.data);
+        alert('댓글이 추가되었습니다.');
+    } catch (error) {
+        console.error('댓글 추가 오류:', error);
+        alert('댓글 추가 중 오류가 발생했습니다.');
+    }
+};
+
+// 게시물 상세 데이터 불러오기
+const fetchBoardDetails = async () => {
+    try {
+        const response = await axios.get(`/board/${currentBoardId.value}`);
+        const data = response.data.data;
+
+        // API 응답 데이터 반영
+        const boardDetail = data.boardDetail || {};
+        profileName.value = boardDetail.author || '익명 사용자';
+        boardTitle.value = boardDetail.title || '제목 없음';
+        boardContent.value = boardDetail.content || '내용 없음';
+
+        attachments.value = data.attachments || [];
+        comments.value = data.comments || [];
+    } catch (error) {
+        console.error('게시물 가져오기 오류:', error);
+        alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
+    }
+};
+
+// 컴포넌트 마운트 시 데이터 로드
+onMounted(() => {
+    fetchBoardDetails();
+});
 </script>
 
+<style>
+/* 카드 스타일 */
+.card {
+    margin-bottom: 1.5rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 게시글 내용 스타일 */
+.board-content {
+    white-space: pre-wrap; /* 줄바꿈 및 공백 유지 */
+    font-size: 16px;
+    line-height: 1.6;
+}
+
+/* 첨부파일 목록 스타일 */
+.attachments {
+    padding-left: 20px;
+    list-style: disc;
+    margin-top: 1rem;
+}
+
+/* 댓글 섹션 스타일 */
+.card-footer {
+    border-top: 1px solid #e6e6e6;
+    background-color: #f9f9f9;
+}
+</style>
diff --git a/src/views/board/BoardWrite.vue b/src/views/board/BoardWrite.vue
index b4b3c11..0538b8e 100644
--- a/src/views/board/BoardWrite.vue
+++ b/src/views/board/BoardWrite.vue
@@ -55,7 +55,7 @@ import FormSelect from '@c/input/FormSelect.vue';
 import FormFile from '@c/input/FormFile.vue';
 import { ref, watch } from 'vue';
 import router from '@/router';
-import axios from 'axios';
+import axios from '@api';
 
 const categoryList = ['자유', '익명', '공지사항'];
 // input 경고문 만들어야함!!
@@ -111,7 +111,7 @@ const write = async () => {
         };
 
         // 게시물 작성 API 호출
-        const { data: boardResponse } = await axios.post('/api/board', boardData);
+        const { data: boardResponse } = await axios.post('/board', boardData);
         const boardId = boardResponse.data.boardId;
 
         // 첨부파일 처리
@@ -135,7 +135,7 @@ const write = async () => {
                 formData.append("CMNFLESIZ", file.size); // 파일 크기
                 formData.append("CMNFLEREG", fileInfo.registrantId); // 등록자 ID
 
-                const response = await axios.post(`/api/board/${boardId}/attachments`, formData, {
+                const response = await axios.post(`/board/${boardId}/attachments`, formData, {
                     headers: {
                         "Content-Type": "multipart/form-data",
                     },
diff --git a/vite.config.js b/vite.config.js
index 061e29f..f2428a4 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -8,7 +8,7 @@ export default defineConfig({
     server: {
         proxy: {
             '/api': {
-                target: 'http://localhost:10325', // Spring Boot 서버 주소
+                target: 'http://localhost:10325/api', // Spring Boot 서버 주소
                 changeOrigin: true,
             },
         },

From a093a1b3949d95b3a1e7c5d8c86e0c0db0fbcb19 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Tue, 14 Jan 2025 12:46:21 +0900
Subject: [PATCH 11/12] =?UTF-8?q?api=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/axios-interceptor.js            | 2 +-
 src/components/board/BoardProfile.vue      | 4 ++--
 src/components/calendar/SampleCalendar.vue | 2 +-
 src/components/list/BoardCard.vue          | 4 ++--
 src/stores/calendarStore.js                | 2 +-
 src/views/board/BoardEdit.vue              | 6 +++---
 src/views/board/BoardView.vue              | 4 ++--
 src/views/board/BoardWrite.vue             | 4 ++--
 vite.config.js                             | 8 --------
 9 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/src/common/axios-interceptor.js b/src/common/axios-interceptor.js
index 6af0940..08bf871 100644
--- a/src/common/axios-interceptor.js
+++ b/src/common/axios-interceptor.js
@@ -2,7 +2,7 @@ import axios from "axios";
 import router from "@/router/index";
 
 const $api = axios.create({
-    baseURL: import.meta.env.VITE_API_URL,
+    baseURL: 'http://localhost:10325/api/',
     timeout: 300000,
     withCredentials : true
 })
diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue
index cfe80e3..cd81e0f 100644
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@@ -44,7 +44,7 @@
 
 <script setup>
 import { useRouter } from 'vue-router';
-import axios from 'axios';
+import axios from '@api';
 import DeleteButton from '../button/DeleteBtn.vue';
 import EditButton from '../button/EditBtn.vue';
 import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
@@ -82,7 +82,7 @@ const handleEdit = () => {
 const handleDelete = async () => {
     if (confirm('정말 이 게시물을 삭제하시겠습니까?')) {
         try {
-            await axios.delete(`/board/${boardId}`);
+            await axios.delete(`board/${boardId}`);
             alert('게시물이 성공적으로 삭제되었습니다.');
             router.push({ name: 'BoardList' });
         } catch (error) {
diff --git a/src/components/calendar/SampleCalendar.vue b/src/components/calendar/SampleCalendar.vue
index f3362f3..b564c98 100644
--- a/src/components/calendar/SampleCalendar.vue
+++ b/src/components/calendar/SampleCalendar.vue
@@ -67,7 +67,7 @@ import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import CenterModal from '@c/modal/CenterModal.vue';
 import { inject, onMounted, reactive, ref } from 'vue';
-import axios from 'axios';
+import axios from '@api';
 import { isEmpty } from '@/common/utils';
 import FormInput from '../input/FormInput.vue';
 import FlatPickr from 'vue-flatpickr-component';
diff --git a/src/components/list/BoardCard.vue b/src/components/list/BoardCard.vue
index 02c8b18..4043d50 100644
--- a/src/components/list/BoardCard.vue
+++ b/src/components/list/BoardCard.vue
@@ -46,7 +46,7 @@
 </template>
 
 <script>
-import axios from "axios";
+import axios from "@api";
 
 export default {
     data() {
@@ -57,7 +57,7 @@ export default {
     methods: {
         async fetchPosts() {
             try {
-                const response = await axios.get("/board/general");
+                const response = await axios.get("board/general");
                 if (response.data && Array.isArray(response.data.data)) {
                     console.log("API Response:",response.data);
                     this.posts = response.data.data.map((post) => ({
diff --git a/src/stores/calendarStore.js b/src/stores/calendarStore.js
index a3616f9..aacb07f 100644
--- a/src/stores/calendarStore.js
+++ b/src/stores/calendarStore.js
@@ -1,5 +1,5 @@
 import { ref } from 'vue';
-import axios from 'axios';
+import axios from '@api';
 
 const events = ref([]);
 
diff --git a/src/views/board/BoardEdit.vue b/src/views/board/BoardEdit.vue
index 36e81bd..a7795f1 100644
--- a/src/views/board/BoardEdit.vue
+++ b/src/views/board/BoardEdit.vue
@@ -73,7 +73,7 @@ const currentBoardId = ref(Number(route.params.id));
 // 게시물 데이터 로드
 const fetchBoardDetails = async () => {
     try {
-        const response = await axios.get(`/board/${currentBoardId.value}`);
+        const response = await axios.get(`board/${currentBoardId.value}`);
         const data = response.data.data.boardDetail;
 
         // 데이터 초기화
@@ -113,14 +113,14 @@ const updateBoard = async () => {
             LOCBRDCON: content.value,
         };
 
-        await axios.put(`/board/${currentBoardId.value}`, boardData);
+        await axios.put(`board/${currentBoardId.value}`, boardData);
 
         // 첨부파일 처리
         if (attachFiles.value && attachFiles.value.length > 0) {
             for (const file of attachFiles.value) {
                 const formData = new FormData();
                 formData.append('file', file);
-                await axios.post(`/board/${currentBoardId.value}/attachments`, formData, {
+                await axios.post(`board/${currentBoardId.value}/attachments`, formData, {
                     headers: {
                         'Content-Type': 'multipart/form-data',
                     },
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index 87b2403..22fcdee 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -57,7 +57,7 @@ const addComment = async (newComment) => {
         const requestData = {
             content: newComment,
         };
-        const response = await axios.post(`/board/${currentBoardId.value}/comment`, requestData);
+        const response = await axios.post(`board/${currentBoardId.value}/comment`, requestData);
         comments.value.push(response.data);
         alert('댓글이 추가되었습니다.');
     } catch (error) {
@@ -69,7 +69,7 @@ const addComment = async (newComment) => {
 // 게시물 상세 데이터 불러오기
 const fetchBoardDetails = async () => {
     try {
-        const response = await axios.get(`/board/${currentBoardId.value}`);
+        const response = await axios.get(`board/${currentBoardId.value}`);
         const data = response.data.data;
 
         // API 응답 데이터 반영
diff --git a/src/views/board/BoardWrite.vue b/src/views/board/BoardWrite.vue
index 0538b8e..97249fd 100644
--- a/src/views/board/BoardWrite.vue
+++ b/src/views/board/BoardWrite.vue
@@ -111,7 +111,7 @@ const write = async () => {
         };
 
         // 게시물 작성 API 호출
-        const { data: boardResponse } = await axios.post('/board', boardData);
+        const { data: boardResponse } = await axios.post('board', boardData);
         const boardId = boardResponse.data.boardId;
 
         // 첨부파일 처리
@@ -135,7 +135,7 @@ const write = async () => {
                 formData.append("CMNFLESIZ", file.size); // 파일 크기
                 formData.append("CMNFLEREG", fileInfo.registrantId); // 등록자 ID
 
-                const response = await axios.post(`/board/${boardId}/attachments`, formData, {
+                const response = await axios.post(`board/${boardId}/attachments`, formData, {
                     headers: {
                         "Content-Type": "multipart/form-data",
                     },
diff --git a/vite.config.js b/vite.config.js
index f2428a4..617eec4 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,14 +5,6 @@ import vueDevTools from 'vite-plugin-vue-devtools'
 
 // https://vite.dev/config/
 export default defineConfig({
-    server: {
-        proxy: {
-            '/api': {
-                target: 'http://localhost:10325/api', // Spring Boot 서버 주소
-                changeOrigin: true,
-            },
-        },
-    },
     plugins: [
         vue(),
         vueDevTools(),

From d87a87450a3575a6c327d030e68d03da9b75fa1e Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Tue, 14 Jan 2025 16:08:33 +0900
Subject: [PATCH 12/12] =?UTF-8?q?=EA=B2=8C=EC=8B=9C=ED=8C=90=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardProfile.vue |   4 +-
 src/components/input/FormInput.vue    |  51 ++++++-----
 src/components/list/BoardCard.vue     | 125 +++++++++++++-------------
 src/components/list/BoardCardList.vue |  37 ++++++++
 src/views/board/BoardEdit.vue         |  38 ++++----
 src/views/board/BoardList.vue         |  48 +++++-----
 src/views/board/BoardView.vue         |  60 +++----------
 7 files changed, 187 insertions(+), 176 deletions(-)
 create mode 100644 src/components/list/BoardCardList.vue

diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue
index cd81e0f..c8a90c3 100644
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@@ -48,6 +48,7 @@ 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();
@@ -71,8 +72,8 @@ defineProps({
         default: false,
     },
 });
-const boardId = 80; //test용
 
+const boardId = 100; //수정필요!!
 // 수정 버튼 핸들러
 const handleEdit = () => {
     router.push({ name: 'BoardEdit', params: { id: boardId } });
@@ -91,6 +92,7 @@ const handleDelete = async () => {
         }
     }
 };
+
 </script>
 
 <style scoped>
diff --git a/src/components/input/FormInput.vue b/src/components/input/FormInput.vue
index 5987627..12a8e79 100644
--- a/src/components/input/FormInput.vue
+++ b/src/components/input/FormInput.vue
@@ -5,22 +5,26 @@
             <span :class="isEssential ? 'text-red' : 'none'">*</span>
         </label>
         <div class="col-md-10">
-            <input :id="name"
+            <input
+                :id="name"
                 class="form-control"
                 :type="type"
-                @input="updateInput"
-                :value="value"
+                v-model="inputValue"
                 :maxLength="maxlength"
-                :placeholder="title" />
-            <div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">{{ title }}을 확인해주세요.</div>
+                :placeholder="title"
+            />
+            <div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">
+                {{ title }}을 확인해주세요.
+            </div>
         </div>
     </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 
-const prop = defineProps({
+// Props 정의
+const props = defineProps({
     title: {
         type: String,
         default: '라벨',
@@ -34,39 +38,42 @@ const prop = defineProps({
     isEssential: {
         type: Boolean,
         default: false,
-        required: false,
     },
     type: {
         type: String,
         default: 'text',
-        required: false,
     },
-    value: {
+    modelValue: {
         type: String,
         default: '',
-        require: false,
     },
     maxlength: {
         type: Number,
         default: 30,
-        required: false,
     },
-    isAlert : {
+    isAlert: {
         type: Boolean,
         default: false,
-        required: false,
-    }
+    },
 });
 
-const emits = defineEmits(['update:data'])
+// Emits 정의
+const emits = defineEmits(['update:modelValue']);
 
-const updateInput = function (event) {
-    //Type Number 일때 maxlength 적용 안됨 방지
-    if (event.target.value.length > prop.maxlength) {
-        event.target.value = event.target.value.slice(0, prop.maxlength);
+// 로컬 상태로 사용하기 위한 `inputValue`
+const inputValue = ref(props.modelValue);
+
+// 부모로 데이터 업데이트
+watch(inputValue, (newValue) => {
+    emits('update:modelValue', newValue);
+});
+
+// 초기값 동기화
+watch(() => props.modelValue, (newValue) => {
+    if (inputValue.value !== newValue) {
+        inputValue.value = newValue;
     }
-    emits('update:data', event.target.value);
-};
+});
 </script>
 
 <style>
diff --git a/src/components/list/BoardCard.vue b/src/components/list/BoardCard.vue
index 4043d50..d47ff53 100644
--- a/src/components/list/BoardCard.vue
+++ b/src/components/list/BoardCard.vue
@@ -1,42 +1,37 @@
 <template>
-    <div class="container mt-4">
-        <div v-if="posts.length === 0" class="text-center">
-            게시물이 없습니다.
-        </div>
-        <div v-for="post in posts" :key="post.id" class="card mb-3 shadow-sm">
-            <div class="row g-0">
-                <!-- 이미지 섹션 -->
-                <div v-if="post.img" class="col-md-2">
-                    <img
-                        :src="post.img"
-                        alt="이미지"
-                        class="img-fluid rounded-start"
-                        style="object-fit: cover; height: 100%; width: 100%;"
-                    />
-                </div>
-                <!-- 게시물 내용 섹션 -->
-                <div class="col-md-10">
-                    <div class="card-body">
-                        <!-- 태그 -->
-                        <h6 class="badge rounded-pill bg-primary text-white mb-2">
-                            {{ post.category }}
-                        </h6>
-                        <!-- 제목 -->
-                        <h5 class="card-title">{{ post.title }}</h5>
-                        <!-- 본문 -->
-                        <p class="card-text str_wrap">{{ post.content }}</p>
-                        <!-- 날짜 -->
-                        <div class="d-flex justify-content-between">
-                            <small class="text-muted">{{ formatDate(post.date) }}</small>
-                            <!-- 좋아요와 댓글 -->
-                            <div>
-                                <span class="text-muted me-3">
-                                    <i class="bx bx-like"></i> {{ post.likes || 0 }}
-                                </span>
-                                <span class="text-muted">
-                                    <i class="bx bx-comment"></i> {{ post.comments || 0 }}
-                                </span>
-                            </div>
+    <div class="card mb-3 shadow-sm">
+        <div class="row g-0">
+            <!-- 이미지 섹션 -->
+            <div v-if="img" class="col-md-2">
+                <img
+                    :src="img"
+                    alt="이미지"
+                    class="img-fluid rounded-start"
+                    style="object-fit: cover; height: 100%; width: 100%;"
+                />
+            </div>
+            <!-- 게시물 내용 섹션 -->
+            <div class="col-md-10">
+                <div class="card-body">
+                    <!-- 태그 -->
+                    <h6 class="badge rounded-pill bg-primary text-white mb-2">
+                        {{ category }}
+                    </h6>
+                    <!-- 제목 -->
+                    <h5 class="card-title">{{ title }}</h5>
+                    <!-- 본문 -->
+                    <p class="card-text str_wrap">{{ content }}</p>
+                    <!-- 날짜 -->
+                    <div class="d-flex justify-content-between">
+                        <small class="text-muted">{{ formatDate(date) }}</small>
+                        <!-- 좋아요와 댓글 -->
+                        <div>
+                            <span class="text-muted me-3">
+                                <i class="bx bx-like"></i> {{ likes || 0 }}
+                            </span>
+                            <span class="text-muted">
+                                <i class="bx bx-comment"></i> {{ comments || 0 }}
+                            </span>
                         </div>
                     </div>
                 </div>
@@ -46,31 +41,38 @@
 </template>
 
 <script>
-import axios from "@api";
-
 export default {
-    data() {
-        return {
-            posts: [], // 게시물 데이터 초기화
-        };
+    props: {
+        img: {
+            type: String,
+            default: null,
+        },
+        category: {
+            type: String,
+            required: true,
+        },
+        title: {
+            type: String,
+            required: true,
+        },
+        content: {
+            type: String,
+            required: true,
+        },
+        date: {
+            type: String,
+            required: true,
+        },
+        likes: {
+            type: Number,
+            default: 0,
+        },
+        comments: {
+            type: Number,
+            default: 0,
+        },
     },
     methods: {
-        async fetchPosts() {
-            try {
-                const response = await axios.get("board/general");
-                if (response.data && Array.isArray(response.data.data)) {
-                    console.log("API Response:",response.data);
-                    this.posts = response.data.data.map((post) => ({
-                        ...post,
-                        img: post.img || null, // 이미지 경로 처리
-                        likes: post.likes || 0, // 좋아요 수
-                        comments: post.comments || 0, // 댓글 수
-                    }));
-                }
-            } catch (error) {
-                console.error("Failed to fetch posts:", error);
-            }
-        },
         formatDate(dateString) {
             const date = new Date(dateString);
             return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(
@@ -80,9 +82,6 @@ export default {
             ).padStart(2, "0")}`;
         },
     },
-    mounted() {
-        this.fetchPosts();
-    },
 };
 </script>
 
diff --git a/src/components/list/BoardCardList.vue b/src/components/list/BoardCardList.vue
new file mode 100644
index 0000000..6e0b651
--- /dev/null
+++ b/src/components/list/BoardCardList.vue
@@ -0,0 +1,37 @@
+<template>
+    <div class="container mt-4">
+        <div v-if="posts.length === 0" class="text-center">
+            게시물이 없습니다.
+        </div>
+        <div v-for="post in posts" :key="post.id">
+            <BoardCard
+                :img="post.img"
+                :category="post.category"
+                :title="post.title"
+                :content="post.content"
+                :date="post.date"
+                :likes="post.likes"
+                :comments="post.comments"
+                />
+        </div>
+    </div>
+</template>
+
+<script>
+import BoardCard from './BoardCard.vue';
+
+export default {
+    components: {
+        BoardCard,
+    },
+    props: {
+        posts: {
+            type: Array,
+            required: true,
+        },
+    },
+};
+</script>
+
+<style>
+</style>
diff --git a/src/views/board/BoardEdit.vue b/src/views/board/BoardEdit.vue
index a7795f1..3629502 100644
--- a/src/views/board/BoardEdit.vue
+++ b/src/views/board/BoardEdit.vue
@@ -50,7 +50,6 @@
 <script setup>
 import QEditor from '@c/editor/QEditor.vue';
 import FormInput from '@c/input/FormInput.vue';
-import FormFile from '@c/input/FormFile.vue';
 import { ref, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import axios from '@api';
@@ -58,31 +57,33 @@ import axios from '@api';
 // 상태 변수
 const title = ref('');
 const content = ref('');
-const attachFiles = ref([]);
 
 // 경고 상태
 const titleAlert = ref(false);
 const contentAlert = ref(false);
-const attachFilesAlert = ref(false);
 
 // 라우터
 const router = useRouter();
 const route = useRoute();
-const currentBoardId = ref(Number(route.params.id));
-
+const currentBoardId = ref(route.params.id); // 라우트에서 ID 가져오기
+console.log(currentBoardId.value)
 // 게시물 데이터 로드
 const fetchBoardDetails = async () => {
     try {
         const response = await axios.get(`board/${currentBoardId.value}`);
         const data = response.data.data.boardDetail;
 
-        // 데이터 초기화
-        title.value = data.title || '';
-        content.value = data.content || '';
-        console.log('게시물 데이터 로드 완료:', { title: title.value, content: content.value });
+        if (!data) {
+            console.error('API에서 게시물 데이터를 반환하지 않았습니다.');
+            return;
+        }
+
+        // 데이터 설정
+        title.value = data.title || '제목 없음';
+        content.value = data.content || '내용 없음';
+
     } catch (error) {
         console.error('게시물 가져오기 오류:', error.response || error.message);
-        alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
     }
 };
 
@@ -115,19 +116,6 @@ const updateBoard = async () => {
 
         await axios.put(`board/${currentBoardId.value}`, boardData);
 
-        // 첨부파일 처리
-        if (attachFiles.value && attachFiles.value.length > 0) {
-            for (const file of attachFiles.value) {
-                const formData = new FormData();
-                formData.append('file', file);
-                await axios.post(`board/${currentBoardId.value}/attachments`, formData, {
-                    headers: {
-                        'Content-Type': 'multipart/form-data',
-                    },
-                });
-            }
-        }
-
         alert('게시물이 수정되었습니다.');
         goList();
     } catch (error) {
@@ -151,4 +139,8 @@ onMounted(() => {
     color: red;
     text-align: center;
 }
+
+.display-block {
+    display: block;
+}
 </style>
diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue
index 691fdba..31485d2 100644
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@@ -8,22 +8,7 @@
                 </router-link>
             </div>
 
-            <!-- 게시판 리스트 -->
-            <template v-for="(item, index) in filteredList" :key="item.id">
-                <board-card
-                    :title="item.title"
-                    :content="item.content"
-                    :img="item.img"
-                    :date="item.date"
-                    @click="goDetail(item.id)"
-                >
-                    <template #badgeType>
-                        <span v-if="item.type === 1" class="badge rounded-pill bg-label-danger">공지</span>
-                        <span v-else-if="item.type === 2" class="badge rounded-pill bg-label-primary">자유</span>
-                        <span v-else-if="item.type === 3" class="badge rounded-pill bg-label-success">익명</span>
-                    </template>
-                </board-card>
-            </template>
+            <board-card :posts="filteredList" @click="goDetail" />
 
             <div class="mt-8">
                 <pagination />
@@ -33,16 +18,16 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
-import BoardCard from '@c/list/BoardCard.vue';
+import { ref, computed, onMounted } from 'vue';
+import BoardCard from '@/components/list/BoardCardList.vue';
 import Pagination from '@c/pagination/Pagination.vue';
 import SearchBar from '@c/search/SearchBar.vue';
 import router from '@/router';
-import dummy from '@a/boardDummy.json';
 import WriteButton from '@c/button/WriteBtn.vue';
+import axios from '@api';
 
 // 데이터 초기화
-const list = ref(dummy);
+const list = ref([]);
 const searchText = ref('');
 
 // 상세 페이지 이동
@@ -61,6 +46,29 @@ const filteredList = computed(() =>
         item.title.toLowerCase().includes(searchText.value.toLowerCase())
     )
 );
+
+// 게시물 데이터 로드
+const fetchPosts = async () => {
+    try {
+        const response = await axios.get("board/general");
+        if (response.data && Array.isArray(response.data.data)) {
+            list.value = response.data.data.map((post) => ({
+                ...post,
+                img: post.img || null,
+                likes: post.likes || 0,
+                comments: post.comments || 0,
+            }));
+        }
+    } catch (error) {
+        console.error("Failed to fetch posts:", error);
+    }
+};
+
+// 데이터 로드
+onMounted(() => {
+    fetchPosts();
+});
+
 </script>
 
 <style>
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index 22fcdee..080fdc0 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -21,9 +21,14 @@
                         <!-- 댓글 영역 -->
                         <BoardComentArea :comments="comments" />
                     </div>
-                    <!-- 댓글 입력 -->
-                    <div class="card-footer">
-                        <BoardComment @submitComment="addComment" />
+                    <!-- 수정 버튼 -->
+                    <div class="card-footer d-flex justify-content-end">
+                        <button
+                            class="btn btn-primary"
+                            @click="goToEditPage"
+                        >
+                            글 수정
+                        </button>
                     </div>
                 </div>
             </div>
@@ -33,10 +38,9 @@
 
 <script setup>
 import BoardComentArea from '@c/board/BoardComentArea.vue';
-import BoardComment from '@c/board/BoardComment.vue';
 import BoardProfile from '@c/board/BoardProfile.vue';
 import { ref, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import axios from '@api';
 
 // 게시물 데이터 상태
@@ -48,22 +52,13 @@ const attachments = ref([]);
 
 // 라우트에서 ID 가져오기
 const route = useRoute();
+const router = useRouter();
 const currentBoardId = ref(Number(route.params.id));
 console.log(currentBoardId.value)
 
-// 댓글 추가 함수
-const addComment = async (newComment) => {
-    try {
-        const requestData = {
-            content: newComment,
-        };
-        const response = await axios.post(`board/${currentBoardId.value}/comment`, requestData);
-        comments.value.push(response.data);
-        alert('댓글이 추가되었습니다.');
-    } catch (error) {
-        console.error('댓글 추가 오류:', error);
-        alert('댓글 추가 중 오류가 발생했습니다.');
-    }
+// 글 수정 페이지로 이동
+const goToEditPage = () => {
+    router.push({ name: 'BoardEdit', params: { id: currentBoardId.value } });
 };
 
 // 게시물 상세 데이터 불러오기
@@ -91,32 +86,3 @@ onMounted(() => {
     fetchBoardDetails();
 });
 </script>
-
-<style>
-/* 카드 스타일 */
-.card {
-    margin-bottom: 1.5rem;
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-/* 게시글 내용 스타일 */
-.board-content {
-    white-space: pre-wrap; /* 줄바꿈 및 공백 유지 */
-    font-size: 16px;
-    line-height: 1.6;
-}
-
-/* 첨부파일 목록 스타일 */
-.attachments {
-    padding-left: 20px;
-    list-style: disc;
-    margin-top: 1rem;
-}
-
-/* 댓글 섹션 스타일 */
-.card-footer {
-    border-top: 1px solid #e6e6e6;
-    background-color: #f9f9f9;
-}
-</style>