refactor: 미사용 모듈 정리

dev
minuk926 3 years ago
parent aa4ca1a86d
commit 5bc82ebaae

@ -255,35 +255,6 @@ dependencies {
//-----------------------------------------------------------------------------------// //-----------------------------------------------------------------------------------//
providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat' providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat'
//-----------------------------------------------------------------------------------//
// Template engine : thymeleaf
//-----------------------------------------------------------------------------------//
//implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
//implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:2.5.3'
//implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity5:3.0.4.RELEASE'
//-----------------------------------------------------------------------------------//
//-----------------------------------------------------------------------------------//
// JSP
//-----------------------------------------------------------------------------------//
//compileOnly 'org.apache.tomcat.embed:tomcat-embed-jasper'
//compileOnly 'javax.servlet:jstl'
//-----------------------------------------------------------------------------------//
//-----------------------------------------------------------------------------------//
// Web library
//-----------------------------------------------------------------------------------//
// implementation 'org.webjars:webjars-locator:0.41'
// implementation 'org.webjars:webjars-locator-core:0.47'
// implementation 'org.webjars:bootstrap:5.1.0'
// implementation 'org.webjars:font-awesome:5.15.3'
// implementation 'org.webjars:popper.js:2.9.3'
// implementation 'org.webjars:jquery:3.6.0'
// implementation 'org.webjars:jquery-i18n-properties:1.10.2'
// implementation 'org.webjars:momentjs:2.29.1'
//-----------------------------------------------------------------------------------//
} }
tasks.withType(JavaCompile) { tasks.withType(JavaCompile) {

@ -34,7 +34,7 @@ public class LoggerAspect {
@Value("${api.reponse.logging}") @Value("${api.reponse.logging}")
private boolean isResLogging; private boolean isResLogging;
@Pointcut("execution(* com.xit..*Controller.*(..)) || execution(* graphql(..))") // 이런 패턴이 실행될 경우 수행 @Pointcut("execution(* com.xit..*Controller.*(..))") // 이런 패턴이 실행될 경우 수행
public void loggerPointCut() { public void loggerPointCut() {
} }

@ -32,12 +32,6 @@ spring:
date: yyyy-MM-dd date: yyyy-MM-dd
date-time: yyyy-MM-dd HH:mm:ss date-time: yyyy-MM-dd HH:mm:ss
time: HH:mm:ss time: HH:mm:ss
# JSP 등 템플릿 엔진 사용시 설정
# static-path-pattern: /static/**
# view:
# prefix: /WEB-INF/jsp/
# suffix: .jsp
# ================================================================================================================== # ==================================================================================================================
# page setting # page setting
@ -91,22 +85,6 @@ spring:
data-source-properties: data-source-properties:
rewriteBatchedStatements: true rewriteBatchedStatements: true
# ==================================================================================================================
# JTA setting
# ==================================================================================================================
# jta:
# enabled: true
# atomikos:
# datasource:
# #lw:
# unique-resource-name: xaForLegacyDataSource
# xa-data-source-class-name: com.mysql.cj.jdbc.MysqlXADataSource
# xa-properties:
# user:
# password:
# url: jdbc:mysql://localhost:3306/xit-framework?autoReconnect=true&useSSL=false&zeroDateTimeBehavior=convertToNull
# ================================================================================================================== # ==================================================================================================================
# JPA setting # JPA setting
# ================================================================================================================== # ==================================================================================================================
@ -170,25 +148,7 @@ springdoc:
display-query-params-without-oauth2: true display-query-params-without-oauth2: true
csrf: csrf:
enabled: false enabled: false
# ==================================================================================================================
# view template engine setting - 미사용
# ==================================================================================================================
#JSP와 같이 사용시 뷰 구분을 위해 컨트롤러가 뷰 이름을 반환시 thymeleaf/ 로 시작하면 타임리프로 처리하도록 view-names 지정
# thymeleaf:
# check-template: true
# # templates 디렉토리에 파일이 있는지 없는지 체크, 없으면 에러
# check-template-location: true
# encoding: UTF-8
# mode: HTML
# prefix: classpath:templates/
# suffix: .html
# # profiles 별로 분리
# #cache: false
# view-names: thymeleaf/*
# ================================================================================================================== # ==================================================================================================================
# JPA logging lib setting # JPA logging lib setting
# ================================================================================================================== # ==================================================================================================================
@ -204,32 +164,6 @@ decorator:
tracing: tracing:
include-parameter-values: true include-parameter-values: true
# ==================================================================================================================
# graphql setting
# ==================================================================================================================
graphql:
servlet:
enabled: true
mapping: /graphql
corsEnabled: false
cors:
allowed-origins: http://localhost:3000
allowed-methods: GET, HEAD, POST, PATCH
exception-handlers-enabled: true
context-setting: PER_REQUEST_WITH_INSTRUMENTATION
async-mode-enabled: true
tools:
schema-location-pattern: "**/*.graphqls"
introspection-enabled: true
spqr:
gui:
enabled: true
# ================================================================================================================== # ==================================================================================================================
# xit-framework logging setting # xit-framework logging setting
# ================================================================================================================== # ==================================================================================================================
@ -246,10 +180,6 @@ logging:
slack: slack:
webhook-uri: https://hooks.slack.com/services/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 webhook-uri: https://hooks.slack.com/services/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
#log4jdbc 설정
#log4jdbc.spylogdelegator.name=net.sf.log4jdbc.log.slf4j.Slf4jSpyLogDelegator
#log4jdbc.dum.sql.maxlinelength=0
server: server:
# profiles 별로 정의 # profiles 별로 정의
#port: 8080 #port: 8080

@ -1,21 +0,0 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>
<h1>CSRF Attacker</h1>
<a href="http://localhost:8080/spring-security-rest-full/transfer?accountNo=5678&amount=1000">Show Kittens Pictures</a>
<img src="http://localhost:8080/spring-security-rest-full/transfer?accountNo=5678&amount=1000"/>
<form action="http://localhost:8080/spring-security-rest-full/transfer" method="POST">
<input name="accountNo" type="hidden" value="5678"/>
<input name="amount" type="hidden" value="1000"/>
<input type="submit" value="Show Kittens Picture">
</form>
</body>
</html>

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{thymeleaf/layouts/layout-admin}">
<th:block layout:fragment="template">
<div class="w-full md:text-center text-gray-400">
<p th:text="${title} + '!'" />
</div>
</th:block>

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{thymeleaf/layouts/layout-admin}">
<th:block layout:fragment="template">
<div class="w-full md:text-center text-gray-400">
<p th:text="${title} + '!'" />
</div>
</th:block>

@ -1,19 +0,0 @@
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Error Page!</title>
<link rel="stylesheet" th:href="@{/css/style.css}"></link>
</head>
<body>
<div class="errorPage"><span class="errorHead">404</span><br/>
<p th:text="${'path: ' + path}"></p>
<p th:text="${'status: ' + status}"></p>
<p th:text="${'timestamp: ' + timestamp}"></p>
<p th:text="${'error: ' + error}"></p>
<p th:text="${'errors: ' + errors}"></p>
<p th:text="${'exception: ' + exception}"></p>
<p th:text="${'message: ' + message}"></p>
<p th:text="${'trace: ' + trace}"></p></div>
</body>
</html>

@ -1,19 +0,0 @@
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Error Page!</title>
<link rel="stylesheet" th:href="@{/css/style.css}"></link>
</head>
<body>
<div class="errorPage"><span class="errorHead">Error</span><br/>
<p th:text="${'path: ' + path}"></p>
<p th:text="${'status: ' + status}"></p>
<p th:text="${'timestamp: ' + timestamp}"></p>
<p th:text="${'error: ' + error}"></p>
<p th:text="${'errors: ' + errors}"></p>
<p th:text="${'exception: ' + exception}"></p>
<p th:text="${'message: ' + message}"></p>
<p th:text="${'trace: ' + trace}"></p></div>
</body>
</html>

@ -1,23 +0,0 @@
<!DOCTYPE html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{thymeleaf/layouts/layout-dark}">
<head></head>
<th:block layout:fragment="template">
<div class="container-fluid" style="border: 1px solid red">
<hr/>
<span th:text="${defaultDto.msg}"></span>
<span th:text="${defaultDto.result}"></span>
<hr/>
<div th:each="value : ${defaultDto.stringFlux}">
<span th:text="${value}"></span>
</div>
</div>
</th:block>
<script></script>
</html>

@ -1,23 +0,0 @@
<!DOCTYPE html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{thymeleaf/layouts/layout-dark}">
<head></head>
<th:block layout:fragment="template">
<div class="container-fluid" style="border: 1px solid red">
<hr/>
<span th:text="${defaultDto.msg}"></span>
<span th:text="${defaultDto.result}"></span>
<hr/>
<div th:each="value : ${defaultDto.stringFlux}">
<span th:text="${value}"></span>
</div>
</div>
</th:block>
<script></script>
</html>

@ -1,21 +0,0 @@
<!DOCTYPE html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{thymeleaf/layouts/layout-dark}">
<head></head>
<th:block layout:fragment="template">
<div class="container-fluid" style="border: 1px solid red">
<h1>WebFlux!!!!!!!!!!!!!!!!!</h1>
<h3>
<p>name : <b th:text="${data.name}"> </b></p>
<p>age : <b th:text="${data.age}"> </b></p>
</h3>
</div>
</th:block>
<script></script>
</html>

@ -1,5 +0,0 @@
<footer th:fragment="footer-frmt" class="">
<div class="">
</div>
</footer>

@ -1,14 +0,0 @@
<html lang="ko"
xmlns:th="http://www.thymeleaf.org">
<header th:fragment="header-frmt(title)">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title th:text="${title}">Tailwind Admin Starter Template : Tailwind Toolbox</title>
<meta name="description" content="description here">
<meta name="keywords" content="keywords,here">
</head>
</header>
</html>

@ -1,79 +0,0 @@
<nav th:fragment="menu-frmt" class="bg-gray-800 pt-2 md:pt-1 pb-1 px-1 mt-0 h-auto fixed w-full z-20 top-0">
<div class="flex flex-wrap items-center">
<div class="flex flex-shrink md:w-1/3 justify-center md:justify-start text-white">
<a href="#">
<span class="text-xl pl-2"><i class="em em-grinning"></i></span>
</a>
</div>
<div class="flex flex-1 md:w-1/3 justify-center md:justify-start text-white px-2">
<span class="relative w-full">
<input type="search" placeholder="Search" class="w-full bg-gray-900 text-white transition border border-transparent focus:outline-none focus:border-gray-400 rounded py-3 px-2 pl-10 appearance-none leading-normal">
<div class="absolute search-icon" style="top: 1rem; left: .8rem;">
<svg class="fill-current pointer-events-none text-white w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"></path>
</svg>
</div>
</span>
</div>
<div class="flex w-full pt-2 content-center justify-between md:w-1/3 md:justify-end">
<ul class="list-reset flex justify-between flex-1 md:flex-none items-center">
<li class="flex-1 md:flex-none md:mr-3">
<a class="inline-block py-2 px-4 text-white no-underline" href="#">Active</a>
</li>
<li class="flex-1 md:flex-none md:mr-3">
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" href="#">link</a>
</li>
<li class="flex-1 md:flex-none md:mr-3">
<div class="relative inline-block">
<button onclick="toggleDD('myDropdown')" class="drop-button text-white focus:outline-none"> <span class="pr-2"><i class="em em-robot_face"></i></span> Hi, User <svg class="h-3 fill-current inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg></button>
<div id="myDropdown" class="dropdownlist absolute bg-gray-800 text-white right-0 mt-3 p-3 overflow-auto z-30 invisible">
<input type="text" class="drop-search p-2 text-gray-600" placeholder="Search.." id="myInput" onkeyup="filterDD('myDropdown','myInput')">
<a href="#" class="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block"><i class="fa fa-user fa-fw"></i> Profile</a>
<a href="#" class="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block"><i class="fa fa-cog fa-fw"></i> Settings</a>
<div class="border border-gray-800"></div>
<a href="#" class="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block"><i class="fas fa-sign-out-alt fa-fw"></i> Log Out</a>
</div>
</div>
</li>
</ul>
</div>
</div>
<script>
/*Toggle dropdown list*/
function toggleDD(myDropMenu) {
document.getElementById(myDropMenu).classList.toggle("invisible");
}
/*Filter dropdown options*/
function filterDD(myDropMenu, myDropMenuSearch) {
var input, filter, ul, li, a, i;
input = document.getElementById(myDropMenuSearch);
filter = input.value.toUpperCase();
div = document.getElementById(myDropMenu);
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.drop-button') && !event.target.matches('.drop-search')) {
var dropdowns = document.getElementsByClassName("dropdownlist");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (!openDropdown.classList.contains('invisible')) {
openDropdown.classList.add('invisible');
}
}
}
}
</script>
</nav>

@ -1,30 +0,0 @@
<aside id="sidebar" th:fragment="sidebar-frmt">
<div class="bg-gray-800 shadow-xl h-16 fixed bottom-0 mt-12 md:relative md:h-screen z-10 w-full md:w-48">
<div class="md:mt-12 md:w-48 md:fixed md:left-0 md:top-0 content-center md:content-start text-left justify-between">
<ul class="list-reset flex flex-row md:flex-col py-0 md:py-3 px-1 md:px-2 text-center md:text-left">
<li class="mr-3 flex-1">
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 border-gray-800 hover:border-pink-500">
<i class="fas fa-tasks pr-0 md:pr-3"></i><span class="pb-1 md:pb-0 text-xs md:text-base text-gray-600 md:text-gray-400 block md:inline-block">Tasks</span>
</a>
</li>
<li class="mr-3 flex-1">
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 border-gray-800 hover:border-purple-500">
<i class="fa fa-envelope pr-0 md:pr-3"></i><span class="pb-1 md:pb-0 text-xs md:text-base text-gray-600 md:text-gray-400 block md:inline-block">Messages</span>
</a>
</li>
<li class="mr-3 flex-1">
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 border-blue-600">
<i class="fas fa-chart-area pr-0 md:pr-3 text-blue-600"></i><span class="pb-1 md:pb-0 text-xs md:text-base text-white md:text-white block md:inline-block">Analytics</span>
</a>
</li>
<li class="mr-3 flex-1">
<a href="#" class="block py-1 md:py-3 pl-0 md:pl-1 align-middle text-white no-underline hover:text-white border-b-2 border-gray-800 hover:border-red-500">
<i class="fa fa-wallet pr-0 md:pr-3"></i><span class="pb-1 md:pb-0 text-xs md:text-base text-gray-600 md:text-gray-400 block md:inline-block">Payments</span>
</a>
</li>
</ul>
</div>
</div>
</aside>

@ -1,31 +0,0 @@
<footer th:fragment="footer-frmt" class="bg-gray-900 border-t border-gray-400 shadow">
<div class="container max-w-md mx-auto flex py-8">
<div class="w-full mx-auto flex flex-wrap">
<div class="flex w-full md:w-1/2 ">
<div class="px-8">
<h3 class="font-bold font-bold text-gray-100">About</h3>
<p class="py-4 text-gray-600 text-sm">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel mi ut felis tempus commodo nec id erat. Suspendisse consectetur dapibus velit ut lacinia.
</p>
</div>
</div>
<div class="flex w-full md:w-1/2">
<div class="px-8">
<h3 class="font-bold font-bold text-gray-100">Social</h3>
<ul class="list-reset items-center text-sm pt-3">
<li>
<a class="inline-block text-gray-600 no-underline hover:text-gray-100 hover:text-underline py-1" href="#">Add social link</a>
</li>
<li>
<a class="inline-block text-gray-600 no-underline hover:text-gray-100 hover:text-underline py-1" href="#">Add social link</a>
</li>
<li>
<a class="inline-block text-gray-600 no-underline hover:text-gray-100 hover:text-underline py-1" href="#">Add social link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>

@ -1,29 +0,0 @@
<html lang="ko"
xmlns:th="http://www.thymeleaf.org">
<header th:fragment="header-frmt(title)">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title th:text="${title}">Tailwind Starter Template - Night Admin Template: Tailwind Toolbox</title>
<meta name="description" content="description here">
<meta name="keywords" content="keywords,here">
<style>
.bg-black-alt {
background:#191919;
}
.text-black-alt {
color:#191919;
}
.border-black-alt {
border-color: #191919;
}
</style>
</head>
</header>
</html>

@ -1,142 +0,0 @@
<nav th:fragment="menu-frmt" id="menu" class="bg-gray-900 fixed w-full z-10 top-0 shadow">
<div class="w-full container mx-auto flex flex-wrap items-center mt-0 pt-3 pb-3 md:pb-0">
<div class="w-1/2 pl-2 md:pl-0">
<a class="text-gray-100 text-base xl:text-xl no-underline hover:no-underline font-bold" href="#">
<i class="fas fa-moon text-blue-400 pr-3"></i> Admin Dark Mode
</a>
</div>
<div class="w-1/2 pr-0">
<div class="flex relative inline-block float-right">
<div class="relative text-sm text-gray-100">
<button id="userButton" class="flex items-center focus:outline-none mr-3">
<img class="w-8 h-8 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of User">
<span class="hidden md:inline-block text-gray-100">Hi, User</span>
<svg class="pl-2 h-2 fill-current text-gray-100" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129"><g><path d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z"/></g></svg>
</button>
<div id="userMenu" class="bg-gray-900 rounded shadow-md mt-2 absolute mt-12 top-0 right-0 min-w-full overflow-auto z-30 invisible">
<ul class="list-reset">
<li><a href="#" class="px-4 py-2 block text-gray-100 hover:bg-gray-800 no-underline hover:no-underline">My account</a></li>
<li><a href="#" class="px-4 py-2 block text-gray-100 hover:bg-gray-800 no-underline hover:no-underline">Notifications</a></li>
<li><hr class="border-t mx-2 border-gray-400"></li>
<li><a href="#" class="px-4 py-2 block text-gray-100 hover:bg-gray-800 no-underline hover:no-underline">Logout</a></li>
</ul>
</div>
</div>
<div class="block lg:hidden pr-4">
<button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-gray-100 hover:border-teal-500 appearance-none focus:outline-none">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
</div>
</div>
<div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block mt-2 lg:mt-0 bg-gray-900 z-20" id="nav-content">
<ul class="list-reset lg:flex flex-1 items-center px-4 md:px-0">
<li class="mr-6 my-2 md:my-0">
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-blue-400 no-underline hover:text-gray-100 border-b-2 border-blue-400 hover:border-blue-400">
<i class="fas fa-home fa-fw mr-3 text-blue-400"></i><span class="pb-1 md:pb-0 text-sm">Home</span>
</a>
</li>
<li class="mr-6 my-2 md:my-0">
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-gray-500 no-underline hover:text-gray-100 border-b-2 border-gray-900 hover:border-pink-400">
<i class="fas fa-tasks fa-fw mr-3"></i><span class="pb-1 md:pb-0 text-sm">Tasks</span>
</a>
</li>
<li class="mr-6 my-2 md:my-0">
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-gray-500 no-underline hover:text-gray-100 border-b-2 border-gray-900 hover:border-purple-400">
<i class="fa fa-envelope fa-fw mr-3"></i><span class="pb-1 md:pb-0 text-sm">Messages</span>
</a>
</li>
<li class="mr-6 my-2 md:my-0">
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-gray-500 no-underline hover:text-gray-100 border-b-2 border-gray-900 hover:border-green-400">
<i class="fas fa-chart-area fa-fw mr-3"></i><span class="pb-1 md:pb-0 text-sm">Analytics</span>
</a>
</li>
<li class="mr-6 my-2 md:my-0">
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-gray-500 no-underline hover:text-gray-100 border-b-2 border-gray-900 hover:border-red-400">
<i class="fa fa-wallet fa-fw mr-3"></i><span class="pb-1 md:pb-0 text-sm">Payments</span>
</a>
</li>
</ul>
<div class="relative pull-right pl-4 pr-4 md:pr-0">
<input type="search" placeholder="Search" class="w-full bg-gray-900 text-sm text-gray-400 transition border border-gray-800 focus:outline-none focus:border-gray-600 rounded py-1 px-2 pl-10 appearance-none leading-normal">
<div class="absolute search-icon" style="top: 0.375rem;left: 1.75rem;">
<svg class="fill-current pointer-events-none text-gray-500 w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"></path>
</svg>
</div>
</div>
</div>
</div>
<script>
/*Toggle dropdown list*/
/*https://gist.github.com/slavapas/593e8e50cf4cc16ac972afcbad4f70c8*/
var userMenuDiv = document.getElementById("userMenu");
var userMenu = document.getElementById("userButton");
var navMenuDiv = document.getElementById("nav-content");
var navMenu = document.getElementById("nav-toggle");
document.onclick = check;
function check(e){
var target = (e && e.target) || (event && event.srcElement);
//User Menu
if (!checkParent(target, userMenuDiv)) {
// click NOT on the menu
if (checkParent(target, userMenu)) {
// click on the link
if (userMenuDiv.classList.contains("invisible")) {
userMenuDiv.classList.remove("invisible");
} else {userMenuDiv.classList.add("invisible");}
} else {
// click both outside link and outside menu, hide menu
userMenuDiv.classList.add("invisible");
}
}
//Nav Menu
if (!checkParent(target, navMenuDiv)) {
// click NOT on the menu
if (checkParent(target, navMenu)) {
// click on the link
if (navMenuDiv.classList.contains("hidden")) {
navMenuDiv.classList.remove("hidden");
} else {navMenuDiv.classList.add("hidden");}
} else {
// click both outside link and outside menu, hide menu
navMenuDiv.classList.add("hidden");
}
}
}
function checkParent(t, elm) {
while(t.parentNode) {
if( t == elm ) {return true;}
t = t.parentNode;
}
return false;
}
</script>
</nav>

@ -1,29 +0,0 @@
<!--<aside id="sidebar" th:fragment="sidebar-frmt" class="bg-gray-900 fixed w-full z-10 top-0 shadow" >
<div class="w-full container mx-auto flex flex-wrap items-center mt-0 pt-3 pb-3 md:pb-0">-->
<div th:fragment="sidebar-frmt" class="md:mt-12 md:w-48 md:fixed md:left-0 md:top-0 content-center md:content-start text-left justify-between">
<ul class="list-reset flex flex-row md:flex-col py-0 md:py-3 px-1 md:px-2 text-center md:text-left">
<li class="mr-3 flex-1">
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 border-gray-800 hover:border-pink-500">
<i class="fas fa-tasks pr-0 md:pr-3"></i><span class="pb-1 md:pb-0 text-xs md:text-base text-gray-600 md:text-gray-400 block md:inline-block">Tasks</span>
</a>
</li>
<li class="mr-3 flex-1">
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 border-gray-800 hover:border-purple-500">
<i class="fa fa-envelope pr-0 md:pr-3"></i><span class="pb-1 md:pb-0 text-xs md:text-base text-gray-600 md:text-gray-400 block md:inline-block">Messages</span>
</a>
</li>
<li class="mr-3 flex-1">
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 border-blue-600">
<i class="fas fa-chart-area pr-0 md:pr-3 text-blue-600"></i><span class="pb-1 md:pb-0 text-xs md:text-base text-white md:text-white block md:inline-block">Analytics</span>
</a>
</li>
<li class="mr-3 flex-1">
<a href="#" class="block py-1 md:py-3 pl-0 md:pl-1 align-middle text-white no-underline hover:text-white border-b-2 border-gray-800 hover:border-red-500">
<i class="fa fa-wallet pr-0 md:pr-3"></i><span class="pb-1 md:pb-0 text-xs md:text-base text-gray-600 md:text-gray-400 block md:inline-block">Payments</span>
</a>
</li>
</ul>
</div>

@ -1,12 +0,0 @@
<!-- webjar core CSS -->
<link th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
<link th:href="@{/webjars/font-awesome/css/all.css}" rel="stylesheet"/>
<link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet" crossorigin="anonymous">
<link href="https://emoji-css.afeld.me/emoji.css" rel="stylesheet" crossorigin="anonymous">
<!-- Custom common css -->
<!--
<link th:href="@{/css/common.css}" rel="stylesheet">
<link th:href="@{/css/clean-blog.css}" rel="stylesheet">
-->

@ -1,14 +0,0 @@
<!-- webjar core JavaScript -->
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/webjars/popper.js/umd/popper.js}"></script>
<script th:src="@{/webjars/font-awesome/js/fontawesome.js}"></script>
<script th:src="@{/webjars/momentjs/moment.js}"></script>
<script th:src="@{/webjars/jquery-i18n-properties/jquery.i18n.properties.min.js}"></script>
<!-- Custom scripts for this template -->
<!-- 차트사용시 해당 페이지에서 import
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js" integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis=" crossorigin="anonymous"></script>
-->

