SPA 사용 시 가이드 | PerfittSize Docs

React, Vue, Angular처럼 페이지를 새로 읽지 않고 화면을 바꾸는 사이트에서 PerfittSize를 쓰는 방법입니다.

스크립트 삽입

SPA의 시작 페이지인 index.html의 head에 PerfittSize 스크립트 태그를 넣습니다. 한 번만 넣으면 됩니다.

초기화 방법

SPA는 페이지를 이동해도 스크립트가 다시 실행되지 않으므로, 상품 페이지의 컴포넌트 렌더링이 끝난 뒤 아래 코드로 PerfittSize를 직접 실행합니다. productId는 꼭 넘겨야 버튼이 그려집니다.

JavaScript

window.initializePerfittSize({ productId: '{{상품 ID}}' });

주의사항

이 호출은 수동 실행 모드가 켜진 프로젝트에서만 동작합니다. SPA라면 펄핏 담당자에게 수동 실행 모드를 미리 요청하세요. 상품이 바뀌면 다시 호출해야 새 상품의 버튼이 그려집니다.

프레임워크별 예제

상품이 바뀔 때마다 화면이 그려진 뒤 실행되게 하는 예입니다. 넘기는 값의 뜻은 연동 항목을 보세요.

React

React Router를 쓰면 라우트가 바뀔 때마다 실행되도록 다음처럼 구현합니다.

ProductPage.jsx

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function ProductPage({ product }) {
  const location = useLocation();

  useEffect(() => {
    // 상품 정보가 그려진 뒤, 페이지가 바뀔 때마다 실행
    window.initializePerfittSize({
      productId: product.id,
      brand: product.brand,
      modelNo: product.modelNo,
      gender: product.gender, // 'f' 또는 'm'
    });
  }, [location, product.id]);

  return (
    // ... 상품 페이지 컴포넌트
  );
}

Vue 3

상품 ID를 지켜보다가 바뀌면 화면이 그려진 뒤(flush: 'post') 실행합니다.

ProductPage.vue

import { watch } from 'vue';

export default {
  props: ['product'],
  setup(props) {
    // 상품이 바뀔 때마다, 화면이 그려진 뒤 실행
    watch(
      () => props.product.id,
      () => {
        window.initializePerfittSize({
          productId: props.product.id,
          brand: props.product.brand,
          modelNo: props.product.modelNo,
          gender: props.product.gender, // 'f' 또는 'm'
        });
      },
      { immediate: true, flush: 'post' }
    );
  },
};

Next.js (App Router)

클라이언트 컴포넌트에서 경로가 바뀔 때마다 실행합니다. 스크립트 태그는 app/layout의 <head>에 한 번 넣습니다.

perfitt-init.jsx

'use client';
import { useEffect } from 'react';
import { usePathname } from 'next/navigation';

export default function PerfittInit({ product }) {
  const pathname = usePathname();

  useEffect(() => {
    // 경로나 상품이 바뀔 때마다 실행
    window.initializePerfittSize({
      productId: product.id,
      brand: product.brand,
      modelNo: product.modelNo,
      gender: product.gender, // 'f' 또는 'm'
    });
  }, [pathname, product.id]);

  return null;
}

// 상품 페이지에서 상품 정보 아래에 <PerfittInit product={product} />를 둡니다