Skip to main content
Glama

FSS Pension MCP Server

by ddoriboo
OverviewSchemaRelated ServersScoreDiscussions
Remote
MIT License
index.html•13.7 kB
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>연금상품 비교 대시보드 | FSS 연금정보</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Chart.js --> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- Font Awesome --> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> <link rel="stylesheet" href="/static/css/dashboard.css"> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <div class="container"> <a class="navbar-brand" href="#"><i class="fas fa-chart-line me-2"></i>연금상품 대시보드</a> <div class="navbar-nav ms-auto"> <span class="navbar-text">금융감독원 데이터 기반</span> </div> </div> </nav> <div class="container-fluid mt-4"> <!-- 시장 요약 카드들 --> <div class="row mb-4"> <div class="col-md-3"> <div class="card bg-primary text-white"> <div class="card-body"> <div class="d-flex justify-content-between"> <div> <h6 class="card-title">총 상품 수</h6> <h2 id="totalProducts">-</h2> </div> <div class="align-self-center"> <i class="fas fa-box fa-2x"></i> </div> </div> </div> </div> </div> <div class="col-md-3"> <div class="card bg-success text-white"> <div class="card-body"> <div class="d-flex justify-content-between"> <div> <h6 class="card-title">평균 수수료율</h6> <h2 id="averageFeeRate">-%</h2> </div> <div class="align-self-center"> <i class="fas fa-percentage fa-2x"></i> </div> </div> </div> </div> </div> <div class="col-md-3"> <div class="card bg-info text-white"> <div class="card-body"> <div class="d-flex justify-content-between"> <div> <h6 class="card-title">평균 수익률</h6> <h2 id="averageEarnRate">-%</h2> </div> <div class="align-self-center"> <i class="fas fa-arrow-up fa-2x"></i> </div> </div> </div> </div> </div> <div class="col-md-3"> <div class="card bg-warning text-white"> <div class="card-body"> <div class="d-flex justify-content-between"> <div> <h6 class="card-title">최저 수수료율</h6> <h2 id="lowestFeeRate">-%</h2> </div> <div class="align-self-center"> <i class="fas fa-star fa-2x"></i> </div> </div> </div> </div> </div> </div> <!-- 메인 콘텐츠 --> <div class="row"> <!-- 수수료율 최저가 상품 --> <div class="col-lg-8"> <div class="card"> <div class="card-header"> <h5 class="card-title mb-0"> <i class="fas fa-trophy text-warning me-2"></i> 수수료율 최저가 상품 TOP 10 </h5> </div> <div class="card-body"> <div class="table-responsive"> <table class="table table-hover"> <thead class="table-light"> <tr> <th>순위</th> <th>회사명</th> <th>상품명</th> <th>상품유형</th> <th>수수료율</th> <th>수익률</th> <th>원금보장</th> </tr> </thead> <tbody id="lowFeeProductsTable"> <tr> <td colspan="7" class="text-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </td> </tr> </tbody> </table> </div> </div> </div> </div> <!-- 회사별 순위 --> <div class="col-lg-4"> <div class="card"> <div class="card-header"> <h5 class="card-title mb-0"> <i class="fas fa-building text-primary me-2"></i> 회사별 수수료 순위 </h5> </div> <div class="card-body"> <div id="companyRankingList"> <div class="text-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </div> </div> </div> </div> </div> </div> <!-- 차트 섹션 --> <div class="row mt-4"> <div class="col-lg-6"> <div class="card"> <div class="card-header"> <h5 class="card-title mb-0"> <i class="fas fa-chart-bar text-success me-2"></i> 연금 시장 통계 </h5> </div> <div class="card-body"> <canvas id="pensionStatsChart" height="300"></canvas> </div> </div> </div> <div class="col-lg-6"> <div class="card"> <div class="card-header"> <h5 class="card-title mb-0"> <i class="fas fa-robot text-success me-2"></i> AI 연금 상담사 </h5> </div> <div class="card-body"> <!-- 사용자 프로필 입력 --> <div class="user-profile-section mb-3"> <button class="btn btn-outline-primary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#userProfileForm" aria-expanded="false"> <i class="fas fa-user-cog me-1"></i>내 정보 설정 </button> <div class="collapse mt-2" id="userProfileForm"> <div class="card card-body"> <div class="row"> <div class="col-md-6 mb-2"> <label class="form-label">나이</label> <input type="number" class="form-control form-control-sm" id="userAge" placeholder="35"> </div> <div class="col-md-6 mb-2"> <label class="form-label">월소득 (만원)</label> <input type="number" class="form-control form-control-sm" id="userIncome" placeholder="500"> </div> <div class="col-md-6 mb-2"> <label class="form-label">위험성향</label> <select class="form-select form-select-sm" id="userRisk"> <option value="conservative">안정형</option> <option value="moderate" selected>균형형</option> <option value="aggressive">적극형</option> </select> </div> <div class="col-md-6 mb-2"> <label class="form-label">은퇴 목표나이</label> <input type="number" class="form-control form-control-sm" id="userRetirement" placeholder="65"> </div> </div> </div> </div> </div> <!-- 채팅 인터페이스 --> <div class="chat-container"> <div class="chat-messages" id="chatMessages"> <div class="ai-message"> <div class="message-content"> <i class="fas fa-robot me-2"></i> 안녕하세요! 저는 AI 연금 전문가입니다. 연금 상품 선택, 은퇴 계획, 세제 혜택 등 무엇이든 궁금한 점을 물어보세요! 🎯 </div> </div> </div> <div class="chat-input-container"> <div class="input-group"> <input type="text" class="form-control" id="chatInput" placeholder="연금 관련 질문을 입력해주세요..." maxlength="500"> <button class="btn btn-success" type="button" id="sendChatBtn"> <i class="fas fa-paper-plane"></i> </button> </div> </div> </div> <!-- 빠른 질문 버튼들 --> <div class="quick-questions mt-3"> <div class="d-flex flex-wrap gap-2"> <button class="btn btn-outline-secondary btn-sm quick-question-btn" data-question="40대 중반 직장인에게 추천할만한 연금 상품은?"> 👨‍💼 40대 추천 상품 </button> <button class="btn btn-outline-secondary btn-sm quick-question-btn" data-question="수수료가 가장 낮은 연금 상품 5개 알려줘"> 💰 최저 수수료 </button> <button class="btn btn-outline-secondary btn-sm quick-question-btn" data-question="연금저축과 퇴직연금 차이점이 뭐야?"> ❓ 상품 차이점 </button> <button class="btn btn-outline-secondary btn-sm quick-question-btn" data-question="은퇴 후 월 300만원 생활하려면 얼마나 모아야 해?"> 📊 은퇴 계획 </button> </div> </div> </div> </div> </div> </div> </div> <!-- Footer --> <footer class="bg-light mt-5 py-4"> <div class="container text-center"> <p class="text-muted mb-0"> <i class="fas fa-database me-1"></i> 데이터 출처: 금융감독원 통합연금포털 OpenAPI | <i class="fas fa-clock me-1"></i> 최종 업데이트: <span id="lastUpdate">-</span> </p> </div> </footer> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <!-- Custom JavaScript --> <script src="/static/js/dashboard.js"></script> </body> </html>

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/ddoriboo/pension-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server