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
+