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] =?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;
             }
         })
     }