#12 아티스트 블럭 계산기

UTA-CONNECT · Jun 17, 2021 · d9e9deb · d9e9deb
1 parent 9a60691
commit d9e9deb
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 2 deletions.
diff --git a/public/index.html b/public/index.html
@@ -294,12 +294,32 @@
                         <img src="assets/img/block_2.png"/>
                         <div
                             style=" position: absolute; width: 100%; background-image: url(assets/img/block_2.png); background-repeat: no-repeat; background-size: contain; background-position: center; height: 100%; top: 0;"></div>
-                        <div class="container justify-content-center block2-body-container">
-                            <div class="row gap-row">
+                        <div class="container justify-content-center block2-body-container" style="height: 100%;">
+                            <!-- <div class="row gap-row">
                                 <div
                                     class="col-12 block2-title d-flex align-items-center justify-content-center">
                                     <div>아티스트</div>
                                 </div>
+                            </div> -->
+                            <div class="row" id="artist_title" hidden>
+                                <div class="col-12">
+                                    아티스트
+                                </div>
+                            </div>
+                            <div class="row" id="artist_offset" hidden>
+                                <div class="col-12">
+                                    gap
+                                </div>
+                            </div>
+                            <div class="row" id="artist_box" hidden>
+                                <div class="col-12">
+                                    box
+                                </div>
+                            </div>
+                            <div class="row" id="artist_hr" hidden>
+                                <div class="col-12">
+                                    hr
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -352,5 +372,6 @@
             integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
             crossorigin="anonymous"></script>
         <script src="src/ticketing-info.js"></script>
+        <script src="src/artist.js"></script>
     </body>
 </html>
diff --git a/public/src/artist.js b/public/src/artist.js
@@ -0,0 +1,81 @@
+const artistDataList = [
+    {
+        type: 'title',
+        ele: undefined,
+        height: 0.11,
+    },
+    {
+        type: 'offset',
+        ele: undefined,
+        height: 0.03,
+    },
+    {
+        type: 'box',
+        img: '',
+        title: '???',
+        desc: '섭외가 완료되었습니다\n기대해주세요!',
+        ele: undefined,
+        height: 0.2,
+    },
+    {
+        type: 'hr',
+        ele: undefined,
+        height: 0.1,
+    },
+    {
+        type: 'box',
+        img: '',
+        title: '???',
+        desc: '섭외가 완료되었습니다\n기대해주세요!',
+        ele: undefined,
+        height: 0.2,
+    },
+    {
+        type: 'hr',
+        ele: undefined,
+        height: 0.1,
+    },
+    {
+        type: 'box',
+        img: '',
+        title: '???',
+        desc: '섭외가 완료되었습니다\n기대해주세요!',
+        ele: undefined,
+        height: 0.2,
+    }
+]
+
+const artistEleDict = {
+    title: undefined,
+    offset: undefined,
+    box: undefined,
+    hr: undefined
+}
+
+window.addEventListener('resize', () => {
+    responsiveBlockList();
+})
+
+function init() {
+    artistEleDict.title = document.getElementById('artist_title');
+    artistEleDict.offset = document.getElementById('artist_offset');
+    artistEleDict.box = document.getElementById('artist_box');
+    artistEleDict.hr = document.getElementById('artist_hr');
+
+    artistDataList.forEach(artistItem => {
+        const ele = artistEleDict[artistItem.type].cloneNode(true);
+        artistItem.ele = ele;
+        artistItem.ele.removeAttribute('hidden');
+        document.querySelector('div.block2-body-container').appendChild(ele);
+    })
+}
+
+function responsiveBlockList() {
+    const rect = document.querySelector('div.block2-body-container').getBoundingClientRect();
+    artistDataList.forEach(artistItem => {
+        artistItem.ele.style.height = `${rect.height * artistItem.height}px`;
+    })
+}
+
+init();
+responsiveBlockList();