Update generated resources

test_data/carrot/index.html

@@ -47,31 +47,31 @@
     </div>
     <div id="introduction">
     </div>
+  </div>
 
+  <div id="archive_exit" style="display:none;"></div>
   <div id="archive">
     <button id="archive_button">ARCHIVE
-        <img id="icon_archive_more" src="/src/img/icon_timeline.svg" alt="">
+      <!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
     </button>
     <div id="archive_list">
-        <a href="#">조각#1234</a>
-      </div>
     </div>
   </div>
 
   <div id="contents">
     <div id="frags">
-<div id="0022" class="plain"><div>ㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁA AaAAAAAㅁㅁㅁㅁㅁA AaAAAAAㅁㅁㅁㅁㅁA AaAAAAAㅁㅁㅁㅁㅁAA aAAAAAㅁㅁㅁㅁㅁAA aAAAAAㅁㅁㅁ ㅁㅁAAaAAAAAㅁㅁㅁㅁ ㅁAAaAAAAAㅁㅁㅁ ㅁㅁAAaAAAAA</div><span class="filename">1030.txt</span></div>
+<div class="plain"><a class="anchor" id="0021"></a><div>ㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁA AaAAAAAㅁㅁㅁㅁㅁA AaAAAAAㅁㅁㅁㅁㅁA AaAAAAAㅁㅁㅁㅁㅁAA aAAAAAㅁㅁㅁㅁㅁAA aAAAAAㅁㅁㅁ ㅁㅁAAaAAAAAㅁㅁㅁㅁ ㅁAAaAAAAAㅁㅁㅁ ㅁㅁAAaAAAAA</div><span class="filename">1030.txt</span><span class="fid">#0021</span></div>
-<div id="0009" class="rtf unkown-file"><a href='RTF테스트.rtf'>RTF테스트.rtf</a></div>
+<div class="rtf unkown-file"><a class="anchor" id="0009"></a><a href='RTF테스트.rtf'>RTF테스트.rtf</a><span class="fid">0009</span></div>
-<div id="0010" class="plain"><div><h3>test</h3>
+<div class="plain"><a class="anchor" id="0010"></a><div><h3>test</h3>
 <p>test입니다.</p>
 <p><code>code ///</code></p>
-<p>이런 저런 이야기를 써볼 수 있겠죠</p></div><span class="filename">md쓰기.md</span></div>
+<p>이런 저런 이야기를 써볼 수 있겠죠</p></div><span class="filename">md쓰기.md</span><span class="fid">#0010</span></div>
-<div id="0015" class="x-empty"><a href='test002.txt'>test002.txt</a><span class="filename">test002.txt</span></div>
+<div class="x-empty"><a class="anchor" id="0015"></a><a href='test002.txt'>test002.txt</a><span class="filename">test002.txt</span><span class="fid">#0015</span></div>
-<div id="0011" class="plain"><div>오늘은 11월입니다. 시간은 너무 빨라.
+<div class="plain"><a class="anchor" id="0011"></a><div>오늘은 11월입니다. 시간은 너무 빨라.
 띄어쓰기보다는 
-탭  탭  탭</div><span class="filename">txt쓰기.txt</span></div>
+탭  탭  탭</div><span class="filename">txt쓰기.txt</span><span class="fid">#0011</span></div>
-<div id="0003" class="quicktime"><video controls><source src="꾸물꾸물.mov"></video><span class="filename">꾸물꾸물.mov</span></div>
+<div class="quicktime"><a class="anchor" id="0003"></a><video controls><source src="꾸물꾸물.mov"></video><span class="filename">꾸물꾸물.mov</span><span class="fid">#0003</span></div>
-<div id="0002" class="mp4"><video controls><source src="질주.mp4"></video><span class="filename">질주.mp4</span></div>
+<div class="mp4"><a class="anchor" id="0002"></a><video controls><source src="질주.mp4"></video><span class="filename">질주.mp4</span><span class="fid">#0002</span></div>
 <a href="../">../</a>
 
     </div>
@@ -80,5 +80,6 @@
 <script src="/src/scripts/updateIntroduction.js"></script>
 <script src="/src/scripts/updateArchive.js"></script>
 <script src="/src/scripts/hashEvent.js"></script>
+<script src="/src/scripts/mobileArchiveEvent.js"></script>
 </body>
 </html>

test_data/event_lecture/event_0000/index.html

@@ -47,14 +47,14 @@
     </div>
     <div id="introduction">
     </div>
+  </div>
 
+  <div id="archive_exit" style="display:none;"></div>
   <div id="archive">
     <button id="archive_button">ARCHIVE
-        <img id="icon_archive_more" src="/src/img/icon_timeline.svg" alt="">
+      <!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
     </button>
     <div id="archive_list">
-        <a href="#">조각#1234</a>
-      </div>
     </div>
   </div>
 
@@ -68,5 +68,6 @@
 <script src="/src/scripts/updateIntroduction.js"></script>
 <script src="/src/scripts/updateArchive.js"></script>
 <script src="/src/scripts/hashEvent.js"></script>
+<script src="/src/scripts/mobileArchiveEvent.js"></script>
 </body>
 </html>

test_data/event_lecture/event_0001/index.html

@@ -47,14 +47,14 @@
     </div>
     <div id="introduction">
     </div>
+  </div>
 
+  <div id="archive_exit" style="display:none;"></div>
   <div id="archive">
     <button id="archive_button">ARCHIVE
-        <img id="icon_archive_more" src="/src/img/icon_timeline.svg" alt="">
+      <!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
     </button>
     <div id="archive_list">
-        <a href="#">조각#1234</a>
-      </div>
     </div>
   </div>
 
@@ -68,5 +68,6 @@
 <script src="/src/scripts/updateIntroduction.js"></script>
 <script src="/src/scripts/updateArchive.js"></script>
 <script src="/src/scripts/hashEvent.js"></script>
+<script src="/src/scripts/mobileArchiveEvent.js"></script>
 </body>
 </html>

test_data/event_lecture/index.html

@@ -47,22 +47,56 @@
     </div>
     <div id="introduction">
     </div>
+  </div>
 
+  <div id="archive_exit" style="display:none;"></div>
   <div id="archive">
     <button id="archive_button">ARCHIVE
-        <img id="icon_archive_more" src="/src/img/icon_timeline.svg" alt="">
+      <!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
     </button>
     <div id="archive_list">
-        <a href="#">조각#1234</a>
-      </div>
     </div>
   </div>
 
   <div id="contents">
     <div id="frags">
-<div id="-1" class="json"><a href='event_0000.meta'>event_0000.meta</a><span class="filename">event_0000.meta</span></div>
+<div class="json"><a class="anchor" id="-1"></a><a href='event_0000.meta'>event_0000.meta</a><span class="filename">event_0000.meta</span><span class="fid">#-1</span></div>
-<div id="-1" class="json"><a href='event_0001.meta'>event_0001.meta</a><span class="filename">event_0001.meta</span></div>
+<div class="json"><a class="anchor" id="-1"></a><a href='event_0001.meta'>event_0001.meta</a><span class="filename">event_0001.meta</span><span class="fid">#-1</span></div>
 <a href="../">../</a>
