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">{{ titleh }}</h2>
        <div class="join--type">
          <v-radio-group v-model="form.formValue0" row inline class="custom-radio type2">
            <v-radio value="Y" label="인플루언서"></v-radio>
            <v-radio value="N" label="벤더"></v-radio>
          </v-radio-group>
        </div>
        <div class="tit-login">
          <strong>회원가입</strong>
          <span><i>*</i>필수입력 항목</span>
        </div>
        <div 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"
            ></v-text-field>
          </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"
            ></v-text-field>
            -
            <v-text-field
              placeholder="1234"
              class="custom-input"
              v-model="form.formValue9"
            ></v-text-field>
            -
            <v-text-field
              placeholder="5678"
              class="custom-input"
              v-model="form.formValue10"
            ></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 v-if="form.formValue11 != 'direct'">@</span>
            <v-select
              :disabled="useStore.getSnsTempData?.EMAIL ? true : false"
              v-model="form.formValue11"
              :items="form.formValueItems11"
              item-title="text"
              item-value="value"
              class="custom-select"
            ></v-select>
          </div>

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

        <div class="login-btn-wrap">
          <v-btn class="custom-btn btn-blue" @click.stop="joinMember">회원가입</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>
</template>
<script setup>
  /************************
   *    import
   ************************/
  import apiUrl from "@/composables/useApi";
  import { useI18n } from "vue-i18n";

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

  /************************
   *    전역
   ************************/
  const titleh = ref("인플루언서");
  const useStore = useAuthStore();

  //인플루언서 폼
  const form = ref({
    formValue0: "Y",
    formValue1: useStore.getSnsTempData?.ID || "", // 아이디
    formValue2: "", // 패스워드
    formValue3: "", // 패스워드 확인
    formValue4: "", // 닉네임
    formValue5: useStore.getSnsTempData?.NAME || "", // 이름
    formValue6: "소셜채널 선택", // 소셜 채널
    formValueItems6: [
      {
        text: "유튜브",
        value: "youtube",
      },
      {
        text: "인스타",
        value: "instagram",
      },
      {
        text: "네이버 블로그",
        value: "naverblog",
      },
      {
        text: "네이버 카페",
        value: "navercafe",
      },
      {
        text: "스마트스토어",
        value: "smartstore",
      },
    ], // 소셜 채널 아이템
    formValue7: "", // 소셜 ID 또는 주소
    formValue8: "010", // 휴대폰1
    formValue9: "", // 휴대폰2
    formValue10: "", // 휴대폰3
    formValue11: "email", // 이메일1
    formValueItems11: [
      {
        text: "이메일 선택",
        value: "email",
      },
      {
        text: "직접입력",
        value: "direct",
      },
      {
        text: "naver.com",
        value: "naver",
      },
      {
        text: "gmail.com",
        value: "gmail",
      },
      {
        text: "daum.net",
        value: "daum",
      },
    ], // 이메일 아이템
    formValue12: "", // 이메일2
    formValue13: "", // 자기소개
  });

  //밴더 폼
  const formVendor = ref({
    formValue0: "N",
    formValue1: "", // 아이디
    formValue2: "", // 패스워드
    formValue3: "", // 패스워드 확인
    formValue4: "", // 닉네임
    formValue5: "", // 이름
    formValue6: "소셜채널 선택", // 소셜 채널
  });

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

  const joinMember = () => {
    /*
      제출내용 :
      1. 인플루언서
        일반회원 인경우
        - 아이디
        - 패스워드
        - 패스워드 확인
        - 닉네임
        - 이름
        - 소셜 채널
        - 소셜 ID 또는 주소
        - 휴대폰 번호
        - 이메일
        - 자기소개


      2. 소셜계정일경우
        - 아이디 : 자동입력
        - 패스워드 : 비번은 미입력
        - 패스워드 확인 : 비번은 미입력
        - 닉네임
        - 이름 : 자동입력
        - 소셜 채널
        - 소셜 ID 또는 주소
        - 휴대폰 번호
        - 이메일 : 자동입력
        - 자기소개
    */

    // 여기에 폼 제출 로직을 추가하세요.
    let _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,
      SNS_TYPE: form.value.formValue6,
      SNS_LINK_ID: form.value.formValue7,
      ADD_INFO1: form.value.formValue13,
      GOOGLE_REFRESH_TOKEN: useStore.getSnsTempData?.GOOGLE_REFRESH_TOKEN || "",
      TYPE: useStore.getSnsTempData ? "1" : "0", // SNS 가입일경우 1, 일반회원 가입일경우 0
    };

    useAxios()
      .post("/auth/joinmember", _req)
      .then((res) => {
        if (_req.TYPE === "1") {
          // SNS 가입일 경우
          useStore.setTempData("");
        }
        useUtil.setPageMove("/");
      })
      .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]");
      });
  };

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

  watch(
    () => form.value.formValue0,
    (newValue) => {
      if (newValue === "Y") {
        titleh.value = "인플루언서";
      } else {
        titleh.value = "벤더";
      }
    }
  );
</script>