From 66ef5d6302cae67fca5404136d366add284e9f95 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 13 Feb 2025 14:47:13 +0900
Subject: [PATCH 01/23] =?UTF-8?q?scrollbar-none=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/custom.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/public/css/custom.css b/public/css/custom.css
index bee9d0c..9c4e7f6 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -100,4 +100,10 @@
   .grayscaleImg {
     filter: grayscale(100%);
   }
+  
+  
+   /* scrollbar 안보이게 */
+  .scrollbar-none {
+    scrollbar-width: none; 
+  }
   
\ No newline at end of file

From 18d4095f1baddde7ff17fd6a5a96ab081107bcb6 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 13 Feb 2025 14:47:24 +0900
Subject: [PATCH 02/23] =?UTF-8?q?class=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/category/CategoryBtn.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/category/CategoryBtn.vue b/src/components/category/CategoryBtn.vue
index 7c0df23..6536b88 100644
--- a/src/components/category/CategoryBtn.vue
+++ b/src/components/category/CategoryBtn.vue
@@ -1,6 +1,6 @@
 <template>
     <ul class="cate-list list-unstyled d-flex flex-wrap mb-0">
-        <li v-for="category in lists" :key="category.value" class="mt-2 mx-1">
+        <li v-for="category in lists" :key="category.value" class="mt-2 me-2">
             <button
                 type="button"
                 class="btn"