+<div id="0000">
+<div class="jpeg"><a class="anchor" id="11573c60-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./event_0000/124157237_121248643124584_872058020963845448_n.jpg"><figcaption>124157237_121248643124584_872058020963845448_n.jpg</figcaption></figure><span class="fid">#11573c60-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="jpeg"><a class="anchor" id="115744e4-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./event_0000/124469821_121248626457919_479957910997498417_n.jpg"><figcaption>124469821_121248626457919_479957910997498417_n.jpg</figcaption></figure><span class="fid">#115744e4-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="jpeg"><a class="anchor" id="11574bec-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./event_0000/124476076_121248659791249_2342598949363915450_n.jpg"><figcaption>124476076_121248659791249_2342598949363915450_n.jpg</figcaption></figure><span class="fid">#11574bec-3416-11eb-b6e8-f45c89b2a84f</span></div>
+</div>
+<div id="0001">
+<div class="plain"><a class="anchor" id="115885ca-3416-11eb-b6e8-f45c89b2a84f"></a><div>이벤트 0001 에 대한 설명문
+이벤트 0001 에 대한 설명문
+이벤트 0001 에 대한 설명문
+이벤트 0001 에 대한 설명문
+이벤트 0001 에 대한 설명문
+이벤트 0001 에 대한 설명문
+이벤트 0001 에 대한 설명문
+이벤트 0001 에 대한 설명문
+이벤트 0001 에 대한 설명문
+이벤트 0001 에 대한 설명문
+이벤트 0001 에 대한 설명문
+이벤트 0001 에 대한 설명문
+이벤트 0001 에 대한 설명문
+이벤트 0001 에 대한 설명문
+이벤트 0001 에 대한 설명문
+이벤트 0001 에 대한 설명문
+이벤트 0001 에 대한 설명문
+이벤트 0001 에 대한 설명문
+이벤트 0001 에 대한 설명문
+이벤트 0001 에 대한 설명문
+이벤트 0001 에 대한 설명문
+이벤트 0001 에 대한 설명문
+이벤트 0001 에 대한 설명문
+이벤트 0001 에 대한 설명문
+
+
+</div><span class="filename">event_0001.txt</span><span class="fid">#115885ca-3416-11eb-b6e8-f45c89b2a84f</span></div>
+</div>
 
     </div>
   </div>
@@ -70,5 +104,6 @@
 <script src="/src/scripts/updateIntroduction.js"></script>
 <script src="/src/scripts/updateArchive.js"></script>
 <script src="/src/scripts/hashEvent.js"></script>
+<script src="/src/scripts/mobileArchiveEvent.js"></script>
 </body>
 </html>

test_data/event_workshop/index.html

@@ -47,20 +47,20 @@
     </div>
     <div id="introduction">
     </div>
+  </div>
 
+  <div id="archive_exit" style="display:none;"></div>
   <div id="archive">
     <button id="archive_button">ARCHIVE
-        <img id="icon_archive_more" src="/src/img/icon_timeline.svg" alt="">
+      <!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
     </button>
     <div id="archive_list">
-        <a href="#">조각#1234</a>
-      </div>
     </div>
   </div>
 
   <div id="contents">
     <div id="frags">
-<div id="-1" class="json"><a href='event_0008.meta'>event_0008.meta</a><span class="filename">event_0008.meta</span></div>
+<div class="json"><a class="anchor" id="-1"></a><a href='event_0008.meta'>event_0008.meta</a><span class="filename">event_0008.meta</span><span class="fid">#-1</span></div>
 <a href="../">../</a>
 
     </div>
@@ -69,5 +69,6 @@
 <script src="/src/scripts/updateIntroduction.js"></script>
 <script src="/src/scripts/updateArchive.js"></script>
 <script src="/src/scripts/hashEvent.js"></script>
+<script src="/src/scripts/mobileArchiveEvent.js"></script>
 </body>
 </html>

test_data/fig/20201020/index.html

@@ -47,14 +47,14 @@
     </div>
     <div id="introduction">
     </div>
+  </div>
 
+  <div id="archive_exit" style="display:none;"></div>
   <div id="archive">
     <button id="archive_button">ARCHIVE
-        <img id="icon_archive_more" src="/src/img/icon_timeline.svg" alt="">
+      <!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
     </button>
     <div id="archive_list">
-        <a href="#">조각#1234</a>
-      </div>
     </div>
   </div>
 
@@ -68,5 +68,6 @@
 <script src="/src/scripts/updateIntroduction.js"></script>
 <script src="/src/scripts/updateArchive.js"></script>
 <script src="/src/scripts/hashEvent.js"></script>
+<script src="/src/scripts/mobileArchiveEvent.js"></script>
 </body>
 </html>

test_data/fig/20201022/index.html

@@ -47,14 +47,14 @@
     </div>
     <div id="introduction">
     </div>
+  </div>
 
+  <div id="archive_exit" style="display:none;"></div>
   <div id="archive">
     <button id="archive_button">ARCHIVE
-        <img id="icon_archive_more" src="/src/img/icon_timeline.svg" alt="">
+      <!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
     </button>
     <div id="archive_list">
-        <a href="#">조각#1234</a>
-      </div>
     </div>
   </div>
 
@@ -68,5 +68,6 @@
 <script src="/src/scripts/updateIntroduction.js"></script>
 <script src="/src/scripts/updateArchive.js"></script>
 <script src="/src/scripts/hashEvent.js"></script>
+<script src="/src/scripts/mobileArchiveEvent.js"></script>
 </body>
 </html>

test_data/fig/20201029/index.html

@@ -47,14 +47,14 @@
     </div>
     <div id="introduction">
     </div>
+  </div>
 
+  <div id="archive_exit" style="display:none;"></div>
   <div id="archive">
     <button id="archive_button">ARCHIVE
-        <img id="icon_archive_more" src="/src/img/icon_timeline.svg" alt="">
+      <!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
     </button>
     <div id="archive_list">
-        <a href="#">조각#1234</a>
-      </div>
     </div>
   </div>
 
@@ -68,5 +68,6 @@
 <script src="/src/scripts/updateIntroduction.js"></script>
 <script src="/src/scripts/updateArchive.js"></script>
 <script src="/src/scripts/hashEvent.js"></script>
+<script src="/src/scripts/mobileArchiveEvent.js"></script>
 </body>
 </html>

test_data/fig/index.html

@@ -47,24 +47,40 @@
     </div>
     <div id="introduction">
     </div>
+  </div>
 
+  <div id="archive_exit" style="display:none;"></div>
   <div id="archive">
     <button id="archive_button">ARCHIVE
-        <img id="icon_archive_more" src="/src/img/icon_timeline.svg" alt="">
+      <!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
     </button>
     <div id="archive_list">
-        <a href="#">조각#1234</a>
-      </div>
     </div>
   </div>
 
   <div id="contents">
     <div id="frags">
