piratezon_new/app/pages/login/agree.vue

<template>
  <main class="user--main">
    <div class="join--container">
      <div class="join--step--wrap">
        <div class="step--txt">
          <span class="color--blue">1 / 3</span> 약관 동<span class="color--blue">의</span>
        </div>
        <div class="step--bar">
          <span class="active"></span>
          <span></span>
          <span></span>
        </div>
      </div>
      <div class="join--step1 mt--22">
        <div class="title--wrap">
          <h2>약관에 동의해주세요</h2>
        </div>
        <div class="join--wrap mt--26">
          <div class="all--check--wrap">
            <label>
              <input type="checkbox" v-model="allAgree">
              약관 전체 동의
            </label>
          </div>
          <div class="each--check--wrap mt--20">
            <div class="each--wrap">
              <label>
                <input type="checkbox" v-model="termsAgree">
                이용약관 <span class="color--blue">(필수)</span>
              </label>
              <button type="button">›</button>
            </div>
            <div class="each--wrap">
              <label>
                <input type="checkbox" v-model="privacyAgree">
                개인정보 수집 및 이용 안내 <span class="color--blue">(필수)</span>
              </label>
              <button type="button">›</button>
            </div>
            <div class="each--wrap">
              <label>
                <input type="checkbox" v-model="marketingAgree">
                이벤트 및 SMS 등 수신 <span>(선택)</span>
              </label>
              <button type="button">›</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="float--btn--wrap">
      <a
        href="#"
        :class="{ disabled: !canProceed }"
        @click.prevent="goNext"
      >다음</a>
    </div>

    <AppAlertModal
      v-model="showErrorModal"
      icon-type="error"
      title="약관 동의 필요"
      message="필수 약관에 동의해주세요."
    />
  </main>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import AppAlertModal from '~/components/AppAlertModal.vue'

const router = useRouter()

const termsAgree = ref(false)      // 이용약관 (필수)
const privacyAgree = ref(false)    // 개인정보 (필수)
const marketingAgree = ref(false)  // 이벤트/SMS (선택)
const showErrorModal = ref(false)

// 전체 동의 — 양방향 동기화
const allAgree = computed({
  get: () => termsAgree.value && privacyAgree.value && marketingAgree.value,
  set: (val) => {
    termsAgree.value = val
    privacyAgree.value = val
    marketingAgree.value = val
  }
})

// 필수 2개 체크되면 다음 활성화
const canProceed = computed(() => termsAgree.value && privacyAgree.value)

const goNext = () => {
  if (!canProceed.value) {
    showErrorModal.value = true
    return
  }
  // 마케팅 동의 여부를 sessionStorage로 전달
  sessionStorage.setItem('signup_marketing', marketingAgree.value ? 'Y' : 'N')
  router.push('/login/join')
}
</script>