@logan-jun/cd1-rag-chat 0.4.2 → 0.5.1

package/host-integration/HOST_INTEGRATION.md

@@ -1,123 +0,0 @@
-# 호스트 통합 가이드
-
-`@logan-jun/cd1-rag-chat` 을 호스트 포탈에 iframe 으로 임베드할 때 환경별 깨짐 없이 동작하도록 하는 권장 패턴.
-
-## 핵심 원칙
-
-iframe height 를 **정적 `calc(100vh - 64px)` 같은 값으로 잡지 마세요.**
-
-- 헤더 높이가 환경/사용자 zoom/줄바꿈/banner 추가 등으로 바뀌면 모두 깨집니다
-- 모바일 브라우저 상단바는 스크롤에 따라 동적으로 변합니다
-- iframe 은 자기 외부(호스트 chrome)를 모르기 때문에 자체적으로 보정 불가
-
-## 권장: Flex Layout + `height: 100%` (모드: `fill`)
-
-호스트 페이지 전체를 flex column 으로 두고, iframe 컨테이너는 `flex: 1`. iframe 자체는 `height: 100%`. → 헤더가 어떻게 커지든 iframe 이 **남는 영역 자동 차지**. JS 메시지, calc, 환경별 분기 모두 불필요.
-
-### 최소 예시 (Plain HTML)
-
-```html
-<style>
-  html, body { height: 100%; margin: 0; }
-  .host-shell {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-  }
-  .host-header { flex: 0 0 auto; padding: 12px 24px; background: #24292f; color: #fff; }
-  .host-body   { flex: 1; min-height: 0; }    /* ← min-height:0 가 핵심 */
-  .host-body iframe { width: 100%; height: 100%; border: 0; display: block; }
-</style>
-
-<div class="host-shell">
-  <header class="host-header">포탈 헤더</header>
-  <main class="host-body">
-    <iframe src="/embedded/rag-chat/index.html"></iframe>
-  </main>
-</div>
-```
-
-핵심:
-- `.host-shell`: `display: flex; flex-direction: column; height: 100vh`
-- 헤더: `flex: 0 0 auto` (자기 크기 그대로)
-- iframe 컨테이너: `flex: 1; min-height: 0` (남는 공간 차지, **`min-height: 0` 잊지 마세요** — flex 자식의 default `min-height: auto` 가 overflow 만들 수 있습니다)
-- iframe: `height: 100%`
-
-### Vue + RemoteModule.vue 사용 시
-
-```vue
-<template>
-  <div class="host-shell">
-    <header class="host-header">포탈 헤더</header>
-    <main class="host-body">
-      <RemoteModule
-        src="/embedded/rag-chat/index.html"
-        :token="keycloakToken"
-        :base-url="apiBaseUrl"
-        height-mode="fill"   <!-- ← default. 생략 가능 -->
-      />
-    </main>
-  </div>
-</template>
-
-<style scoped>
-.host-shell {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-}
-.host-header { flex: 0 0 auto; }
-.host-body   { flex: 1; min-height: 0; }
-</style>
-```
-
-## 대안: 콘텐츠 사이즈 추종 (모드: `content`)
-
-- 사이드바 카드, 인라인 임베드처럼 **iframe 이 자기 콘텐츠 크기만큼 자라야** 하는 경우
-- iframe 콘텐츠의 `documentElement.scrollHeight` 를 postMessage 로 받아 동적으로 px 조절
-- 단점: chat 처럼 길이가 무한히 자라는 콘텐츠는 부적합 (페이지 자체가 무한히 자람)
-
-```vue
-<RemoteModule
-  src="/embedded/sample-card/index.html"
-  height-mode="content"
-  :min-height="300"
-/>
-```
-
-## 안티패턴 (피해주세요)
-
-```css
-/* ❌ 정적 calc — 환경/zoom/banner 마다 깨짐 */
-iframe { height: calc(100vh - 64px); }
-
-/* ❌ 100vh 직접 — 헤더 높이만큼 페이지 스크롤 발생 */
-iframe { height: 100vh; }
-
-/* ❌ 고정 px — 작은 화면에서 잘림, 큰 화면에서 여백 */
-iframe { height: 800px; }
-```
-
-## 트러블슈팅
-
-### "입력창이 안 보이고 페이지에 세로 스크롤이 생긴다"
-→ iframe height 가 호스트 viewport 보다 크게 잡힘. 위 flex 패턴으로 변경.
-
-### "iframe 이 너무 작아서 거의 안 보인다"
-→ 부모 컨테이너가 `min-height: 0` 없이 flex 자식인 경우, 또는 부모 자체에 height 가 없는 경우. 부모부터 위로 올라가며 height/flex 체인 확인.
-
-### "iframe 안 메시지 영역이 viewport 보다 짧다"
-→ iframe 안의 `App.vue` 의 `.cp-root` 는 `height: 100%` 로 부모 따라가는 방식. iframe element 자체 height 가 정확하면 자동으로 채워집니다.
-
-## 우리 측 보장사항
-
-- `.cp-root: height: 100%` — iframe element 의 height 를 그대로 따름
-- `min-height: 400px` — 호스트가 극단적으로 작게 줘도 최소 보장
-- `flex column` + `.cp-main: flex 1, overflow-y auto` + ChatInput 항상 표시
-- bridge.ts 의 `height` 메시지는 `heightMode='content'` 사용 시만 활용됨
-
-## 변경 이력
-
-- 0.4.2: `RemoteModule.vue` 에 `heightMode` prop 추가 (`fill` 기본). iframe `height: 100%`. 정적 calc 패턴 폐기 권장
-- 0.4.1: bridge.ts 의 origin allowlist 추가 (`hyundaicard.com` 화이트리스트)
-- 0.4.0: 초기 chat 모듈 publish