-<div id="-1" class="octet-stream"><a href='.DS_Store'>.DS_Store</a><span class="filename">.DS_Store</span></div>
+<div class="octet-stream"><a class="anchor" id="-1"></a><a href='.DS_Store'>.DS_Store</a><span class="filename">.DS_Store</span><span class="fid">#-1</span></div>
-<div id="0017" class="x-empty"><a href='fig002.txt'>fig002.txt</a><span class="filename">fig002.txt</span></div>
+<div class="x-empty"><a class="anchor" id="0017"></a><a href='fig002.txt'>fig002.txt</a><span class="filename">fig002.txt</span><span class="fid">#0017</span></div>
-<div id="0018" class="x-empty"><a href='test.txt'>test.txt</a><span class="filename">test.txt</span></div>
+<div class="x-empty"><a class="anchor" id="0018"></a><a href='test.txt'>test.txt</a><span class="filename">test.txt</span><span class="fid">#0018</span></div>
-<div id="0019" class="x-empty"><a href='test001.txt'>test001.txt</a><span class="filename">test001.txt</span></div>
+<div class="x-empty"><a class="anchor" id="0019"></a><a href='test001.txt'>test001.txt</a><span class="filename">test001.txt</span><span class="fid">#0019</span></div>
 <a href="../">../</a>
+<div id="0016">
+<div class="png"><a class="anchor" id="115a3ce4-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./20201020/파도가_치네요.png"><figcaption>파도가_치네요.png</figcaption></figure><span class="fid">#115a3ce4-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="plain"><a class="anchor" id="115b8946-3416-11eb-b6e8-f45c89b2a84f"></a><div>언론·출판에 대한 허가나 검열과 집회·결사에 대한 허가는 인정되지 아니한다. 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다.
+대통령은 내우·외환·천재·지변 또는 중대한 재정·경제상의 위기에 있어서 국가의 안전보장 또는 공공의 안녕질서를 유지하기 위하여 긴급한 조치가 필요하고 국회의 집회를 기다릴 여유가 없을 때에 한하여 최소한으로 필요한 재정·경제상의 처분을 하거나 이에 관하여 법률의 효력을 가지는 명령을 발할 수 있다.
+새로운 글 업데이트</div><span class="filename">일기.txt</span><span class="fid">#115b8946-3416-11eb-b6e8-f45c89b2a84f</span></div>
+</div>
+<div id="0012">
+<div class="png"><a class="anchor" id="115bbdee-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./20201022/아름다운별.png"><figcaption>아름다운별.png</figcaption></figure><span class="fid">#115bbdee-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="plain"><a class="anchor" id="115cd7b0-3416-11eb-b6e8-f45c89b2a84f"></a><div>착목한는 생의 꽃 많이 운다. 천자만홍이 넣는 수 아니다. 위하여서, 기쁘며, 얼음 할지니, 칼이다. 자신과 바로 장식하는 청춘의 것이다. 청춘의 방지하는 이상이 심장은 공자는 거친 미묘한 있는가? 심장은 같지 옷을 피는 끓는 시들어 날카로우나 뿐이다. 얼음이 찬미를 그러므로 칼이다. 찬미를 옷을 이상을 것이다. 가치를 같은 그들은 속에서 위하여 인간의 생명을 거친 것이다.
+설레는 얼음 이것을 그들의 속에 많이 눈에 트고, 설산에서 끓는다. 얼마나 보이는 것은 때문이다. 무엇이 창공에 가치를 커다란 오아이스도 뭇 황금시대다. 유소년에게서 못할 가진 안고, 무엇이 수 용감하고 이상의 있는가? 일월과 있는 청춘이 것이다. 싶이 있는 유소년에게서 못하다 위하여 물방아 것이다. 피고 능히 우리의 사람은 아니다. 오직 커다란 밥을 갑 안고, 그것은 못하다 청춘은 아니더면, 것이다. 무엇을 그들은 없으면, 이것이다. 살 위하여 그들의 청춘에서만 풍부하게 말이다.
+크고 돋고, 꽃이 위하여 이상의 봄바람이다. 미인을 속에 싶이 기관과 피는 아름다우냐? 인류의 용기가 구하지 현저하게 것이 가는 가치를 그리하였는가? 같은 곧 속잎나고, 이것은 피는 얼마나 눈에 꽃이 이상의 약동하다. 미묘한 열락의 새 노년에게서 소리다.이것은 그러므로 그림자는 뜨거운지라, 하는 봄바람이다. 대한 수 인간의 노래하며 이 맺어, 청춘 운다. 밥을 우리의 그들의 것은 쓸쓸하랴? 인도하겠다는 풀밭에 무엇을 우리의 수 되는 풍부하게 것이다. 가치를 풀이 밥을 듣는다. 오아이스도 관현악이며, 이성은 타오르고 무엇을 청춘이 속에서 되는 봄바람이다. 위하여, 끝까지 소담스러운 청춘 할지니, 돋고, 약동하다.</div><span class="filename">일기.txt</span><span class="fid">#115cd7b0-3416-11eb-b6e8-f45c89b2a84f</span></div>
+</div>
+<div id="0013">
+<div class="png"><a class="anchor" id="115ce4da-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./20201029/상자를 열어요.png"><figcaption>상자를 열어요.png</figcaption></figure><span class="fid">#115ce4da-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="plain"><a class="anchor" id="115e0662-3416-11eb-b6e8-f45c89b2a84f"></a><div>속의 이름과, 않은 애기 프랑시스 보고, 어머니, 듯합니다. 어머니, 아무 별들을 노루, 이런 그리고 있습니다. 위에 라이너 시와 너무나 별을 가슴속에 덮어 아침이 언덕 듯합니다. 아직 경, 파란 별 때 잠, 하나에 아름다운 슬퍼하는 봅니다. 까닭이요, 풀이 하나에 위에 옥 별빛이 아스라히 있습니다. 청춘이 내일 풀이 남은 오는 없이 지나고 둘 못 까닭입니다. 같이 슬퍼하는 어머니, 별이 있습니다. 하나에 별 헤는 보고, 가슴속에 너무나 이네들은 나의 애기 까닭입니다. 멀듯이, 했던 아침이 까닭입니다.</div><span class="filename">그냥.txt</span><span class="fid">#115e0662-3416-11eb-b6e8-f45c89b2a84f</span></div>
+</div>
 
     </div>
   </div>
@@ -72,5 +88,6 @@
 <script src="/src/scripts/updateIntroduction.js"></script>
 <script src="/src/scripts/updateArchive.js"></script>
 <script src="/src/scripts/hashEvent.js"></script>
+<script src="/src/scripts/mobileArchiveEvent.js"></script>
 </body>
 </html>

test_data/grape/index.html

@@ -47,26 +47,26 @@
     </div>
     <div id="introduction">
     </div>
+  </div>
 
+  <div id="archive_exit" style="display:none;"></div>
   <div id="archive">
     <button id="archive_button">ARCHIVE
-        <img id="icon_archive_more" src="/src/img/icon_timeline.svg" alt="">
+      <!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
     </button>
     <div id="archive_list">
-        <a href="#">조각#1234</a>
-      </div>
     </div>
   </div>
 
   <div id="contents">
     <div id="frags">
