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

input 경고창 추가

Browse Source
This commit is contained in:
ckx6954 2024-12-19 09:38:23 +09:00
parent 71de3b89f0
commit cea58be11a
7 changed files with 113 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
index.html
View File

@ -1,86 +1,83 @@
<!doctype html> <!doctype html>
<html <html lang="" class="light-style layout-navbar-fixed layout-menu-fixed layout-compact" dir="ltr"
lang="" data-theme="theme-default" data-assets-path="/" data-template="vertical-menu-template" data-style="light">
class="light-style layout-navbar-fixed layout-menu-fixed layout-compact"
dir="ltr"
data-theme="theme-default"
data-assets-path="/"
data-template="vertical-menu-template"
data-style="light"
>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- favicon --> <head>
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png" /> <meta charset="UTF-8" />
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png" />
<link rel="manifest" href="/img/favicon/site.webmanifest" />
<meta content="" name="description" /> <!-- favicon -->
<meta content="" name="keywords" /> <link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png" />
<title>LOCALNET</title> <link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png" />
<link rel="manifest" href="/img/favicon/site.webmanifest" />
<meta content="" name="description" />
<meta content="" name="keywords" />
<title>LOCALNET</title>
<!-- Fonts --> <!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com/" /> <link rel="preconnect" href="https://fonts.googleapis.com/" />
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
<link <link
href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&amp;display=swap" href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&amp;display=swap"
rel="stylesheet" rel="stylesheet" />
/>
<link rel="stylesheet" href="/css/font.css" /> <link rel="stylesheet" href="/css/font.css" />
<link rel="stylesheet" href="/css/custom.css" />
<!-- Icons --> <!-- Icons -->
<link rel="stylesheet" href="/vendor/fonts/boxicons.css" /> <link rel="stylesheet" href="/vendor/fonts/boxicons.css" />
<link rel="stylesheet" href="/vendor/fonts/fontawesome.css" /> <link rel="stylesheet" href="/vendor/fonts/fontawesome.css" />
<link rel="stylesheet" href="/vendor/fonts/flag-icons.css" /> <link rel="stylesheet" href="/vendor/fonts/flag-icons.css" />
<!-- Core CSS --> <!-- Core CSS -->
<link rel="stylesheet" href="/vendor/css/rtl/core.css" class="template-customizer-core-css" /> <link rel="stylesheet" href="/vendor/css/rtl/core.css" class="template-customizer-core-css" />
<link rel="stylesheet" href="/vendor/css/rtl/theme-default.css" class="template-customizer-theme-css" /> <link rel="stylesheet" href="/vendor/css/rtl/theme-default.css" class="template-customizer-theme-css" />
<link rel="stylesheet" href="/css/demo.css" /> <link rel="stylesheet" href="/css/demo.css" />
<!-- Vendors CSS --> <!-- Vendors CSS -->
<link rel="stylesheet" href="/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" /> <link rel="stylesheet" href="/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
<link rel="stylesheet" href="/vendor/libs/typeahead-js/typeahead.css" /> <link rel="stylesheet" href="/vendor/libs/typeahead-js/typeahead.css" />
<link rel="stylesheet" href="/vendor/libs/apex-charts/apex-charts.css" /> <link rel="stylesheet" href="/vendor/libs/apex-charts/apex-charts.css" />
<!-- Helpers --> <!-- Helpers -->
<script src="/vendor/js/helpers.js"></script> <script src="/vendor/js/helpers.js"></script>
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section --> <!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
<!--? Template customizer: To hide customizer set displayCustomizer value false in config.js. --> <!--? Template customizer: To hide customizer set displayCustomizer value false in config.js. -->
<!-- <script src="/vendor/js/template-customizer.js"></script> --> <!-- <script src="/vendor/js/template-customizer.js"></script> -->
<!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. --> <!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
<script src="/js/config.js"></script> <script src="/js/config.js"></script>
<!-- Include the highlight.js library --> <!-- Include the highlight.js library -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> rel="stylesheet">
</head> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<body> </head>
<div id="app"></div>
<!-- Core JS --> <body>
<!-- build:js assets/vendor/js/core.js --> <div id="app"></div>
<script src="/vendor/libs/jquery/jquery.js"></script>
<script src="/vendor/libs/popper/popper.js"></script>
<script src="/vendor/js/bootstrap.js"></script>
<script src="/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
<script src="/vendor/libs/hammer/hammer.js"></script>
<script src="/vendor/libs/i18n/i18n.js"></script>
<script src="/vendor/libs/typeahead-js/typeahead.js"></script>
<!-- <script src="/vendor/js/menu.js"></script> -->
<!-- endbuild -->
<!-- Vendors JS --> <!-- Core JS -->
<script src="/vendor/libs/apex-charts/apexcharts.js"></script> <!-- build:js assets/vendor/js/core.js -->
<!-- Main JS --> <script src="/vendor/libs/jquery/jquery.js"></script>
<!-- <script src="/js/main.js"></script> --> <script src="/vendor/libs/popper/popper.js"></script>
<!-- Page JS --> <script src="/vendor/js/bootstrap.js"></script>
<!-- <script src="/js/dashboards-analytics.js"></script> --> <script src="/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
<script src="/vendor/libs/hammer/hammer.js"></script>
<script src="/vendor/libs/i18n/i18n.js"></script>
<script src="/vendor/libs/typeahead-js/typeahead.js"></script>
<!-- <script src="/vendor/js/menu.js"></script> -->
<!-- endbuild -->
<!-- Vendors JS -->
<script src="/vendor/libs/apex-charts/apexcharts.js"></script>
<!-- Main JS -->
<!-- <script src="/js/main.js"></script> -->
<!-- Page JS -->
<!-- <script src="/js/dashboards-analytics.js"></script> -->
<script type="module" src="/src/main.js"></script>
</body>
<script type="module" src="/src/main.js"></script>
</body>
</html> </html>

