내비게이션 (Navigation)

navigation 객체는 Elice 플랫폼 내에서 강의 페이지 간 이동을 위한 메서드를 제공합니다.

⚠️ 모든 navigation 메서드는 콘텐츠가 Elice 플랫폼의 iframe에 임베드되어 있을 때만 정상적으로 동작합니다. 부모 프레임과 postMessage를 통해 통신합니다.

메서드

previous (이전 페이지로 이동)

이전 강의 페이지로 이동합니다.

import { cdk } from './path/to/cdk';

cdk.navigation.previous();

next (다음 페이지로 이동)

다음 강의 페이지로 이동합니다.

import { cdk } from './path/to/cdk';

cdk.navigation.next();

getHasPrevious (이전 페이지 존재 여부 확인)

이전 강의 페이지가 존재하는지 확인합니다. 이동 가능한 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다.

반환값

타입	설명
boolean	이전 페이지로 이동 가능하면 true를 반환합니다.

import { cdk } from './path/to/cdk';

const checkNavigation = async () => {
  const hasPrevious = await cdk.navigation.getHasPrevious();
  console.log('이전 페이지 존재:', hasPrevious);
};

getHasNext (다음 페이지 존재 여부 확인)

다음 강의 페이지가 존재하는지 확인합니다. 이동 가능한 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다.

반환값

타입	설명
boolean	다음 페이지로 이동 가능하면 true를 반환합니다.

import { cdk } from './path/to/cdk';

const checkNavigation = async () => {
  const hasNext = await cdk.navigation.getHasNext();
  console.log('다음 페이지 존재:', hasNext);
};

사용 예제

내비게이션 버튼 구현 (React)

import { cdk } from './path/to/cdk';
import { useState, useEffect } from 'react';

const NavigationButtons = () => {
  const [hasPrevious, setHasPrevious] = useState(false);
  const [hasNext, setHasNext] = useState(false);

  useEffect(() => {
    const checkNavigationState = async () => {
      const [prev, next] = await Promise.all([
        cdk.navigation.getHasPrevious(),
        cdk.navigation.getHasNext(),
      ]);
      setHasPrevious(prev);
      setHasNext(next);
    };

    checkNavigationState();
  }, []);

  return (
    <div>
      <button disabled={!hasPrevious} onClick={() => cdk.navigation.previous()}>
        이전
      </button>
      <button disabled={!hasNext} onClick={() => cdk.navigation.next()}>
        다음
      </button>
    </div>
  );
};