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

Compare commits

base: leejk0523:940a0320b3de38a3a2274139271b68ae224e3528
Branches Tags
leejk0523:main
..
compare: leejk0523:21ff8742f7c0f7a4c15231976f945ded17e9a627
Branches Tags
leejk0523:main

No commits in common. "940a0320b3de38a3a2274139271b68ae224e3528" and "21ff8742f7c0f7a4c15231976f945ded17e9a627" have entirely different histories.
940a0320b3 ... 21ff8742f7

8 changed files with 21 additions and 495 deletions
Show Stats Expand all files Collapse all files

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

@ -10,17 +10,13 @@ import { LogoutOutlined } from '@ant-design/icons-vue';
</a-button>
</a-col>
<router-link to="/login" style="color: #1890ff">
로그아웃
</router-link>
<!-- <a-col>-->
<!-- <a-button @click="'#'">-->
<!-- <template #icon>-->
<!-- <LogoutOutlined />-->
<!-- </template>-->
<!-- 로그아웃-->
<!-- </a-button>-->
<!-- </a-col>-->
<a-col>
<a-button @click="'#'">
<template #icon>
<LogoutOutlined />
</template>
로그아웃
</a-button>
</a-col>
</a-row>
</template>

12
nuxt/layouts/empty.vue
View File

@ -1,12 +0,0 @@
<script setup lang="ts">
import locale from 'ant-design-vue/es/locale/ko_KR';
import { DEFAULT_THEME } from '~/constants/theme/ui';
</script>
<template>
<a-config-provider :locale="locale" :theme="DEFAULT_THEME">
<a-row class="w-full h-full">
<slot />
</a-row>
</a-config-provider>
</template>

13
nuxt/nuxt.config.ts
View File

