jungwoo choi
362e3168a7
@yakcloud/auth-adapter: core 인터페이스(프레임워크 무관, ds-sdk type-only) + dev-bypass + next-auth 격리 계층(peer). exports 서브패스(./core·./dev-bypass). @yakcloud/bff-kit: respond(web 표준)·serialize(Prisma-free)·ratelimit·session(AuthAdapter DI). auth-adapter=devDependency(type-only), 죽은 next peer 제거. @yakcloud/client-shell: ServiceClientShell 셸 크롬(헤더/탭/pane/가드)+패널 슬롯+BackupPanel 스텁. (FileBrowser 는 Phase 1) FIX-FIRST 반영: client-shell tsconfig jsx:react-jsx + @types/react(-dom), bff-kit/auth-adapter += @types/node. 7개 패키지 전부 tsc --noEmit 통과. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
// @yakcloud/client-shell — 연결 도움말 사이드 시트(usePanelSheets 로 열림).
|
|
// 자격증명 없이 접속 방법만: host/port(예시 placeholder), <ALIAS>_* env 키 이름, 로컬 Docker 사용 안내.
|
|
// ⛔ /api/internal/credentials 등 비밀 fetch 금지(그런 엔드포인트는 존재하면 안 됨). 값은 전부 placeholder.
|
|
// ui(CardSheet, CodeBlock, C) 런타임 소비, ds-sdk(BIND_ENV_VARS, bindEnvKeys) type-only 아님 — 상수/헬퍼는 값 import.
|
|
import { CardSheet, CodeBlock, C } from "@yakcloud/ui";
|
|
import { BIND_ENV_VARS, bindEnvKeys } from "@yakcloud/ds-sdk";
|
|
import type { ServiceTypeDTO } from "@yakcloud/ds-sdk";
|
|
|
|
export function ConnectionHelpSheet({
|
|
open,
|
|
onClose,
|
|
sourceType,
|
|
alias,
|
|
scrollContainer,
|
|
}: {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
sourceType: ServiceTypeDTO;
|
|
alias: string; // 앱 바인딩 별칭(예: "mydb") → PREFIX 도출
|
|
scrollContainer?: HTMLElement | null;
|
|
}) {
|
|
const vars = BIND_ENV_VARS[sourceType];
|
|
const keys = bindEnvKeys(alias, sourceType);
|
|
|
|
return (
|
|
<CardSheet
|
|
open={open}
|
|
onClose={onClose}
|
|
scrollContainer={scrollContainer}
|
|
title="연결 방법"
|
|
subtitle="자격증명은 노출되지 않습니다. 앱 파드에는 아래 환경변수가 자동 주입됩니다."
|
|
>
|
|
<div className="cs-help">
|
|
<h4>주입되는 환경변수</h4>
|
|
<ul className="cs-env-list">
|
|
{vars.map((v, i) => {
|
|
const key = keys[i];
|
|
return (
|
|
<li key={v.suffix}>
|
|
<code>{key ?? `${alias.toUpperCase()}_${v.suffix}`}</code>
|
|
<span className="cs-env-desc">{v.desc}</span>
|
|
<span className="cs-env-example">
|
|
예: <em>{v.example || "(빈값)"}</em>
|
|
</span>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
|
|
<h4>로컬 Docker 예시 (모두 placeholder)</h4>
|
|
<CodeBlock>
|
|
<C># 실제 값이 아닌 예시입니다. 값은 서버에서만 조립됩니다.</C>
|
|
<br />
|
|
docker run \
|
|
<br />
|
|
{vars.slice(0, 4).map((v, i) => {
|
|
const key = keys[i] ?? `${alias.toUpperCase()}_${v.suffix}`;
|
|
return (
|
|
<span key={v.suffix}>
|
|
{" "}-e {key}=<{v.suffix.toLowerCase()}> \
|
|
<br />
|
|
</span>
|
|
);
|
|
})}
|
|
{" "}your-app:latest
|
|
</CodeBlock>
|
|
|
|
<p className="cs-help-note">
|
|
비밀번호·액세스 키는 이 화면에 표시되지 않으며, 앱 실행 시점에만 파드 환경으로 전달됩니다.
|
|
</p>
|
|
</div>
|
|
</CardSheet>
|
|
);
|
|
}
|