<aside> 💡 1. navBar는 로그인 유무에따라 유저에게 보이는 화면이 다르다.

• 로그인 유저: 프로필 이미지
• 비로그인 유저: 회원 가입 및 로그인 버튼

2. 회원 가입 모달창

• 유저가 회원가입 버튼을 누르면 모달창이 켜진다. (모달창 외부를 누르면 종료된다.)
• 버튼을 누르면 유저가 기입한 정보를 서버로 보낸다.
• 정보가 유효하면 서버에 저장되고 토큰을 발급한다.
• 발급된 토큰을 localStorage에 저장하고 토큰을 활용하여 추가적으로 유저 프로필을 localStorage에 저장한다.
• 만약 정보가 유효하지 않았다면, 오류가 발생한다.
• 오류가 발생한 원인을 유저에게 알려준다.

3. 로그인 모달창

• 유저가 로그인 버튼을 누르면 모달창이 켜진다. (모달창 외부를 누르면 종료된다.)
• 버튼을 누르면 유저가 기입한 정보를 서버로 보낸다.
• 정보가 유효하면 토큰을 발급한다.
• 발급된 토큰을 localStorage에 저장하고 토큰을 활용하여 추가적으로 유저 프로필을 localStorage에 저장한다.
• 만약 로그인 실패가 되었다면 유저에게 알림을 보낸다.

</aside>

1. 모달 만들기

먼저 버튼을 누르거나 링크를 누르면 모달이 나오게 만들었다. 모달을 종료하는 방법은 외곽을 누르면 된다. 이때 @click.self 를 사용하면 해당 컴포넌트만 눌렀을 경우 콜백함수가 실행된다.

회원가입 모달은 App.vue에 놓고 v-if를 활용하여 조건부 랜더링을 했다. 버튼을 누르면 App.vue에 true를 emit한다. Vuex를 활용하여 저장할까 생각도 했지만, 전역적으로 사용할 데이터거나 중요한 데이터는 아닌 것 같아서 emit을 활용했다. (나중에 조금 후회했다.. )

// App.vue

<template>
  <div id="app">
    <nav-bar
      @show-sign-up-modal="showSignUpModal"
      @show-log-in-modal="showLogInModal"
      @show-profile-modal="showProfileModal"
    ></nav-bar>
    <router-view />
    <the-sign-up-modal
      v-if="signUp"
      class="modal"
      @hide-sign-up-modal="hideSignUpModal"
      @show-log-in-modal="showLogInModal"
    />
    <the-log-in-modal
      v-if="logIn"
      class="modal"
      @hide-log-in-modal="hideLogInModal"
      @show-sign-up-modal="showSignUpModal"
    ></the-log-in-modal>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import TheSignUpModal from "@/components/TheSignUpModal.vue";
import TheLogInModal from "@/components/TheLogInModal.vue";

export default {
  name: "App",
  data() {
    return {
      signUp: false,
      logIn: false,
      profileModal: false,
    };
  },
  components: { NavBar, TheSignUpModal, TheLogInModal, TheProfileModal },
  methods: {
    showSignUpModal(data) {
      this.signUp = data;
    },
    showLogInModal(data) {
      this.logIn = data;
    },
    hideSignUpModal(data) {
      this.signUp = data;
    },
    hideLogInModal(data) {
      this.logIn = data;
    },
  },
};
</script>

2. 데이터 저장

response를 console.log로 확인해보니 다음과 같은 결과를 알 수 있었다.

즉, response.data.key는 token을 의미한다. 오류창을 만들었다.