<template>
  <main class="user--main">
    <div class="join--container">
      <div class="join--step--wrap">
        <div class="step--txt">
          <span class="color--blue">3 / 3</span> 완<span class="color--blue">료</span>
        </div>
        <div class="step--bar">
          <span class="active"></span>
          <span class="active"></span>
          <span class="active"></span>
        </div>
      </div>
      <div class="join--step3 mt--54">
        <div class="join--complete--wrap">
          <i class="ico"></i>
          <h2 class="mt--28">
            회원가입이 완료되었습니다.
          </h2>
          <p class="mt--14">파이럿존에 오신 것을 환영합니다! <br />첫 챌린지에 도전해보세요.</p>
        </div>
        <div class="join--benefit--wrap mt--32">
          <!-- TODO : 관리자 페이지에서 가입 보너스 설정 -->
          <h3 class="color--blue">🎁 신규 가입 혜택</h3>
          <p class="mt--8">포인트 <strong class="color--blue">1,000P</strong> 지급</p>
          <span class="mt--9">마이 > 인벤토리에서 확인</span>
        </div>
      </div>
    </div>

    <div class="float--btn--wrap">
      <NuxtLink to="/login">확인</NuxtLink>
    </div>
  </main>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const nickname = ref('')

onMounted(() => {
  // 가입 직후 전달된 닉네임 표시
  nickname.value = sessionStorage.getItem('signup_done_nickname') || ''
})

onBeforeUnmount(() => {
  // 화면 떠날 때 sessionStorage 정리
  sessionStorage.removeItem('signup_done_nickname')
})
</script>
