localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

용어집수정정

Browse Source
This commit is contained in:
khj0414 2025-03-17 10:24:41 +09:00
parent c51da7f56d
commit 4258881d4b
4 changed files with 70 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/input/FormInput.vue
View File

@ -19,9 +19,6 @@
@focusout="$emit('focusout', modelValue)" @focusout="$emit('focusout', modelValue)"
@input="handleInput" @input="handleInput"
/> />
<div v-if="isBtn" class="ms-2">
<slot name="append"></slot>
</div>
</div> </div>
<div class="invalid-feedback" :class="isAlert ? 'd-block' : ''">{{ title }}을 확인해주세요.</div> <div class="invalid-feedback" :class="isAlert ? 'd-block' : ''">{{ title }}을 확인해주세요.</div>
<div class="invalid-feedback" :class="isCateAlert ? 'd-block' : ''">카테고리 중복입니다.</div> <div class="invalid-feedback" :class="isCateAlert ? 'd-block' : ''">카테고리 중복입니다.</div>

8
src/components/input/FormSelect.vue
View File

@ -10,6 +10,9 @@
{{ isCommon ? item.label : item }} {{ isCommon ? item.label : item }}
</option> </option>
</select> </select>
<div v-if="isBtn" class="ms-2">
<slot name="append"></slot>
</div>
<div v-if="isColor && selected" <div v-if="isColor && selected"
class="w-px-40 h-px-30" class="w-px-40 h-px-30"
@ -70,6 +73,11 @@ const props = defineProps({
default: true, default: true,
required: false, required: false,
}, },
isBtn: {
type: Boolean,
default: false,
required: false,
},
isCommon: { isCommon: {
type: Boolean, type: Boolean,
default: false, default: false,

123
src/components/wordDict/DictWrite.vue
View File

@ -1,38 +1,31 @@
<template> <template>
<div> <div>
<div class="row"> <FormSelect class="me-5"
<div class="col-10"> name="cate"
<FormSelect title="카테고리"
name="cate" :data="dataList"
title="카테고리" :is-common="true"
:data="dataList" @update:data="selectCategory = $event"
:is-common="true" @change="onChange"
@update:data="selectCategory = $event" :value="formValue"
@change="onChange" :is-essential="false"
:value="formValue" />
:is-essential="false" <div v-if="!isDisabled" class="add-btn">
/> <PlusBtn @click="toggleInput"/>
</div>
<div class="col-2" v-if="!isDisabled">
<PlusBtn @click="toggleInput"/>
</div>
</div>
<div class="row" v-if="showInput">
<div class="col-10">
<FormInput
ref="categoryInputRef"
title="새 카테고리"
name="카테고리"
@update:modelValue="addCategory = $event"
:is-cate-alert="addCategoryAlert"
@focusout="handleCategoryFocusout(addCategory)"
/>
</div>
</div> </div>
</div> </div>
<div class="dict-w">
<FormInput <div v-if="showInput">
<FormInput class="me-5"
ref="categoryInputRef"
title="새 카테고리"
name="새 카테고리"
@update:modelValue="addCategory = $event"
:is-cate-alert="addCategoryAlert"
@focusout="handleCategoryFocusout(addCategory)"
/>
</div>
<FormInput class="me-5"
title="용어" title="용어"
type="text" type="text"
name="word" name="word"
@ -43,15 +36,14 @@
:disabled="isDisabled" :disabled="isDisabled"
@keyup="ValidHandler('title')" @keyup="ValidHandler('title')"
/> />
</div> <div>
<div> <QEditor class="" @keyup="ValidHandler('content')" @update:data="handleContentUpdate" @update:imageUrls="imageUrls = $event" :is-alert="wordContentAlert" :initialData="contentValue"/>
<QEditor @keyup="ValidHandler('content')" @update:data="handleContentUpdate" @update:imageUrls="imageUrls = $event" :is-alert="wordContentAlert" :initialData="contentValue"/> <div class="text-end mt-5">
<div class="text-end mt-5"> <button class="btn btn-primary" @click="saveWord">
<button class="btn btn-primary" @click="saveWord"> <i class="bx bx-check"></i>
<i class="bx bx-check"></i> </button>
</button> </div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
@ -188,36 +180,38 @@ const saveWord = () => {
// 카테고리 focusout 이벤트 핸들러 추가 // 카테고리 focusout 이벤트 핸들러 추가
const handleCategoryFocusout = (value) => { const handleCategoryFocusout = (value) => {
const valueTrim = value.trim(); const valueTrim = value.trim();
if(value){
const existingCategory = props.dataList.find(item => item.label === valueTrim);
const existingCategory = props.dataList.find(item => item.label === valueTrim); // 카테고리 입력시 공백
if(valueTrim == ''){
addCategoryAlert.value = true;
// 카테고리 입력시 공백 // 공백시 강제 focus
if(valueTrim == ''){ setTimeout(() => {
addCategoryAlert.value = true; const inputElement = categoryInputRef.value?.$el?.querySelector('input');
if (inputElement) {
// 공백시 강제 focus inputElement.focus();
setTimeout(() => { }
const inputElement = categoryInputRef.value?.$el?.querySelector('input'); }, 0);
if (inputElement) {
inputElement.focus();
}
}, 0);
}else if (existingCategory) { }else if (existingCategory) {
addCategoryAlert.value = true; addCategoryAlert.value = true;
// 중복시 강제 focus // 중복시 강제 focus
setTimeout(() => { setTimeout(() => {
const inputElement = categoryInputRef.value?.$el?.querySelector('input'); const inputElement = categoryInputRef.value?.$el?.querySelector('input');
if (inputElement) { if (inputElement) {
inputElement.focus(); inputElement.focus();
} }
}, 0); }, 0);
} else { } else {
addCategoryAlert.value = false; addCategoryAlert.value = false;
}
} }
}; };
@ -234,4 +228,9 @@ const handleCategoryFocusout = (value) => {
margin-top: 2.5rem margin-top: 2.5rem
} }
} }
.add-btn {
position: absolute;
right: 0.7rem;
top: 1.2rem;
}
</style> </style>

4
src/views/wordDict/wordDict.vue
View File

@ -19,12 +19,10 @@
<!-- 용어 리스트 컨텐츠 --> <!-- 용어 리스트 컨텐츠 -->
<div class="flex-grow-1"> <div class="flex-grow-1">
<!-- 작성 --> <!-- 작성 -->
<div v-if="writeStore.isItemActive(999999)" class="ms-3 card p-5"> <div v-if="writeStore.isItemActive(999999)" class="ms-3 card p-5 mb-2">
<DictWrite @close="writeStore.closeAll()" :dataList="cateList" @addWord="addWord"/> <DictWrite @close="writeStore.closeAll()" :dataList="cateList" @addWord="addWord"/>
</div> </div>
<!-- 용어 리스트 --> <!-- 용어 리스트 -->
<div> <div>
<!-- 로딩 중일 때 --> <!-- 로딩 중일 때 -->