create-m2m-bo-template-vue 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-m2m-bo-template-vue",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Scaffolding CLI for the M2M back-office vue template.",
   "type": "module",
   "bin": {

package/template/src/components/SearchField/SearchField.module.css

@@ -36,7 +36,9 @@
   min-width: 0;
   max-width: none;
   height: 100%;
-  padding: 0 36px 0 12px;
+  /* m2m-uiux-vue의 .bsSearchField .bsSearchFieldInput 리셋 규칙과 클래스 특이도가
+     같아 로드 순서에 따라 우리 패딩이 밀릴 수 있다 — !important로 확정 고정 */
+  padding: 0 36px 0 12px !important;
   border: 0;
   outline: 0;
   background: transparent;
@@ -46,7 +48,7 @@
 }
 
 .field:has(.shortcut) .control > input {
-  padding-right: 64px;
+  padding-right: 64px !important;
 }
 
 .control > button:first-child {
@@ -71,6 +73,13 @@
   font-size: 0.625rem;
   pointer-events: none;
   transform: translateY(-50%);
+  background: #fff;
+}
+
+/* 입력 내용이 있거나 포커스 시 shortcut 자동 숨김 */
+.field:has(input:not(:placeholder-shown)) .shortcut,
+.field:has(input:focus) .shortcut {
+  display: none !important;
 }
 
 @media (max-width: 720px) {

package/template/src/components/SearchField/SearchField.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { SearchField as M2MSearchField } from 'm2m-uiux-vue/SearchField';
 
 export interface SearchFieldProps {
@@ -26,6 +27,9 @@ function handleUpdate(value: string) {
   props.onChange?.({ target: { value } } as unknown as Event);
   props.onValueChange?.(value);
 }
+
+const currentVal = computed(() => String((props.value ?? props.defaultValue) ?? ''));
+const hasValue = computed(() => currentVal.value.trim().length > 0);
 </script>
 
 <template>
@@ -39,7 +43,7 @@ function handleUpdate(value: string) {
       :class-names="$style.control"
       @update:model-value="handleUpdate"
     />
-    <span v-if="shortcutHint" :class="$style.shortcut" aria-hidden="true">{{ shortcutHint }}</span>
+    <span v-if="shortcutHint && !hasValue" :class="$style.shortcut" aria-hidden="true">{{ shortcutHint }}</span>
   </span>
 </template>
 

package/template/src/components/shell/Header.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref } from 'vue';
-import { Blocks, Settings, ChevronDown, Check } from 'lucide-vue-next';
+import { Blocks, Settings, ChevronDown, Check, LogOut } from 'lucide-vue-next';
 import { Header as M2MHeader } from 'm2m-uiux-vue/Header';
 import { useRoute, useRouter } from 'vue-router';
 import { activeKeyForPath, breadcrumbForKey } from '../../lib/nav';
@@ -75,6 +75,9 @@ function goSystemDisplay() {
   modeDropdownOpen.value = false;
   router.push('/system/display');
 }
+function logout() {
+  router.push('/login');
+}
 </script>
 
 <template>
@@ -128,6 +131,10 @@ function goSystemDisplay() {
         <Settings :size="15" :stroke-width="1.8" />
       </button>
 
+      <button type="button" :class="styles.iconBtn" title="로그아웃" @click="logout">
+        <LogOut :size="15" :stroke-width="1.8" />
+      </button>
+
       <div :class="styles.account">
         <div :class="styles.accountAvatar">관</div>
         <span :class="styles.accountName">관리자</span>

package/template/src/pages/auth/Auth.module.css

@@ -0,0 +1,164 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--common-text-sub, #52525b);
+}
+
+.optionsRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: -4px;
+}
+
+.link {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--common-primary, #2563eb);
+  text-decoration: none;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+.helper {
+  margin: 0;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  color: var(--common-text-sub, #52525b);
+}
+
+.divider {
+  height: 1px;
+  background: var(--common-border, #e2e4ec);
+  border: none;
+  margin: 2px 0;
+}
+
+.backLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--common-text-sub, #52525b);
+  text-decoration: none;
+  align-self: center;
+}
+
+.backLink:hover {
+  color: var(--common-text, #18181b);
+}
+
+.otpRow {
+  display: flex;
+  gap: 8px;
+}
+
+.otpInput {
+  width: 0;
+  flex: 1 1 0;
+}
+
+.otpInput input {
+  width: 100%;
+  height: 48px;
+  box-sizing: border-box;
+  border: 1px solid var(--common-border, #e2e4ec);
+  border-radius: var(--common-radius-md, 8px);
+  background: var(--common-bg, #fff);
+  color: var(--common-text, #18181b);
+  text-align: center;
+  font-size: 1.125rem;
+  font-weight: 700;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.otpInput input:focus-visible {
+  border-color: var(--common-primary, #2563eb);
+  box-shadow: 0 0 0 2px var(--common-primary-light, rgba(37, 99, 235, 0.15));
+}
+
+.resendRow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-size: 0.75rem;
+  color: var(--common-text-sub, #52525b);
+}
+
+.resendBtn {
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  font-weight: 600;
+  color: var(--common-primary, #2563eb);
+  cursor: pointer;
+}
+
+.resendBtn:disabled {
+  color: var(--common-text-disabled, #a1a1aa);
+  cursor: not-allowed;
+}
+
+.successBox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  text-align: center;
+  padding: 8px 0 4px;
+}
+
+.successIcon {
+  width: 44px;
+  height: 44px;
+  border-radius: 999px;
+  background: var(--common-primary-light, oklch(0.52 0.16 258 / 0.1));
+  color: var(--common-primary, #2563eb);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.successText {
+  margin: 0;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: var(--common-text-sub, #52525b);
+}
+
+.stepDots {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.stepDot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--common-border-strong, #cbd0df);
+}
+
+.stepDotActive {
+  background: var(--common-primary, #2563eb);
+}

package/template/src/pages/auth/AuthLayout.module.css

@@ -0,0 +1,85 @@
+.page {
+  min-height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  padding: 32px 16px;
+  background: var(--common-bg-subtle, #f8f8fa);
+}
+
+.card {
+  width: 100%;
+  max-width: 384px;
+  background: var(--common-bg, #fff);
+  border: 1px solid var(--common-border, #e2e4ec);
+  border-radius: var(--common-radius-lg, 12px);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(24, 24, 27, 0.06);
+  padding: 32px 28px 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+}
+
+.brandRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.logo {
+  width: 26px;
+  height: 26px;
+  flex: none;
+  border-radius: 7px;
+  background: var(--common-primary, oklch(0.62 0.15 258));
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8125rem;
+  font-weight: 800;
+}
+
+.brand {
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: var(--common-text, #18181b);
+  letter-spacing: -0.01em;
+}
+
+.heading {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.eyebrow {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--common-primary, #2563eb);
+  letter-spacing: 0.02em;
+}
+
+.title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--common-text, #18181b);
+  letter-spacing: -0.01em;
+}
+
+.subtitle {
+  margin: 0;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: var(--common-text-sub, #52525b);
+}
+
+.footer {
+  margin: 0;
+  font-size: 0.75rem;
+  color: var(--common-text-muted, #8b8b93);
+}

package/template/src/pages/auth/AuthLayout.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+export interface AuthLayoutProps {
+  title: string;
+  subtitle?: string;
+  eyebrow?: string;
+}
+
+defineProps<AuthLayoutProps>();
+</script>
+
+<template>
+  <div :class="$style.page">
+    <div :class="$style.card">
+      <div :class="$style.brandRow">
+        <span :class="$style.logo">A</span>
+        <span :class="$style.brand">백오피스</span>
+      </div>
+      <div :class="$style.heading">
+        <span v-if="eyebrow" :class="$style.eyebrow">{{ eyebrow }}</span>
+        <h1 :class="$style.title">{{ title }}</h1>
+        <p v-if="subtitle" :class="$style.subtitle">{{ subtitle }}</p>
+      </div>
+      <slot />
+    </div>
+    <p :class="$style.footer">© 2026 백오피스. All rights reserved.</p>
+  </div>
+</template>
+
+<style module src="./AuthLayout.module.css"></style>

package/template/src/pages/auth/LoginPage.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { Button } from 'm2m-uiux-vue/Button';
+import { Input } from 'm2m-uiux-vue/Input';
+import { Checkbox } from 'm2m-uiux-vue/Checkbox';
+import AuthLayout from './AuthLayout.vue';
+import styles from './Auth.module.css';
+
+const router = useRouter();
+
+const form = reactive({ id: '', password: '' });
+const keepSignedIn = ref(false);
+const idError = ref('');
+const passwordError = ref('');
+const submitting = ref(false);
+
+function validate() {
+  idError.value = form.id.trim() ? '' : '아이디를 입력해 주세요.';
+  passwordError.value = form.password ? '' : '비밀번호를 입력해 주세요.';
+  return !idError.value && !passwordError.value;
+}
+
+function submit() {
+  if (!validate() || submitting.value) return;
+  submitting.value = true;
+  window.setTimeout(() => {
+    submitting.value = false;
+    router.push({ path: '/verify-2fa', query: { id: form.id } });
+  }, 500);
+}
+</script>
+
+<template>
+  <AuthLayout eyebrow="ADMIN LOGIN" title="백오피스에 로그인" subtitle="관리자 계정 정보를 입력해 주세요.">
+    <form :class="styles.form" @submit.prevent="submit">
+      <label :class="styles.field">
+        <span :class="styles.label">아이디</span>
+        <Input v-model="form.id" placeholder="아이디를 입력하세요" :error="idError || undefined" autocomplete="username" />
+      </label>
+      <label :class="styles.field">
+        <span :class="styles.label">비밀번호</span>
+        <Input v-model="form.password" type="password" show-toggle placeholder="비밀번호를 입력하세요" :error="passwordError || undefined" autocomplete="current-password" />
+      </label>
+      <div :class="styles.optionsRow">
+        <Checkbox v-model="keepSignedIn" label="로그인 상태 유지" size="md" />
+        <RouterLink :class="styles.link" to="/reset-password">비밀번호를 잊으셨나요?</RouterLink>
+      </div>
+      <Button html-type="submit" size="lg" full-width :loading="submitting">로그인</Button>
+    </form>
+  </AuthLayout>
+</template>

package/template/src/pages/auth/PasswordResetPage.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { Button } from 'm2m-uiux-vue/Button';
+import { Input } from 'm2m-uiux-vue/Input';
+import AuthLayout from './AuthLayout.vue';
+import styles from './Auth.module.css';
+
+const router = useRouter();
+
+const step = ref<1 | 2 | 3>(1);
+const identify = reactive({ id: '', email: '' });
+const identifyErrors = reactive({ id: '', email: '' });
+const reset = reactive({ code: '', password: '', confirm: '' });
+const resetErrors = reactive({ code: '', password: '', confirm: '' });
+const submitting = ref(false);
+
+const heading = computed(() => {
+  if (step.value === 1) return { eyebrow: 'PASSWORD RESET', title: '비밀번호 초기화', subtitle: '가입 시 등록한 아이디와 이메일을 입력해 주세요.' };
+  if (step.value === 2) return { eyebrow: 'PASSWORD RESET', title: '새 비밀번호 설정', subtitle: '이메일로 전송된 인증코드와 새 비밀번호를 입력해 주세요.' };
+  return { eyebrow: 'PASSWORD RESET', title: '비밀번호가 변경되었습니다', subtitle: '새로운 비밀번호로 다시 로그인해 주세요.' };
+});
+
+function submitIdentify() {
+  identifyErrors.id = identify.id.trim() ? '' : '아이디를 입력해 주세요.';
+  identifyErrors.email = /.+@.+\..+/.test(identify.email) ? '' : '올바른 이메일 주소를 입력해 주세요.';
+  if (identifyErrors.id || identifyErrors.email) return;
+  submitting.value = true;
+  window.setTimeout(() => {
+    submitting.value = false;
+    step.value = 2;
+  }, 500);
+}
+
+function submitReset() {
+  resetErrors.code = reset.code.trim().length === 6 ? '' : '인증코드 6자리를 입력해 주세요.';
+  resetErrors.password = reset.password.length >= 8 ? '' : '비밀번호는 8자 이상이어야 합니다.';
+  resetErrors.confirm = reset.confirm && reset.confirm === reset.password ? '' : '비밀번호가 일치하지 않습니다.';
+  if (resetErrors.code || resetErrors.password || resetErrors.confirm) return;
+  submitting.value = true;
+  window.setTimeout(() => {
+    submitting.value = false;
+    step.value = 3;
+  }, 500);
+}
+
+function goLogin() {
+  router.push('/login');
+}
+</script>
+
+<template>
+  <AuthLayout :eyebrow="heading.eyebrow" :title="heading.title" :subtitle="heading.subtitle">
+    <div :class="styles.stepDots">
+      <span :class="[styles.stepDot, step >= 1 && styles.stepDotActive]" />
+      <span :class="[styles.stepDot, step >= 2 && styles.stepDotActive]" />
+      <span :class="[styles.stepDot, step >= 3 && styles.stepDotActive]" />
+    </div>
+
+    <form v-if="step === 1" :class="styles.form" @submit.prevent="submitIdentify">
+      <label :class="styles.field">
+        <span :class="styles.label">아이디</span>
+        <Input v-model="identify.id" placeholder="아이디를 입력하세요" :error="identifyErrors.id || undefined" />
+      </label>
+      <label :class="styles.field">
+        <span :class="styles.label">이메일</span>
+        <Input v-model="identify.email" type="email" placeholder="가입 시 등록한 이메일" :error="identifyErrors.email || undefined" autocomplete="email" />
+      </label>
+      <Button html-type="submit" full-width :loading="submitting">인증코드 받기</Button>
+      <RouterLink :class="styles.backLink" to="/login">← 로그인으로 돌아가기</RouterLink>
+    </form>
+
+    <form v-else-if="step === 2" :class="styles.form" @submit.prevent="submitReset">
+      <label :class="styles.field">
+        <span :class="styles.label">인증코드</span>
+        <Input v-model="reset.code" placeholder="이메일로 받은 인증코드 6자리" :max-length="6" :error="resetErrors.code || undefined" />
+      </label>
+      <label :class="styles.field">
+        <span :class="styles.label">새 비밀번호</span>
+        <Input v-model="reset.password" type="password" show-toggle placeholder="8자 이상 입력하세요" :error="resetErrors.password || undefined" autocomplete="new-password" />
+      </label>
+      <label :class="styles.field">
+        <span :class="styles.label">새 비밀번호 확인</span>
+        <Input v-model="reset.confirm" type="password" show-toggle placeholder="새 비밀번호를 다시 입력하세요" :error="resetErrors.confirm || undefined" autocomplete="new-password" />
+      </label>
+      <Button html-type="submit" full-width :loading="submitting">비밀번호 변경</Button>
+      <button type="button" :class="styles.backLink" style="border: none; background: none; cursor: pointer" @click="step = 1">← 이전 단계로</button>
+    </form>
+
+    <div v-else :class="styles.successBox">
+      <span :class="styles.successIcon">✓</span>
+      <p :class="styles.successText">비밀번호가 성공적으로 변경되었습니다.<br />새 비밀번호로 로그인해 주세요.</p>
+      <Button full-width @click="goLogin">로그인 화면으로 이동</Button>
+    </div>
+  </AuthLayout>
+</template>

package/template/src/pages/auth/TwoFactorPage.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { Button } from 'm2m-uiux-vue/Button';
+import { showToast } from '../../components/common';
+import AuthLayout from './AuthLayout.vue';
+import styles from './Auth.module.css';
+
+const route = useRoute();
+const router = useRouter();
+
+const loginId = computed(() => (typeof route.query.id === 'string' ? route.query.id : ''));
+const digits = ref<string[]>(['', '', '', '', '', '']);
+const inputs = ref<Array<HTMLInputElement | null>>([]);
+const error = ref('');
+const verifying = ref(false);
+const resendCooldown = ref(30);
+let timer: number | undefined;
+
+onMounted(() => {
+  inputs.value[0]?.focus();
+  timer = window.setInterval(() => {
+    if (resendCooldown.value > 0) resendCooldown.value -= 1;
+  }, 1000);
+});
+onBeforeUnmount(() => window.clearInterval(timer));
+
+function onInput(index: number, event: Event) {
+  const target = event.target as HTMLInputElement;
+  const value = target.value.replace(/[^0-9]/g, '').slice(-1);
+  digits.value[index] = value;
+  error.value = '';
+  if (value && index < digits.value.length - 1) inputs.value[index + 1]?.focus();
+}
+
+function onKeydown(index: number, event: KeyboardEvent) {
+  if (event.key === 'Backspace' && !digits.value[index] && index > 0) {
+    inputs.value[index - 1]?.focus();
+  }
+}
+
+function onPaste(event: ClipboardEvent) {
+  const text = event.clipboardData?.getData('text') ?? '';
+  const numbers = text.replace(/[^0-9]/g, '').slice(0, digits.value.length).split('');
+  if (!numbers.length) return;
+  event.preventDefault();
+  numbers.forEach((n, i) => (digits.value[i] = n));
+  const nextIndex = Math.min(numbers.length, digits.value.length - 1);
+  inputs.value[nextIndex]?.focus();
+}
+
+function resend() {
+  if (resendCooldown.value > 0) return;
+  resendCooldown.value = 30;
+  showToast({ message: '인증번호를 다시 전송했습니다.', type: 'success' });
+}
+
+function submit() {
+  const code = digits.value.join('');
+  if (code.length < digits.value.length) {
+    error.value = '인증번호 6자리를 모두 입력해 주세요.';
+    return;
+  }
+  verifying.value = true;
+  window.setTimeout(() => {
+    verifying.value = false;
+    router.push('/');
+  }, 500);
+}
+</script>
+
+<template>
+  <AuthLayout eyebrow="TWO-FACTOR AUTHENTICATION" title="2차 인증" :subtitle="loginId ? `${loginId} 계정으로 전송된 인증번호 6자리를 입력해 주세요.` : '등록된 인증 수단으로 전송된 인증번호 6자리를 입력해 주세요.'">
+    <form :class="styles.form" @submit.prevent="submit">
+      <div :class="styles.otpRow" @paste="onPaste">
+        <div v-for="(_, i) in digits" :key="i" :class="styles.otpInput">
+          <input
+            :ref="(el) => (inputs[i] = el as HTMLInputElement)"
+            :value="digits[i]"
+            inputmode="numeric"
+            maxlength="1"
+            :aria-label="`인증번호 ${i + 1}번째 자리`"
+            @input="onInput(i, $event)"
+            @keydown="onKeydown(i, $event)"
+          />
+        </div>
+      </div>
+      <p v-if="error" :class="styles.helper" style="color: var(--common-error, #dc2626)">{{ error }}</p>
+      <div :class="styles.resendRow">
+        <span>인증번호를 받지 못하셨나요?</span>
+        <button type="button" :class="styles.resendBtn" :disabled="resendCooldown > 0" @click="resend">{{ resendCooldown > 0 ? `재전송 (${resendCooldown}s)` : '재전송' }}</button>
+      </div>
+      <Button html-type="submit" full-width :loading="verifying">인증하기</Button>
+      <RouterLink :class="styles.backLink" to="/login">← 로그인으로 돌아가기</RouterLink>
+    </form>
+  </AuthLayout>
+</template>

package/template/src/pages/c2c/reports/ReportProcessingPage.vue

@@ -120,7 +120,7 @@ function reset() {
 }
 
 function goToLinkedAction() {
-  if (selected.value) window.location.href = selected.value.linkedAction;
+  if (selected.value && selected.value.linkedAction !== '-') router.push(selected.value.linkedAction);
 }
 
 function download() {

package/template/src/pages/cs/ConsultationsPage.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
 import { DataGrid } from '../../components/DataGrid';
 import type { GridRow } from '../../components/DataGrid/types';
 import { BUSINESS_BADGE_META, BUSINESS_SCOPES, type BusinessScope, type BusinessType } from '../../lib/business';
@@ -225,8 +226,9 @@ function register() {
   toastBriefly('상담 내역을 등록했습니다.');
 }
 
+const router = useRouter();
 function goToInquiries() {
-  window.location.href = '/cs/inquiries';
+  router.push('/cs/inquiries');
 }
 
 function reopenInquiry() {

package/template/src/pages/cs/CsHistoryDetailDrawer.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
 import drawer from '../ops/opsDrawerShared.module.css';
 import styles from './CsHistoryPage.module.css';
 import { useOutsideClose } from '../../lib/useOutsideClose';
@@ -20,8 +21,9 @@ const adjacent = computed(() => findAdjacent(props.log, props.all));
 const asideRef = ref<HTMLElement | null>(null);
 useOutsideClose(asideRef, () => emit('close'));
 
+const router = useRouter();
 function goTo(path: string) {
-  window.location.href = path;
+  router.push(path);
 }
 </script>