@ -1,299 +0,0 @@
<!DOCTYPE html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{thymeleaf/layouts/layout-dark}">
<th:block layout:fragment="template">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js" integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis=" crossorigin="anonymous"></script>
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
<!--Metric Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded p-3 bg-green-600"><i class="fa fa-wallet fa-2x fa-fw fa-inverse"></i></div>
</div>
<div class="flex-1 text-right md:text-center">
<h5 class="font-bold uppercase text-gray-400">Total Revenue</h5>
<h3 class="font-bold text-3xl text-gray-600">$3249 <span class="text-green-500"><i class="fas fa-caret-up"></i></span></h3>
</div>
</div>
</div>
<!--/Metric Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
<!--Metric Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded p-3 bg-pink-600"><i class="fas fa-users fa-2x fa-fw fa-inverse"></i></div>
</div>
<div class="flex-1 text-right md:text-center">
<h5 class="font-bold uppercase text-gray-400">Total Users</h5>
<h3 class="font-bold text-3xl text-gray-600">249 <span class="text-pink-500"><i class="fas fa-exchange-alt"></i></span></h3>
</div>
</div>
</div>
<!--/Metric Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
<!--Metric Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded p-3 bg-yellow-600"><i class="fas fa-user-plus fa-2x fa-fw fa-inverse"></i></div>
</div>
<div class="flex-1 text-right md:text-center">
<h5 class="font-bold uppercase text-gray-400">New Users</h5>
<h3 class="font-bold text-3xl text-gray-600">2 <span class="text-yellow-600"><i class="fas fa-caret-up"></i></span></h3>
</div>
</div>
</div>
<!--/Metric Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
<!--Metric Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded p-3 bg-blue-600"><i class="fas fa-server fa-2x fa-fw fa-inverse"></i></div>
</div>
<div class="flex-1 text-right md:text-center">
<h5 class="font-bold uppercase text-gray-400">Server Uptime</h5>
<h3 class="font-bold text-3xl text-gray-600">152 days</h3>
</div>
</div>
</div>
<!--/Metric Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
<!--Metric Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded p-3 bg-indigo-600"><i class="fas fa-tasks fa-2x fa-fw fa-inverse"></i></div>
</div>
<div class="flex-1 text-right md:text-center">
<h5 class="font-bold uppercase text-gray-400">To Do List</h5>
<h3 class="font-bold text-3xl text-gray-600">7 tasks</h3>
</div>
</div>
</div>
<!--/Metric Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
<!--Metric Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded p-3 bg-red-600"><i class="fas fa-inbox fa-2x fa-fw fa-inverse"></i></div>
</div>
<div class="flex-1 text-right md:text-center">
<h5 class="font-bold uppercase text-gray-400">Issues</h5>
<h3 class="font-bold text-3xl text-gray-600">3 <span class="text-red-500"><i class="fas fa-caret-up"></i></span></h3>
</div>
</div>
</div>
<!--/Metric Card-->
</div>
</div>
<!--Divider-->
<hr class="border-b-2 border-gray-600 my-8 mx-4">
<div class="flex flex-row flex-wrap flex-grow mt-2">
<div class="w-full md:w-1/2 p-3">
<!--Graph Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow">
<div class="border-b border-gray-800 p-3">
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
</div>
<div class="p-5">
<canvas id="chartjs-7" class="chartjs" width="undefined" height="undefined"></canvas>
<script>
new Chart(document.getElementById("chartjs-7"), {
"type": "bar",
"data": {
"labels": ["January", "February", "March", "April"],
"datasets": [{
"label": "Page Impressions",
"data": [10, 20, 30, 40],
"borderColor": "rgb(255, 99, 132)",
"backgroundColor": "rgba(255, 99, 132, 0.2)"
}, {
"label": "Adsense Clicks",
"data": [5, 15, 10, 30],
"type": "line",
"fill": false,
"borderColor": "rgb(54, 162, 235)"
}]
},
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
});
</script>
</div>
</div>
<!--/Graph Card-->
</div>
<div class="w-full md:w-1/2 p-3">
<!--Graph Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow">
<div class="border-b border-gray-800 p-3">
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
</div>
<div class="p-5">
<canvas id="chartjs-0" class="chartjs" width="undefined" height="undefined"></canvas>
<script>
new Chart(document.getElementById("chartjs-0"), {
"type": "line",
"data": {
"labels": ["January", "February", "March", "April", "May", "June", "July"],
"datasets": [{
"label": "Views",
"data": [65, 59, 80, 81, 56, 55, 40],
"fill": false,
"borderColor": "rgb(75, 192, 192)",
"lineTension": 0.1
}]
},
"options": {}
});
</script>
</div>
</div>
<!--/Graph Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
<!--Graph Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow">
<div class="border-b border-gray-800 p-3">
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
</div>
<div class="p-5">
<canvas id="chartjs-1" class="chartjs" width="undefined" height="undefined"></canvas>
<script>
new Chart(document.getElementById("chartjs-1"), {
"type": "bar",
"data": {
"labels": ["January", "February", "March", "April", "May", "June", "July"],
"datasets": [{
"label": "Likes",
"data": [65, 59, 80, 81, 56, 55, 40],
"fill": false,
"backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
"borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
"borderWidth": 1
}]
},
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
});
</script>
</div>
</div>
<!--/Graph Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
<!--Graph Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow">
<div class="border-b border-gray-800 p-3">
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
</div>
<div class="p-5"><canvas id="chartjs-4" class="chartjs" width="undefined" height="undefined"></canvas>
<script>
new Chart(document.getElementById("chartjs-4"), {
"type": "doughnut",
"data": {
"labels": ["P1", "P2", "P3"],
"datasets": [{
"label": "Issues",
"data": [300, 50, 100],
"backgroundColor": ["rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)"]
}]
}
});
</script>
</div>
</div>
<!--/Graph Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
<!--Template Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow">
<div class="border-b border-gray-800 p-3">
<h5 class="font-bold uppercase text-gray-600">Template</h5>
</div>
<div class="p-5">
</div>
</div>
<!--/Template Card-->
</div>
<div class="w-full p-3">
<!--Table Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow">
<div class="border-b border-gray-800 p-3">
<h5 class="font-bold uppercase text-gray-600">Table</h5>
</div>
<div class="p-5">
<table class="w-full p-5 text-gray-700">
<thead>
<tr>
<th class="text-left text-gray-600">Name</th>
<th class="text-left text-gray-600">Side</th>
<th class="text-left text-gray-600">Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Obi Wan Kenobi</td>
<td>Light</td>
<td>Jedi</td>
</tr>
<tr>
<td>Greedo</td>
<td>South</td>
<td>Scumbag</td>
</tr>
<tr>
<td>Darth Vader</td>
<td>Dark</td>
<td>Sith</td>
</tr>
</tbody>
</table>
<p class="py-2"><a href="#" class="text-white">See More issues...</a></p>
</div>
</div>
<!--/table Card-->
</div>
</div>
</th:block>

