leejk0523
/
vueJava
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

디자인 업데이트

This commit is contained in:
이진기 2024-11-09 16:52:25 +09:00
parent 84f32cc758
commit 21ff8742f7
11 changed files with 9690 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
nuxt/app.vue
View File

@ -1,114 +1,23 @@
<template> <script setup lang="ts">
<div v-if="isMounted" id="app"> // import 'ant-design-vue/dist/reset.css';
<div> // import '~/assets/font/PretendardGOV/font.css';
<h1>Ant Design Button Demo</h1> // import '~/assets/css/index.css';
<a-button type="primary" @click="handleClick">Click Me</a-button> // import 'dayjs/locale/ko';
</div> import 'uno.css';
<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> </script>
<style scoped> <template>
.select-container { <client-only>
display: flex; <nuxt-layout>
flex-direction: column; <nuxt-page />
margin-top: 20px; </nuxt-layout>
} </client-only>
</template>
.search-area, .results-area { <style>
width: 80%; #__nuxt {
margin: 20px 0; height: 100%;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
}
.search-area {
background-color: #f9f9f9;
}
.results-area {
background-color: #ffffff;
} }
</style> </style>
<style scoped></style>

17
nuxt/common/loading.vue
View File

@ -1,21 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { useLoadingStore } from '~/stores';
const loadingStore = useLoadingStore();
const { isLoading } = storeToRefs(loadingStore);
</script> </script>
<template> <template>
<template v-if="isLoading"> <h1>이진기</h1>
<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>
</template> </template>

7
nuxt/components/layout/LeftMenu.vue
View File

@ -1,14 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { useAuthStore } from '~/stores/login';
const authStore = useAuthStore();
const { authorization } = storeToRefs(authStore);
const selectedKeys = ref<string[]>([]); const selectedKeys = ref<string[]>([]);
</script> </script>
<template> <template>
<a-menu v-model:selected-keys="selectedKeys" mode="inline" theme="dark"> <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> </a-menu>
</template> </template>

47
nuxt/components/layout/LeftMenuItem.vue
View File

@ -1,31 +1,26 @@
<script setup lang="ts"> <script setup lang="ts">
import type { AuthorizationMenuType } from '~/types/login';
defineProps<{
menuList: AuthorizationMenuType[];
}>();
</script> </script>
<template> <template>
<template v-for="menu in menuList" :key="menu.menuId"> <!-- <template v-for="menu in menuList" :key="menu.menuId">-->
<a-menu-item :key="menu.menuId" v-if="!menu.children"> <!-- <a-menu-item :key="menu.menuId" v-if="!menu.children">-->
<nuxt-link :to="menu.menuUrl">{{ menu.menuName }}</nuxt-link> <!-- <nuxt-link :to="menu.menuUrl">{{ menu.menuName }}</nuxt-link>-->
</a-menu-item> <!-- </a-menu-item>-->
<a-sub-menu :key="menu.menuId" v-if="menu.children"> <!-- <a-sub-menu :key="menu.menuId" v-if="menu.children">-->
<template #title>{{ menu.menuName }}</template> <!-- <template #title>{{ menu.menuName }}</template>-->
<template v-for="child in menu.children"> <!-- <template v-for="child in menu.children">-->
<template v-if="!child.children"> <!-- <template v-if="!child.children">-->
<a-menu-item :key="child.menuId"> <!-- <a-menu-item :key="child.menuId">-->
<nuxt-link :to="child.menuUrl">{{ child.menuName }}</nuxt-link> <!-- <nuxt-link :to="child.menuUrl">{{ child.menuName }}</nuxt-link>-->
</a-menu-item> <!-- </a-menu-item>-->
</template> <!-- </template>-->
<template v-if="child.children"> <!-- <template v-if="child.children">-->
<a-sub-menu :key="child.menuId"> <!-- <a-sub-menu :key="child.menuId">-->
<template #title>{{ child.menuName }}</template> <!-- <template #title>{{ child.menuName }}</template>-->
<layout-left-menu-item :menu-list="child.children" /> <!-- <layout-left-menu-item :menu-list="child.children" />-->
</a-sub-menu> <!-- </a-sub-menu>-->
</template> <!-- </template>-->
</template> <!-- </template>-->
</a-sub-menu> <!-- </a-sub-menu>-->
</template> <!-- </template>-->
</template> </template>

