first
This commit is contained in:
543
safekiso_admin/pages/index.vue
Normal file
543
safekiso_admin/pages/index.vue
Normal file
@@ -0,0 +1,543 @@
|
||||
<!-- This example requires Tailwind CSS v2.0+ -->
|
||||
<template>
|
||||
<div class="mx-auto max-w-3xl text-base leading-7 text-gray-700 px-4">
|
||||
<h1 class="mt-10 text-3xl font-bold tracking-tight text-gray-900">
|
||||
KISO 이용자 보호 시스템 API 서비스
|
||||
</h1>
|
||||
<p class="mt-2 text-lg leading-8 text-gray-600">
|
||||
KSS(KISO Safeguard System) API Service
|
||||
</p>
|
||||
|
||||
<div class="mt-10 max-w-2xl">
|
||||
<h2 class="mt-16 text-2xl font-bold tracking-tight text-gray-900">
|
||||
KSS 소개
|
||||
</h2>
|
||||
<p class="mt-6">
|
||||
KISO 이용자보호시스템(KSS, KISO Safeguard System) API는 국내
|
||||
대표 포털 네이버와 카카오로부터 제공받은 욕설·비속어 DB를 활용해
|
||||
개발되었습니다.
|
||||
</p>
|
||||
<p class="mt-6">
|
||||
해당 API는 약 80만 건의 욕설·비속어 DB를 활용해 입력된 표현 중
|
||||
사전에 포함된 단어가 있는지 검사하고 그 결과를 필터링해 주는
|
||||
서비스를 제공합니다.
|
||||
</p>
|
||||
<p class="mt-6">
|
||||
본 서비스의 목적은 다양한 인터넷 서비스에서 사업자가 별도의
|
||||
욕설·비속어 DB구축 및 유지 보수의 부담이 없이 욕설·비속어 표현에
|
||||
대한 서비스 관리 및 운영에 도움을 드리는 것입니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 max-w-2xl">
|
||||
<h2 class="mt-16 text-2xl font-bold tracking-tight text-gray-900">
|
||||
주요 특징
|
||||
</h2>
|
||||
|
||||
<ul role="list" class="mt-8 max-w-xl space-y-8 text-gray-600">
|
||||
<li class="flex gap-x-3">
|
||||
<CheckCircleIcon
|
||||
class="mt-1 h-5 w-5 flex-none text-indigo-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span
|
||||
><strong class="font-semibold text-gray-900"
|
||||
>표준화된 필터 데이터베이스</strong
|
||||
>
|
||||
<p>
|
||||
KSS에서 사용하는 필터 단어 데이터베이스는 네이버와
|
||||
카카오와 같은 국내 대형 포털로부터 제공받은 기반
|
||||
데이터를 정제하여 표준화 된 것입니다. 대부분의
|
||||
인터넷 커뮤니티 서비스에서 바로 사용하기에 적합
|
||||
합니다.
|
||||
</p>
|
||||
</span>
|
||||
</li>
|
||||
<li class="flex gap-x-3">
|
||||
<CheckCircleIcon
|
||||
class="mt-1 h-5 w-5 flex-none text-indigo-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span
|
||||
><strong class="font-semibold text-gray-900"
|
||||
>빠른 검색 속도</strong
|
||||
>
|
||||
<p>
|
||||
현재 검색 대상 단어 데이터베이스에는 80만개의 단어가
|
||||
등록되어 있으며 이는 시간이 흐름에 따라 계속
|
||||
늘어나게 됩니다. 하지만 고객사의 API 호출시 필터
|
||||
단어를 검색하는 시간은 데이터베이스 크기와 무관하게
|
||||
검사 대상인 텍스트의 사이즈만큼만 시간을 소모하도록
|
||||
만들어져 있어서 대부분의 인터넷 서비스에 사용 적합
|
||||
합니다.
|
||||
</p>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li class="flex gap-x-3">
|
||||
<CheckCircleIcon
|
||||
class="mt-1 h-5 w-5 flex-none text-indigo-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span
|
||||
><strong class="font-semibold text-gray-900"
|
||||
>안정적인 인프라</strong
|
||||
>
|
||||
<p>
|
||||
KSS는 우수한 성능과 안정성을 보유한 AWS 클라우드를
|
||||
사용하여 안정적인 서비스를 제공합니다. 서비스
|
||||
사용량이 많아서 충분한 처리 속도를 확보하기를 원하는
|
||||
회원사를 위한 부하 격리 기능도 준비되어 있습니다.
|
||||
</p>
|
||||
</span>
|
||||
</li>
|
||||
<li class="flex gap-x-3">
|
||||
<CheckCircleIcon
|
||||
class="mt-1 h-5 w-5 flex-none text-indigo-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span
|
||||
><strong class="font-semibold text-gray-900"
|
||||
>지속적인 업데이트</strong
|
||||
>
|
||||
<p>
|
||||
KSS는 포털 회원사의 지속적인 DB 제공으로 인터넷상
|
||||
빠르게 전파되는 욕설·비속어에 대응할 수 있습니다.
|
||||
DB를 직접 제공하지 않고 응용프로그램 인터페이스(API)
|
||||
방식으로 서비스하는 것은 업데이트를 하기
|
||||
위해서입니다.
|
||||
</p>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 max-w-2xl">
|
||||
<h2 class="mt-16 text-2xl font-bold tracking-tight text-gray-900">
|
||||
필터 DB 생성 절차
|
||||
</h2>
|
||||
|
||||
<div class="mt-6 lg:border-b lg:border-t lg:border-gray-200">
|
||||
<nav class="mx-auto max-w-7xl px-2" aria-label="Progress">
|
||||
<ol
|
||||
role="list"
|
||||
class="overflow-hidden rounded-md lg:flex lg:rounded-none lg:border-l lg:border-r lg:border-gray-200"
|
||||
>
|
||||
<li
|
||||
v-for="(step, stepIdx) in steps_db"
|
||||
:key="step.id"
|
||||
class="relative overflow-hidden lg:flex-1"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
stepIdx === 0
|
||||
? 'rounded-t-md border-b-0'
|
||||
: '',
|
||||
stepIdx === steps.length - 1
|
||||
? 'rounded-b-md border-t-0'
|
||||
: '',
|
||||
'overflow-hidden border border-gray-200 lg:border-0',
|
||||
]"
|
||||
>
|
||||
<a :href="step.href" aria-current="step">
|
||||
<span
|
||||
class="absolute left-0 top-0 h-full w-1 bg-indigo-600 lg:bottom-0 lg:top-auto lg:h-1 lg:w-full"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span
|
||||
:class="[
|
||||
stepIdx !== 0 ? '' : '',
|
||||
'flex items-start px-5 py-5 text-sm font-medium',
|
||||
]"
|
||||
>
|
||||
<span class="flex-shrink-0">
|
||||
<span
|
||||
class="flex h-10 w-10 items-center justify-center rounded-full border-2 border-indigo-600"
|
||||
>
|
||||
<span class="text-indigo-600">{{
|
||||
step.id
|
||||
}}</span>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="lg:text-center ml-2 mt-0.5 flex min-w-0 flex-col"
|
||||
>
|
||||
<span
|
||||
class="text-sm font-medium text-indigo-600"
|
||||
>{{ step.name }}</span
|
||||
>
|
||||
<span
|
||||
class="text-sm font-medium text-gray-500"
|
||||
>{{ step.description }}</span
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<template v-if="stepIdx !== 0">
|
||||
<!-- Separator -->
|
||||
<div
|
||||
class="absolute inset-0 left-0 top-0 hidden w-3 lg:block"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg
|
||||
class="h-full w-full text-gray-300"
|
||||
viewBox="0 0 12 82"
|
||||
fill="none"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<path
|
||||
d="M0.5 0V31L10.5 41L0.5 51V82"
|
||||
stroke="currentcolor"
|
||||
vector-effect="non-scaling-stroke"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div></div>
|
||||
|
||||
<p class="mt-6 text-sm">
|
||||
위 과정을 일정 기간마다 주기적으로 수행하여 항상 최신의 표준화된
|
||||
필터 DB를 서비스 합니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 max-w-2xl">
|
||||
<h2 class="mt-16 text-2xl font-bold tracking-tight text-gray-900">
|
||||
서비스 비용
|
||||
</h2>
|
||||
<p class="mt-6">
|
||||
KSS API 서비스는 회원사, 언론사, 공공기관에 무료로 이용
|
||||
가능하도록 배포하고 있습니다. KSS 만을 이용하는 경우 서비스
|
||||
이용료(월 6만원)가 발생 됩니다.
|
||||
</p>
|
||||
|
||||
<div class="bg-white py-1 rounded-2xl">
|
||||
<div class="mx-auto max-w-7xl px-2">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-none">
|
||||
<dl
|
||||
class="mt-1 mb-1 grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4"
|
||||
>
|
||||
<div
|
||||
v-for="stat in stats"
|
||||
:key="stat.id"
|
||||
class="flex flex-col bg-gray-400/5 py-6"
|
||||
>
|
||||
<dt
|
||||
class="text-2sm font-semibold leading-6 text-gray-600"
|
||||
>
|
||||
{{ stat.name }}
|
||||
</dt>
|
||||
<dd
|
||||
class="order-first text-xl font-semibold tracking-tight text-gray-900"
|
||||
>
|
||||
{{ stat.value }}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-6 text-sm">
|
||||
* 서비스 제공 내용과 요금은 향후 변동 가능하므로 공지 사항이나
|
||||
이메일 공지를 반드시 확인해 주세요.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 max-w-2xl">
|
||||
<h2
|
||||
id="service-use-agreement"
|
||||
class="mt-16 text-2xl font-bold tracking-tight text-gray-900"
|
||||
>
|
||||
서비스 이용 절차
|
||||
</h2>
|
||||
<nav class="mt-6 ml-6" aria-label="Progress">
|
||||
<ol role="list" class="overflow-hidden">
|
||||
<li
|
||||
v-for="(step, stepIdx) in steps"
|
||||
:key="step.name"
|
||||
:class="[
|
||||
stepIdx !== steps.length - 1 ? 'pb-10' : '',
|
||||
'relative',
|
||||
]"
|
||||
>
|
||||
<template v-if="step.status === 'complete'">
|
||||
<div
|
||||
v-if="stepIdx !== steps.length - 1"
|
||||
class="absolute left-4 top-4 -ml-px mt-0.5 h-full w-0.5 bg-indigo-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<a
|
||||
:href="step.href"
|
||||
class="group relative flex items-start"
|
||||
>
|
||||
<span class="flex h-9 items-center">
|
||||
<span
|
||||
class="relative z-10 flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600 group-hover:bg-indigo-800"
|
||||
>
|
||||
<CheckIcon
|
||||
class="h-5 w-5 text-white"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
<span class="ml-4 flex min-w-0 flex-col">
|
||||
<span class="text-sm font-medium">{{
|
||||
step.name
|
||||
}}</span>
|
||||
<span class="text-sm text-gray-500">{{
|
||||
step.description
|
||||
}}</span>
|
||||
</span>
|
||||
</a>
|
||||
</template>
|
||||
<template v-else-if="step.status === 'current'">
|
||||
<div
|
||||
v-if="stepIdx !== steps.length - 1"
|
||||
class="absolute left-4 top-4 -ml-px mt-0.5 h-full w-0.5 bg-gray-300"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<a
|
||||
:href="step.href"
|
||||
class="group relative flex items-start"
|
||||
aria-current="step"
|
||||
>
|
||||
<span
|
||||
class="flex h-9 items-center"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<span
|
||||
class="relative z-10 flex h-8 w-8 items-center justify-center rounded-full border-2 border-indigo-600 bg-white"
|
||||
>
|
||||
<span
|
||||
class="h-2.5 w-2.5 rounded-full bg-indigo-600"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
<span class="ml-4 flex min-w-0 flex-col">
|
||||
<span
|
||||
class="text-sm font-medium text-indigo-600"
|
||||
>{{ step.name }}</span
|
||||
>
|
||||
<span class="text-sm text-gray-500">{{
|
||||
step.description
|
||||
}}</span>
|
||||
</span>
|
||||
</a>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div
|
||||
v-if="stepIdx !== steps.length - 1"
|
||||
class="absolute left-4 top-4 -ml-px mt-0.5 h-full w-0.5 bg-gray-300"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<a
|
||||
:href="step.href"
|
||||
class="group relative flex items-start"
|
||||
>
|
||||
<span
|
||||
class="flex h-9 items-center"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<span
|
||||
class="relative z-10 flex h-8 w-8 items-center justify-center rounded-full border-2 border-gray-300 bg-white group-hover:border-gray-400"
|
||||
>
|
||||
<span
|
||||
class="h-2.5 w-2.5 rounded-full bg-transparent group-hover:bg-gray-300"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
<span class="ml-4 flex min-w-0 flex-col">
|
||||
<span
|
||||
class="text-sm font-medium text-gray-500"
|
||||
>{{ step.name }}</span
|
||||
>
|
||||
<span class="text-sm text-gray-500">{{
|
||||
step.description
|
||||
}}</span>
|
||||
</span>
|
||||
</a>
|
||||
</template>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 max-w-2xl">
|
||||
<h2 class="mt-16 text-2xl font-bold tracking-tight text-gray-900">
|
||||
사용문의
|
||||
</h2>
|
||||
<p class="mt-6">
|
||||
API 사용에 필요한 자세한 기술 문서는
|
||||
<a
|
||||
class="font-semibold text-indigo-600 hover:text-indigo-500"
|
||||
href="javascript:void()"
|
||||
@click="navigateTo('/doc/api_doc')"
|
||||
>API 연동 안내</a
|
||||
>
|
||||
에 수록되어 있습니다. 또한
|
||||
<a
|
||||
class="font-semibold text-indigo-600 hover:text-indigo-500"
|
||||
href="javascript:void()"
|
||||
@click="navigateTo('/doc/guide')"
|
||||
>서비스 도입 안내</a
|
||||
>,
|
||||
|
||||
<a
|
||||
class="font-semibold text-indigo-600 hover:text-indigo-500"
|
||||
href="javascript:void()"
|
||||
@click="navigateTo('/support/faq')"
|
||||
>FAQ
|
||||
</a>
|
||||
|
||||
을 통해 KSS API 서비스 개념과 사용방법에 대해 살펴보시기
|
||||
바랍니다.
|
||||
</p>
|
||||
|
||||
<p class="mt-6">
|
||||
API 연동 관련 문의는 이메일(netsafe@kiso.or.kr)로 보내주시기
|
||||
바랍니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 max-w-2xl">
|
||||
<h2
|
||||
class="mt-16 text-2xl font-bold tracking-tight text-gray-900"
|
||||
></h2>
|
||||
<p class="mt-6"></p>
|
||||
</div>
|
||||
|
||||
<div class="py-1">
|
||||
<div class="mx-auto max-w-7xl px-6">
|
||||
<div class="mx-auto max-w-2xl">
|
||||
<div
|
||||
class="mx-auto mt-2 mb-2 grid grid-cols-4 items-start gap-x-8 gap-y-10"
|
||||
>
|
||||
<img
|
||||
class="col-span-2 max-h-12 w-full object-contain object-left"
|
||||
src="https://dev.safekiso.com/kiso_ci_1.png"
|
||||
alt="Transistor"
|
||||
width="158"
|
||||
height="48"
|
||||
/>
|
||||
<img
|
||||
class="col-span-2 max-h-12 w-full object-contain object-left"
|
||||
src="https://www.safekiso.com/logos/kss_certification_logo_box_english.png"
|
||||
alt="Reform"
|
||||
width="158"
|
||||
height="48"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 max-w-2xl">
|
||||
<h2
|
||||
class="mt-16 text-2xl font-bold tracking-tight text-gray-900"
|
||||
></h2>
|
||||
<p class="mt-6"></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
CheckCircleIcon,
|
||||
InformationCircleIcon,
|
||||
} from '@heroicons/vue/20/solid';
|
||||
|
||||
import { CheckIcon } from '@heroicons/vue/20/solid';
|
||||
|
||||
const steps_db = [
|
||||
{
|
||||
id: '01',
|
||||
name: '네이버, 카카오',
|
||||
description: '욕설·비속어 DB 제공',
|
||||
href: '#',
|
||||
status: 'current',
|
||||
},
|
||||
{
|
||||
id: '02',
|
||||
name: 'KISO',
|
||||
description: '표준화, DB 구축',
|
||||
href: '#',
|
||||
status: 'current',
|
||||
},
|
||||
{
|
||||
id: '03',
|
||||
name: 'KSS API',
|
||||
description: 'API 서비스 제공',
|
||||
href: '#',
|
||||
status: 'current',
|
||||
},
|
||||
];
|
||||
|
||||
const steps = [
|
||||
{
|
||||
name: '서비스 사용 신청',
|
||||
description: '이 메일을 통한 서비스 등록 신청',
|
||||
href: '#',
|
||||
status: 'complete',
|
||||
},
|
||||
{
|
||||
name: '내부 검토 및 계정 등록',
|
||||
description: '고객사의 회원 자격 등을 검토 하여 계정을 등록 합니다.',
|
||||
href: '#',
|
||||
status: 'current',
|
||||
},
|
||||
{
|
||||
name: '회원 가입',
|
||||
description: '등록된 이메일 주소로 회원 가입을 진행 합니다.',
|
||||
href: '#',
|
||||
status: 'upcoming',
|
||||
},
|
||||
{
|
||||
name: 'API 키 생성',
|
||||
description: '웹 어드민 기능을 통해 필요한 API 키를 생성 합니다.',
|
||||
href: '#',
|
||||
status: 'upcoming',
|
||||
},
|
||||
{
|
||||
name: '서비스 연동',
|
||||
description:
|
||||
'연동 가이드 등을 참고로 발급된 API 키를 서비스와 연동 합니다.',
|
||||
href: '#',
|
||||
status: 'upcoming',
|
||||
},
|
||||
];
|
||||
|
||||
const includedFeatures = [
|
||||
'최신 통합 필터 DB 적용',
|
||||
'일 최대 8백만건 호출',
|
||||
'초당 최대 100회 호출',
|
||||
'웹 어드민 페이지',
|
||||
];
|
||||
|
||||
const stats = [
|
||||
{ id: 1, name: '일 최대 호출', value: '8,640,000' },
|
||||
{ id: 2, name: '1초 호출 제한', value: '100회' },
|
||||
{ id: 3, name: '관리 기능 제공', value: '웹 어드민' },
|
||||
{ id: 4, name: '낮은 도입 부담', value: '월 단위 결제' },
|
||||
];
|
||||
|
||||
const route = useRoute();
|
||||
console.log('route.query = ', route.query);
|
||||
console.log('route = ', route.fullPath);
|
||||
|
||||
onMounted(() => {
|
||||
console.log('myheader mounted');
|
||||
|
||||
if (route.fullPath.endsWith('#service-use-agreement')) {
|
||||
const container = document.getElementById('service-use-agreement');
|
||||
container.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user