메모리 > 타임라인 이동 및 시간표시 적용

.idea/workspace.xml

@@ -9,12 +9,9 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="4099ff18-820b-4e43-a4c5-6159d58dccc4" name="변경" comment="d-day 체크리스트 사항 수정">
+    <list default="true" id="4099ff18-820b-4e43-a4c5-6159d58dccc4" name="변경" comment="이유식당 홈 기록이미지 노출변경(최초 등록된것으로), 이후에 대표이미지로 변경해야함.">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/main/webapp/WEB-INF/views/ftl/m/include/confirm.ftl" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/webapp/WEB-INF/views/ftl/m/include/confirm.ftl" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/main/webapp/WEB-INF/views/ftl/m/memory/memory_week.ftl" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/webapp/WEB-INF/views/ftl/m/memory/memory_week.ftl" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/main/webapp/WEB-INF/views/ftl/m/login/view_find_id_02.ftl" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/webapp/WEB-INF/views/ftl/m/login/view_find_id_02.ftl" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/main/webapp/WEB-INF/views/ftl/m/login/view_join_member_01_confirm.ftl" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/webapp/WEB-INF/views/ftl/m/login/view_join_member_01_confirm.ftl" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/main/webapp/WEB-INF/views/ftl/m/login/view_pw_reset_phone_02.ftl" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/webapp/WEB-INF/views/ftl/m/login/view_pw_reset_phone_02.ftl" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -224,6 +221,8 @@
       <workItem from="1650243545918" duration="874000" />
       <workItem from="1650278800214" duration="17684000" />
       <workItem from="1650385175659" duration="2438000" />
+      <workItem from="1650430500051" duration="96000" />
+      <workItem from="1650431968073" duration="1154000" />
     </task>
     <task id="LOCAL-00001" summary="최초 커밋">
       <created>1645354476031</created>

src/main/webapp/WEB-INF/views/ftl/m/memory/memory_week.ftl

@@ -60,7 +60,7 @@
         <!-- //날짜 -->
 
         <!-- 그래프 -->
-        <div class="week_chart">
+        <div class="week_chart" onclick="moveTimeLine(event)">
           <div class="gray_box_div">
             <!-- 가로열 -->
             <ul class="gray_box">
@@ -184,15 +184,15 @@
             <div class="time_bar" style="top:-9px;">
               <span></span>
               <div class="time_bar_number">
-                <img src="../../img/time_bar02.png" alt="">
+                <img src="../img/time_bar02.png" alt="">
                 <p>00:00</p>
               </div>
             </div>
 
-            <div class="time_bar02" style="top:57%;">
+<#--            <div class="time_bar02" style="top:57%;">-->
-              <span></span>
+<#--              <span></span>-->
-              <img src="../../img/time_bar.png" alt="">
+<#--              <img src="../../img/time_bar.png" alt="">-->
-            </div>
+<#--            </div>-->
           </div>
 
 
@@ -290,5 +290,53 @@
     </script>
 
 </body>
+
+<script>
+    // main_cont_kinds
+    $(".main_cont_kinds .swiper-slide a").click(function(e) {
+        e.stopPropagation();
+
+        if (!$(this).hasClass("on")) {
+            $(".main_cont_kinds li a.on").removeClass("on");
+            $(this).addClass("on");
+        }
+    });
+
+    var swiper = new Swiper('.swiper-container', {
+        slidesPerView: 5,
+        slidesPerGroup: 1,
+        spaceBetween: 10,
+
+        loopFillGroupWithBlank: true,
+
+        pagination: {
+            loop: false,
+            el: '.swiper-pagination',
+            clickable: true
+        }
+    });
+
+    function moveTimeLine(event) {
+        let y = event.clientY;
+        let num = y - 270;
+        let hour = Math.floor((num + 10) / (43/3));
+        let minute = Math.floor((((num + 10) % (43/3))/(43/3.001)*60)%60);
+        if (num < -9) {
+            num = -9;
+            hour = 0;
+            minute = 00;
+        }
+        if (num > 331) {
+            num = 331;
+            hour = 24;
+            minute = 00;
+        }
+        let coords = "num: " + num + " hour: " + hour + " min: " + minute;
+
+        $(".time_bar").css("top", num + "px");
+        $(".time_bar_number > p").text(hour+":"+(minute<10?"0":"")+minute);
+    }
+</script>
+
 <#include "/m/include/index_bottom.ftl">
 </html>