@ -1,446 +0,0 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tailwind Admin Starter Template : Tailwind Toolbox</title>
<meta name="author" content="name">
<meta name="description" content="description here">
<meta name="keywords" content="keywords,here">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet"> <!--Replace with your tailwind.css once created-->
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet"> <!--Totally optional :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js" integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis=" crossorigin="anonymous"></script>
</head>
<body class="bg-gray-800 font-sans leading-normal tracking-normal mt-12">
<!--Nav-->
<nav class="bg-gray-800 pt-2 md:pt-1 pb-1 px-1 mt-0 h-auto fixed w-full z-20 top-0">
<div class="flex flex-wrap items-center">
<div class="flex flex-shrink md:w-1/3 justify-center md:justify-start text-white">
<a href="#">
<span class="text-xl pl-2"><i class="em em-grinning"></i></span>
</a>
</div>
<div class="flex flex-1 md:w-1/3 justify-center md:justify-start text-white px-2">
<span class="relative w-full">
<input type="search" placeholder="Search" class="w-full bg-gray-900 text-white transition border border-transparent focus:outline-none focus:border-gray-400 rounded py-3 px-2 pl-10 appearance-none leading-normal">
<div class="absolute search-icon" style="top: 1rem; left: .8rem;">
<svg class="fill-current pointer-events-none text-white w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"></path>
</svg>
</div>
</span>
</div>
<div class="flex w-full pt-2 content-center justify-between md:w-1/3 md:justify-end">
<ul class="list-reset flex justify-between flex-1 md:flex-none items-center">
<li class="flex-1 md:flex-none md:mr-3">
<a class="inline-block py-2 px-4 text-white no-underline" href="#">Active</a>
</li>
<li class="flex-1 md:flex-none md:mr-3">
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" href="#">link</a>
</li>
<li class="flex-1 md:flex-none md:mr-3">
<div class="relative inline-block">
<button onclick="toggleDD('myDropdown')" class="drop-button text-white focus:outline-none"> <span class="pr-2"><i class="em em-robot_face"></i></span> Hi, User <svg class="h-3 fill-current inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg></button>
<div id="myDropdown" class="dropdownlist absolute bg-gray-800 text-white right-0 mt-3 p-3 overflow-auto z-30 invisible">
<input type="text" class="drop-search p-2 text-gray-600" placeholder="Search.." id="myInput" onkeyup="filterDD('myDropdown','myInput')">
<a href="#" class="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block"><i class="fa fa-user fa-fw"></i> Profile</a>
<a href="#" class="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block"><i class="fa fa-cog fa-fw"></i> Settings</a>
<div class="border border-gray-800"></div>
<a href="#" class="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block"><i class="fas fa-sign-out-alt fa-fw"></i> Log Out</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="flex flex-col md:flex-row">
<div class="bg-gray-800 shadow-xl h-16 fixed bottom-0 mt-12 md:relative md:h-screen z-10 w-full md:w-48">
<div class="md:mt-12 md:w-48 md:fixed md:left-0 md:top-0 content-center md:content-start text-left justify-between">
<ul class="list-reset flex flex-row md:flex-col py-0 md:py-3 px-1 md:px-2 text-center md:text-left">
<li class="mr-3 flex-1">
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 border-gray-800 hover:border-pink-500">
<i class="fas fa-tasks pr-0 md:pr-3"></i><span class="pb-1 md:pb-0 text-xs md:text-base text-gray-600 md:text-gray-400 block md:inline-block">Tasks</span>
</a>
</li>
<li class="mr-3 flex-1">
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 border-gray-800 hover:border-purple-500">
<i class="fa fa-envelope pr-0 md:pr-3"></i><span class="pb-1 md:pb-0 text-xs md:text-base text-gray-600 md:text-gray-400 block md:inline-block">Messages</span>
</a>
</li>
<li class="mr-3 flex-1">
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 border-blue-600">
<i class="fas fa-chart-area pr-0 md:pr-3 text-blue-600"></i><span class="pb-1 md:pb-0 text-xs md:text-base text-white md:text-white block md:inline-block">Analytics</span>
</a>
</li>
<li class="mr-3 flex-1">
<a href="#" class="block py-1 md:py-3 pl-0 md:pl-1 align-middle text-white no-underline hover:text-white border-b-2 border-gray-800 hover:border-red-500">
<i class="fa fa-wallet pr-0 md:pr-3"></i><span class="pb-1 md:pb-0 text-xs md:text-base text-gray-600 md:text-gray-400 block md:inline-block">Payments</span>
</a>
</li>
</ul>
</div>
</div>
<div class="main-content flex-1 bg-gray-100 mt-12 md:mt-2 pb-24 md:pb-5">
<div class="bg-gray-800 pt-3">
<div class="rounded-tl-3xl bg-gradient-to-r from-blue-900 to-gray-800 p-4 shadow text-2xl text-white">
<h3 class="font-bold pl-2">Analytics</h3>
</div>
</div>
<div class="flex flex-wrap">
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<!--Metric Card-->
<div class="bg-gradient-to-b from-green-200 to-green-100 border-b-4 border-green-600 rounded-lg shadow-xl p-5">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded-full p-5 bg-green-600"><i class="fa fa-wallet fa-2x fa-inverse"></i></div>
</div>
<div class="flex-1 text-right md:text-center">
<h5 class="font-bold uppercase text-gray-600">Total Revenue</h5>
<h3 class="font-bold text-3xl">$3249 <span class="text-green-500"><i class="fas fa-caret-up"></i></span></h3>
</div>
</div>
</div>
<!--/Metric Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<!--Metric Card-->
<div class="bg-gradient-to-b from-pink-200 to-pink-100 border-b-4 border-pink-500 rounded-lg shadow-xl p-5">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded-full p-5 bg-pink-600"><i class="fas fa-users fa-2x fa-inverse"></i></div>
</div>
<div class="flex-1 text-right md:text-center">
<h5 class="font-bold uppercase text-gray-600">Total Users</h5>
<h3 class="font-bold text-3xl">249 <span class="text-pink-500"><i class="fas fa-exchange-alt"></i></span></h3>
</div>
</div>
</div>
<!--/Metric Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<!--Metric Card-->
<div class="bg-gradient-to-b from-yellow-200 to-yellow-100 border-b-4 border-yellow-600 rounded-lg shadow-xl p-5">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded-full p-5 bg-yellow-600"><i class="fas fa-user-plus fa-2x fa-inverse"></i></div>
</div>
<div class="flex-1 text-right md:text-center">
<h5 class="font-bold uppercase text-gray-600">New Users</h5>
<h3 class="font-bold text-3xl">2 <span class="text-yellow-600"><i class="fas fa-caret-up"></i></span></h3>
</div>
</div>
</div>
<!--/Metric Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<!--Metric Card-->
<div class="bg-gradient-to-b from-blue-200 to-blue-100 border-b-4 border-blue-500 rounded-lg shadow-xl p-5">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded-full p-5 bg-blue-600"><i class="fas fa-server fa-2x fa-inverse"></i></div>
</div>
<div class="flex-1 text-right md:text-center">
<h5 class="font-bold uppercase text-gray-600">Server Uptime</h5>
<h3 class="font-bold text-3xl">152 days</h3>
</div>
</div>
</div>
<!--/Metric Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<!--Metric Card-->
<div class="bg-gradient-to-b from-indigo-200 to-indigo-100 border-b-4 border-indigo-500 rounded-lg shadow-xl p-5">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded-full p-5 bg-indigo-600"><i class="fas fa-tasks fa-2x fa-inverse"></i></div>
</div>
<div class="flex-1 text-right md:text-center">
<h5 class="font-bold uppercase text-gray-600">To Do List</h5>
<h3 class="font-bold text-3xl">7 tasks</h3>
</div>
</div>
</div>
<!--/Metric Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<!--Metric Card-->
<div class="bg-gradient-to-b from-red-200 to-red-100 border-b-4 border-red-500 rounded-lg shadow-xl p-5">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded-full p-5 bg-red-600"><i class="fas fa-inbox fa-2x fa-inverse"></i></div>
</div>
<div class="flex-1 text-right md:text-center">
<h5 class="font-bold uppercase text-gray-600">Issues</h5>
<h3 class="font-bold text-3xl">3 <span class="text-red-500"><i class="fas fa-caret-up"></i></span></h3>
</div>
</div>
</div>
<!--/Metric Card-->
</div>
</div>
<div class="flex flex-row flex-wrap flex-grow mt-2">
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<!--Graph Card-->
<div class="bg-white border-transparent rounded-lg shadow-xl">
<div class="bg-gradient-to-b from-gray-300 to-gray-100 uppercase text-gray-800 border-b-2 border-gray-300 rounded-tl-lg rounded-tr-lg p-2">
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
</div>
<div class="p-5">
<canvas id="chartjs-7" class="chartjs" width="undefined" height="undefined"></canvas>
<script>
new Chart(document.getElementById("chartjs-7"), {
"type": "bar",
"data": {
"labels": ["January", "February", "March", "April"],
"datasets": [{
"label": "Page Impressions",
"data": [10, 20, 30, 40],
"borderColor": "rgb(255, 99, 132)",
"backgroundColor": "rgba(255, 99, 132, 0.2)"
}, {
"label": "Adsense Clicks",
"data": [5, 15, 10, 30],
"type": "line",
"fill": false,
"borderColor": "rgb(54, 162, 235)"
}]
},
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
});
</script>
</div>
</div>
<!--/Graph Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<!--Graph Card-->
<div class="bg-white border-transparent rounded-lg shadow-xl">
<div class="bg-gradient-to-b from-gray-300 to-gray-100 uppercase text-gray-800 border-b-2 border-gray-300 rounded-tl-lg rounded-tr-lg p-2">
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
</div>
<div class="p-5">
<canvas id="chartjs-0" class="chartjs" width="undefined" height="undefined"></canvas>
<script>
new Chart(document.getElementById("chartjs-0"), {
"type": "line",
"data": {
"labels": ["January", "February", "March", "April", "May", "June", "July"],
"datasets": [{
"label": "Views",
"data": [65, 59, 80, 81, 56, 55, 40],
"fill": false,
"borderColor": "rgb(75, 192, 192)",
"lineTension": 0.1
}]
},
"options": {}
});
</script>
</div>
</div>
<!--/Graph Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<!--Graph Card-->
<div class="bg-white border-transparent rounded-lg shadow-xl">
<div class="bg-gradient-to-b from-gray-300 to-gray-100 uppercase text-gray-800 border-b-2 border-gray-300 rounded-tl-lg rounded-tr-lg p-2">
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
</div>
<div class="p-5">
<canvas id="chartjs-1" class="chartjs" width="undefined" height="undefined"></canvas>
<script>
new Chart(document.getElementById("chartjs-1"), {
"type": "bar",
"data": {
"labels": ["January", "February", "March", "April", "May", "June", "July"],
"datasets": [{
"label": "Likes",
"data": [65, 59, 80, 81, 56, 55, 40],
"fill": false,
"backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
"borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
"borderWidth": 1
}]
},
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
});
</script>
</div>
</div>
<!--/Graph Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<!--Graph Card-->
<div class="bg-white border-transparent rounded-lg shadow-xl">
<div class="bg-gradient-to-b from-gray-300 to-gray-100 uppercase text-gray-800 border-b-2 border-gray-300 rounded-tl-lg rounded-tr-lg p-2">
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
</div>
<div class="p-5"><canvas id="chartjs-4" class="chartjs" width="undefined" height="undefined"></canvas>
<script>
new Chart(document.getElementById("chartjs-4"), {
"type": "doughnut",
"data": {
"labels": ["P1", "P2", "P3"],
"datasets": [{
"label": "Issues",
"data": [300, 50, 100],
"backgroundColor": ["rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)"]
}]
}
});
</script>
</div>
</div>
<!--/Graph Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<!--Table Card-->
<div class="bg-white border-transparent rounded-lg shadow-xl">
<div class="bg-gradient-to-b from-gray-300 to-gray-100 uppercase text-gray-800 border-b-2 border-gray-300 rounded-tl-lg rounded-tr-lg p-2">
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
</div>
<div class="p-5">
<table class="w-full p-5 text-gray-700">
<thead>
<tr>
<th class="text-left text-blue-900">Name</th>
<th class="text-left text-blue-900">Side</th>
<th class="text-left text-blue-900">Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Obi Wan Kenobi</td>
<td>Light</td>
<td>Jedi</td>
</tr>
<tr>
<td>Greedo</td>
<td>South</td>
<td>Scumbag</td>
</tr>
<tr>
<td>Darth Vader</td>
<td>Dark</td>
<td>Sith</td>
</tr>
</tbody>
</table>
<p class="py-2"><a href="#">See More issues...</a></p>
</div>
</div>
<!--/table Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<!--Advert Card-->
<div class="bg-white border-transparent rounded-lg shadow-xl">
<div class="bg-gradient-to-b from-gray-300 to-gray-100 uppercase text-gray-800 border-b-2 border-gray-300 rounded-tl-lg rounded-tr-lg p-2">
<h5 class="font-bold uppercase text-gray-600">Advert</h5>
</div>
<div class="p-5 text-center">
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7D52JJ&placement=wwwtailwindtoolboxcom" id="_carbonads_js"></script>
</div>
</div>
<!--/Advert Card-->
</div>
</div>
</div>
</div>
<script>
/*Toggle dropdown list*/
function toggleDD(myDropMenu) {
document.getElementById(myDropMenu).classList.toggle("invisible");
}
/*Filter dropdown options*/
function filterDD(myDropMenu, myDropMenuSearch) {
var input, filter, ul, li, a, i;
input = document.getElementById(myDropMenuSearch);
filter = input.value.toUpperCase();
div = document.getElementById(myDropMenu);
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.drop-button') && !event.target.matches('.drop-search')) {
var dropdowns = document.getElementsByClassName("dropdownlist");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (!openDropdown.classList.contains('invisible')) {
openDropdown.classList.add('invisible');
}
}
}
}
</script>
</body>
</html>

