🆕 #17 - emotion.js 도입

14hy · Oct 1, 2019 · d1c713c · d1c713c
1 parent 1a9c094
commit d1c713c
Show file tree

Hide file tree

Showing 6 changed files with 224 additions and 330 deletions.
diff --git a/client/src/components/region-selector.js b/client/src/components/region-selector.js
@@ -1,5 +1,6 @@
 import { html, render } from 'lit-html'
 import i18next from 'i18next'
+import { css, injectGlobal } from 'emotion'
 
 export class regionSelector extends HTMLElement {
 	constructor() {
@@ -23,8 +24,7 @@ export class regionSelector extends HTMLElement {
 
 	render() {
 		return html`
-        ${style}
-        <div class="list">
+        <div class="list ${styles}">
             <ul>
                 <li>
                     <a class="item-link smart-select smart-select-init" data-open-in="popover">
@@ -59,45 +59,46 @@ export class regionSelector extends HTMLElement {
 	}
 }
 
-const style = html`
-<style>
-region-selector .list {
-    margin: 0;
-}
+const styles = css`
+& {
+    & .list {
+        margin: 0;
+    }
 
-region-selector .smart-select div.item-title {
-    max-width: none;
-    text-align: center;
-    font-size: 12px;
-}
+    & .smart-select div.item-title {
+        max-width: none;
+        text-align: center;
+        font-size: 12px;
+    }
 
-region-selector .smart-select div.item-after {
-    width: 100px;
-    max-width: none;
-    text-align: center;
-    font-weight: bold;
-}
+    & .smart-select div.item-after {
+        width: 100px;
+        max-width: none;
+        text-align: center;
+        font-weight: bold;
+    }
 
-region-selector .list ul:after, region-selector .list ul:before {
-    background-color: transparent;
-}
+    & .list ul:after, & .list ul:before {
+        background-color: transparent;
+    }
 
-region-selector .item-inner {
-    padding-left: 15px;
-}
+    & .item-inner {
+        padding-left: 15px;
+    }
 
-region-selector .item-inner:before {
-    content: 'chevron_down' !important;
+    & .item-inner:before {
+        content: 'chevron_down' !important;
+    }    
 }
-
+`
+injectGlobal`
 [data-select-name="region"] .popover-inner {    
     max-height: none;
-}
+}    
 
 [data-select-name="region"].popover-on-right {
     width: 180px;
 }
-</style>
-`
+` 
 
 customElements.define(`region-selector`, regionSelector)
diff --git a/client/src/components/swiper-slider-nearby.js b/client/src/components/swiper-slider-nearby.js
diff --git a/client/src/components/swiper-slider.js b/client/src/components/swiper-slider.js
@@ -1,5 +1,6 @@
 import { html, render } from 'lit-html'
 import i18next from 'i18next'
+import { css, injectGlobal } from 'emotion'
 
 export class SwiperSlider extends HTMLElement {
 	constructor() {
@@ -12,22 +13,28 @@ export class SwiperSlider extends HTMLElement {
 
 	render() {
 		return html`
-		${style}
-		<div data-pagination='{"el": ".swiper-pagination"}' data-space-between="50" class="swiper-container swiper-init demo-swiper">
-            <div class="swiper-pagination"></div>
-            <div class="swiper-wrapper">
-                <div class="swiper-slide">${i18next.t(`PICTURE_1`)}</div>
-                <div class="swiper-slide">Slide 2</div>
-                <div class="swiper-slide">Slide 3</div>
+        <div class="swiper-wrap ${styles}">
+            <div data-pagination='{"el": ".swiper-pagination"}' data-space-between="50" class="swiper-container swiper-init demo-swiper">
+                <div class="swiper-pagination"></div>
+                <div class="swiper-wrapper">
+                    <div class="swiper-slide">${i18next.t(`PICTURE_1`)}</div>
+                    <div class="swiper-slide">Slide 2</div>
+                    <div class="swiper-slide">Slide 3</div>
+                </div>
             </div>
-        </div>
+        </div>		
         `
 	}
 }
 
-const style = html`
-<style>
+injectGlobal`
 swiper-slider {
+    overflow: hidden;
+}
+`
+
+const styles = css`
+& {
     height: 150px;
     margin: 1px;
     position: relative;
@@ -40,27 +47,25 @@ swiper-slider {
 
     border-radius: 15px;
     overflow: hidden;
-}
 
-swiper-slider .swiper-container {
-    width: 100%;
-    height: 100%;
-}
+    & .swiper-container {
+        width: 100%;
+        height: 100%;
+    }
 
-swiper-slider .swiper-slide {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
+    & .swiper-slide {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
 
-swiper-slider .swiper-slide:nth-child(1) {
-    background-image: url(https://storage.googleapis.com/mac-tour-251517.appspot.com/breweries/seoul-brewery1.jpg);
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-    
+    & .swiper-slide:nth-child(1) {
+        background-image: url(https://storage.googleapis.com/mac-tour-251517.appspot.com/breweries/seoul-brewery1.jpg);
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center;
+    }
 }
-</style>
 `
 
 customElements.define(`swiper-slider`, SwiperSlider)