@ -21,16 +21,15 @@ export default defineNuxtConfig({
autoImport: true
},
devtools: { enabled: true },
// plugins: [
// '~/plugins/ant-design-vue.ts'
// ],
// css: [
// 'ant-design-vue/dist/reset.css'
// ],
plugins: [
'~/plugins/ant-design-vue.ts'
],
css: [
'ant-design-vue/dist/reset.css'
],
modules: [
'@pinia/nuxt',
'@unocss/nuxt',
'@ant-design-vue/nuxt',
'@hebilicious/vue-query-nuxt'
],
vite: {

133
nuxt/pages/login/id.vue
View File

@ -1,133 +0,0 @@
<script setup lang="ts">
import { ref } from 'vue';
definePageMeta({
layout: 'empty'
});
const dummy = ref('phone');
const domain = ref(''); // 도메인 선택 부분
const domains = [
{ value: 'gmail.com', label: 'gmail.com' },
{ value: 'naver.com', label: 'naver.com' },
{ value: 'daum.net', label: 'daum.net' },
{ value: '직접 입력', label: '직접 입력' }
];
</script>
<template>
<a-row justify="center" class="w-full h-full items-center">
<a-col :span="12">
<a-card
bordered
style="padding: 24px; background-color: #f9f9f9; border-radius: 8px"
>
<!-- 아이디 찾기 타이틀 -->
<h2 style="text-align: center; font-weight: bold; font-size: 24px">
아이디 찾기
</h2>
<!-- 검색 방법 선택 -->
<div style="display: flex; justify-content: center; margin: 16px 0">
<a-radio-group v-model:value="dummy">
<a-radio value="phone">휴대폰으로 찾기</a-radio>
<a-radio value="email">이메일로 찾기</a-radio>
</a-radio-group>
</div>
<a-form :colon="false" label-align="left">
<!-- 이름 -->
<a-form-item
label="이름"
:label-col="{ span: 4 }"
:wrapper-col="{ span: 20 }"
>
<a-input placeholder="이름을 입력하세요" />
</a-form-item>
<!-- 자동입력방지문자 (라디오 값이 'phone'일 때만 표시) -->
<a-form-item
v-if="dummy === 'phone'"
label="자동입력방지문자"
:label-col="{ span: 6 }"
:wrapper-col="{ span: 18 }"
>
<div style="display: flex; gap: 8px">
<a-input
disabled
value="564866"
style="width: 100px; text-align: center"
/>
<a-button>새로고침</a-button>
<a-button>음성듣기</a-button>
</div>
<a-input
placeholder="자동입력 방지문자를 입력하세요."
style="margin-top: 8px"
/>
</a-form-item>
<!-- 휴대전화 (라디오 값이 'phone'일 때만 표시) -->
<a-form-item
v-if="dummy === 'phone'"
label="휴대전화"
:label-col="{ span: 4 }"
:wrapper-col="{ span: 20 }"
>
<div style="display: flex; gap: 8px">
<a-input style="width: 60px" maxlength="4" />
<a-input style="width: 60px" maxlength="4" />
<a-input style="width: 60px" maxlength="4" />
<a-button>인증번호</a-button>
</div>
</a-form-item>
<a-form-item
v-if="dummy === 'email'"
label="이메일"
:label-col="{ span: 4 }"
:wrapper-col="{ span: 20 }"
>
<!-- 이메일 입력 필드 -->
<a-input v-model="dummy" style="width: 120px" />
<span> @ </span>
<!-- 도메인 입력 필드 -->
<a-input v-model="dummy" style="width: 150px; margin-right: 18px" />
<!-- 직접 입력 드롭다운 -->
<a-select
v-model="domains"
style="width: 150px"
@change="handleDomainChange"
>
<a-select-option value="직접 입력">직접 입력</a-select-option>
<a-select-option value="gmail.com">gmail.com</a-select-option>
<a-select-option value="naver.com">naver.com</a-select-option>
<a-select-option value="daum.net">daum.net</a-select-option>
</a-select>
</a-form-item>
<!-- 인증번호 (라디오 값이 'phone'일 때만 표시) -->
<a-form-item
v-if="dummy === 'phone'"
label="인증번호"
:label-col="{ span: 4 }"
:wrapper-col="{ span: 20 }"
>
<a-input placeholder="인증번호를 입력하세요" />
</a-form-item>
<!-- 아이디 찾기 버튼 -->
<div style="text-align: center; margin-top: 16px">
<a-button
type="primary"
style="background-color: #1e90ff; color: white; width: 100px"
>
아이디 찾기
</a-button>
</div>
</a-form>
</a-card>
</a-col>
</a-row>
</template>

125
nuxt/pages/login/index.vue
View File

@ -1,125 +0,0 @@
<script setup lang="ts">
const useAuthStore = ref('');
const remember = ref(false);
const memberId = ref('');
const password = ref('');
definePageMeta({
layout: 'empty'
});
// const router = useRouter();
// const store = useAuthStore();
// const { authentication } = storeToRefs(store);
//
// onBeforeMount(() => {
// store.loadRemember();
// });
//
// onBeforeUnmount(() => {
// authentication.value = {
// ...authentication.value,
// memberId: ''
// };
// });
//
// watch(authentication.value, (newValue) => {
// if (newValue.remember) {
// store.setRemember();
// } else {
// store.initRemember();
// }
// });
const login = async () => {
// try {
// const { data } = await store.authenticate();
// store.authorize(data);
//
// await router.push('/');
// } catch (e) {
// message.error('아이디 또는 비밀번호를 확인해주세요.');
// }
};
const validateLogin = computed(() => {
return false;
});
</script>
<template>
<a-row justify="center" class="w-full h-full items-center">
<a-col :span="7.5">
<a-card bordered style="background-color: #f5f5f5; padding: 24px">
<h1
style="
text-align: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 16px;
"
>
로그인
</h1>
<div style="height: 18px"></div>
<a-form-item>
<a-checkbox v-model:checked="remember">
키보드보안 프로그램적용
</a-checkbox>
<div style="height: 10px"></div>
<div>
<p style="font-size: 12px; color: #888">
※ 안전한 서비스 이용을 위해 키보드보안 프로그램 적용을 권장합니다.
</p>
</div>
</a-form-item>
<a-form :colon="false" label-align="left">
<a-form-item label="아이디" :label-col="{ span: 5 }">
<a-input
v-model:value="memberId"
placeholder="아이디를 입력하세요"
maxLength="20"
/>
</a-form-item>
<a-form-item label="비밀번호" :label-col="{ span: 5 }">
<a-input-password
v-model:value="password"
placeholder="비밀번호를 입력하세요"
maxLength="20"
@keyup.enter="login"
/>
</a-form-item>
<a-form-item>
<a-button
type="primary"
block
@click="login"
:disabled="!validateLogin"
style="font-weight: bold"
>
로그인
</a-button>
</a-form-item>
<div style="display: flex; justify-content: center; margin-top: 16px">
<router-link to="/login/id" style="color: #1890ff"
>아이디 찾기</router-link
>
<span style="margin: 0 8px; color: #888">|</span>
<router-link to="/login/pw" style="color: #1890ff"
>비밀번호 찾기</router-link
>
<span style="margin: 0 8px; color: #888">|</span>
<router-link to="/login/join" style="color: #1890ff"
>회원가입</router-link
>
</div>
</a-form>
</a-card>
</a-col>
</a-row>
</template>

82
nuxt/pages/login/join.vue
View File

@ -1,82 +0,0 @@
<script setup lang="ts">
import { ref } from 'vue';
import locale from 'ant-design-vue/es/locale/ko_KR';
import { DEFAULT_THEME } from '~/constants/theme/ui';
const route = useRoute();
const router = useRouter();
const adminJoinStore = ref('');
const member = ref('');
definePageMeta({
layout: 'empty'
});
const changeUrl = (activeKey: string) => {
router.push(activeKey);
};
function activeKey(key) {
console.log('Active Tab:', key);
}
const disabledInst = computed(() => {
return false;
});
const disabledCert = computed(() => {
return false;
});
const disabledForm = computed(() => {
return false;
});
const disabledCmptn = computed(() => {
return false;
});
</script>
<template>
<a-config-provider :locale="locale" :theme="DEFAULT_THEME">
<a-row class="w-full h-full">
<a-row justify="center" class="w-full h-full items-center">
<a-col :span="15">
<a-card bordered class="p-5">
<a-typography-title :level="4" type="secondary" class="text-center">
참여기관 회원가입
</a-typography-title>
<a-tabs default-active-key="1" v-model:active-key="activeKey">
<a-tab-pane key="/admin/login/join/trms" tab="01.약관동의" />
<a-tab-pane
key="/admin/login/join/inst"
tab="02.기관선택"
:disabled="disabledInst"
/>
<a-tab-pane
key="/admin/login/join/cert"
tab="03.본인인증"
:disabled="disabledCert"
/>
<a-tab-pane
key="/admin/login/join"
tab="04.정보입력"
:disabled="disabledForm"
/>
<a-tab-pane
key="/admin/login/join/cmptn"
tab="05.가입완료"
:disabled="disabledCmptn"
/>
</a-tabs>
<slot />
</a-card>
</a-col>
</a-row>
</a-row>
</a-config-provider>
</template>
<style scoped></style>

124
nuxt/pages/login/pw.vue
View File

@ -1,124 +0,0 @@
<script setup lang="ts">
import { ref } from 'vue';
definePageMeta({
layout: 'empty'
});
const dummy = ref<string>('phone');
const domain = ref(''); // 도메인 선택 부분
const domains = [
{ value: 'gmail.com', label: 'gmail.com' },
{ value: 'naver.com', label: 'naver.com' },
{ value: 'daum.net', label: 'daum.net' },
{ value: '직접 입력', label: '직접 입력' }
];
const handleDomainChange = (value) => {
if (value !== '직접 입력') {
domain.value = value;
} else {
domain.value = '';
}
};
</script>
<template>
<a-row justify="center" class="w-full h-full items-center">
<a-col :span="12">
<a-card
bordered
style="padding: 24px; background-color: #f9f9f9; border-radius: 8px"
>
<!-- 아이디 찾기 타이틀 -->
<h2 style="text-align: center; font-weight: bold; font-size: 24px">
비밀번호 재설정
</h2>
<!-- 검색 방법 선택 -->
<div style="display: flex; justify-content: center; margin: 16px 0">
<a-radio-group v-model:value="dummy">
<a-radio defaultValue="phone">휴대폰으로 찾기</a-radio>
<a-radio value="email">이메일로 찾기</a-radio>
</a-radio-group>
</div>
<a-form :colon="false" label-align="left">
<!-- 이름 -->
<a-form-item
label="이름"
:label-col="{ span: 4 }"
:wrapper-col="{ span: 20 }"
>
<a-input placeholder="이름을 입력하세요" />
</a-form-item>
<!-- 아이디 -->
<a-form-item
label="아이디"
:label-col="{ span: 4 }"
:wrapper-col="{ span: 20 }"
>
<a-input placeholder="아이디를 입력하세요" />
</a-form-item>
<!-- 휴대전화 (라디오 값이 'phone'일 때만 표시) -->
<a-form-item
v-if="dummy === 'phone'"
label="휴대전화"
:label-col="{ span: 4 }"
:wrapper-col="{ span: 20 }"
>
<div style="display: flex; gap: 8px">
<a-input style="width: 90px" maxlength="4" />
<a-input style="width: 90px" maxlength="4" />
<a-input style="width: 90px" maxlength="4" />
</div>
</a-form-item>
<a-form-item
v-if="dummy === 'email'"
label="이메일"
:label-col="{ span: 4 }"
:wrapper-col="{ span: 20 }"
>
<!-- 이메일 입력 필드 -->
<a-input v-model="dummy" style="width: 120px" />
<span> @ </span>
<!-- 도메인 입력 필드 -->
<a-input v-model="dummy" style="width: 150px; margin-right: 18px" />
<!-- 직접 입력 드롭다운 -->
<a-select
v-model="domains"
style="width: 150px"
@change="handleDomainChange"
>
<a-select-option value="직접 입력">직접 입력</a-select-option>
<a-select-option value="gmail.com">gmail.com</a-select-option>
<a-select-option value="naver.com">naver.com</a-select-option>
<a-select-option value="daum.net">daum.net</a-select-option>
</a-select>
</a-form-item>
<!-- 암호 찾기 버튼 -->
<div style="text-align: center; margin-top: 16px">
<a-button
v-if="dummy === 'phone'"
type="primary"
style="background-color: #1e90ff; color: white; width: 100px"
>
휴대폰 인증
</a-button>
<a-button
v-else
type="primary"
style="background-color: #1e90ff; color: white; width: 100px"
>
이메일 인증
</a-button>
</div>
</a-form>
</a-card>
</a-col>
</a-row>
</template>

7
nuxt/plugins/ant-design-vue.ts Normal file
View File

@ -0,0 +1,7 @@
import { defineNuxtPlugin } from '#app';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(Antd);
});