ninefloor.github.io/web-practice/work/musinsa_js/
무신사 로그인
비회원 구매 약관 비회원정보수집 동의 비회원 개인정보보호정책은 비회원으로 주문하는 고객님의 개인정보 보호를 위하여 무신사가 실시하는 개인정보 수집의 목적과 그 정보의 정책에 관한
ninefloor.github.io
js와 jquery를 이용하여 탭 메뉴, 자동로그인 comfirm 창과 그에 따른 체크박스 제어를 구현했고 jquery-cookie를 이용해 7일간 자동 로그인 활성화 시 체크박스가 자동으로 체크 되도록 구현하였음.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>무신사 로그인</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="./js/app.js"></script>
</head>
<body>
<div id="wrap">
<div id="login_area">
<div id="login_header">
<img src="./images/logo_mwusinsa.svg" />
</div>
<div id="login_box">
<form>
<input
class="input"
type="text"
placeholder="아이디를 입력해 주세요"
/>
<br />
<input
class="input"
type="password"
placeholder="비밀번호를 입력해 주세요"
/>
<br />
<span class="submit"><input type="submit" value="로그인" /></span>
<label class="checkbox">
<input type="checkbox" name="autologin" id="autologin" onclick="funcAuto();"/>
자동 로그인
</label>
</form>
<ul id="sub_menu">
<li><a href="#">회원 가입</a></li>
<li><a href="#">아이디 찾기</a></li>
<li><a href="#">비밀번호 찾기</a></li>
</ul>
</div>
<div id="social">
<a id="kakao" href="#">
<span>카카오 로그인</span>
</a>
<a id="apple" href="#">
<span>Apple 로그인</span>
</a>
</div>
<div id="non_member">
<div class="tap_head">
<a href="#" class="active">
<span>비회원 구매하기</span>
</a>
<a href="#" class="">
<span>비회원 주문 조회</span>
</a>
</div>
<div id="tap_contents1">
<span class="title">비회원 구매 약관</span>
<div id="text">
비회원정보수집 동의<br />
비회원 개인정보보호정책은 비회원으로 주문하는 고객님의 개인정보
보호를 위하여 무신사가 실시하는 개인정보 수집의 목적과 그 정보의
정책에 관한 규정입니다.<br />
<br />
제1조 개인정보 수집 범위<br />
1. 필수항목: 구매자 정보(성명, 전화번호, 휴대전화 번호, 이메일)
수령자 정보(성명, 전화번호, 휴대전화번호, 주소)<br />
2. 선택항목: 환불계좌<br />
<br />
제2조 개인정보 수집 목적 및 이용목적<br />
무신사((주)무신사)는 고객님께서 비회원으로 재화 혹은 용역을
주문하거나 각종 서비스를 이용하는데 있어, 원활한 주문 및 서비스
접수, 물품 배송, 대금 결제 및 편리하고 유익한 맞춤정보를 제공하기
위한 최소한의 정보를 수집합니다.<br />
<br />
1.e-mail, 전화번호 : 고지의 전달. 불만처리나 주문/배송정보 안내 등
원활한 의사소통 경로의 확보.<br />
2.성명, 주소 : 고지의 전달, 청구서, 정확한 상품 배송지의 확보.<br />
3.은행계좌번호, 신용카드번호: 유료정보에 대한 이용 및 상품구매에
대한 결제<br />
4.전화번호, 휴대전화번호 : 상품구매 전/후 만족도조사,
회원가입권유(포인트 또는 적립금 지급 등)및 영업 목적 전화 및
SMS발송<br />
<br />
비회원주문시 제공하신 모든 정보는 상기 목적에 필요한 용도 이외로는
사용되지 않습니다.<br />
단, 이용자의 기본적 인권 침해의 우려가 있는 민감한 개인정보(인종
및 민족, 사상 및 종교, 출신지 및 본적지, 정치적 성향 및 범죄기록,
건강상태 등)는 수집하지 않습니다.<br />
<br />
제3조 개인정보의 보유기간 및 이용기간<br />
고객의 개인정보는 다음과 같이 개인정보의 수집목적 또는 제공받은
목적이 달성되면 파기됩니다. 단, 상법 등 관련법령의 규정에 의하여
다음과 같이 거래 관련 권리 의무 관계의 확인 등을 이유로 일정기간
보유하여야 할 필요가 있을 경우에는 일정기간 보유합니다.<br />
1.계약 또는 청약철회 등에 관한 기록 : 5년<br />
2.대금결제 및 재화등의 공급에 관한 기록 : 5년<br />
3.소비자의 불만 또는 분쟁처리에 관한 기록 : 3년<br />
<br />
고객의 동의를 받아 보유하고 있는 거래정보 등을 고객께서 열람을
요구하는 경우 무신사는 지체 없이 그 정보를 열람·확인 할 수 있도록
조치합니다.
</div>
<label class="checkbox">
<input type="checkbox" name="agree" id="agree" onclick="funcAgree();"/>
비회원 구매 약관에 동의합니다.
</label>
<span class="submit"
><input type="submit" value="비회원 구매하기"
/></span>
</div>
<div id="tap_contents2" style="display: none;">
<form action="#">
<ul>
<li>
<label for="order_name">이름</label>
<input
class="input"
type="text"
placeholder="주문자명을 입력해 주세요"
/>
</li>
<li>
<label for="oreder_number">주문번호</label>
<input
class="input"
type="text"
placeholder="주문번호를 입력해 주세요"
/>
</li>
</ul>
</form>
<span class="submit"
><input type="submit" value="비회원 주문조회"
/></span>
</div>
<footer id="footer">
<ul id="footer_menu">
<li><a href="#">이용약관</a></li>
<li>
<a href="#"><b>개인정보처리방침</b></a>
</li>
<li><a href="#">고객센터</a></li>
</ul>
</footer>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: black;
}
body {
background-color: #f1f1f1;
}
#wrap {
width: 500px;
min-width: 400px;
height: 1120px;
margin: 0 auto;
background-color: #ffffff;
}
#login_area {
width: 330px;
height: 1000px;
background-color: #ffffff;
margin: 0 auto;
position: relative;
}
#login_header {
width: 100%;
height: 20px;
padding: 76px 0 60px;
text-align: center;
}
#login_box {
width: 100%;
margin: 0 auto;
}
#login_box .input {
width: 100%;
height: 50px;
padding: 15px 10px 14px;
box-sizing: border-box;
border: 1px solid #cccccc;
margin-bottom: 10px;
}
#autologin{
display: none;
}
form>.checkbox {
height: 22px;
display: inline-block;
background: url("../images/check_small_off.png") left no-repeat;
background-size: 20px 20px;
cursor: pointer;
padding-left: 30px;
font-size: 14px;
line-height: 22px;
color: #aaa;
}
form>.checkbox_on{
background: url("../images/check_small_on.png") left no-repeat;
background-size: 20px 20px;
color: #000;
}
.submit {
display: block;
margin: 10px 0 20px;
}
.submit > input {
width: 100%;
height: 60px;
color: #ffffff;
background: #000000;
text-align: center;
border: none;
display: block;
font-size: 18px;
font-weight: bold;
}
#login_box > #sub_menu {
margin: 36px 0;
display: block;
height: 22px;
}
#sub_menu > li {
float: left;
margin-left: 20px;
}
#sub_menu > li:first-child {
margin-left: 10px;
}
#sub_menu > li::after {
content: "";
display: inline-block;
width: 1px;
height: 14px;
background-color: #aaa;
margin-left: 20px;
position: relative;
top: 2px;
}
#sub_menu > li:nth-child(3)::after {
display: none;
}
#sub_menu > li > a {
color: #aaa;
font-size: 14px;
}
#social {
width: auto;
margin: 30px 0 35px;
}
#kakao {
width: 100%;
height: 42px;
background-color: #fee500;
border: 1px #fee500 solid;
border-radius: 6px;
text-align: center;
padding-top: 9px;
box-sizing: border-box;
position: relative;
}
#apple {
width: 100%;
height: 42px;
background-color: #ffffff;
border: 1px solid #bfbfbf;
border-radius: 6px;
margin-top: 10px;
text-align: center;
padding-top: 9px;
box-sizing: border-box;
position: relative;
}
#social > a {
display: block;
}
#social > a > span {
font-size: 15px;
font-weight: bold;
position: relative;
top: -13px;
}
#social > #kakao > span::before {
content: "";
width: 30px;
height: 30px;
display: inline-block;
background: url(../images/bg_social.png) no-repeat;
background-size: 60px 30px;
position: relative;
top: 10px;
}
#social > #apple > span::before {
content: "";
width: 30px;
height: 30px;
display: inline-block;
background: url(../images/bg_social.png) no-repeat;
background-size: 60px 30px;
background-position: -30px 0;
position: relative;
top: 12px;
}
#non_member {
width: 100%;
height: auto;
}
.tap_head {
width: 100%;
height: 49px;
margin: 0 auto;
}
.tap_head .active{
background-color: #ffffff;
border: 1px solid #f1f1f1;
border-bottom: none;
color: #000;
}
.tap_head>a {
display: block;
float: left;
width: 49%;
height: 49px;
text-align: center;
border: 1px solid #f1f1f1;
background-color: #f1f1f1;
color: #aaa;
border-bottom: none;
font-size: 14px;
}
.tap_head>a>span {
position: relative;
top: 15px;
}
#tap_contents1 {
width: 100%;
height: auto;
}
#tap_contents1 > .title {
display: block;
font-size: 14px;
font-weight: bold;
margin: 16px 0 10px;
}
#tap_contents1 > #text {
width: 100%;
height: 200px;
border: 1px solid #aaa;
overflow-y: scroll;
padding: 8px 10px;
box-sizing: border-box;
font-size: 12px;
color: #777;
line-height: 18px;
}
#tap_contents1 .checkbox {
margin-top: 10px;
height: 22px;
display: inline-block;
background: url("../images/check_small_off.png") left no-repeat;
background-size: 20px 20px;
cursor: pointer;
padding-left: 30px;
font-size: 14px;
line-height: 22px;
color: #aaa;
}
#tap_contents1 .checkbox_on{
background: url("../images/check_small_on.png") left no-repeat;
background-size: 20px 20px;
color: #000;
}
#agree{
display: none;
}
#tap_contents1 > .submit {
margin-top: 30px;
}
#tap_contents2 {
width: 100%;
height: auto;
}
#tap_contents2 label {
display: block;
font-size: 14px;
margin: 16px 0 5px;
}
#tap_contents2 > .submit {
margin-top: 30px;
}
#tap_contents2 .input {
width: 100%;
height: 50px;
padding: 15px 10px 14px;
box-sizing: border-box;
border: 1px solid #cccccc;
margin-bottom: 10px;
}
#footer > #footer_menu {
margin: 36px 0;
display: block;
height: 22px;
}
#footer_menu > li {
float: left;
margin-left: 15px;
}
#footer_menu > li::after {
content: "";
display: inline-block;
width: 1px;
height: 14px;
background-color: #aaa;
margin-left: 20px;
position: relative;
top: 2px;
}
#footer_menu > li:nth-child(3)::after {
display: none;
}
#footer_menu > li > a {
color: #aaa;
font-size: 14px;
}
$(document).ready(function () {
if ($.cookie("autologin")=="true"){
$("#autologin").prop("checked",true);
$("form>.checkbox").addClass("checkbox_on");
login_value=1;
} else if($.cookie("autologin")=="false"){
$("#autologin").prop("checked",false)
}
$("#non_member>.tap_head>a").eq(0).click(function () {
console.log("eq:0");
$(this).addClass('active');
$(".tap_head>a").eq(1).removeClass('active')
$("#tap_contents1").show();
$("#tap_contents2").hide();
$("#wrap").css({"height":"1120px"});
})
$("#non_member>.tap_head>a").eq(1).click(function () {
console.log("eq:1");
$(this).addClass('active');
$(".tap_head>a").eq(0).removeClass('active')
$("#tap_contents2").show();
$("#tap_contents1").hide();
$("#wrap").css({"height":"1040px"});
})
})
let login_value=null;
function funcAuto(){
if (login_value==null || login_value==0){
let choice=confirm("개인 PC가 아닐 경우 타인이 로그인 할 수 있습니다. \n PC를 여러 사람이 사용하는 공공장소에서는 체크하지 마세요. \n 정말 앞으로 자동 로그인 하시겠습니까?");
if (choice==true){
$("form>.checkbox").addClass("checkbox_on");
login_value=1;
$.cookie("autologin","true",{expries:7,path:"/"});
return;
} else if (choice==false){
login_value=0;
$("#autologin").prop("checked",false);
return;
}
} else if (login_value==1){
$("form>.checkbox").removeClass("checkbox_on");
login_value=0;
$.cookie("autologin","false",{expries:7,path:"/"});
return;
}
}
let agree_value=null;
function funcAgree(){
if (agree_value==null || agree_value==0){
$("#tap_contents1>.checkbox").addClass("checkbox_on");
agree_value=1;
return;
} else if (agree_value==1){
$("#tap_contents1>.checkbox").removeClass("checkbox_on");
agree_value=0;
return;
}
}