-<div id="-1" class="octet-stream"><a href='.DS_Store'>.DS_Store</a><span class="filename">.DS_Store</span></div>
+<div class="octet-stream"><a class="anchor" id="-1"></a><a href='.DS_Store'>.DS_Store</a><span class="filename">.DS_Store</span><span class="fid">#-1</span></div>
-<div id="0007" class="png"><figure><img class="image" src="IMG_1334.png"><figcaption>IMG_1334.png</figcaption></figure></div>
+<div class="png"><a class="anchor" id="0007"></a><figure><img class="image" src="IMG_1334.png"><figcaption>IMG_1334.png</figcaption></figure><span class="fid">#0007</span></div>
-<div id="0005" class="jpeg"><figure><img class="image" src="IMG_1340.jpg"><figcaption>IMG_1340.jpg</figcaption></figure></div>
+<div class="jpeg"><a class="anchor" id="0005"></a><figure><img class="image" src="IMG_1340.jpg"><figcaption>IMG_1340.jpg</figcaption></figure><span class="fid">#0005</span></div>
-<div id="0006" class="png"><figure><img class="image" src="IMG_1690.png"><figcaption>IMG_1690.png</figcaption></figure></div>
+<div class="png"><a class="anchor" id="0006"></a><figure><img class="image" src="IMG_1690.png"><figcaption>IMG_1690.png</figcaption></figure><span class="fid">#0006</span></div>
-<div id="0004" class="png"><figure><img class="image" src="IMG_1693.png"><figcaption>IMG_1693.png</figcaption></figure></div>
+<div class="png"><a class="anchor" id="0004"></a><figure><img class="image" src="IMG_1693.png"><figcaption>IMG_1693.png</figcaption></figure><span class="fid">#0004</span></div>
-<div id="0020" class="jpeg"><figure><img class="image" src="fbdbdbf54d766dd86e5964de01ddc16b.jpg"><figcaption>fbdbdbf54d766dd86e5964de01ddc16b.jpg</figcaption></figure></div>
+<div class="jpeg"><a class="anchor" id="0020"></a><figure><img class="image" src="fbdbdbf54d766dd86e5964de01ddc16b.jpg"><figcaption>fbdbdbf54d766dd86e5964de01ddc16b.jpg</figcaption></figure><span class="fid">#0020</span></div>
-<div id="0008" class="pdf"><object data="sample.pdf" class="pdf" type="application/pdf"><embed src="sample.pdf" type="application/pdf" /></object><span class="filename">sample.pdf</span></div>
+<div class="pdf"><a class="anchor" id="0008"></a><object data="sample.pdf" class="pdf" type="application/pdf"><embed src="sample.pdf" type="application/pdf" /></object><span class="filename">sample.pdf</span><span class="fid">#0008</span></div>
 <a href="../">../</a>
 
     </div>
@@ -75,5 +75,6 @@
 <script src="/src/scripts/updateIntroduction.js"></script>
 <script src="/src/scripts/updateArchive.js"></script>
 <script src="/src/scripts/hashEvent.js"></script>
+<script src="/src/scripts/mobileArchiveEvent.js"></script>
 </body>
 </html>

test_data/index.json

@@ -191,19 +191,19 @@
     {
         "__Fragment__": {
             "index": 21,
-            "update": 1606064871.4038377,
-            "directory": "./test_data/",
-            "artist": "",
-            "file": "fragment.html"
-        }
-    },
-    {
-        "__Fragment__": {
-            "index": 22,
             "update": 1606474058.2468154,
             "directory": "./test_data/carrot",
             "artist": "carrot",
             "file": "1030.txt"
         }
+    },
+    {
+        "__Fragment__": {
+            "index": 22,
+            "update": 1606499064.7076151,
+            "directory": "./test_data/",
+            "artist": "",
+            "file": "fragment.html"
+        }
     }
 ]

test_data/src/ai/index.html

@@ -47,14 +47,14 @@
     </div>
     <div id="introduction">
     </div>
+  </div>
 
+  <div id="archive_exit" style="display:none;"></div>
   <div id="archive">
     <button id="archive_button">ARCHIVE
-        <img id="icon_archive_more" src="/src/img/icon_timeline.svg" alt="">
+      <!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
     </button>
     <div id="archive_list">
-        <a href="#">조각#1234</a>
-      </div>
     </div>
   </div>
 
@@ -68,5 +68,6 @@
 <script src="/src/scripts/updateIntroduction.js"></script>
 <script src="/src/scripts/updateArchive.js"></script>
 <script src="/src/scripts/hashEvent.js"></script>
+<script src="/src/scripts/mobileArchiveEvent.js"></script>
 </body>
 </html>

test_data/src/img/index.html

@@ -47,14 +47,14 @@
     </div>
     <div id="introduction">
     </div>
+  </div>
 
+  <div id="archive_exit" style="display:none;"></div>
   <div id="archive">
     <button id="archive_button">ARCHIVE
-        <img id="icon_archive_more" src="/src/img/icon_timeline.svg" alt="">
+      <!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
     </button>
     <div id="archive_list">
-        <a href="#">조각#1234</a>
-      </div>
     </div>
   </div>
 
@@ -68,5 +68,6 @@
 <script src="/src/scripts/updateIntroduction.js"></script>
 <script src="/src/scripts/updateArchive.js"></script>
 <script src="/src/scripts/hashEvent.js"></script>
+<script src="/src/scripts/mobileArchiveEvent.js"></script>
 </body>
 </html>

test_data/src/index.html

@@ -47,23 +47,23 @@
     </div>
     <div id="introduction">
     </div>
+  </div>
 
+  <div id="archive_exit" style="display:none;"></div>
   <div id="archive">
     <button id="archive_button">ARCHIVE
-        <img id="icon_archive_more" src="/src/img/icon_timeline.svg" alt="">
+      <!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
     </button>
     <div id="archive_list">
-        <a href="#">조각#1234</a>
-      </div>
     </div>
   </div>
 
   <div id="contents">
     <div id="frags">
-<div id="-1" class="octet-stream"><a href='.DS_Store'>.DS_Store</a><span class="filename">.DS_Store</span></div>
+<div class="octet-stream"><a class="anchor" id="-1"></a><a href='.DS_Store'>.DS_Store</a><span class="filename">.DS_Store</span><span class="fid">#-1</span></div>
-<div id="-1" class="json"><a href='introduction.json'>introduction.json</a><span class="filename">introduction.json</span></div>
+<div class="json"><a class="anchor" id="-1"></a><a href='introduction.json'>introduction.json</a><span class="filename">introduction.json</span><span class="fid">#-1</span></div>
-<div id="-1" class="svg+xml"><figure><img class="image" src="original.svg"><figcaption>original.svg</figcaption></figure></div>
+<div class="svg+xml"><a class="anchor" id="-1"></a><figure><img class="image" src="original.svg"><figcaption>original.svg</figcaption></figure><span class="fid">#-1</span></div>
-<div id="-1" class="html"><section id="original_collider.svg">
+<div class="html"><a class="anchor" id="-1"></a><section id="original_collider.svg">
         <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 734">
             <defs>
                 <style>
@@ -213,9 +213,6 @@
                     }
                 </style>
             </defs>
-            <!--  1. 업데이트할 때 순서로 <text>를 찾기 때문에, <g> 안에 <text>가 가장 마지막 요소여야 합니다. 
-                
-            -->
             <g id="seungwookYang">
                 <path class="shape" d="M15 136 15 293 227 286 227 140 196 121 60 115 15 136" />
                 <path
@@ -226,12 +223,11 @@
                     <tspan x="100.12" y="0">ang</tspan>
                 </text></g>
             <g id="megumi">
