#4 - Feat : Thymeleaf layout 추가, Common css/js 추가

likelion-backendschool · Oct 17, 2022 · a20798a · a20798a
1 parent 018487e
commit a20798a
Show file tree

Hide file tree

Showing 3 changed files with 177 additions and 0 deletions.
diff --git a/1Week_Mission/mutbooks/src/main/resources/static/resource/common/common.css b/1Week_Mission/mutbooks/src/main/resources/static/resource/common/common.css
@@ -0,0 +1,12 @@
+@font-face {
+    font-family: 'GmarketSansMedium';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/GmarketSansMedium.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+html > body {
+    font-family: "GmarketSansMedium";
+    text-underline-position: under;
+    color: #444;
+}
diff --git a/1Week_Mission/mutbooks/src/main/resources/static/resource/common/common.js b/1Week_Mission/mutbooks/src/main/resources/static/resource/common/common.js
@@ -0,0 +1,29 @@
+toastr.options = {
+    closeButton: false,
+    debug: false,
+    newestOnTop: false,
+    progressBar: false,
+    positionClass: "toast-top-right",
+    preventDuplicates: false,
+    onclick: null,
+    showDuration: "300",
+    hideDuration: "1000",
+    timeOut: "5000",
+    extendedTimeOut: "1000",
+    showEasing: "swing",
+    hideEasing: "linear",
+    showMethod: "fadeIn",
+    hideMethod: "fadeOut"
+};
+
+function successModal(msg) {
+    toastr["success"](msg);
+}
+
+function errorModal(msg) {
+    toastr["error"](msg);
+}
+
+function warningModal(msg) {
+    toastr["warning"](msg);
+}
diff --git a/1Week_Mission/mutbooks/src/main/resources/templates/layout/layout.html b/1Week_Mission/mutbooks/src/main/resources/templates/layout/layout.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+    <title layout:title-pattern="$LAYOUT_TITLE | $CONTENT_TITLE" th:text="${@appConfig.siteName}"></title>
+
+    <!-- 제이쿼리 -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
+
+    <!--select2-->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
+
+    <!-- toastr -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
+
+    <!-- jdenticon -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jdenticon.min.js" async
+            integrity="sha384-yBhgDqxM50qJV5JPdayci8wCfooqvhFYbIKhv0hTtLvfeeyJMJCscRfFNKIxt43M"
+            crossorigin="anonymous">
+    </script>
+
+    <!-- 폰트어썸 -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
+
+    <!-- 테일윈드 -->
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+
+<body class="min-h-screen flex flex-col pt-[35px]">
+
+<!-- 데이지 UI -->
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css"/>
+
+<!-- common.css -->
+<link href="/resource/common/common.css" rel="stylesheet" type="text/css"/>
+
+<header class="fixed z-40 top-0 left-0 w-full bg-white border-b-[1px] border-b-[color:#efefef] h-[35px]">
+    <div class="container mx-auto h-full flex items-center px-2">
+        <a href="/static" class="logo flex font-bold mr-auto">
+            <span class="text-[#1E9EFE]">MUT</span>
+            <span class="ml-[2px] hidden sm:block">Books</span>
+        </a>
+
+        <div class="flex gap-4">
+            <a href="/adm/home/main" class="inline-flex" sec:authorize="hasAuthority('ADMIN')">
+                <i class="fa-solid fa-gauge-high"></i>
+                <span class="ml-[2px] hidden sm:block">
+                    관리자 홈
+                </span>
+            </a>
+
+            <a href="/member/login" class="inline-flex" sec:authorize="isAnonymous()">
+                <i class="fa-solid fa-arrow-right-to-bracket"></i>
+                <span class="ml-[2px] hidden sm:block">
+                    로그인
+                </span>
+            </a>
+            <a href="/member/join" class="inline-flex" sec:authorize="isAnonymous()">
+                <i class="fa-solid fa-user-plus"></i>
+                <span class="ml-[2px] hidden sm:block">
+                    회원가입
+                </span>
+            </a>
+            <a href="javascript: document.logoutForm.submit();" class="inline-flex" sec:authorize="isAuthenticated()">
+                <i class="fa-solid fa-arrow-right-from-bracket"></i>
+                <span class="ml-[2px] hidden sm:block">
+                    로그아웃
+                </span>
+            </a>
+            <!--            CSRF 때문에 /member/logout POST로 요청-->
+            <form name="logoutForm" th:action="@{/member/logout}" method="post" hidden></form>
+            <a href="/member/profile" class="inline-flex" sec:authorize="isAuthenticated()">
+                <i class="fa-solid fa-user"></i>
+                <span class="ml-[2px] hidden sm:block">
+                    프로파일
+                </span>
+            </a>
+
+            <a href="/song/create" class="inline-flex" sec:authorize="isAuthenticated()">
+                <i class="fa-solid fa-upload"></i>
+                <span class="ml-[2px] hidden sm:block">
+                    글쓰기
+                </span>
+            </a>
+        </div>
+    </div>
+</header>
+
+<div class="flex-grow flex flex-col">
+    <main layout:fragment="main" class="flex-grow flex flex-col"></main>
+</div>
+
+<footer class="border-t-[1px] border-t-[color:#efefef] py-3 text-[color:#777] text-[14px] mt-5">
+    <div class="container mx-auto flex flex-col gap-1 px-2">
+        <div>
+            <a href="/static">
+                <span>사업자정보확인</span>
+                <span class="inline-block scale-[.7]">▼</span>
+            </a>
+        </div>
+
+        <div class="flex gap-3">
+            <a href="/static">이용약관</a>
+            <a href="/static">개인정보 처리방침</a>
+            <a href="/static">청소년보호정책</a>
+        </div>
+
+        <div>
+            <a href="/static">©MUT Corp.</a>
+        </div>
+    </div>
+</footer>
+
+<script src="/resource/common/common.js"></script>
+
+<script th:inline="javascript">
+    const params = /*[[ ${param} ]]*/ null;
+
+    if (params.msg) {
+        successModal(params.msg);
+    }
+
+    if (params.errorMsg) {
+        errorModal(params.errorMsg);
+    }
+</script>
+
+</body>
+</html>