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

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

[스킨 패치 파일 다운로드 ↓](https://kr1-api-object-storage.nhncloudservice.com/v1/AUTH_69db659103894b00aa9f8b28aa62fe8e/plus-shop-skin-patch/%5B2016-08-10%5D%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;
                            }
                        });
                    }
                }
            });
        }
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://store-help.nhn-commerce.com/app/membership/1502.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
