Merge pull request #49 from hyunolike/feature/deploy/#34-add-temp-page

feat: 페이지 추가 (#34)
hyunolike · Nov 2, 2022 · 9015dd0 · 9015dd0
2 parents cca2f44 + 21ce27e
commit 9015dd0
Show file tree

Hide file tree

Showing 5 changed files with 159 additions and 4 deletions.
diff --git a/backend/src/main/java/com/hyun/musicmark/view/IndexController.java b/backend/src/main/java/com/hyun/musicmark/view/IndexController.java
@@ -78,4 +78,10 @@ public String saveMusicMarkPage(){
     public String memoPage() {
         return "memo/memo";
     }
+
+    @PreAuthorize("isAuthenticated()")
+    @GetMapping("/folder")
+    public String folderPage() {
+        return "memo/folder";
+    }
 }
diff --git a/backend/src/main/resources/static/css/info-dev.css b/backend/src/main/resources/static/css/info-dev.css
@@ -1,9 +1,11 @@
 html { font-size: 16px; color:#fff; text-decoration: none;}
-body {margin:0; background:#1B1B1B; }
+body {margin:0; }
 p, a, h1, h2, h3, h4, h5, h6, ul, li, tr, td, input, select, textarea, button, figure, blockquote { transform: skew(-0.1deg);}
 .sub_page {position: relative; overflow:hidden; background-color:#1B1B1B; height: 90%;display: grid;grid-template-rows: 1fr 3fr;}
+.sub_page_folder {position: relative; overflow:hidden; background-color:#1B1B1B; height: 90%;display: grid;grid-template-rows: 1fr 4fr;}
 .sub_page_memo {position: relative; overflow:hidden; background-color:#1B1B1B; height: 90%;display: grid;grid-template-rows: 1fr 2fr 4fr;}
 .top_area {width:100%; padding:66px 30px 30px 30px; box-sizing:border-box;}
+.top_area_folder {width:100%; padding:40px 30px 30px 30px; box-sizing:border-box;}
 .side_header { width:100%; text-align: center; height:80px; overflow:hidden;}
 .side_header a {text-decoration: none; color:#fff;}
 .side_header_2 { width:100%; text-align: center; height:40px; overflow:hidden;}
@@ -22,7 +24,7 @@ p, a, h1, h2, h3, h4, h5, h6, ul, li, tr, td, input, select, textarea, button, f
 .album_cover {width:70px; height:70px; border-radius:2px; box-shadow: 0px 4px 10px 3px rgba(0, 0, 0, 0.5); margin:auto; overflow:hidden;}
 .album_cover > img {display: block; width:100%; height:100%; object-fit: cover;}
 .bottom_area {background-color:#151515; padding:0 30px;display: grid;grid-template-rows: 1fr 6fr;}
-.bottom_area_2 {background: #1b1b1b; padding:0 30px; height: calc(100% - 246px); overflow: hidden;}
+.bottom_area_2 {background: #1b1b1b; padding:0 30px; height: calc(100% - 246px); overflow: scroll; height: 100%;}
 .bottom_area .tab { overflow: hidden; height:70px; border-bottom:1px solid #333;}
 .bottom_area .tab button { font-size:1.125em; color:#888; background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding-top: 15px; transition: 0.3s; width:50%; height:70px;}  
 .bottom_area .tab button:hover {  font-size:1.125em; font-weight:500; color:#888;}

diff --git a/backend/src/main/resources/templates/footer.html b/backend/src/main/resources/templates/footer.html
@@ -18,8 +18,8 @@
                 >
             </button>
         </div>
-        <div id="memo-page">
-            <button>
+        <div id="folder-page">
+            <button onclick="goFolder()">
                 <img src="../img/footer/library_books.svg" alt=""
                      onmouseover="this.src='../img/footer/library-books-mouseover.svg'"
                      onmouseout="this.src='../img/footer/library_books.svg'"
@@ -47,6 +47,10 @@
         function goSettings(){
             window.location.replace(`http://${PATH.PUBLIC_IP}/my-page`)
         }
+
+        function goFolder(){
+            window.location.replace(`http://${PATH.PUBLIC_IP}/folder`)
+        }
     </script>
 </footer>
 </html>
diff --git a/backend/src/main/resources/templates/memo/folder.html b/backend/src/main/resources/templates/memo/folder.html
@@ -0,0 +1,142 @@
+<!doctype html>
+<html xmlns:th="http://www.thymeleaf.org">
+    <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">
+
+        <meta name="description" content="가사를 쉽게 간직하고 공유, Mute 음악 감상이 쉬워진다! Mute를 통해 쉽게 가사를 기록하고 음악을 감상해보세요 ">
+        <meta name="keywords" content="음악, 가사, 공유, 음악 감상">
+
+        <meta property="og:type" content="website">
+        <!--  TODO: 배포 사이트 주소로 변경 필요  -->
+        <meta property="og:url" content="https://example.com/page.html">
+        <meta property="og:title" content="Mute 음악 감상이 쉬워진다!">
+        <meta property="og:image" content="https://user-images.githubusercontent.com/61215550/199252319-b758849c-32b4-4f93-9885-5d8fd5d99a66.png">
+        <meta property="og:description" content="가사를 쉽게 간직하고 공유, Mute 음악 감상이 쉬워진다! Mute를 통해 쉽게 가사를 기록하고 음악을 감상해보세요">
+        <meta property="og:site_name" content="Mute">
+
+         <!--    <meta http-equiv="Content-Security-Policy" content= "script-src 'unsafe-inline' 'sha256-mc9LH2e3kV1BBF1B3icEq0dR656rD3pdHToRTsWEQTI=';">-->
+        <link th:href="@{/css/main.css}" rel="stylesheet" type="text/css"/>
+        <link th:href="@{/css/header.css}" rel="stylesheet" type="text/css"/>
+        <link th:href="@{/css/footer.css}" rel="stylesheet" type="text/css"/>
+        <link th:href="@{/css/info-dev.css}" rel="stylesheet" type="text/css"/>
+        <title>Mute</title>
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js"></script>
+        <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.1.slim.min.js" integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=" crossorigin="anonymous"></script>
+        <!--  TODO: SWYG Script  -->
+        <script defer src="https://cdn.swygbro.com/public/widget/swyg-widget.js"></script>
+    </head>
+    <body>
+    <div class="main">
+        <div class="sub_page_folder">
+            <div class="top_area_folder">
+                <div class="side_header_2">
+                    <a href="#" class="top_left_ico back">
+                    </a>
+                    <span class="top_center"> 추억 </span>
+                    <a class="top_right_ico"></a>
+                </div>
+                <div class="sub_area">
+                    <select >
+                        <option value="최신순">최신순</option>
+                        <option value="가나다 순">가나다순</option>
+                    </select>                
+                </div>
+            </div>
+            <div class="bottom_area_2">
+                <div class="memo_box red">
+                    <p> 
+                        멀어진 우리 거리만큼</br>
+                        내 삶과 더 가까워져서</br>
+                        뚫어져라 나만 보다</br>
+                        오늘은 마침내 관통했나 봐
+                    </p>
+                    <div class="song_info">
+                        <div class="album_img">
+                            <img src="https://musicmeta-phinf.pstatic.net/album/005/880/5880633.jpg?type=r204Fll&v=202211022301">
+                        </div>
+                        <div class="album_txt">
+                            <p>다정히 내 이름을 부르면</p>
+                            <p>경서예지</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="memo_box blue">
+                    <p> 
+                        끝없이 별빛이 내리던 </br>
+                        밤 기분 좋은 바람이 두 뺨</br>
+                        을 스치고 새벽 바다 한곳을 보는</br>
+                        아름다운 너와 나 그림을 그려갔어
+                    </p>
+                    <div class="song_info">
+                        <div class="album_img">
+                            <img src="https://musicmeta-phinf.pstatic.net/album/002/791/2791715.jpg?type=r204Fll&v=202211022301">
+                        </div>
+                        <div class="album_txt">
+                            <p>그때가 좋았어</p>
+                            <p>케이시</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="memo_box purple">
+                    <p> 
+                        이젠 내가 편하니 작은 설렘조차</br>
+                        욕심이겠지 항상 곁에 있어서 계속 함께</br>
+                        있을 줄 알았나 봐 음 </br>
+                        반복되는 시간에 지쳐가 더 이상
+                    </p>
+                    <div class="song_info">
+                        <div class="album_img">
+                            <img src="https://musicmeta-phinf.pstatic.net/album/008/164/8164159.jpg?type=r204Fll&v=202211022301">
+                        </div>
+                        <div class="album_txt">
+                            <p>늘..(Waiting..)</p>
+                            <p>벤</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="memo_box yellow">
+                    <p> 
+                        우리 얼마 만인가요</br>
+                        참 오랜 시간이 흘렀네요 왜 자꾸</br>
+                        내 맘이 아픈 건지 왜 그리 아파하나요</br>
+                        혹시라도 힘든 일 있었나요
+                    </p>
+                    <div class="song_info">
+                        <div class="album_img">
+                            <img src="https://musicmeta-phinf.pstatic.net/album/003/406/3406157.jpg?type=r204Fll&v=202211022301">
+                        </div>
+                        <div class="album_txt">
+                            <p>늦은 밤 너의 집 앞 골목 길에서</p>
+                            <p>노을</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="memo_box green">
+                    <p> 
+                        오래되었어 그때 너의 웃음</br>
+                        너의 목소리 잊혀진거 같아</br>
+                        시간의 위로 그 말의 의미를 이젠 알아</br>
+                        아픈 니 애기도 적당히 할 수 있어
+                    </p>
+                    <div class="song_info">
+                        <div class="album_img">
+                            <img src="https://musicmeta-phinf.pstatic.net/album/001/692/1692530.jpg?type=r204Fll&v=202211022301">
+                        </div>
+                        <div class="album_txt">
+                            <p>데리러 갈게</p>
+                            <p>스탠딩 에그(Standing Egg)</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <footer th:replace="footer :: footer"></footer>
+    </div>
+    </body>
+    <script type="text/javascript" th:src="@{/js/deploy-config/deploy.js}"></script>
+    <script type="text/javascript" th:src="@{/js/info.js}"></script>
+    <script type="text/javascript" th:src="@{/js/footer.js}"></script>
+</html>
diff --git a/backend/src/main/resources/templates/search/search-result.html b/backend/src/main/resources/templates/search/search-result.html
@@ -57,6 +57,7 @@
     <!--  검색 히스토리 값 전달을 위한 자바스크립트 인라인 코드  -->
     <script type="text/javascript" th:src="@{/js/deploy-config/deploy.js}"></script>
     <script type="text/javascript" th:src="@{/js/search-result.js}"></script>
+    <script type="text/javascript" th:src="@{/js/footer.js}"></script>
     <script th:inline="javascript">
         /*<![CDATA[*/
         var userId = [[${userId}]];