@ -1,513 +0,0 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tailwind Starter Template - Night Admin Template: Tailwind Toolbox</title>
<meta name="description" content="description here">
<meta name="keywords" content="keywords,here">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet"> <!--Replace with your tailwind.css once created-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js" integrity="sha256-XF29CBwU1MWLaGEnsELogU6Y6rcc5nCkhhx89nFMIDQ=" crossorigin="anonymous"></script>
<style>
.bg-black-alt {
background:#191919;
}
.text-black-alt {
color:#191919;
}
.border-black-alt {
border-color: #191919;
}
</style>
</head>
<body class="bg-black-alt font-sans leading-normal tracking-normal">
<nav id="header" class="bg-gray-900 fixed w-full z-10 top-0 shadow">
<div class="w-full container mx-auto flex flex-wrap items-center mt-0 pt-3 pb-3 md:pb-0">
<div class="w-1/2 pl-2 md:pl-0">
<a class="text-gray-100 text-base xl:text-xl no-underline hover:no-underline font-bold" href="#">
<i class="fas fa-moon text-blue-400 pr-3"></i> Admin Dark Mode
</a>
</div>
<div class="w-1/2 pr-0">
<div class="flex relative inline-block float-right">
<div class="relative text-sm text-gray-100">
<button id="userButton" class="flex items-center focus:outline-none mr-3">
<img class="w-8 h-8 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of User"> <span class="hidden md:inline-block text-gray-100">Hi, User</span>
<svg class="pl-2 h-2 fill-current text-gray-100" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129"><g><path d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z"/></g></svg>
</button>
<div id="userMenu" class="bg-gray-900 rounded shadow-md mt-2 absolute mt-12 top-0 right-0 min-w-full overflow-auto z-30 invisible">
<ul class="list-reset">
<li><a href="#" class="px-4 py-2 block text-gray-100 hover:bg-gray-800 no-underline hover:no-underline">My account</a></li>
<li><a href="#" class="px-4 py-2 block text-gray-100 hover:bg-gray-800 no-underline hover:no-underline">Notifications</a></li>
<li><hr class="border-t mx-2 border-gray-400"></li>
<li><a href="#" class="px-4 py-2 block text-gray-100 hover:bg-gray-800 no-underline hover:no-underline">Logout</a></li>
</ul>
</div>
</div>
<div class="block lg:hidden pr-4">
<button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-gray-100 hover:border-teal-500 appearance-none focus:outline-none">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
</div>
</div>
<div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block mt-2 lg:mt-0 bg-gray-900 z-20" id="nav-content">
<ul class="list-reset lg:flex flex-1 items-center px-4 md:px-0">
<li class="mr-6 my-2 md:my-0">
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-blue-400 no-underline hover:text-gray-100 border-b-2 border-blue-400 hover:border-blue-400">
<i class="fas fa-home fa-fw mr-3 text-blue-400"></i><span class="pb-1 md:pb-0 text-sm">Home</span>
</a>
</li>
<li class="mr-6 my-2 md:my-0">
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-gray-500 no-underline hover:text-gray-100 border-b-2 border-gray-900 hover:border-pink-400">
<i class="fas fa-tasks fa-fw mr-3"></i><span class="pb-1 md:pb-0 text-sm">Tasks</span>
</a>
</li>
<li class="mr-6 my-2 md:my-0">
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-gray-500 no-underline hover:text-gray-100 border-b-2 border-gray-900 hover:border-purple-400">
<i class="fa fa-envelope fa-fw mr-3"></i><span class="pb-1 md:pb-0 text-sm">Messages</span>
</a>
</li>
<li class="mr-6 my-2 md:my-0">
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-gray-500 no-underline hover:text-gray-100 border-b-2 border-gray-900 hover:border-green-400">
<i class="fas fa-chart-area fa-fw mr-3"></i><span class="pb-1 md:pb-0 text-sm">Analytics</span>
</a>
</li>
<li class="mr-6 my-2 md:my-0">
<a href="#" class="block py-1 md:py-3 pl-1 align-middle text-gray-500 no-underline hover:text-gray-100 border-b-2 border-gray-900 hover:border-red-400">
<i class="fa fa-wallet fa-fw mr-3"></i><span class="pb-1 md:pb-0 text-sm">Payments</span>
</a>
</li>
</ul>
<div class="relative pull-right pl-4 pr-4 md:pr-0">
<input type="search" placeholder="Search" class="w-full bg-gray-900 text-sm text-gray-400 transition border border-gray-800 focus:outline-none focus:border-gray-600 rounded py-1 px-2 pl-10 appearance-none leading-normal">
<div class="absolute search-icon" style="top: 0.375rem;left: 1.75rem;">
<svg class="fill-current pointer-events-none text-gray-500 w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"></path>
</svg>
</div>
</div>
</div>
</div>
</nav>
<!--Container-->
<div class="container w-full mx-auto pt-20">
<div class="w-full px-4 md:px-0 md:mt-8 mb-16 text-gray-800 leading-normal">
<!--Console Content-->
<div class="flex flex-wrap">
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
<!--Metric Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded p-3 bg-green-600"><i class="fa fa-wallet fa-2x fa-fw fa-inverse"></i></div>
</div>
<div class="flex-1 text-right md:text-center">
<h5 class="font-bold uppercase text-gray-400">Total Revenue</h5>
<h3 class="font-bold text-3xl text-gray-600">$3249 <span class="text-green-500"><i class="fas fa-caret-up"></i></span></h3>
</div>
</div>
</div>
<!--/Metric Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
<!--Metric Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded p-3 bg-pink-600"><i class="fas fa-users fa-2x fa-fw fa-inverse"></i></div>
</div>
<div class="flex-1 text-right md:text-center">
<h5 class="font-bold uppercase text-gray-400">Total Users</h5>
<h3 class="font-bold text-3xl text-gray-600">249 <span class="text-pink-500"><i class="fas fa-exchange-alt"></i></span></h3>
</div>
</div>
</div>
<!--/Metric Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
<!--Metric Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded p-3 bg-yellow-600"><i class="fas fa-user-plus fa-2x fa-fw fa-inverse"></i></div>
</div>
<div class="flex-1 text-right md:text-center">
<h5 class="font-bold uppercase text-gray-400">New Users</h5>
<h3 class="font-bold text-3xl text-gray-600">2 <span class="text-yellow-600"><i class="fas fa-caret-up"></i></span></h3>
</div>
</div>
</div>
<!--/Metric Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
<!--Metric Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded p-3 bg-blue-600"><i class="fas fa-server fa-2x fa-fw fa-inverse"></i></div>
</div>
<div class="flex-1 text-right md:text-center">
<h5 class="font-bold uppercase text-gray-400">Server Uptime</h5>
<h3 class="font-bold text-3xl text-gray-600">152 days</h3>
</div>
</div>
</div>
<!--/Metric Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
<!--Metric Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded p-3 bg-indigo-600"><i class="fas fa-tasks fa-2x fa-fw fa-inverse"></i></div>
</div>
<div class="flex-1 text-right md:text-center">
<h5 class="font-bold uppercase text-gray-400">To Do List</h5>
<h3 class="font-bold text-3xl text-gray-600">7 tasks</h3>
</div>
</div>
</div>
<!--/Metric Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
<!--Metric Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded p-3 bg-red-600"><i class="fas fa-inbox fa-2x fa-fw fa-inverse"></i></div>
</div>
<div class="flex-1 text-right md:text-center">
<h5 class="font-bold uppercase text-gray-400">Issues</h5>
<h3 class="font-bold text-3xl text-gray-600">3 <span class="text-red-500"><i class="fas fa-caret-up"></i></span></h3>
</div>
</div>
</div>
<!--/Metric Card-->
</div>
</div>
<!--Divider-->
<hr class="border-b-2 border-gray-600 my-8 mx-4">
<div class="flex flex-row flex-wrap flex-grow mt-2">
<div class="w-full md:w-1/2 p-3">
<!--Graph Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow">
<div class="border-b border-gray-800 p-3">
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
</div>
<div class="p-5">
<canvas id="chartjs-7" class="chartjs" width="undefined" height="undefined"></canvas>
<script>
new Chart(document.getElementById("chartjs-7"), {
"type": "bar",
"data": {
"labels": ["January", "February", "March", "April"],
"datasets": [{
"label": "Page Impressions",
"data": [10, 20, 30, 40],
"borderColor": "rgb(255, 99, 132)",
"backgroundColor": "rgba(255, 99, 132, 0.2)"
}, {
"label": "Adsense Clicks",
"data": [5, 15, 10, 30],
"type": "line",
"fill": false,
"borderColor": "rgb(54, 162, 235)"
}]
},
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
});
</script>
</div>
</div>
<!--/Graph Card-->
</div>
<div class="w-full md:w-1/2 p-3">
<!--Graph Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow">
<div class="border-b border-gray-800 p-3">
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
</div>
<div class="p-5">
<canvas id="chartjs-0" class="chartjs" width="undefined" height="undefined"></canvas>
<script>
new Chart(document.getElementById("chartjs-0"), {
"type": "line",
"data": {
"labels": ["January", "February", "March", "April", "May", "June", "July"],
"datasets": [{
"label": "Views",
"data": [65, 59, 80, 81, 56, 55, 40],
"fill": false,
"borderColor": "rgb(75, 192, 192)",
"lineTension": 0.1
}]
},
"options": {}
});
</script>
</div>
</div>
<!--/Graph Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
<!--Graph Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow">
<div class="border-b border-gray-800 p-3">
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
</div>
<div class="p-5">
<canvas id="chartjs-1" class="chartjs" width="undefined" height="undefined"></canvas>
<script>
new Chart(document.getElementById("chartjs-1"), {
"type": "bar",
"data": {
"labels": ["January", "February", "March", "April", "May", "June", "July"],
"datasets": [{
"label": "Likes",
"data": [65, 59, 80, 81, 56, 55, 40],
"fill": false,
"backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
"borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
"borderWidth": 1
}]
},
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
});
</script>
</div>
</div>
<!--/Graph Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
<!--Graph Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow">
<div class="border-b border-gray-800 p-3">
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
</div>
<div class="p-5"><canvas id="chartjs-4" class="chartjs" width="undefined" height="undefined"></canvas>
<script>
new Chart(document.getElementById("chartjs-4"), {
"type": "doughnut",
"data": {
"labels": ["P1", "P2", "P3"],
"datasets": [{
"label": "Issues",
"data": [300, 50, 100],
"backgroundColor": ["rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)"]
}]
}
});
</script>
</div>
</div>
<!--/Graph Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
<!--Template Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow">
<div class="border-b border-gray-800 p-3">
<h5 class="font-bold uppercase text-gray-600">Template</h5>
</div>
<div class="p-5">
</div>
</div>
<!--/Template Card-->
</div>
<div class="w-full p-3">
<!--Table Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow">
<div class="border-b border-gray-800 p-3">
<h5 class="font-bold uppercase text-gray-600">Table</h5>
</div>
<div class="p-5">
<table class="w-full p-5 text-gray-700">
<thead>
<tr>
<th class="text-left text-gray-600">Name</th>
<th class="text-left text-gray-600">Side</th>
<th class="text-left text-gray-600">Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Obi Wan Kenobi</td>
<td>Light</td>
<td>Jedi</td>
</tr>
<tr>
<td>Greedo</td>
<td>South</td>
<td>Scumbag</td>
</tr>
<tr>
<td>Darth Vader</td>
<td>Dark</td>
<td>Sith</td>
</tr>
</tbody>
</table>
<p class="py-2"><a href="#" class="text-white">See More issues...</a></p>
</div>
</div>
<!--/table Card-->
</div>
</div>
<!--/ Console Content-->
</div>
</div>
<!--/container-->
<footer class="bg-gray-900 border-t border-gray-400 shadow">
<div class="container max-w-md mx-auto flex py-8">
<div class="w-full mx-auto flex flex-wrap">
<div class="flex w-full md:w-1/2 ">
<div class="px-8">
<h3 class="font-bold font-bold text-gray-100">About</h3>
<p class="py-4 text-gray-600 text-sm">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel mi ut felis tempus commodo nec id erat. Suspendisse consectetur dapibus velit ut lacinia.
</p>
</div>
</div>
<div class="flex w-full md:w-1/2">
<div class="px-8">
<h3 class="font-bold font-bold text-gray-100">Social</h3>
<ul class="list-reset items-center text-sm pt-3">
<li>
<a class="inline-block text-gray-600 no-underline hover:text-gray-100 hover:text-underline py-1" href="#">Add social link</a>
</li>
<li>
<a class="inline-block text-gray-600 no-underline hover:text-gray-100 hover:text-underline py-1" href="#">Add social link</a>
</li>
<li>
<a class="inline-block text-gray-600 no-underline hover:text-gray-100 hover:text-underline py-1" href="#">Add social link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<script>
/*Toggle dropdown list*/
/*https://gist.github.com/slavapas/593e8e50cf4cc16ac972afcbad4f70c8*/
var userMenuDiv = document.getElementById("userMenu");
var userMenu = document.getElementById("userButton");
var navMenuDiv = document.getElementById("nav-content");
var navMenu = document.getElementById("nav-toggle");
document.onclick = check;
function check(e){
var target = (e && e.target) || (event && event.srcElement);
//User Menu
if (!checkParent(target, userMenuDiv)) {
// click NOT on the menu
if (checkParent(target, userMenu)) {
// click on the link
if (userMenuDiv.classList.contains("invisible")) {
userMenuDiv.classList.remove("invisible");
} else {userMenuDiv.classList.add("invisible");}
} else {
// click both outside link and outside menu, hide menu
userMenuDiv.classList.add("invisible");
}
}
//Nav Menu
if (!checkParent(target, navMenuDiv)) {
// click NOT on the menu
if (checkParent(target, navMenu)) {
// click on the link
if (navMenuDiv.classList.contains("hidden")) {
navMenuDiv.classList.remove("hidden");
} else {navMenuDiv.classList.add("hidden");}
} else {
// click both outside link and outside menu, hide menu
navMenuDiv.classList.add("hidden");
}
}
}
function checkParent(t, elm) {
while(t.parentNode) {
if( t == elm ) {return true;}
t = t.parentNode;
}
return false;
}
</script>
</body>
</html>

