localhost-front/src/components/wordDict/DictWrite.vue

<template>
    <div>
        <div class="row">
            <div class="col-10">
                <FormSelect
                    name="cate"
                    title="카테고리 선택"
                    :data="dataList"
                    :is-common="true"
                    @update:data="selectCategory = $event"
                    @change="onChange"
                    :value="formValue"
                    :disabled="isDisabled"
                />
            </div>
            <div class="col-2 btn-margin">
                <PlusBtn v-if="userStore.user.role == 'ROLE_ADMIN'" @click="toggleInput"/>
            </div>
        </div>

        <div class="row" v-if="showInput">
            <div class="col-10">
                <FormInput title="카테고리 입력" name="카테고리"  @update:modelValue="addCategory = $event" :is-alert="addCategoryAlert"/>
            </div>
            <div class="col-2 btn-margin">
                <button class="btn btn-primary btn-icon" @click="saveInput">
                    <i class="bx bx-check"></i>
                </button>
            </div>
        </div>
    </div>
    <div class="dict-w">
        <FormInput
            title="용어"
            type="text"
            name="word"
            :is-essential="true"
            :is-alert="wordTitleAlert"
            :modelValue="titleValue"
            @update:modelValue="wordTitle = $event"
            :disabled="isDisabled"
        />
    </div>
    <div>
        <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>
            </button>
        </div>
    </div>
</template>

<script setup>
import { defineProps, computed, ref, defineEmits } from 'vue';

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 { useUserInfoStore } from '@s/useUserInfoStore';

// 유저 구분
const userStore = useUserInfoStore();

// 유저 상태에 따른 disabled
const isDisabled = computed(() => userStore.user.role !== 'ROLE_ADMIN');

const emit = defineEmits(['close','addCategory','addWord']);

//용어제목
const wordTitle = ref('');
const addCategory = ref('');
const content = ref('');
const imageUrls = ref([]);

//용어 Vaildation용
const wordTitleAlert = ref(false);
const wordContentAlert = ref(false);
const addCategoryAlert = ref(false);

//선택 카테고리
const selectCategory = ref('');

// 제목 상태
const computedTitle = computed(() =>
    wordTitle.value === '' ? props.titleValue : wordTitle.value
);

// 카테고리 상태
const selectedCategory = computed(() =>
    selectCategory.value === '' ? props.formValue : selectCategory.value
);

const props = defineProps({
    dataList: {
        type: Array,
        default: () => []
    },
    NumValue : {
        type: Number
    },
    formValue : {
        type:[String, Number]
    },
    titleValue : {
        type:String,
    },contentValue : {
        type:String
    }
});

// 카테고리 입력 창
const showInput = ref(false);

// 카테고리 입력 토글
const toggleInput = () => {
    showInput.value = !showInput.value;
};


// 카테고리 저장
const saveInput = () => {
    if(addCategory.value == ''){
        addCategoryAlert.value = true;
        return;
    }else {
        addCategoryAlert.value = false;
    }
    // console.log('입력값 저장됨!',addCategory.value);
    emit('addCategory', addCategory.value);
    // showInput.value = false;
};

const onChange = (newValue) => {
    selectCategory.value = newValue.target.value;
};

//용어 등록
const saveWord = () => {

    // if(addCategory.value == ''){
    //     addCategoryAlert.value = true;
    //     return;
    // }else {
    //     addCategoryAlert.value = false;
    // }

    //validation

    // 용어 체크
    if(computedTitle.value == '' || computedTitle.length == 0){
        wordTitleAlert.value = true;
        return;
    }

    // 내용 체크
    if(content.value == ''){
        wordContentAlert.value = true;
        return;
    }

    const wordData = {
        id: props.NumValue || null,
        title: computedTitle.value,
        category: selectedCategory.value,
        content: content.value,
    };
    emit('addWord', wordData ,addCategory.value );
};
</script>

<style scoped>
.dict-w {
    width: 83%;
}

@media (max-width: 768px) {
    .btn-margin {
        margin-top: 2.5rem
    }
}
</style>