-                <path class="shape" d="M317 81 389 136 389 211 256 213 226 155 231 86 317 81" />
+                <path class="shape" d="M317 81 389 136 389 211 256 213 226 155 231 86 317 81" /><text class="cls-2"
+                    transform="translate(286.53 178.25)">Megumi</text>
                 <path
                     d="M333.08,183.53c1.45.61,2.69,1.2,3.95,1.64a6.58,6.58,0,0,0,2.11.31c3.23,0,6.46.05,9.69,0a20.91,20.91,0,0,0,3.41-.49c1.77-.33,2.16.19,2.26,2.77.14,3.92.33,7.84.52,11.76q.32,6.63.67,13.25c0,.73.09,1.47.19,2.19a82.12,82.12,0,0,1,.81,11.23c0,2.6.29,5.2.46,8a8.58,8.58,0,0,0,1.54.19c5.79-.31,11.59-.52,17.38-1a164.44,164.44,0,0,1,26.07-.25c4.43.33,8.86.53,13.29.56,14.66.1,29.33,0,44,.17,2.95,0,5.89.59,8.84.74,3.12.16,6.24.2,9.36.14,1.57,0,2.18-1,2.21-3.36.1-10.26.2-20.52.19-30.77,0-2.69-.37-5.38-.6-8.07-.28-3.33-.69-6.65-.84-10s0-6.54,0-10c-1.16-.56-2.47-.27-3.74-.21-3.66.17-7.32.65-11,.7-9.9.13-19.8.09-29.71.15a12.31,12.31,0,0,0-3.41.42c-2.73.8-5.46.34-8.19.33-1.39,0-2.39-1.27-2.81-3.22s-.67-4-.9-6q-1.31-11.76-2.54-23.54c-.31-3-.52-6-.81-9s-.6-5.82-.94-8.72a3,3,0,0,1,.5-2.62c.6-.6,1.14-.3,1.67.24s.83.81,1.21,1.27a2.24,2.24,0,0,1,.29,2.58,4.59,4.59,0,0,0-.34,3q.91,9.36,1.85,18.72,1,9.84,2,19.7c0,.32,0,.65.08,1,.29,2.33.45,2.4,2,2.59,2.79.34,5.54-.24,8.31-.55a96.36,96.36,0,0,1,10.34-.07c6.78,0,13.57,0,20.35-.13,5.2-.12,10.38-.53,15.57-.8a7.66,7.66,0,0,1,.83,0c2.08,0,2.52.71,2.26,3.89a91.45,91.45,0,0,0,.12,15.7c.33,3.74.72,7.46,1.07,11.2.07.72.1,1.47.1,2.2l-.18,28.32c0,.82-.08,1.63-.1,2.45-.11,4.21-2,6.38-4.45,6.48-3.82.15-7.65-.13-11.47-.3-3.56-.16-7.11-.57-10.66-.59-15.32-.1-30.64-.06-46-.17-3.44,0-6.88-.55-10.32-.72-3-.14-5.91,0-8.87-.16-6.9-.27-13.76.83-20.64,1.28-4.15.28-8.31.39-12.47.56a3.45,3.45,0,0,1-1.14-.16c-1.25-.38-1.72-1-1.84-2.9-.26-3.92-.43-7.84-.65-11.76-.11-1.8-.24-3.59-.37-5.38-.28-3.74-.58-7.48-.84-11.23-.21-2.93-.39-5.87-.56-8.81s-.31-5.71-.48-8.73a8,8,0,0,0-1-.13c-4,0-8,.12-12,0a18.36,18.36,0,0,1-3.52-.94,18.18,18.18,0,0,0-2.74-.44c-1.68-.12-2-.51-2-3.1,0-10.09-.14-20.18.38-30.26.18-3.51.15-7.09.6-10.52.52-3.92,1.37-7.75,2.23-11.55a6,6,0,0,1,4.31-4.72,29.81,29.81,0,0,1,5-.9c6.47-1,12.94-2,19.42-2.86,4.13-.53,8.29-.66,12.44-1,4.31-.41,8.61-.94,12.92-1.37,2.56-.25,5.13-.51,7.7-.57,4.43-.1,8.86-.08,13.3,0a9,9,0,0,1,2.9.63,1.92,1.92,0,0,1,1.24,2.37c-.16,1-.76,1.68-1.68,1.37-3-1-6-.46-9-.53a130.64,130.64,0,0,0-23.08,1.77,55.54,55.54,0,0,1-6.56.5,168.42,168.42,0,0,0-20.92,2.43c-4,.63-7.94,1.09-11.91,1.69a7.1,7.1,0,0,0-2.21.83c-.93.48-1.43,1.52-1.78,3a85.49,85.49,0,0,0-2.38,20.71c0,8.45-.21,16.9-.33,25.34C333.07,182,333.08,182.87,333.08,183.53Z"
                     transform="translate(-97.5 -31)" />
-                <text class="cls-2"
-                    transform="translate(286.53 178.25)">Megumi</text>
             </g>
             <g id="graceKim">
                 <path class="shape" d="M5 22 236 0 234 89 141 110 53 115 0 99 5 22" />
@@ -240,12 +236,11 @@
                     transform="translate(-97.5 -31)" /><text class="cls-2" transform="translate(63.8 65.34)">Grace Kim</text>
             </g>
             <g id="mooming">
