# 페이스북 간편 로그인 스킨 패치 가이드

\# 아래 설명은 고도몰5 모든 스킨 공통으로 적용되는 내용입니다.

[스킨 패치 파일 다운로드 ↓](https://kr1-api-object-storage.nhncloudservice.com/v1/AUTH_69db659103894b00aa9f8b28aa62fe8e/plus-shop-skin-patch/\[2016-08-10]%20%E1%84%91%E1%85%A6%E1%84%8B%E1%85%B5%E1%84%89%E1%85%B3%E1%84%87%E1%85%AE%E1%86%A8%20%E1%84%85%E1%85%A9%E1%84%80%E1%85%B3%E1%84%8B%E1%85%B5%E1%86%AB_%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B5%E1%86%AB%E1%84%91%E1%85%A2%E1%84%8E%E1%85%B5%E1%84%91%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%AF.zip)

■ 참고사항 : 이미 패치 내용이 있는 경우 적용 안하셔도 됩니다.

\
■ 수정위치\
1\. 관리자모드 -> 디자인 에서 수정할 스킨이 "현재 작업스킨"으로 설정\
2\. 관리자모드 -> 디자인, 트리에서 아래의 화일을 선택후 수정

■ 이미지 및 스크립트 신규파일 추가\
\- FTP를 이용하여 페이코 로그인을 적용할 스킨의 아래 폴더 경로에 같이 압축된 이미지 및 스크립트를 추가하셔야 합니다. 동일 파일이 존재하는 경우 덮어쓰시면 됩니다.\
\- data/skin/front/\[스킨명]/img/etc/ 아래에 아래의 파일을 추가합니다.\
login-facebook-text.png\
login-facebook.png\
login-payco-text.png\
login-payco.png\
square-facebook.png

\- data/skin/front/\[스킨명]/js/ 아래에 아래의 파일을 추가합니다.\
gd\_sns.js

■ 회원 회원가입 > 가입방법 선택 | member/join\_method.html\
\- 아래의 내용을 변경함 : 12 라인\
변경 전 :

```
            <a class="sns-login fa js-btn-facebook-login" href="#"><img src="../img/etc/login-facebook-text.png" alt=""> 아이디 회원가입</a>
```

변경 후 :

```
            <a class="sns-login fa js-btn-facebook-login" href="#" data-sns-type="join_method" data-facebook-url="{=facebookUrl}"><img src="../img/etc/login-facebook-text.png" alt=""> 아이디 회원가입</a>
```

\
\
■ 회원 회원가입 > 약관동의 | member/join\_agreement.html\
\- 아래의 내용을 변경함 : 223 라인 \~ 225 라인\
변경 전 :

```
            <div class="btn">
                <button class="skinbtn point1 ja-prev" id="btnPrevStep" type="button"><em>이전단계</em></button>
                <button class="skinbtn point2 ja-next" id="btnNextStep" type="button"><em>다음단계</em></button>
            </div>
```

변경 후 :

```
            <div class="btn">
                <!--{ ? useThirdParty }-->
                <button class="skinbtn point1 ja-prev" id="btnPrevStep" type="button"><em>이전단계</em></button>
                <!--{ / }-->
                <button class="skinbtn point2 ja-next" id="btnNextStep" type="button"><em>다음단계</em></button>
            </div>
```

\
\
■ 회원 회원가입 > 정보입력 | member/join.html\
\- 아래의 내용을 추가함 : 66 라인 아래\
var thirdPartyProfile = {thirdPartyProfile};

\
■ 회원 \[위젯] 회원가입/정보 기본 | member/\_join\_view\.html\
\- 아래의 내용을 변경함 : 24 라인\
변경 전 :

```
<tr class="{?isPaycoJoin}dn{/}">
```

변경 후 :

```
<tr class="{ ? isPaycoJoin || isThirdParty }dn{ / }">
```

\
\- 아래의 내용을 변경함 : 97 라인\
변경 전 :

```
<tr class="{?isPaycoJoin}dn{/}">
```

변경 후 :

```
<tr class="{ ? isPaycoJoin || isThirdParty }dn{ / }">
```

\
\
■ 회원 \[위젯] 회원가입/정보 부가정보 | member/\_join\_view\_other.html\
\- 아래의 내용을 변경함 : 252 라인 \~ 286 라인\
변경 전 :

```
<!--{?usePaycoLogin || useFacebookLogin}-->
<div class="tit">
    <h3>계정 연결정보</h3>
</div>
<div class="snslink clear">
    <!--{?connectFacebook}-->
    <div class="snsconnect-text"><b>연결 계정</b></div>
    <div class="item">
        <span class="icon icon-sns icon-facebook"> </span>
        <!--{?data['snsJoinFl'] == 'n'}-->
        <a href="#" class="normal-btn small3 js-btn-sns-disconnect" data-sns="facebook"><em class="h28">연결해제</em></a>
        <!--{/}-->
    </div>
    <!--{: connectPayco}-->
    <div class="snsconnect-text"><b>연결 계정</b></div>
    <div class="item">
        <img src="../img/etc/square-payco.png" alt="" class="snsimg">
        <!--{?data['snsJoinFl'] == 'n'}-->
        <a href="#" class="normal-btn small3 js-btn-sns-disconnect" data-sns="payco"><em class="h28">연결해제</em></a>
        <!--{/}-->
    </div>
    <!--{:}-->
    <div class="snsconnect-text">연결된 계정이 없습니다.</div>
    <div class="snsconnect">
        <!--{?usePaycoLogin}-->
        <a class="sns-login pa js-btn-sns-connect" href="#" data-sns="payco"> <img src="../img/etc/login-payco-text.png" alt=""> 페이코 연결</a>
        <!--{/}-->
        <!--{?useFacebookLogin}-->
        <a class="sns-login fa js-btn-sns-connect" href="#" data-sns="facebook"> <img src="../img/etc/login-facebook-text.png" alt=""> 페이스북 연결 </a>
        <!--{/}-->
    </div>
    <!--{/}-->
</div>
<!--{/}-->
```

변경 후 :

```
<!--{?usePaycoLogin || useFacebookLogin}-->
<div class="tit">
    <h3>계정 연결정보</h3>
</div>
<div class="snslink clear">
    <!--{?connectFacebook}-->
    <div class="snsconnect-text"><b>연결 계정</b></div>
    <div class="item">
        <img src="../img/etc/square-facebook.png" alt="" class="snsimg">
        <!--{?data['snsJoinFl'] == 'n'}-->
        <a href="#" class="normal-btn small3 js-btn-sns-disconnect" data-sns="facebook" data-facebook-url="{=facebookUrl}"><em class="h28">연결해제</em></a>
        <!--{/}-->
    </div>
    <!--{: connectPayco}-->
    <div class="snsconnect-text"><b>연결 계정</b></div>
    <div class="item">
        <img src="../img/etc/square-payco.png" alt="" class="snsimg">
        <!--{?data['snsJoinFl'] == 'n'}-->
        <a href="#" class="normal-btn small3 js-btn-sns-disconnect" data-sns="payco"><em class="h28">연결해제</em></a>
        <!--{/}-->
    </div>
    <!--{:}-->
    <div class="snsconnect-text">연결된 계정이 없습니다.</div>
    <div class="snsconnect">
        <!--{?usePaycoLogin}-->
        <a class="sns-login pa js-btn-sns-connect" href="#" data-sns="payco"> <img src="../img/etc/login-payco-text.png" alt=""> 페이코 연결</a>
        <!--{/}-->
        <!--{?useFacebookLogin}-->
        <a class="sns-login fa js-btn-sns-connect" href="#" data-sns="facebook" data-facebook-url="{=facebookUrl}"> <img src="../img/etc/login-facebook-text.png" alt=""> 페이스북 연결 </a>
        <!--{/}-->
    </div>
    <!--{/}-->
</div>
<!--{/}-->
```

\
\
■ 회원 로그인 | member/login.html\
\- 아래의 내용을 변경함 : 31 라인 \~ 36 라인\
변경 전 :

```
            <!--{? usePaycoLogin}-->
            <a class="sns-login pa js-btn-payco-login" href="#"><img src="../img/etc/login-payco.png" alt=""></a>
            <!--{/}-->
            <!--{? useFacebookLogin}-->
            <a class="sns-login fa js-btn-facebook-login" href="#"> <img src="../img/etc/login-facebook.png" alt=""> </a>
            <!--{/}-->
```

변경 후 :

```
            <!--{? usePaycoLogin}-->
            <a class="sns-login pa js-btn-payco-login" href="#"><img src="../img/etc/login-payco.png" alt=""> 아이디 로그인</a>
            <!--{/}-->
            <!--{? useFacebookLogin}-->
            <a class="sns-login fa js-btn-facebook-login" href="#" data-facebook-url="{=facebookUrl}"> <img src="../img/etc/login-facebook.png" alt=""> 아이디 로그인</a>
            <!--{/}-->
```

\
\
■ 인트로 인트로 - 성인인증 | intro/adult\_guest.html\
\- 아래의 내용을 변경함 : 38 라인 \~ 47 라인\
변경 전 :

```
                        <!--{? usePaycoLogin || useFacebookLogin}-->
                        <div class="m3">
                            <!--{? usePaycoLogin}-->
                            <a class="sns-login pa js-btn-payco-login" href="#"><img src="../img/etc/login-payco.png" alt=""></a>
                            <!--{/}-->
                            <!--{? useFacebookLogin}-->
                            <a class="sns-login fa js-btn-facebook-login" href="#"><img src="../img/etc/login-facebook.png" alt=""></a>
                            <!--{/}-->
                        </div>
                        <!--{/}-->
```

변경 후 :

```
                        <!--{? usePaycoLogin || useFacebookLogin}-->
                        <div class="m3">
                            <!--{? usePaycoLogin}-->
                            <a class="sns-login pa js-btn-payco-login" href="#"><img src="../img/etc/login-payco.png" alt=""> 아이디 로그인</a>
                            <!--{/}-->
                            <!--{? useFacebookLogin}-->
                            <a class="sns-login fa js-btn-facebook-login" href="#" data-facebook-url="{=facebookUrl}"><img src="../img/etc/login-facebook.png" alt=""> 아이디 로그인</a>
                            <!--{/}-->
                        </div>
                        <!--{/}-->
```

\
\
■ 인트로 인트로 - 회원전용 | intro/member.html\
\- 아래의 내용을 변경함 : 32 라인 \~ 37 라인\
변경 전 :

```
                    <!--{? usePaycoLogin}-->
                    <a class="sns-login pa js-btn-payco-login" href="#"><img src="../img/etc/login-payco.png" alt=""></a>
                    <!--{/}-->
                    <!--{? useFacebookLogin}-->
                    <a class="sns-login pa js-btn-facebook-login" href="#"><img src="../img/etc/login-payco.png" alt=""></a>
                    <!--{/}-->
```

변경 후 :

```
                    <!--{? usePaycoLogin}-->
                    <a class="sns-login pa js-btn-payco-login" href="#"><img src="../img/etc/login-payco.png" alt=""> 아이디 로그인</a>
                    <!--{/}-->
                    <!--{? useFacebookLogin}-->
                    <a class="sns-login fa js-btn-facebook-login" href="#" data-facebook-url="{=facebookUrl}"><img src="../img/etc/login-facebook.png" alt=""> 아이디 로그인</a>
                    <!--{/}-->
```

\
\
■ 마이 페이지 마이페이지 > 회원 비밀번호 검증 | mypage/my\_page\_password.html\
\- 아래의 내용을 변경함 : 7 라인\
변경 전 :

```
<h2 class="h2">회원 비밀번호 검증</h2>
```

변경 후 :

```
<h2 class="h2">회원정보 변경</h2>
```

\
\- 아래의 내용을 변경함 : 31 라인\
변경 전 :

```
<button type="submit" class="skinbtn point2 boarddwrite-save js-btn-facebook-login">
```

변경 후 :

```
<button type="button" class="skinbtn point2 boarddwrite-save js-btn-facebook-re-auth" data-sns-type="my_page_password" data-re-authentication-url="{=facebookReAuthenticationUrl}">
```

\
\
■ 스크립트 gd\_payco.js | js/gd\_payco.js\
\- 아래의 내용을 변경함 : 21 라인 \~ 34 라인\
변경 전 :

```
    if ($snsConnectBtn.length > 0) {
        $snsConnectBtn.click(function () {
            if ($snsConnectBtn.data('sns') == 'payco') {
                var url = '../member/payco/payco_connect.php';
                var win = popup({
                    url: url, target: "paycoLogin", width: 630, height: 560, resizable: "no", scrollbars: "no"
                });
                win.focus();
                return win;
            } else {
                alert('현재는 페이코 로그인만 지원됩니다.');
            }
        });
    }
```

변경 후 :

```
    if ($snsConnectBtn.length > 0) {
        $snsConnectBtn.click(function () {
            if ($(this).data('sns') == 'payco') {
                var url = '../member/payco/payco_connect.php';
                var win = popup({
                    url: url, target: "paycoLogin", width: 630, height: 560, resizable: "no", scrollbars: "no"
                });
                win.focus();
                return win;
            }
        });
    }
```

\
\- 아래의 내용을 변경함 : 77 라인 \~ 93 라인\
변경 전 :

```
        if ($disconnectBtn.length > 0) {
            $disconnectBtn.click(function () {
                if ($disconnectBtn.data('sns') == 'payco') {
                    if (confirm('계정 연결을 해제하시겠습니까?')) {
                        var $ajax = $.ajax('../member/payco/payco_disconnect.php');
                        $ajax.done(function (response) {
                            alert(response.message);
                            if (response.url) {
                                window.location.href = response.url;
                            }
                        });
                    }
                } else {
                    alert('현재는 페이코 로그인만 지원됩니다.');
                }
            });
        }
```

변경 후 :

```
        if ($disconnectBtn.length > 0) {
            $disconnectBtn.click(function () {
                if ($(this).data('sns') == 'payco') {
                    if (confirm('계정 연결을 해제하시겠습니까?')) {
                        var $ajax = $.ajax('../member/payco/payco_disconnect.php');
                        $ajax.done(function (response) {
                            alert(response.message);
                            if (response.url) {
                                window.location.href = response.url;
                            }
                        });
                    }
                }
            });
        }
```
