File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="content">
<div class="top-banner banner">
<div class="flex-column align-center justify-center content">
<h1 class="banner-title text-ct white" aria-live="assertive">회원가입</h1>
</div>
</div>
<PageNavigationBar />
<div class="pt100 pb100">
<div class="w1280">
<div class="top-zone">
<div class="mb24">
<ProgressBar :steps="step" :pageNumber="PageNumber" />
<div class="flex justify-between align-center mt40">
<div class="step-zone">
<p><span>{{ PageNumber }}단계 </span>/ 4단계</p>
</div>
<button class="small-btn darkg-border-btn" title="회원가입 매뉴얼 다운로드"
style="border-radius: 3rem;"
@click="$downloadFileByIdNoAuthCheck('FILE_0000000001', 'CMMN_FILE_0000000001', 'AI 디지털교과서 통합지원센터 회원가입 사용자매뉴얼.pdf', 'BBS_0000000032')">회원가입
매뉴얼</button>
</div>
</div>
</div>
<Terms @TermsSuccess="pageStatusWithAgree" v-show="PageNumber === 1" />
<div v-show="PageNumber === 2">
<div class="page-title mb40">
<h2 class="page-sub-title" aria-live="polite">본인인증</h2>
</div>
<div class="authentication border pd60">
<div class="authentication-info mb30 text-ct">
<p class="detail-bold mb5">본인인증 안내</p>
<p class="detail-text">본인명의로 등록된 휴대폰번호만 인증이 가능합니다.<br />
휴대폰 인증을 통한 가입을 원하시면 아래 버튼을 눌러 회원가입을 진행해주세요.</p>
</div>
<div class="flex justify-center">
<NiceM :service="'prov'" @revData="requestEvent" />
<!-- prov = 실제 호출 devf = 실패시 테스트, devs = 성공테스트 -->
</div>
</div>
</div>
<div class="join-zone" v-show="PageNumber === 3">
<div class="page-title mb40">
<h2 class="page-sub-title" aria-live="polite">회원정보 입력</h2>
</div>
<div class="user-type mb60">
<p class="type-content text-ct mb24"><strong class="middle-title">AI 디지털교과서
통합지원센터 회원가입을
환영합니다.</strong><br />
회원종류에 따라 가입절차가 다르니 반드시 본인이 해당하는 회원 유형을 선택해주세요.</p>
<ul class="user-tab flex justify-center" role="tablist" aria-label="user type tabs">
<div v-for="(user, idx) in userType" :key="idx"
:class="['gd-6', idx === 0 ? 'pl0' : 'pr0', userTypedisable && userActive !== idx ? 'user-disabled' : '']">
<li role="tab" :aria-selected="userActive === idx" :aria-controls="user.panel"
:id="user.id"
:class="{ 'user-item pd30 cursor': true, 'user-selected': userActive === idx }">
<router-link to="#"
@click.prevent="userTypedisable ? '' : userTypeActive(idx, user.label)"
@keydown.enter.space="userTypedisable ? '' : userTypeActive(idx, user.label)">
<img v-if="userActive === idx && user.label === '일반회원'"
src="../../../../resources/img/user_a.png" alt="일반회원 활성화 아이콘 " class="mb12">
<img v-else-if="userActive === idx && user.label === '기업회원'"
src="../../../../resources/img/company_a.png" alt="기업회원 활성화 아이콘 "
class="mb12">
<img v-else-if="user.label === '일반회원'"
src="../../../../resources/img/user_b.png" alt="일반회원 비활성화 아이콘" class="mb12">
<img v-else src="../../../../resources/img/company_b.png" alt="기업회원 비활성화 아이콘"
class="mb12">
<h3 class="text-ct mb15">{{ user.label }}</h3>
<p v-show="user.label === '기업회원'" class="small-text text-ct">가입하고자 하는 기업의 등록 여부를
확인 후
다음 단계를
진행합니다.<br />
기업이 조회되지 않는 경우 기업의 최초 등록이 필요합니다.<br />
기업의 최초 가입자는 「기업관리자」로 등록되며, 기업별 관리자는 1인만 가입할 수 있습니다.</p>
<p v-show="user.label === '일반회원'" class="small-text text-ct">회원가입 시 「일반회원」으로
등록되며,<br /> 포털사이트에 대한 소개 및
홍보자료 조회 기능이 부여됩니다.<br />
소속 기업 등록을 하시면 AI 디지털교과서 통합지원센터의<br /> 다양한 지원 서비스를 이용하실 수 있습니다.<br /></p>
</router-link>
</li>
</div>
</ul>
</div>
<div class="user-content">
<!-- 기업회원 -->
<div class="border pd60" role="tabpanel"
v-show="(userActive === 0 && innerStep < 1 && userTypedisable) || (userActive === 1 && innerStep < 0)">
<div class="compnay-search" v-show="userActive === 0 && innerStep === 0">
<div class="middle-title mb16">
<h4>기업 검색</h4>
</div>
<div class="flex align-center mb30">
<div class="gd-2 pl0 pr0">
<select class="full-select" v-model="search['searchType']" id="panel1">
<option value="name">기업명</option>
<option value="tel">전화번호</option>
<option value="brno">사업자번호</option>
</select>
</div>
<div class="gd-8">
<input type="text" class="full-input" v-model="search.searchText"
placeholder="기업명을 입력하세요." @keyup.enter="companySelectListSearch()"
v-if="search.searchType === 'name'" autocomplete='off'>
<input type="text" class="full-input" v-model="search.searchText"
placeholder="사업자등록번호를 입력하세요." @keyup.enter="companySelectListSearch()"
v-else autocomplete='off'>
</div>
<div class="gd-2 pl0 pr0">
<button class="large-btn blue-border-btn ml0" title="검색"
@click="companySelectListSearch()">검색</button>
</div>
</div>
<div class="company-list">
<table class="list-table company-table mb15">
<colgroup>
<col width="15%">
<col width="20%">
<col width="14%">
<col width="14%">
<col width="30%">
</colgroup>
<thead>
<tr>
<th>기업명</th>
<th>주소</th>
<th>대표전화</th>
<th>사업자등록번호</th>
<th>가입신청</th>
</tr>
</thead>
<tbody>
<tr v-for="(companyOne, index) in companyList" :key="index">
<td>{{ companyOne.entNm }}</td>
<td>
<p class="ellipsis">{{ companyOne.entAddr }} {{ companyOne.entDaddr
}}
</p>
</td>
<td>{{ $HyphenMinus(companyOne.entTelno) }}</td>
<td>{{ $hyphenBrno(companyOne.brno) }}</td>
<td>
<div class="btn-zone flex align-center justify-center">
<div class="gd-6 pl0">
<button title="기업회원신청"
:class="[companyOne.aprvDt === null || companyOne.hasRprsYn === 'N' ? 'gray-btn' : 'blue-border-btn', 'large-btn ml0']"
@click="innerStepGo(companyOne, 'ROLE_CO_USER', 1)"
:disabled="companyOne.aprvDt === null || companyOne.hasRprsYn === 'N'">기업회원신청</button>
</div>
<div class="gd-6 pl0 pr0">
<button title="기업관리자신청"
:class="[companyOne.hasRprsYn === 'Y' ? 'gray-btn' : 'green-border-btn', 'large-btn ml0']"
:disabled="companyOne.hasRprsYn === 'Y'"
@click="innerStepForManager(companyOne, 'ROLE_CO_MANAGER', 1, false)">기업관리자신청</button>
</div>
</div>
</td>
</tr>
<tr v-if="companyList.length == 0">
<td colspan="5" class="text-ct data-none">등록된 정보가 존재하지 않습니다.</td>
</tr>
</tbody>
</table>
<PaginationButton :className="'admin-pagination'"
v-model:currentPage="search.currentPage" :pagination="pagination"
:click="companySelectList" />
<div class="btn-zone flex justify-end">
<div class="gd-2 pl0 pr0">
<button class="large-btn blue-btn ml0" title="기업 신규 신청"
@click="alertModalOpen">기업 신규
신청</button>
</div>
</div>
</div>
</div>
</div>
<!-- 일반회원 두루두루 사용 -->
<div class="border pd30 " role="tabpanel"
v-show="(userActive === 0 && innerStep === 1) || (userActive === 1 && innerStep === 0 && userTypedisable)"
ref="form">
<div class="flex justify-between align-center border-b mb30">
<div class="middle-title pb10">
<h4>회원정보</h4>
</div>
<p class="small-text"><span class="red-text">*</span>는 필수 입력 항목입니다.</p>
</div>
<div class="form-table-style">
<table class="form-table mb10">
<tr>
<td class="text-lf">
<div class="gd-12 pl0 pr0">
<div class="mb16">
<label for="panel2" class="form-title ">아이디</label>
<p class="small-text"> 영문 소문자, 숫자 , 기호 -, _ 만 사용하여 5~ 20자리</p>
</div>
<div class="flex justify-start align-center">
<div class="gd-6 pl0">
<input type="text" class="full-input" placeholder="아이디를 입력하세요."
v-model="user_info.lgnId" id="panel2" autocomplete='off'
aria-required="true" />
</div>
<div class="gd-2 pl0 pr0">
<button class="large-btn blue-border-btn" title="중복확인"
@click="userIdDuplicationCheck()">중복확인</button>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-lf">
<div class="gd-8 pl0">
<div class="mb16">
<label for="user_pw" class="form-title ">비밀번호</label>
<p class="small-text">영문, 숫자, 특수문자 조합된 6~20자리</p>
</div>
<input type="password" class="full-input" placeholder="비밀번호를 입력하세요."
v-model="user_info.mbrEncptPswd" id="user_pw" autocomplete='off'
aria-required="true" />
</div>
</td>
</tr>
<tr>
<td class="text-lf">
<div class="gd-8 pl0">
<div class="mb16">
<label for="user_pw_check" class="form-title ">비밀번호확인</label>
<div
v-if="user_info.mbrEncptPswd !== null && user_info.user_pw_check !== null">
<p v-show="this.user_info.mbrEncptPswd === this.user_info.user_pw_check"
class="suc-text">비밀번호
일치합니다.</p>
<p v-show="this.user_info.mbrEncptPswd !== this.user_info.user_pw_check"
class="red-text">
비밀번호가 일치하지 않습니다.</p>
</div>
</div>
<input type="password" class="full-input"
placeholder="비밀번호를 한번 더 입력하세요." v-model="user_info.user_pw_check"
id="user_pw_check" autocomplete='off' aria-required="true" />
</div>
</td>
</tr>
<tr>
<td class="text-lf pd0">
<div class="flex justify-start align-center">
<div class="gd-5 pl0 pt10 pb10">
<label for="user_nm" class="form-title mb16">이름</label>
<input type="text" class="full-input" placeholder="이름을 입력하세요."
v-model="user_info.mbrEncptFlnm" id="user_nm" readonly
disabled />
</div>
<div class="gd-5 pl0 pr0 pt10 pb10" v-show="userActive !== 1">
<label for="mbr_jbgd" class="fw-bold mb16">직위(직급)</label>
<input type="text" class="full-input" placeholder="직급을 입력하세요."
v-model="user_info.mbrJbgdNm" id="mbr_jbgd" />
</div>
</div>
</td>
</tr>
<tr>
<td class="text-lf">
<div class="gd-6 pl0 pr0">
<label for="user_tel1" class="form-title mb16">전화번호</label>
<div class="flex justify-start no-gutters">
<div class="gd-2 pl0 pr0">
<input type="text" v-model="user_tel1" id="user_tel1" readonly
disabled autocomplete='off' class="full-input" />
</div>
<div class="pd10">-</div>
<div class="gd-2 pl0 pr0">
<label for="user_tel2" class="visually-hidden">전화번호
두번째자리</label>
<input type="text" v-model="user_tel2" id="user_tel2" readonly
disabled autocomplete='off' class="full-input" />
</div>
<div class="pd10">-</div>
<div class="gd-2 pl0 pr0">
<label for="user_tel3" class="visually-hidden">전화번호
세번째자리</label>
<input type="text" v-model="user_tel3" id="user_tel3" readonly
disabled autocomplete='off' class="full-input" />
</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-lf">
<div class="gd-12 pl0 pr0">
<label for="email_id" class="form-title mb16">이메일</label>
<div class="flex justify-start">
<div class="gd-2 pl0 pr0">
<input type="text" class="full-input" id="email_id"
v-model="email_id" autocomplete='off'
aria-required="true" />
</div>
<div class="pd10">@</div>
<div class="gd-2 pl0 pr0">
<label for="email_dns" class="visually-hidden">이메일 도메인자리</label>
<input type="text" class="full-input" v-model="email_dns"
id="email_dns" autocomplete='off' aria-required="true" />
</div>
<div class="gd-2">
<label for="email" class="visually-hidden">이메일 주소</label>
<select name="" id="email" class="full-select ml0"
v-model="select_email_dns">
<option value="null">직접 입력</option>
<option value="naver.com">naver.com</option>
<option value="hanmail.net">hanmail.net</option>
<option value="gmail.com">gmail.com</option>
<option value="daum.net">daum.net</option>
</select>
</div>
<div class="gd-2 pl0 pr0">
<button class="large-btn blue-border-btn" title="중복확인"
@click="emailDuplicateCheck()">중복확인</button>
</div>
</div>
</div>
</td>
</tr>
<tr v-show="userActive !== 1">
<td class="text-lf">
<div class="flex justify-start align-center">
<div class="gd-12 pl0 pr0">
<div class="mb16">
<span class="form-title">재직증명서</span>
<p class="small-text red-text">※ 재직증명서 내 주민등록번호를 반드시 마스킹하여 업로드
해야
합니다.</p>
</div>
<Attachment @emitFiles="emitFiles" :type="'certification'"
@file-deleted="handleFileDeleted" :text="'재직증명서를 첨부해주세요.'"
:options="{ allowedExtensions: ['pdf'] }" />
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="flex justify-start align-center subscribe-zone">
<input type="checkbox" name="" id="sub" v-model="user_info.rcptnAgreYn">
<label for="sub" class="ml5 detail-text">통합지원센터 소식 구독서비스 동의</label>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="border pd30 join-wraite mt40"
v-show="(userActive === 0 && innerStep === 1 && user_info.authrtId === 'ROLE_CO_MANAGER' && ent_info.isEntRegist === true)">
<div class="flex justify-between align-center border-b mb30">
<div class="middle-title pb10">
<h4>기업정보</h4>
</div>
<p><span class="red-text">*</span>는 필수 입력 항목입니다.</p>
</div>
<div class="form-table-style">
<table class="form-table mb10">
<tr>
<td class="text-lf">
<div class="gd-12 pl0 pr0">
<div class="mb16">
<span class="form-title ">기업로고</span>
</div>
<div class="gd-6 pl0 mb10">
<div class="logo-zone border flex justify-center radius">
<img v-if="logoPreview" :src="logoPreview" class="inline" />
<p v-else class="text-ct detail-bold">Logo</p>
</div>
</div>
<ul class="mb10">
<li class="small-text">※ 이미지는 340*120 사이즈를 권장합니다.</li>
</ul>
<div class="gd-6 pl0">
<label for="logoImg" class="cursor upload-btn pd5">찾아보기</label>
<input type="file" accept="image/*" name="logoImg" id="logoImg"
@change="logoUpload" style="display: none;" />
</div>
</div>
</td>
</tr>
<tr>
<td class="text-lf">
<div class="gd-12 pl0 pr0">
<div class="mb16">
<label for="ent_nm" class="form-title ">기업명</label>
</div>
<div class="gd-6 pl0">
<input type="text" class="full-input" placeholder="기업명을 입력하세요."
v-model="ent_info.entNm" id="ent_nm" autocomplete='off'
aria-required="true" />
</div>
</div>
</td>
</tr>
<tr>
<td class="text-lf">
<div class="gd-12 pl0 pr0">
<div class="mb16">
<label for="brno" class="form-title ">사업자등록번호</label>
</div>
<div class="flex justify-start align-center">
<div class="gd-6 pl0">
<input type="text" class="full-input"
placeholder="사업자등록번호를 숫자만 입력해주세요." v-model="ent_info.brno"
id="brno" autocomplete='off' aria-required="true" />
</div>
<div class="gd-2 pl0 pr0">
<button class="large-btn blue-border-btn" title="사업자등록번호 확인"
@click="checkBusinessId()">사업자등록번호 확인</button>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-lf">
<div class="gd-12 pl0">
<div class="mb16">
<label for="ent_intrcn_smry" class="fw-bold">한 줄 소개</label>
<p class="small-text">20자 이내로 회사를 소개 해주세요.</p>
</div>
<input type="text" class="full-input" maxlength="20"
placeholder="한 줄 소개를 입력하세요." v-model="ent_info.entIntrdSmryCn"
id="ent_intrcn_smry" autocomplete='off' />
</div>
</td>
</tr>
<tr>
<td class="text-lf">
<div class="gd-12 pl0 pr0">
<div class="mb16">
<label for="ent_addr" class="form-title ">주소</label>
</div>
<div class="flex justify-start align-center mb5">
<div class="gd-2 pl0">
<input type="text" class="full-input" placeholder="우편번호"
readonly disabled v-model="ent_info.zip"
autocomplete='off' />
</div>
<div class="gd-2 pl0 pr0">
<button class="large-btn blue-border-btn" title="주소 찾기"
@click="openPostcode()">
찾기</button>
</div>
</div>
<div class="gd-4 mb5 pl0 pr0">
<input type="text" class="full-input" placeholder="주소" readonly
disabled v-model="ent_info.entAddr" id="ent_addr" />
</div>
<div class="gd-4 pl0 pr0">
<label for="ent_daddr" class="visually-hidden">상세주소</label>
<input type="text" class="full-input" placeholder="상세주소"
v-model="ent_info.entDaddr" id="ent_daddr" autocomplete='off'
aria-required="true" />
</div>
</div>
</td>
</tr>
<tr>
<td class="text-lf">
<div class="gd-8 pl0">
<div class="mb16">
<label for="hmpg_url" class="form-title ">홈페이지</label>
</div>
<input type="text" class="full-input" placeholder="홈페이지를 입력해주세요."
v-model="ent_info.hmpUrl" id="hmpg_url" autocomplete='off'
aria-required="true" />
</div>
</td>
</tr>
<tr>
<td class="text-lf">
<div class="gd-12 pl0 pr0">
<label for="ent_tel1" class="form-title mb16">대표전화</label>
<div class="flex justify-start no-gutters">
<div class="gd-2 pl0 pr0">
<select name="" id="ent_tel1" v-model="ent_tel1"
class="full-select ml0">
<option value="null">선택하세요.</option>
<option value="02">02</option>
<option value="031">031</option>
<option value="032">032</option>
<option value="033">033</option>
<option value="041">041</option>
<option value="042">042</option>
<option value="043">043</option>
<option value="044">044</option>
<option value="051">051</option>
<option value="052">052</option>
<option value="053">053</option>
<option value="054">054</option>
<option value="055">055</option>
<option value="061">061</option>
<option value="062">062</option>
<option value="063">063</option>
<option value="064">064</option>
<option value="070">070</option>
</select>
</div>
<div class="pd10">-</div>
<div class="gd-2 pl0 pr0">
<label for="ent_tel2" class="visually-hidden">대표전화 두번째자리</label>
<input type="text" class="full-input" v-model="ent_tel2"
id="ent_tel2" autocomplete='off' aria-required="true" />
</div>
<div class="pd10">-</div>
<div class="gd-2 pl0 pr0">
<label for="ent_tel3" class="visually-hidden">대표전화 세번째자리</label>
<input type="text" class="full-input" v-model="ent_tel3"
id="ent_tel3" autocomplete='off' aria-required="true" />
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="gd-12 pl0 pr0">
<div class="mb16">
<span class="form-title ">기업 출원 정보</span>
</div>
<div class="flex align-center mb15">
<!-- <div class="gd-2 pl0">
<input type="radio" name="first_info" id="expected" value="expected" v-model="ent_info.ent_se_nm" />
<label for="expected">출원예정</label>
</div>
<div class="gd-2 pl0">
<input type="radio" name="first_info" id="interest" value="interest" v-model="ent_info.ent_se_nm" />
<label for="interest">단순 관심</label>
</div>
<div class="flex align-center gd-4 pl0">
<div class="gd-2">
<input type="radio" name="first_info" id="etc" value="etc" v-model="ent_info.ent_se_nm" />
<label for="etc">기타</label>
</div>
</div> -->
<div v-for="(item, index) in ctgryCdList" :key="index"
class="gd-2 pl0" role="group">
<input type="radio" :name="`first_info_${index}`"
:id="item.cdId" :value="item.cdId"
v-model="ent_info.entSeNm" />
<label :for="item.cdId" class="ml10">{{ item.cdNm }}</label>
</div>
</div>
<div class="flex align-center mb15">
<label for="com_info" class="visually-hidden">기업출원추가정보</label>
<select name="" id="com_info"
:disabled="ent_info.entSeNm !== 'applPrnmnt'" class="gd-2"
v-model="ent_info.mainApplEntYn">
<option value="">선택</option>
<option value="Y">주 출원사</option>
<option value="N">보조 출원사</option>
</select>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-lf">
<div class="gd-12 pl0 pr0">
<div class="mb16">
<p class="form-title ">우리회사 키워드</p>
<p class="small-text">최소 3개에서 최대 6개를 선택해주세요.</p>
</div>
<div class="keyword-wrap flex justify-start align-center">
<div v-for="(keyword, index) in keywords" :key="keyword.cdId"
class="gd-2 mb5">
<input type="checkbox" :id="`keyword-${keyword.cdId}`"
:value="keyword.cdId" v-model="ent_info.selectedKeywords"
class="keyword-label" :disabled="isCheckboxDisabled(index)"
style="display: none;" />
<label :for="`keyword-${keyword.cdId}`"
class="keyword text-ct">#{{ keyword.cdNm }}</label>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-lf">
<div class="flex justify-start align-center">
<div class="gd-12 pl0 pr0">
<span class="form-title mb16">기업인증</span>
<Attachment @emitFiles="emitFiles" :type="'registration'"
@file-deleted="handleFileDeleted" :text="'사업자등록증명원을 첨부해주세요.'"
:options="{ allowedExtensions: ['pdf'] }" />
</div>
</div>
</td>
</tr>
<tr>
<td class="text-lf">
<div class="flex justify-start align-center">
<div class="gd-12 pl0 pr0">
<div class=" mb16">
<span class="form-title mb10">기업등록신청서</span>
<div class="gd-2 pl0 pr0">
<button class="large-btn blue-border-btn"
title="기업등록신청서 다운로드"
@click="$downloadFileByIdNoAuthCheck('FILE_0000000002', 'CMMN_FILE_0000000002', 'AI 디지털교과서 통합지원센터 신규 기업등록신청서(양식).hwp', 'BBS_0000000032')">
기업등록신청서</button>
</div>
</div>
<Attachment @emitFiles="emitFiles" :type="'applyForm'"
@file-deleted="handleFileDeleted"
:text="'작성하신 기업등록 신청서를 첨부해주세요.'"
:options="{ allowedExtensions: ['pdf'] }" />
</div>
</div>
</td>
</tr>
<tr>
</tr>
</table>
</div>
</div>
<div class="mt15"
v-show="(userActive === 0 && innerStep === 1) || (userActive === 1 && innerStep === 0) && userTypedisable">
<div class="flex justify-between align-center btn-zone">
<div class="gd-1 pl0 pr0">
<!-- <button class="large-btn darkg-border-btn">이전</button> -->
</div>
<div class="gd-1 pl0 pr0">
<button class="large-btn blue-btn ml0" title="회원가입"
@click="joinRequest()">회원가입</button>
</div>
</div>
</div>
</div>
</div>
<Completed v-show="PageNumber === 4" :type="user_info.authrtId" />
</div>
</div>
</div>
<!-- 관리자로 회원가입이 된다는 팝업문구 -->
<div v-if="alert" class="modal-wrapper" role="dialog" aria-modal="true">
<div :class="{ 'modal-container ': true, 'small-modal': userTypeCheckAlert !== null }">
<div class="modal-title border-none">
<div class="flex justify-between align-center">
<h2 v-if="userTypeCheckAlert !== null"></h2>
<h2 class="page-sub-title" v-else>신규 기업 등록 시 유의 사항</h2>
<button class="icon-btn black" @click="modalClose" aria-label="closeButton" id="closeButton"
ref="firstFocusableElement" title="닫기">
<svg-icon type="mdi" :path="closePath" aria-labelledby="closeButton"></svg-icon>
</button>
</div>
</div>
<div class="modal-content-monthly">
<div v-if="userTypeCheckAlert === '일반회원' || userTypeCheckAlert === '기업회원'">
<p class="detail-text text-ct">회원유형을 {{ userTypeCheckAlert }}으로 선택하셨습니다.<br />회원가입 중간에 회원유형 변경은
안되며,<br /> 변경을 원하실 경우 가입 처음 단계부터 재시작 하셔야합니다.<br />{{ userTypeCheckAlert }}으로 가입을 하시겠습니까?
</p>
</div>
<div v-else>
<div class="mb30">
<h3 class="admin-sec-title mb10"><기업 등록에 따른 관리자 권한 자동 부여 안내></h3>
<p class="detail-text mb5">최초로 <span>신규 기업 등록</span>을 진행하는 회원은 <strong>기업 관리자</strong>
권한으로 자동
등록됩니다. </p>
<p>※ 기업관리자란? 동일 기업의 '기업회원'에 대한 회원관리 권한을 가진 자</p>
<p>※ 기업 관리자는 KERIS가 정보 검토 후 승인되며, 향후 관리자 변경(양도) 시 별도 문의가 필요합니다.
</p>
</div>
<div class="pb30 border-b">
<h3 class="admin-sec-title mb10">기업등록 유의 사항</h3>
<p class="detail-text mb10">AI 디지털교과서 통합지원센터는 사업자 등록번호를 보유한 경우 기업 등록이 가능하며,<br /> 사업자
등록번호가 없는
해외 사업자는 별도 기업 인증 후 가입
가능합니다.</p>
<div class="terms-table mb10">
<table>
<thead>
<tr>
<th>가입 대상</th>
<th>기업 등록 구분</th>
<th>제출 서류</th>
</tr>
</thead>
<tbody>
<tr>
<td>발행사/개발사</td>
<td>사업자등록번호</td>
<td>사업자등록증명원</td>
</tr>
<tr>
<td>해외 기업</td>
<td>사업자 번호 없음</td>
<td>별도 문의(aidt@keris.or.kr)</td>
</tr>
</tbody>
</table>
</div>
<p>※ 사업자등록증명원은 최근 90일 이내 발급 받은 사업자등록증명원을 첨부해 주시기 바랍니다.<br />(사업자
등록증명원은 홈택스를 통해 발급받을 수
있습니다.)</p>
</div>
<div class="flex justify-end align-center new-check-zone">
<p class="mr30" style="font-weight: 700;">신규 기업 등록 시 유의 사항 문구를 확인했습니까?</p>
<div class="flex justify-start align-center">
<label for="noticeCheck" class="block mr5">예</label>
<input type="checkbox" name="noticeCheck" id="noticeCheck" v-model="noticeCheck"
aria-required="true" />
</div>
</div>
</div>
</div>
<div class="modal-end flex justify-between align-center pd0">
<div class="gd-6 pl0">
<button @click="modalClose" class="large-btn gray-btn ml0" title="취소">취소</button>
</div>
<div class="gd-6 pl0 pr0" v-if="userTypeCheckAlert === '일반회원' || userTypeCheckAlert === '기업회원'">
<button class="large-btn blue-btn ml0" title="확인" @click="typedisable">확인</button>
</div>
<div class="gd-6 pl0 pr0" v-else>
<button class="large-btn blue-btn ml0" title="확인"
@click="innerStepForManager(null, 'ROLE_CO_MANAGER', 1, true)">확인</button>
</div>
</div>
</div>
</div>
</template>
<script>
import PageNavigationBar from '../../../component/pagenavigationbar/PageNavigationBar.vue';
import PaginationButton from '../../../component/pagination/PaginationButton.vue';
import COMMON_UTIL from '../../../../resources/js/commonUtil';
import ProgressBar from '../../../component/progressbar/ProgressBar.vue';
import Attachment from '../../../component/file/Attachment.vue';
import Terms from './Terms.vue'
import Completed from './Completed.vue';
import NiceM from '../../../component/nice/NiceM.vue';
import axios from 'axios';
import { useStore } from "vuex";
import { defaultSearchParams } from "../../../../resources/js/defaultSearchParams";
import { toRaw } from 'vue'
import queryParams from '../../../../resources/js/queryParams';
import { mdiWindowClose } from '@mdi/js';
import { entInfoSelectList } from "../../../../resources/api/entInfo";
export default {
mixins: [queryParams],
data() {
return {
closePath: mdiWindowClose,
step: ["이용약관 동의", "본인인증", "회원정보 입력", "가입완료 및 승인대기"],
userType: [{ tabId: 'usertype1', panel: 'panel1', label: "기업회원" }, { tabId: 'usertype2', panel: 'panel2', label: "일반회원" }],
userActive: null,
businessNumberCheckResult: false,
businessNumber: null,
zonecode: null,
roadAddress: null,
// keywords: ['#수학', '#영어', '#정보', '#초등', '#중등', '#고등', '#AI튜터', '#블록코딩', '#패턴인식', '#대시보드', '#학습분석', '#보편적학습설계', '#클라우드', '#AI보조교사', '#음성인식', '#학습맵', '#맞춤형콘텐츠'],
keywords: [],
PageNumber: 1,
innerStep: 0,
alert: false,
userTypeCheckAlert: null,
userTypedisable: false,
noticeCheck: false,
lastFocusedElement: null,// 이전 포커스 요소 저장
/**
* 페이지네이션 변경
*
*/
// 검색 정보 담는 객체
search: { ...defaultSearchParams },
pagination: {},
//기업목록 조회 조건
companyListSearch: {
currentPage: 1,
pageSize: 5,
searchType: 'name',
searchText: null,
},
//기업목록
companyList: [],
companyListCount: 0,
logoPreview: null,
//기업상세
ent_info: {
entId: null,
brno: null,
entNm: null,
entChcCnt: null,
entMtchCnt: null,
inqCnt: null,
entIntrdSmryCn: null,
zip: null,
entAddr: null,
entDaddr: null,
hmpUrl: null,
entTelno: null,
stdgCd: null,
fileMngId: null,
aprvAplySttsCd: null,
autzrId: null,
aprvDt: null,
rjctCn: null,
rtrnrId: null,
rjctDt: null,
frstRegDt: null,
selectedKeywords: [],
isEntRegist: false,
entSeNm: null,
mainApplEntYn: ''
},
//유저상세
user_info: {
lgnId: null,
mbrEncptPswd: null,
user_pw_check: null,
mbrEncptFlnm: null,
mbrJbgdNm: null, //회원직급명
mbrEncptTelno: null,
mbrEncptEmad: null,
authrtId: null,
neisPridtfCd: null,
//구독여부
rcptnAgreYn: false,
//개인정보 활용 동의(선택)
prvcRlsYn: false,
},
//사용자 전화번호 3자리
user_tel1: null,
user_tel2: null,
user_tel3: null,
//기업 전화번호 3자리
ent_tel1: null,
ent_tel2: null,
ent_tel3: null,
//이메일
email_id: null,
email_dns: null,
select_email_dns: null,
//재직증명서
employmentCertificate: null,
//사업자등록증
businessRegistration: null,
//기업신청양식
businessApllicationForm: null,
//회사소개서
companyProfile: null,
//아이디 중복검사
idCheck_boolean: false,
//이메일 중복검사
emlCheck_boolean: false,
//사업자등록번호 중복검사
brnoCheck_boolean: false,
//파일
file: new FormData(),
//로고파일
logoFile: {},
store: useStore(),
ctgryCdList: [],
}
},
methods: {
// 개인정보 수집 이용 동의(선택) 을 포함한 화면 스테이터스 변경
pageStatusWithAgree(num, prvcRlsYn) {
this.PageNumber = num
this.user_info.prvcRlsYn = prvcRlsYn === true ? true : false;
},
getScrollPosition: function () {
if (window.innerWidth < 768) {
return 1400;
} else if (window.innerWidth >= 768 && window.innerWidth < 1200) {
return 1400;
} else {
return 747;
}
},
// 화면 스테이터스 변경
pageStatus(num) {
this.PageNumber = num;
},
// 내부 스텝
innerStepGo: function (companyOne, authrtId, num) {
if (companyOne !== null) {
this.ent_info.entId = companyOne.entId;
}
this.user_info.authrtId = authrtId;
this.alert = false
this.innerStep = num;
this.$nextTick(() => {
this.$refs.form.scrollIntoView({ behavior: 'smooth' });
});
},
// 관리자를 위한 내부스텝
innerStepForManager: function (companyOne, authrtId, num, type) {
if (companyOne !== null) {
this.ent_info.entId = companyOne.entId;
} else if (companyOne === null) {
if (!this.noticeCheck) {
alert('유의 사항 문구 확인에 체크를 하셔야 다음 단계로 넘어갈 수 있습니다.')
return
}
}
this.ent_info.isEntRegist = type;
this.user_info.authrtId = authrtId;
this.alert = false
this.innerStep = num;
this.$nextTick(() => {
this.$refs.form.scrollIntoView({ behavior: 'smooth' });
});
},
// 모달확인
alertModalOpen: function () {
this.userTypeCheckAlert = null;
this.alert = true;
},
modalClose: function () {
this.noticeCheck = false;
this.alert = false;
},
userTypeActive: function (index, uerType) {
this.lastFocusedElement = document.activeElement; // 이전 포커스 요소 저장
this.userTypeCheckAlert = uerType;
this.alert = true;
this.userActive = index
if (index === 1) {
this.user_info.authrtId = 'ROLE_USER'
}
this.$nextTick(() => {
// 모달이 열린 후 첫 번째 포커스 가능한 요소로 이동
if (this.$refs.firstFocusableElement) {
this.$refs.firstFocusableElement.focus();
}
});
},
typedisable: function () {
this.userTypedisable = true;
this.alert = false;
this.$nextTick(() => {
document.getElementById(this.userType[this.userActive].panel).focus();
});
},
//DAUM 주소 API 주소검색
openPostcode: function () {
// this.ent_info.zip = '38541'; //우편코드
// this.ent_info.ent_addr ='경북 경산시 대학로 280'; //주소코드
// this.ent_info.ent_daddr = '영남대학교 창업보육센터 신관 217호'
// this.ent_info.stdg_cd = '4729011500' //법정동코드4
let width = 500; //팝업의 너비
let height = 600; //팝업의 높이
new daum.Postcode({
oncomplete: (data) => {
width: width;
height: height;
this.ent_info.zip = data.zonecode; //우편코드
this.ent_info.entAddr = data.roadAddress; //주소코드
this.ent_info.stdgCd = data.bcode //법정동코드
},
}).open({
left: (window.screen.width / 2) - (width / 2),
top: (window.screen.height / 2) - (height / 2)
});
},
isCheckboxDisabled(index) {
// // 선택 가능한 체크박스 개수를 6개로 제한
let isSelected = this.ent_info.selectedKeywords.includes(this.keywords[index].cdId);
return this.ent_info.selectedKeywords.length >= 6 && !isSelected;
},
// NICE 인증 결과 확인
requestEvent: async function (eventType, niceObj) {
const vm = this;
// alert(eventType)
// 턴값 반환 있음
if (eventType == 'request') {
// niceObj.sErrorCode 빈값일때 정상 반환
// niceObj.sMobileNo 폰번호
// niceObj.sName 이름
// niceObj.sBirthDate 생년원일(14세 미만은 가입 불가)
// niceObj.sDupInfo 중복확인값(개인 고유 번호64Byte)
// 반환값이 있는 경우 만 14세 검사
if (!vm.checkAgeUnderFourteen(niceObj.sBirthDate)) {
alert("만 14세 이하는 가입할 수 없습니다. 메인페이지로 이동합니다.");
vm.$router.push({ path: '/' });
return;
}
const res = await vm.isNiceDuplicated(niceObj.sDupInfo)
if (!res.data.success) {
alert("이미 가입이 완료된 회원입니다. 로그인 페이지로 이동합니다")
vm.$router.push({ path: '/login.page' })
return
}
vm.user_info.mbrEncptFlnm = niceObj.sName;
if (niceObj.sMobileNo && niceObj.sMobileNo.length === 11) {
vm.user_tel1 = niceObj.sMobileNo.substring(0, 3);
vm.user_tel2 = niceObj.sMobileNo.substring(3, 7);
vm.user_tel3 = niceObj.sMobileNo.substring(7, 11);
}
vm.user_info.neisPridtfCd = niceObj.sDupInfo
// this.innerStep = 3;
this.PageNumber = 3;
this.companySelectList();
} else {
// 윈도우 Close 처리
//this.innerStep = 2;
}
},
//본인인증 중복 검사
isNiceDuplicated: async function (sDupInfo) {
const vm = this;
try {
const response = await axios({
url: "/mbr/nice.json",
method: "post",
headers: {
"Content-Type": "application/json;",
},
data: { 'neisPridtfCd': sDupInfo }
});
return response;
} catch (error) {
alert("본인인증 중복검사 오류, 다시 시도해주세요.");
}
},
//만14세 이하 여부 확인
checkAgeUnderFourteen: function (birthDateString) {
const birthDate = new Date(birthDateString.substring(0, 4), birthDateString.substring(4, 6) - 1, birthDateString.substring(6, 8));
const today = new Date();
const fourteenYearLater = new Date(birthDate.getFullYear() + 14, birthDate.getMonth(), birthDate.getDate());
return fourteenYearLater < today;
},
// //기업 목록 조회
companySelectList: function () {
const vm = this;
this.search.searchFilter = 'join'
axios({
url: "/cmmn/ent/entInfoSelectList.json",
method: "post",
headers: {
"Content-Type": "application/json;",
},
data: vm.search
}).then(function (res) {
vm.companyList = res.data.data.list;
vm.search = res.data.data.pagination;
vm.pagination = res.data.data.pagination;
}).catch(function (error) {
alert("기업목록 조회 오류, 다시 시도해주세요.")
});
},
//기업 목록 검색
companySelectListSearch: function () {
this.search.currentPage = 1;
this.companySelectList()
},
//아이디 중복여부 검사
userIdDuplicationCheck: function () {
const vm = this;
//유효성검사
let userIdRegex = /^[a-z0-9_-]{5,20}$/;
if (!userIdRegex.test(vm.user_info.lgnId)) {
alert('아이디는 5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능합니다.')
document.getElementById("panel2").focus();
return false;
}
axios({
url: '/mbr/findByCheckLoginId.json',
method: 'post',
headers: {
'Content-Type': "application/json;",
},
data: vm.user_info
}).then(function (res) {
if (res.status == 200) {
alert(res.data.message)
vm.idCheck_boolean = true;
}
})
.catch(function (error) {
alert(error.response.data.message);
vm.idCheck_boolean = false;
});
},
//이메일 유효성 검사
emailValidationCheck: function () {
this.email_id = this.email_id ? this.email_id.trim() : null
this.email_dns = this.email_dns ? this.email_dns.trim() : null
this.user_info.mbrEncptEmad = this.email_id + '@' + this.email_dns;
if (!COMMON_UTIL.checkEmail(this.user_info.mbrEncptEmad)) {
alert("유효하지 않은 이메일입니다.");
document.getElementById("email_id").focus();
return false;
}
return true;
},
//이메일 중복검사
emailDuplicateCheck: function () {
const vm = this;
if (!vm.emailValidationCheck()) return;
let data = {
"mbrEncptEmad": vm.email_id + '@' + vm.email_dns
}
axios({
url: '/mbr/findByCheckEmail.json',
method: 'post',
headers: {
'Content-Type': 'application/json;',
},
data: data
}).then(function (res) {
if (res.status == 200) {
alert(res.data.message)
vm.emlCheck_boolean = true;
}
}).catch(function (error) {
alert(error.response.data.message);
vm.emlCheck_boolean = false;
});
},
//사업자등록번호 중복검사
brnoDuplicateCheck: function () {
const vm = this;
axios({
url: '/cmmn/ent/isBrnoCheck.json',
method: 'post',
headers: {
'Content-Type': "application/json;",
},
data: vm.ent_info
}).then(function (res) {
if (res.status == 200) {
alert(res.data.message)
vm.brnoCheck_boolean = true;
}
}).catch(function (error) {
alert(error.response.data.message);
vm.brnoCheck_boolean = false;
});
},
// 사업자등록번호 유효성 검사
checkBusinessId: function () {
let brnoRegex = /^\d{10}$/;
if (!brnoRegex.test(this.ent_info.brno)) {
alert('사업자등록번호는 10자리의 숫자만 입력할 수 있습니다.')
document.getElementById("brno").focus();
return;
}
// this.brnoDuplicateCheck();
let serviceKey = "tv%2BMQ3E5HDTJC%2FIesanH6vabhvAikzVV3P5%2F5UhoEuCTMWjNnWhPy36jCpn13qPP5tmN%2Fx2eEg0WAK73VZv5tA%3D%3D"
axios({
url: "https://api.odcloud.kr/api/nts-businessman/v1/status?serviceKey=" + serviceKey,
method: "post",
headers: {
"Content-Type": "application/json",
"Accept": "application/json"
},
data: { "b_no": [this.ent_info.brno] },
}).then(response => {
if (response.data.match_cnt > 0) {
this.brnoDuplicateCheck();
} else {
alert('유효하지 않은 사업자 번호입니다.')
}
}).catch(error => {
alert('API 요청에 실패하였습니다.')
});
},
//파일목록 받아오기
emitFiles: function (files) {
this.file.append(files.type, files.filelist[0])
},
//회원가입
joinRequest: function () {
const vm = this;
//1. 권한별 유효성 검사
if (!vm.validationByAuth()) return;
//임시
// vm.user_info.neisPridtfCd = "1234567890";
const requestFormData = new FormData();
if (vm.file !== null) {
for (const key of vm.file.keys()) {
requestFormData.append(key, vm.file.get(key));
}
}
requestFormData.append("user_info", JSON.stringify(vm.user_info));
if (vm.user_info.authrtId !== 'ROLE_USER') {
requestFormData.append("ent_info", JSON.stringify(vm.ent_info));
}
if (vm.user_info.authrtId === 'ROLE_CO_MANAGER') {
requestFormData.append('logo', vm.logoFile);
}
this.$setLoading(true);
axios({
// url: '/user/userInsert.file',
url: '/mbr/joinProc.file',
method: 'post',
headers: {
'Content-Type': 'multipart/form-data; charset=UTF-8',
},
data: requestFormData
}).then(function (response) {
if (response.status === 200) {
vm.pageStatus(4)
}
}).catch(function (error) {
alert('회원등록 오류, 관리자에게 문의 해주세요.');
}).finally(function () {
vm.$setLoading(false);
});
},
//일반회원 유효성 검사
commonUserValidation: function () {
//1.아이디
//1-1.null검사
this.user_info.lgnId = this.user_info.lgnId ? this.user_info.lgnId.trim() : null;
if (!this.user_info.lgnId) {
alert('ID를 입력해주세요.');
document.getElementById("panel2").focus()
return false;
}
//1-2.5~20자의 영문 소문자, 숫자, 특수기호 _ -
if (!COMMON_UTIL.idCheck(this.user_info.lgnId)) {
alert('아이디는 5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능합니다.')
document.getElementById("panel2").focus()
return false;
}
//1-3.아이디 중복검사
if (!this.idCheck_boolean) {
alert("ID 중복검사를 완료해주세요.")
document.getElementById("panel2").focus()
return false;
}
//2.비밀번호 정규식
let passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{6,20}$/;
if (!passwordRegex.test(this.user_info.mbrEncptPswd)) {
alert('비밀번호는 영문, 숫자, 특수문자 조합된 6~20자리 조합만 가능합니다.');
document.getElementById("user_pw").focus()
return false;
}
//2-1. 비밀번호와 동일한지 확인
if (this.user_info.mbrEncptPswd !== this.user_info.user_pw_check) {
alert('비밀번호가 일치하지 않습니다.')
document.getElementById("user_pw_check").focus()
return false;
}
//4.이름
this.user_info.mbrEncptFlnm = this.user_info.mbrEncptFlnm ? this.user_info.mbrEncptFlnm.trim() : null
if (!COMMON_UTIL.checkName(this.user_info.mbrEncptFlnm)) {
alert('유효하지 않은 이름입니다.')
document.getElementById("user_nm").focus()
return false;
}
//5.전화번호
let tel1Regex = /^\d{2,3}$/;
let tel2Regex = /^\d{3,4}$/;
let tel3Regex = /^\d{4}$/;
this.user_tel1 = this.user_tel1 ? this.user_tel1.trim() : null;
this.user_tel2 = this.user_tel2 ? this.user_tel2.trim() : null;
this.user_tel3 = this.user_tel3 ? this.user_tel3.trim() : null;
if (!tel1Regex.test(this.user_tel1)) {
alert("첫 번째 번호는 2~3자리 숫자여야 합니다.");
document.getElementById("user_tel1").focus();
return false;
}
if (!tel2Regex.test(this.user_tel2)) {
alert("두 번째 번호는 3~4자리 숫자여야 합니다.");
document.getElementById("user_tel2").focus();
return false;
}
if (!tel3Regex.test(this.user_tel3)) {
alert("세 번째 번호는 4자리 숫자여야 합니다.");
document.getElementById("user_tel3").focus();
return false;
}
//전화검증완료시 저장
this.user_info.mbrEncptTelno = this.user_tel1 + this.user_tel2 + this.user_tel3;
//6.이메일 중복검사
if (!this.emlCheck_boolean) {
alert("이메일 중복검사를 완료해주세요.");
document.getElementById("email_id").focus();
return false;
}
//7. 이메일 유효성검사
this.email_id = this.email_id ? this.email_id.trim() : null
this.email_dns = this.email_dns ? this.email_dns.trim() : null
this.user_info.mbrEncptEmad = this.email_id + '@' + this.email_dns;
if (!COMMON_UTIL.checkEmail(this.user_info.mbrEncptEmad)) {
alert("유효하지 않은 이메일입니다.");
document.getElementById("email_id").focus();
return false;
}
return true;
},
//2. 기업회원 유효성 검사
companyUserValidation: function () {
//직급이 있는경우 길이 검사
if (this.user_info.mbrJbgdNm) {
this.user_info.mbrJbgdNm = this.user_info.mbrJbgdNm.trim()
if (this.user_info.mbrJbgdNm.length > 30) {
alert("직급은 30자를 초과할 수 없습니다.");
return false;
}
}
//재직 증명서
if (!this.file.has("certification")) {
alert("재직증명서를 첨부해주세요.");
return false;
}
return true;
},
//3. 기업관리자 유효성 검사
companyManagerValidation: function () {
//기업로고
if (this.logoFile.size === undefined) {
alert('회사로고 파일 등록은 필수입니다.')
return false;
}
//기업명
this.ent_info.entNm = this.ent_info.entNm ? this.ent_info.entNm.trim() : null
if (!this.ent_info.entNm) {
alert("기업명을 입력해주세요.");
document.getElementById("ent_nm").focus();
return false;
}
let entNameRegex = /^[가-힣A-Za-z0-9\s()]{2,50}$/;
if (!entNameRegex.test(this.ent_info.entNm)) {
alert("유효하지 않은 기업명입니다.");
document.getElementById("ent_nm").focus();
return false;
}
//사업자등록번호
if (!COMMON_UTIL.businessNumber(this.ent_info.brno)) {
alert("유효하지 않은 사업자등록번호입니다.");
document.getElementById("brno").focus();
return false;
}
//사업자등록번호 중복검사
if (!this.brnoCheck_boolean) {
alert("사업자등록번호 중복검사는 필수입니다.");
document.getElementById("brno").focus();
return false;
}
//주소
if (!this.ent_info.entAddr) {
alert("주소입력은 필수입니다.");
document.getElementById("ent_addr").focus();
return false;
}
//상세주소 유효성검사
this.ent_info.entDaddr = this.ent_info.entDaddr ? this.ent_info.entDaddr.trim() : null
if (!this.ent_info.entDaddr) {
alert("상세주소를 입력해주세요.");
document.getElementById("ent_daddr").focus();
return false;
}
var entAddrRegex = /^[가-힣A-Za-z0-9\s\-\/]{1,100}$/;
if (!entAddrRegex.test(this.ent_info.entDaddr)) {
alert("유효하지 않은 상세주소입니다.");
document.getElementById("ent_daddr").focus();
return false;
}
//홈페이지
this.ent_info.hmpUrl = this.ent_info.hmpUrl ? this.ent_info.hmpUrl.trim() : null
if (!this.ent_info.hmpUrl) {
alert("홈페이지 주소를 입력해주세요.");
document.getElementById("hmpg_url").focus();
return false;
}
if (this.ent_info.hmpUrl.length > 200) {
alert("홈페이지 주소는 200자까지 입력가능합니다.");
document.getElementById("hmpg_url").focus();
return false;
}
//홈페이지의 기본적인 유효성 검사
// let urlRegex = /^(www\.)?([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.[a-zA-Z]{2,}$/;
let urlRegex = /^(https?:\/\/)?([\w\d-]+\.)+[\w\d-]{2,}(\/[\w\d-./?%&=]*)?$/i
if (!urlRegex.test(this.ent_info.hmpUrl)) {
alert("유효하지 않은 홈페이지 주소입니다.");
document.getElementById("hmpg_url").focus();
return false;
}
//대표전화 유효성 검사
let tel1Regex = /^\d{2,3}$/;
let tel2Regex = /^\d{3,4}$/;
let tel3Regex = /^\d{4}$/;
this.ent_tel1 = this.ent_tel1 ? this.ent_tel1.trim() : null
this.ent_tel2 = this.ent_tel2 ? this.ent_tel2.trim() : null
this.ent_tel3 = this.ent_tel3 ? this.ent_tel3.trim() : null
//대표전화 null검사
if ((this.ent_tel1 == null) || (this.ent_tel2 == null) || (this.ent_tel3 == null)) {
alert("대표전화 번호를 입력해주세요.");
// 각각의 경우에 맞는 포커스 지정
if (this.ent_tel1 == null) {
document.getElementById("ent_tel1").focus();
} else if (this.ent_tel2 == null) {
document.getElementById("ent_tel2").focus();
} else if (this.ent_tel3 == null) {
document.getElementById("ent_tel3").focus();
}
return false;
}
if (!tel1Regex.test(this.ent_tel1)) {
alert("첫 번째 번호는 2~3자리 숫자여야 합니다.");
document.getElementById("ent_tel1").focus();
return false;
}
if (!tel2Regex.test(this.ent_tel2)) {
alert("두 번째 번호는 3~4자리 숫자여야 합니다.");
document.getElementById("ent_tel2").focus();
return false;
}
if (!tel3Regex.test(this.ent_tel3)) {
alert("세 번째 번호는 4자리 숫자여야 합니다.");
document.getElementById("ent_tel3").focus();
return false;
}
//대표전화검증완료시 저장
this.ent_info.entTelno = this.ent_tel1 + this.ent_tel2 + this.ent_tel3;
//기업 출원 정보 확인
if (!this.ent_info.entSeNm) {
alert("기업 출원 정보를 입력해주세요.")
return false;
}
//출원 예정을 선택 시 주출원사여부 검사
if (this.ent_info.entSeNm === 'applPrnmnt') {
if (!this.ent_info.mainApplEntYn) {
alert("출원사 유형을 선택해주세요.")
return false;
}
} else {
this.ent_info.mainApplEntYn = null
}
//키워드 검사
if (this.ent_info.selectedKeywords.length !== 0) {
if (this.ent_info.selectedKeywords.length < 3) {
alert("키워드를 선택 시 최소 3개를 선택하셔야 합니다.");
return false;
}
}
//사업자증명원 첨부파일
if (!this.file.has("registration")) {
alert("사업자증명원를 첨부해주세요.");
return false;
}
//기업신청양식 첨부파일
if (!this.file.has("applyForm")) {
alert("기업등록신청서가 업로드 되지 않았습니다.");
return false;
}
return true;
},
//권한별 유효성 검사
validationByAuth: function () {
let auth = this.user_info.authrtId;
//일반회원 유효성검사
if (!this.commonUserValidation()) return false;
//기업회원 유효성검사
if (auth === 'ROLE_CO_USER' || auth === 'ROLE_CO_MANAGER') {
if (!this.companyUserValidation()) return false;
}
//기업관리자 유효성검사
if (auth === 'ROLE_CO_MANAGER' && this.ent_info.isEntRegist === true) {
if (!this.companyManagerValidation()) return false;
}
return true;
},
//이미지 업로드 및 미리보기
logoUpload: function (event) {
const vm = this;
const allowedExtensions = ['jpg', 'jpeg', 'png'];
const files = event.target.files;
const MAX_WIDTH = 340;
const MAX_HEIGHT = 120;
for (let i = 0; i < files.length; i++) {
const file = files[i];
const fileExtension = this.getExtension(file.name).toLowerCase();
if (allowedExtensions.includes(fileExtension)) {
var reader = new FileReader();
reader.onload = function (e) {
var img = new Image();
img.src = reader.result;
img.onload = function () {
// 이미지의 실제 크기 확인
var width = img.width;
var height = img.height;
// 정해진 크기보다 큰 경우 경고창 표시
if (width > MAX_WIDTH || height > MAX_HEIGHT) {
alert("로고 이미지 크기는 최대 " + MAX_WIDTH + "x" + MAX_HEIGHT + "입니다.");
vm.$refs.logoImg.value = '';
} else {
vm.logoPreview = reader.result;
vm.logoFile = file;
}
};
};
reader.readAsDataURL(file);
} else {
// 허용되지 않는 확장자인 경우 경고 메시지 표시 등의 처리
alert(`${file.name}은 허용되지 않는 파일 형식입니다.`);
}
}
},
getExtension(filename) {
const lastIndex = filename.lastIndexOf('.');
return filename.substring(lastIndex + 1);
},
handleFileDeleted(deletedFileKey) {
let newFormData = new FormData;
for (let [key, value] of this.file.entries()) {
if (key !== deletedFileKey) {
newFormData.append(key, value);
}
}
// 새로운 FormData 객체로 업데이트
this.file = newFormData;
},
//회원가입 메뉴얼 다운로드
async downloadJoinManual() {
const file = {
'fileId': 'FILE_0000000407',
'fileNm': '회원가입 메뉴얼',
'extnNm': 'pdf',
}
await this.$downloadFileNoAuthCheck(file);
},
//기업등록신청서 다운로드
async downloadApplyForm() {
const file = {
'fileId': 'FILE_0000000408',
'fileNm': '기업등록신청서',
'extnNm': 'pdf',
}
await this.$downloadFileNoAuthCheck(file);
},
//기업출원 카테고리코드
async findAllCtgry() {
this.ctgryCdList = await this.$getCommonCode('entApplCtgryCd');
},
},
watch: {
"user_info.lgnId": function () {
this.idCheck_boolean = false;
},
"ent_info.selectedKeywords": function (newValue, oldValue) {
},
"select_email_dns": function () {
this.email_dns = this.select_email_dns;
},
"email_dns": function () {
this.emlCheck_boolean = false;
},
"email_id": function () {
this.emlCheck_boolean = false;
},
"ent_info.brno": function () {
this.brnoCheck_boolean = false;
},
},
computed: {
},
components: {
'PageNavigationBar': PageNavigationBar,
'ProgressBar': ProgressBar,
'Attachment': Attachment,
'Terms': Terms,
'Completed': Completed,
'NiceM': NiceM,
'PaginationButton': PaginationButton,
},
created() {
const vm = this;
axios({
url: "/ent/keyword.json",
method: "post",
headers: {
"Content-Type": "application/json",
},
}).then(function (res) {
vm.keywords = res.data.data
}).catch(function (error) {
alert("키워드 조회 오류, 관리자에게 문의해주세요.")
});
},
mounted() {
this.findAllCtgry()
if (this.search.searchType == '') {
this.search.searchType = 'name';
}
}
}
</script>