@@ -39,9 +39,7 @@ const selectCategory = (cate) => {
 
 
 <style scoped>
-.cate-list {
-    margin-left: -0.25rem;
-}
+
 
 @media (max-width: 768px) {
     .cate-list {

From 3378dcf93cfed16b84968d8201754dea2e9d3e80 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 13 Feb 2025 14:47:46 +0900
Subject: [PATCH 03/23] =?UTF-8?q?is-row=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/ArrInput.vue | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/input/ArrInput.vue b/src/components/input/ArrInput.vue
index 4fe159f..81d9b20 100644
--- a/src/components/input/ArrInput.vue
+++ b/src/components/input/ArrInput.vue
@@ -1,14 +1,16 @@
 <template>
-    <div class="mb-2">
-        <div class="d-flex align-items-center">
+    <div class="mb-2 row" >
+        <div class="d-flex">
             <label :for="name" class="col-md-2 col-form-label">
                 {{ title }}
                 <span :class="isEssential ? 'link-danger' : 'd-none'">*</span>
             </label>
-            <button type="button" class="btn btn-sm btn-primary" @click="openAddressSearch">주소찾기</button>
+            <div class="align-content-center col-md-10 text-end ms-auto">
+                <button type="button" class="btn btn-sm btn-primary" :class="isRow ? '' : 'ms-auto'" @click="openAddressSearch">주소찾기</button>
+            </div>
         </div>
 
-        <div class="col-md-12">
+        <div :class="isRow ? 'col-md-10 ms-auto' : 'col-md-12'">
             <div class="d-flex mb-3">
                 <input
                     :id="name"
@@ -69,6 +71,11 @@ const props = defineProps({
         default: 30,
         required: false,
     },
+    isRow : {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
     isAlert: {
         type: Boolean,
         default: false,

From 1e305ea86dae999ca7030d804f2e19432eb71824 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 13 Feb 2025 14:48:05 +0900
Subject: [PATCH 04/23] =?UTF-8?q?class=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/wordDict/DictAlphabetFilter.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/wordDict/DictAlphabetFilter.vue b/src/components/wordDict/DictAlphabetFilter.vue
index 9a899ba..c0cc2ca 100644
--- a/src/components/wordDict/DictAlphabetFilter.vue
+++ b/src/components/wordDict/DictAlphabetFilter.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <ul class="alphabet-list list-unstyled d-flex flex-wrap mb-0">
-            <li v-for="char in koreanChars" :key="char" class="mt-2 mx-1">
+            <li v-for="char in koreanChars" :key="char" class="mt-2 me-2">
                 <button
                     type="button"
                     class="btn"
@@ -13,7 +13,7 @@
             </li>
         </ul>
         <ul class="alphabet-list list-unstyled d-flex flex-wrap mb-0">
-            <li v-for="char in englishChars" :key="char" class="mt-2 mx-1">
+            <li v-for="char in englishChars" :key="char" class="mt-2 me-2">
                 <button
                     type="button"
                     class="btn"
@@ -43,9 +43,6 @@ const selectAlphabet = (alphabet) => {
 </script>
 
 <style scoped>
-.alphabet-list {
-    margin-left: -0.25rem;
-}
 
 @media (max-width: 768px) {
     .alphabet-list {

From 40dd76070002b5a08c55f837cdbdec939aa908b9 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 13 Feb 2025 14:48:12 +0900
Subject: [PATCH 05/23] =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/user/LoginForm.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/user/LoginForm.vue b/src/components/user/LoginForm.vue
index 55b1e4a..b0a4082 100644
--- a/src/components/user/LoginForm.vue
+++ b/src/components/user/LoginForm.vue
@@ -1,5 +1,4 @@
 <template>
-    <form @submit.prevent="handleSubmit">
         <div class="col-xl-12">
             <UserFormInput
                 title="아이디"
@@ -20,7 +19,7 @@
             />
 
             <div class="d-grid gap-2 mt-7 mb-5">
-                <button type="submit" class="btn btn-primary">로그인</button>
+                <button type="submit" @click="handleSubmit" class="btn btn-primary">로그인</button>
             </div>
 
             <div class="mb-3 d-flex justify-content-around">
@@ -32,7 +31,6 @@
                 <RouterLink class="text-dark fw-bold" to="/pw">비밀번호 찾기</RouterLink>
             </div>
         </div>
-    </form>
 </template>
 
 <script setup>
@@ -62,7 +60,14 @@
         passwordAlert.value = false;
     };
 
-    const handleSubmit = async () => {
+const handleSubmit = async () => {
+        idAlert.value = id.value.trim() === '';
+        passwordAlert.value = password.value.trim() === '';
+
+        if (idAlert.value || passwordAlert.value) {
+            return;
+        }
+
         $api.post('user/login', {
             loginId: id.value,
             password: password.value,

From 9007e60f26cab3e2d6807565b972956d49e789b9 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 13 Feb 2025 14:48:25 +0900
Subject: [PATCH 06/23] =?UTF-8?q?=EA=B3=B5=ED=86=B5=20=EB=B6=88=EB=9F=AC?=
 =?UTF-8?q?=EC=98=A4=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/user/RegisterForm.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/user/RegisterForm.vue b/src/components/user/RegisterForm.vue
index 64a0395..1924e21 100644
--- a/src/components/user/RegisterForm.vue
+++ b/src/components/user/RegisterForm.vue
@@ -252,7 +252,11 @@
     };
 
     // 컬러, mbti, 비밀번호 힌트 목록 불러오기
-    const { colorList, mbtiList, pwhintList } = commonApi();
+    const { colorList, mbtiList, pwhintList } = commonApi({
+        loadColor: true, colorType: 'YON',
+        loadMbti: true,
+        loadPwhint: true,
+    });
 
     // 주소 업데이트 핸들러
     const handleAddressUpdate = (addressData) => {

From 380fd9cb1d86c4c29571482e0d9c686b70d8a027 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 13 Feb 2025 14:48:44 +0900
Subject: [PATCH 07/23] =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/CenterModal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/modal/CenterModal.vue b/src/components/modal/CenterModal.vue
index 57fb2ec..c0064a1 100644
--- a/src/components/modal/CenterModal.vue
+++ b/src/components/modal/CenterModal.vue
@@ -1,10 +1,10 @@
 
 <template>
-    <div @click="closeModal" class="modal fade" :class="{ 'show': display, 'display-block': display , 'modal-back' : display  }"  id="modalCenter" tabindex="-1" aria-modal="true" role="dialog">
+    <div @click="closeModal" class="modal fade scrollbar-none" :class="{ 'show': display, 'display-block': display , 'modal-back' : display  }"  id="modalCenter" tabindex="-1" aria-modal="true" role="dialog">
         <div @click.stop class="modal-dialog modal-dialog-centered" role="document">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title" id="modalCenterTitle">
+                    <h5 class="modal-title m-auto fw-bold" id="modalCenterTitle">
                         <slot name="title">Modal Title</slot>
                     </h5>
                     <button type="button" class="btn-close" @click="closeModal" aria-label="Close"></button>

From 6edb911d438140794fed1f5f11d3af830e54e4da Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 13 Feb 2025 14:48:51 +0900
Subject: [PATCH 08/23] =?UTF-8?q?=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/list/ProjectCard.vue        | 101 +++++++-------
 src/components/list/ProjectCardList.vue    |  14 +-
 src/components/projectlist/ProjectList.vue | 152 +++++++++++++++++++--
 3 files changed, 200 insertions(+), 67 deletions(-)

diff --git a/src/components/list/ProjectCard.vue b/src/components/list/ProjectCard.vue
index 138df97..2d5f144 100644
--- a/src/components/list/ProjectCard.vue
+++ b/src/components/list/ProjectCard.vue
@@ -1,22 +1,35 @@
 <template>
     <div class="card mb-3 shadow-sm border">
         <div class="row g-0">
-            <!-- 게시물 내용 섹션 -->
-            <div>
-                <div class="card-body">
-                    <!-- 제목 -->
-                    <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 line-clamp-2 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>
+            <div class="card-body">
+                <!-- 제목 -->
+                <h5 class="card-title">
+                    {{ title }}
+                </h5>
+                <!-- 날짜 -->
+                <div class="d-flex flex-column flex-sm-row align-items-center pb-2">
+                    <i class="bx bx-calendar"></i>
+                    <div class="ms-2">날짜</div>
+                    <div class="ms-12">{{ date }}</div>
+                </div>
+                <!-- 참여자 -->
+                <div class="d-flex flex-column flex-sm-row align-items-center pb-2">
+                    <i class="bx bxs-user"></i>
+                    <div class="ms-2">참여자</div>
+                    <UserList class="ms-8 mb-0" />
+                </div>
+                <!-- 설명 -->
+                <div class="d-flex flex-column flex-sm-row align-items-center pb-2">
+                    <i class="bx bx-detail"></i>
+                    <div class="ms-2">설명</div>
+                    <div class="ms-12">{{ description }}</div>
+                </div>
+                <!-- 주소 -->
+                <div class="d-flex flex-column flex-sm-row align-items-center pb-2">
+                    <i class="bx bxs-map"></i>
+                    <div class="ms-2">주소</div>
+                    <div class="ms-12">{{ address }}</div>
+                    <button type="button" class="btn btn-info ms-auto">log</button>
                 </div>
             </div>
         </div>
@@ -24,40 +37,26 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
-import { defineProps } from 'vue';
+    import { defineProps } from 'vue';
+    import UserList from '../user/UserList.vue';
 
-// Props 정의
-const props = defineProps({
-    category: {
-        type: String,
-        required: false,
-    },
-    title: {
-        type: String,
-        required: true,
-    },
-    content: {
-        type: String,
-        required: true,
-    },
-    date: {
-        type: String,
-        required: true,
-    },
-    attachment: {
-        type: Boolean,
-        default: false,
-    }
-});
-
-// 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")}`;
-});
+    // Props 정의
+    const props = defineProps({
+        title: {
+            type: String,
+            required: true,
+        },
+        date: {
+            type: String,
+            required: true,
+        },
+        description: {
+            type: String,
+            required: false,
+        },
+        address: {
+            type: String,
+            required: true,
+        },
+    });
 </script>
diff --git a/src/components/list/ProjectCardList.vue b/src/components/list/ProjectCardList.vue
index aed26b8..9b2e5ea 100644
--- a/src/components/list/ProjectCardList.vue
+++ b/src/components/list/ProjectCardList.vue
@@ -7,9 +7,9 @@
         <div v-for="post in posts" :key="post.id" @click="goDetail(post.id)">
             <ProjectCard
                 :title="post.title"
-                :content="post.content"
+                :description="post.description"
                 :date="post.date"
-                :attachment="post.attachment || false"
+                :address="post.address"
             />
         </div>
     </div>
@@ -24,18 +24,16 @@ const posts = ref([
     {
         id: 1,
         title: 'Vue 3 Composition API 소개',
-        content: 'Composition API를 사용하여 Vue 3에서 효율적으로 개발하는 방법을 알아봅니다. Composition API를 사용하여 Vue 3에서 효율적으로 개발하는 방법을 알아봅니다. Composition API를 사용하여 Vue 3에서 효율적으로 개발하는 방법을 알아봅니다. Composition API를 사용하여 Vue 3에서 효율적으로 개발하는 방법을 알아봅니다. Composition API를 사용하여 Vue 3에서 효율적으로 개발하는 방법을 알아봅니다. Composition API를 사용하여 Vue 3에서 효율적으로 개발하는 방법을 알아봅니다.',
+        description: 'Composition API를 사용하여 Vue 3에서 효율적으로 개발하는 방법을 알아봅니다.',
         date: '2025-02-10',
-        comments: 4,
-        attachment: true
+        address: '서울특별시 구로구'
     },
     {
         id: 2,
         title: 'Spring Boot로 REST API 만들기',
-        content: 'Spring Boot를 사용하여 간단한 RESTful API를 구현하는 방법을 다룹니다.',
+        description: 'Spring Boot를 사용하여 간단한 RESTful API를 구현하는 방법을 다룹니다.',
         date: '2025-02-09',
-        comments: 2,
-        attachment: false
+        address: '서울특별시 강남구'
     }
 ]);
 
diff --git a/src/components/projectlist/ProjectList.vue b/src/components/projectlist/ProjectList.vue
index bae6f34..5c66e48 100644
--- a/src/components/projectlist/ProjectList.vue
+++ b/src/components/projectlist/ProjectList.vue
@@ -1,19 +1,155 @@
 <template>
     <SearchBar />
-    <CategoryBtn :lists="yearCategory" />
+    <div class="d-flex align-items-center">
+        <CategoryBtn :lists="yearCategory" />
+        <WriteBtn class="mt-2 ms-auto" @click="openModal" />
+        <CenterModal :display="isModalOpen" @close="closeModal">
+            <template #title> 프로젝트 등록 </template>
+            <template #body>
+                <FormInput
+                    title="이름"
+                    name="name"
+                    :is-essential="true"
+                    :is-alert="nameAlert"
+                    @update:alert="nameAlert = $event"
+                    :value="name"
+                />
+                <FormSelect
+                    title="컬러"
+                    name="color"
+                    :is-essential="true"
+                    :is-label="true"
+                    :is-common="true"
+                    :data="colorList"
+                    @update:data="color = $event"
+                />
+
+                <FormInput
+                    title="시작 일"
+                    :type="'date'"
+                    name="startDay"
+                    v-model="today"
+                    :is-essential="true"
+                    :is-alert="startDayAlert"
+                    @update:data="startDay = $event"
+                    @update:alert="startDayAlert = $event"
+                    :value="startDay"
+                />
+
+                <FormInput
+                    title="종료 일"
+                    name="endDay"
+                    :type="'date'"
+                    @update:data="endDay = $event"
+                    :value="endDay"
+                />
+
+                <FormInput
+                    title="설명"
+                    name="description"
+                    @update:data="description = $event"
+                    :value="description"
+                />
+
+                <ArrInput
+                    title="주소"
+                    name="address"
+                    :isEssential="true"
+                    :is-row="true"
+                    :is-alert="addressAlert"
+                    @update:data="handleAddressUpdate"
+                    @update:alert="addressAlert = $event"
+                    :value="address"
+                />
+            </template>
+            <template #footer>
+                <button class="btn btn-secondary" @click="closeModal">Close</button>
+                <button class="btn btn-primary" @click="handleSubmit">Save</button>
+            </template>
+        </CenterModal>
+    </div>
     <ProjectCardList :category="selectedCategory" />
 </template>
 
 <script setup>
-import SearchBar from '@c/search/SearchBar.vue';
-import ProjectCardList from '@c/list/ProjectCardList.vue';
-import CategoryBtn from '@c/category/CategoryBtn.vue';
-import commonApi from '@/common/commonApi'
-import { ref } from 'vue';
+    import SearchBar from '@c/search/SearchBar.vue';
+    import ProjectCardList from '@c/list/ProjectCardList.vue';
+    import CategoryBtn from '@c/category/CategoryBtn.vue';
+    import commonApi from '@/common/commonApi';
+    import { inject, ref } from 'vue';
+    import WriteBtn from '../button/WriteBtn.vue';
+    import CenterModal from '../modal/CenterModal.vue';
+    import FormSelect from '../input/FormSelect.vue';
+    import FormInput from '../input/FormInput.vue';
+    import ArrInput from '../input/ArrInput.vue';
+    import { useToastStore } from '@s/toastStore';
 
-const selectedCategory = ref(null);
+    const dayjs = inject('dayjs');
 
-const { yearCategory } = commonApi();
+    const today = dayjs().format('YYYY-MM-DD');
 
+    const toastStore = useToastStore();
+
+    const name = ref('');
+    const color = ref('');
+    const address = ref('');
+    const detailAddress = ref('');
+    const postcode = ref('');
+    const startDay = ref('');
+    const endDay = ref('');
+    const description = ref('');
+
+    const isModalOpen = ref(false);
+    const nameAlert = ref(false);
+    const addressAlert = ref(false);
+    const startDayAlert = ref(false);
+
+    const openModal = () => {
+        isModalOpen.value = true;
+    };
+
+    const closeModal = () => {
+        isModalOpen.value = false;
+    };
+
+
+    const selectedCategory = ref(null);
+
+    const { yearCategory, colorList } = commonApi({
+        loadColor: true,
+        colorType: 'YNP',
+        loadYearCategory: true,
+    });
+
+    // 주소 업데이트 핸들러
+    const handleAddressUpdate = addressData => {
+        address.value = addressData.address;
+        detailAddress.value = addressData.detailAddress;
+        postcode.value = addressData.postcode;
+    };
+
+    const handleSubmit = () => {
+        addressAlert.value = address.value.trim() === '';
+        nameAlert.value = name.value.trim() === '';
+        startDayAlert.value = startDay.value.trim() === '';
+
+        $api.post('project/insert', {
+            projctNam: name.value,
+            projctCol: color.value,
+            projctCdt: startDay.value,
+            projctEdt: endDay.value,
+            projctDes: description.value,
+            projctAdd: address.value,
+            projctDtl: detailAddress.value,
+            projctZip: postcode.value,
+
+        })
+        .then(res => {
+            if (res.status === 200) {
+                toastStore.onToast('프로젝트가 등록되었습니다.', 's');
+                closeModal();
+            }
+        })
+    };
 
 </script>

From a169d71c1d62f00c5416a6e2962bc1b817fa6812 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Fri, 14 Feb 2025 13:24:26 +0900
Subject: [PATCH 09/23] useUserStore -> useUserInfoStore

---
 src/stores/{useUserStore.js => useUserInfoStore.js} | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)
 rename src/stores/{useUserStore.js => useUserInfoStore.js} (69%)

diff --git a/src/stores/useUserStore.js b/src/stores/useUserInfoStore.js
similarity index 69%
rename from src/stores/useUserStore.js
rename to src/stores/useUserInfoStore.js
index e5f33f4..3f9730d 100644
--- a/src/stores/useUserStore.js
+++ b/src/stores/useUserInfoStore.js
@@ -1,8 +1,16 @@
+/*
+    작성자 : 박지윤
+    작성일 : 2025-02-04
+    수정자 :
+    수정일 :
+    설명   : 로그인 한 사용자 정보
+*/
+
 import { ref } from 'vue';
 import { defineStore } from 'pinia';
 import $api from "@api";
 
-export const useUserStore = defineStore('userInfo', () => {
+export const useUserInfoStore = defineStore('userInfo', () => {
     const user = ref(null);
 
     // 사용자 정보 가져오기

From bbc8d8b6b9cbc1b7a63cd612f7932da5be667ab3 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Fri, 14 Feb 2025 13:25:47 +0900
Subject: [PATCH 10/23] useUserStore -> useUserInfoStore

---
 src/components/user/LoginForm.vue       | 4 ++--
 src/components/vacation/ProfileList.vue | 4 ++--
 src/layouts/TheTop.vue                  | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/user/LoginForm.vue b/src/components/user/LoginForm.vue
index 258569d..d176fed 100644
--- a/src/components/user/LoginForm.vue
+++ b/src/components/user/LoginForm.vue
@@ -32,7 +32,7 @@
     import { useRoute } from 'vue-router';
     import { ref } from 'vue';
     import UserFormInput from '@c/input/UserFormInput.vue';
-    import { useUserStore } from '@s/useUserStore';
+    import { useUserInfoStore } from '@/stores/useUserInfoStore';
 
     const id = ref('');
     const password = ref('');
@@ -40,7 +40,7 @@
     const passwordAlert = ref(false);
     const remember = ref(false);
 
-    const userStore = useUserStore();
+    const userStore = useUserInfoStore();
     const route = useRoute();
 
     const handleIdChange = value => {
diff --git a/src/components/vacation/ProfileList.vue b/src/components/vacation/ProfileList.vue
index ba4d594..fbc7564 100644
--- a/src/components/vacation/ProfileList.vue
+++ b/src/components/vacation/ProfileList.vue
@@ -24,11 +24,11 @@
 
   <script setup>
   import { onMounted, ref, computed, nextTick } from "vue";
-  import { useUserStore } from "@s/useUserStore"; // 사용자 정보 스토어 사용
+  import { useUserInfoStore } from "@/stores/useUserInfoStore"; // 사용자 정보 스토어 사용
   import { useUserStore as useUserListStore } from "@s/userList"; // 사원 리스트 스토어
   import $api from "@api";
 
-  const userStore = useUserStore();
+  const userStore = useUserInfoStore();
   const userListStore = useUserListStore();
 
   const userList = ref([]);
diff --git a/src/layouts/TheTop.vue b/src/layouts/TheTop.vue
index 2463539..1d45645 100644
--- a/src/layouts/TheTop.vue
+++ b/src/layouts/TheTop.vue
@@ -228,7 +228,7 @@
 </template>
 <script setup>
 import { useAuthStore } from '@s/useAuthStore';
-import { useUserStore } from '@s/useUserStore';
+import { useUserInfoStore } from '@/stores/useUserInfoStore';
 import { useRouter } from 'vue-router';
 import { useThemeStore } from '@s/darkmode';
 import { onMounted, ref } from 'vue';
@@ -236,7 +236,7 @@ import { onMounted, ref } from 'vue';
 const user = ref(null);
 
 const authStore = useAuthStore();
-const userStore = useUserStore();
+const userStore = useUserInfoStore();
 const router = useRouter();
 
 const { isDarkMode, switchToDarkMode, switchToLightMode } = useThemeStore();

From 3047011de8d44db32c23a7d51b91c6726630a7f1 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Mon, 17 Feb 2025 09:29:23 +0900
Subject: [PATCH 11/23] =?UTF-8?q?=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/list/ProjectCard.vue        | 18 +++++--
 src/components/list/ProjectCardList.vue    | 51 ++++++++------------
 src/components/projectlist/ProjectList.vue | 56 ++++++++++++----------
 3 files changed, 67 insertions(+), 58 deletions(-)

diff --git a/src/components/list/ProjectCard.vue b/src/components/list/ProjectCard.vue
index 2d5f144..65cef5b 100644
--- a/src/components/list/ProjectCard.vue
+++ b/src/components/list/ProjectCard.vue
@@ -10,13 +10,13 @@
                 <div class="d-flex flex-column flex-sm-row align-items-center pb-2">
                     <i class="bx bx-calendar"></i>
                     <div class="ms-2">날짜</div>
-                    <div class="ms-12">{{ date }}</div>
+                    <div class="ms-12">{{ strdate }} ~ {{ enddate }}</div>
                 </div>
                 <!-- 참여자 -->
                 <div class="d-flex flex-column flex-sm-row align-items-center pb-2">
                     <i class="bx bxs-user"></i>
                     <div class="ms-2">참여자</div>
-                    <UserList class="ms-8 mb-0" />
+                    <UserList :projctSeq="projctSeq" class="ms-8 mb-0" />
                 </div>
                 <!-- 설명 -->
                 <div class="d-flex flex-column flex-sm-row align-items-center pb-2">
@@ -37,7 +37,7 @@
 </template>
 
 <script setup>
-    import { defineProps } from 'vue';
+    import { computed, defineProps } from 'vue';
     import UserList from '../user/UserList.vue';
 
     // Props 정의
@@ -46,10 +46,15 @@
             type: String,
             required: true,
         },
-        date: {
+        strdate: {
             type: String,
             required: true,
         },
+        enddate: {
+            type: String,
+            required: true,
+            default: "",
+        },
         description: {
             type: String,
             required: false,
@@ -58,5 +63,10 @@
             type: String,
             required: true,
         },
+        projctSeq: {
+            type: Number,
+            required: false
+        },
     });
+
 </script>
diff --git a/src/components/list/ProjectCardList.vue b/src/components/list/ProjectCardList.vue
index 9b2e5ea..97bdc8c 100644
--- a/src/components/list/ProjectCardList.vue
+++ b/src/components/list/ProjectCardList.vue
@@ -1,47 +1,38 @@
 <template>
     <div class="mt-4">
-        <div v-if="posts.length === 0" class="text-center">
+        <div v-if="projectList.length === 0" class="text-center">
             <p class="text-muted mt-4">게시물이 없습니다.</p>
         </div>
 
-        <div v-for="post in posts" :key="post.id" @click="goDetail(post.id)">
+        <div v-for="post in projectList" :key="post.PROJCTSEQ">
             <ProjectCard
-                :title="post.title"
-                :description="post.description"
-                :date="post.date"
-                :address="post.address"
+                :title="post.PROJCTNAM"
+                :description="post.PROJCTDES"
+                :strdate="post.PROJCTSTR"
+                :enddate="post.PROJCTEND"
+                :address="post.PROJCTARR + ' ' + post.PROJCTDTL"
+                :projctSeq="post.PROJCTSEQ"
             />
         </div>
+
     </div>
 </template>
 
 <script setup>
-import { ref, defineEmits } from 'vue';
+import { ref } from 'vue';
 import ProjectCard from './ProjectCard.vue';
+import { onMounted } from 'vue';
+import $api from '@api';
 
-// 테스트용 데이터
-const posts = ref([
-    {
-        id: 1,
-        title: 'Vue 3 Composition API 소개',
-        description: 'Composition API를 사용하여 Vue 3에서 효율적으로 개발하는 방법을 알아봅니다.',
-        date: '2025-02-10',
-        address: '서울특별시 구로구'
-    },
-    {
-        id: 2,
-        title: 'Spring Boot로 REST API 만들기',
-        description: 'Spring Boot를 사용하여 간단한 RESTful API를 구현하는 방법을 다룹니다.',
-        date: '2025-02-09',
-        address: '서울특별시 강남구'
-    }
-]);
+const projectList = ref([]);
 
-const emit = defineEmits(['click']);
-
-// 상세 페이지 이동
-const goDetail = (id) => {
-    emit('click', id);
-};
+onMounted(()=>{
+    getProjectList();
+})
+const getProjectList = () => {
+    $api.get('project/select').then((res) => {
+        projectList.value = res.data.data.projectList;
+    })
+}
 
 </script>
diff --git a/src/components/projectlist/ProjectList.vue b/src/components/projectlist/ProjectList.vue
index 5c66e48..e63684c 100644
--- a/src/components/projectlist/ProjectList.vue
+++ b/src/components/projectlist/ProjectList.vue
@@ -11,9 +11,9 @@
                     name="name"
                     :is-essential="true"
                     :is-alert="nameAlert"
-                    @update:alert="nameAlert = $event"
-                    :value="name"
+                    @update:modelValue="name = $event"
                 />
+
                 <FormSelect
                     title="컬러"
                     name="color"
@@ -26,29 +26,23 @@
 
                 <FormInput
                     title="시작 일"
-                    :type="'date'"
+                    type="date"
                     name="startDay"
-                    v-model="today"
+                    v-model="startDay"
                     :is-essential="true"
-                    :is-alert="startDayAlert"
-                    @update:data="startDay = $event"
-                    @update:alert="startDayAlert = $event"
-                    :value="startDay"
                 />
 
                 <FormInput
                     title="종료 일"
                     name="endDay"
                     :type="'date'"
-                    @update:data="endDay = $event"
-                    :value="endDay"
+                    @update:modelValue="endDay = $event"
                 />
 
                 <FormInput
                     title="설명"
                     name="description"
-                    @update:data="description = $event"
-                    :value="description"
+                    @update:modelValue="description = $event"
                 />
 
                 <ArrInput
@@ -59,7 +53,6 @@
                     :is-alert="addressAlert"
                     @update:data="handleAddressUpdate"
                     @update:alert="addressAlert = $event"
-                    :value="address"
                 />
             </template>
             <template #footer>
@@ -76,33 +69,37 @@
     import ProjectCardList from '@c/list/ProjectCardList.vue';
     import CategoryBtn from '@c/category/CategoryBtn.vue';
     import commonApi from '@/common/commonApi';
-    import { inject, ref } from 'vue';
+    import { inject, onMounted, ref } from 'vue';
     import WriteBtn from '../button/WriteBtn.vue';
     import CenterModal from '../modal/CenterModal.vue';
     import FormSelect from '../input/FormSelect.vue';
     import FormInput from '../input/FormInput.vue';
     import ArrInput from '../input/ArrInput.vue';
     import { useToastStore } from '@s/toastStore';
+    import $api from '@api';
+    import { useUserInfoStore } from '@/stores/useUserInfoStore';
 
     const dayjs = inject('dayjs');
 
     const today = dayjs().format('YYYY-MM-DD');
 
     const toastStore = useToastStore();
+    const userStore = useUserInfoStore();
+
+    const user = ref(null);
 
     const name = ref('');
     const color = ref('');
     const address = ref('');
     const detailAddress = ref('');
     const postcode = ref('');
-    const startDay = ref('');
+    const startDay = ref(today);
     const endDay = ref('');
     const description = ref('');
 
     const isModalOpen = ref(false);
     const nameAlert = ref(false);
     const addressAlert = ref(false);
-    const startDayAlert = ref(false);
 
     const openModal = () => {
         isModalOpen.value = true;
@@ -128,26 +125,37 @@
         postcode.value = addressData.postcode;
     };
 
-    const handleSubmit = () => {
-        addressAlert.value = address.value.trim() === '';
+
+    onMounted(async () => {
+        await userStore.userInfo(); // 로그인한 사용자 정보
+        user.value = userStore.user;
+    });
+
+    const handleSubmit = async () => {
+
         nameAlert.value = name.value.trim() === '';
-        startDayAlert.value = startDay.value.trim() === '';
+        addressAlert.value = address.value.trim() === '';
+
+        if (nameAlert.value ||  addressAlert.value ) {
+            return;
+        }
 
         $api.post('project/insert', {
             projctNam: name.value,
-            projctCol: color.value,
-            projctCdt: startDay.value,
-            projctEdt: endDay.value,
-            projctDes: description.value,
+            projctCol: String(color.value),
+            projctStr: startDay.value,
+            projctEnd: endDay.value || null,
+            projctDes: description.value || null,
             projctAdd: address.value,
             projctDtl: detailAddress.value,
             projctZip: postcode.value,
-
+            projctCmb: user.value.name,
         })
         .then(res => {
             if (res.status === 200) {
                 toastStore.onToast('프로젝트가 등록되었습니다.', 's');
                 closeModal();
+                location.reload();
             }
         })
     };

From d6789656ce86b4d8edfbc523e8de80c5832a92bd Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Mon, 17 Feb 2025 10:35:15 +0900
Subject: [PATCH 12/23] =?UTF-8?q?userlist=20=EB=A1=9C=EC=A7=81=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/user/UserList.vue | 73 +++++++++++++++++++++++++-------
 1 file changed, 57 insertions(+), 16 deletions(-)

diff --git a/src/components/user/UserList.vue b/src/components/user/UserList.vue
index f4d9e6c..c5a1779 100644
--- a/src/components/user/UserList.vue
+++ b/src/components/user/UserList.vue
@@ -4,23 +4,22 @@
             v-for="(user, index) in userList"
             :key="index"
             class="avatar pull-up"
-            :class="{ 'opacity-100': user.disabled }"
+            :class="{ 'opacity-100': isUserDisabled(user) }"
             @click="toggleDisable(index)"
             data-bs-toggle="tooltip"
             data-popup="tooltip-custom"
             data-bs-placement="top"
             :aria-label="user.MEMBERSEQ"
             :data-bs-original-title="getTooltipTitle(user)"
-            >
+        >
             <img
                 class="rounded-circle user-avatar border border-3"
-                :class="{ 'grayscaleImg': user.disabled }"
+                :class="{ 'grayscaleImg': isUserDisabled(user) }"
                 :src="`${baseUrl}upload/img/profile/${user.MEMBERPRF}`"
                 :style="`border-color: ${user.usercolor} !important;`"
                 alt="user"
             />
         </li>
-
     </ul>
 </template>
 
@@ -29,38 +28,83 @@ import { onMounted, ref, nextTick } from 'vue';
 import { useUserStore } from '@s/userList';
 import $api from '@api';
 
-const emit = defineEmits();
+const emit = defineEmits(['user-list-update']);
 const userStore = useUserStore();
 const userList = ref([]);
 const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
 
+const props = defineProps({
+    projctSeq: {
+        type: Number,
+        required: false,
+    }
+});
+
+// 사용자의 프로젝트 참여 상태 확인
+const fetchProjectParticipation = async () => {
+    if (props.projctSeq) {
+        const response = await $api.get(`project/members/${props.projctSeq}`);
+        if (response.status === 200) {
+            const projectMembers = response.data.data;
+            userList.value = userList.value.map(user => ({
+                ...user,
+                PROJCTYON: projectMembers.find(pm => pm.MEMBERSEQ === user.MEMBERSEQ)?.PROJCTYON ?? '1'
+            }));
+        }
+    }
+};
+
 // 사용자 목록 호출
 onMounted(async () => {
     await userStore.fetchUserList();
     userList.value = userStore.userList;
 
+    if (props.projctSeq) {
+        await fetchProjectParticipation();
+    }
+
     nextTick(() => {
         const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
         tooltips.forEach((tooltip) => {
-        new bootstrap.Tooltip(tooltip);
+            new bootstrap.Tooltip(tooltip);
         });
     });
 });
 
-// 클릭 시 활성화/비활성화
-const toggleDisable = (index) => {
+// 사용자 비활성화 상태 확인
+const isUserDisabled = (user) => {
+    return props.projctSeq ? user.PROJCTYON === '0' : user.disabled;
+};
+
+// 클릭 시 활성화/비활성화 및 DB 업데이트
+const toggleDisable = async (index) => {
     const user = userList.value[index];
     if (user) {
-        user.disabled = !user.disabled;
-        emitUserListUpdate();
+        const newParticipationStatus = props.projctSeq
+            ? user.PROJCTYON === '1'
+            : !user.disabled;
+
+        if (props.projctSeq) {
+            const response = await $api.patch('project/updateYon', {
+                memberSeq: user.MEMBERSEQ,
+                projctSeq: props.projctSeq,
+                projctYon: newParticipationStatus ? '0' : '1'
+            });
+
+            if (response.status === 200) {
+                user.PROJCTYON = newParticipationStatus ? '0' : '1';
+            }
+        } else {
+            user.disabled = newParticipationStatus;
+            emitUserListUpdate();
+        }
     }
 };
 
 // emit
 const emitUserListUpdate = () => {
-    const activeUsers = userList.value.filter((user) => !user.disabled);
-    const disabledUsers = userList.value.filter((user) => user.disabled);
-
+    const activeUsers = userList.value.filter(user => !isUserDisabled(user));
+    const disabledUsers = userList.value.filter(user => isUserDisabled(user));
     emit('user-list-update', { activeUsers, disabledUsers });
 };
 
@@ -68,6 +112,3 @@ const getTooltipTitle = (user) => {
     return user.MEMBERSEQ === userStore.userInfo.id ? '나' : user.MEMBERNAM;
 };
 </script>
-
-<style scoped>
-</style>

From ee0b34dad09dad872e5a62fb70850fbcd7152872 Mon Sep 17 00:00:00 2001
From: khj0414 <khj0414@local-host.co.kr>
Date: Mon, 17 Feb 2025 14:56:01 +0900
Subject: [PATCH 13/23] =?UTF-8?q?qeditor=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/components/editor/QEditor.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/editor/QEditor.vue b/src/components/editor/QEditor.vue
index 84fee83..3ff77e9 100644
--- a/src/components/editor/QEditor.vue
+++ b/src/components/editor/QEditor.vue
@@ -46,7 +46,6 @@
         </div>
         <!-- 에디터가 표시될 div -->
         <div ref="editor"></div>
-
         <!-- Alert 메시지 표시 -->
         <div class="invalid-feedback" :class="isAlert ? 'd-block' : ''">내용을 확인해주세요.</div>
     </div>
@@ -64,6 +63,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    initialData: {
+        type: String,
+        default: () => null,
+    },
 });
 
 const editor = ref(null);  // 에디터 DOM 참조
@@ -108,8 +111,14 @@ onMounted(() => {
     watch([font, fontSize], () => {
         quillInstance.format('font', font.value);
         quillInstance.format('size', fontSize.value);
+
     });
 
+    // 초기 데이터가 있을 경우, HTML 형식으로 삽입
+    if (props.initialData) {
+        quillInstance.setContents(JSON.parse(props.initialData));
+    }
+
     // 이미지 업로드 기능 처리
     let imageUrls = new Set();  // 업로드된 이미지 URL을 추적
     quillInstance.getModule('toolbar').addHandler('image', () => {

From 62c97e0a1820256930677946850ffa9063d936f0 Mon Sep 17 00:00:00 2001
From: Dang <wheodnjs2@naver.com>
Date: Mon, 17 Feb 2025 15:04:56 +0900
Subject: [PATCH 14/23] =?UTF-8?q?=EC=9A=A9=EC=96=B4=EC=A7=91=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/FormSelect.vue   |  26 +++--
 src/components/wordDict/DictCard.vue  | 157 +++++++++++++++++++-------
 src/components/wordDict/DictWrite.vue |  19 ++--
 src/views/wordDict/wordDict.vue       |   6 +-
 4 files changed, 149 insertions(+), 59 deletions(-)

diff --git a/src/components/input/FormSelect.vue b/src/components/input/FormSelect.vue
index 2ff0c3a..04b88f6 100644
--- a/src/components/input/FormSelect.vue
+++ b/src/components/input/FormSelect.vue
@@ -40,26 +40,26 @@ const props = defineProps({
         required: true,
     },
     value: {
-        type: String,
+        type: [String, Number],
         default: '0',
         require: false,
     },
-    isAlert : {
+    isAlert: {
         type: Boolean,
         default: false,
         required: false,
     },
-    isLabel : {
+    isLabel: {
         type: Boolean,
         default: true,
         required: false,
     },
-    isRow : {
+    isRow: {
         type: Boolean,
         default: true,
         required: false,
     },
-    isCommon : {
+    isCommon: {
         type: Boolean,
         default: false,
         required: false,
@@ -69,11 +69,19 @@ const props = defineProps({
 const emit = defineEmits(['update:data']);
 const selectData = ref(props.value);
 
-// data 변경 감지
+// props.value의 변경을 감지하는 watch 추가
+watch(() => props.value, (newValue) => {
+    selectData.value = newValue;
+}, { immediate: true });
+
+// data 변경 감지 수정
 watch(() => props.data, (newData) => {
     if (props.isCommon && newData.length > 0) {
-        selectData.value = newData[0].value;
-        emit('update:data', selectData.value);
+        // value prop이 '0'(기본값)일 때만 첫번째 아이템 선택
+        if (props.value === '0') {
+            selectData.value = newData[0].value;
+            emit('update:data', selectData.value);
+        }
     }
 }, { immediate: true });
 
@@ -81,4 +89,4 @@ watch(() => props.data, (newData) => {
 watch(selectData, (newValue) => {
     emit('update:data', newValue);
 });
-</script>
+</script>
\ No newline at end of file
diff --git a/src/components/wordDict/DictCard.vue b/src/components/wordDict/DictCard.vue
index 9e3dd34..4d9b5da 100644
--- a/src/components/wordDict/DictCard.vue
+++ b/src/components/wordDict/DictCard.vue
@@ -1,69 +1,146 @@
 <template>
     <li class="mt-5 card p-5">
-        <div class="d-flex align-items-center">
-            <div class="w-100 d-flex align-items-center">
-                <span class="btn btn-primary pe-none">{{ item.category }}</span>
-                <strong class="mx-2 w-75">{{ item.WRDDICTTL }}</strong>
-            </div>
-            <EditBtn />
-        </div>
-        <p class="mt-5" v-html="$common.contentToHtml(item.WRDDICCON)"></p>
-        <div class="d-flex justify-content-between flex-wrap gap-2 mb-2">
-            <div class="d-flex flex-wrap align-items-center mb-50">
-                <div class="avatar avatar-sm me-2">
-                    <img
-                        class="rounded-circle user-avatar"
-                        :src="getProfileImage(item.author.profileImage)"
-                        alt="최초 작성자"
-                        :style="{ borderColor: item.author.color}"
-                    />
+        <DictWrite 
+            v-if="isWriteVisible" 
+            @close="isWriteVisible = false" 
+            :dataList="cateList" 
+            @addCategory="addCategory" 
+            :formValue="item.WRDDICCAT" 
+            :titleValue="item.WRDDICTTL" 
+            :contentValue="$common.contentToHtml(item.WRDDICCON)"
+        />
+
+        <div v-else>
+            <div class="d-flex align-items-center">
+                <div class="w-100 d-flex align-items-center">
+                    <span class="btn btn-primary pe-none">{{ item.category }}</span>
+                    <strong class="mx-2 w-75">{{ item.WRDDICTTL }}</strong>
                 </div>
-                <div>
-                    <p class="mb-0 small fw-medium">{{ formatDate(item.author.createdAt) }}</p>
+            </div>
+            <p class="mt-5" v-html="$common.contentToHtml(item.WRDDICCON)"></p>
+            <div class="d-flex justify-content-between flex-wrap gap-2 mb-2">
+                <div class="d-flex flex-wrap align-items-center mb-50">
+                    <div class="avatar avatar-sm me-2">
+                        <img
+                            class="rounded-circle user-avatar"
+                            :src="getProfileImage(item.author.profileImage)"
+                            alt="최초 작성자"
+                            :style="{ borderColor: item.author.color}"/>
+                    </div>
+                    <div>
+                        <p class="mb-0 small fw-medium">{{ formatDate(item.author.createdAt) }}</p>
+                    </div>
+                </div>
+            </div>
+            <div class="d-flex justify-content-between flex-wrap gap-2 mb-2">
+                <div class="d-flex flex-wrap align-items-center mb-50">
+                    <div class="avatar avatar-sm me-2">
+                        <img
+                            class="rounded-circle user-avatar"
+                            :src="getProfileImage(item.lastEditor.profileImage)"
+                            alt="최근 작성자"
+                            :style="{ borderColor: item.lastEditor.color}"/>
+                    </div>
+                    <div>
+                        <p class="mb-0 small fw-medium">{{ formatDate(item.lastEditor.updatedAt) }}</p>
+                    </div>
                 </div>
             </div>
         </div>
-        <div class="d-flex justify-content-between flex-wrap gap-2 mb-2">
-            <div class="d-flex flex-wrap align-items-center mb-50">
-                <div class="avatar avatar-sm me-2">
-                    <img
-                        class="rounded-circle user-avatar"
-                        :src="getProfileImage(item.lastEditor.profileImage)"
-                        alt="최근 작성자"
-                        :style="{ borderColor: item.lastEditor.color}"
-                    />
-                </div>
-                <div>
-                    <p class="mb-0 small fw-medium">{{ formatDate(item.lastEditor.updatedAt) }}</p>
-                </div>
-            </div>
+
+        <div class="edit-btn">
+            <EditBtn @click="toggleWriteVisible" />
         </div>
     </li>
 </template>
 
 <script setup>
+import axios from "@api";
+import { useToastStore } from '@s/toastStore';
+import { ref, toRefs } from 'vue';
 import EditBtn from '@/components/button/EditBtn.vue';
 import $api from '@api';
+import DictWrite from './DictWrite.vue';
+
+const toastStore = useToastStore();
 
 // Props
 const props = defineProps({
     item: {
         type: Object,
-        required: true,
+        required: true
     },
+    cateList: {
+        type: Array,
+        required: false,
+    }
 });
+
+// 카테고리
+const localCateList = ref([...props.cateList]);
+// 선택 카테고리
+const selectedCategory = ref('');
+
+// cateList emit
+const emit = defineEmits(['update:cateList']);
+
+// 글 수정 상태
+const isWriteVisible = ref(false);
+
+
+// 글 수정 toggle
+const toggleWriteVisible = () => {
+    isWriteVisible.value = !isWriteVisible.value;
+};
+
+//카테고리 등록 수정
+const addCategory = (data) => {
+    try {
+        const lastCategory = localCateList.value.length > 0 
+            ? localCateList.value[localCateList.value.length - 1] 
+            : null;
+        const newValue = lastCategory ? lastCategory.value + 1 : 600101;
+
+        axios.post('worddict/insertCategory', {
+            CMNCODNAM: data
+        }).then(res => {
+            if(res.data.data === 1){
+                toastStore.onToast('카테고리가 추가 등록 되었습니다.', 's');
+                const newCategory = { label: data, value: newValue };
+                localCateList.value = [newCategory, ...localCateList.value];
+                selectedCategory.value = newCategory.value;
+                
+                // 부모에게 전달
+                emit('update:cateList', localCateList.value);
+            }
+        }).catch(err => {
+            console.error('카테고리 추가 중 오류:', err);
+        });
+    } catch (err) {
+        console.error('카테고리 추가 함수 오류:', err);
+    }
+}
+
 const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
-// 날짜
+
+// 날짜 포맷
 const formatDate = (dateString) => new Date(dateString).toLocaleString();
-// 이미지
+
+// 프로필 이미지
 const getProfileImage = (imagePath) =>
-imagePath ? `${baseUrl}upload/img/profile/${imagePath}` : '/img/avatars/default-Profile.jpg';
+    imagePath ? `${baseUrl}upload/img/profile/${imagePath}` : '/img/avatars/default-Profile.jpg';
 </script>
 
 <style scoped>
 /* 동그란 테두리 설정 */
 .user-avatar {
-border: 3px solid; /* 테두리 */
-padding: 0.1px; /* 테두리와 이미지 사이의 간격 */
+    border: 3px solid; /* 테두리 */
+    padding: 0.1px; /* 테두리와 이미지 사이의 간격 */
 }
-</style>
+
+.edit-btn {
+    position: absolute;
+    right: 0.7rem;
+    top: 1.2rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/wordDict/DictWrite.vue b/src/components/wordDict/DictWrite.vue
index 3f4fc83..dc30972 100644
--- a/src/components/wordDict/DictWrite.vue
+++ b/src/components/wordDict/DictWrite.vue
@@ -9,6 +9,7 @@
                     :is-common="true"
                     @update:data="selectCategory = $event"
                     @change="onChange"
+                    :value="formValue"
                 />
             </div>
             <div class="col-2 btn-margin">
@@ -34,11 +35,13 @@
             name="word"
             :is-essential="true"
             :is-alert="wordTitleAlert"
+            :modelValue="titleValue"
             @update:modelValue="wordTitle = $event"
         />
     </div>
     <div>
         <QEditor @update:data="content = $event" @update:imageUrls="imageUrls = $event"  :is-alert="wordContentAlert" />
+        {{ contentValue }}
         <div class="text-end mt-5">
             <button class="btn btn-primary" @click="saveWord">
                 <i class="bx bx-check"></i>
@@ -75,17 +78,17 @@ const props = defineProps({
     dataList: {
         type: Array,
         default: () => []
+    },
+    formValue : {
+        type:[String, Number]
+    },
+    titleValue : {
+        type:String,
+    },contentValue : {
+        type:String
     }
 });
 
-// 데이터 포맷 수정
-// const formattedDataList = computed(() =>
-//     props.dataList.map(item => ({
-//         label: item.CMNCODNAM,
-//         value: item.CMNCODVAL
-//     }))
-// );
-
 // 카테고리 입력 창
 const showInput = ref(false);
 
diff --git a/src/views/wordDict/wordDict.vue b/src/views/wordDict/wordDict.vue
index f030567..5056a96 100644
--- a/src/views/wordDict/wordDict.vue
+++ b/src/views/wordDict/wordDict.vue
@@ -48,6 +48,7 @@
             v-for="item in wordList"
             :key="item.WRDDICSEQ"
             :item="item"
+            :cateList="cateList"
         />
     </ul>
 
@@ -91,6 +92,7 @@
     const { cateList } = commonApi({
         loadCateList: true
     });
+    
     const selectedCategory = ref('');
     const selectCategory = ref('');
 
@@ -167,8 +169,8 @@
             if(res.data.data == '1'){
                 toastStore.onToast('카테고리가 추가 등록 되었습니다.', 's');
                 const newCategory = { label: data, value: newValue };
-                cateList.value.unshift(newCategory);
-                selectCategory.value = newCategory.CMNCODVAL;
+                cateList.value = [newCategory, ...cateList.value];
+                selectedCategory.value = newCategory.value;
             }
         })
     }

From eead7902c49fd4649ac83b64675438d2d6868c11 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Mon, 17 Feb 2025 15:06:01 +0900
Subject: [PATCH 15/23] =?UTF-8?q?import=20=EA=B2=BD=EB=A1=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/projectlist/ProjectList.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/projectlist/ProjectList.vue b/src/components/projectlist/ProjectList.vue
index e63684c..469c98c 100644
--- a/src/components/projectlist/ProjectList.vue
+++ b/src/components/projectlist/ProjectList.vue
@@ -70,11 +70,11 @@
     import CategoryBtn from '@c/category/CategoryBtn.vue';
     import commonApi from '@/common/commonApi';
     import { inject, onMounted, ref } from 'vue';
-    import WriteBtn from '../button/WriteBtn.vue';
-    import CenterModal from '../modal/CenterModal.vue';
-    import FormSelect from '../input/FormSelect.vue';
-    import FormInput from '../input/FormInput.vue';
-    import ArrInput from '../input/ArrInput.vue';
+    import WriteBtn from '@c/button/WriteBtn.vue';
+    import CenterModal from '@c/modal/CenterModal.vue';
+    import FormSelect from '@c/input/FormSelect.vue';
+    import FormInput from '@c/input/FormInput.vue';
+    import ArrInput from '@c/input/ArrInput.vue';
     import { useToastStore } from '@s/toastStore';
     import $api from '@api';
     import { useUserInfoStore } from '@/stores/useUserInfoStore';

From 26041d4b90fb38deb3f96561e55231b7f4fb8054 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Mon, 17 Feb 2025 15:06:43 +0900
Subject: [PATCH 16/23] =?UTF-8?q?=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=EC=9D=84=20=EC=9C=84=ED=95=9C=20modelValue?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/ArrInput.vue | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/input/ArrInput.vue b/src/components/input/ArrInput.vue
index 81d9b20..9debad9 100644
--- a/src/components/input/ArrInput.vue
+++ b/src/components/input/ArrInput.vue
@@ -50,6 +50,10 @@
 <script setup>
 import { ref, watch } from 'vue';
 
+const postcode = ref('');
+const address = ref('');
+const detailAddress = ref('');
+
 const props = defineProps({
     title: {
         type: String,
@@ -71,7 +75,7 @@ const props = defineProps({
         default: 30,
         required: false,
     },
-    isRow : {
+    isRow: {
         type: Boolean,
         default: false,
         required: false,
@@ -81,14 +85,23 @@ const props = defineProps({
         default: false,
         required: false,
     },
+    modelValue: {
+        type: Object,
+        default: () => ({}),
+        required: false
+    }
 });
 
-const emits = defineEmits(['update:data', 'update:alert']);
+// watch 설정 수정
+watch(() => props.modelValue, (newValue) => {
+    if (newValue) {
+        postcode.value = newValue.PROJCTZIP || '';
+        address.value = newValue.PROJCTARR || '';
+        detailAddress.value = newValue.PROJCTDTL || '';
+    }
+}, { immediate: true });
 
-// 주소 관련 상태 관리
-const postcode = ref('');
-const address = ref('');
-const detailAddress = ref('');
+const emits = defineEmits(['update:data', 'update:alert']);
 
 // 주소 검색 팝업 열기
 const openAddressSearch = () => {

From e81127ee8a9854620a2fb144a4c85cf3ba8823dc Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Mon, 17 Feb 2025 15:07:10 +0900
Subject: [PATCH 17/23] =?UTF-8?q?log,=20=ED=94=84=EB=A1=9C=EC=A0=9D?=
 =?UTF-8?q?=ED=8A=B8=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/ProjectCard.vue     | 116 ++++++++++++++-----
 src/components/list/ProjectCardList.vue | 145 +++++++++++++++++++++---
 2 files changed, 216 insertions(+), 45 deletions(-)

diff --git a/src/components/list/ProjectCard.vue b/src/components/list/ProjectCard.vue
index 65cef5b..d90ba07 100644
--- a/src/components/list/ProjectCard.vue
+++ b/src/components/list/ProjectCard.vue
@@ -29,44 +29,98 @@
                     <i class="bx bxs-map"></i>
                     <div class="ms-2">주소</div>
                     <div class="ms-12">{{ address }}</div>
-                    <button type="button" class="btn btn-info ms-auto">log</button>
+                    <button type="button" class="btn ms-auto text-white zindex-5" :style="`background-color: ${projctCol} !important;`" @click="openModal">log</button>
                 </div>
             </div>
         </div>
     </div>
+    <CenterModal :display="isModalOpen" @close="closeModal">
+        <template #title> Log </template>
+        <template #body>
+            <div class="ms-4 mt-2" v-if="logData">
+                <p class="mb-1">{{ logData.createDate }}</p>
+                <strong class="">[{{ logData.creator }}] 프로젝트 등록</strong>
+            </div>
+
+            <div class="log-item" v-if="logData?.updateDate">
+                <div class="d-flex align-items-center">
+                    <i class="bx bx-edit me-2"></i>
+                    <strong>수정 정보</strong>
+                </div>
+                <div class="ms-4 mt-2">
+                    <p class="mb-1">{{ logData.updateDate }}</p>
+                    <p class="mb-0 text-muted">[{{ logData.updater }}] 프로젝트 수정</p>
+                </div>
+            </div>
+
+        </template>
+        <template #footer>
+            <button type="button" class="btn btn-secondary" @click="closeModal">닫기</button>
+        </template>
+    </CenterModal>
 </template>
 
 <script setup>
-    import { computed, defineProps } from 'vue';
-    import UserList from '../user/UserList.vue';
+import { defineProps, ref } from 'vue';
+import UserList from '@c/user/UserList.vue';
+import CenterModal from '../modal/CenterModal.vue';
+import $api from '@api';
 
-    // Props 정의
-    const props = defineProps({
-        title: {
-            type: String,
-            required: true,
-        },
-        strdate: {
-            type: String,
-            required: true,
-        },
-        enddate: {
-            type: String,
-            required: true,
-            default: "",
-        },
-        description: {
-            type: String,
-            required: false,
-        },
-        address: {
-            type: String,
-            required: true,
-        },
-        projctSeq: {
-            type: Number,
-            required: false
-        },
-    });
+// Props 정의
+const props = defineProps({
+    title: {
+        type: String,
+        required: true,
+    },
+    strdate: {
+        type: String,
+        required: true,
+    },
+    enddate: {
+        type: String,
+        required: true,
+        default: "",
+    },
+    description: {
+        type: String,
+        required: false,
+    },
+    address: {
+        type: String,
+        required: true,
+    },
+    projctSeq: {
+        type: Number,
+        required: false
+    },
+    projctCol: {
+        type: String,
+        required: false
+    },
+});
+
+defineEmits(['click']);
+
+const isModalOpen = ref(false);
+const logData = ref(null);
+
+const fetchLogData = async () => {
+    try {
+        const response = await $api.get(`project/log/${props.projctSeq}`);
+        logData.value = response.data.data.length > 0 ? response.data.data[0] : {};
+    } catch (error) {
+        console.error('로그 정보 조회 실패:', error);
+    }
+};
+
+const openModal = async () => {
+    await fetchLogData();
+    isModalOpen.value = true;
+};
+
+const closeModal = () => {
+    isModalOpen.value = false;
+};
 
 </script>
+
diff --git a/src/components/list/ProjectCardList.vue b/src/components/list/ProjectCardList.vue
index 97bdc8c..f862200 100644
--- a/src/components/list/ProjectCardList.vue
+++ b/src/components/list/ProjectCardList.vue
@@ -4,7 +4,7 @@
             <p class="text-muted mt-4">게시물이 없습니다.</p>
         </div>
 
-        <div v-for="post in projectList" :key="post.PROJCTSEQ">
+        <div v-for="post in projectList" :key="post.PROJCTSEQ" @click="openModal(post)" class="cursor-pointer">
             <ProjectCard
                 :title="post.PROJCTNAM"
                 :description="post.PROJCTDES"
@@ -12,27 +12,144 @@
                 :enddate="post.PROJCTEND"
                 :address="post.PROJCTARR + ' ' + post.PROJCTDTL"
                 :projctSeq="post.PROJCTSEQ"
+                :projctCol="post.projctcolor"
             />
         </div>
 
+        <CenterModal :display="isModalOpen" @close="closeModal">
+            <template #title> 프로젝트 수정 </template>
+            <template #body>
+                <FormInput
+                    title="이름"
+                    name="name"
+                    :is-essential="true"
+                    :is-alert="nameAlert"
+                    v-model="selectedProject.PROJCTNAM"
+                />
+
+                <FormSelect
+                    title="컬러"
+                    name="color"
+                    :is-essential="true"
+                    :is-label="true"
+                    :is-common="true"
+                    :data="allColors"
+                    v-model="selectedProject.projctcolor"
+                />
+
+                <FormInput
+                    title="시작일"
+                    type="date"
+                    name="startDay"
+                    v-model="selectedProject.PROJCTSTR"
+                    :is-essential="true"
+                />
+
+                <FormInput
+                    title="종료일"
+                    type="date"
+                    name="endDay"
+                    v-model="selectedProject.PROJCTEND"
+                />
+
+                <FormInput
+                    title="설명"
+                    name="description"
+                    v-model="selectedProject.PROJCTDES"
+                />
+
+                <ArrInput
+                    title="주소"
+                    name="address"
+                    :is-essential="true"
+                    :is-row="true"
+                    v-model="selectedProject"
+                    @update:data="updateAddress"
+                />
+
+            </template>
+            <template #footer>
+                <button class="btn btn-secondary" @click="closeModal">Close</button>
+                <button class="btn btn-primary" @click="handleSubmit">Save</button>
+            </template>
+        </CenterModal>
     </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import ProjectCard from './ProjectCard.vue';
-import { onMounted } from 'vue';
-import $api from '@api';
+    import { computed, ref } from 'vue';
+    import ProjectCard from './ProjectCard.vue';
+    import { onMounted } from 'vue';
+    import $api from '@api';
+    import CenterModal from '@c/modal/CenterModal.vue';
+    import FormInput from '@c/input/FormInput.vue';
+    import FormSelect from '@c/input/FormSelect.vue';
+    import commonApi from '@/common/commonApi';
+import ArrInput from '../input/ArrInput.vue';
 
-const projectList = ref([]);
+    const projectList = ref([]);
+    const isModalOpen = ref(false);
 
-onMounted(()=>{
-    getProjectList();
-})
-const getProjectList = () => {
-    $api.get('project/select').then((res) => {
-        projectList.value = res.data.data.projectList;
-    })
-}
+    const nameAlert = ref(false);
+    const selectedProject = ref({
+        PROJCTNAM: '',
+        projctcolor: '',
+        PROJCTSTR: '',
+        PROJCTEND: '',
+        PROJCTZIP: '',
+        PROJCTARR: '',
+        PROJCTDTL: '',
+        PROJCTDES: '',
+        PROJCTCOL: '',
+    });
 
+    const { colorList } = commonApi({
+        loadColor: true,
+        colorType: 'YNP',
+    });
+
+
+    onMounted(() => {
+        getProjectList();
+    });
+
+    // 프로젝트 목록 불러오기
+    const getProjectList = () => {
+        $api.get('project/select').then(res => {
+            projectList.value = res.data.data.projectList;
+        });
+    };
+
+    const openModal = (post) => {
+        isModalOpen.value = true;
+        selectedProject.value = { ...post };
+    };
+
+    const closeModal = () => {
+        isModalOpen.value = false;
+    };
+
+    // 현재 프로젝트 색상 + 사용하지 않은 색상
+    const allColors = computed(() => {
+        // 기존 색상 추가
+        const existingColor = { value: selectedProject.value.PROJCTCOL, label: selectedProject.value.projctcolor };
+
+        // colorList에 기존 색상을 추가
+        return [existingColor, ...colorList.value];
+    });
+
+    const updateAddress = (addressData) => {
+        selectedProject.value = {
+            ...selectedProject.value,
+            PROJCTZIP: addressData.postcode,
+            PROJCTARR: addressData.address,
+            PROJCTDTL: addressData.detailAddress
+        };
+    };
+
+
+    const handleSubmit = () => {
+
+        console.log(selectedProject.value);
+    };
 </script>

From ec5f5e5e12f034c7e2a5fbb3346597373b91e300 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Tue, 18 Feb 2025 10:22:22 +0900
Subject: [PATCH 18/23] =?UTF-8?q?=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/list/ProjectCard.vue        |  2 +-
 src/components/list/ProjectCardList.vue    | 36 +++++++++++++++++++---
 src/components/projectlist/ProjectList.vue |  6 ++--
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/components/list/ProjectCard.vue b/src/components/list/ProjectCard.vue
index d90ba07..a690309 100644
--- a/src/components/list/ProjectCard.vue
+++ b/src/components/list/ProjectCard.vue
@@ -29,7 +29,7 @@
                     <i class="bx bxs-map"></i>
                     <div class="ms-2">주소</div>
                     <div class="ms-12">{{ address }}</div>
-                    <button type="button" class="btn ms-auto text-white zindex-5" :style="`background-color: ${projctCol} !important;`" @click="openModal">log</button>
+                    <button type="button" class="btn ms-auto text-white" :style="`background-color: ${projctCol} !important;`" @click.stop="openModal">log</button>
                 </div>
             </div>
         </div>
diff --git a/src/components/list/ProjectCardList.vue b/src/components/list/ProjectCardList.vue
index f862200..0f7a36f 100644
--- a/src/components/list/ProjectCardList.vue
+++ b/src/components/list/ProjectCardList.vue
@@ -85,11 +85,15 @@
     import FormInput from '@c/input/FormInput.vue';
     import FormSelect from '@c/input/FormSelect.vue';
     import commonApi from '@/common/commonApi';
-import ArrInput from '../input/ArrInput.vue';
+    import ArrInput from '../input/ArrInput.vue';
+    import { useUserInfoStore } from '@/stores/useUserInfoStore';
 
     const projectList = ref([]);
     const isModalOpen = ref(false);
 
+    const userStore = useUserInfoStore();
+    const user = ref(null);
+
     const nameAlert = ref(false);
     const selectedProject = ref({
         PROJCTNAM: '',
@@ -109,16 +113,21 @@ import ArrInput from '../input/ArrInput.vue';
     });
 
 
-    onMounted(() => {
+    onMounted(async () => {
         getProjectList();
+
+        await userStore.userInfo(); // 로그인한 사용자 정보
+        user.value = userStore.user;
     });
 
     // 프로젝트 목록 불러오기
     const getProjectList = () => {
         $api.get('project/select').then(res => {
             projectList.value = res.data.data.projectList;
+            console.log(projectList.value);
         });
-    };
+};
+
 
     const openModal = (post) => {
         isModalOpen.value = true;
@@ -147,9 +156,26 @@ import ArrInput from '../input/ArrInput.vue';
         };
     };
 
+    console.log(projectList.PROJCTSEQ)
 
     const handleSubmit = () => {
-
-        console.log(selectedProject.value);
+        $api.patch('project/update', {
+            projctSeq: projectList.PROJCTSEQ,
+            projctNam: selectedProject.value.PROJCTNAM,
+            projctCol: selectedProject.value.projctcolor,
+            projctArr: selectedProject.value.PROJCTARR,
+            projctDtl: selectedProject.value.PROJCTDTL,
+            projctZip: selectedProject.value.PROJCTZIP,
+            projctStr: selectedProject.value.PROJCTSTR,
+            projctEnd: selectedProject.value.PROJCTEND,
+            projctDes: selectedProject.value.PROJCTDES,
+            projctUmb: user.value.name,
+        }).then(res => {
+            if (res.status === 200) {
+                toastStore.onToast('수정이 완료 되었습니다.', 's');
+                closeModal();
+                location.reload();
+            }
+        })
     };
 </script>
diff --git a/src/components/projectlist/ProjectList.vue b/src/components/projectlist/ProjectList.vue
index 469c98c..812fc9c 100644
--- a/src/components/projectlist/ProjectList.vue
+++ b/src/components/projectlist/ProjectList.vue
@@ -1,7 +1,7 @@
 <template>
     <SearchBar />
     <div class="d-flex align-items-center">
-        <CategoryBtn :lists="yearCategory" />
+        <CategoryBtn :lists="yearCategory" v-model:selectedCategory="selectedCategory" />
         <WriteBtn class="mt-2 ms-auto" @click="openModal" />
         <CenterModal :display="isModalOpen" @close="closeModal">
             <template #title> 프로젝트 등록 </template>
@@ -142,11 +142,11 @@
 
         $api.post('project/insert', {
             projctNam: name.value,
-            projctCol: String(color.value),
+            projctCol: color.value,
             projctStr: startDay.value,
             projctEnd: endDay.value || null,
             projctDes: description.value || null,
-            projctAdd: address.value,
+            projctArr: address.value,
             projctDtl: detailAddress.value,
             projctZip: postcode.value,
             projctCmb: user.value.name,

From 10d1aa4d8c2fe6548ce80f0bff29c4e3c61b3703 Mon Sep 17 00:00:00 2001
From: Dang <wheodnjs2@naver.com>
Date: Tue, 18 Feb 2025 10:33:12 +0900
Subject: [PATCH 19/23] =?UTF-8?q?=EC=9A=A9=EC=96=B4=EC=A7=91=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/wordDict/DictCard.vue  | 49 ++++++++++++++++++++++++---
 src/components/wordDict/DictWrite.vue |  7 ++--
 src/views/wordDict/wordDict.vue       |  1 -
 3 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/src/components/wordDict/DictCard.vue b/src/components/wordDict/DictCard.vue
index 4d9b5da..8004a55 100644
--- a/src/components/wordDict/DictCard.vue
+++ b/src/components/wordDict/DictCard.vue
@@ -4,10 +4,12 @@
             v-if="isWriteVisible" 
             @close="isWriteVisible = false" 
             :dataList="cateList" 
-            @addCategory="addCategory" 
+            @addCategory="addCategory"
+            @addWord="editWord"
+            :NumValue="item.WRDDICSEQ"
             :formValue="item.WRDDICCAT" 
-            :titleValue="item.WRDDICTTL" 
-            :contentValue="$common.contentToHtml(item.WRDDICCON)"
+            :titleValue="item.WRDDICTTL"
+            :contentValue="item.WRDDICCON"
         />
 
         <div v-else>
@@ -57,13 +59,16 @@
 <script setup>
 import axios from "@api";
 import { useToastStore } from '@s/toastStore';
-import { ref, toRefs } from 'vue';
+import { ref, toRefs, getCurrentInstance, } from 'vue';
 import EditBtn from '@/components/button/EditBtn.vue';
 import $api from '@api';
 import DictWrite from './DictWrite.vue';
 
 const toastStore = useToastStore();
 
+const { appContext } = getCurrentInstance();
+const $common = appContext.config.globalProperties.$common;
+
 // Props
 const props = defineProps({
     item: {
@@ -121,6 +126,42 @@ const addCategory = (data) => {
     }
 }
 
+// 용어집 수정
+const editWord = (data) => {
+    console.log('📌 수정할 데이터:', data);
+    console.log('📌 수정할 데이터:', data.id);
+    console.log('📌 수정할 데이터:', data.category);
+    console.log('📌 수정할 데이터:', data.title);
+    console.log('📌 수정할 데이터:', $common.deltaAsJson(data.content));
+
+    if (!data.id) {
+        console.error('❌ 수정할 데이터의 ID가 없습니다.');
+        toastStore.onToast('수정할 용어의 ID가 필요합니다.', 'e');
+        return;
+    }
+
+    axios.patch('worddict/updateWord', {
+        WRDDICSEQ: data.id,
+        WRDDICCAT: 600104,
+        WRDDICTTL: data.title,
+        WRDDICRIK: $common.deltaAsJson(data.content),
+    })
+    .then((res) => {
+        if (res.data.data === '1') {
+            toastStore.onToast('✅ 용어가 수정되었습니다.', 's');
+            isWriteVisible.value = false; // 성공 시에만 닫기
+            // getwordList(); // 목록 갱신
+        } else {
+            console.warn('⚠️ 서버 응답이 예상과 다릅니다:', res.data);
+            toastStore.onToast('용어 수정이 정상적으로 처리되지 않았습니다.', 'e');
+        }
+    })
+    .catch((err) => {
+        console.error('❌ 용어 수정 중 오류 발생:', err.response?.data || err.message);
+        toastStore.onToast(`용어 수정 실패: ${err.response?.data?.message || '알 수 없는 오류'}`, 'e');
+    });
+};
+
 const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
 
 // 날짜 포맷
diff --git a/src/components/wordDict/DictWrite.vue b/src/components/wordDict/DictWrite.vue
index dc30972..b6dd169 100644
--- a/src/components/wordDict/DictWrite.vue
+++ b/src/components/wordDict/DictWrite.vue
@@ -40,8 +40,7 @@
         />
     </div>
     <div>
-        <QEditor @update:data="content = $event" @update:imageUrls="imageUrls = $event"  :is-alert="wordContentAlert" />
-        {{ contentValue }}
+        <QEditor @update:data="content = $event" @update:imageUrls="imageUrls = $event"  :is-alert="wordContentAlert" :initialData="contentValue"/>
         <div class="text-end mt-5">
             <button class="btn btn-primary" @click="saveWord">
                 <i class="bx bx-check"></i>
@@ -79,6 +78,9 @@ const props = defineProps({
         type: Array,
         default: () => []
     },
+    NumValue : {
+        type: Number
+    },
     formValue : {
         type:[String, Number]
     },
@@ -129,6 +131,7 @@ const saveWord = () => {
     }
 
     const wordData = {
+        id: props.NumValue || null,
         title: wordTitle.value,
         category: selectCategory.value,
         content: content.value,
diff --git a/src/views/wordDict/wordDict.vue b/src/views/wordDict/wordDict.vue
index 5056a96..9e083fe 100644
--- a/src/views/wordDict/wordDict.vue
+++ b/src/views/wordDict/wordDict.vue
@@ -176,7 +176,6 @@
     }
     //용어 등록
     const addWord = (wordData) => {
-
         axios.post('worddict/insertWord',{
             WRDDICCAT : wordData.category,
             WRDDICTTL : wordData.title,

From e376e5ff5970ecf91433ae4a81ea52d879c8550b Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Tue, 18 Feb 2025 10:33:45 +0900
Subject: [PATCH 20/23] =?UTF-8?q?=EB=B3=B4=EB=93=9C=EC=BD=94=EB=A7=A8?=
 =?UTF-8?q?=ED=8A=B8=EB=A8=B8=EC=A7=80=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardComment.vue     | 119 ++++++---
 src/components/board/BoardCommentList.vue |  89 ++++---
 src/components/board/BoardProfile.vue     | 203 ++++++----------
 src/views/board/BoardView.vue             | 284 ++++++++++++++++++----
 4 files changed, 446 insertions(+), 249 deletions(-)

diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue
index 7ebe4a5..07e2327 100644
--- a/src/components/board/BoardComment.vue
+++ b/src/components/board/BoardComment.vue
@@ -1,60 +1,105 @@
 <template>
     <div>
-        <BoardProfile :profileName="comment.author" :showDetail="false" :author="true" :isChild="isChild" />
+        <BoardProfile
+            :unknown="unknown"
+            :boardId="comment.boardId"
+            :profileName="comment.author"
+            :date="comment.createdAt"
+            :comment="comment"
+            :showDetail="false"
+            :author="true"
+            :isLike="!isLike"
+            :isPassword="isPassword"
+            @editClick="editClick"
+            @deleteClick="deleteClick"
+            @submitPassword="submitPassword"
+            @updateReaction="handleUpdateReaction"
+            @toggleEdit="emit('toggleEdit', comment.commentId, true)"
+        />
+
+
         <div class="mt-6">
-            <p class="m-0">{{ comment.content }}</p>
+            <template v-if="isEditTextarea">
+                <textarea v-model="editedContent" class="form-control"></textarea>
+                <div class="mt-2 d-flex justify-content-end">
+                    <button class="btn btn-secondary me-2" @click="emit('toggleEdit', comment.commentId, false)">취소</button>
+                    <button class="btn btn-primary" @click="submitEdit">수정 완료</button>
+                </div>
+            </template>
+            <template v-else>
+                <p class="m-0">{{ comment.content }}</p>
+            </template>
         </div>
+
         <PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6"/>
-        <BoardComentArea v-if="isComment" @submit="submitComment"/>
+        <BoardCommentArea v-if="isComment" @submitComment="submitComment"/>
 
         <!-- 대댓글 -->
         <ul v-if="comment.children && comment.children.length" class="list-unstyled">
             <li
-                v-for="child in comment.children"
-                :key="child.id"
-                class="pt-8 ps-10"
+            v-for="child in comment.children"
+            :key="child.commentId"
+                class="mt-8 pt-6 ps-10 border-top"
             >
-                <BoardComment :comment="child" :isPlusButton="false" :isChild="true" @submitComment="addChildComment" />
+                <BoardComment
+                    :comment="child"
+                    :unknown="unknown"
+                    :isPlusButton="false"
+                    :isLike="true"
+                    @submitComment="submitComment"
+                    @updateReaction="handleUpdateReaction"
+                />
             </li>
         </ul>
         <!-- <ul class="list-unstyled twoDepth">
             <li>
                 <BoardProfile profileName=곤데리2 :showDetail="false" />
                 <div class="mt-2">저도 궁금합니다.</div>
-                <BoardComentArea v-if="comment" />
+                <BoardCommentArea v-if="comment" />
             </li>
         </ul> -->
         <!-- <BoardProfile profileName=곤데리 :showDetail="false" />
         <div class="mt-2">저도 궁금합니다.</div>
         <PlusButton  @click="toggleComment"/>
-        <BoardComentArea v-if="comment" /> -->
+        <BoardCommentArea v-if="comment" /> -->
     </div>
 </template>
 
 <script setup>
+import { defineProps, defineEmits, ref } from 'vue';
 import BoardProfile from './BoardProfile.vue';
-import BoardComentArea from './BoardComentArea.vue';
+import BoardCommentArea from './BoardCommentArea.vue';
 import PlusButton from '../button/PlusBtn.vue';
-import { ref } from 'vue';
-import { defineEmits } from 'vue';
 
 const props = defineProps({
   comment: {
     type: Object,
     required: true,
   },
+  unknown: {
+        type: Boolean,
+        default: true,
+    },
   isPlusButton: {
     type: Boolean,
     default: true,
   },
-  isChild: {
+  isLike: {
     type: Boolean,
     default: false,
   },
+  isEditTextarea: {
+    type: Boolean,
+    default: false
+  },
+  isPassword: {
+    type: Boolean,
+    default: false,
+},
 });
 
 // emits 정의
-const emit = defineEmits(['submitComment']);
+const emit = defineEmits(['submitComment', 'updateReaction', 'toggleEdit', 'editClick']);
 
 // 댓글 입력 창 토글
 const isComment = ref(false);
@@ -63,29 +108,31 @@ const toggleComment = () => {
 };
 
 // 부모 컴포넌트에 대댓글 추가 요청
-const addChildComment = (parentId, newComment) => {
-  emit('submitComment', parentId, newComment);
+const submitComment = (newComment) => {
+    emit('submitComment', { parentId: props.comment.commentId, ...newComment });
+
+    isComment.value = false;
 };
 
+// 좋아요, 싫어요
+const handleUpdateReaction = (reactionData) => {
+    emit('updateReaction', {
+        boardId: props.comment.boardId,
+        commentId: props.comment.commentId,
+        ...reactionData
+    });
+};
+
+// 수정
+const editClick = (data) => {
+    emit('editClick', data);
+};
+
+// 수정
+const editedContent = ref(props.comment.content);
+const submitEdit = () => {
+  emit('submitComment', { commentId: props.comment.commentId, content: editedContent.value });
+  emit('toggleEdit', props.comment.commentId, false); // 수정 모드 종료
+};
 
 </script>
-
-<style scoped>
-    /* .twoDepth {
-        margin-top: 10px;
-        padding-left: 40px;
-    }
-
-    .list-unstyled > li ~ li {
-        margin-top: 10px;
-    }
-
-    .btn-text-primary {
-        padding-left: 0;
-    }
-    .btn-text-primary:hover,
-    .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
index 319345c..f287e93 100644
--- a/src/components/board/BoardCommentList.vue
+++ b/src/components/board/BoardCommentList.vue
@@ -2,47 +2,66 @@
     <ul class="list-unstyled mt-10">
         <li
             v-for="comment in comments"
-            :key="comment.id"
-            class="mt-8"
+            :key="comment.commentId"
+            class="mt-6 border-bottom pb-6"
         >
-            <BoardComment :comment="comment" @submitComment="addComment" />
+            <BoardComment
+                :unknown="unknown"
+                :comment="comment"
+                :isPassword="isPassword"
+                @editClick="editClick"
+                @deleteClick="deleteClick"
+                @submitPassword="submitPassword"
+                @submitComment="submitComment"
+                @updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId)"
+            />
+                <!-- @updateReaction="handleUpdateReaction" -->
         </li>
     </ul>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { defineProps, defineEmits } from '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: [],
-  },
-]);
+const props = defineProps({
+    comments: {
+        type: Array,
+        required: true,
+        default: () => []
+    },
+    unknown: {
+        type: Boolean,
+        default: true,
+    },
+    isPassword: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const emit = defineEmits(['submitComment', 'updateReaction', 'editClick']);
+
+const submitComment = (replyData) => {
+    emit('submitComment', replyData);
+};
+
+const handleUpdateReaction = (reactionData, commentId) => {
+    // console.log('📢 BoardCommentList에서 이벤트 수신:', reactionData);
+    // console.log('📌 전달할 댓글 ID>>>>:', commentId);
+
+    const updatedReactionData = {
+        ...reactionData,
+        commentId: commentId
+    };
+
+    // console.log('🚀 최종 전달할 데이터:', updatedReactionData);
+
+    emit('updateReaction', updatedReactionData);
+}
+
+const editClick = (data) => {
+    emit('editClick', data);
+};
+
 </script>
diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue
index 5f77e63..10a52b2 100644
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="d-flex align-items-center flex-wrap">
         <div class="d-flex align-items-center">
-            <div class="avatar me-2" v-if="unknown">
+            <div v-if="!unknown" class="avatar me-2">
                 <img src="/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
             </div>
             <div class="me-2">
@@ -13,73 +13,71 @@
                             <i class="fa-regular fa-eye"></i> {{ views }}
                         </span>
                         <span>
-                            <i class="bx bx-comment"></i> {{ comments }}
+                            <i class="bx bx-comment"></i> {{ commentNum }}
                         </span>
                     </template>
                 </div>
             </div>
         </div>
-        <div class="ms-auto btn-area">
-            <template v-if="showDetail">
-                <div class="text-end">
-                    <EditButton @click="handleEdit" />
-                    <DeleteButton @click="handleDelete" />
+        <!-- 버튼 영역 -->
+        <div class="ms-auto text-end">
+            <!-- 수정, 삭제 버튼 -->
+            <template v-if="author || showDetail">
+                <EditButton @click.stop="editClick" />
+                <DeleteButton @click.stop="deleteClick" />
+            </template>
 
-                    <div class="mt-3" v-if="isPassword && unknown">
-                        <div class="input-group">
-                            <input
-                                type="password"
-                                class="form-control"
-                                v-model="password"
-                                placeholder="비밀번호 입력"
-                            />
-                            <button class="btn btn-primary" type="button" @click="handleSubmit">확인</button>
-                        </div>
-                        <span v-if="passwordAlert" class="invalid-feedback d-block text-start">{{ passwordAlert }}</span>
-                    </div>
+            <!-- 좋아요, 싫어요 버튼 (댓글에서만 표시) -->
+            <BoardRecommendBtn
+                v-if="isLike"
+                :boardId="boardId"
+                :comment="props.comment"
+                @updateReaction="handleUpdateReaction"
+            />
+
+             <!-- 비밀번호 입력창 (익명일 경우) -->
+             <div v-if="isPassword && unknown" class="mt-3">
+                <div class="input-group">
+                    <input
+                        type="password"
+                        class="form-control"
+                        v-model="password"
+                        placeholder="비밀번호 입력"
+                    />
+                    <button class="btn btn-primary" @click="$emit('submitPassword', password)">확인</button>
                 </div>
-            </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 v-if="!isChild" :isRecommend="false" />
-            </template>
+                <span v-if="props.passwordAlert" class="invalid-feedback d-block text-start">{{ props.passwordAlert }}</span>
+            </div>
         </div>
     </div>
 </template>
 
 <script setup>
-import { ref, onMounted, defineProps } from 'vue';
-import { useRouter } from 'vue-router';
-import axios from '@api';
+import { ref, defineProps, defineEmits } from 'vue';
 import DeleteButton from '../button/DeleteBtn.vue';
 import EditButton from '../button/EditBtn.vue';
 import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
 
 // Vue Router 인스턴스
-const router = useRouter();
-const isPassword = ref(false);
 const password = ref('');
-const passwordAlert = ref(false);
-const lastClickedButton = ref('');
 
 // Props 정의
 const props = defineProps({
+    comment: {
+        type: Object,
+        required: true,
+    },
     boardId: {
         type: Number,
-        required: true
+        required: false
+    },
+    commentId: {
+        type: Number,
+        required: false,
     },
     profileName: {
         type: String,
-        default: '익명',
+        default: '익명 사용자',
     },
     unknown: {
         type: Boolean,
@@ -89,6 +87,7 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    // 게시글의 작성자 여부를 확인 : 현재 로그인한 사용자가 이 게시글의 작성자인지 여부
     author: {
         type: Boolean,
         default: false,
@@ -101,113 +100,49 @@ const props = defineProps({
         type: Number,
         default: 0,
     },
-    comments: {
+    commentNum: {
         type: Number,
         default: 0,
     },
-    isChild: {
+    isLike: {
         type: Boolean,
         default: false,
+    },
+    isPassword: {
+        type: Boolean,
+        default: false,
+    },
+    passwordAlert: {
+        type: String,
+        default: false,
     }
 });
 
-const emit = defineEmits(['togglePasswordInput']);
+const emit = defineEmits(['togglePasswordInput', 'updateReaction', 'editClick', 'deleteClick', 'updatePasswordAlert']);
 
-// 수정 버튼
-const handleEdit = () => {
-    if (props.unknown) {
-        togglePassword('edit');
-    } else {
-        router.push({ name: 'BoardEdit', params: { id: props.boardId } });
-    }
+// 수정
+const editClick = () => {
+    emit('editClick', props.unknown);
 };
 
-// 삭제 버튼
-const handleDelete = () => {
-    if (props.unknown) {
-        togglePassword('delete');
-    } else {
-        deletePost();
-    }
+// 삭제
+const deleteClick = () => {
+    emit('deleteClick', props.unknown);
 };
 
-// 비밀번호 입력 토글
-const togglePassword = (button) => {
-    if (lastClickedButton.value === button) {
-        isPassword.value = !isPassword.value;
-    } else {
-        isPassword.value = true;
-    }
-    lastClickedButton.value = button;
+const handleUpdateReaction = (reactionData) => {
+    // console.log("🔥 BoardProfile에서 좋아요/싫어요 이벤트 발생");
+    // console.log("📌 게시글 ID:", props.boardId);
+    // console.log("📌 댓글 ID (수정 후):", props.comment?.commentId);
+    // console.log("📌 reactionData:", reactionData);
+
+    emit("updateReaction", {
+        boardId: props.boardId,
+        commentId:  props.comment?.commentId,
+        ...reactionData,
+    });
 };
 
-// 비밀번호 확인
-const handleSubmit = async () => {
-    if (!password.value) {
-        passwordAlert.value = '비밀번호를 입력해주세요.';
-        return;
-    }
-
-    try {
-        const requestData = {
-            LOCBRDPWD: password.value,
-            LOCBRDSEQ: 288
-        }
-
-        const postResponse = await axios.post(`board/${props.boardId}/password`, requestData);
-
-        if (postResponse.data.code === 200) {
-            if (postResponse.data.data === true) {
-                isPassword.value = false;
-                
-
-                if (lastClickedButton.value === 'edit') {
-                    router.push({ name: 'BoardEdit', params: { id: props.boardId } });
-                } else if (lastClickedButton.value === 'delete') {
-                    await deletePost();
-                }
-
-                lastClickedButton.value = null;
-            } else {
-                passwordAlert.value = '비밀번호가 일치하지 않습니다.';
-            }
-        } else {
-            passwordAlert.value = '비밀번호가 일치하지 않습니다.';
-        }
-    } catch (error) {
-       // 401 오류
-       if (error.response && error.response.status === 401) {
-            passwordAlert.value = '비밀번호가 일치하지 않습니다.';
-        } else if (error.response) {
-            alert(`오류 발생: ${error.response.data.message || '서버 오류'}`);
-        } else {
-            alert('네트워크 오류가 발생했습니다. 다시 시도해주세요.');
-        }
-    }
-};
-
-const deletePost = async () => {
-    if (confirm('정말 삭제하시겠습니까?')) {
-        try {
-            const response = await axios.delete(`board/${props.boardId}`, {
-                data: { LOCBRDSEQ: props.boardId }
-            });
-
-            if (response.data.code === 200) {
-                alert('게시물이 삭제되었습니다.');
-                router.push({ name: 'BoardList' });
-            } else {
-                alert('삭제 실패: ' + response.data.message);
-            }
-        } catch (error) {
-            if (error.response) {
-                alert(`삭제 실패: ${error.response.data.message || '서버 오류'}`);
-            } else {
-                alert('네트워크 오류가 발생했습니다. 다시 시도해주세요.');
-            }
-        }
-    }
-};
 
 </script>
 
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index fbb161f..7d72463 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -8,9 +8,17 @@
                         <BoardProfile
                             :boardId="currentBoardId"
                             :profileName="profileName"
+                            :unknown="unknown"
+                            :author="isAuthor"
                             :views="views"
-                            :comments="comments"
+                            :commentNum="commentNum"
                             :date="formattedBoardDate"
+                            :isLike="false"
+                            :isPassword="isPassword"
+                            :passwordAlert="passwordAlert"
+                            @editClick="editClick"
+                            @deleteClick="deleteClick"
+                            @submitPassword="submitPassword"
                             class="pb-6 border-bottom"
                         />
                     </div>
@@ -64,17 +72,28 @@
                             </li>
                         </ul> -->
 
-                        <!-- 댓글 영역 -->
-                        <BoardComentArea />
-
-                        <!-- 수정 버튼 -->
-                        <!-- <button class="btn btn-primary" @click="goToEditPage">
-                            글 수정
-                        </button> -->
+                        <!-- 댓글 입력 영역 -->
+                        <BoardCommentArea
+                            :profileName="profileName"
+                            :unknown="unknown"
+                            @submitComment="handleCommentSubmit"
+                        />
+                        <!-- <BoardCommentArea :profileName="profileName" :unknown="unknown" /> -->
                     </div>
-                    <div class="card-footer">
-                        <BoardCommentList/>
 
+                    <!-- 댓글 목록 -->
+                    <div class="card-footer">
+                        <BoardCommentList
+                            :unknown="unknown"
+                            :comments="comments"
+                            :isEditTextarea="isEditTextarea"
+                            :isPassword="isPassword"
+                            @editClick="editClick"
+                            @deleteClick="deleteClick"
+                            @submitPassword="submitPassword"
+                            @updateReaction="handleUpdateReaction"
+                            @submitComment="handleCommentReply"
+                        />
                         <Pagination/>
                     </div>
                 </div>
@@ -84,7 +103,7 @@
 </template>
 
 <script setup>
-import BoardComentArea from '@c/board/BoardComentArea.vue';
+import BoardCommentArea from '@/components/board/BoardCommentArea.vue';
 import BoardProfile from '@c/board/BoardProfile.vue';
 import BoardCommentList from '@/components/board/BoardCommentList.vue';
 import BoardRecommendBtn from '@/components/button/BoardRecommendBtn.vue';
@@ -94,7 +113,7 @@ import { useRoute, useRouter } from 'vue-router';
 import axios from '@api';
 
 // 게시물 데이터 상태
-const profileName = ref('익명 사용자');
+const profileName = ref('');
 const boardTitle = ref('제목 없음');
 const boardContent = ref('');
 const date = ref('');
@@ -103,17 +122,25 @@ const likes = ref(0);
 const dislikes = ref(0);
 const likeClicked = ref(false);
 const dislikeClicked = ref(false);
-const comments = ref(0);
+const commentNum = ref(0);
 const attachment = ref(false);
+const comments = ref([]);
 
-// 라우트에서 ID 가져오기
 const route = useRoute();
+const router = useRouter();
 const currentBoardId = ref(Number(route.params.id));
+const unknown = computed(() => profileName.value === '익명 사용자');
+const currentUserId = ref('김자바'); // 현재 로그인한 사용자 id
+const authorId = ref(null); // 작성자 id
+
+const isAuthor = computed(() => currentUserId.value === authorId.value);
+
+const isEditTextarea = ref({});
+
+const passwordAlert = ref("");
+const isPassword = ref(false);
+const lastClickedButton = ref("");
 
-// 글 수정 페이지로 이동
-const goToEditPage = () => {
-    router.push({ name: 'BoardEdit', params: { id: currentBoardId.value } });
-};
 
 // 게시물 상세 데이터 불러오기
 const fetchBoardDetails = async () => {
@@ -125,6 +152,13 @@ const fetchBoardDetails = async () => {
         // const boardDetail = data.boardDetail || {};
 
         profileName.value = data.author || '익명 사용자';
+
+        // 익명확인하고 싶을때
+        profileName.value = '익명 사용자';
+
+        // 게시글의 작성자 여부를 확인 : 현재 로그인한 사용자가 이 게시글의 작성자인지 여부
+        authorId.value = data.author;
+
         boardTitle.value = data.title || '제목 없음';
         boardContent.value = data.content || '';
         date.value = data.date || '';
@@ -132,10 +166,7 @@ const fetchBoardDetails = async () => {
         likes.value = data.likeCount || 0;
         dislikes.value = data.dislikeCount || 0;
         attachment.value = data.hasAttachment || null;
-        comments.value = data.commentCount || 0;
-
-        // const response2 = await axios.post(`board/${currentBoardId.value}/password`);
-        // console.log(response2)
+        commentNum.value = data.commentCount || 0;
 
     } catch (error) {
         alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
@@ -144,50 +175,215 @@ const fetchBoardDetails = async () => {
 
 // 좋아요, 싫어요
 const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) => {
-    // console.log(type, boardId)
     try {
-
-        const requestData = {
-            LOCBRDSEQ: boardId,
-            LOCCMTSEQ: commentId,
-            MEMBERSEQ: 1, // 멤버아이디 지금은 1 나중에 수정해야함
+        const aa = await axios.post(`/board/${boardId}/${commentId}/reaction`, {
+            LOCBRDSEQ: boardId, // 게시글 id
+            LOCCMTSEQ: commentId, //댓글 id
+            // MEMBERSEQ: 1, // 멤버아이디 지금은 1 나중에 수정해야함
             LOCGOBGOD: isLike ? 'T' : 'F',
             LOCGOBBAD: isDislike ? 'T' : 'F'
-        };
+        });
+        console.log("좋아요 API 응답 데이터:", aa.data);
 
-        console.log(requestData)
-
-        const postResponse = await axios.post(`/board/${boardId}/${commentId}/reaction`, requestData);
-        // await axios.post(`board/${boardId}/${commentId}/reaction`, { type });
 
         const response = await axios.get(`board/${boardId}`);
         const updatedData = response.data.data;
 
-        console.log('post요청 결과:', postResponse.data);
-        console.log('get요청 결과(좋아요):', response.data.data.likeCount);
-
         likes.value = updatedData.likeCount;
         dislikes.value = updatedData.dislikeCount;
 
         likeClicked.value = isLike;
         dislikeClicked.value = isDislike;
-
-        console.log('반응 결과:', postResponse.data);
+        // console.log(updatedData)
 
     } catch (error) {
         alert('반응을 업데이트하는 중 오류 발생');
     }
 };
 
-// 날짜
-const formattedBoardDate = computed(() => {
-    const dateObj = new Date(date.value);
-    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')}`;
-});
+// 댓글 목록 조회
+const fetchComments = async () => {
+    try {
+        const response = await axios.get(`board/${currentBoardId.value}/comments`, {
+            params: { LOCBRDSEQ: currentBoardId.value }
+        });
+        console.log("목록 API 응답 데이터:", response.data);
 
+        let allComments = response.data.data.list.map(comment => ({
+            commentId: comment.LOCCMTSEQ, // 댓글 id
+            boardId: comment.LOCBRDSEQ,
+            parentId: comment.LOCCMTPNT, // 부모 id
+            author: comment.author || "익명 사용자", // 작성자
+            content: comment.LOCCMTRPY, // 댓글 내용
+            createdAt: formattedDate(comment.LOCCMTRDT), // 생성 날짜
+            children: []
+        }));
+
+        allComments.sort((a, b) => b.commentId - a.commentId);
+
+        let commentMap = {};
+        let rootComments = [];
+
+        allComments.forEach(comment => {
+            commentMap[comment.commentId] = comment;
+        });
+
+        allComments.forEach(comment => {
+            if (comment.parentId && commentMap[comment.parentId]) {
+                commentMap[comment.parentId].children.push(comment);
+            } else {
+                rootComments.push(comment);
+            }
+        });
+
+        comments.value = rootComments;
+
+        // console.log("변환된 comments 데이터:", comments.value);
+
+    } catch (error) {
+        console.error('댓글 목록 불러오기 오류:', error);
+    }
+};
+
+// 댓글 작성
+const handleCommentSubmit = async ({ comment, password }) => {
+    try {
+        const response = await axios.post(`board/${currentBoardId.value}/comment`, {
+            LOCBRDSEQ: currentBoardId.value,
+            LOCCMTRPY: comment,
+            LOCCMTPWD: password || null,
+            LOCCMTPNT: 1
+        });
+        // console.log('📥 서버 응답 전체:', response.data);
+
+        if (response.status === 200) {
+            console.log('댓글 작성 성공:', response.data.message);
+            await fetchComments();
+        } else {
+            console.error('댓글 작성 실패:', response.data.message);
+        }
+    } catch (error) {
+        console.error('댓글 작성 중 오류 발생:', error);
+    }
+};
+
+const handleCommentReply = async (reply) => {
+    const response = await axios.post(`board/${currentBoardId.value}/comment`, {
+        LOCBRDSEQ: currentBoardId.value,
+        LOCCMTRPY: reply.comment,
+        LOCCMTPWD: reply.password || null,
+        LOCCMTPNT: reply.parentId
+    });
+
+    if (response.status === 200) {
+        console.log('대댓글 작성 성공:', response.data.message);
+        await fetchComments();
+    } else {
+        console.error('대댓글 작성 실패:', response.data.message);
+    }
+}
+
+const editClick = (unknown) => {
+
+    if (unknown) {
+        togglePassword("edit");
+    } else {
+        router.push({ name: "BoardEdit", params: { id: currentBoardId.value } });
+    }
+};
+
+const deleteClick = (unknown) => {
+    if (unknown) {
+        togglePassword("delete");
+    } else {
+        deletePost();
+    }
+};
+
+const togglePassword = (button) => {
+    if (lastClickedButton.value === button) {
+        isPassword.value = !isPassword.value;
+    } else {
+        isPassword.value = true;
+    }
+    lastClickedButton.value = button;
+};
+
+
+const submitPassword = async (inputPassword) => {
+    console.log(inputPassword)
+    if (!inputPassword) {
+        passwordAlert.value = "비밀번호를 입력해주세요.";
+        return;
+    }
+
+    try {
+        const requestData = {
+            LOCBRDPWD: inputPassword,
+            LOCBRDSEQ: 288
+        };
+
+        const postResponse = await axios.post(`board/${currentBoardId.value}/password`, requestData);
+
+        if (postResponse.data.code === 200 && postResponse.data.data === true) {
+            isPassword.value = false;
+            passwordAlert.value = "";
+
+            if (lastClickedButton.value === "edit") {
+                router.push({ name: "BoardEdit", params: { id: currentBoardId.value } });
+            } else if (lastClickedButton.value === "delete") {
+                await deletePost();
+            }
+            lastClickedButton.value = null;
+        } else {
+            passwordAlert.value = "비밀번호가 일치하지 않습니다.";
+        }
+    } catch (error) {
+        if (error.response && error.response.status === 401) {
+            passwordAlert.value = "비밀번호가 일치하지 않습니다.";
+        } else if (error.response) {
+            alert(`오류 발생: ${error.response.data.message || "서버 오류"}`);
+        } else {
+            alert("네트워크 오류가 발생했습니다. 다시 시도해주세요.");
+        }
+    }
+};
+
+const deletePost = async () => {
+    if (confirm("정말 삭제하시겠습니까?")) {
+        try {
+            const response = await axios.delete(`board/${currentBoardId.value}`, {
+                data: { LOCBRDSEQ: currentBoardId.value }
+            });
+
+            if (response.data.code === 200) {
+                alert("게시물이 삭제되었습니다.");
+                router.push({ name: "BoardList" });
+            } else {
+                alert("삭제 실패: " + response.data.message);
+            }
+        } catch (error) {
+            if (error.response) {
+                alert(`삭제 실패: ${error.response.data.message || "서버 오류"}`);
+            } else {
+                alert("네트워크 오류가 발생했습니다. 다시 시도해주세요.");
+            }
+        }
+    }
+};
+
+// 날짜
+const formattedDate = (dateString) => {
+    if (!dateString) return "날짜 없음";
+    const dateObj = new Date(dateString);
+    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')}`;
+};
+
+const formattedBoardDate = computed(() => formattedDate(date.value));
 
 // 컴포넌트 마운트 시 데이터 로드
 onMounted(() => {
-    fetchBoardDetails();
+    fetchBoardDetails()
+    fetchComments()
 });
 </script>

From ce2ccde4fd239254740c4826468843322b92eaf1 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Tue, 18 Feb 2025 11:02:02 +0900
Subject: [PATCH 21/23] =?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/board/BoardComment.vue     | 2 +-
 src/components/vacation/ProfileList.vue   | 6 +++---
 src/views/board/BoardView.vue             | 8 ++++----
 src/views/vacation/VacationManagement.vue | 8 ++++----
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue
index 07e2327..0e1fbef 100644
--- a/src/components/board/BoardComment.vue
+++ b/src/components/board/BoardComment.vue
@@ -68,7 +68,7 @@
 <script setup>
 import { defineProps, defineEmits, ref } from 'vue';
 import BoardProfile from './BoardProfile.vue';
-import BoardCommentArea from './BoardCommentArea.vue';
+import BoardCommentArea from './BoardComentArea.vue';
 import PlusButton from '../button/PlusBtn.vue';
 
 const props = defineProps({
diff --git a/src/components/vacation/ProfileList.vue b/src/components/vacation/ProfileList.vue
index 18eb654..526537c 100644
--- a/src/components/vacation/ProfileList.vue
+++ b/src/components/vacation/ProfileList.vue
@@ -27,8 +27,8 @@
 
   <script setup>
   import { onMounted, ref, computed, nextTick } from "vue";
-  import { useUserStore } from "@s/useUserStore";
-  import { useUserStore as useUserListStore } from "@s/userList";
+  import { useUserInfoStore } from "@s/useUserInfoStore";
+  import { useUserStore } from "@s/userList";
   import $api from "@api";
 
   defineEmits(["profileClick"]);
@@ -38,7 +38,7 @@
 });
 
   const userStore = useUserInfoStore();
-  const userListStore = useUserListStore();
+  const userListStore = useUserStore();
 
   const userList = ref([]);
   const baseUrl = $api.defaults.baseURL.replace(/api\/$/, "");
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index 7d72463..0eec1df 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -103,11 +103,11 @@
 </template>
 
 <script setup>
-import BoardCommentArea from '@/components/board/BoardCommentArea.vue';
+import BoardCommentArea from '@c/board/BoardComentArea.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 BoardCommentList from '@c/board/BoardCommentList.vue';
+import BoardRecommendBtn from '@c/button/BoardRecommendBtn.vue';
+import Pagination from '@c/pagination/Pagination.vue';
 import { ref, onMounted, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import axios from '@api';
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index 1e27430..86e1346 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -56,13 +56,13 @@ import axios from "@api";
 import "bootstrap-icons/font/bootstrap-icons.css";
 import HalfDayButtons from "@c/button/HalfDayButtons.vue";
 import ProfileList from "@c/vacation/ProfileList.vue";
-import { useUserStore as useUserListStore } from "@s/userList";
+import { useUserStore } from "@s/userList";
 import VacationModal from "@c/modal/VacationModal.vue"
-import { useUserStore } from "@s/useUserStore";
+import { useUserInfoStore } from "@s/useUserInfoStore";
 import VacationGrantModal from "@c/modal/VacationGrantModal.vue";
 
-const userStore = useUserStore();
-const userListStore = useUserListStore();
+const userStore = useUserInfoStore();
+const userListStore = useUserStore();
 const userList = ref([]);
 const userColors = ref({});
 const myVacations = ref([]); // 내가 사용한 연차 목록

From 99b7296f003a3bc136ff64897918559f0ee72edf Mon Sep 17 00:00:00 2001
From: khj0414 <khj0414@local-host.co.kr>
Date: Tue, 18 Feb 2025 11:12:06 +0900
Subject: [PATCH 22/23] =?UTF-8?q?=ED=88=AC=ED=91=9C=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pagination/Pagination.vue      |  28 ++-
 src/components/voteboard/voteCard.vue         |  51 ++++-
 src/components/voteboard/voteCardCheck.vue    |  88 +++++++-
 .../voteboard/voteCardCheckList.vue           |  47 +++-
 src/components/voteboard/voteCardList.vue     |  22 +-
 .../voteboard/voteCompleteUserList.vue        |  12 +-
 .../voteboard/voteCompleteUserListCard.vue    |  39 +++-
 .../voteboard/voteInCompleteUserList.vue      |  12 +-
 .../voteboard/voteInCompleteUserListCard.vue  |  39 +++-
 src/components/voteboard/voteLinkInput.vue    |  80 +++++++
 src/components/voteboard/voteRevoteEnd.vue    |  16 --
 src/components/voteboard/voteUserList.vue     |  33 ++-
 src/stores/voteCommon.js                      |  26 +++
 src/views/voteboard/voteBoardList.vue         |  84 +++++--
 src/views/voteboard/voteboardWrite.vue        | 207 +++++++++++++++---
 15 files changed, 669 insertions(+), 115 deletions(-)
 create mode 100644 src/components/voteboard/voteLinkInput.vue
 delete mode 100644 src/components/voteboard/voteRevoteEnd.vue
 create mode 100644 src/stores/voteCommon.js

diff --git a/src/components/pagination/Pagination.vue b/src/components/pagination/Pagination.vue
index 8eb7234..955ee44 100644
--- a/src/components/pagination/Pagination.vue
+++ b/src/components/pagination/Pagination.vue
@@ -66,51 +66,55 @@
   const props = defineProps({
     currentPage: {
       type: Number,
-      required: true
+      required: false
     },
     pages: {
       type: Number,
-      required: true
+      required: false
     },
     prePage: {
       type: Number,
-      required: true
+      required: false
     },
     nextPage: {
       type: Number,
-      required: true
+      required: false
     },
     isFirstPage: {
       type: Boolean,
-      required: true
+      required: false
     },
     isLastPage: {
       type: Boolean,
-      required: true
+      required: false
     },
     hasPreviousPage: {
       type: Boolean,
-      required: true
+      required: false
     },
     hasNextPage: {
       type: Boolean,
-      required: true
+      required: false
     },
     navigatePages: {
       type: Number,
-      required: true
+      required: false
     },
     navigatepageNums: {
       type: Array,
-      required: true
+      required: false
     },
     navigateFirstPage: {
       type: Number,
-      required: true
+      required: false
     },
     navigateLastPage: {
       type: Number,
-      required: true
+      required: false
+    },
+    PageData:{
+        type:Array,
+        required:false,
     }
   });
 
diff --git a/src/components/voteboard/voteCard.vue b/src/components/voteboard/voteCard.vue
index 71a6542..6662bad 100644
--- a/src/components/voteboard/voteCard.vue
+++ b/src/components/voteboard/voteCard.vue
@@ -2,32 +2,46 @@
     <div class="card mb-6">
         <div class="card-body">
         <h5 class="card-title mb-1"><div class="list-group-item list-group-item-action d-flex align-items-center cursor-pointer">
-            <img src="/img/avatars/1.png" class="rounded-circle me-3 w-px-40" >
+            <img
+            class="rounded-circle user-avatar border border-3 w-px-40"
+            :src="`${baseUrl}upload/img/profile/${data.localVote.MEMBERPRF}`"
+            :style="`border-color: ${data.localVote.usercolor} !important;`"
+            alt="user"
+            />
             <div class="w-100">
             <div class="d-flex justify-content-between">
                 <div class="user-info">
-                    <h6 class="mb-1">공공이</h6>
+                    <h6 class="mb-1">{{ data.localVote.MEMBERNAM }}</h6>
                 </div>
                 <div class="add-btn">
                     <!-- 투표완료시  -->
                     <i class="bx bxs-check-circle link-success"></i>
                     <!-- 투표작성자만 수정/삭제/종료 가능  -->
-                    <button type="button" class="bx btn btn-danger">종료</button>
+                    <button
+                    v-if="userStore.user.id === data.localVote.LOCVOTREG"
+                    type="button" class="bx btn btn-danger">종료</button>
                     <EditBtn />
                     <DeleteBtn />
                 </div>
-                </div>
+            </div>
             </div>
             </div>
         </h5>
-        <div class="mb-1">회식장소 고릅시다.</div>
-        <div class="mb-1">24.12.12 11:02 ~ 24.12.12 16:02</div>
+        <h5>{{ data.localVote.LOCVOTTTL }}</h5>
+        <div class="mb-1">{{ data.localVote.formatted_LOCVOTRDT }} ~ {{ data.localVote.formatted_LOCVOTEDT }}</div>
         <!-- 투표완료시-->
-        <vote-revote-end />
+        <button v-if="data.yesVotetotal > 0" class="btn btn-primary btn-sm" >재투표</button>
         <!-- 투표안했을시-->
-        <vote-card-check />
+        <vote-card-check
+        v-if="data.yesVotetotal == 0"
+        @addContents="addContents"
+        @checkedNames="checkedNames"
+        :data="data.voteDetails"
+        :voteInfo="data.localVote"
+        :total="data.voteDetails.length "/>
         <!-- 투표완/미완 인원 -->
-        <vote-user-list />
+        <vote-user-list
+        :data="data.voteMembers"/>
         <!-- 투표 결과 -->
         <vote-result-list />
         </div>
@@ -41,8 +55,25 @@ import DeleteBtn from '@c/button/DeleteBtn.vue';
 import voteUserList from '@c/voteboard/voteUserList.vue';
 import voteResultList from '@c/voteboard/voteResultList.vue';
 import voteCardCheck from '@c/voteboard/voteCardCheck.vue';
-import voteRevoteEnd from '@c/voteboard/voteRevoteEnd.vue';
+import { useUserInfoStore } from '@s/useUserInfoStore';
+import $api from '@api';
 
+const props = defineProps({
+    data: {
+        type: Object,
+        required: true,
+    },
+});
+const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
+
+const userStore = useUserInfoStore();
+const emit = defineEmits(['addContents','checkedNames']);
+const addContents = (itemList, voteId) =>{
+    emit('addContents',itemList,voteId)
+}
+const checkedNames = (numList) =>{
+    emit('checkedNames',numList);
+}
 </script>
 
 <style scoped>
diff --git a/src/components/voteboard/voteCardCheck.vue b/src/components/voteboard/voteCardCheck.vue
index ea2c37a..a8c8472 100644
--- a/src/components/voteboard/voteCardCheck.vue
+++ b/src/components/voteboard/voteCardCheck.vue
@@ -2,24 +2,96 @@
     <div class="card-text">
         <div class="demo-inline-spacing mt-4">
         <!-- 투표리스트 -->
-        <vote-card-check-list />
-        <div class="d-flex align-items-center">
-        <PlusBtn/>
-        <FormInput title="추가항목" name="addContent" :isLabel="false" :is-essential="true" :is-alert="titleAlert" @update:data="title = $event"  />
-        <button class="btn btn-primary ms-1">저장</button>
+            <div  v-for="(item, index) in data"
+            :key="index">
+            <vote-card-check-list
+            :data="item"
+            :multiIs = voteInfo.LOCVOTMUL
+            :selectedValues="checkedNames"
+            @update:selectedValues="updateCheckedNames"
+            />
+            <div v-if="voteInfo.LOCVOTADD ==='1' && index === data.length - 1" class="d-flex align-items-center">
+            <div class="d-flex flex-column gap-2">
+            <div v-for="(item, index) in itemList" :key="index"  class="d-flex align-items-center">
+            <form-input
+                class="flex-grow-1 me-2"
+                :title="'항목 ' + (index + data.length + 1)"
+                :name="'content' + index"
+                :is-essential="false"
+                :is-alert="contentAlerts[index]"
+                v-model="item.content"
+            />
+            <link-input v-model="item.url" />
+            <delete-btn @click="removeItem(index)" class="ms-2" />
+            </div>
+            <div class="mb-4 d-flex justify-content">
+            <plus-btn @click="addItem" :disabled="total >= 10" class="mb-3" />
+            <button class="btn btn-primary btn-icon mb-3" @click="addContentSave(item.LOCVOTSEQ)" :disabled="isSaveDisabled">
+                <i class="bx bx-check"></i>
+            </button>
+            </div>
         </div>
+            </div>
+
+            </div>
         </div>
+
     </div>
-    <button class="btn btn-primary btn-sm">투표하기</button>
+    <button class="btn btn-primary btn-sm" @click="selectVote">투표하기</button>
 </template>
 
 <script setup>
+import $api from '@api';
 import PlusBtn from '@c/button/PlusBtn.vue';
 import FormInput from '@c/input/FormInput.vue';
 import voteCardCheckList from '@c/voteboard/voteCardCheckList.vue';
-import { ref } from 'vue';
-
+import { computed, ref } from 'vue';
+import LinkInput from "@/components/voteboard/voteLinkInput.vue";
+import { voteCommon } from '@s/voteCommon';
+import DeleteBtn from "@c/button/DeleteBtn.vue";
+import { useToastStore } from '@s/toastStore';
+import router from '@/router';
+const toastStore = useToastStore();
+const contentAlerts = ref(false);
 const titleAlert = ref(false);
+const title = ref('');
+const rink = ref('');
+const { itemList, addItem, removeItem } = voteCommon(true);
+const total = computed(() => props.total + itemList.value.length);
+const isSaveDisabled = computed(() => {
+    return itemList.value.length === 0 || itemList.value.every(item => !item.content.trim());
+});
+const props = defineProps({
+    data: {
+        type: Array,
+        required: true,
+    },
+    voteInfo: {
+        type: Object,
+        required: true,
+    },
+    total: {
+        type: Number,
+        required: true,
+    },
+});
+const emit = defineEmits(['addContents','checkedNames']);
+//항목추가
+const addContentSave = (voteId) =>{
+    emit('addContents',itemList.value,voteId);
+    itemList.value = [{ content: "", url: "" }];
+}
+
+const checkedNames = ref([]); // 선택된 값 저장
+const updateCheckedNames = (newValues) => {
+    checkedNames.value = newValues;
+};
+const selectVote = () =>{
+    emit('checkedNames',checkedNames.value);
+}
+
+
+
 </script>
 
 <style >
diff --git a/src/components/voteboard/voteCardCheckList.vue b/src/components/voteboard/voteCardCheckList.vue
index bb273e4..098f68f 100644
--- a/src/components/voteboard/voteCardCheckList.vue
+++ b/src/components/voteboard/voteCardCheckList.vue
@@ -1,14 +1,57 @@
 <template>
     <div class="list-group">
         <label class="list-group-item">
-        <input class="form-check-input me-1" type="checkbox" value="">
-        case1
+            <input
+                class="form-check-input me-1"
+                :name="data.LOCVOTSEQ"
+                :type="multiIs === '1' ? 'checkbox' : 'radio'"
+                :value="data.VOTDETSEQ"
+                :checked="selectedValues.includes(data.VOTDETSEQ)"
+                @change="handleChange"
+            >
+            {{ data.LOCVOTCON }}
+            <a v-if="data.LOCVOTLIK" :href="data.LOCVOTLIK.startsWith('http') ? data.LOCVOTLIK : 'http://' + data.LOCVOTLIK" target="_blank">
+                {{ data.LOCVOTLIK }}
+            </a>
         </label>
     </div>
+
 </template>
 
 <script setup>
+import { ref } from 'vue';
 
+const props = defineProps({
+    data: {
+        type: Object,
+        required: true,
+    },
+    multiIs: {
+        type: String,
+        required: true,
+    },
+    selectedValues: {
+        type: Array,
+        required: true,
+    },
+})
+const emit = defineEmits(["update:selectedValues"]);
+
+const handleChange = (event) => {
+    const value = event.target.value;
+    let updatedValues = [];
+
+    // 체크박스일 때 여러 개 선택 가능
+    if (props.multiIs === "1") {
+        updatedValues = event.target.checked
+            ? [...props.selectedValues, { VOTDETSEQ: value, LOCVOTSEQ: props.data.LOCVOTSEQ, LOCVOTCON: props.data.LOCVOTCON }]
+            : props.selectedValues.filter(v => v.VOTDETSEQ !== value);
+    } else {
+        // 라디오 버튼일 때 하나만 선택 가능
+        updatedValues = [{ VOTDETSEQ: value, LOCVOTSEQ: props.data.LOCVOTSEQ, LOCVOTCON: props.data.LOCVOTCON }];
+    }
+    emit("update:selectedValues", updatedValues);
+};
 </script>
 
 <style>
diff --git a/src/components/voteboard/voteCardList.vue b/src/components/voteboard/voteCardList.vue
index acdb01c..d527537 100644
--- a/src/components/voteboard/voteCardList.vue
+++ b/src/components/voteboard/voteCardList.vue
@@ -1,13 +1,33 @@
 <template>
   <div>
-    <card />
+    <card
+    @addContents="addContents"
+    @checkedNames="checkedNames"
+    v-for="(item, index) in data"
+    :key="index"
+    :data="item" />
   </div>
 </template>
 
 <script setup>
 import card from '@c/voteboard/voteCard.vue'
+const props = defineProps({
+    data: {
+        type: Array,
+        required: true,
+    },
+});
+const emit = defineEmits(['addContents','checkedNames']);
+const addContents = (itemList ,voteId) =>{
+    emit('addContents',itemList ,voteId);
+}
+const checkedNames = (numList) =>{
+    emit('checkedNames',numList);
+}
+
 </script>
 
+
 <style scoped>
 
 </style>
diff --git a/src/components/voteboard/voteCompleteUserList.vue b/src/components/voteboard/voteCompleteUserList.vue
index e7d3203..d754513 100644
--- a/src/components/voteboard/voteCompleteUserList.vue
+++ b/src/components/voteboard/voteCompleteUserList.vue
@@ -1,11 +1,10 @@
 <template>
-<div class="d-flex align-items-center">
-    <i class='bx bxs-user-check link-info'></i>
+<div class="d-flex align-items-center ">
     <ul class="list-group list-group-flush">
         <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
         <div class="d-flex flex-wrap align-items-center">
             <ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
-                <vote-complete-user-list-card />
+                <vote-complete-user-list-card :data="data"/>
             </ul>
         </div>
         </li>
@@ -15,7 +14,12 @@
 
 <script setup>
 import voteCompleteUserListCard from '@c/voteboard/voteCompleteUserListCard.vue';
-
+const props = defineProps({
+    data: {
+        type: Object,
+        required: true,
+    },
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/voteboard/voteCompleteUserListCard.vue b/src/components/voteboard/voteCompleteUserListCard.vue
index b4200bd..08bcb51 100644
--- a/src/components/voteboard/voteCompleteUserListCard.vue
+++ b/src/components/voteboard/voteCompleteUserListCard.vue
@@ -1,10 +1,45 @@
 <template>
-    <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar pull-up" aria-label="Vinnie Mostowy" data-bs-original-title="Vinnie Mostowy">
-        <img class="rounded-circle" src="/img/avatars/1.png" alt="Avatar">
+    <li
+    data-bs-toggle="tooltip"
+    data-popup="tooltip-custom"
+    data-bs-placement="top"
+    class="avatar pull-up"
+    :aria-label="data.MEMBERSEQ"
+    :data-bs-original-title="getTooltipTitle(data)">
+        <img
+            class="rounded-circle user-avatar border border-3"
+            :src="`${baseUrl}upload/img/profile/${data.MEMBERPRF}`"
+            :style="`border-color: ${data.usercolor} !important;`"
+            alt="user"
+        />
     </li>
 </template>
 
 <script setup>
+import { useUserInfoStore } from '@s/useUserInfoStore';
+import $api from '@api';
+import { nextTick, onMounted } from 'vue';
+
+const props = defineProps({
+    data: {
+        type: Object,
+        required: true,
+    },
+});
+const userStore = useUserInfoStore();
+const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
+
+onMounted(async () => {
+    nextTick(() => {
+        const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+        tooltips.forEach((tooltip) => {
+        new bootstrap.Tooltip(tooltip);
+        });
+    });
+});
+const getTooltipTitle = (user) => {
+    return user.MEMBERSEQ === userStore.user.id ? '나' : user.MEMBERNAM;
+};
 
 </script>
 
diff --git a/src/components/voteboard/voteInCompleteUserList.vue b/src/components/voteboard/voteInCompleteUserList.vue
index ec2c887..bf936d6 100644
--- a/src/components/voteboard/voteInCompleteUserList.vue
+++ b/src/components/voteboard/voteInCompleteUserList.vue
@@ -1,11 +1,10 @@
 <template>
-    <div class="d-flex align-items-center">
-        <i class='bx bxs-user-x link-danger'></i>
+    <div class="d-flex align-items-center ">
         <ul class="list-group list-group-flush">
             <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
             <div class="d-flex flex-wrap align-items-center">
                 <ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
-                    <vote-in-complete-user-list-card />
+                    <vote-in-complete-user-list-card :data="data" />
                 </ul>
             </div>
             </li>
@@ -15,7 +14,12 @@
 
 <script setup>
 import voteInCompleteUserListCard from '@c/voteboard/voteInCompleteUserListCard.vue';
-
+const props = defineProps({
+    data: {
+        type: Object,
+        required: true,
+    },
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/voteboard/voteInCompleteUserListCard.vue b/src/components/voteboard/voteInCompleteUserListCard.vue
index 1b7ce7a..8f9bf27 100644
--- a/src/components/voteboard/voteInCompleteUserListCard.vue
+++ b/src/components/voteboard/voteInCompleteUserListCard.vue
@@ -1,10 +1,45 @@
 <template>
-    <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar pull-up" aria-label="Vinnie Mostowy" data-bs-original-title="Vinnie Mostowy">
-        <img class="rounded-circle" src="/img/avatars/3.png" alt="Avatar">
+    <li
+    data-bs-toggle="tooltip"
+    data-popup="tooltip-custom"
+    data-bs-placement="top"
+    class="avatar pull-up"
+    :aria-label="data.MEMBERSEQ"
+    :data-bs-original-title="getTooltipTitle(data)">
+    <img
+        class="rounded-circle user-avatar border border-3"
+        :src="`${baseUrl}upload/img/profile/${data.MEMBERPRF}`"
+        :style="`border-color: ${data.usercolor} !important;`"
+        alt="user"
+    />
     </li>
 </template>
 
 <script setup>
+import { useUserInfoStore } from '@s/useUserInfoStore';
+import $api from '@api';
+import { nextTick, onMounted } from 'vue';
+
+const props = defineProps({
+    data: {
+        type: Object,
+        required: true,
+    },
+});
+const userStore = useUserInfoStore();
+const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
+
+onMounted(async () => {
+    nextTick(() => {
+        const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+        tooltips.forEach((tooltip) => {
+        new bootstrap.Tooltip(tooltip);
+        });
+    });
+});
+const getTooltipTitle = (user) => {
+    return user.MEMBERSEQ === userStore.user.id ? '나' : user.MEMBERNAM;
+};
 
 </script>
 
diff --git a/src/components/voteboard/voteLinkInput.vue b/src/components/voteboard/voteLinkInput.vue
new file mode 100644
index 0000000..ebe7332
--- /dev/null
+++ b/src/components/voteboard/voteLinkInput.vue
@@ -0,0 +1,80 @@
+<template>
+<div class="position-relative me-2">
+    <i class="bx bx-link-alt" @click="togglePopover"></i>
+    <!-- 링크 팝업 -->
+    <div
+    v-if="isPopoverVisible"
+    class="popover bs-popover-auto fade show d-flex align-items-center"
+    role="tooltip"
+    :style="popoverStyle"
+    >
+    <div class="popover-arrow"></div>
+    <input
+        v-model="link"
+        placeholder="URL을 입력해주세요"
+        class="form-control me-2 flex-grow-1"
+        style="min-width: 200px;"
+    />
+    <button type="button" class="btn btn-sm btn-primary ms-2" @click="saveLink">
+        등록
+    </button>
+    </div>
+    <!-- 등록된 링크 표시 -->
+    <div v-if="link" class="mt-1">
+    <a :href="formattedLink" target="_blank" rel="noopener noreferrer">{{ link }}</a>
+    </div>
+</div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+
+const props = defineProps({
+modelValue: String,
+});
+const emit = defineEmits(["update:modelValue"]);
+
+const isPopoverVisible = ref(false);
+const link = ref(props.modelValue || "");
+const popoverStyle = ref({});
+
+const formattedLink = computed(() => {
+    return link.value.startsWith("http") ? link.value : "http://" + link.value;
+});
+
+const togglePopover = (event) => {
+    const buttonRect = event.target.getBoundingClientRect();
+    const parentRect = event.target.parentElement.getBoundingClientRect();
+
+    popoverStyle.value = {
+        position: "absolute",
+        top: `${buttonRect.bottom - parentRect.top + 5}px`,
+        left: `${buttonRect.left - parentRect.left}px`,
+        zIndex: "1050",
+        display: "flex",
+        alignItems: "center",
+    };
+
+    isPopoverVisible.value = !isPopoverVisible.value;
+};
+
+const saveLink = () => {
+    emit("update:modelValue", link.value);
+    isPopoverVisible.value = false;
+};
+</script>
+
+<style scoped>
+.popover {
+    max-width: 300px;
+    border-radius: 6px;
+    padding: 5px;
+    }
+
+.popover-arrow {
+    position: absolute;
+    top: -5px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+</style>
diff --git a/src/components/voteboard/voteRevoteEnd.vue b/src/components/voteboard/voteRevoteEnd.vue
deleted file mode 100644
index fa64686..0000000
--- a/src/components/voteboard/voteRevoteEnd.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-    <div class="user-status">
-        <span class="badge badge-dot bg-warning"></span>
-            <small>소고기 </small>
-        <button class="btn btn-primary btn-sm">재투표</button>
-    </div>
-
-</template>
-
-<script setup>
-
-</script>
-
-<style>
-
-</style>
diff --git a/src/components/voteboard/voteUserList.vue b/src/components/voteboard/voteUserList.vue
index 556e6ae..c07e034 100644
--- a/src/components/voteboard/voteUserList.vue
+++ b/src/components/voteboard/voteUserList.vue
@@ -1,17 +1,42 @@
 <template>
-
-<div class="d-flex justify-content-between align-items-center">
+<div class="d-flex align-items-center">
     <!--투표한 사람 목록 -->
-    <vote-complete-user-list />
+    <div class="d-flex align-items-center gap-2">
+        <i class='bx bxs-user-check link-info'></i>
+        <vote-complete-user-list
+        v-for="(item, index) in voetedUsers"
+        :key="index"
+        :data="item"
+        />
+    </div>
     <!-- 투표안한 사람 목록 -->
-    <vote-in-complete-user-list />
+    <div class="d-flex align-items-center gap-2 ms-auto">
+        <i class='bx bxs-user-x link-danger'></i>
+        <vote-in-complete-user-list
+        v-for="(item, index) in noVoetedUsers"
+        :key="index"
+        :data="item"/>
+    </div>
 </div>
 </template>
 
 <script setup>
 import voteCompleteUserList from '@c/voteboard/voteCompleteUserList.vue';
 import voteInCompleteUserList from '@c/voteboard/voteInCompleteUserList.vue';
+import { computed } from 'vue';
 
+const props = defineProps({
+    data: {
+        type: Array,
+        required: true,
+    },
+});
+const voetedUsers = computed(()=>{
+    return props.data.filter(user => user.voted === 1);
+})
+const noVoetedUsers = computed(()=>{
+    return props.data.filter(user => user.voted === 0);
+})
 </script>
 
 <style scoped>
diff --git a/src/stores/voteCommon.js b/src/stores/voteCommon.js
new file mode 100644
index 0000000..3d9e0ee
--- /dev/null
+++ b/src/stores/voteCommon.js
@@ -0,0 +1,26 @@
+// voteCommon.js
+import { ref } from "vue";
+
+export function voteCommon(isVOte= false) {
+    const itemList = ref(isVOte ? [] : [{ content: "", url: "" }, { content: "", url: "" }]);
+
+    const addItem = () => {
+        if (itemList.value.length < 10) {
+            itemList.value.push({ content: "", url: "" });
+        }
+    };
+
+    const removeItem = (index) => {
+        if (!isVOte && index >= 2) {
+            itemList.value.splice(index, 1);
+        } else if (isVOte && itemList.value.length > 0) {
+            itemList.value.splice(index, 1);
+        }
+    };
+
+    return {
+        itemList,
+        addItem,
+        removeItem,
+    };
+}
diff --git a/src/views/voteboard/voteBoardList.vue b/src/views/voteboard/voteBoardList.vue
index 20a3434..d798e42 100644
--- a/src/views/voteboard/voteBoardList.vue
+++ b/src/views/voteboard/voteBoardList.vue
@@ -4,7 +4,6 @@
     <div class="mt-8">
         <!-- 투표 작성  -->
         <router-link to="/voteboard/write"><WriteBtn /></router-link>
-
         <!-- 내가한 투표 보기  -->
         <div class="d-flex align-items-center">
         <div class="form-check me-3">
@@ -14,50 +13,87 @@
         <!-- 투표마감/투표중  셀렉트 -->
         <FormSelect class="col-3" name="cate" :isLabel="false" title="투표상태" :data="categoryList" @update:data="category = $event" />
         </div>
-
-        <!-- <QEditor @update:data="content = $event" @update:imageUrls="imageUrls = $event"  :is-alert="true" />
-            <button type="button" class="btn btn-primary ms-1" @click="registerContent"><i class="bx bx-check"></i></button> -->
-
         <!-- 투표리스트 -->
-        <vote-list />
+        <vote-list
+        :data="voteListCardData"
+        @addContents="addContents"
+        @checkedNames="checkedNames"/>
         </div>
-
     </div>
-        <!-- <div class="mt-8">
-            <pagination />
-        </div> -->
+        <!-- 페이지네이션 -->
+        <div class="row g-3">
+            <div class="mt-8">
+                <Pagination
+                    v-if="PageData.pages"
+                    v-bind="PageData"
+                    @update:currentPage="handlePageChange"
+                />
+            </div>
+        </div>
 </div>
 </template>
 <script setup>
 import { getCurrentInstance, onMounted, ref } from 'vue';
-// import Pagination from '@/components/pagination/Pagination.vue';
+import Pagination from '@c/pagination/Pagination.vue';
 import router from '@/router';
 import FormSelect from '@c/input/FormSelect.vue';
 import { useToastStore } from '@s/toastStore';
 import QEditor from '@c/editor/QEditor.vue';
 import $api from '@api';
-import BoardCard from '@c/list/BoardCard.vue';
 import Quill from 'quill';
 import WriteBtn from '@c/button/WriteBtn.vue';
 import voteList from '@c/voteboard/voteCardList.vue';
-
 const toastStore = useToastStore();
 const category = ref('0');
 const categoryList = ['전체','투표마감', '투표중'];
-const boardList = ref([]);
+const PageData = ref([]);
+const voteListCardData = ref([]);
 const titleAlert = ref(false);
 const addContent = ref('');
-
-onMounted(()=>{
-    getBoardList();
-})
-const getBoardList = () =>{
-    $api.get('worddict/getWordList').then((res)=>{
-    boardList.value = res.data.data.data;
-})
+const currentPage = ref(1);
+onMounted(async () => {
+    getvoteList();
+});
+//투표목록
+const getvoteList = async () => {
+    console.log('pagee',currentPage.value)
+        const response = await $api.get('vote/getVoteList',{
+            params: { page: currentPage.value }
+        });
+        if (response.data.status === "OK") {
+            PageData.value = response.data.data;
+            voteListCardData.value = response.data.data.list;
+        }
+    };
+//투표항목추가
+const addContents = (itemList, voteId) =>{
+    $api.post('vote/insertWord',{
+            itemList :itemList
+            ,voteId :voteId
+        }).then((res)=>{
+            if(res.data.status === 'OK'){
+                toastStore.onToast('항목이 등록되었습니다.', 's');
+                getvoteList();
+            }
+        })
+}
+//투표하기
+const checkedNames = (numList) =>{
+    $api.post('vote/insertCheckedNums',{
+        checkedList :numList
+        ,votenum : numList[0].LOCVOTSEQ
+        }).then((res)=>{
+            if(res.data.status === 'OK'){
+                toastStore.onToast('투표가 완료되었습니다.', 's');
+                getvoteList();
+            }
+        })
 }
 
-
+// 페이지 변경
+const handlePageChange = async (page) => {
+    currentPage.value=page;
+    await getvoteList();
+};
 </script>
-
 <style></style>
diff --git a/src/views/voteboard/voteboardWrite.vue b/src/views/voteboard/voteboardWrite.vue
index bb6f3d5..7dad489 100644
--- a/src/views/voteboard/voteboardWrite.vue
+++ b/src/views/voteboard/voteboardWrite.vue
@@ -1,39 +1,194 @@
 <template>
-    <div class="container-xxl flex-grow-1 container-p-y">
-        <div class="card mb-6">
-            <div class="card-body">
-                <div class="user-list-container">
-                <ul class="timeline mb-1">
-                <li class="timeline-item timeline-item-transparent">
-                    <span class="timeline-point timeline-point-info"></span>
-                    <div class="timeline-event">
-                    <div class="timeline-header mb-2">
-                        <h6 class="mb-0">투표 인원</h6>
-                    </div>
-                    <UserList @user-list-update="handleUserListUpdate" />
+<div class="container-xxl flex-grow-1 container-p-y">
+    <div class="card mb-6">
+    <div class="card-body">
+        <div class="user-list-container">
+        <ul class="timeline mb-1">
+            <li class="timeline-item timeline-item-transparent">
+            <span class="timeline-point timeline-point-info"></span>
+            <div class="timeline-event">
+                <div class="timeline-header mb-2">
+                <h6 class="mb-0">투표 인원</h6>
+                </div>
+                <UserList @userListInfo="userSet" @user-list-update="handleUserListUpdate" class="mb-3" />
+                <div v-if="UserListAlert" class="red">2명이상 선택해주세요 </div>
+                <form-input
+                title="제목"
+                name="title"
+                :is-essential="true"
+                :is-alert="titleAlert"
+                v-model="title"
+                />
+                <form-input
+                title="종료날짜"
+                name="endDate"
+                type="date"
+                :is-essential="true"
+                :is-alert="endDateAlert"
+                v-model="endDate"
+                />
+                <!-- 항목 입력 반복 -->
+                <div v-for="(item, index) in itemList" :key="index" class="d-flex align-items-center mb-2 position-relative">
+                <form-input
+                    class="flex-grow-1 me-2"
+                    :title="'항목 ' + (index + 1)"
+                    :name="'content' + index"
+                    :is-essential="index < 2"
+                    :is-alert="contentAlerts[index]"
+                    v-model="item.content"
+                />
+                <link-input v-model="item.url" />
+                <delete-btn @click="removeItem(index)" :disabled="index < 2" class="ms-2" />
+                </div>
+                <plus-btn @click="addItem" :disabled="itemList.length >= 10" class="mb-3" />
+                <div>
+                <label class="list-group-item">
+                    <input
+                    class="form-check-input me-1"
+                    type="checkbox"
+                    id="addvoteitem"
+                    v-model="addvoteitem"
+                />
+                    항목 추가여부
+                </label>
+                <label class="list-group-item">
+                    <input
+                    class="form-check-input me-1"
+                    type="checkbox"
+                    id="addvotemulti"
+                    v-model="addvotemulti"
+                    />
+                    다중투표 허용여부
+                </label>
+                </div>
+            </div>
+            </li>
+        </ul>
 
-                    </div>
-                </li>
-                </ul>
-            </div>
-            </div>
+        <div class="mb-4 d-flex justify-content-end">
+            <button type="button" class="btn btn-info" @click="goList">
+            <i class="bx bx-left-arrow-alt"></i>
+            </button>
+            <button type="button" class="btn btn-primary ms-1" @click="saveValid">
+            <i class="bx bx-check"></i>
+            </button>
+        </div>
         </div>
     </div>
+    </div>
+</div>
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
+import { ref, toRaw } from "vue";
 import UserList from "@c/user/UserList.vue";
+import formInput from "@c/input/FormInput.vue";
+import { useToastStore } from "@s/toastStore";
+import PlusBtn from "@c/button/PlusBtn.vue";
+import DeleteBtn from "@c/button/DeleteBtn.vue";
+import $api from "@api";
+import router from "@/router";
+import LinkInput from "@/components/voteboard/voteLinkInput.vue";
+import { voteCommon } from '@s/voteCommon';
 
-const activeUsers = ref([]); // 활성화된 사용자 목록
-const disabledUsers = ref([]); // 비활성화된 사용자 목록
+const toastStore = useToastStore();
+const activeUserList = ref([]);
+const disabledUsers = ref([]);
+const titleAlert = ref(false);
+const endDateAlert = ref(false);
+const contentAlerts = ref([false, false]);
+const UserListAlert = ref(false);
+const title = ref("");
+const endDate = ref("");
+const { itemList, addItem, removeItem } = voteCommon();
 
-// UserList에서 받은 데이터를 처리
-const handleUserListUpdate = ({ activeUsers, disabledUsers }) => {
-  activeUsers.value = activeUsers;
-  disabledUsers.value = disabledUsers;
-  console.log('활성화목록>>',activeUsers)
-  console.log('비활성목록>>',disabledUsers)
+const userListTotal = ref(0);
+const addvoteitem = ref(false);
+const addvotemulti= ref(false);
+
+const userSet = ({ userList, userTotal }) => {
+    activeUserList.value = userList;
+    userListTotal.value = userTotal;
+};
+
+const handleUserListUpdate = ({ activeUsers, disabledUsers: updatedDisabledUsers }) => {
+    activeUserList.value = activeUsers;
+    disabledUsers.value = updatedDisabledUsers;
+    userListTotal.value = activeUsers.length;
+};
+
+const saveValid = () => {
+    let valid = true;
+
+    if (title.value === '') {
+        titleAlert.value = true;
+        valid = false;
+    } else {
+        titleAlert.value = false;
+    }
+
+    if (endDate.value === '') {
+        endDateAlert.value = true;
+        valid = false;
+    } else {
+        endDateAlert.value = false;
+    }
+
+    if (itemList.value[0].content === '') {
+        contentAlerts.value[0] = true;
+        valid = false;
+    } else {
+        contentAlerts.value[0] = false;
+    }
+
+    if (itemList.value[1].content === '') {
+        contentAlerts.value[1] = true;
+        valid = false;
+    } else {
+        contentAlerts.value[1] = false;
+    }
+
+    if (activeUserList.value.length < 2) {
+        UserListAlert.value = true;
+        valid = false;
+    } else {
+        UserListAlert.value = false;
+    }
+
+    if (valid) {
+        saveVote();
+    }
+};
+
+const saveVote = () => {
+    console.log('activeUserList',activeUserList.value)
+    const unwrappedUserList = toRaw(activeUserList.value);
+    const listId = unwrappedUserList.map(item => ({
+        id: item.MEMBERSEQ,
+    }));
+    $api.post('vote/insertWord',{
+        addvoteIs       :addvoteitem ? '1' :'0'
+        ,votemMltiIs    :addvotemulti ? '1' :'0'
+        ,title          :title.value
+        ,endDate        :endDate.value
+        ,itemList       :itemList.value
+        ,activeUserList :listId
+    }).then((res)=>{
+        if(res.data.status == 'OK'){
+            toastStore.onToast('투표가 등록되었습니다.', 's');
+            goList();
+        }
+    })
+};
+
+const goList = () => {
+    router.push('/voteboard');
 };
 
 </script>
+
+<style scoped>
+.item-input {
+max-width: 200px;
+}
+</style>

From 922b7e090411ce84400dec74584154ff021022c3 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Tue, 18 Feb 2025 13:19:21 +0900
Subject: [PATCH 23/23] =?UTF-8?q?=E3=85=87=E3=85=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardComment.vue         |   2 +-
 ...ardComentArea.vue => BoardCommentArea.vue} |   0
 src/components/modal/VacationGrantModal.vue   |  56 +++-----
 src/components/modal/VacationModal.vue        | 136 +++++++++---------
 src/views/board/BoardView.vue                 |   2 +-
 5 files changed, 95 insertions(+), 101 deletions(-)
 rename src/components/board/{BoardComentArea.vue => BoardCommentArea.vue} (100%)

diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue
index 0e1fbef..07e2327 100644
--- a/src/components/board/BoardComment.vue
+++ b/src/components/board/BoardComment.vue
@@ -68,7 +68,7 @@
 <script setup>
 import { defineProps, defineEmits, ref } from 'vue';
 import BoardProfile from './BoardProfile.vue';
-import BoardCommentArea from './BoardComentArea.vue';
+import BoardCommentArea from './BoardCommentArea.vue';
 import PlusButton from '../button/PlusBtn.vue';
 
 const props = defineProps({
diff --git a/src/components/board/BoardComentArea.vue b/src/components/board/BoardCommentArea.vue
similarity index 100%
rename from src/components/board/BoardComentArea.vue
rename to src/components/board/BoardCommentArea.vue
diff --git a/src/components/modal/VacationGrantModal.vue b/src/components/modal/VacationGrantModal.vue
index c6e1476..37269ff 100644
--- a/src/components/modal/VacationGrantModal.vue
+++ b/src/components/modal/VacationGrantModal.vue
@@ -8,13 +8,13 @@
           <p>해당 직원에게 부여할 연차 개수를 선택하세요. (남은 개수: {{ availableQuota }}개)</p>
 
           <div class="vacation-control">
-            <button @click="decreaseCount" :disabled="grantCount <= 0" class="count-btn">-</button>
+            <button @click="decreaseCount" :disabled="grantCount < 2" class="count-btn">-</button>
             <span class="grant-count">{{ grantCount }}</span>
             <button @click="increaseCount" :disabled="grantCount >= availableQuota" class="count-btn">+</button>
           </div>
 
           <button class="gift-btn" @click="saveVacationGrant" :disabled="grantCount === 0">
-            <i class="bx bx-gift"></i> <!-- 선물상자 아이콘 -->
+            <i class="bx bx-gift"></i>
           </button>
         </div>
       </div>
@@ -26,65 +26,60 @@
   import axios from "@api";
 
   const props = defineProps({
-    isOpen: Boolean, // 모달 상태
-    targetUser: Object, // 선택한 사용자 정보
+    isOpen: Boolean,
+    targetUser: Object,
   });
 
   const emit = defineEmits(["close", "updateVacation"]);
   const grantCount = ref(0);
-  const maxQuota = 2; // 1년에 보낼 수 있는 최대 개수
-  const sentCount = ref(0); // 현재까지 보낸 개수
-  const availableQuota = ref(2); // 남은 개수
+  const maxQuota = 2;
+  const sentCount = ref(0);
+  const availableQuota = ref(2);
 
-  // ✅ 해당 사용자에게 이미 보낸 연차 개수 조회
   const fetchSentVacationCount = async () => {
     try {
       const payload = { receiverId: props.targetUser.MEMBERSEQ };
-
-      const response = await axios.get(`vacation/sent`,{ params: payload });
-      console.log(response.data.data[0].count)
-        sentCount.value = response.data.data[0].count || 0; // 이미 보낸 개수
-        availableQuota.value = Math.max(maxQuota - sentCount.value, 0); // 남은 개수 (0 이하 방지)
-        console.log(`✅ 보낸 개수: ${sentCount.value}, 남은 개수: ${availableQuota.value}`);
+      const response = await axios.get("vacation/sent", { params: payload });
+      sentCount.value = response.data.data[0].count || 0;
+      availableQuota.value = Math.max(maxQuota - sentCount.value, 0);
+      grantCount.value = availableQuota.value; // ✅ 남은 개수로 기본값 설정
     } catch (error) {
       console.error("🚨 연차 전송 기록 조회 실패:", error);
       availableQuota.value = maxQuota;
+      grantCount.value = maxQuota; // 기본값 설정
     }
   };
 
-  // ✅ 연차 개수 증가
   const increaseCount = () => {
     if (grantCount.value < availableQuota.value) {
       grantCount.value++;
     }
   };
 
-  // ✅ 연차 개수 감소
   const decreaseCount = () => {
     if (grantCount.value > 0) {
       grantCount.value--;
     }
   };
 
-  // ✅ 연차 부여 저장 요청 (saveVacations API 호출)
   const saveVacationGrant = async () => {
     try {
       const payload = [
         {
-          date: new Date().toISOString().split("T")[0], // 오늘 날짜
-          type: "700103", // 연차 코드
-          senderId: props.targetUser.senderId, // 보내는 사람 ID
-          receiverId: props.targetUser.MEMBERSEQ, // 받는 사람 ID
-          count: grantCount.value, // 부여 개수
+          date: new Date().toISOString().split("T")[0],
+          type: "700103",
+          senderId: props.targetUser.senderId,
+          receiverId: props.targetUser.MEMBERSEQ,
+          count: grantCount.value,
         },
       ];
 
-      const response = await axios.post("vacation/save", payload);
-
+      const response = await axios.post("vacation", payload);
+        console.log(response)
       if (response.data && response.data.status === "OK") {
         alert("✅ 연차가 부여되었습니다.");
-        await fetchSentVacationCount(); // ✅ 보낸 개수 업데이트
-        emit("updateVacation"); // ✅ 연차 정보 갱신 요청
+        await fetchSentVacationCount();
+        emit("updateVacation");
         closeModal();
       } else {
         alert("🚨 연차 추가 중 오류가 발생했습니다.");
@@ -95,36 +90,30 @@
     }
   };
 
-  // ✅ 모달 닫기
   const closeModal = () => {
     emit("close");
   };
 
-  // ✅ 모달이 열릴 때 초기 값 설정 및 보낸 개수 조회
   watch(
     () => props.isOpen,
     async (newVal) => {
       if (newVal && props.targetUser && props.targetUser.MEMBERSEQ) {
         console.log("🟢 모달이 열렸습니다. 데이터를 로드합니다.");
-        grantCount.value = 0; // 초기화
-        await fetchSentVacationCount(); // 보낸 개수 불러오기
+        await fetchSentVacationCount();
       }
     }
   );
 
-  // ✅ targetUser가 변경될 때도 fetchSentVacationCount 호출
   watch(
     () => props.targetUser,
     async (newUser) => {
       if (newUser && newUser.MEMBERSEQ) {
-        console.log(`🔄 새로운 대상(${newUser.name})이 선택되었습니다.`);
         await fetchSentVacationCount();
       }
     },
     { deep: true }
   );
 
-  // ✅ 컴포넌트가 마운트될 때도 보낸 개수 불러오기
   onMounted(async () => {
     if (props.isOpen && props.targetUser && props.targetUser.MEMBERSEQ) {
       await fetchSentVacationCount();
@@ -132,6 +121,7 @@
   });
   </script>
 
+
   <style scoped>
 
   /* 모달 본문 */
diff --git a/src/components/modal/VacationModal.vue b/src/components/modal/VacationModal.vue
index 3a183c3..d60da1a 100644
--- a/src/components/modal/VacationModal.vue
+++ b/src/components/modal/VacationModal.vue
@@ -1,81 +1,85 @@
 <template>
-<div v-if="isOpen" class="modal-dialog" @click.self="closeModal">
-    <div class="modal-content modal-scroll">
-    <h5 class="modal-title">📅 내 연차 사용 내역</h5>
-    <button class="close-btn" @click="closeModal">✖</button>
+    <div v-if="isOpen" class="modal-dialog" @click.self="closeModal">
+        <div class="modal-content modal-scroll">
+        <h5 class="modal-title">📅 내 연차 사용 내역</h5>
+        <button class="close-btn" @click="closeModal">✖</button>
 
-    <!-- 연차 사용 및 받은 연차 리스트 -->
-    <div class="modal-body" v-if="mergedVacations.length > 0">
-        <ol class="vacation-list">
-        <li
-            v-for="(vacation, index) in mergedVacations"
-            :key="index"
-            class="vacation-item"
-        >
-            <span v-if="vacation.type === 'used'" class="vacation-index">
-            {{ totalUsedVacationCount - usedVacations.findIndex(v => v.date === vacation.date) }})
-            </span>
-            <span :class="vacation.type === 'used' ? 'minus-symbol' : 'plus-symbol'">
-            {{ vacation.type === 'used' ? '-' : '+' }}
-            </span>
-            <span :style="{ color: userColors[vacation.senderId || vacation.receiverId] || '#000' }"
-                class="vacation-date">{{ formatDate(vacation.date) }}</span>
-        </li>
-        </ol>
+        <!-- 연차 사용 및 받은 연차 리스트 -->
+        <div class="modal-body" v-if="mergedVacations.length > 0">
+            <ol class="vacation-list">
+            <li
+                v-for="(vacation, index) in mergedVacations"
+                :key="index"
+                class="vacation-item"
+            >
+                <span v-if="vacation.type === 'used'" class="vacation-index">
+                {{ totalUsedVacationCount - usedVacations.findIndex(v => v.date === vacation.date) }} )
+                </span>
+                <span :class="vacation.type === 'used' ? 'minus-symbol' : 'plus-symbol'">
+                {{ vacation.type === 'used' ? '-' : '+' }}
+                </span>
+                <span :style="{ color: userColors[vacation.senderId || vacation.receiverId] || '#000' }"
+                    class="vacation-date">{{ formatDate(vacation.date) }}</span>
+            </li>
+            </ol>
+        </div>
+
+        <!-- 연차 데이터 없음 -->
+        <p v-if="mergedVacations.length === 0" class="no-data">
+            🚫 사용한 연차가 없습니다.
+        </p>
+        </div>
     </div>
+    </template>
 
-    <!-- 연차 데이터 없음 -->
-    <p v-if="mergedVacations.length === 0" class="no-data">
-        🚫 사용한 연차가 없습니다.
-    </p>
-    </div>
-</div>
-</template>
+    <script setup>
+    import { defineProps, defineEmits, computed } from "vue";
 
-<script setup>
-import { defineProps, defineEmits, computed } from "vue";
+    const props = defineProps({
+    isOpen: Boolean,
+    myVacations: {
+        type: Array,
+        default: () => [],
+    },
+    receivedVacations: {
+        type: Array,
+        default: () => [],
+    },
+    userColors: {
+        type: Object,
+        default: () => ({}),
+    },
+    });
 
-const props = defineProps({
-isOpen: Boolean,
-myVacations: {
-    type: Array,
-    default: () => [],
-},
-receivedVacations: {
-    type: Array,
-    default: () => [],
-},
-userColors: {
-    type: Object,
-    default: () => ({}),
-},
-});
+    const emit = defineEmits(["close"]);
 
-const emit = defineEmits(["close"]);
+    // ✅ 사용한 연차 개수
+    const totalUsedVacationCount = computed(() => props.myVacations.length);
 
-// ✅ 사용한 연차 개수
-const totalUsedVacationCount = computed(() => props.myVacations.length);
+    // ✅ 사용한 연차 + 받은 연차 통합 후 내림차순 정렬
+    const usedVacations = computed(() => props.myVacations.map(v => ({ ...v, type: "used" })));
+    const receivedVacations = computed(() => props.receivedVacations
+        .filter(v => !v.senderId) // ✅ 보낸 사람이 있는 경우 리스트에서 제외
+        .map(v => ({ ...v, type: "received" }))
+    );
 
-// ✅ 사용한 연차 + 받은 연차 통합 후 내림차순 정렬
-const usedVacations = computed(() => props.myVacations.map(v => ({ ...v, type: "used" })));
-const receivedVacations = computed(() => props.receivedVacations.map(v => ({ ...v, type: "received" })));
+    const mergedVacations = computed(() => {
+    return [...usedVacations.value, ...receivedVacations.value].sort(
+        (a, b) => new Date(b.date) - new Date(a.date)
+    );
+    });
 
-const mergedVacations = computed(() => {
-return [...usedVacations.value, ...receivedVacations.value].sort(
-    (a, b) => new Date(b.date) - new Date(a.date)
-);
-});
+    // ✅ 날짜 형식 변환 (YYYY-MM-DD)
+    const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    return date.toISOString().split("T")[0]; // YYYY-MM-DD 형식
+    };
 
-// ✅ 날짜 형식 변환 (YYYY-MM-DD)
-const formatDate = (dateString) => {
-const date = new Date(dateString);
-return date.toISOString().split("T")[0]; // YYYY-MM-DD 형식
-};
+    const closeModal = () => {
+    emit("close");
+    };
+    </script>
 
-const closeModal = () => {
-emit("close");
-};
-</script>
 
 <style scoped>
 /* 모달 스타일 */
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index 0eec1df..b6c68f4 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -103,7 +103,7 @@
 </template>
 
 <script setup>
-import BoardCommentArea from '@c/board/BoardComentArea.vue';
+import BoardCommentArea from '@c/board/BoardCommentArea.vue';
 import BoardProfile from '@c/board/BoardProfile.vue';
 import BoardCommentList from '@c/board/BoardCommentList.vue';
 import BoardRecommendBtn from '@c/button/BoardRecommendBtn.vue';