@ -1,33 +0,0 @@
<!DOCTYPE html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<th:block th:replace="/thymeleaf/fragments/admin/header :: header-frmt('dddd')"></th:block>
<th:block th:include="/thymeleaf/fragments/include-link"></th:block>
<body class="bg-gray-800 font-sans leading-normal tracking-normal mt-12">
<th:block th:replace="/thymeleaf/fragments/admin/menu :: menu-frmt"></th:block>
<div class="flex flex-col md:flex-row">
<!-- 사이드바-->
<div class="bg-gray-800 shadow-xl h-16 fixed bottom-0 mt-12 md:relative md:h-screen z-10 w-full md:w-48">
<th:block th:replace="/thymeleaf/fragments/admin/sidebar :: sidebar-frmt"></th:block>
</div>
<!-- Main Content -->
<div id="content" class="main-content flex-1 bg-gray-100 mt-12 md:mt-2 pb-24 md:pb-5">
<th:block layout:fragment="template"></th:block>
</div>
</div>
<!--<div>
<th:block th:replace="/fragments/admin/footer :: footer-frmt"></th:block>
</div>-->
<!-- Common script -->
<th:block th:include="/thymeleaf/fragments/include-script"></th:block>
</body>
</html>

@ -1,39 +0,0 @@
<!DOCTYPE html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<th:block th:replace="/thymeleaf/fragments/dark/header :: header-frmt('dddd')"></th:block>
<th:block th:include="/thymeleaf/fragments/include-link"></th:block>
<body class="bg-black-alt font-sans leading-normal tracking-normal">
<th:block th:replace="/thymeleaf/fragments/dark/menu :: menu-frmt"></th:block>
<!-- Page Header -->
<!-- 사이드바-->
<!--
<div>
<th:block th:replace="/fragments/dark/sidebar :: sidebar-frmt"></th:block>
</div>
-->
<div id="content" class="container w-full mx-auto pt-20">
<div class="w-full px-4 md:px-0 md:mt-8 mb-16 text-white-800 leading-normal">
<div class="flex flex-wrap">
<!-- Main Content -->
<th:block layout:fragment="template"></th:block>
</div>
</div>
<th:block th:replace="/thymeleaf/fragments/dark/footer :: footer-frmt"></th:block>
</div>
<!-- Common script -->
<th:block th:include="/thymeleaf/fragments/include-script"></th:block>
</body>
</html>