-                <path class="shape" d="M860 306 933 295 1079 315 1080 397 989 405 856 394 860 306" />
+                <path class="shape" d="M860 306 933 295 1079 315 1080 397 989 405 856 394 860 306" /><text class="cls-2"
+                    transform="translate(933.15 356.7)">mooming</text>
                 <path
                     d="M972.71,346.94c.38,1.94,1,3.14,2.41,3.14.94,0,1.42.8,1.41,1.87a1.73,1.73,0,0,1-1.44,1.91c-1.6.18-2.88-.73-3.85-2.63-.33-.65-.6-1.37-1-2.17a12.84,12.84,0,0,1-1.39.35c-1.72.27-2.22-.39-2.33-3.23l-2,.48-.65,12a6.48,6.48,0,0,1,1,.81,2.21,2.21,0,0,1,.07,2.91A3.86,3.86,0,0,0,964,365q-.9,10-1.83,20c-.51,5.44-1,10.87-1.51,16.32-.36,4.22-.63,8.47-.91,12.71-.06.88,0,1.78,0,3,1.33,0,2.57,0,3.8,0,3-.13,5.9-.25,8.85-.46a29.12,29.12,0,0,1,9,1.12,56.19,56.19,0,0,0,13.7,1.84c8.54,0,17.08-.19,25.61,0,4.58.11,9.16.83,13.73,1.36,5.34.62,10.65,1.72,16,1.65,10.5-.14,21,0,31.52-.07a4.51,4.51,0,0,1,4.31,2.29c1.29,2,3.1,2,4.75,2.09,6.61.28,13.23.36,19.85.48a13.56,13.56,0,0,0,1.94-.38c4.73-.7,9.46-1.36,14.19-2.06,3.8-.57,7.61-.8,11.4-1.74,2.84-.7,5.79-.33,8.68-.48,1.22-.07,2.53.39,3.53-1.25.16-.26.61-.21.92-.18,1,.09,2.06.22,3.09.37,1.35.21,2.7.48,4.06.67a18,18,0,0,0,3.1.27c2.4-.09,4.8-.23,7.19-.53.66-.08,1.3-.76,1.91-1.25a2.66,2.66,0,0,0,.78-2.24c0-14.2.19-28.39.11-42.59,0-4.9-.61-9.79-1-14.68-.16-2.2-.36-4.38-.55-6.68a12.8,12.8,0,0,0-3.45.05,43.26,43.26,0,0,1-10.28,1.23c-5.83.29-11.56-1-17.29-2.2-4.7-1-9.39-2.12-14.11-3a52.68,52.68,0,0,0-7.2-.58c-5.36-.25-10.73-.29-16.08-.69-6.61-.5-13.21-1.08-19.8-2-3.52-.49-7-1.83-10.48-2.69-3.06-.75-6.14-1.41-9.23-2-4-.78-8-1.49-12-2.17a22.58,22.58,0,0,0-4.08-.41c-5.69.1-11.38.38-17.07.39a17.61,17.61,0,0,1-5.51-1,9.25,9.25,0,0,1-2.9-2.16,2.53,2.53,0,0,1-.68-2.32,2.05,2.05,0,0,1,1.34-1.84,20.27,20.27,0,0,1,10.2-1.84,1.68,1.68,0,0,1,1.76,1.88c0,1.31-.55,1.95-1.86,2s-2.74,0-4.1.05a5.56,5.56,0,0,0-2.15.71c3.23.88,6.45.72,9.67.62,4.59-.15,9.19-.38,13.78-.23,2.39.07,4.76.95,7.14,1.38,2.82.51,5.64,1.09,8.48,1.34,3.57.33,7,1.77,10.48,2.68a79.38,79.38,0,0,0,11.68,2.32c8.24.84,16.49,1.32,24.74,1.95.71.05,1.42,0,2.13.08,5,.35,10,.52,14.9,1.12,3.09.37,6.15,1.45,9.23,2.1,6.27,1.33,12.53,3,18.91,2.56,3.32-.21,6.66-.07,10-1.14a14.63,14.63,0,0,1,4.58-.3c1.32,0,1.75.65,1.91,2.61.24,3,.39,6,.7,9a238.11,238.11,0,0,1,.94,25.78q-.1,15.87-.17,31.75a5.21,5.21,0,0,1-1.25,3.7,7.52,7.52,0,0,1-5.75,3.05c-2,.05-4,.2-6.07.15a25.85,25.85,0,0,1-3.58-.56c-1.24-.21-2.46-.61-3.65.53-.37.35-1,.24-1.44.24-2.24,0-4.49.1-6.73,0a40.53,40.53,0,0,0-11.26,1.18,56.87,56.87,0,0,1-6.37.81c-4.08.5-8.21.61-12.25,1.57-7.08,1.68-14.19.74-21.28.89-1.91,0-3.81-.45-5.72-.57a6.11,6.11,0,0,1-4.44-2.81,3.17,3.17,0,0,0-2.84-1.41c-9.63,0-19.26-.07-28.89.05a88.9,88.9,0,0,1-17.34-1.49,115.68,115.68,0,0,0-23.41-1.58c-6.18.12-12.37,0-18.55,0-5.49,0-10.88-1.36-16.27-2.67a5.73,5.73,0,0,0-1.63-.23c-5.19.15-10.38.33-15.58.5a4,4,0,0,0-.49,0c-2.17.45-2.41.09-2.46-3.27a187.6,187.6,0,0,1,1.2-19.58c.65-7.14,1.25-14.3,1.9-21.45.34-3.82.73-7.63,1.14-11.43a4.8,4.8,0,0,0-.22-2.81,3.47,3.47,0,0,1-.13-1.4c.28-4.89.58-9.78.87-14.67,0-.57,0-1.15.09-1.71.16-1.28.66-1.93,1.57-2.08,3.74-.65,7.46-1.51,11.21-2,2.77-.37,5.57-.31,8.36-.42,3.5-.14,7-.1,10.49-.44,3.76-.38,7.5-1.11,11.25-1.68a12.38,12.38,0,0,1,1.3-.25c3.66-.16,7.32-.31,11-.42a5.51,5.51,0,0,1,1.79.26,1.88,1.88,0,0,1,1.43,2.19c-.06,1.16-.58,1.78-1.64,1.81s-2.41.06-3.61,0a34.37,34.37,0,0,0-11.88,1.72,16.12,16.12,0,0,1-4.41.56c-5.63.16-11.27.22-16.9.35A23.72,23.72,0,0,0,972.71,346.94Z"
                     transform="translate(-97.5 -31)" />
-                <text class="cls-2"
-                    transform="translate(933.15 356.7)">mooming</text>
             </g>
             <g id="hongSeoYeon">
                 <path class="shape"
@@ -412,8 +407,73 @@
                     d="M475.86,684.78a24.08,24.08,0,0,1-.64,4.35c-1.09,4.1-2.64,8.86-5.82,13a14.63,14.63,0,0,1-3.84,3.56c-.74.46-1.48.94-2.22,1.41-1.46.94-3,1.92-4.52,2.81a25.32,25.32,0,0,1-9.45,2.9c-3.25.44-6.56.81-9.76,1.17l-.76.09c-2.41.27-4.81.51-7,.72-3.53.33-7.27.69-11,1-1.1.1-2.19.16-3.29.23l-2.77.19c-5.21.42-10.64.62-16.5.62l-3.83,0h-2.88c-2.32,0-4.71,0-7.13,0a36.17,36.17,0,0,1-12.65-2.66,19.61,19.61,0,0,1-6.64-4.43c-3.19-3.11-6.15-5.82-9.06-8.29-3.87-3.28-5.68-7.93-5.26-13.46.49-6.33,1.89-11.3,4.39-15.67.5-.86.94-1.75,1.31-2.51a13.35,13.35,0,0,1,4.37-5.09,51.22,51.22,0,0,1,16.73-8c2.78-.74,5.54-1.51,8.31-2.28,4.17-1.16,8.49-2.36,12.76-3.45a64.6,64.6,0,0,1,6.45-1.21q1.41-.21,2.82-.45l3.21-.57c2.45-.43,5-.88,7.49-1.28,1.31-.21,2.61-.44,3.91-.67a81.08,81.08,0,0,1,10.35-1.39h.34c.7,0,1.42-.07,2.16-.06l8,.09,12,.13a5.13,5.13,0,0,1,2.51.75l1.25.7c2,1.13,4.13,2.3,6.23,3.3a11.85,11.85,0,0,1,5.07,4.49A28.12,28.12,0,0,1,474.3,665,78.91,78.91,0,0,1,475.86,684.78Zm-4.94-19.17a24.71,24.71,0,0,0-3.29-9,8.42,8.42,0,0,0-3.64-3.22c-2.21-1-4.36-2.25-6.43-3.41l-1.24-.69a2,2,0,0,0-.88-.32q-6,0-12-.13l-8-.09c-.63,0-1.27,0-1.95.06h-.35a76.45,76.45,0,0,0-9.9,1.33c-1.32.24-2.65.48-4,.69-2.48.39-5,.84-7.43,1.27l-3.22.57c-1,.17-1.93.31-2.89.46-2.13.33-4.14.64-6.12,1.14-4.24,1.09-8.54,2.28-12.69,3.44-2.78.77-5.55,1.54-8.34,2.28a47.83,47.83,0,0,0-15.61,7.47,10,10,0,0,0-3.29,3.79c-.4.82-.87,1.79-1.42,2.74-2.25,3.91-3.5,8.43-3.95,14.23-.34,4.44,1,8,4.06,10.57s6,5.29,9.24,8.46a16,16,0,0,0,5.48,3.67,32.5,32.5,0,0,0,11.46,2.44c2.39,0,4.77,0,7.07,0h2.93c7.24.11,13.79-.08,20-.58l2.83-.19c1.07-.07,2.14-.14,3.2-.23,3.68-.31,7.42-.66,10.93-1,2.22-.21,4.6-.44,7-.71l.77-.09c3.18-.36,6.46-.73,9.68-1.16A21.62,21.62,0,0,0,457.1,707c1.48-.85,3-1.8,4.39-2.72q1.11-.74,2.25-1.44a11.28,11.28,0,0,0,2.94-2.74c2.81-3.67,4.22-8,5.23-11.81a19.84,19.84,0,0,0,.52-3.71A75,75,0,0,0,470.92,665.61Z"
                     transform="translate(-97.5 -31)" /><text class="cls-2" transform="translate(305.02 654.87)">Nodl</text></g>
             <path d="M641.5,423" transform="translate(-97.5 -31)" />
