용어집 css, 로직변경

src/components/button/EditBtn.vue

@@ -3,10 +3,8 @@
         <i :class="buttonClass"></i>
     </button>
 </template>
-
 <script setup>
-    import { ref, watch, defineProps } from 'vue';
-
+    import { ref, watch, defineProps, defineEmits, watchEffect } from 'vue';
     const props = defineProps({
         isToggleEnabled: {
             type: Boolean,
@@ -17,24 +15,20 @@
             required: false,
         },
     });
-
+    const emit = defineEmits(["click"]);
     const buttonClass = ref('bx bx-edit-alt');
-
-    watch(
-        () => props.isActive,
-        newVal => {
-            buttonClass.value = newVal ? 'bx bx-x' : 'bx bx-edit-alt';
-        },
-    );
-
-    const toggleText = () => {
+    watchEffect(() => {
+        buttonClass.value = props.isActive ? 'bx bx-x' : 'bx bx-edit-alt';
+    });
+    const toggleText = (event) => {
+        // 이벤트 객체를 매개변수로 받아옵니다
         if (props.isToggleEnabled) {
             buttonClass.value = buttonClass.value === 'bx bx-edit-alt' ? 'bx bx-x' : 'bx bx-edit-alt';
         }
+        emit("click", event); // 이벤트 객체를 같이 전달
     };
     const resetButton = () => {
         buttonClass.value = 'bx bx-edit-alt';
     };
-
     defineExpose({ resetButton });
 </script>

src/components/wordDict/DictCard.vue

@@ -10,13 +10,20 @@
             :titleValue="item.WRDDICTTL"
             :contentValue="item.WRDDICCON"
             :isDisabled="true"
+            :showEditBtn="true"
+            @toggleEdit="toggleEdit"
             />
         <div v-else>
-            <div class="d-flex align-ite-center">
-                <div class="w-100 d-flex align-items-center">
+            <div class="d-flex align-items-center justify-content-between">
+                <div class="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
+                    @click="toggleEdit"
+                    :isToggleEnabled="true"
+                    :isActive="writeStore.isItemActive(item.WRDDICSEQ)"
+                />
             </div>
             <p class="mt-5 dict-content-wrap" v-html="$common.contentToHtml(item.WRDDICCON)"></p>
             <div class="d-flex align-items-start">
@@ -55,12 +62,6 @@
                     </div>
                 </div>
             </div>
-
-        </div>
-
-        <div class="edit-btn">
-            <EditBtn ref="writeButton" @click="writeStore.toggleItem(item.WRDDICSEQ)" :isToggleEnabled="true"
-            :isActive="writeStore.activeItemId === item.WRDDICSEQ"/>
         </div>
     </li>
 </template>
@@ -68,7 +69,7 @@
 <script setup>
 import axios from "@api";
 import { useToastStore } from '@s/toastStore';
-import { getCurrentInstance, ref } from 'vue';
+import { getCurrentInstance, nextTick, ref } from 'vue';
 import EditBtn from '@/components/button/EditBtn.vue';
 import $api from '@api';
 import DictWrite from './DictWrite.vue';
@@ -149,11 +150,10 @@ const setDefaultImage = (event) => {
     event.target.src = defaultProfile;
 };
 
-
-// 체크 상태 변경 시 부모로 전달
-const toggleCheck = (event) => {
-    emit('updateChecked', event.target.checked, props.item.WRDDICSEQ, event.target.name);
+const toggleEdit = async () => {
+    writeStore.toggleItem(props.item.WRDDICSEQ);
 };
+
 </script>
 
 <style scoped>

src/components/wordDict/DictWrite.vue

@@ -1,7 +1,6 @@
 <template>
     <div v-if="dataList.length > 0" >
         <FormSelect
-            class="me-5"
             name="cate"
             title="카테고리"
             :data="dataList"
@@ -13,15 +12,21 @@
             :is-btn="true"
         >
         <template v-slot:append>
-            <div v-if="!isDisabled">
-                <PlusBtn @click="toggleInput"/>
+            <div>
+                <PlusBtn v-if="!showInput && !isDisabled" @click="toggleInput"/>
+                <EditBtn
+                        v-if="showEditBtn"
+                        @click="$emit('toggleEdit')"
+                        :isToggleEnabled="true"
+                        :isActive="writeStore.isItemActive(NumValue)"
+                    />
             </div>
         </template>
         </FormSelect>
     </div>
     <div v-if="dataList.length === 0 || showInput">
         <FormInput
-            class="me-5 justify-content-end"
+            class="justify-content-end"
             ref="categoryInputRef"
             title="새 카테고리"
             :isLabel="dataList.length === 0 ?true : false"
@@ -32,7 +37,7 @@
 
         />
     </div>
-        <FormInput class="me-5"
+        <FormInput
             title="용어"
             type="text"
             name="word"
@@ -60,8 +65,12 @@ import QEditor from '@/components/editor/QEditor.vue';
 import FormInput from '@/components/input/FormInput.vue';
 import FormSelect from '@/components/input/FormSelect.vue';
 import PlusBtn from '../button/PlusBtn.vue';
+import EditBtn from '../button/EditBtn.vue';
+import { useWriteVisibleStore } from '@s/writeVisible';
 
-const emit = defineEmits(['close','addCategory','addWord']);
+const writeStore = useWriteVisibleStore();
+
+const emit = defineEmits(['close','addCategory','addWord', 'toggleEdit']);
 
 //용어제목
 const wordTitle = ref('');
@@ -110,6 +119,10 @@ const props = defineProps({
     isDisabled: {
         type: Boolean,
         default: false
+    },
+    showEditBtn: {
+        type: Boolean,
+        default: false
     }
 });
 

src/views/wordDict/wordDict.vue

@@ -27,11 +27,10 @@
                 <!-- 용어 리스트 -->
                 <div>
                     <!-- 에러 메시지 -->
-                    <div v-if="error" class="error">{{ error }}</div>
+                    <div v-if="error" class="fw-bold text-danger">{{ error }}</div>
                     <!-- 단어 목록 -->
                     <ul v-if="total > 0" class="ms-3 list-unstyled">
                         <DictCard
-                            class="DictCard"
                             v-for="item in wordList"
                             :key="item.WRDDICSEQ"
                             :item="item"
@@ -268,21 +267,13 @@
     width: 3rem;
     height: 3rem;
 }
-.error {
-    color: red;
-    font-weight: bold;
-}
+
 .sidebar {
     position: sticky;
     top: 5px;
     height: fit-content;
 }
 
-@media (max-width: 768px) {
-    .title {
-        margin-bottom: 0.5rem !important;
-    }
-}
 .DictCard {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));