@ -1,84 +0,0 @@
<!DOCTYPE html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{thymeleaf/layouts/layout-dark}">
<th:block layout:fragment="template">
<!-- <div class="w-full md:text-center text-gray-400">-->
<div class="flex flex-wrap w-full bg-gray-800 pt-3 text-gray-400">
<!--<input type="text" value="엑셀 파일명.xlsx"/>엑셀파일명<br/>-->
<button type="button" onclick="download()" class="button">엑셀다운로드 테스트</button>
</div>
<script>
function download() {
let params = {
fileName: document.querySelector('input').value
// titleList: ["아이디", "이름", "생년월일", "핸드폰번호", "전화", "이메일"],
// fieldList: ["ID", "MBR_NM", "BRTHDY", "HP_NO", "TEL_NO", "EMAIL"]
};
let fileName = '';
fetch('http://localhost:8080/web/sample/exceldown',
{
headers: {
Authorization: "jwt token"
},
method: 'POST',
body: JSON.stringify(params)
})
.then(res => downloadFile(res))
}
async function downloadFile(fetchResult) {
let filename = fetchResult.headers.get('content-disposition').split('filename=')[1];
//let filename = decodeURI(fetchResult.headers.get('content-disposition').split('filename=')[1]);
let data = await fetchResult.blob();
// It is necessary to create a new blob object with mime-type explicitly set
// otherwise only Chrome works like it should
const blob = new Blob([data], { type: data.type || 'application/octet-stream' });
if (typeof window.navigator.msSaveBlob !== 'undefined') {
// IE doesn't allow using a blob object directly as link href.
// Workaround for "HTML7007: One or more blob URLs were
// revoked by closing the blob for which they were created.
// These URLs will no longer resolve as the data backing
// the URL has been freed."
window.navigator.msSaveBlob(blob, filename);
return;
}
// Other browsers
// Create a link pointing to the ObjectURL containing the blob
const blobURL = window.URL.createObjectURL(blob);
const tempLink = document.createElement('a');
tempLink.style.display = 'none';
tempLink.href = blobURL;
tempLink.setAttribute('download', filename);
// Safari thinks _blank anchor are pop ups. We only want to set _blank
// target if the browser does not support the HTML5 download attribute.
// This allows you to download files in desktop safari if pop up blocking
// is enabled.
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank');
}
document.body.appendChild(tempLink);
tempLink.click();
document.body.removeChild(tempLink);
setTimeout(() => {
// For Firefox it is necessary to delay revoking the ObjectURL
window.URL.revokeObjectURL(blobURL);
}, 100);
}
</script>
</th:block>
</html>

