-
- 
-
- - 📧 rlagusrl928@gmail.com - - |
-
Korean profanity filter API
+한국어 문장의 비속어를 검출하고 필요한 방식으로 마스킹하는 API입니다.
+{authenticated ? "API Key로 바로 연동할 수 있습니다" : "로그인 후 선택할 수 있습니다"}
+시작하기
++ {authenticated + ? "연동 환경에 맞는 자격 증명을 선택하고 API 문서에서 요청 방식을 확인하세요." + : "Google 또는 GitHub 계정으로 로그인한 뒤 자격 증명을 만들고 관리할 수 있습니다."} +
+Sign in
+자격 증명은 Google 또는 GitHub로 로그인한 사용자만 만들고 관리할 수 있습니다.
+{error || (pending ? "로그인 상태를 확인하고 있습니다." : "선택한 계정의 로그인 화면으로 이동합니다.")}
+{authenticated ? "API Key를 만들거나 다음 인증 방식을 미리 확인하세요." : "Google 또는 GitHub 계정으로 로그인한 뒤 만들 수 있습니다."}
+{props.subtitle}
+{props.description}
+ + +SSO에서 확인한 기본 계정 정보입니다.
이 화면은 발급 흐름을 확인하는 프로토타입입니다. API가 연결되기 전에는 자격 증명을 생성하거나 전송하지 않습니다.
+ +{isReference ? OPENAPI_URL : OVERVIEW_URL}
+ {codeLines.join("\n")}{renderInline(paragraph.join(" "))}
); + } + + return nodes; +} + +function renderTable(lines: string[], key: string) { + const rows = lines + .filter((line) => !/^\|\s*-/.test(line)) + .map((line) => line.split("|").slice(1, -1).map((cell) => cell.trim())); + const [head, ...body] = rows; + const hasPlannedOAuth = body.some((row) => row.some((cell) => cell.includes("OAUTH2_ACCESS_TOKEN"))); + return ( +| {renderInline(cell)} | )}
|---|
| {renderInline(cell)} | )} +
{part.slice(1, -1)};
+ if (part.startsWith("**") && part.endsWith("**")) return {part.slice(2, -2)};
+ return /, "Register page must not show raw response JSON.");
-assert.match(registerPage, /navigator\.clipboard\.writeText/, "Issued keys must be copyable.");
-
-assert.match(styles, /\.register-page\b/, "Register page shell must be styled.");
-assert.match(styles, /\.register-form\b/, "Register form must be styled.");
-assert.match(styles, /\.register-result\b/, "Register result must be styled.");
diff --git a/ui/sample-app/src/App.tsx b/ui/sample-app/src/App.tsx
deleted file mode 100644
index 64c498f..0000000
--- a/ui/sample-app/src/App.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { lazy, Suspense, useCallback, useEffect, useState } from "react";
-
-import { getCurrentPagePath, type PagePath } from "./constants/pagePath";
-import { OPENAPI_DOCUMENT_URL, OVERVIEW_MARKDOWN_PATH, FALLBACK_OVERVIEW_MARKDOWN } from "./docs/constants";
-import { preloadDocsDocuments } from "./docs/hooks";
-import { HomePage } from "./features/home/HomePage";
-import { LoginPage } from "./features/login/LoginPage";
-import { RegisterPage } from "./features/register/RegisterPage";
-import { Navigation } from "./components/Navigation";
-
-function loadDocsPage() {
- const docsPageModule = import("./DocsPage");
- const docsDocuments = preloadDocsDocuments(
- OPENAPI_DOCUMENT_URL,
- OVERVIEW_MARKDOWN_PATH,
- FALLBACK_OVERVIEW_MARKDOWN,
- );
-
- return Promise.all([
- docsPageModule,
- docsDocuments,
- ]).then(([module]) => module);
-}
-
-const DocsPage = lazy(loadDocsPage);
-
-export default function App() {
- const [pagePath, setPagePath] = useState(() => getCurrentPagePath(window.location.pathname));
-
- const handlePopState = useCallback(() => {
- setPagePath(getCurrentPagePath(window.location.pathname));
- }, []);
-
- useEffect(() => {
- window.history.scrollRestoration = "manual";
- window.addEventListener("popstate", handlePopState);
- return () => window.removeEventListener("popstate", handlePopState);
- }, [handlePopState]);
-
- useEffect(() => {
- window.scrollTo({ top: 0, behavior: "auto" });
- }, [pagePath]);
-
- const navigate = useCallback((path: PagePath) => {
- if (window.location.pathname !== path) {
- window.history.pushState({}, "", path);
- }
- setPagePath(path);
- window.scrollTo({ top: 0, behavior: "smooth" });
- }, []);
-
- return (
-
-
- );
-}
-
-function DocsFallback() {
- return >(() => new Set());
- const { document, error } = useOpenApiDocument(OPENAPI_DOCUMENT_URL);
- const overview = useMarkdownDocument(OVERVIEW_MARKDOWN_PATH, FALLBACK_OVERVIEW_MARKDOWN);
-
- useEffect(() => {
- const syncHash = () => setActiveHash(getDecodedHash());
- window.addEventListener("hashchange", syncHash);
- window.addEventListener("popstate", syncHash);
- return () => {
- window.removeEventListener("hashchange", syncHash);
- window.removeEventListener("popstate", syncHash);
- };
- }, []);
-
- const sections = useMemo(() => (document ? buildSections(document) : []), [document]);
- const overviewLinks = useMemo(() => buildHashNavigation(overview.content), [overview.content]);
- const selectedSection = useMemo(() => getSectionForHash(activeHash, sections), [activeHash, sections]);
-
- const scalarConfiguration = useMemo(() => {
- if (!document) {
- return null;
- }
-
- return {
- content: document,
- title: document.info?.title ?? "API 문서",
- slug: "docs",
- theme: "none",
- layout: "modern",
- forceDarkModeState: "light",
- defaultOpenAllTags: true,
- defaultOpenFirstTag: false,
- hideDarkModeToggle: true,
- documentDownloadType: "none",
- hideTestRequestButton: true,
- hideClientButton: true,
- hideModels: true,
- hideSearch: true,
- showSidebar: false,
- showDeveloperTools: "never",
- searchHotKey: "k",
- withDefaultFonts: false,
- agent: { disabled: true },
- mcp: { disabled: true },
- generateTagSlug: ({ name }) => slugify(name ?? ""),
- generateOperationSlug: ({ method, path, operationId, summary }) =>
- createScalarOperationSlug({ method, path, operationId, summary }),
- };
- }, [document]);
-
- useEffect(() => {
- if (!selectedSection) {
- return;
- }
- setOpenSectionSlugs((current) => {
- if (current.has(selectedSection.slug)) {
- return current;
- }
- const next = new Set(current);
- next.add(selectedSection.slug);
- return next;
- });
- }, [selectedSection]);
-
- useEffect(() => {
- const targetHash = activeHash || "overview";
- const timers: number[] = [];
- let attempts = 0;
-
- const scrollWhenReady = () => {
- const target = window.document.getElementById(targetHash);
- if (target) {
- target.scrollIntoView({ block: "start" });
- return;
- }
- if (attempts < 30) {
- attempts += 1;
- timers.push(window.setTimeout(scrollWhenReady, 120));
- }
- };
-
- timers.push(window.setTimeout(scrollWhenReady, 0));
- return () => timers.forEach((timer) => window.clearTimeout(timer));
- }, [activeHash, selectedSection?.slug, overview.content]);
-
- const copyOpenApiUrl = async () => {
- if (!navigator.clipboard) {
- return;
- }
- await navigator.clipboard.writeText(OPENAPI_DOCUMENT_URL);
- setCopied(true);
- window.setTimeout(() => setCopied(false), 1400);
- };
-
- if (error) {
- return (
-
- {error}
-
- );
- }
-
- if (!document) {
- return (
-
-
- );
- }
-
- const isOverview = !activeHash.startsWith("docs/tag/");
- const getLinkClassName = (anchor: string, extraClassName?: string) =>
- [activeHash === anchor ? "active" : "", extraClassName].filter(Boolean).join(" ") || undefined;
- const toggleOpenApiSection = (sectionSlug: string) => {
- setOpenSectionSlugs((current) => {
- const next = new Set(current);
- if (next.has(sectionSlug)) {
- next.delete(sectionSlug);
- } else {
- next.add(sectionSlug);
- }
- return next;
- });
- };
-
- return (
-
-
-
-
-
- {isOverview ? (overview.source === "local" ? "Markdown" : "fallback") : document.openapi}
-
-
-
-
- {isOverview ? (
-
-
- Overview
- {overview.source === "local" ? overview.url : "fallback"}
-
-
- ) : (
-
- {scalarConfiguration ?
-
-
- );
-}
-
-function DocsLoadingFrame() {
- return (
-
- {parseMarkdown(content)} ;
-}
-
-function slugify(value: string) {
- return value
- .trim()
- .toLowerCase()
- .replace(/&/g, "and")
- .replace(/[^a-z0-9가-힣]+/g, "-")
- .replace(/^-+|-+$/g, "");
-}
diff --git a/ui/sample-app/src/components/Navigation.tsx b/ui/sample-app/src/components/Navigation.tsx
deleted file mode 100644
index dc6326a..0000000
--- a/ui/sample-app/src/components/Navigation.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import type { PagePath } from "../constants/pagePath";
-
-type NavigationProps = {
- onNavigate: (path: PagePath) => void;
- pagePath: PagePath;
-};
-
-export function Navigation({ onNavigate, pagePath }: NavigationProps) {
- return (
-
- {
- event.preventDefault();
- onNavigate("/");
- }}
- >
- 말조심하세욧
-
-
-
- );
-}
diff --git a/ui/sample-app/src/constants/landingContent.ts b/ui/sample-app/src/constants/landingContent.ts
deleted file mode 100644
index a59a14b..0000000
--- a/ui/sample-app/src/constants/landingContent.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-export type IdentityTabOption = {
- id: "free-practical" | "korean-focused" | "developer-integration";
- tabLabel: string;
- label: string;
- intro: string;
- title: string;
- body: string;
- points: readonly string[];
- proofItems: readonly string[];
- visualLabel: string;
- visualTitle: string;
- visualLines: readonly string[];
-};
-
-export type ScenarioStep = {
- id: "scenario-1" | "scenario-2" | "scenario-3";
- label: string;
- title: string;
- body: string;
-};
-
-export const IDENTITY_OPTIONS: readonly IdentityTabOption[] = [
- {
- id: "free-practical",
- tabLabel: "무료/실용",
- label: "작은 서비스",
- intro: "비용 때문에 입력 안전망을 미루지 않게",
- title: "작은 서비스도 한국어 입력을 안전하게 다룰 수 있게",
- body: "포트폴리오, 학습, 비영리 서비스가 댓글과 게시글 저장 전에 기본 비속어 필터링을 붙일 수 있도록 만든 무료 REST API입니다.",
- points: ["무료로 시작", "키 발급 후 호출", "현실적인 첫 안전망"],
- proofItems: ["키 발급 후 바로 호출", "문서 보고 붙이기", "상업용은 KISO 권장"],
- visualLabel: "추천 대상",
- visualTitle: "무료로 시작하는 입력 안전망",
- visualLines: ["학습 서비스", "비영리 프로젝트", "사이드 프로젝트"],
- },
- {
- id: "korean-focused",
- tabLabel: "한국어 중심",
- label: "한국어 필터",
- intro: "영어권 moderation이 놓치는 한국어 입력을 기준으로",
- title: "한국어 비속어 사전을 빠르게 검색합니다",
- body: "Aho-Corasick Trie로 등록된 비속어 목록을 한 번에 매칭하고, 초성/한글/영문이 섞인 사용자 입력에서도 검출 위치를 계산합니다.",
- points: ["빠른 사전 검색", "검출부터 마스킹까지", "단어 목록 동기화"],
- proofItems: ["첫 단어만 빠르게 확인", "전체 검출", "마스킹 문장 반환"],
- visualLabel: "검출 기준",
- visualTitle: "한국어 문장을 기준으로",
- visualLines: ["초성 입력", "한글 문장", "영문 혼합"],
- },
- {
- id: "developer-integration",
- tabLabel: "개발자 연동",
- label: "REST API",
- intro: "서비스 흐름을 크게 바꾸지 않고",
- title: "저장 전에 API 한 번으로 붙입니다",
- body: "댓글, 채팅, 게시글 저장 직전에 필터 API를 호출하고, 검출 결과와 마스킹된 문장, 응답 코드를 확인하면 됩니다.",
- points: ["문장 전달", "동기 또는 콜백 처리", "문서 기반 연동"],
- proofItems: ["필터 API 호출", "문장 전달", "응답 코드 확인", "키로 인증"],
- visualLabel: "연동 흐름",
- visualTitle: "저장 전에 한 번 확인",
- visualLines: ["입력 받기", "필터 호출", "결과 반영"],
- },
-] as const;
-
-export const SCENARIO_STEPS: readonly ScenarioStep[] = [
- {
- id: "scenario-1",
- label: "01",
- title: "사용자가 댓글을 입력",
- body: "서비스는 저장 전에 필터 API를 호출합니다.",
- },
- {
- id: "scenario-2",
- label: "02",
- title: "FILTER 모드로 마스킹",
- body: "비속어 위치를 찾고 노출 가능한 문장으로 바꿉니다.",
- },
- {
- id: "scenario-3",
- label: "03",
- title: "정리된 문장을 저장",
- body: "응답 결과를 댓글, 채팅, 게시글 흐름에 그대로 반영합니다.",
- },
-] as const;
diff --git a/ui/sample-app/src/constants/pagePath.ts b/ui/sample-app/src/constants/pagePath.ts
deleted file mode 100644
index 4c7c00c..0000000
--- a/ui/sample-app/src/constants/pagePath.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-export type PagePath = "/" | "/login" | "/register" | `/docs${string}`;
-
-export const HOME_PATH: PagePath = "/";
-export const DOCS_PREFIX = "/docs";
-export const LOGIN_PATH: PagePath = "/login";
-export const REGISTER_PATH: PagePath = "/register";
-
-export function getCurrentPagePath(pathname: string): PagePath {
- if (pathname.startsWith(DOCS_PREFIX)) {
- return pathname as PagePath;
- }
-
- if (pathname === LOGIN_PATH) {
- return LOGIN_PATH;
- }
-
- if (pathname === REGISTER_PATH) {
- return REGISTER_PATH;
- }
-
- return HOME_PATH;
-}
diff --git a/ui/sample-app/src/demo/ConsoleDemo.tsx b/ui/sample-app/src/demo/ConsoleDemo.tsx
deleted file mode 100644
index d33ec90..0000000
--- a/ui/sample-app/src/demo/ConsoleDemo.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-import { FormEvent, useMemo, useState } from "react";
-
-import type { ClientRegisterRequest, ConsoleResponse, FilterMode, RequestKind } from "./types";
-
-const API_BASE_URL = "https://api.kr-filter.com";
-
-async function requestJson(endpoint: string, init: RequestInit): Promise {
- const response = await fetch(`${API_BASE_URL}${endpoint}`, {
- ...init,
- headers: {
- "Content-Type": "application/json",
- ...(init.headers ?? {}),
- },
- });
- const contentType = response.headers.get("content-type") ?? "";
- const body = contentType.includes("application/json") ? await response.json() : await response.text();
-
- if (!response.ok) {
- return {
- endpoint,
- error: `HTTP ${response.status}`,
- ...(typeof body === "object" && body !== null ? body : { status: { code: response.status, message: String(body) } }),
- } as TResponse;
- }
-
- return body as TResponse;
-}
-
-export function ConsoleDemo() {
- const [activeRequest, setActiveRequest] = useState("filter");
- const [serviceName, setServiceName] = useState("");
- const [email, setEmail] = useState("");
- const [purpose, setPurpose] = useState("");
- const [apiKey, setApiKey] = useState("");
- const [text, setText] = useState("");
- const [mode, setMode] = useState("FILTER");
- const [isSubmitting, setIsSubmitting] = useState(false);
- const [result, setResult] = useState(null);
-
- const requestPreview = useMemo(() => {
- if (activeRequest === "api-key") {
- return {
- endpoint: "POST /api/v1/clients/register",
- baseUrl: API_BASE_URL,
- body: buildClientRegisterRequest(serviceName, email, purpose),
- };
- }
- return {
- endpoint: "POST /api/v1/filter",
- baseUrl: API_BASE_URL,
- headers: { "x-api-key": apiKey },
- body: { text, mode },
- };
- }, [activeRequest, apiKey, email, mode, purpose, serviceName, text]);
-
- async function issueApiKey(event: FormEvent) {
- event.preventDefault();
- setActiveRequest("api-key");
- setIsSubmitting(true);
- try {
- const response = await requestJson("/api/v1/clients/register", {
- method: "POST",
- body: JSON.stringify(buildClientRegisterRequest(serviceName, email, purpose)),
- });
- setResult(response);
- } catch (error) {
- setResult(toClientError("/api/v1/clients/register", error));
- } finally {
- setIsSubmitting(false);
- }
- }
-
- async function filter(event: FormEvent) {
- event.preventDefault();
- setActiveRequest("filter");
- setIsSubmitting(true);
- try {
- const response = await requestJson("/api/v1/filter", {
- method: "POST",
- headers: { "x-api-key": apiKey },
- body: JSON.stringify({ text, mode }),
- });
- setResult(response);
- } catch (error) {
- setResult(toClientError("/api/v1/filter", error));
- } finally {
- setIsSubmitting(false);
- }
- }
-
- return (
-
-
-
- profanity-filter-api console
- API Key 발급과 필터 요청을 실제 서버로 확인합니다
-
- 입력한 값으로 공개 API 서버에 요청을 보내고, 서버 응답 JSON을 그대로 확인합니다.
-
-
-
-
- API 서버
- {API_BASE_URL}
-
-
-
-
-
-