[Vue.js] 로그인 화면 훔쳐온 것

<template>
  <div class="login_layout_container">
    <div class="login_layout_container_login_info">
      <input v-model="userId" placeholder="아이디" clearable />
      <input v-model="userPassword" placeholder="비밀번호" clearable />
    </div>
    <button @click="loginApi(userPassword, userId, userName)" type="primary">로그인</button>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
} from 'vue';
import { useRoute, useRouter } from 'vue-router';

// import * as apis from '@apis';
import { routeHelper, cookieUtils } from '@utils';
import { example } from '@router/routePaths';

// const { requestAdminLogin } = apis.admin;

export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const loginInfo = reactive({
      userId: 'user1',
      userPassword: 'qwer1234',
    });

    const loginApi = async () => {
      try {
        // const res = await requestAdminLogin(loginInfo.userPassword, loginInfo.userId);

        cookieUtils.delCookie('accessToken');
        cookieUtils.delCookie('refreshToken');
        cookieUtils.setCookie('accessToken', '초기 엑세스 쿠키', 60);
        cookieUtils.setCookie('refreshToken', '초기 리프레시 쿠키', 60 * 24 * 7);

        const param = route.params.refreshTokenEnd;
        if (param !== undefined) {
          console.log('이전에 작업 하던 페이지로 리다이렉션');
          router.go(-1);
        } else {
          router.push({
            name: routeHelper.getRouteName(example),
          });
        }
      } catch (error) {
        console.error('error', error);
      }
    };

    return {
      ...toRefs(loginInfo),
      loginApi,
    };
  },

});
</script>

<style lang="scss" scoped>
.login_layout_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color: #fff;

  .login_layout_container_login_info {
    display: flex;
    flex-direction: column;
    width: 500px;
  }
}
</style>