@ -1,29 +0,0 @@
<!DOCTYPE html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{thymeleaf/layouts/layout-dark}">
<th:block layout:fragment="template">
<!-- <div class="w-full md:text-center text-gray-400">-->
<div class="flex flex-wrap w-full bg-gray-800 pt-3 text-gray-400">
<p th:text="${name} + '!'" />
</div>
<!-- <script>-->
<!-- fetch("http://localhost:8301/sample/callback?codeGrpId=GrpID", {-->
<!-- // method: "GET",-->
<!-- // headers: {-->
<!-- // "Content-Type": "application/json",-->
<!-- // },-->
<!-- // body: JSON.stringify({-->
<!-- // title: "Test",-->
<!-- // body: "I am testing!",-->
<!-- // userId: 1,-->
<!-- // }),-->
<!-- }).then((response) => console.log(response));-->
<!-- </script>-->
</th:block>
</html>

@ -1,266 +0,0 @@
<!DOCTYPE html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{thymeleaf/layouts/layout-admin}">
<th:block layout:fragment="template">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js" integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis=" crossorigin="anonymous"></script>
<div class="bg-gray-800 pt-3">
<div class="bg-gradient-to-r from-blue-900 to-gray-800 p-4 shadow text-2xl text-white">
<h3 class="font-bold pl-2">Analytics</h3>
</div>
</div>
<div class="flex flex-wrap">
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<!--Metric Card-->
<div class="bg-gradient-to-b from-green-200 to-green-100 border-b-4 border-green-600 rounded-lg shadow-xl p-5">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded-full p-5 bg-green-600"><i class="fa fa-wallet fa-2x fa-inverse"></i></div>
</div>
<div class="flex-1 text-right md:text-center">
<h5 class="font-bold uppercase text-gray-600">Total Revenue</h5>
<h3 class="font-bold text-3xl">$3249 <span class="text-green-500"><i class="fas fa-caret-up"></i></span></h3>
</div>
</div>
</div>
<!--/Metric Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<!--Metric Card-->
<div class="bg-gradient-to-b from-pink-200 to-pink-100 border-b-4 border-pink-500 rounded-lg shadow-xl p-5">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded-full p-5 bg-pink-600"><i class="fas fa-users fa-2x fa-inverse"></i></div>
</div>
<div class="flex-1 text-right md:text-center">
<h5 class="font-bold uppercase text-gray-600">Total Users</h5>
<h3 class="font-bold text-3xl">249 <span class="text-pink-500"><i class="fas fa-exchange-alt"></i></span></h3>
</div>
</div>
</div>
<!--/Metric Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<!--Metric Card-->
<div class="bg-gradient-to-b from-yellow-200 to-yellow-100 border-b-4 border-yellow-600 rounded-lg shadow-xl p-5">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded-full p-5 bg-yellow-600"><i class="fas fa-user-plus fa-2x fa-inverse"></i></div>
</div>
<div class="flex-1 text-right md:text-center">
<h5 class="font-bold uppercase text-gray-600">New Users</h5>
<h3 class="font-bold text-3xl">2 <span class="text-yellow-600"><i class="fas fa-caret-up"></i></span></h3>
</div>
</div>
</div>
<!--/Metric Card-->
</div>
</div>
<div class="flex flex-row flex-wrap flex-grow mt-2">
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<!--Graph Card-->
<div class="bg-white border-transparent rounded-lg shadow-xl">
<div class="bg-gradient-to-b from-gray-300 to-gray-100 uppercase text-gray-800 border-b-2 border-gray-300 rounded-tl-lg rounded-tr-lg p-2">
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
</div>
<div class="p-5">
<canvas id="chartjs-7" class="chartjs" width="undefined" height="undefined"></canvas>
<script>
new Chart(document.getElementById("chartjs-7"), {
"type": "bar",
"data": {
"labels": ["January", "February", "March", "April"],
"datasets": [{
"label": "Page Impressions",
"data": [10, 20, 30, 40],
"borderColor": "rgb(255, 99, 132)",
"backgroundColor": "rgba(255, 99, 132, 0.2)"
}, {
"label": "Adsense Clicks",
"data": [5, 15, 10, 30],
"type": "line",
"fill": false,
"borderColor": "rgb(54, 162, 235)"
}]
},
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
});
</script>
</div>
</div>
<!--/Graph Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<!--Graph Card-->
<div class="bg-white border-transparent rounded-lg shadow-xl">
<div class="bg-gradient-to-b from-gray-300 to-gray-100 uppercase text-gray-800 border-b-2 border-gray-300 rounded-tl-lg rounded-tr-lg p-2">
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
</div>
<div class="p-5">
<canvas id="chartjs-0" class="chartjs" width="undefined" height="undefined"></canvas>
<script>
new Chart(document.getElementById("chartjs-0"), {
"type": "line",
"data": {
"labels": ["January", "February", "March", "April", "May", "June", "July"],
"datasets": [{
"label": "Views",
"data": [65, 59, 80, 81, 56, 55, 40],
"fill": false,
"borderColor": "rgb(75, 192, 192)",
"lineTension": 0.1
}]
},
"options": {}
});
</script>
</div>
</div>
<!--/Graph Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<!--Graph Card-->
<div class="bg-white border-transparent rounded-lg shadow-xl">
<div class="bg-gradient-to-b from-gray-300 to-gray-100 uppercase text-gray-800 border-b-2 border-gray-300 rounded-tl-lg rounded-tr-lg p-2">
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
</div>
<div class="p-5">
<canvas id="chartjs-1" class="chartjs" width="undefined" height="undefined"></canvas>
<script>
new Chart(document.getElementById("chartjs-1"), {
"type": "bar",
"data": {
"labels": ["January", "February", "March", "April", "May", "June", "July"],
"datasets": [{
"label": "Likes",
"data": [65, 59, 80, 81, 56, 55, 40],
"fill": false,
"backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
"borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
"borderWidth": 1
}]
},
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
});
</script>
</div>
</div>
<!--/Graph Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<!--Graph Card-->
<div class="bg-white border-transparent rounded-lg shadow-xl">
<div class="bg-gradient-to-b from-gray-300 to-gray-100 uppercase text-gray-800 border-b-2 border-gray-300 rounded-tl-lg rounded-tr-lg p-2">
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
</div>
<div class="p-5"><canvas id="chartjs-4" class="chartjs" width="undefined" height="undefined"></canvas>
<script>
new Chart(document.getElementById("chartjs-4"), {
"type": "doughnut",
"data": {
"labels": ["P1", "P2", "P3"],
"datasets": [{
"label": "Issues",
"data": [300, 50, 100],
"backgroundColor": ["rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)"]
}]
}
});
</script>
</div>
</div>
<!--/Graph Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<!--Table Card-->
<div class="bg-white border-transparent rounded-lg shadow-xl">
<div class="bg-gradient-to-b from-gray-300 to-gray-100 uppercase text-gray-800 border-b-2 border-gray-300 rounded-tl-lg rounded-tr-lg p-2">
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
</div>
<div class="p-5">
<table class="w-full p-5 text-gray-700">
<thead>
<tr>
<th class="text-left text-blue-900">Name</th>
<th class="text-left text-blue-900">Side</th>
<th class="text-left text-blue-900">Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Obi Wan Kenobi</td>
<td>Light</td>
<td>Jedi</td>
</tr>
<tr>
<td>Greedo</td>
<td>South</td>
<td>Scumbag</td>
</tr>
<tr>
<td>Darth Vader</td>
<td>Dark</td>
<td>Sith</td>
</tr>
</tbody>
</table>
<p class="py-2"><a href="#">See More issues...</a></p>
</div>
</div>
<!--/table Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<!--Advert Card-->
<div class="bg-white border-transparent rounded-lg shadow-xl">
<div class="bg-gradient-to-b from-gray-300 to-gray-100 uppercase text-gray-800 border-b-2 border-gray-300 rounded-tl-lg rounded-tr-lg p-2">
<h5 class="font-bold uppercase text-gray-600">Advert</h5>
</div>
<div class="p-5 text-center">
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7D52JJ&placement=wwwtailwindtoolboxcom" id="_carbonads_js"></script>
</div>
</div>
<!--/Advert Card-->
</div>
</div>
</th:block>

