influence/pages/auth/join.vue

<template>
  <div class="login-wrap type--join">
    <!-- header -->
    <div class="login--header">
      <div class="login--header--l">
        <div class="logo">
          <!-- prettier-ignore  -->
          SHOPDELI
        </div>
      </div>
      <div class="login--header--r"></div>
    </div>
    <!-- login -->
    <div class="login-box type--join">
      <div class="login-r">
        <!-- <h2 class="mk--title"></h2> -->
        <div class="tit-login">
          <strong>{{ titleh }} 회원가입</strong>
          <!-- <span><i>*</i>필수입력 항목</span> -->
        </div>

        <div v-show="form.formValue0 === 'Y'" class="login-input-wrap">
          <div class="txt-field-box">
            <v-text-field
              :disabled="useStore.getSnsTempData?.ID ? true : false"
              v-model="form.formValue1"
              placeholder="아이디를 입력해주세요"
              class="custom-input"
              @blur="checkId"
            ></v-text-field>
            <v-btn v-if="!useStore.getSnsTempData?.ID" class="ml-2 custom-btn mini btn-purple" @click="checkId"
              >중복확인</v-btn
            >
          </div>

          <div class="txt-field-box">
            <v-text-field
              v-model="form.formValue2"
              :type="visible ? 'text' : 'password'"
              placeholder="비밀번호를 입력해주세요."
              class="custom-input"
              id="password"
            ></v-text-field>
            <i
              class="ico-eye"
              @click.stop="toggleVisibility"
              :class="visible ? 'eye-on' : 'eye-off'"
            ></i>
            <i class="ico"></i>
          </div>

          <div class="txt-field-box">
            <v-text-field
              v-model="form.formValue3"
              :type="visible ? 'text' : 'password'"
              placeholder="비밀번호를 한 번 더 입력해주세요."
              class="custom-input"
            ></v-text-field>
            <i
              class="ico-eye"
              @click.stop="toggleVisibility"
              :class="visible ? 'eye-on' : 'eye-off'"
            ></i>
            <i class="ico"></i>
          </div>

          <div class="txt-field-box">
            <v-text-field
              v-model="form.formValue4"
              :maxlength="20"
              :counter="20"
              :placeholder="'닉네임을 입력해주세요.'"
              class="custom-input"
            ></v-text-field>
          </div>

          <div class="txt-field-box">
            <v-text-field
              v-model="form.formValue5"
              :disabled="useStore.getSnsTempData?.NAME ? true : false"
              :maxlength="20"
              :counter="20"
              placeholder="이름을 입력해주세요"
              class="custom-input"
            ></v-text-field>
          </div>

          <div class="txt-field-box">
            <v-select
              v-model="form.formValue6"
              :items="form.formValueItems6"
              item-title="text"
              item-value="value"
              class="custom-select"
            ></v-select>
          </div>
          <div class="txt-field-box">
            <v-text-field
              v-model="form.formValue7"
              placeholder="소셜 ID 또는 주소를 입력해주세요."
              class="custom-input"
            ></v-text-field>
          </div>

          <div class="txt-field-box phone">
            <v-text-field
              placeholder=""
              class="custom-input"
              v-model="form.formValue8"
              :maxlength="4"
            ></v-text-field>
            -
            <v-text-field
              placeholder="1234"
              class="custom-input"
              v-model="form.formValue9"
              :maxlength="4"
            ></v-text-field>
            -
            <v-text-field
              placeholder="5678"
              class="custom-input"
              v-model="form.formValue10"
              :maxlength="4"
            ></v-text-field>
          </div>

          <div class="txt-field-box email">
            <v-text-field
              v-model="form.formValue12"
              :disabled="useStore.getSnsTempData?.EMAIL"
              class="custom-input"
              placeholder=""
            ></v-text-field>
            <span>@</span>
            <v-combobox
              :disabled="useStore.getSnsTempData?.EMAIL ? true : false"
              v-model="form.formValue11"
              :items="['gmail.com', 'naver.com', 'daum.net', 'hotmail.com', 'yahoo.com']"
              placeholder="도메인 선택 또는 직접 입력"
              class="custom-select"
            ></v-combobox>
          </div>

          <div class="d-flex agree--box">
            <v-checkbox hide-details class="custom-check type2" v-model="formVendor.formValue13" @click="handlePrivacyModal">
              <template v-slot:label>개인정보약관동의(필수)</template>
            </v-checkbox>
            <v-checkbox hide-details class="custom-check type2" v-model="formVendor.formValue14" @click="handleThirdPartyModal">
              <template v-slot:label>제3자 정보동의(선택)</template>
            </v-checkbox>
          </div>

          <!-- <div class="txt-field-box">
            <v-textarea
              v-model="form.formValue13"
              placeholder="자기소개를 입력해주세요. 벤더사들이 참고할 수 있도록 작성해주세요."
              class="custom-textarea"
              rows="3"
            ></v-textarea>
          </div> -->
        </div>

        <div v-show="form.formValue0 === 'N'" class="login-input-wrap">
          <div class="txt-field-box">
            <v-text-field
              v-model="formVendor.formValue1"
              placeholder="아이디를 입력해주세요"
              class="custom-input"
            ></v-text-field>
            <v-btn
              v-if="!useStore.getSnsTempData?.ID"
              class="ml-2 custom-btn mini btn-purple"
              @click="checkIdVendor"
              >중복확인</v-btn
            >
          </div>

          <div class="txt-field-box">
            <v-text-field
              v-model="formVendor.formValue2"
              :type="visible ? 'text' : 'password'"
              placeholder="패스워드를 입력해주세요."
              class="custom-input"
              id="password"
            ></v-text-field>
            <i
              class="ico-eye"
              @click.stop="toggleVisibility"
              :class="visible ? 'eye-on' : 'eye-off'"
            ></i>
            <i class="ico"></i>
          </div>

          <div class="txt-field-box">
            <v-text-field
              v-model="formVendor.formValue3"
              :type="visible ? 'text' : 'password'"
              placeholder="패스워드 확인"
              class="custom-input"
            ></v-text-field>
            <i
              class="ico-eye"
              @click.stop="toggleVisibility"
              :class="visible ? 'eye-on' : 'eye-off'"
            ></i>
            <i class="ico"></i>
          </div>

          <div class="txt-field-box">
            <v-text-field
              v-model="formVendor.formValue4"
              :maxlength="20"
              :counter="20"
              placeholder="회사명"
              class="custom-input"
            ></v-text-field>
          </div>

          <div class="txt-field-box">
            <v-text-field
              v-model="formVendor.formValue5"
              :maxlength="20"
              :counter="20"
              placeholder="담당자 명"
              class="custom-input"
            ></v-text-field>
          </div>

          <div class="txt-field-box phone">
            <v-text-field
              placeholder=""
              class="custom-input"
              v-model="formVendor.formValue8"
              :maxlength="4"
            ></v-text-field>
            -
            <v-text-field
              placeholder="1234"
              class="custom-input"
              v-model="formVendor.formValue9"
              :maxlength="4"
            ></v-text-field>
            -
            <v-text-field
              placeholder="5678"
              class="custom-input"
              v-model="formVendor.formValue10"
              :maxlength="4"
            ></v-text-field>
          </div>

          <div class="txt-field-box email">
            <v-text-field
              v-model="formVendor.formValue12"
              class="custom-input"
              placeholder=""
            ></v-text-field>
            <span>@</span>
            <v-combobox
              v-model="formVendor.formValue11"
              :items="['gmail.com', 'naver.com', 'daum.net', 'hotmail.com', 'yahoo.com']"
              placeholder="도메인 선택 또는 직접 입력"
              class="custom-select"
            ></v-combobox>
          </div>

          <div class="mt-5 d-flex agree--box">
            <v-checkbox class="custom-check type2" v-model="formVendor.formValue13" @click="handlePrivacyModal">
              <template v-slot:label>개인정보약관동의</template>
            </v-checkbox>
            <v-checkbox class="custom-check type2" v-model="formVendor.formValue14" @click="handleThirdPartyModal">
              <template v-slot:label>제3자 정보동의</template>
            </v-checkbox>
          </div>
        </div>

        <div class="login-btn-wrap">
          <v-btn
            v-show="form.formValue0 === 'Y'"
            class="custom-btn btn-blue"
            @click.stop="joinMember('influence')"
            >회원가입</v-btn
          >
          <v-btn
            v-show="typeParam === 'vendor'"
            class="custom-btn btn-blue"
            @click.stop="joinMember('vendor')"
            >회원가입</v-btn
          >
          <v-btn
            v-show="typeParam === 'brand'"
            class="custom-btn btn-blue"
            @click.stop="joinMember('brand')"
            >회원가입</v-btn
          >
        </div>
      </div>
    </div>

    <!-- footer -->
    <div class="login-footer">
      <div class="login--footer--l">
        <p>COPYRIGHT@2025 SHOPDELI INC. ALL RIGHTS RESERVED.</p>
        <p>마포구 합정동</p>
      </div>
    </div>

    <!-- 개인정보 약관 모달 -->
    <div v-if="showPrivacyModal" class="modal-overlay" @click="closePrivacyModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>개인정보 수집 및 이용 동의</h3>
          <button class="modal-close-btn" @click="closePrivacyModal">×</button>
        </div>
        <div class="modal-body">
          <div class="privacy-content">
            <h4>1. 개인정보 수집 목적</h4>
            <p>서비스 제공, 회원 관리, 고객 상담, 마케팅 활용</p>
            
            <h4>2. 수집하는 개인정보 항목</h4>
            <p>필수항목: 이름, 이메일, 전화번호, 회원구분</p>
            <p>선택항목: 닉네임, SNS 정보</p>
            
            <h4>3. 개인정보 보유 및 이용기간</h4>
            <p>회원 탈퇴 시까지 또는 법정 보존기간</p>
            
            <h4>4. 개인정보 제3자 제공</h4>
            <p>원칙적으로 개인정보를 제3자에게 제공하지 않습니다. 단, 법령에 의한 경우는 예외로 합니다.</p>
            
            <h4>5. 개인정보 처리 위탁</h4>
            <p>서비스 운영을 위해 필요한 경우 개인정보 처리를 위탁할 수 있습니다.</p>
            
            <h4>6. 개인정보 보호책임자</h4>
            <p>개인정보 보호책임자: 홍길동 (privacy@company.com)</p>
            
            <p class="privacy-notice">
              위의 개인정보 수집 및 이용에 대한 동의를 거부할 권리가 있습니다. 
              그러나 동의를 거부할 경우 서비스 이용이 제한될 수 있습니다.
            </p>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn-disagree" @click="disagreePrivacy">미동의</button>
          <button class="btn-agree" @click="agreePrivacy">동의</button>
        </div>
      </div>
    </div>

    <!-- 제3자 정보 제공 동의 모달 -->
    <div v-if="showThirdPartyModal" class="modal-overlay" @click="closeThirdPartyModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>제3자 정보 제공 동의</h3>
          <button class="modal-close-btn" @click="closeThirdPartyModal">×</button>
        </div>
        <div class="modal-body">
          <div class="privacy-content">
            <h4>1. 제공받는 자</h4>
            <p>협력업체, 마케팅 대행사</p>
            
            <h4>2. 제공하는 개인정보 항목</h4>
            <p>이름, 이메일, 전화번호, 관심사</p>
            
            <h4>3. 제공 목적</h4>
            <p>맞춤형 광고, 이벤트 정보 제공, 협력업체 서비스 안내</p>
            
            <h4>4. 보유 및 이용기간</h4>
            <p>제공 목적 달성 시까지 또는 동의 철회 시까지</p>
            
            <p class="privacy-notice">
              제3자 정보 제공에 대한 동의는 선택사항이며, 동의하지 않아도 기본 서비스 이용에는 제한이 없습니다.
            </p>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn-disagree" @click="disagreeThirdParty">미동의</button>
          <button class="btn-agree" @click="agreeThirdParty">동의</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  /************************
   *    import
   ************************/
      const { $log, $toast, $eventBus } = useNuxtApp();

  /************************
   *    layout setting
   ************************/
  definePageMeta({
    layout: "loginlayout",
  });

  /************************
   *    전역
   ************************/
  const titleh = ref("인플루언서");
  const useStore = useAuthStore();
  const randomString = ref("");
  
  // 모달 상태
  const showPrivacyModal = ref(false);
  const showThirdPartyModal = ref(false);
  
  // 중복확인 상태
  const isIdChecked = ref(false);
  const isIdCheckPassedInfluencer = ref(false);
  const isIdCheckPassedVendor = ref(false);
  
  // 비밀번호 표시/숨김 상태
  const visible = ref(false);

  //인플루언서 폼
  const form = ref({
    formValue0: "Y",
    formValue1: useStore.getSnsTempData?.ID || "", // 아이디
    formValue2: "", // 패스워드
    formValue3: "", // 패스워드 확인
    formValue4: "", // 닉네임
    formValue5: useStore.getSnsTempData?.NAME || "", // 이름
    formValue6: null, // 소셜 채널
    formValueItems6: [
      {
        text: "소셜 채널 선택",
        value: null,
        disabled: true,
      },
      {
        text: "유튜브",
        value: "youtube",
      },
      {
        text: "인스타그램",
        value: "instagram",
      },
      {
        text: "네이버 블로그",
        value: "naverblog",
      },
    ], // 소셜 채널 아이템
    formValue7: "", // 소셜 ID 또는 주소
    formValue8: "010", // 휴대폰1
    formValue9: "", // 휴대폰2
    formValue10: "", // 휴대폰3
    formValue11: null, // 이메일 도메인 (combobox)
    formValue12: "", // 이메일2
    formValue13: "", // 자기소개
  });

  //밴더 폼
  const formVendor = ref({
    formValue0: "",
    formValue1: "", // 아이디
    formValue2: "", // 패스워드
    formValue3: "", // 패스워드 확인
    formValue4: "", // 닉네임
    formValue5: "", // 이름
    formValue6: "", // 소셜 채널
    formValue7: "", // 소셜 ID 또는 주소
    formValue8: "010", // 휴대폰1
    formValue9: "", // 휴대폰2
    formValue10: "", // 휴대폰3
    formValue11: null, // 이메일 도메인 (combobox)
    formValue12: "",
    formValue13: "", // 개인정보약관동의
    formValue14: "", // 제3자 정보동의
  });

  /************************
   *    함수
   ************************/

  const generateRandomAlphanumeric = (length) => {
    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    let result = "";
    const charsLength = chars.length;
    for (let i = 0; i < length; i++) {
      result += chars.charAt(Math.floor(Math.random() * charsLength));
    }
    return result;
  };

  // 비밀번호 표시/숨김 토글
  const toggleVisibility = () => {
    visible.value = !visible.value;
  };

  const checkId = async () => {
    if (!form.value.formValue1) {
      $toast.error("아이디를 입력해주세요.");
      return;
    }

    // 아이디 형식 검사 (영문, 숫자 조합 6~20자)
    const idRegex = /^[a-zA-Z0-9]{6,20}$/;
    if (!idRegex.test(form.value.formValue1)) {
      $toast.error("아이디는 영문, 숫자 조합 6~20자로 입력해주세요.");
      return;
    }

    try {
      const response = await useAxios().post("/auth/checkId", {
        id: form.value.formValue1,
        type: "influence",
      });

      if (response.data.isDuplicate) {
        $toast.error("이미 사용중인 아이디입니다.");
        isIdCheckPassedInfluencer.value = false;
      } else {
        $toast.success("사용 가능한 아이디입니다.");
        isIdCheckPassedInfluencer.value = true;
      }
    } catch (error) {
      console.error("ID check error:", error);
      $toast.error("아이디 중복 확인 중 오류가 발생했습니다.");
      isIdCheckPassedInfluencer.value = false;
    }
  };

  const checkIdVendor = async () => {
    if (!formVendor.value.formValue1) {
      $toast.error("아이디를 입력해주세요.");
      return;
    }

    // 아이디 형식 검사 (영문, 숫자 조합 6~20자)
    const idRegex = /^[a-zA-Z0-9]{6,20}$/;
    if (!idRegex.test(formVendor.value.formValue1)) {
      $toast.error("아이디는 영문, 숫자 조합 6~20자로 입력해주세요.");
      return;
    }

    try {
      const response = await useAxios().post("/auth/checkId", {
        id: formVendor.value.formValue1,
        type: typeParam.value,
      });

      if (response.data.isDuplicate) {
        $toast.error("이미 사용중인 아이디입니다.");
        isIdCheckPassedVendor.value = false;
      } else {
        $toast.success("사용 가능한 아이디입니다.");
        isIdCheckPassedVendor.value = true;
      }
    } catch (error) {
      console.error("ID check error:", error);
      $toast.error("아이디 중복 확인 중 오류가 발생했습니다.");
      isIdCheckPassedVendor.value = false;
    }
  };
  // 회원가입 전에 유효성 검사
  const joinMember = async (id_type) => {
    // 필수값 검사
    if (id_type === "influence") {
      // 인플루언서 필수값 검사
      if (!form.value.formValue1) {
        $toast.error("아이디를 입력해주세요.");
        return;
      }
      if (!form.value.formValue2) {
        $toast.error("비밀번호를 입력해주세요.");
        return;
      }
      if (!form.value.formValue3) {
        $toast.error("비밀번호 확인을 입력해주세요.");
        return;
      }
      if (form.value.formValue2 !== form.value.formValue3) {
        $toast.error("비밀번호가 일치하지 않습니다.");
        return;
      }
      if (!form.value.formValue4) {
        $toast.error("닉네임을 입력해주세요.");
        return;
      }
      if (!form.value.formValue5) {
        $toast.error("이름을 입력해주세요.");
        return;
      }
      if (!form.value.formValue8 || !form.value.formValue9 || !form.value.formValue10) {
        $toast.error("연락처를 입력해주세요.");
        return;
      }
      if (!form.value.formValue12) {
        $toast.error("이메일을 입력해주세요.");
        return;
      }
      
      // 개인정보약관동의 필수 체크
      if (!formVendor.value.formValue13) {
        $toast.error("개인정보약관동의는 필수입니다.");
        return;
      }
      
      // SNS 가입이 아닌 경우에만 아이디 중복확인 체크
      if (!useStore.getSnsTempData?.ID && !isIdCheckPassedInfluencer.value) {
        $toast.error("아이디 중복확인을 먼저 해주세요.");
        return;
      }
    } else if (id_type === "vendor" || id_type === "brand") {
      // 벤더/브랜드 필수값 검사
      if (!formVendor.value.formValue1) {
        $toast.error("아이디를 입력해주세요.");
        return;
      }
      if (!formVendor.value.formValue2) {
        $toast.error("비밀번호를 입력해주세요.");
        return;
      }
      if (!formVendor.value.formValue3) {
        $toast.error("비밀번호 확인을 입력해주세요.");
        return;
      }
      if (formVendor.value.formValue2 !== formVendor.value.formValue3) {
        $toast.error("비밀번호가 일치하지 않습니다.");
        return;
      }
      if (!formVendor.value.formValue4) {
        $toast.error("회사명을 입력해주세요.");
        return;
      }
      if (!formVendor.value.formValue5) {
        $toast.error("담당자명을 입력해주세요.");
        return;
      }
      if (!formVendor.value.formValue8 || !formVendor.value.formValue9 || !formVendor.value.formValue10) {
        $toast.error("연락처를 입력해주세요.");
        return;
      }
      if (!formVendor.value.formValue12) {
        $toast.error("이메일을 입력해주세요.");
        return;
      }
      
      // 개인정보약관동의 필수 체크
      if (!formVendor.value.formValue13) {
        $toast.error("개인정보약관동의는 필수입니다.");
        return;
      }
      
      // SNS 가입이 아닌 경우에만 아이디 중복확인 체크
      if (!useStore.getSnsTempData?.ID && !isIdCheckPassedVendor.value) {
        $toast.error("아이디 중복확인을 먼저 해주세요.");
        return;
      }
    }

    let param = {
      id: "회원가입",
      title: "회원가입",
      content: "회원가입을 진행하시겠습니까?",
      yes: {
        text: "확인",
        isProc: true,
        param: "",
      },
      no: {
        text: "취소",
        isProc: false,
      },
    };
    
    // 현재 회원가입 타입 저장
    currentJoinType.value = id_type;
    
    $eventBus.emit("OPEN_CONFIRM_POP_UP", param);
    return;
  };

  // 실제 회원가입 처리 함수
  const processJoinMember = async (id_type) => {
    let _req = "";
    let _api = "";
    if (id_type === "influence") {
      _api = "/auth/joinmember";
      _req = {
        ID: form.value.formValue1,
        PASSWORD: form.value.formValue2,
        NAME: form.value.formValue5,
        NICK_NAME: form.value.formValue4 || "", //닉네임 없으면 빈문자
        PHONE: `${form.value.formValue8}-${form.value.formValue9}-${form.value.formValue10}`,
        EMAIL: `${form.value.formValue12}@${form.value.formValue11 || ''}`,
        SNS_TYPE: form.value.formValue6,
        SNS_LINK_ID: form.value.formValue7,
        ADD_INFO1: form.value.formValue13,
        PRIVACY_AGREE: formVendor.value.formValue13 ? "Y" : "N", // 개인정보약관동의
        THIRDPARTY_AGREE: formVendor.value.formValue14 ? "Y" : "N", // 제3자 정보동의
        GOOGLE_REFRESH_TOKEN: useStore.getSnsTempData?.GOOGLE_REFRESH_TOKEN || "",
        TYPE: useStore.getSnsTempData ? "1" : "0", // SNS 가입일경우 1, 일반회원 가입일경우 0
      };
    } else if (id_type === "vendor") {
      _api = "/auth/joinvendor";
      _req = {
        ID: formVendor.value.formValue1,
        PASSWORD: formVendor.value.formValue3,
        COMPANY_NAME: formVendor.value.formValue4,
        COMPANY_NUMBER: (randomString.value = generateRandomAlphanumeric(100)),
        NAME: formVendor.value.formValue5,
        HP: `${formVendor.value.formValue8}-${formVendor.value.formValue9}-${formVendor.value.formValue10}`,
        EMAIL: `${formVendor.value.formValue12}@${formVendor.value.formValue11 || ''}`,
        PRIVACY_AGREE: formVendor.value.formValue13 ? "Y" : "N", // 개인정보약관동의
        THIRDPARTY_AGREE: formVendor.value.formValue14 ? "Y" : "N", // 제3자 정보동의
      }
    } else {
      _api = "/auth/joinbrand";
      _req = {
        ID: formVendor.value.formValue1,
        PASSWORD: formVendor.value.formValue3,
        COMPANY_NAME: formVendor.value.formValue4,
        COMPANY_NUMBER: (randomString.value = generateRandomAlphanumeric(100)),
        NAME: formVendor.value.formValue5,
        HP: `${formVendor.value.formValue8}-${formVendor.value.formValue9}-${formVendor.value.formValue10}`,
        EMAIL: `${formVendor.value.formValue12}@${formVendor.value.formValue11 || ''}`,
        PRIVACY_AGREE: formVendor.value.formValue13 ? "Y" : "N", // 개인정보약관동의
        THIRDPARTY_AGREE: formVendor.value.formValue14 ? "Y" : "N", // 제3자 정보동의
      };
    }
    
    useAxios()
      .post(_api, _req)
      .then((res) => {
        $toast.success("회원가입이 완료되었습니다!");
        
        if (_req.TYPE === "1") {
          // SNS 가입일 경우
          useStore.setTempData("");
          setTimeout(() => {
            useUtil.setPageMove("/");
          }, 1500);
          return;
        }
        
        // 일반 회원가입 완료 후 메인페이지로 이동
        setTimeout(() => {
          useUtil.setPageMove("/");
        }, 1500);
      })
      .catch((error) => {
        if (error.response) {
          //console.log("status:", error.response.status, "data:", error.response.data);
          // 안전하게 errCode, message 접근
          const errData = error.response.data || {};
          const errCode = errData.errCode || errData.errorCode || errData.code || "";
          const errMsg = errData.message || "알 수 없는 오류가 발생했습니다.";
          //console.log("errCode:", errCode, "message:", errMsg);
        } else {
          //console.log("error:", error.message, error.code);
        }
        if (error.response?.status) {
          fnLoginSet(error.response.data.messages.message);
        }
        $log.debug("[join][fnIdPwCheck][error]");
      })
      .finally(() => {
        $log.debug("[join][fnIdPwCheck][finished]");
      });
  };

  // 현재 회원가입 타입을 저장하는 변수
  let currentJoinType = ref('');

  // 개인정보 약관 모달 함수들
  const handlePrivacyModal = (event) => {
    event.preventDefault();
    showPrivacyModal.value = true;
    // 체크 상태 초기화 (모달에서 동의해야만 체크됨)
    formVendor.value.formValue13 = false;
  };

  const closePrivacyModal = () => {
    showPrivacyModal.value = false;
  };

  const agreePrivacy = () => {
    formVendor.value.formValue13 = true;
    showPrivacyModal.value = false;
    $toast.success('개인정보 수집 및 이용에 동의했습니다.');
  };

  const disagreePrivacy = () => {
    formVendor.value.formValue13 = false;
    showPrivacyModal.value = false;
    $toast.info('개인정보 수집 및 이용에 동의하지 않았습니다.');
  };

  // 제3자 정보 제공 모달 함수들
  const handleThirdPartyModal = (event) => {
    event.preventDefault();
    showThirdPartyModal.value = true;
    // 체크 상태 초기화 (모달에서 동의해야만 체크됨)
    formVendor.value.formValue14 = false;
  };

  const closeThirdPartyModal = () => {
    showThirdPartyModal.value = false;
  };

  const agreeThirdParty = () => {
    formVendor.value.formValue14 = true;
    showThirdPartyModal.value = false;
    $toast.success('제3자 정보 제공에 동의했습니다.');
  };

  const disagreeThirdParty = () => {
    formVendor.value.formValue14 = false;
    showThirdPartyModal.value = false;
    $toast.info('제3자 정보 제공에 동의하지 않았습니다.');
  };

  /************************
   *    반응형 변수
   ************************/
  const route = useRoute();
  const typeParam = ref(route.query.type);

  /************************
   *    마운트
   ************************/
  // 아이디 변경 시 중복확인 상태 초기화
  watch(() => form.value.formValue1, () => {
    isIdCheckPassedInfluencer.value = false;
  });

  watch(() => formVendor.value.formValue1, () => {
    isIdCheckPassedVendor.value = false;
  });

  onMounted(() => {
    if(typeParam.value === "influence"){
      (form.value.formValue0 = "Y");
      titleh.value = "인플루언서"
    } else if(typeParam.value === "vendor"){
      (form.value.formValue0 = "N") ;
      titleh.value = "벤더사"
    } else {
      (form.value.formValue0 = "N") ;
      titleh.value = "브랜드사"
    }

    if (useStore.getSnsTempData?.EMAIL) {
      form.value.formValue12 = useStore.getSnsTempData.EMAIL;
      form.value.formValue11 = "direct"; // 이메일 직접입력으로 설정
    }

    // 팝업 확인 이벤트 리스너
    $eventBus.off('회원가입_PROC_YES');
    $eventBus.on('회원가입_PROC_YES', () => {
      processJoinMember(currentJoinType.value);
    });
  });
</script>

<style scoped>
/* 모달 스타일 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e0e0e0;
  background: #f8f9fa;
}

.modal-header h3 {
  margin: 0;
  color: #333;
  font-size: 1.2rem;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close-btn:hover {
  color: #333;
}

.modal-body {
  padding: 24px;
  max-height: 50vh;
  overflow-y: auto;
}

.privacy-content h4 {
  margin: 20px 0 8px 0;
  color: #333;
  font-size: 1rem;
  font-weight: 600;
}

.privacy-content h4:first-child {
  margin-top: 0;
}

.privacy-content p {
  margin: 8px 0;
  color: #666;
  line-height: 1.5;
}

.privacy-notice {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 6px;
  margin-top: 20px;
  font-size: 14px;
  color: #555;
}

.modal-footer {
  display: flex;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid #e0e0e0;
  background: #f8f9fa;
  justify-content: flex-end;
}

.btn-agree {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-agree:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-disagree {
  background: #f5f5f5;
  color: #666;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-disagree:hover {
  background: #e0e0e0;
}
</style>