diff --git a/src/components/category/CategoryBtn.vue b/src/components/category/CategoryBtn.vue index c98ea10..ee8a618 100644 --- a/src/components/category/CategoryBtn.vue +++ b/src/components/category/CategoryBtn.vue @@ -43,4 +43,15 @@ const selectCategory = (cate) => { .cate-list { margin-left: -0.25rem; } + +@media (max-width: 768px) { + .cate-list { + overflow-x: scroll; + flex-wrap: nowrap !important; + + li { + flex: 0 0 auto; + } + } +} \ No newline at end of file diff --git a/src/components/wordDict/DictWrite.vue b/src/components/wordDict/DictWrite.vue index 9d040f1..eccf5a3 100644 --- a/src/components/wordDict/DictWrite.vue +++ b/src/components/wordDict/DictWrite.vue @@ -1,18 +1,38 @@ @@ -23,8 +43,23 @@ 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'; -const emit = defineEmits(['close']); +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 props = defineProps({ dataList: { @@ -46,12 +81,46 @@ const showInput = ref(false); // 카테고리 입력 토글 const toggleInput = () => { - howInput.value = !showInput.value; + showInput.value = !showInput.value; }; // 카테고리 저장 const saveInput = () => { - console.log('입력값 저장됨!'); + if(addCategory.value == ''){ + addCategoryAlert.value = true; + return; + } + // console.log('입력값 저장됨!',addCategory.value); + emit('addCategory', addCategory.value); showInput.value = false; }; - \ No newline at end of file + +const onChange = (newValue) => { + selectCategory.value = newValue.target.value; +}; + +//용어 등록 +const saveWord = () => { + //validation + + // 용어 체크 + if(wordTitle.value == ''){ + wordTitleAlert.value = true; + return; + } + + // 내용 체크 + if(content.value == ''){ + wordContentAlert.value = true; + return; + } + + const wordData = { + title: wordTitle.value, + category: selectCategory.value, + content: content.value, + }; + + emit('addWord', wordData); +}; + diff --git a/src/views/wordDict/wordDict.vue b/src/views/wordDict/wordDict.vue index 7efb616..36a8641 100644 --- a/src/views/wordDict/wordDict.vue +++ b/src/views/wordDict/wordDict.vue @@ -30,7 +30,7 @@
- +
@@ -61,7 +61,7 @@ @@ -172,4 +214,4 @@ margin-bottom: 0.5rem !important; } } - \ No newline at end of file +