로그인, 아이디찾기, 비밀번호찾기, 가입시 권장사항 화면 추가

nuxt/components/layout/header.vue

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

nuxt/layouts/empty.vue

@@ -0,0 +1,12 @@
+<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>

nuxt/nuxt.config.ts

@@ -21,15 +21,16 @@ 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: {

nuxt/pages/login/id.vue

@@ -0,0 +1,133 @@
+<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>

nuxt/pages/login/index.vue

@@ -0,0 +1,125 @@
+<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>

nuxt/pages/login/join.vue

@@ -0,0 +1,82 @@
+<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>

nuxt/pages/login/pw.vue

@@ -0,0 +1,124 @@
+<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>

nuxt/plugins/ant-design-vue.ts

@@ -1,7 +0,0 @@
-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);
-});