hskwon
aca1767eb9
- URL 하드코딩 → .env APP_URL 기반 동적 URL로 변경 - DB 연결 하드코딩 → .env 기반으로 변경 - MySQL strict mode DATE 오류 수정
429 lines
24 KiB
PHP
429 lines
24 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>사내 지식 검색 시스템 제안서</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
<!-- Chosen Palette: Warm Neutrals (bg-amber-50, bg-white) with Muted Teal (text-teal-700, bg-teal-600) accent -->
|
|
<style>
|
|
body {
|
|
font-family: 'Noto Sans KR', sans-serif;
|
|
}
|
|
.chart-container {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
height: 320px;
|
|
max-height: 400px;
|
|
}
|
|
@media (min-width: 640px) {
|
|
.chart-container {
|
|
height: 400px;
|
|
}
|
|
}
|
|
.nav-link {
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: 0.375rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: #374151;
|
|
transition: all 0.2s;
|
|
}
|
|
.nav-link:hover {
|
|
background-color: #f0fdfa;
|
|
color: #0d9488;
|
|
}
|
|
.nav-link.active {
|
|
background-color: #ccfbf1;
|
|
color: #115e59;
|
|
}
|
|
.content-section {
|
|
padding-top: 5rem;
|
|
margin-top: -4rem;
|
|
}
|
|
.card {
|
|
background-color: white;
|
|
padding: 1.5rem;
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
border: 1px solid #e5e7eb;
|
|
transition: box-shadow 0.2s;
|
|
}
|
|
.card:hover {
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-amber-50 text-gray-800">
|
|
<div class="container mx-auto">
|
|
<div class="mb-6 flex items-center justify-start">
|
|
<a href="<?=$root_dir?>/index.php" class="inline-flex items-center px-3 py-2 rounded-lg hover:bg-amber-100 transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 md:w-8 md:h-8 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 11.5L12 4l9 7.5M5 10v8a1 1 0 001 1h3.5a1 1 0 001-1v-3h2v3a1 1 0 001 1H18a1 1 0 001-1v-8"/>
|
|
</svg>
|
|
<span class="ml-2 text-base md:text-lg font-semibold text-amber-700 hidden md:inline">홈으로</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<header class="bg-white shadow-sm sticky top-0 z-50 w-full">
|
|
<nav class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-16">
|
|
<div class="flex-shrink-0">
|
|
<h1 class="text-xl font-bold text-teal-800">사내 지식 검색 시스템 제안서</h1>
|
|
</div>
|
|
<div class="hidden sm:block sm:ml-6">
|
|
<div class="flex space-x-4">
|
|
<a href="#intro" class="nav-link active">요약</a>
|
|
<a href="#problem" class="nav-link">현황 분석</a>
|
|
<a href="#solution" class="nav-link">해결 방안</a>
|
|
<a href="#comparison" class="nav-link">비교 분석</a>
|
|
<a href="#cost" class="nav-link">비용 분석</a>
|
|
<a href="#architecture" class="nav-link">아키텍처</a>
|
|
<a href="#implementation" class="nav-link">구현 계획</a>
|
|
<a href="#security" class="nav-link">보안</a>
|
|
<a href="#roadmap" class="nav-link">로드맵</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class="max-w-6xl mx-auto p-4 sm:p-6 lg:p-8">
|
|
|
|
<!-- Section 1: Introduction -->
|
|
<section id="intro" class="content-section mb-12">
|
|
<h2 class="text-3xl font-bold text-center mb-6 text-teal-900">요약 (Executive Summary)</h2>
|
|
<p class="text-lg text-gray-700 mb-8 max-w-3xl mx-auto text-center">
|
|
GCP 및 기존 기술 스택을 활용한 효율성 극대화 및 비용 절감 전략을 제안합니다.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
|
<div class="card text-center">
|
|
<div class="text-4xl mb-4 text-teal-600"><i class="fa-solid fa-dollar-sign"></i></div>
|
|
<h3 class="text-xl font-bold text-teal-800 mb-2">비용 효율성</h3>
|
|
<p class="text-gray-700">Notion AI에서 GCP로 전환 시 월 운영 비용을 <strong>90% 이상</strong> 절감</p>
|
|
</div>
|
|
<div class="card text-center">
|
|
<div class="text-4xl mb-4 text-teal-600"><i class="fa-solid fa-layer-group"></i></div>
|
|
<h3 class="text-xl font-bold text-teal-800 mb-2">확장성</h3>
|
|
<p class="text-gray-700">모든 데이터 사일로(Drive, Jira, Slack, Notion)를 하나의 중앙 검색 엔진으로 통합</p>
|
|
</div>
|
|
<div class="card text-center">
|
|
<div class="text-4xl mb-4 text-teal-600"><i class="fa-solid fa-rocket"></i></div>
|
|
<h3 class="text-xl font-bold text-teal-800 mb-2">즉시 실현 가능</h3>
|
|
<p class="text-gray-700">팀이 보유한 <strong>PHP 8.4 (Laravel)</strong> 및 <strong>Next.js</strong> 전문성을 즉시 활용</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 2: Problem -->
|
|
<section id="problem" class="content-section mb-12">
|
|
<h2 class="text-3xl font-bold text-center mb-6 text-teal-900">변화의 필요성</h2>
|
|
<p class="text-lg text-gray-700 mb-8 max-w-3xl mx-auto text-center">
|
|
현재 시스템의 한계와 개선이 필요한 부분을 분석합니다.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="card">
|
|
<div class="flex items-center mb-4">
|
|
<div class="text-3xl mr-3 text-teal-600"><i class="fa-solid fa-money-bill-wave"></i></div>
|
|
<h3 class="text-xl font-bold text-teal-800">비용 비효율성</h3>
|
|
</div>
|
|
<p class="text-gray-700">기존 GCP 인프라 비용 외에 Notion AI(인당 $10-16) 비용이 이중으로 발생하고 있습니다. 팀 규모가 커질수록 이 비용은 비효율적으로 증가합니다.</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="flex items-center mb-4">
|
|
<div class="text-3xl mr-3 text-teal-600"><i class="fa-solid fa-layer-group"></i></div>
|
|
<h3 class="text-xl font-bold text-teal-800">데이터 사일로 (Silos)</h3>
|
|
</div>
|
|
<p class="text-gray-700">Notion AI는 강력하지만 Notion 내부에 국한됩니다. Google Drive의 기술 문서, Jira 티켓, Slack 논의 내용을 통합 검색할 수 없습니다.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 3: Solution -->
|
|
<section id="solution" class="content-section mb-12">
|
|
<h2 class="text-3xl font-bold text-center mb-6 text-teal-900">Vertex AI Search 도입 제안</h2>
|
|
<p class="text-lg text-gray-700 mb-8 max-w-3xl mx-auto text-center">
|
|
Google Gemini 모델 기반의 완전 관리형 엔터프라이즈 검색 및 대화 플랫폼입니다.
|
|
</p>
|
|
|
|
<div class="card">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="text-center">
|
|
<div class="text-4xl mb-3 text-teal-600"><i class="fa-solid fa-link"></i></div>
|
|
<h3 class="text-lg font-bold text-teal-800 mb-2">통합 인덱스</h3>
|
|
<p class="text-sm text-gray-700">Notion, Drive, Jira, 웹사이트 연결</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-4xl mb-3 text-teal-600"><i class="fa-solid fa-brain"></i></div>
|
|
<h3 class="text-lg font-bold text-teal-800 mb-2">RAG 지원</h3>
|
|
<p class="text-sm text-gray-700">단순 링크가 아닌 출처가 포함된 요약 답변 제공</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-4xl mb-3 text-teal-600"><i class="fa-solid fa-shield-halved"></i></div>
|
|
<h3 class="text-lg font-bold text-teal-800 mb-2">보안</h3>
|
|
<p class="text-sm text-gray-700">사내 IAM 정책을 준수하는 엔터프라이즈급 보안</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 4: Comparison -->
|
|
<section id="comparison" class="content-section mb-12">
|
|
<h2 class="text-3xl font-bold text-center mb-6 text-teal-900">Notion AI vs. GCP Vertex AI 비교</h2>
|
|
<p class="text-lg text-gray-700 mb-8 max-w-3xl mx-auto text-center">
|
|
두 솔루션의 주요 차이점을 비교 분석합니다.
|
|
</p>
|
|
|
|
<div class="card overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left">
|
|
<thead class="bg-teal-50">
|
|
<tr>
|
|
<th class="px-6 py-4 text-teal-800 font-bold">기능</th>
|
|
<th class="px-6 py-4 text-teal-800 font-bold">Notion AI</th>
|
|
<th class="px-6 py-4 text-teal-800 font-bold">GCP Vertex AI (제안)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200">
|
|
<tr>
|
|
<td class="px-6 py-4 font-medium text-gray-900">비용 모델</td>
|
|
<td class="px-6 py-4 text-gray-700">고정 (인당 월 $10-$16)</td>
|
|
<td class="px-6 py-4 text-gray-700"><strong>사용량 기반 (종량제)</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-6 py-4 font-medium text-gray-900">검색 범위</td>
|
|
<td class="px-6 py-4 text-gray-700">Notion 페이지만</td>
|
|
<td class="px-6 py-4 text-gray-700"><strong>전사 데이터</strong> (Notion, Drive, Jira, Slack)</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-6 py-4 font-medium text-gray-900">커스터마이징</td>
|
|
<td class="px-6 py-4 text-gray-700">불가 (블랙박스)</td>
|
|
<td class="px-6 py-4 text-gray-700"><strong>높음</strong> (UI, 프롬프트, 로직 커스텀 가능)</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-6 py-4 font-medium text-gray-900">통합 방식</td>
|
|
<td class="px-6 py-4 text-gray-700">내장형</td>
|
|
<td class="px-6 py-4 text-gray-700">자체 개발 필요 (Laravel/Next.js)</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 5: Cost Analysis -->
|
|
<section id="cost" class="content-section mb-12">
|
|
<h2 class="text-3xl font-bold text-center mb-6 text-teal-900">연간 비용 예측 (10명 기준)</h2>
|
|
<p class="text-lg text-gray-700 mb-8 max-w-3xl mx-auto text-center">
|
|
비용 절감 효과를 수치로 확인하세요.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
|
<div class="card text-center">
|
|
<div class="text-6xl font-bold text-red-500 mb-2">$1,920</div>
|
|
<div class="text-xl font-bold text-gray-900 mb-2">Notion AI</div>
|
|
<div class="text-sm text-gray-600">월 $16/인 기준</div>
|
|
</div>
|
|
<div class="card text-center">
|
|
<div class="text-6xl font-bold text-teal-600 mb-2">~$240</div>
|
|
<div class="text-xl font-bold text-gray-900 mb-2">GCP Vertex AI</div>
|
|
<div class="text-sm text-gray-600">월 5,000 쿼리 예상 기준</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card text-center bg-teal-50 border-teal-200">
|
|
<p class="text-2xl font-bold text-teal-800">기대 효과: 연간 운영 비용 <span class="text-teal-600">85% 이상 절감</span></p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 6: Architecture -->
|
|
<section id="architecture" class="content-section mb-12">
|
|
<h2 class="text-3xl font-bold text-center mb-6 text-teal-900">시스템 아키텍처</h2>
|
|
<p class="text-lg text-gray-700 mb-8 max-w-3xl mx-auto text-center">
|
|
제안하는 시스템의 전체 구조를 설명합니다.
|
|
</p>
|
|
|
|
<div class="card">
|
|
<div class="space-y-6">
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0 w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center text-teal-700 font-bold text-xl mr-4">1</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold text-teal-800 mb-2">백엔드 (ETL)</h3>
|
|
<p class="text-gray-700"><strong>PHP 8.4 & Laravel</strong>을 사용하여 Notion/Jira API에서 데이터를 추출하고 Google Cloud Storage에 동기화합니다.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0 w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center text-teal-700 font-bold text-xl mr-4">2</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold text-teal-800 mb-2">AI 엔진</h3>
|
|
<p class="text-gray-700"><strong>Vertex AI Agent Builder</strong>가 스토리지를 인덱싱하고 Gemini 1.5 Pro를 사용하여 자연어 질의를 처리합니다.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0 w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center text-teal-700 font-bold text-xl mr-4">3</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold text-teal-800 mb-2">프론트엔드 (UI)</h3>
|
|
<p class="text-gray-700">Cloud Run에서 실행되는 <strong>Next.js</strong> 애플리케이션으로, 빠르고 안전한 검색 인터페이스를 제공합니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 7: Implementation -->
|
|
<section id="implementation" class="content-section mb-12">
|
|
<h2 class="text-3xl font-bold text-center mb-6 text-teal-900">개발 및 구현 계획</h2>
|
|
<p class="text-lg text-gray-700 mb-8 max-w-3xl mx-auto text-center">
|
|
현재 기술 스택을 활용하여 러닝 커브 없이 신속한 배포가 가능합니다.
|
|
</p>
|
|
|
|
<div class="card">
|
|
<div class="space-y-6">
|
|
<div>
|
|
<h3 class="text-lg font-bold text-teal-800 mb-2"><span class="text-teal-600">1단계:</span> 데이터 동기화 (Laravel)</h3>
|
|
<p class="text-gray-700">Notion 페이지를 가져와 Markdown으로 변환하는 스케줄러 구축</p>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-bold text-teal-800 mb-2"><span class="text-teal-600">2단계:</span> 엔진 설정</h3>
|
|
<p class="text-gray-700">GCS 버킷을 Vertex AI에 연결하고 GenAI 요약 모델 구성</p>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-bold text-teal-800 mb-2"><span class="text-teal-600">3단계:</span> UI 구축 (Next.js)</h3>
|
|
<p class="text-gray-700">Google Client 라이브러리를 활용해 검색창 및 결과 화면 개발</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 8: Security -->
|
|
<section id="security" class="content-section mb-12">
|
|
<h2 class="text-3xl font-bold text-center mb-6 text-teal-900">엔터프라이즈 보안</h2>
|
|
<p class="text-lg text-gray-700 mb-8 max-w-3xl mx-auto text-center">
|
|
기업 환경에 적합한 보안 및 확장성 기능을 제공합니다.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="card text-center">
|
|
<div class="text-5xl mb-4 text-teal-600"><i class="fa-solid fa-user-shield"></i></div>
|
|
<h3 class="text-xl font-bold text-teal-800 mb-2">IAM & IAP</h3>
|
|
<p class="text-gray-700">새로운 비밀번호 불필요. Identity-Aware Proxy를 통한 기존 Google Workspace 계정 연동 인증.</p>
|
|
</div>
|
|
<div class="card text-center">
|
|
<div class="text-5xl mb-4 text-teal-600"><i class="fa-solid fa-server"></i></div>
|
|
<h3 class="text-xl font-bold text-teal-800 mb-2">서버리스 (Serverless)</h3>
|
|
<p class="text-gray-700">Cloud Run과 Vertex AI는 미사용 시 0으로 스케일링되어 사용한 만큼만 비용을 지불합니다.</p>
|
|
</div>
|
|
<div class="card text-center">
|
|
<div class="text-5xl mb-4 text-teal-600"><i class="fa-solid fa-file-shield"></i></div>
|
|
<h3 class="text-xl font-bold text-teal-800 mb-2">데이터 프라이버시</h3>
|
|
<p class="text-gray-700">사내 데이터는 비공개로 유지됩니다. Vertex AI(Enterprise)는 우리 데이터를 Google 공용 모델 학습에 사용하지 않습니다.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 9: Roadmap -->
|
|
<section id="roadmap" class="content-section mb-12">
|
|
<h2 class="text-3xl font-bold text-center mb-6 text-teal-900">3주 출시 계획 (Roadmap)</h2>
|
|
<p class="text-lg text-gray-700 mb-8 max-w-3xl mx-auto text-center">
|
|
단계별 구현 일정을 확인하세요.
|
|
</p>
|
|
|
|
<div class="card">
|
|
<div class="relative">
|
|
<div class="absolute top-12 left-0 right-0 h-1 bg-gray-200 hidden md:block"></div>
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 relative">
|
|
<div class="text-center">
|
|
<div class="w-12 h-12 bg-teal-600 rounded-full flex items-center justify-center text-white font-bold text-xl mx-auto mb-4 relative z-10">1</div>
|
|
<h3 class="text-lg font-bold text-teal-800 mb-2">1주차</h3>
|
|
<p class="text-sm text-gray-700"><strong>POC & ETL</strong><br>Notion API 연결<br>GCS 동기화 검증</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="w-12 h-12 bg-teal-600 rounded-full flex items-center justify-center text-white font-bold text-xl mx-auto mb-4 relative z-10">2</div>
|
|
<h3 class="text-lg font-bold text-teal-800 mb-2">2주차</h3>
|
|
<p class="text-sm text-gray-700"><strong>UI 개발</strong><br>Next.js 프론트엔드<br>검색 로직 통합</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="w-12 h-12 bg-teal-600 rounded-full flex items-center justify-center text-white font-bold text-xl mx-auto mb-4 relative z-10">3</div>
|
|
<h3 class="text-lg font-bold text-teal-800 mb-2">3주차</h3>
|
|
<p class="text-sm text-gray-700"><strong>테스트 및 출시</strong><br>사내 QA<br>Cloud Run 배포</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="w-12 h-12 bg-teal-600 rounded-full flex items-center justify-center text-white font-bold text-xl mx-auto mb-4 relative z-10">+</div>
|
|
<h3 class="text-lg font-bold text-teal-800 mb-2">출시 후</h3>
|
|
<p class="text-sm text-gray-700"><strong>확장 (Expand)</strong><br>Jira & Slack 추가<br>프롬프트 최적화</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer class="bg-white mt-16 border-t border-gray-200">
|
|
<div class="max-w-6xl mx-auto py-6 px-4 text-center text-sm text-gray-500">
|
|
<p>© 2025 사내 지식 검색 시스템 제안서. GCP 및 기존 기술 스택을 활용한 효율성 극대화 전략.</p>
|
|
<div class="mt-4 flex justify-center space-x-4 text-2xl text-gray-400">
|
|
<i class="fa-brands fa-google"></i>
|
|
<i class="fa-brands fa-laravel"></i>
|
|
<i class="fa-brands fa-react"></i>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const initNav = () => {
|
|
const navLinks = document.querySelectorAll('.nav-link');
|
|
const sections = document.querySelectorAll('.content-section');
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
navLinks.forEach(link => {
|
|
link.classList.remove('active');
|
|
if (link.getAttribute('href') === `#${entry.target.id}`) {
|
|
link.classList.add('active');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}, { rootMargin: '-20% 0px -70% 0px', threshold: 0.1 });
|
|
|
|
sections.forEach(section => {
|
|
observer.observe(section);
|
|
});
|
|
|
|
navLinks.forEach(link => {
|
|
link.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
const targetId = e.currentTarget.getAttribute('href');
|
|
const targetElement = document.querySelector(targetId);
|
|
if (targetElement) {
|
|
const headerOffset = 70;
|
|
const elementPosition = targetElement.getBoundingClientRect().top;
|
|
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
|
|
|
|
window.scrollTo({
|
|
top: offsetPosition,
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
initNav();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|