🔒 문제 상황

1. 로그인하지 않은 사용자가 어떠한 신청을 하려고 한다.
2. 신청 페이지에 들어간다.
3. 신청할 수 있는 목록은 5개가 있다.(A/B/C/D/E)
4. B를 클릭하여 B의 상세 신청 페이지로 접속한다.
5. 신청은 로그인 후에 가능하다.
6. [로그인 하고 신청하기] 버튼을 누른다.
7. 로그인 모달창이 뜬다.
8. 로그인을 완료한다.
9. 페이지가 새로고침이 된다. (데이터 반영)
   ※ 10. B의 상세 신청 페이지로 다시 돌아가지고 이후의 신청 프로세스를 진행한다.

여기서 내가 해결하고 싶었던건 새로고침이 되면서 모달창이 꺼지고 기본 신청 페이지로 돌아가지는 상황이였다. 만약 신청 가능 목록이 5개가 아닌 1000개, 10000개 였다면 사용자는 다시 원하는 신청 페이지를 찾아 들어가는게 번거로울 것이다. 아마.. 더 다양한 방법이 있겠지만.. 난 아래와 같이 해결해봤다.

🔑 문제 해결

1. B의 상세 페이지에서 로그인 하기 버튼을 누르면 B의 고유 id 값을 localStorage에 저장한다.

	localStorage.setItem("id", b)

2. 로그인이 완료되면 새로고침을 한다.

	this.$router.go()

3. 신청 페이지로 돌아와지면 created 단계에서 localStorage에 id 값이 있는지 판별한다.
   3-1. id 값이 없을 때 : 목록을 보여준다
   3-2. id 값이 있을 때 : 신청 상세 페이지를 보여준다.

  export default {
    created(){
      if(localStorage.getItem("id")){
          this.showDetail(localStorage.getItem("id")) // id 값으로 상세페이지를 띄우는 method
      }
    }
  }

4. 3.의 로직에서 신청이 끝났다거나, 다른 목록으로 돌아가거나 다른 페이지로 이동하는 등의 이슈가 발생하면 localStorage에서 id 값을 지운다. (불필요한 상황에서 신청 상세 페이지가 뜨지 않게 하기위함)

export default {
  created() {
    if(localStorage.getItem("id")){
		this.showDetail(localStorage.getItem("id")) // id 값으로 상세페이지를 띄우는 method
	}
  },
  methods: {
    handlePopstate(event) {
      localStorage.removeItem("id")
    }
  }
}

📌 배운점

created, mounted 등 vue 생성 주기에 따라 잘 활용해보자!