autoflow-web-console/src/pages/LoginView.vue

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { storage } from "@/utils/storage";
import logo from "@/assets/wordmark.png";

import logo2 from "@/assets/workflow.png";
import { UserManagerService } from "@/components/service/management/UserManagerService";
import { TokenService } from "@/components/service/token/tokenService";
const API_URL = import.meta.env.VITE_APP_API_SERVER_URL;
const router = useRouter();

const data = ref({
  form: false,
  username: "",
  password: "",
  loading: false,
  snackbar: false,
  snackbarText: "",
  snackbarColor: "",
});

const resetForm = () => {
  data.value.userId = "";
  data.value.userPw = "";
  data.value.loading = false;
};

const resetLogin = () => {
  data.value.userId = "";
  data.value.userPw = "";
  data.value.loading = false;
};
const resetSignup = () => {
  data.value.username = "";
  data.value.email = "";
  data.value.role = [];
  data.value.password = "";
  data.value.loading = false;
};
const signIn = () => {
  const payload = {
    username: data.value.username,
    password: data.value.password,
  };

  UserManagerService.signIn(payload)
    // .then((res) => TokenService.refreshToken().then(() => res))
    .then((res) => {
      storage.setAuth(res.data);
      router.push("/select");
    })
    .catch((err) => {
      if (err.response?.status === 401) {
        data.value.snackbarText = "아이디 또는 비밀번호가 올바르지 않습니다.";
      } else {
        data.value.snackbarText = "서버 에러가 발생했습니다.";
      }
      data.value.snackbarColor = "red";
      data.value.snackbar = true;
    });
};
</script>

<template>
  <v-container :fluid="true" class="pa-0">
    <v-sheet
      class="background-image w-100 h-screen d-flex align-center justify-center flex-column"
    >
      <v-card flat class="bg-transparent d-flex align-center flex-column">
        <v-card
          class="mx-auto pa-10 mb-4 login-box rounded-lg d-flex flex-column"
          style="min-width: 450px !important"
          density="comfortable"
        >
          <div class="mb-4 w-100 d-flex justify-center">
            <div
              class="bg-transparent rounded-circle pa-2"
              style="border: 1.8px solid #398bec"
            >
              <v-icon class="text-primary">mdi-shield-key-outline</v-icon>
            </div>
          </div>
          <div class="text-h5 pb-2 text-center font-weight-bold text-primary">
            Autoflow Web Console
          </div>

          <v-form v-model="data.form" @submit.prevent="signIn" class="mt-3">
            <v-text-field
              v-model="data.username"
              :readonly="data.loading"
              class="mb-2"
              variant="outlined"
              color="secondary"
              placeholder="아이디를 입력해주세요."
            ></v-text-field>

            <v-text-field
              v-model="data.password"
              :readonly="data.loading"
              type="password"
              variant="outlined"
              color="secondary"
              class="mb-2"
              placeholder="비밀번호를 입력해주세요."
            ></v-text-field>

            <v-btn
              :disabled="!data.form"
              :loading="data.loading"
              block
              color="primary"
              size="large"
              type="submit"
              variant="flat"
            >
              login
            </v-btn>
          </v-form>

          <div class="mt-4 text-center">
            <span>계정이 없으십니까?</span>
            <router-link
              to="/signup"
              class="ml-2 font-weight-medium"
              style="color: #90caf9; text-decoration: none"
            >
              SignUp
            </router-link>
          </div>
        </v-card>
        <!-- 회원가입 -->
      </v-card>

      <v-sheet
        class="position-absolute w-100 bg-transparent pa-4"
        style="bottom: 0; left: 0"
      >
        <v-sheet class="bg-shades-transparent d-flex align-end"
          >Copyright © 2025 Autoflow Web Console
        </v-sheet>
      </v-sheet>
      <v-sheet
        class="position-absolute w-100 bg-transparent pa-4"
        style="bottom: 0; right: 0"
      >
        <v-sheet class="bg-shades-transparent d-flex justify-end">
          <img :src="logo" style="width: 5%" />
        </v-sheet>
      </v-sheet>
    </v-sheet>
  </v-container>

  <v-snackbar
    v-model="data.snackbar"
    timeout="2000"
    location="button"
    :color="data.snackbarColor"
  >
    {{ data.snackbarText }}
    <template #actions>
      <v-btn variant="text" @click="data.snackbar = false"> 닫기 </v-btn>
    </template>
  </v-snackbar>
</template>

<style scoped>
.login-box {
  background-color: rgba(18, 18, 18, 0.4); /* 흰색 배경에 30% 불투명도 */
  backdrop-filter: blur(10px); /* 배경 블러 효과 */
}

.background-image {
  background-image:
    linear-gradient(
      90deg,
      rgba(19, 18, 18, 0.5),
      rgba(19, 18, 18, 0.3),
      rgba(19, 18, 18, 0.3),
      rgba(19, 18, 18, 0.5)
    ),
    url("@/assets/4117551.jpg"); /* 배경 이미지 경로 */
  background-size: cover; /* 이미지가 화면을 꽉 채우도록 설정 */
  background-position: center; /* 이미지 중앙 정렬 */
  background-repeat: no-repeat; /* 이미지 반복 방지 */
  min-height: 100vh; /* 화면 전체 높이 설정 */
}
</style>