@ -1,253 +0,0 @@
<!DOCTYPE html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{thymeleaf/layouts/layout-dark}">
<th:block layout:fragment="template">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js" integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis=" crossorigin="anonymous"></script>
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
<!--Metric Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded p-3 bg-green-600"><i class="fa fa-wallet fa-2x fa-fw fa-inverse"></i></div>
</div>
<div class="flex-1 text-right md:text-center">
<h5 class="font-bold uppercase text-gray-400">Total Revenue</h5>
<h3 class="font-bold text-3xl text-gray-600">$3249 <span class="text-green-500"><i class="fas fa-caret-up"></i></span></h3>
</div>
</div>
</div>
<!--/Metric Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
<!--Metric Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded p-3 bg-pink-600"><i class="fas fa-users fa-2x fa-fw fa-inverse"></i></div>
</div>
<div class="flex-1 text-right md:text-center">
<h5 class="font-bold uppercase text-gray-400">Total Users</h5>
<h3 class="font-bold text-3xl text-gray-600">249 <span class="text-pink-500"><i class="fas fa-exchange-alt"></i></span></h3>
</div>
</div>
</div>
<!--/Metric Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
<!--Metric Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow p-2">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded p-3 bg-yellow-600"><i class="fas fa-user-plus fa-2x fa-fw fa-inverse"></i></div>
</div>
<div class="flex-1 text-right md:text-center">
<h5 class="font-bold uppercase text-gray-400">New Users</h5>
<h3 class="font-bold text-3xl text-gray-600">2 <span class="text-yellow-600"><i class="fas fa-caret-up"></i></span></h3>
</div>
</div>
</div>
<!--/Metric Card-->
</div>
<!--Divider-->
<hr class="border-b-2 border-gray-600 my-8 mx-4">
<div class="flex flex-row flex-wrap flex-grow mt-2">
<div class="w-full md:w-1/2 p-3">
<!--Graph Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow">
<div class="border-b border-gray-800 p-3">
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
</div>
<div class="p-5">
<canvas id="chartjs-7" class="chartjs" width="undefined" height="undefined"></canvas>
<script>
new Chart(document.getElementById("chartjs-7"), {
"type": "bar",
"data": {
"labels": ["January", "February", "March", "April"],
"datasets": [{
"label": "Page Impressions",
"data": [10, 20, 30, 40],
"borderColor": "rgb(255, 99, 132)",
"backgroundColor": "rgba(255, 99, 132, 0.2)"
}, {
"label": "Adsense Clicks",
"data": [5, 15, 10, 30],
"type": "line",
"fill": false,
"borderColor": "rgb(54, 162, 235)"
}]
},
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
});
</script>
</div>
</div>
<!--/Graph Card-->
</div>
<div class="w-full md:w-1/2 p-3">
<!--Graph Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow">
<div class="border-b border-gray-800 p-3">
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
</div>
<div class="p-5">
<canvas id="chartjs-0" class="chartjs" width="undefined" height="undefined"></canvas>
<script>
new Chart(document.getElementById("chartjs-0"), {
"type": "line",
"data": {
"labels": ["January", "February", "March", "April", "May", "June", "July"],
"datasets": [{
"label": "Views",
"data": [65, 59, 80, 81, 56, 55, 40],
"fill": false,
"borderColor": "rgb(75, 192, 192)",
"lineTension": 0.1
}]
},
"options": {}
});
</script>
</div>
</div>
<!--/Graph Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
<!--Graph Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow">
<div class="border-b border-gray-800 p-3">
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
</div>
<div class="p-5">
<canvas id="chartjs-1" class="chartjs" width="undefined" height="undefined"></canvas>
<script>
new Chart(document.getElementById("chartjs-1"), {
"type": "bar",
"data": {
"labels": ["January", "February", "March", "April", "May", "June", "July"],
"datasets": [{
"label": "Likes",
"data": [65, 59, 80, 81, 56, 55, 40],
"fill": false,
"backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
"borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
"borderWidth": 1
}]
},
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
});
</script>
</div>
</div>
<!--/Graph Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
<!--Graph Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow">
<div class="border-b border-gray-800 p-3">
<h5 class="font-bold uppercase text-gray-600">Graph</h5>
</div>
<div class="p-5"><canvas id="chartjs-4" class="chartjs" width="undefined" height="undefined"></canvas>
<script>
new Chart(document.getElementById("chartjs-4"), {
"type": "doughnut",
"data": {
"labels": ["P1", "P2", "P3"],
"datasets": [{
"label": "Issues",
"data": [300, 50, 100],
"backgroundColor": ["rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)"]
}]
}
});
</script>
</div>
</div>
<!--/Graph Card-->
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-3">
<!--Template Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow">
<div class="border-b border-gray-800 p-3">
<h5 class="font-bold uppercase text-gray-600">Template</h5>
</div>
<div class="p-5">
</div>
</div>
<!--/Template Card-->
</div>
<div class="w-full p-3">
<!--Table Card-->
<div class="bg-gray-900 border border-gray-800 rounded shadow">
<div class="border-b border-gray-800 p-3">
<h5 class="font-bold uppercase text-gray-600">Table</h5>
</div>
<div class="p-5">
<table class="w-full p-5 text-gray-700">
<thead>
<tr>
<th class="text-left text-gray-600">Name</th>
<th class="text-left text-gray-600">Side</th>
<th class="text-left text-gray-600">Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Obi Wan Kenobi</td>
<td>Light</td>
<td>Jedi</td>
</tr>
<tr>
<td>Greedo</td>
<td>South</td>
<td>Scumbag</td>
</tr>
<tr>
<td>Darth Vader</td>
<td>Dark</td>
<td>Sith</td>
</tr>
</tbody>
</table>
<p class="py-2"><a href="#" class="text-white">See More issues...</a></p>
</div>
</div>
<!--/table Card-->
</div>
</div>
</th:block>

@ -1,47 +0,0 @@
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2021-08-09
Time: 20:49
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
JSP Test 에서 엑셀다운로드 테스트
<script>
var params = {
};
fetch('http://localhost:8080/web/sample/exceldown',
{
method: 'POST',
body: JSON.stringify(params)
})
// .then(function (response) {
// if (response.ok) return response.text();
// })
// .then(function (text) {
// if (text) div.innerText = text;
// else alert('error');
// });
.then(response => response.blob())
.then(blob => {
var url = window.URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = "filename.xlsx";
document.body.appendChild(a); // we need to append the element to the dom -> otherwise it will not work in firefox
a.click();
a.remove(); //afterwards we remove the element again
});
</script>
</body>
</html>

@ -0,0 +1,25 @@
package com.xit;
import org.junit.jupiter.api.*;
import org.junit.jupiter.api.extension.ExtendWith;
import org.junit.runner.RunWith;
import org.springframework.boot.test.autoconfigure.orm.jpa.DataJpaTest;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.ActiveProfiles;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit.jupiter.SpringExtension;
import org.springframework.test.context.junit4.SpringRunner;
@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.DEFINED_PORT)
//@DataJpaTest
@ContextConfiguration(classes = Application.class)
@ExtendWith(SpringExtension.class)
@ActiveProfiles({"dev"})
public class ApplicationTest {
@Test
void load(){
}
}

@ -6,6 +6,7 @@ import com.xit.biz.ctgy.entity.QMinSimsa680;
import lombok.extern.slf4j.Slf4j; import lombok.extern.slf4j.Slf4j;
import org.junit.jupiter.api.*; import org.junit.jupiter.api.*;
import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.autoconfigure.orm.jpa.DataJpaTest;
import org.springframework.boot.test.context.SpringBootTest; import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.ActiveProfiles; import org.springframework.test.context.ActiveProfiles;

Loading…
Cancel
Save