+ {/* ─── 1단계: URL 입력 ─── */}
+
+
+
updateConfig("url", e.target.value)}
+ placeholder="https://example.com"
+ className="h-8 text-sm"
+ />
+
임베드할 외부 웹페이지 주소를 입력하세요
+
+
+ {/* ─── 2단계: SSO 연동 ─── */}
+
+
+
+
+
+
SSO 연동
+
현재 로그인 토큰을 URL에 자동 전달해요
+
+
+
updateConfig("useSSO", checked)} />
+
+
+ {config.useSSO && (
+
+
+
+
+
+
+
+
전달 방식
+
URL 쿼리 파라미터로 JWT가 전달됩니다.
+
?sso_token=eyJhbGciOi...
+
+
+
+
JWT Payload 구조
+
+
+ userId
+ 사용자 ID
+
+
+ userName
+ 사용자 이름
+
+
+ companyCode
+ 회사 코드
+
+
+ role
+ 권한
+
+
+
+
+
+
+
수신측 예시 코드
+
+
+
+ {`const token = url.searchParams
+ .get("sso_token");
+const payload = JSON.parse(
+ atob(token.split(".")[1])
+);
+// payload.userId
+// payload.companyCode`}
+
+
+
+ )}
+
+
+ {/* ─── 3단계: 표시 옵션 ─── */}
+
+
+
+
테두리 표시
+
웹 뷰 주변에 테두리를 표시해요
+
+
updateConfig("showBorder", checked)}
+ />
+
+
+
+
+
전체 화면 허용
+
임베드된 페이지에서 전체 화면 전환이 가능해요
+
+
updateConfig("allowFullscreen", checked)}
+ />
+
+
+
+ {/* ─── 4단계: 고급 설정 (기본 접혀있음) ─── */}
+
+
+
+
+
+
+
+
+
샌드박스 모드
+
보안을 위해 iframe 실행 환경을 제한해요
+
+
updateConfig("sandbox", checked)}
+ />
+
+
+
+ 모서리 둥글기
+ updateConfig("borderRadius", e.target.value)}
+ placeholder="8px"
+ className="h-7 w-[100px] text-xs"
+ />
+
+
+
+ 로딩 텍스트
+ updateConfig("loadingText", e.target.value)}
+ placeholder="로딩 중..."
+ className="h-7 w-[140px] text-xs"
+ />
+
+
+