퍼블 업뎃

thkim
Lim\jun 2024-05-28 11:10:41 +09:00
parent b86b21f02e
commit 56ef69f757
3 changed files with 32 additions and 24 deletions

View File

@ -20,19 +20,21 @@
.Plogin .list li::before {content: ""; display: block; position: absolute; left: 0; top: 12px; width: 4px; height: 4px; background: #666;}
.Plogin .list li + li {margin-top: 5px;}
.Pjoin h1 {color: #222; font-size: 48px; font-weight: 500; letter-spacing: -2px; line-height: 48px; text-align: center;}
.Pjoin .join_box {position: relative; width: 690px; margin: 54px auto 0; padding: 70px 95px; border: 1px solid #dde2e5; border-radius: 25px; box-shadow: 3px 4px 5px #ccc;}
.Pjoin h1 {color: #222; font-size: 30px; font-weight: 600; text-align: center; padding-top: 30px;}
.Pjoin .join_box {width: 690px; margin: 40px auto 0; padding: 30px 50px; border: 1px solid #dde2e5; border-radius: 25px; box-shadow: 3px 4px 5px #ccc;}
.Pjoin .join_box input[type=text],
.Pjoin .join_box input[type=password] {width: 100%; height: 46px; padding: 0 20px; border: 0; border-radius: 8px; color: #666; font-size: 16px; background: #f5f5f5;}
.Pjoin .join_box .group input + input {margin-top: 18px;}
.Pjoin .join_box input[type=text]:-ms-input-placeholder,
.Pjoin .join_box input[type=password]:-ms-input-placeholder {color: #aaa; opacity: 1;}
.Pjoin .join_box label {padding-top: 20px; font-weight: 700;}
.Pjoin .join_box .chk {margin-top: 20px;}
.Pjoin .join_box .chk em {display: inline-block; height: 30px; margin-left: 40px; color: #666; font-size: 16px;}
.Pjoin .join_box button {width: 500px;height: 50px;border-radius: 8px;color: #fff;font-size: 20px;font-weight: 500;text-align: center;line-height: 50px;background: #169bd5;}
.Pjoin .join_box button:disabled {background: rgba(22, 155, 213, 0.4); cursor: auto;}
.Pjoin .join_box button span {display: block; position: relative; height: 100%;}
.Pjoin .join_box .list li {position: relative; padding-left: 15px; color: #666; font-size: 16px; line-height: 26px;}
.Pjoin .join_box button {width: 50%; padding-top: 10px; }
/*.Pjoin .join_box button {width: 500px;height: 50px;border-radius: 8px;color: #fff;font-size: 20px;font-weight: 500;text-align: center;line-height: 50px;background: #169bd5;}*/
/*.Pjoin .join_box button:disabled {background: rgba(22, 155, 213, 0.4); cursor: auto;}*/
/*.Pjoin .join_box button span {display: block; position: relative; height: 100%;}*/
.Pjoin .join_box .list li {padding-left: 15px; color: #666; font-size: 13px; line-height: 23px;}
.Pjoin .join_box .list li + li {margin-top: 5px;}

View File

@ -3,7 +3,7 @@ import React from 'react'
function InfoShareChk() {
return (
<ul className="list">
<li>건설기준 포털시스템(KCSC) 회원님께 원활한 서비스 제공을 위해 최소한의 개인정보를 수집하고 있으며, 목적 별로 수집하는 개인정보를 다음과 같이 정하고 있습니다.</li>
<li>건설기준 포털시스템(KCSC) 회원님께 원활한 서비스 제공을 위해 최소한의 개인정보를 수집하고 있으며,<br /> 목적 별로 수집하는 개인정보를 다음과 같이 정하고 있습니다.</li>
<li className="no_dot">&nbsp;</li>
<li className="no_dot"> 수집하는 개인정보의 항목</li>
<li className="no_dot">&nbsp;&nbsp;&nbsp;수집항목: 아이디(ID), 비밀번호, 이메일(e-mail)</li>
@ -13,7 +13,7 @@ function InfoShareChk() {
<li className="no_dot">&nbsp;&nbsp;&nbsp;회원가입정보 : 탈퇴시까지</li>
<li className="no_dot"> 정보주체의 동의 거부 권리 그에 따른 불이익 사항</li>
<li className="no_dot">&nbsp;</li>
<li>귀하는 건설기준 포털시스템(KCSC) 이용을 위한 개인정보의 수집·이용 동의를 거부할 권리가 있습니다. 다만, 개인정보의 수집·이용 동의를 거부할 경우 건설기준 포털시스템(KCSC) 일부 기능에 대한 서비스 이용에 제한을 받으실 있습니다.</li>
<li>귀하는 건설기준 포털시스템(KCSC) 이용을 위한 개인정보의 수집·이용 동의를 거부할 권리가 있습니다. <br />다만, 개인정보의 수집·이용 동의를 거부할 경우 건설기준 포털시스템(KCSC) 일부 기능에 대한 서비스 이용에 제한을 받으실 있습니다.</li>
</ul>
)
}

View File

@ -71,13 +71,13 @@ function Join(props) {
<div className="container">
<div className="c_wrap">
{/* <!-- Location --> */}
<div className="location">
<ul>
<li><Link to={URL.MAIN} className="home" >Home</Link></li>
<li><Link to={URL.LOGIN}>로그인</Link></li>
<li>회원가입</li>
</ul>
</div>
{/*<div className="location">*/}
{/* <ul>*/}
{/* <li><Link to={URL.MAIN} className="home" >Home</Link></li>*/}
{/* <li><Link to={URL.LOGIN}>로그인</Link></li>*/}
{/* <li>회원가입</li>*/}
{/* </ul>*/}
{/*</div>*/}
{/* <!--// Location --> */}
<div className="layout">
@ -89,33 +89,39 @@ function Join(props) {
{infoShareChk?(
<form name="" method="" action="" >
<span className="group">
<label for="idInput">아이디</label>
<input type="text" name="" title="아이디" placeholder="아이디" value={userInfo?.id}
onChange={e => setUserInfo({ ...userInfo, id: e.target.value })} />
<label for="passwordInput">비밀번호</label>
<input type="password" name="" id="passwordInput" title="비밀번호" placeholder="비밀번호"
onChange={e => setUserInfo({ ...userInfo, password: e.target.value })}/>
<input type="password" name="" id="passwordChkInput" title="비밀번호 확인" placeholder="비밀번호 확인"
onChange={e => setUserInfo({ ...userInfo, passwordChk: e.target.value })}/>
<ul className="list">
<li>비밀번호는 6~12자의 영문 /소문자, 숫자, 특수문자를 혼합해서 사용하실 있습니다.
{/*<br />쉬운 비밀번호나 자주 쓰는 사이트의 비밀번호가 같을 경우, 도용되기 쉬우므로 주기적으로*/}
{/* 변경하셔서 사용하는 것이 좋습니다.*/}
</li>
</ul>
<label for="userNmInput">이름</label>
<input type="text" name="" title="이름" placeholder="이름" value={userInfo?.userNm}
onChange={e => setUserInfo({ ...userInfo, userNm: e.target.value })} />
<label for="emailInput">이메일</label>
<input type="text" name="" title="이메일" placeholder="이메일" value={userInfo?.email}
onChange={e => setUserInfo({ ...userInfo, email: e.target.value })} />
<label for="phoneNumInput">연락처</label>
<input type="text" name="" title="연락처" placeholder="연락처" value={userInfo?.phoneNum}
onChange={e => setUserInfo({ ...userInfo, phoneNum: e.target.value })} />
</span>
<ul className="list">
<li>비밀번호는 6~12자의 영문 /소문자, 숫자, 특수문자를 혼합해서 사용하실 있습니다.</li>
<li>쉬운 비밀번호나 자주 쓰는 사이트의 비밀번호가 같을 경우, 도용되기 쉬우므로 주기적으로
변경하셔서 사용하는 것이 좋습니다.</li>
</ul>
<button type="button" onClick={submitFormHandler}><span>회원가입</span></button>
<div className="pt-3 d-flex justify-content-center"><button type="button" onClick={submitFormHandler} className="btn btn-22498E">회원가입</button></div>
</form>
):(
<Row className="justify-content-end">
<Row className="justify-content-center">
<Col xs={12}>
<InfoShareChk/>
</Col>
<Col xs={"auto"}>
<button onClick={infoShareBtn}>동의하기</button>
<Col xs={12} className="pt-3 d-flex justify-content-center">
<button type="button" onClick={infoShareBtn} className="btn btn-22498E">동의하기</button>
</Col>
</Row>
)}