piratezon_new/app/pages/login/findIdComplete.vue

<template>
  <main class="user--main">
    <div class="join--container">
      <div class="title--wrap">
        <h1>아이디 찾기 완료</h1>
        <p class="mt--9">회원님의 아이디는 아래와 같습니다.</p>
      </div>

      <div v-if="result" class="login--wrap mt--25">
        <div class="find--result--wrap">
          <span class="result--label">아이디</span>
          <span class="result--bubble">{{ signupTypeLabel }}</span>
          <span class="result--txt">{{ result.username_masked }}</span>
          <span class="result--date">가입일: {{ formattedDate }}</span>
        </div>

        <div class="float--btn--wrap">
          <!-- 소셜 가입자만 해당 소셜 로그인 버튼 노출 -->
          <div v-if="result.signup_type !== 'local'" class="social--login--wrap">
            <ul class="social--login--list">
              <li v-if="result.signup_type === 'kakao'"><NuxtLink to="#" class="kakao">카카오톡</NuxtLink></li>
              <li v-if="result.signup_type === 'naver'"><NuxtLink to="#" class="naver">네이버</NuxtLink></li>
              <li v-if="result.signup_type === 'apple'"><NuxtLink to="#" class="apple">애플</NuxtLink></li>
            </ul>
          </div>
          <NuxtLink to="/login">로그인하기</NuxtLink>
          <NuxtLink
            v-if="result.signup_type === 'local'"
            :to="{ path: '/login/find', query: { tab: 'pw' } }"
            class="border--btn"
          >비밀번호 재설정하기</NuxtLink>
        </div>
      </div>

      <div v-else class="login--wrap mt--25">
        <p class="desc--p">조회 결과가 없습니다. 다시 시도해 주세요.</p>
        <div class="float--btn--wrap">
          <NuxtLink to="/login/find">다시 찾기</NuxtLink>
        </div>
      </div>
    </div>
  </main>
</template>

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

const result = ref(null)

const signupTypeLabel = computed(() => {
  const t = result.value?.signup_type
  if (t === 'kakao') return '카카오'
  if (t === 'naver') return '네이버'
  if (t === 'apple') return '애플'
  return '일반'
})

const formattedDate = computed(() => {
  const c = result.value?.created_at
  if (!c) return '-'
  const d = new Date(String(c).replace(' ', 'T'))
  if (isNaN(d.getTime())) return c
  const y = d.getFullYear()
  const m = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  return `${y}.${m}.${day}`
})

onMounted(() => {
  const raw = sessionStorage.getItem('find_id_result')
  if (raw) {
    try { result.value = JSON.parse(raw) } catch { result.value = null }
  }
})

onBeforeUnmount(() => {
  sessionStorage.removeItem('find_id_result')
})
</script>