6
public/css/custom.css Normal file
View File

@ -0,0 +1,6 @@
/* 여기에 css 작성 */
.display-block {
display: block !important;
}

5
src/common/msgEnum.ts Normal file
View File

@ -0,0 +1,5 @@
export const enum fileMsg {
FileMaxSizeMsg = '파일 용량은 5MB를 넘을 수 없습니다.',
FileMaxLengthMsg = '최대 5개까지 첨부 할 수 있습니다.',
FileNotTypeMsg = '첨부 할 수 없는 파일유형이 있습니다.',
}

13
src/components/input/FormFile.vue
View File

@ -4,10 +4,14 @@
<div class="col-md-10"> <div class="col-md-10">
<input class="form-control" type="file" :id="name" @change="changeHandler" multiple /> <input class="form-control" type="file" :id="name" @change="changeHandler" multiple />
</div> </div>
<div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">{{ errorMsg }}</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { fileMsg } from '@/common/msgEnum';
import { ref } from 'vue';
const prop = defineProps({ const prop = defineProps({
title: { title: {
type: String, type: String,
@ -19,9 +23,18 @@ const prop = defineProps({
default: 'nameplz', default: 'nameplz',
required: true, required: true,
}, },
isAlert : {
type: Boolean,
default: false,
required: false,
}
}); });
const emits = defineEmits(['update:data']); const emits = defineEmits(['update:data']);
const errorMsg = ref(fileMsg.FileMaxSizeMsg);
//파일 검사 하는거 만들어야겠지...
const changeHandler = (event) => { const changeHandler = (event) => {
const files = Array.from(event.target.files); const files = Array.from(event.target.files);

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

@ -12,6 +12,7 @@
:value="value" :value="value"
:maxLength="maxlength" :maxLength="maxlength"
:placeholder="title" /> :placeholder="title" />
<div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">{{ title }}을 확인해주세요.</div>
</div> </div>
</div> </div>
</template> </template>
@ -50,6 +51,11 @@ const prop = defineProps({
default: 30, default: 30,
required: false, required: false,
}, },
isAlert : {
type: Boolean,
default: false,
required: false,
}
}); });
const emits = defineEmits(['update:data']) const emits = defineEmits(['update:data'])

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

@ -9,6 +9,7 @@
<option v-for="(item , i) in data" :key="item" :value="i" :selected="value == i">{{ item }}</option> <option v-for="(item , i) in data" :key="item" :value="i" :selected="value == i">{{ item }}</option>
</select> </select>
</div> </div>
<div v-if="isAlert" class="invalid-feedback">{{ title }}을 확인해주세요.</div>
</div> </div>
</template> </template>
@ -41,6 +42,11 @@ const props = defineProps({
default: '0', default: '0',
require: false, require: false,
}, },
isAlert : {
type: Boolean,
default: false,
required: false,
}
}); });
const emit = defineEmits(['update:data']); const emit = defineEmits(['update:data']);

15
src/views/board/BoardWrite.vue
View File

@ -9,9 +9,9 @@
<div class="col-xl-12"> <div class="col-xl-12">
<div class="card-body"> <div class="card-body">
<FormInput title="제목" name="title" :is-essential="true" @update:data="title = $event" /> <FormInput title="제목" name="title" :is-essential="true" :is-alert="titleAlert" @update:data="title = $event" />
<FormSelect title="카테고리" name="cate" :is-essential="true" :data="categoryList" @update:data="category = $event" /> <FormSelect title="카테고리" name="cate" :is-essential="true" :data="categoryList" @update:data="category = $event" />
<FormInput <FormInput
v-show="category == 1" v-show="category == 1"
@ -19,15 +19,17 @@
name="pw" name="pw"
type="password" type="password"
:is-essential="true" :is-essential="true"
:is-alert="passwordAlert"
@update:data="password = $event" @update:data="password = $event"
/> />
<FormFile title="첨부파일" name="files" @update:data="attachFiles = $event" /> <FormFile title="첨부파일" name="files" :is-alert="attachFilesAlert" @update:data="attachFiles = $event" />
<div class="mb-4"> <div class="mb-4">
<label for="html5-tel-input" class="col-md-2 col-form-label"> <label for="html5-tel-input" class="col-md-2 col-form-label">
내용 내용
<span class="text-red">*</span> <span class="text-red">*</span>
<div class="invalid-feedback" :class="contentAlert ? 'display-block' : ''">내용을 확인해주세요.</div>
</label> </label>
<div class="col-md-12"> <div class="col-md-12">
<!-- <TEditor @update:data="content = $event"/> --> <!-- <TEditor @update:data="content = $event"/> -->
@ -62,6 +64,13 @@ const category = ref(0);
const content = ref(''); const content = ref('');
const attachFiles = ref(null); const attachFiles = ref(null);
//input 경고창 관리
const titleAlert = ref(true);
const passwordAlert = ref(false);
const contentAlert = ref(false);
const attachFilesAlert = ref(false);
const goList = () => { const goList = () => {
// 목록으로 이동 나중엔 페이지 정보 ,검색 정보도 붙여야됨 // 목록으로 이동 나중엔 페이지 정보 ,검색 정보도 붙여야됨
router.push('/board'); router.push('/board');