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

Merge branch 'main' of http://192.168.0.251:3000/localhost/localhost-front

Browse Source
This commit is contained in:
nevermoregb 2025-03-17 10:29:04 +09:00
commit a3b17c0215
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)"
@input="handleInput"
/>
<div v-if="isBtn" class="ms-2">
<slot name="append"></slot>
</div>
</div>
<div class="invalid-feedback" :class="isAlert ? 'd-block' : ''">{{ title }}을 확인해주세요.</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 }}
</option>
</select>
<div v-if="isBtn" class="ms-2">
<slot name="append"></slot>
</div>
<div v-if="isColor && selected"
class="w-px-40 h-px-30"
@ -70,6 +73,11 @@ const props = defineProps({
default: true,
required: false,
},
isBtn: {
type: Boolean,
default: false,
required: false,
},
isCommon: {
type: Boolean,
default: false,

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

@ -1,38 +1,31 @@
<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"
:is-essential="false"
/>
</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>
<FormSelect class="me-5"
name="cate"
title="카테고리"
:data="dataList"
:is-common="true"
@update:data="selectCategory = $event"
@change="onChange"
:value="formValue"
:is-essential="false"
/>
<div v-if="!isDisabled" class="add-btn">
<PlusBtn @click="toggleInput"/>
</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="용어"
type="text"
name="word"
@ -43,15 +36,14 @@
:disabled="isDisabled"
@keyup="ValidHandler('title')"
/>
</div>
<div>
<QEditor @keyup="ValidHandler('content')" @update:data="handleContentUpdate" @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>
<QEditor class="" @keyup="ValidHandler('content')" @update:data="handleContentUpdate" @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>
</div>
</template>
<script setup>
@ -188,36 +180,38 @@ const saveWord = () => {
// 카테고리 focusout 이벤트 핸들러 추가
const handleCategoryFocusout = (value) => {
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;
// 카테고리 입력시 공백
if(valueTrim == ''){
addCategoryAlert.value = true;
// 공백시 강제 focus
setTimeout(() => {
const inputElement = categoryInputRef.value?.$el?.querySelector('input');
if (inputElement) {
inputElement.focus();
}
}, 0);
// 공백시 강제 focus
setTimeout(() => {
const inputElement = categoryInputRef.value?.$el?.querySelector('input');
if (inputElement) {
inputElement.focus();
}
}, 0);
}else if (existingCategory) {
addCategoryAlert.value = true;
}else if (existingCategory) {
addCategoryAlert.value = true;
// 중복시 강제 focus
setTimeout(() => {
const inputElement = categoryInputRef.value?.$el?.querySelector('input');
if (inputElement) {
inputElement.focus();
}
}, 0);
// 중복시 강제 focus
setTimeout(() => {
const inputElement = categoryInputRef.value?.$el?.querySelector('input');
if (inputElement) {
inputElement.focus();
}
}, 0);
} else {
addCategoryAlert.value = false;
} else {
addCategoryAlert.value = false;
}
}
};
@ -234,4 +228,9 @@ const handleCategoryFocusout = (value) => {
margin-top: 2.5rem
}
}
.add-btn {
position: absolute;
right: 0.7rem;
top: 1.2rem;
}
</style>

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

@ -19,12 +19,10 @@
<!-- 용어 리스트 컨텐츠 -->
<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"/>
</div>
<!-- 용어 리스트 -->
<div>
<!-- 로딩 중일 때 -->