Merge pull request #9 from ConnecTo-FrontEnd/design-codeisneverodd

스타일 오버라이딩, 미디어 쿼리 지원

src/library/Component.js

@@ -18,10 +18,16 @@ class Component {
     return domStr.replace(firstTag, tag => tag.split('>')[0] + ` data-uuid="${uuid}">`);
   }
 
-  converter(selector) {
-    return Object.entries(selector)
-      .map(([property, value]) => `${property}: ${value}`)
-      .join(';');
+  styleCombinator(domStr) {
+    const firstTag = /<[^>]*>/;
+
+    return domStr.replace(firstTag, tag => {
+      if (!tag.includes('style')) return tag;
+
+      const styleRegex = /style="([^"])*"/g;
+      const styles = [...tag.match(styleRegex)].map(style => style.split('"')[1]).join('');
+      return tag.replaceAll(styleRegex, '').split('>')[0] + ` style="${styles}">`;
+    });
   }
 
   holdEvents() {
@@ -46,7 +52,7 @@ class Component {
   }
 
   render() {
-    return this.uuidAdder(this.domStr(), this.uuid);
+    return this.styleCombinator(this.uuidAdder(this.domStr(), this.uuid));
   }
 }
 

src/library/styled.js

@@ -1,6 +1,32 @@
+import { render } from '../../library/render/index.js';
+
+window.matchMedia('(max-width:  768px)').addEventListener('change', e => {
+  render();
+});
+
 const styled = styleObj =>
   ` style="${Object.entries(styleObj)
-    .map(([property, value]) => `${property}: ${value}`)
+    .map(([property, value]) => {
+      const isMobile = window.matchMedia('(max-width:  768px)').matches;
+      const isDesktop = window.matchMedia('(min-width: 768px)').matches;
+      if (property === '@mobile') {
+        if (isMobile) {
+          return Object.entries(value)
+            .map(([p, v]) => `${p}: ${v}`)
+            .join(';');
+        }
+        return '';
+      }
+      if (property === '@desktop') {
+        if (isDesktop) {
+          return Object.entries(value)
+            .map(([p, v]) => `${p}: ${v}`)
+            .join(';');
+        }
+        return '';
+      }
+      return `${property}: ${value}`;
+    })
     .join(';')}; "`;
 
 export default styled;

src/pages/404/index.js

@@ -13,6 +13,12 @@ const styles = {
     gap: '40px',
     'align-items': 'center',
     'justify-content': 'center',
+    '@desktop': {
+      'background-color': 'red',
+    },
+    '@mobile': {
+      'background-color': 'green',
+    },
   }),
   homeBtn: styled({
     'background-color': theme['orange-color'],

src/pages/Main/components/HistoryItem.js

@@ -8,7 +8,7 @@ const styles = {
     display: 'flex',
     'justify-content': 'space-between',
     'margin-bottom': '24px',
-    idth: '344px',
+    width: '100%',
   }),
 
   problemLink: styled({
@@ -20,6 +20,7 @@ const styles = {
     'flex-direction': 'column',
     'justify-content': 'space-between',
     'align-items': 'flex-start',
+    flex: 1,
   }),
 
   problemCategory: styled({

src/pages/Main/components/HistoryList.js

@@ -11,7 +11,8 @@ const styles = {
     'flex-direction': 'column',
     'align-items': 'flex-start',
     position: 'relative',
-    margin: '28px',
+    width: '100%',
+    padding: '0 20px 0 20px',
   }),
 
   title: styled({
@@ -23,9 +24,12 @@ const styles = {
   deleteAllBtn: styled({
     position: 'absolute',
     top: '7px',
-    right: '0',
+    right: '20px',
     color: theme['orange-color'],
   }),
+  itemContainer: styled({
+    width: '100%',
+  }),
 };
 
 class HistoryList extends Component {
@@ -36,7 +40,7 @@ class HistoryList extends Component {
     return `
         <div ${styles.container}>
           <h2 ${styles.title}>Last</h2>
-          <ul>
+          <ul ${styles.itemContainer}>
             ${expired.map(problem => new HistoryItem({problem}).render()).join('')}
           </ul>
           <button ${styles.deleteAllBtn} class="delete-all-btn">Delete All</button>

src/pages/Main/components/ProblemList.js

@@ -22,20 +22,22 @@ const styles = {
     'justify-content': 'space-between',
     'text-align': 'left',
     width: '100%',
+
     'padding-left': '26px',
     'padding-right': '26px',
     font: theme['font-en-bold'],
     'font-size': '28px',
   }),
 
-  problems: styled({
+  problemsContainer: styled({
     display: 'flex',
-    margin: '23px 0 57px 26px',
+    margin: '23px 0 57px 0',
+    padding: '20px 20px 20px 5px',
     'white-space': 'nowrap',
     'overflow-x': 'scroll',
     'scrollbar-width': 'none',
     gap: '41px',
-    width: '100%',
+    width: '90vw',
   }),
 
   shuffle: styled({
@@ -76,7 +78,7 @@ class ProblemList extends Component {
           <span>Allsols</span>
           ${userInfo ? `<div class="shuffle" ${styles.shuffle}></div>` : ''}
         </div>
-        <ul ${styles.problems}>
+        <ul ${styles.problemsContainer}>
           ${unexpired.map((problem, idx) => new ProblemItem({ problem, blocked: !userInfo && idx > 0, onDeleteClick: this.deleteItem.bind(this) }).render()).join('')}
         </ul>
       </div>`;