20
nuxt/components/layout/header.vue
View File

@ -1,33 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { useAuthStore } from '~/stores/login';
import type { AuthorizationMenuType } from '~/types/login';
import { LogoutOutlined } from '@ant-design/icons-vue'; 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> </script>
<template> <template>
<a-row justify="end" class="d-flex align-center pr-4" style="height: 100%"> <a-row justify="end" class="d-flex align-center pr-4" style="height: 100%">
<a-col> <a-col>
<a-button type="primary" @click="movePage" class="mr-5"> <a-button type="primary" @click="'#'" class="mr-5">
개인정보관리 개인정보관리
</a-button> </a-button>
</a-col> </a-col>
<a-col> <a-col>
<a-button @click="logout"> <a-button @click="'#'">
<template #icon> <template #icon>
<LogoutOutlined /> <LogoutOutlined />
</template> </template>

9
nuxt/layouts/default.vue
View File

@ -1,10 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { useAuthStore } from '~/stores/login';
import locale from 'ant-design-vue/es/locale/ko_KR'; import locale from 'ant-design-vue/es/locale/ko_KR';
import { DEFAULT_THEME } from '~/constants/theme/ui'; import { DEFAULT_THEME } from '~/constants/theme/ui';
import { UserOutlined } from '@ant-design/icons-vue';
const authStore = useAuthStore(); const authorization = ref('관리자')
const { authorization } = storeToRefs(authStore);
</script> </script>
<template> <template>
@ -19,7 +18,7 @@ const { authorization } = storeToRefs(authStore);
<UserOutlined /> <UserOutlined />
</template> </template>
</a-avatar> </a-avatar>
<span class="text-white">{{ authorization.memberName }}</span> <span class="text-white">{{ authorization }}</span>
</a-space> </a-space>
</a-col> </a-col>
</a-row> </a-row>
@ -39,3 +38,5 @@ const { authorization } = storeToRefs(authStore);
</a-layout> </a-layout>
</a-config-provider> </a-config-provider>
</template> </template>
<style scoped></style>

41
nuxt/nuxt.config.ts
View File

@ -1,11 +1,44 @@
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({ 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', compatibilityDate: '2024-04-03',
unhead: {
renderSSRHeadOptions: {
omitLineBreaks: true
}
},
imports: {
autoImport: true
},
devtools: { enabled: true }, devtools: { enabled: true },
plugins: [ plugins: [
'~/plugins/ant-design-vue.js' '~/plugins/ant-design-vue.ts'
], ],
css: [ css: [
'ant-design-vue/dist/reset.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
}
});

62
nuxt/package.json
View File

@ -1,5 +1,5 @@
{ {
"name": "nuxt-app", "name": "klac",
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {
@ -10,12 +10,64 @@
"postinstall": "nuxt prepare" "postinstall": "nuxt prepare"
}, },
"dependencies": { "dependencies": {
"-": "^0.0.1",
"@ant-design-vue/nuxt": "^1.4.2",
"@ant-design/icons-vue": "^7.0.1", "@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", "ant-design-vue": "^4.2.5",
"axios": "^1.7.7", "aos": "^2.3.4",
"nuxt": "^3.13.2", "axios": "^1.7.2",
"vue": "latest", "bootstrap": "^5.3.3",
"vue-router": "latest" "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" "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
} }

3
nuxt/pages/index.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts"></script> <script setup lang="ts">
</script>
<template> <template>
<nuxt-page /> <nuxt-page />

8
nuxt/tsconfig.json
View File

@ -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
}
} }

9540
nuxt/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff