디자인 업데이트
This commit is contained in:
이진기
parent
84f32cc758
commit
21ff8742f7
127
nuxt/app.vue
127
nuxt/app.vue
|
|
@ -1,114 +1,23 @@
|
|||
<template>
|
||||
<div v-if="isMounted" id="app">
|
||||
<div>
|
||||
<h1>Ant Design Button Demo</h1>
|
||||
<a-button type="primary" @click="handleClick">Click Me</a-button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1>타입 선택</h1>
|
||||
<div class="select-container">
|
||||
<a-select v-model:value="selectedOption" placeholder="옵션을 선택하세요" style="width: 200px">
|
||||
<a-select-option value="option1">옵션 1</a-select-option>
|
||||
<a-select-option value="option2">옵션 2</a-select-option>
|
||||
<a-select-option value="option3">옵션 3</a-select-option>
|
||||
</a-select>
|
||||
<br>
|
||||
<p>선택한 옵션: {{ selectedOption }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>옵션 선택</h2>
|
||||
<a-radio-group v-model:value="radioOption">
|
||||
<a-radio value="option1">옵션 1</a-radio>
|
||||
<a-radio value="option2">옵션 2</a-radio>
|
||||
<a-radio value="option3">옵션 3</a-radio>
|
||||
</a-radio-group>
|
||||
<br><br>
|
||||
<p>선택한 옵션: {{ radioOption }}</p>
|
||||
</div>
|
||||
|
||||
<h1>사용자 목록</h1>
|
||||
<ul v-if="users.length">
|
||||
<li v-for="user in users" :key="user.id">
|
||||
{{ user.name }} - {{ user.phone }}
|
||||
</li>
|
||||
</ul>
|
||||
<p v-else>Loading...</p>
|
||||
</div>
|
||||
|
||||
<div v-if="isMounted" class="container">
|
||||
<div class="search-area">
|
||||
<DateSearch @search="handleSearch" />
|
||||
</div>
|
||||
|
||||
<div class="results-area">
|
||||
<ul v-if="results.length">
|
||||
<li v-for="(item, index) in results" :key="index">
|
||||
{{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
<p v-else>검색 결과가 없습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import axios from 'axios';
|
||||
import DateSearch from './components/DateSearch.vue';
|
||||
|
||||
const users = ref([]);
|
||||
const selectedOption = ref('');
|
||||
const radioOption = ref('option1');
|
||||
const results = ref([]);
|
||||
const isMounted = ref(false); // 마운트 상태를 확인하는 플래그
|
||||
|
||||
const handleClick = () => {
|
||||
alert('Button clicked!');
|
||||
};
|
||||
|
||||
const handleSearch = async ({ startDate, endDate }) => {
|
||||
results.value.push(startDate);
|
||||
results.value.push(endDate);
|
||||
};
|
||||
|
||||
const fetchUsers = async () => {
|
||||
try {
|
||||
const response = await axios.get('/api/all');
|
||||
users.value = response.data;
|
||||
} catch (error) {
|
||||
console.error('데이터를 가져오는 중 오류가 발생했습니다:', error);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
isMounted.value = true;
|
||||
fetchUsers();
|
||||
});
|
||||
<script setup lang="ts">
|
||||
// import 'ant-design-vue/dist/reset.css';
|
||||
// import '~/assets/font/PretendardGOV/font.css';
|
||||
// import '~/assets/css/index.css';
|
||||
// import 'dayjs/locale/ko';
|
||||
import 'uno.css';
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.select-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 20px;
|
||||
}
|
||||
<template>
|
||||
<client-only>
|
||||
<nuxt-layout>
|
||||
<nuxt-page />
|
||||
</nuxt-layout>
|
||||
</client-only>
|
||||
</template>
|
||||
|
||||
.search-area, .results-area {
|
||||
width: 80%;
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.search-area {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.results-area {
|
||||
background-color: #ffffff;
|
||||
<style>
|
||||
#__nuxt {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,21 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { useLoadingStore } from '~/stores';
|
||||
|
||||
const loadingStore = useLoadingStore();
|
||||
const { isLoading } = storeToRefs(loadingStore);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="isLoading">
|
||||
<div
|
||||
class="top-0 left-0 w-full h-full flex justify-center items-center position-absolute"
|
||||
style="z-index: 10000000"
|
||||
>
|
||||
<a-spin />
|
||||
</div>
|
||||
<div
|
||||
class="top-0 left-0 w-full h-full justify-center items-center position-absolute bg-black"
|
||||
style="z-index: 9999999; opacity: 0.4"
|
||||
></div>
|
||||
</template>
|
||||
<h1>이진기</h1>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { useAuthStore } from '~/stores/login';
|
||||
|
||||
const authStore = useAuthStore();
|
||||
const { authorization } = storeToRefs(authStore);
|
||||
|
||||
const selectedKeys = ref<string[]>([]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-menu v-model:selected-keys="selectedKeys" mode="inline" theme="dark">
|
||||
<layout-left-menu-item :menu-list="authorization.menuList" />
|
||||
<!-- <layout-left-menu-item :menu-list="authorization.menuList" />-->
|
||||
</a-menu>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,26 @@
|
|||
<script setup lang="ts">
|
||||
import type { AuthorizationMenuType } from '~/types/login';
|
||||
|
||||
defineProps<{
|
||||
menuList: AuthorizationMenuType[];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-for="menu in menuList" :key="menu.menuId">
|
||||
<a-menu-item :key="menu.menuId" v-if="!menu.children">
|
||||
<nuxt-link :to="menu.menuUrl">{{ menu.menuName }}</nuxt-link>
|
||||
</a-menu-item>
|
||||
<a-sub-menu :key="menu.menuId" v-if="menu.children">
|
||||
<template #title>{{ menu.menuName }}</template>
|
||||
<template v-for="child in menu.children">
|
||||
<template v-if="!child.children">
|
||||
<a-menu-item :key="child.menuId">
|
||||
<nuxt-link :to="child.menuUrl">{{ child.menuName }}</nuxt-link>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
<template v-if="child.children">
|
||||
<a-sub-menu :key="child.menuId">
|
||||
<template #title>{{ child.menuName }}</template>
|
||||
<layout-left-menu-item :menu-list="child.children" />
|
||||
</a-sub-menu>
|
||||
</template>
|
||||
</template>
|
||||
</a-sub-menu>
|
||||
</template>
|
||||
<!-- <template v-for="menu in menuList" :key="menu.menuId">-->
|
||||
<!-- <a-menu-item :key="menu.menuId" v-if="!menu.children">-->
|
||||
<!-- <nuxt-link :to="menu.menuUrl">{{ menu.menuName }}</nuxt-link>-->
|
||||
<!-- </a-menu-item>-->
|
||||
<!-- <a-sub-menu :key="menu.menuId" v-if="menu.children">-->
|
||||
<!-- <template #title>{{ menu.menuName }}</template>-->
|
||||
<!-- <template v-for="child in menu.children">-->
|
||||
<!-- <template v-if="!child.children">-->
|
||||
<!-- <a-menu-item :key="child.menuId">-->
|
||||
<!-- <nuxt-link :to="child.menuUrl">{{ child.menuName }}</nuxt-link>-->
|
||||
<!-- </a-menu-item>-->
|
||||
<!-- </template>-->
|
||||
<!-- <template v-if="child.children">-->
|
||||
<!-- <a-sub-menu :key="child.menuId">-->
|
||||
<!-- <template #title>{{ child.menuName }}</template>-->
|
||||
<!-- <layout-left-menu-item :menu-list="child.children" />-->
|
||||
<!-- </a-sub-menu>-->
|
||||
<!-- </template>-->
|
||||
<!-- </template>-->
|
||||
<!-- </a-sub-menu>-->
|
||||
<!-- </template>-->
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,33 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import { useAuthStore } from '~/stores/login';
|
||||
import type { AuthorizationMenuType } from '~/types/login';
|
||||
import { LogoutOutlined } from '@ant-design/icons-vue';
|
||||
const router = useRouter();
|
||||
const authStore = useAuthStore();
|
||||
const logout = async () => {
|
||||
await authStore.unauthorized();
|
||||
message.info('로그아웃되었습니다.');
|
||||
};
|
||||
|
||||
defineProps<{
|
||||
menuList: AuthorizationMenuType[];
|
||||
}>();
|
||||
|
||||
const movePage = () => {
|
||||
router.push('/admin/personal/info');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-row justify="end" class="d-flex align-center pr-4" style="height: 100%">
|
||||
<a-col>
|
||||
<a-button type="primary" @click="movePage" class="mr-5">
|
||||
<a-button type="primary" @click="'#'" class="mr-5">
|
||||
개인정보관리
|
||||
</a-button>
|
||||
</a-col>
|
||||
|
||||
<a-col>
|
||||
<a-button @click="logout">
|
||||
<a-button @click="'#'">
|
||||
<template #icon>
|
||||
<LogoutOutlined />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { useAuthStore } from '~/stores/login';
|
||||
import locale from 'ant-design-vue/es/locale/ko_KR';
|
||||
import { DEFAULT_THEME } from '~/constants/theme/ui';
|
||||
import { UserOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
const authStore = useAuthStore();
|
||||
const { authorization } = storeToRefs(authStore);
|
||||
const authorization = ref('관리자')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -19,7 +18,7 @@ const { authorization } = storeToRefs(authStore);
|
|||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<span class="text-white">{{ authorization.memberName }}</span>
|
||||
<span class="text-white">{{ authorization }}</span>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
|
@ -39,3 +38,5 @@ const { authorization } = storeToRefs(authStore);
|
|||
</a-layout>
|
||||
</a-config-provider>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,11 +1,44 @@
|
|||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
app: {
|
||||
head: {
|
||||
charset: 'UTF-8',
|
||||
viewport: 'width=device-width, initial-scale=1',
|
||||
title: '참여기관포털'
|
||||
}
|
||||
},
|
||||
ssr: false,
|
||||
pages: true,
|
||||
devServer: {
|
||||
host: '0.0.0.0'
|
||||
},
|
||||
compatibilityDate: '2024-04-03',
|
||||
unhead: {
|
||||
renderSSRHeadOptions: {
|
||||
omitLineBreaks: true
|
||||
}
|
||||
},
|
||||
imports: {
|
||||
autoImport: true
|
||||
},
|
||||
devtools: { enabled: true },
|
||||
plugins: [
|
||||
'~/plugins/ant-design-vue.js'
|
||||
'~/plugins/ant-design-vue.ts'
|
||||
],
|
||||
css: [
|
||||
'ant-design-vue/dist/reset.css'
|
||||
]
|
||||
})
|
||||
],
|
||||
modules: [
|
||||
'@pinia/nuxt',
|
||||
'@unocss/nuxt',
|
||||
'@hebilicious/vue-query-nuxt'
|
||||
],
|
||||
vite: {
|
||||
optimizeDeps: {
|
||||
include: ['tui-grid', '@ant-design', 'ant-design-vue']
|
||||
}
|
||||
},
|
||||
alias: {},
|
||||
experimental: {
|
||||
payloadExtraction: false
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "nuxt-app",
|
||||
"name": "klac",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
|
@ -10,12 +10,64 @@
|
|||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"dependencies": {
|
||||
"-": "^0.0.1",
|
||||
"@ant-design-vue/nuxt": "^1.4.2",
|
||||
"@ant-design/icons-vue": "^7.0.1",
|
||||
"@mdi/font": "^7.4.47",
|
||||
"@nuxt/babel-preset-app": "^2.18.1",
|
||||
"@nuxt/eslint": "^0.5.4",
|
||||
"@pinia/nuxt": "^0.5.4",
|
||||
"@tanstack/vue-query": "^5.51.15",
|
||||
"@toast-ui/editor": "^3.2.2",
|
||||
"D": "^1.0.0",
|
||||
"ant-design-vue": "^4.2.5",
|
||||
"axios": "^1.7.7",
|
||||
"nuxt": "^3.13.2",
|
||||
"vue": "latest",
|
||||
"vue-router": "latest"
|
||||
"aos": "^2.3.4",
|
||||
"axios": "^1.7.2",
|
||||
"bootstrap": "^5.3.3",
|
||||
"bootstrap-vue": "^2.23.1",
|
||||
"chart.js": "^4.4.4",
|
||||
"d3": "^7.9.0",
|
||||
"dayjs": "^1.11.12",
|
||||
"lodash-es": "^4.17.21",
|
||||
"moment": "^2.30.1",
|
||||
"nuxt": "^3.13.0",
|
||||
"tui-grid": "^4.21.22",
|
||||
"tui-pagination": "^3.4.1",
|
||||
"vue": "^3.5.12",
|
||||
"vue-chartjs": "^5.3.1",
|
||||
"vue-daum-postcode": "^1.2.1",
|
||||
"vue-sweetalert2": "^5.0.11",
|
||||
"vue-tsc": "^2.1.2",
|
||||
"vue3-kakao-maps": "^2.3.9",
|
||||
"yup": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/runtime-corejs3": "^7.25.6",
|
||||
"@hebilicious/vue-query-nuxt": "^0.3.0",
|
||||
"@toast-ui/calendar": "^2.1.3",
|
||||
"@types/aos": "^3.0.7",
|
||||
"@types/bootstrap": "^5.2.10",
|
||||
"@types/d3": "^7.4.3",
|
||||
"@types/lodash-es": "^4.17.12",
|
||||
"@types/node": "^22.0.0",
|
||||
"@typescript-eslint/eslint-plugin": "^7.18.0",
|
||||
"@typescript-eslint/parser": "^7.18.0",
|
||||
"@unhead/vue": "^1.9.16",
|
||||
"@unocss/nuxt": "^0.64.0",
|
||||
"core-js": "3",
|
||||
"crosseditor-vue3": "^1.0.4",
|
||||
"eslint": "^9.9.1",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-prettier": "^5.2.1",
|
||||
"eslint-plugin-vue": "^9.27.0",
|
||||
"prettier": "^3.3.3",
|
||||
"sweetalert2": "^11.14.0",
|
||||
"swiper": "^11.1.14",
|
||||
"typescript": "^5.2.2",
|
||||
"unocss": "^0.64.0",
|
||||
"uuid": "^11.0.2",
|
||||
"vite-plugin-vuetify": "^2.0.4",
|
||||
"vuetify": "^3.7.1"
|
||||
},
|
||||
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nuxt-page />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
{
|
||||
// https://nuxt.com/docs/guide/concepts/typescript
|
||||
"extends": "./.nuxt/tsconfig.json"
|
||||
"extends": "./.nuxt/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue