커미션 설명 커스텀 제약사항

크리에이터 가이드

커미션 설명 커스텀 제약사항

iframe에서 허용되는 postMessage

미닛에서는 iframe에서 보내는 모든 postMessage를 허용하지 않아요. 현재 아래 두 가지 메시지만 허용해서 받고 있어요.

type AllowedIframeMessage =
	| {
			type: 'resize';
			height: number;
	  }
	| {
			type: 'openInquiry';
	  };

resize는 iframe 높이를 자동으로 조절할 때 사용해요.

openInquiry는 현재 커미션의 크리에이터와 채팅하기 동작을 실행할 때 사용해요.

이 외의 메시지는 미닛에서 처리하지 않아요.

즉, iframe 내부 스크립트에서 자유롭게 부모 페이지 기능을 제어할 수 있는 구조는 아니며, 미닛에서 정한 메시지 타입만 제한적으로 사용할 수 있어요.

resize 메시지 사용 시 주의사항

height에는 숫자 값을 전달해야 해요.

resize는 iframe 자체의 높이를 바꾸는 용도로만 동작해요.

window.parent.postMessage(
	{
		type: 'resize',
		height: number
	}
);

openInquiry 메시지 사용 시 주의사항

openInquiry는 크리에이터와 채팅하기 동작에만 연결돼요.

미닛의 권한/상태에 따라 실제 동작 가능 여부가 달라질 수 있어요.

window.parent.postMessage(
	{
		type: 'openInquiry'
	}
);

커스텀 설명 네비게이션 제약사항

커스텀 설명 네비게이션에 입력한 HTML은 그대로 적용되지 않고, 미닛에서 안전하지 않은 요소를 정리한 뒤 사용돼요.

script 태그, 이벤트 속성(onclick 등)처럼 위험할 수 있는 코드는 sanitize 되어 제거돼요.

즉, 임의의 자바스크립트를 직접 실행하는 방식은 사용할 수 없어요.

허용되지 않는 태그나 속성을 사용한 경우 일부 구조나 스타일이 의도와 다르게 보일 수 있어요.

입력창에는 네비게이션 전체를 감싸는 바깥 구조까지 직접 작성할 필요가 없고, 미닛에서 제공하는 컨테이너 안에 표시될 내용만 작성하면 돼요.

html

<div class="meenit-side-floating" style="max-width: 180px; position: fixed; display: none; top: 50%; transform: translateY(-50%);">
	{커스텀 네비게이션 html}
</div>
<style>
	@media (min-width: 1680px) {
		.meenit-side-floating {
			display: block !important;
		}
	}

	@media (min-width: 1720px) {
		.meenit-side-floating {
			left: 1.5rem !important;
		}
	}

	@media (min-width: 1780px) {
		.meenit-side-floating {
			left: 2.5rem !important;
		}
	}
</style>

실제로 작성해야 하는 부분은 {커스텀 네비게이션 html} 영역이며, 바깥 div는 미닛에서 처리해요.

커스텀 설명 네비게이션에서 사용하는 data-scroll-to

커스텀 설명 네비게이션에서는 data-scroll-to 속성을 이용해 설명 안의 특정 위치로 이동할 수 있어요. 클릭한 요소에서 data-scroll-to 값을 읽어 이동 대상을 결정하는 방식이에요.

data-scroll-to에는 이동할 대상의 id를 넣어주세요.

설명 본문 안에 같은 id를 가진 요소가 있으면 그 위치로 부드럽게 스크롤해요.

값이 __top__ 이면 페이지 최상단으로 이동해요.

같은 문서 안에 해당 id가 없으면 iframe 쪽에 scrollTo 메시지를 보내 이동을 시도해요.

존재하지 않는 id를 넣으면 원하는 위치로 이동하지 않을 수 있어요.

html

<div class="meenit-menu">
	<ul>
		<li>
			<button type="button" data-scroll-to="notice">
				유의사항
			</button>
		</li>
		<li>
			<button type="button" data-scroll-to="sample">
				샘플 안내
			</button>
		</li>
		<li>
			<button type="button" data-scroll-to="process">
				진행 방식
			</button>
		</li>
		<li>
			<button type="button" data-scroll-to="__top__">
				맨 위로
			</button>
		</li>
	</ul>
</div>

예를 들어 data-scroll-to="notice" 라고 작성했다면, 설명 안에 id가 notice인 위치가 있어야 정상적으로 이동할 수 있어요. 설명 에디터에서 추가한 네비게이션 위치 목록을 확인한 뒤, 그 목록에 있는 id를 그대로 사용하는 것을 권장해요.

같은 문서 안에 해당 id가 없는 경우에는 iframe 쪽으로 scrollTo 메시지를 보내 이동을 시도해요.

const payload = {
	type: 'scrollTo',
	offset: 120,
	id
};

try {
	iframe.contentWindow?.postMessage(payload);
} catch {}

window.postMessage(payload);