sb-front/src/components/SignupModal.vue

<script setup>
import { reactive, ref, watch, computed, onMounted, onUnmounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useUiStore } from '@/stores/ui'
import { TERMS_OF_SERVICE, PRIVACY_POLICY } from '@/constants/terms'

const auth = useAuthStore()
const ui = useUiStore()

const form = reactive({ loginId: '', password: '', passwordConfirm: '', name: '', email: '' })
const loading = ref(false)
const error = ref(null)

// 약관 동의 상태
const agree = reactive({ terms: false, privacy: false })
const openDoc = ref('') // 'terms' | 'privacy' | '' (열린 전문)
const allAgreed = computed({
  get: () => agree.terms && agree.privacy,
  set: (v) => {
    agree.terms = v
    agree.privacy = v
  },
})
function toggleDoc(key) {
  openDoc.value = openDoc.value === key ? '' : key
}

// 팝업이 열릴 때마다 입력값 초기화
watch(
  () => ui.signupOpen,
  (open) => {
    if (open) {
      Object.assign(form, { loginId: '', password: '', passwordConfirm: '', name: '', email: '' })
      agree.terms = false
      agree.privacy = false
      openDoc.value = ''
      error.value = null
    }
  },
)

async function handleSignup() {
  error.value = null
  if (!form.loginId || !form.password || !form.name) {
    error.value = '아이디, 비밀번호, 이름은 필수입니다.'
    return
  }
  if (form.password.length < 8) {
    error.value = '비밀번호는 8자 이상이어야 합니다.'
    return
  }
  if (form.password !== form.passwordConfirm) {
    error.value = '비밀번호가 일치하지 않습니다.'
    return
  }
  if (!agree.terms || !agree.privacy) {
    error.value = '필수 약관에 동의해 주세요.'
    return
  }
  loading.value = true
  try {
    await auth.signup({
      loginId: form.loginId,
      password: form.password,
      name: form.name,
      email: form.email || null,
    })
    alert('회원가입이 완료되었습니다. 로그인해 주세요.')
    ui.openLogin() // 회원가입 닫고 로그인 팝업으로 전환
  } catch (e) {
    error.value = e.response?.data?.message || '회원가입에 실패했습니다.'
  } finally {
    loading.value = false
  }
}

function onKeydown(e) {
  if (e.key === 'Escape' && ui.signupOpen) ui.closeSignup()
}
onMounted(() => window.addEventListener('keydown', onKeydown))
onUnmounted(() => window.removeEventListener('keydown', onKeydown))
</script>

<template>
  <Teleport to="body">
    <Transition name="fade">
      <div v-if="ui.signupOpen" class="modal-backdrop" @click.self="ui.closeSignup()">
        <div class="modal" role="dialog" aria-modal="true" aria-label="회원가입">
          <button class="close" type="button" aria-label="닫기" @click="ui.closeSignup()">×</button>
          <h2>회원가입</h2>

          <form class="form" @submit.prevent="handleSignup">
            <input v-model="form.loginId" type="text" placeholder="아이디 (4~50자)" autocomplete="username" :disabled="loading" />
            <input v-model="form.password" type="password" placeholder="비밀번호 (8자 이상)" autocomplete="new-password" :disabled="loading" />
            <input v-model="form.passwordConfirm" type="password" placeholder="비밀번호 확인" autocomplete="new-password" :disabled="loading" />
            <input v-model="form.name" type="text" placeholder="이름" :disabled="loading" />
            <input v-model="form.email" type="email" placeholder="이메일 (선택)" autocomplete="email" :disabled="loading" />

            <!-- 약관 동의 -->
            <div class="agree">
              <label class="agree-all">
                <input v-model="allAgreed" type="checkbox" :disabled="loading" />
                <span>약관에 모두 동의합니다.</span>
              </label>

              <div class="agree-row">
                <label class="agree-item">
                  <input v-model="agree.terms" type="checkbox" :disabled="loading" />
                  <span><b class="req">[필수]</b> 이용약관 동의</span>
                </label>
                <button type="button" class="doc-toggle" @click="toggleDoc('terms')">
                  {{ openDoc === 'terms' ? '닫기' : '보기' }}
                </button>
              </div>
              <pre v-if="openDoc === 'terms'" class="doc-box">{{ TERMS_OF_SERVICE }}</pre>

              <div class="agree-row">
                <label class="agree-item">
                  <input v-model="agree.privacy" type="checkbox" :disabled="loading" />
                  <span><b class="req">[필수]</b> 개인정보 수집·이용 동의</span>
                </label>
                <button type="button" class="doc-toggle" @click="toggleDoc('privacy')">
                  {{ openDoc === 'privacy' ? '닫기' : '보기' }}
                </button>
              </div>
              <pre v-if="openDoc === 'privacy'" class="doc-box">{{ PRIVACY_POLICY }}</pre>
            </div>

            <button class="submit" type="submit" :disabled="loading">{{ loading ? '처리 중...' : '회원가입' }}</button>
          </form>

          <p v-if="error" class="msg error">{{ error }}</p>

          <p class="links">
            이미 계정이 있으신가요?
            <a href="#" @click.prevent="ui.openLogin()">로그인</a>
          </p>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<style scoped>
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 1rem;
}
.modal {
  position: relative;
  width: 100%;
  max-width: 360px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
h2 {
  margin-bottom: 1.25rem;
  font-size: 1.3rem;
  text-align: center;
}
.form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.form input {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-background-soft);
  color: var(--color-text);
}
.submit {
  padding: 0.6rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-background-soft);
  color: var(--color-text);
  cursor: pointer;
}
.submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* 약관 동의 */
.agree {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.6rem 0.2rem 0.2rem;
  border-top: 1px solid var(--color-border);
  margin-top: 0.1rem;
}
.agree-all {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.agree-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.agree-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.agree-item input {
  flex-shrink: 0;
}
.req {
  color: hsla(160, 100%, 37%, 1);
}
.doc-toggle {
  flex-shrink: 0;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-background-soft);
  color: var(--color-text);
  font-size: 0.78rem;
  cursor: pointer;
}
.doc-box {
  max-height: 180px;
  overflow-y: auto;
  margin: 0;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-background-soft);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.76rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.links {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.9rem;
}
.msg {
  margin: 0.75rem 0 0;
}
.msg.error {
  color: #c0392b;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.18s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>