89 lines
3.0 KiB
TypeScript
89 lines
3.0 KiB
TypeScript
/** 템플릿 배포 등급 표시.
|
|
*
|
|
* 페이지 전체 배너를 쓰던 때는 전 템플릿이 내부 전용이라 그걸로 충분했다.
|
|
* 퍼블릭 도메인 명화가 섞이면 배너로는 어느 결과물이 공개 가능한지 구분이 안 되므로
|
|
* 등급을 **카드 단위로** 붙이고, 경고는 내부 전용을 실제로 고른 순간에만 띄운다.
|
|
*/
|
|
|
|
export type License = "public-domain" | "internal-only" | "user-uploaded";
|
|
|
|
const STYLES: Record<License, { label: string; fg: string; bg: string; bd: string }> = {
|
|
"public-domain": {
|
|
label: "공개 가능",
|
|
fg: "var(--color-mint)",
|
|
bg: "var(--color-mint-10)",
|
|
bd: "var(--color-mint-30)",
|
|
},
|
|
"internal-only": {
|
|
label: "내부 전용",
|
|
fg: "#ffc9a3",
|
|
bg: "rgba(255, 154, 90, 0.12)",
|
|
bd: "rgba(255, 154, 90, 0.35)",
|
|
},
|
|
// 내부 전용과 색을 나눈다 — 끄는 조건이 다르고, 책임 주체도 다르다
|
|
"user-uploaded": {
|
|
label: "권리 미확인",
|
|
fg: "#c9b6ff",
|
|
bg: "rgba(166, 130, 255, 0.14)",
|
|
bd: "rgba(166, 130, 255, 0.38)",
|
|
},
|
|
};
|
|
|
|
export function LicenseBadge({ license }: { license: License }) {
|
|
const s = STYLES[license] ?? STYLES["internal-only"];
|
|
return (
|
|
<span style={{
|
|
display: "inline-block",
|
|
padding: "0.1rem 0.45rem",
|
|
borderRadius: "var(--radius-full)",
|
|
border: `1px solid ${s.bd}`,
|
|
background: s.bg,
|
|
color: s.fg,
|
|
fontSize: "var(--text-xs)",
|
|
fontWeight: 700,
|
|
whiteSpace: "nowrap",
|
|
lineHeight: 1.5,
|
|
}}>
|
|
{s.label}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
/** 내부 전용을 고른 순간에만 뜨는 경고. 항상 떠 있으면 아무도 안 읽는다. */
|
|
export function InternalOnlyWarning({ note }: { note?: string }) {
|
|
return (
|
|
<div style={{
|
|
background: STYLES["internal-only"].bg,
|
|
border: `1px solid ${STYLES["internal-only"].bd}`,
|
|
borderRadius: "var(--radius-xl)",
|
|
padding: "0.75rem 1.25rem",
|
|
fontSize: "var(--text-base)",
|
|
color: "var(--color-text-gray-300)",
|
|
lineHeight: 1.6,
|
|
}}>
|
|
<strong style={{ color: STYLES["internal-only"].fg }}>내부 전용 템플릿</strong>
|
|
{" — "}
|
|
{note || "이 레퍼런스로 만든 결과물은 외부 공개·상업 사용을 금합니다."}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** 사용자가 올린 레퍼런스에 대한 고지. 남의 저작물일 수 있다. */
|
|
export function UserReferenceNotice() {
|
|
return (
|
|
<div style={{
|
|
background: STYLES["user-uploaded"].bg,
|
|
border: `1px solid ${STYLES["user-uploaded"].bd}`,
|
|
borderRadius: "var(--radius-xl)",
|
|
padding: "0.75rem 1.25rem",
|
|
fontSize: "var(--text-sm)",
|
|
color: "var(--color-text-gray-300)",
|
|
lineHeight: 1.6,
|
|
}}>
|
|
직접 올린 레퍼런스는 <strong style={{ color: STYLES["user-uploaded"].fg }}>권리를 가진 이미지만</strong> 사용하세요.
|
|
타인의 저작물을 올려 생긴 문제의 책임은 업로드한 사람에게 있습니다.
|
|
결과물은 권리 미확인으로 분류됩니다. 긴 변 600px 이상이면 결과가 좋습니다.
|
|
</div>
|
|
);
|
|
}
|