SPA(Single Page Application)를 위한 SNS 가입/로그인 및 간편 결제 셋팅 가이드

<aside> 💡 SPA 란? SPA(Single Page Application)는 웹 애플리케이션이나 웹사이트의 한 종류로, 단일 페이지로 구성되어 있는 애플리케이션입니다. SPA는 전통적인 웹 애플리케이션과는 다르게, 페이지를 처음 로드한 후에는 전체 페이지를 다시 로드하지 않고도 사용자와 상호작용할 수 있습니다.

</aside>

[스크립트 삽입]

**스크립트 삽입 위치 (**단, Tune720에서 원태그 삽입 및 데이터매니저 사용하기가 이미 설정되어 있다면, 이 단계는 건너뛰세요. 2,3번은 필수)
- 모든 페이지의 공통 영역에 삽입 (예: header, common, footer, layout 등)
- <header></header> 영역의 하단에 삽입하는 것을 추천합니다.
- 삽입할 스크립트: (단, {Service Key}는 원태그 우측 상단의 도메인정보를 확인하시면 됩니다.)
```
<script type="text/javascript" src="<https://cdn.onetag.co.kr/0/tcs.js?eid=>{Service Key}"></script>
```
로그인 유저 대상 활동 정보 수집:
- 로그아웃 실행 성공 시, 다음 함수를 호출하여 활동 정보를 수집합니다:
```
TCS.logout();
```

페이지 이동 데이터 획득:

화면 전환 시, 다음 스크립트를 호출하여 페이지 이동 데이터를 수집합니다:

<script>
window['callDM'] = window['callDM'] || function (){
  (window['callDM'].q = window['callDM'].q || []).push(arguments)
};
callDM();
</script>

1) SNS 가입/로그인 연동

푸터 영역 또는 페이지 로딩 시 가장 하단 영역에서 호출할 수 있도록 삽입하세요. 권장 위치: <footer></footer> 태그 내 또는 페이지의 가장 하단 영역

가입/로그인 완료 시 함수 호출:
- 가입 연동 완료 시, 또는 로그인 연동 완료 시 다음 함수를 호출합니다:
```
TCS.sendMamber(JsonObject); // 인자는 String json이 아닌 JsonObject 입니다.
```

필수 항목 및 예시:

Key	Value	설명	필수 여부
type	String	가입: `join` / 로그인: `login`	Y
snsCode	String	SNS 로그인/가입 코드 (아래 참고)	Y
memberId	String	가입 아이디	Y
memberName	String	가입자 명	N
email	String	가입자 이메일	N
phoneNumber	String	가입자 폰 번호	N
gender	String	가입자 성별 (여성: `F` / 남성: `M`)	N
smsAllowed	String	문자 수신 여부 (`Y`/`N`)	N
emailAllowed	String	이메일 수신 여부 (`Y`/`N`)	N

예시:

{
  "type": "join",
  "snsCode": "00001",
  "memberId": "gildong1234",
  "memberName": "홍길동",
  "email": "[email protected]",
  "phoneNumber": "01012340000",
  "gender": "M",
  "smsAllowed": "Y",
  "emailAllowed": "N"
}

SNS 로그인/가입 코드:
- 00001: 카카오
- 00002: 네이버
- 00003: 페이스북
- 00004: 인스타그램
- 09000: 기타 (일반 가입/로그인 포함)

2) 간편 결제 연동

상품 상세 페이지에 삽입하세요.

결제 완료 후 함수 호출:
- 결제 완료 후, 아래의 함수를 호출하여 결제 데이터를 수집합니다:
```
TCS.simplePay(JsonObject); // 인자는 String json이 아닌 JsonObject입니다.
```

필수 항목 및 설명:

Key	Value	설명	필수 여부
payCode	String	간편 결제 코드 (아래 참고)	Y
orderId	String	주문 번호	Y
products	Array	상품 정보 리스트	Y
productId	String	개별 상품 코드	Y
productName	String	개별 상품 명	Y
productPrice	String	개별 상품 가격	Y
productDcPrice	String	개별 상품 할인 가격	N
productQty	String	개별 상품 수량	Y
totalPrice	String	전체 주문 상품 가격	Y
totalQty	String	전체 주문 상품 수량	Y
memberId	String	로그인 아이디	N

예시:

{
  "payCode": "19000",
  "orderId": "20240701_12154",
  "products": [
    {
      "productId": "23",
      "productName": "상품명입니다",
      "productPrice": "288000",
      "productQty": "1",
      "productDcPrice": "258000"
    }
  ],
  "totalPrice": "288000",
  "totalQty": "1",
  "memberId": "gildong1234"
}