JSFiddle - React, Tailwind, and code Playground

by hohoya33

HTML

[[% set mallName = mallName | default("ssg") %]]
[[% set mallNameText = mallNameText | default("SSG.COM") %]]
[[% set hasGnbTitleLink = hasGnbTitleLink | default(false) %]]
[[% set hasGnbBtnClip = hasGnbBtnClip | default(true) %]]
[[% set hasGnbBtnShare = hasGnbBtnShare | default(true) %]]
[[% set hasFooter = hasFooter | default(true) %]]
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<meta name="format-detection" content="telephone=no" />
<title>[[$ title $]]</title>
<link rel="stylesheet" href="/ssgui/01.ssg/mobile/trunk/dist/css/m_layout.css" />
[[% include "01.ssg/mobile/trunk/src/html/partials/mcom_css.html" %]]
<link rel="stylesheet" href="/ssgui/01.ssg/mobile/trunk/dist/css/m_ssg.css" />
[[% block css %]]
[[% endblock %]]
[[% include "01.ssg/mobile/trunk/src/html/partials/mcom_js_lib.html" %]]
</head>
<body class="body_[[$ mallName $]]">
[[% include "01.ssg/mobile/trunk/src/html/partials/mcom_skip_navi.html" %]]
[[% if page === "main" %]]
[[% include "01.ssg/mobile/trunk/src/html/partials/mcom_layer_notice.html" %]]
[[% endif %]]
<!-- wrap -->
[[% if service === "store" %]]
<!-- [D] 스토어(구 셀러홈) 템플릿별 wrap 클래스명 필요 -->
<div id="m_wrap" class="reveal-left-wrap reveal-right-wrap mcom_wrap [[$ serviceTemplateName $]]">
[[% else %]]
<div id="m_wrap" class="reveal-left-wrap reveal-right-wrap mcom_wrap [[$ mallName $]]">
[[% endif %]]
	<!-- header -->
	<header id="header" class="reveal-left-header reveal-right-header">
	[[% block header %]]
		<!-- 웹브라우저 접근 시 앱 바로가기 배너 -->
		<div id="m_header_banner" class="header_banner" style="display:none">
			<a href="#"><img src="http://static.ssgcdn.com/ui/m_ssg/img/common/banner_app.jpg" alt="더욱 편리한 서비스 이용을 위해 앱으로 쓱-열기"></a>
			<button type="button" class="close">레이어 배너 닫기</button>
		</div>
		[[% if hasGnb === true %]]
		[[% include "01.ssg/mobile/trunk/src/html/partials/mcom_gnb.html"...

CSS

aside#leftlist {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 2600;
	transform: translate3d(-100%, 0, 0);
	transition: transform 0.3s;
	transition-timing-function: ease-in-out;
	will-change: transform;

	&.is_visible {
		transform: translateX(0);
		transition: background-color 0.2s;
		background-color: rgba(0, 0, 0, 0.4);
		.clnb {
			margin-left: 0;
		}
	}
	.clnb {
		position: relative;
		width: 320px;
		height: 100%;
		margin-left: -320px;
		transition: margin 0.2s;
		//overflow: scroll;
		transition-timing-function: ease-in-out;
		//overflow-x: hidden;
		&:before {
			display: none;
		}
	}
}

JavaScript

var ssg = ssg || {};
ssg.View = ssg.View || {};
ssg.View.revealMenu = function( htOptions ) {
  $.extend( this, htOptions || {} );
  this.init();
};
ssg.View.revealMenu.prototype = $.extend( {
  init: function() {
      this._assignElements();
      this._attachEventHandlers();
  },
  _assignElements: function() {
      this._welHtml = $('html');
      this._welBody = $('body');
      this._welMainBody = $('#m_wrap');
      this._welMainHeader = $('#header');
      this._welMainContainer = $('.mcom_container');
  },
  _assignComponents: function() {

  },
  _attachEventHandlers: function() {

  },
  showLeftMenu: function() {
    console.log("showLeft");
    $("#leftlist").addClass("is_visible");
  },
  hideLeftMenu: function() {
    console.log("hideLeft");
  },
  showRightMenu: function() {
    console.log("showRight");
  },
  hideRightMenu: function() {
    console.log("hideRight");
  }
}, ssg.Event.emitter);




























var ssg = ssg || {};
ssg.View = ssg.View || {};
ssg.View.layout = ssg.View.layout || {};

ssg.View.layout.cmLogo = function (htOptions) {
	$.extend(this, htOptions || {});
	this.init();
};
ssg.View.layout.cmLogo.prototype = $.extend(
	{
		init: function () {
			this._assignElements();
			this._attachEventHandlers();
			this._initAnimation();
		},
		_assignElements: function () {
			this._welCmLogo = $(".cm_logo");
			this._welCmLogoHome = this._welCmLogo.find(".cm_logo_home");
			this._welCmLogoToggle = this._welCmLogo.find(".cm_logo_toggle");
			this._welCmLogoMallList = this._welCmLogo.find(".cm_logo_malllist");
		},
		_attachEventHandlers: function () {
			this._welCmLogoHome.on("click", ".cm_logo_toggle", $.proxy(this._onClickCmLogoToggle, this));
			this._welCmLogo.on("click", ".cm_logo_dim", $.proxy(this._onClickCmLogoDim, this));
			this._welCmLogoMallList.on("click", ".cm_logo_mallbtn", $.proxy(this._onClickCmLogoMallBtn, this));
		},
		_initAnimation: function () {
			if (this._welCmLogoHome.hasClass("cm_logo_main"))...