-        </svg></section></div>
+        </svg></section><span class="fid">-1</span></div>
 <a href="../">../</a>
+<div id="-1">
+<div class="pdf"><a class="anchor" id="11648a8c-3416-11eb-b6e8-f45c89b2a84f"></a><object data="./ai/icons.ai" class="pdf" type="application/pdf"><embed src="./ai/icons.ai" type="application/pdf" /></object><span class="filename">icons.ai</span><span class="fid">#11648a8c-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="pdf"><a class="anchor" id="1164beee-3416-11eb-b6e8-f45c89b2a84f"></a><object data="./ai/original.ai" class="pdf" type="application/pdf"><embed src="./ai/original.ai" type="application/pdf" /></object><span class="filename">original.ai</span><span class="fid">#1164beee-3416-11eb-b6e8-f45c89b2a84f</span></div>
+</div>
+<div id="-1">
+<div class="octet-stream"><a class="anchor" id="1164ce8e-3416-11eb-b6e8-f45c89b2a84f"></a><a href='./img/.DS_Store'>./img/.DS_Store</a><span class="filename">.DS_Store</span><span class="fid">#1164ce8e-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="pdf"><a class="anchor" id="11650480-3416-11eb-b6e8-f45c89b2a84f"></a><object data="./img/author.ai" class="pdf" type="application/pdf"><embed src="./img/author.ai" type="application/pdf" /></object><span class="filename">author.ai</span><span class="fid">#11650480-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="1165232a-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author__0set.svg"><figcaption>author__0set.svg</figcaption></figure><span class="fid">#1165232a-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="1165361c-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author__109.svg"><figcaption>author__109.svg</figcaption></figure><span class="fid">#1165361c-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="116548aa-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_blblbg.svg"><figcaption>author_blblbg.svg</figcaption></figure><span class="fid">#116548aa-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="116558f4-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_dahYeeNoh.svg"><figcaption>author_dahYeeNoh.svg</figcaption></figure><span class="fid">#116558f4-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="11656f56-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_doohoyi.svg"><figcaption>author_doohoyi.svg</figcaption></figure><span class="fid">#11656f56-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="11657f46-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_eunjeongGu.svg"><figcaption>author_eunjeongGu.svg</figcaption></figure><span class="fid">#11657f46-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="11658f7c-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_graceKim.svg"><figcaption>author_graceKim.svg</figcaption></figure><span class="fid">#11658f7c-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="11659fd0-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_hamamu.svg"><figcaption>author_hamamu.svg</figcaption></figure><span class="fid">#11659fd0-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="1165ae8a-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_hongSeoYeon.svg"><figcaption>author_hongSeoYeon.svg</figcaption></figure><span class="fid">#1165ae8a-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="1165bb5a-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_hyunchul.svg"><figcaption>author_hyunchul.svg</figcaption></figure><span class="fid">#1165bb5a-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="1165c938-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_hyunjin.svg"><figcaption>author_hyunjin.svg</figcaption></figure><span class="fid">#1165c938-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="1165d61c-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_ichimuraMisako.svg"><figcaption>author_ichimuraMisako.svg</figcaption></figure><span class="fid">#1165d61c-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="1165e206-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_insookBae.svg"><figcaption>author_insookBae.svg</figcaption></figure><span class="fid">#1165e206-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="1165edb4-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_jaeShin.svg"><figcaption>author_jaeShin.svg</figcaption></figure><span class="fid">#1165edb4-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="1165fa84-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_jinhoJeong.svg"><figcaption>author_jinhoJeong.svg</figcaption></figure><span class="fid">#1165fa84-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="11660768-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_kpsap.svg"><figcaption>author_kpsap.svg</figcaption></figure><span class="fid">#11660768-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="1166164a-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_mcMama.svg"><figcaption>author_mcMama.svg</figcaption></figure><span class="fid">#1166164a-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="116621da-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_megumi.svg"><figcaption>author_megumi.svg</figcaption></figure><span class="fid">#116621da-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="11662ee6-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_minShin.svg"><figcaption>author_minShin.svg</figcaption></figure><span class="fid">#11662ee6-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="11663af8-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_mooming.svg"><figcaption>author_mooming.svg</figcaption></figure><span class="fid">#11663af8-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="11664624-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_nodl.svg"><figcaption>author_nodl.svg</figcaption></figure><span class="fid">#11664624-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="116651dc-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_oroMinkyung.svg"><figcaption>author_oroMinkyung.svg</figcaption></figure><span class="fid">#116651dc-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="11665da8-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_pzzz.svg"><figcaption>author_pzzz.svg</figcaption></figure><span class="fid">#11665da8-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="11666942-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_seungwookYang.svg"><figcaption>author_seungwookYang.svg</figcaption></figure><span class="fid">#11666942-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="11667496-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_sewon.svg"><figcaption>author_sewon.svg</figcaption></figure><span class="fid">#11667496-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="116682ce-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_songSoo.svg"><figcaption>author_songSoo.svg</figcaption></figure><span class="fid">#116682ce-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="11668e0e-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_uetaJiro.svg"><figcaption>author_uetaJiro.svg</figcaption></figure><span class="fid">#11668e0e-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="11669a8e-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_wonjung.svg"><figcaption>author_wonjung.svg</figcaption></figure><span class="fid">#11669a8e-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="1166a5f6-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_yiyagi.svg"><figcaption>author_yiyagi.svg</figcaption></figure><span class="fid">#1166a5f6-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="1166b0aa-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/author_yuhee.svg"><figcaption>author_yuhee.svg</figcaption></figure><span class="fid">#1166b0aa-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="1166bb68-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/facebook.svg"><figcaption>facebook.svg</figcaption></figure><span class="fid">#1166bb68-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="1166c770-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/icon_about.svg"><figcaption>icon_about.svg</figcaption></figure><span class="fid">#1166c770-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="1166d328-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/icon_archive_more.svg"><figcaption>icon_archive_more.svg</figcaption></figure><span class="fid">#1166d328-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="1166e994-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/icon_coc.svg"><figcaption>icon_coc.svg</figcaption></figure><span class="fid">#1166e994-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="116702bc-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/icon_timeline.svg"><figcaption>icon_timeline.svg</figcaption></figure><span class="fid">#116702bc-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="11671b62-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/instagram.svg"><figcaption>instagram.svg</figcaption></figure><span class="fid">#11671b62-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="11673d5e-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/logo.svg"><figcaption>logo.svg</figcaption></figure><span class="fid">#11673d5e-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="svg+xml"><a class="anchor" id="116752ee-3416-11eb-b6e8-f45c89b2a84f"></a><figure><img class="image" src="./img/test.svg"><figcaption>test.svg</figcaption></figure><span class="fid">#116752ee-3416-11eb-b6e8-f45c89b2a84f</span></div>
+</div>
+<div id="-1">
+<div class="plain unkown-file"><a class="anchor" id="11689b86-3416-11eb-b6e8-f45c89b2a84f"></a><a href='./scripts/hashEvent.js'>./scripts/hashEvent.js</a><span class="fid">11689b86-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="plain unkown-file"><a class="anchor" id="116992d4-3416-11eb-b6e8-f45c89b2a84f"></a><a href='./scripts/load_pp.js'>./scripts/load_pp.js</a><span class="fid">116992d4-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="plain unkown-file"><a class="anchor" id="116acf64-3416-11eb-b6e8-f45c89b2a84f"></a><a href='./scripts/mobileArchiveEvent.js'>./scripts/mobileArchiveEvent.js</a><span class="fid">116acf64-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="plain unkown-file"><a class="anchor" id="116bd0f8-3416-11eb-b6e8-f45c89b2a84f"></a><a href='./scripts/mobileScroll.js'>./scripts/mobileScroll.js</a><span class="fid">116bd0f8-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="plain unkown-file"><a class="anchor" id="116d4000-3416-11eb-b6e8-f45c89b2a84f"></a><a href='./scripts/physicsLayout.js'>./scripts/physicsLayout.js</a><span class="fid">116d4000-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="plain unkown-file"><a class="anchor" id="116e5198-3416-11eb-b6e8-f45c89b2a84f"></a><a href='./scripts/updateArchive.js'>./scripts/updateArchive.js</a><span class="fid">116e5198-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="plain unkown-file"><a class="anchor" id="116fd9b4-3416-11eb-b6e8-f45c89b2a84f"></a><a href='./scripts/updateFragment.js'>./scripts/updateFragment.js</a><span class="fid">116fd9b4-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="plain unkown-file"><a class="anchor" id="1170ddc8-3416-11eb-b6e8-f45c89b2a84f"></a><a href='./scripts/updateIntroduction.js'>./scripts/updateIntroduction.js</a><span class="fid">1170ddc8-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="plain unkown-file"><a class="anchor" id="1172bba2-3416-11eb-b6e8-f45c89b2a84f"></a><a href='./lib/decomp.js'>./lib/decomp.js</a><span class="fid">1172bba2-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="plain unkown-file"><a class="anchor" id="117599bc-3416-11eb-b6e8-f45c89b2a84f"></a><a href='./lib/matter.js'>./lib/matter.js</a><span class="fid">117599bc-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="plain unkown-file"><a class="anchor" id="1177b0bc-3416-11eb-b6e8-f45c89b2a84f"></a><a href='./lib/polyfill.js'>./lib/polyfill.js</a><span class="fid">1177b0bc-3416-11eb-b6e8-f45c89b2a84f</span></div>
+</div>
+<div id="-1">
+<div class="plain unkown-file"><a class="anchor" id="1178bbce-3416-11eb-b6e8-f45c89b2a84f"></a><a href='./style/authors.css'>./style/authors.css</a><span class="fid">1178bbce-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="plain unkown-file"><a class="anchor" id="117aa01a-3416-11eb-b6e8-f45c89b2a84f"></a><a href='./style/common.css'>./style/common.css</a><span class="fid">117aa01a-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="x-empty"><a class="anchor" id="117aa93e-3416-11eb-b6e8-f45c89b2a84f"></a><a href='./style/fragment.css'>./style/fragment.css</a><span class="filename">fragment.css</span><span class="fid">#117aa93e-3416-11eb-b6e8-f45c89b2a84f</span></div>
+<div class="plain unkown-file"><a class="anchor" id="117ba212-3416-11eb-b6e8-f45c89b2a84f"></a><a href='./style/home.css'>./style/home.css</a><span class="fid">117ba212-3416-11eb-b6e8-f45c89b2a84f</span></div>
+</div>
 
     </div>
   </div>
