이 글의 성격은 무엇인가요?
질문 / 문제 해결
내용을 설명해주세요
배너 광고 id와 코드를 작성했는데, 배너공간만 확보되어있고(흰배경) 광고는 안뜨고 있습니다. 뭐가 문제일까요?
<App.tsx>
import React, { useEffect, useState } from ‘react’;
import { getAnonymousKey } from ‘@apps-in-toss/web-framework’;
function App() {
// 
1. 플러터 액자의 주소를 상태로 관리합니다.
const [iframeSrc, setIframeSrc] = useState(‘/flutter.html’);
useEffect(() => {
const path = window.location.pathname;
if (path && path !== '/') {
setIframeSrc(`/flutter.html?route=${path}`);
}
}, );
useEffect(() => {
const handleMessage = async (event: MessageEvent) => {
if (event.data === ‘REQUEST_ANONYMOUS_KEY’) {
try {
const result = await getAnonymousKey();
if (result && typeof result !== ‘string’ && result.type === ‘HASH’) {
const successMsg = JSON.stringify({ type: ‘TOSS_ANON_SUCCESS’, hash: result.hash });
document.querySelector(‘iframe’)?.contentWindow?.postMessage(successMsg, ‘');
} else {
const errorReason = typeof result === ‘string’ ? result : ‘지원하지 않는 버전 또는 카테고리 오류’;
const errorMsg = JSON.stringify({ type: ‘TOSS_ANON_ERROR’, error: errorReason });
document.querySelector(‘iframe’)?.contentWindow?.postMessage(errorMsg, '’);
}
} catch (error) {
const errorMsg = JSON.stringify({ type: ‘TOSS_ANON_ERROR’, error: String(error) });
document.querySelector(‘iframe’)?.contentWindow?.postMessage(errorMsg, ‘*’);
}
}
};
window.addEventListener('message', handleMessage);
return () => window.removeEventListener('message', handleMessage);
}, );
// 4. 하단 고정 배너 광고 로직 (기존과 동일)
useEffect(() => {
const loadTossAd = async () => {
try {
const adUnitId = ‘광고 id’; //광고 id는 맞게 입력했습니다.
const tossObj = (window as any).Toss;
if (tossObj && tossObj.attachBanner) {
await tossObj.attachBanner('#toss-banner', {
adUnitId: adUnitId,
variant: 'expanded',
theme: 'auto',
tone: 'blackAndWhite',
});
}
} catch (error) {}
};
setTimeout(loadTossAd, 300);
}, );
return (
<div style={{ display: ‘flex’, flexDirection: ‘column’, width: ‘100vw’, height: ‘100vh’, backgroundColor: ‘white’, margin: 0, padding: 0, overflow: ‘hidden’ }}>
<div style={{ flex: 1, width: ‘100%’ }}>
<iframe
src={iframeSrc}
style={{ width: ‘100%’, height: ‘100%’, border: ‘none’, display: ‘block’ }}
title=“semogong-flutter”
/>
<div id=“toss-banner” style={{ width: ‘100%’, minHeight: ‘96px’, backgroundColor: ‘#ffffff’ }}>
);
}
export default App;
appName (선택)
세모공