@@ -421,5 +481,6 @@
 <script src="/src/scripts/updateIntroduction.js"></script>
 <script src="/src/scripts/updateArchive.js"></script>
 <script src="/src/scripts/hashEvent.js"></script>
+<script src="/src/scripts/mobileArchiveEvent.js"></script>
 </body>
 </html>

test_data/src/scripts/index.html

@@ -47,14 +47,14 @@
     </div>
     <div id="introduction">
     </div>
+  </div>
 
+  <div id="archive_exit" style="display:none;"></div>
   <div id="archive">
     <button id="archive_button">ARCHIVE
-        <img id="icon_archive_more" src="/src/img/icon_timeline.svg" alt="">
+      <!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
     </button>
     <div id="archive_list">
-        <a href="#">조각#1234</a>
-      </div>
     </div>
   </div>
 
@@ -68,5 +68,6 @@
 <script src="/src/scripts/updateIntroduction.js"></script>
 <script src="/src/scripts/updateArchive.js"></script>
 <script src="/src/scripts/hashEvent.js"></script>
+<script src="/src/scripts/mobileArchiveEvent.js"></script>
 </body>
 </html>

test_data/src/scripts/lib/index.html

@@ -47,14 +47,14 @@
     </div>
     <div id="introduction">
     </div>
+  </div>
 
+  <div id="archive_exit" style="display:none;"></div>
   <div id="archive">
     <button id="archive_button">ARCHIVE
-        <img id="icon_archive_more" src="/src/img/icon_timeline.svg" alt="">
+      <!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
     </button>
     <div id="archive_list">
-        <a href="#">조각#1234</a>
-      </div>
     </div>
   </div>
 
@@ -68,5 +68,6 @@
 <script src="/src/scripts/updateIntroduction.js"></script>
 <script src="/src/scripts/updateArchive.js"></script>
 <script src="/src/scripts/hashEvent.js"></script>
+<script src="/src/scripts/mobileArchiveEvent.js"></script>
 </body>
 </html>

test_data/src/style/index.html

@@ -47,14 +47,14 @@
     </div>
     <div id="introduction">
     </div>
+  </div>
 
+  <div id="archive_exit" style="display:none;"></div>
   <div id="archive">
     <button id="archive_button">ARCHIVE
-        <img id="icon_archive_more" src="/src/img/icon_timeline.svg" alt="">
+      <!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
     </button>
     <div id="archive_list">
-        <a href="#">조각#1234</a>
-      </div>
     </div>
   </div>
 
@@ -68,5 +68,6 @@
 <script src="/src/scripts/updateIntroduction.js"></script>
 <script src="/src/scripts/updateArchive.js"></script>
 <script src="/src/scripts/hashEvent.js"></script>
+<script src="/src/scripts/mobileArchiveEvent.js"></script>
 </body>
 </html>