diff --git a/src/game/global/define_variables_global.js b/src/game/global/define_variables_global.js
new file mode 100644
index 0000000..92a4ee2
--- /dev/null
+++ b/src/game/global/define_variables_global.js
@@ -0,0 +1,30 @@
+const LANGUAGE_KOREAN		= "korean";
+const LANGUAGE_ENGLISH	= "english";
+
+const MODE_RELEASE		= "release";
+const MODE_DEBUG			= "debug";
+const runMode = MODE_DEBUG;
+
+function isDebugMode() {
+	// console.log("debug mode ? " + runMode);
+	return runMode == MODE_DEBUG ? true : false;
+}
+
+function isReleaseMode() {
+	// console.log("release mode ? " + runMode);
+	return runMode == MODE_RELEASE ? true : false;
+}
+
+
+const GAME_SCREEN_SIZE = { x: 1024, y: 768 
+}
+
+
+let playerName;
+let playerUserID;
+let bestRecord = 0;
+let playingStageData;
+
+let textStyleBasic = { font: "bold 32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" };
+
+let backButtonPosition = { x: 100, y: 70 };
diff --git a/src/game/global/loading/loading.js b/src/game/global/loading/loading.js
new file mode 100644
index 0000000..abd72c9
--- /dev/null
+++ b/src/game/global/loading/loading.js
@@ -0,0 +1,114 @@
+/////////////////////////////
+// Loading
+
+// var x = 32;
+// var y = 80;
+
+var Loading = {
+
+	preload: function() {
+		this.game.load.image('loadingbar', './image/phaser.png');
+	},
+
+	create: function() {
+		// console.log('Loading');
+		
+		this.game.stage.backgroundColor = '#4d4d4d';
+
+		//	Progress report
+    	this.textProgress = game.add.text(game.world.centerX, 100, '로딩중 . . .', textStyleBasic);
+		this.textProgress.anchor.setTo(0.5, 0.4);
+		this.textProgress.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+
+		// Preload bar
+		this.preloadBar = this.add.sprite(game.world.centerX, game.world.centerY, 'loadingbar');
+		this.preloadBar.anchor.setTo(0.5);
+		this.preloadBar.alpha = 0;
+
+		this.game.load.onFileComplete.add(this.fileComplete, this);
+		this.game.load.onLoadComplete.add(this.loadComplete, this);
+
+		this.startLoading();
+	},
+
+	startLoading: function() {
+		// this.game.load.image('a', './image/phaser.png');
+		// this.game.load.image('b', './image/phaser.png');
+		// this.game.load.image('c', './image/phaser.png');
+		// this.game.load.image('d', './image/phaser.png');
+		// this.game.load.image('e', './image/phaser.png');
+		// this.game.load.image('g', './image/phaser.png');
+		// this.game.load.image('e', './image/phaser.png');
+		// this.game.load.image('f', './image/phaser.png');
+		// this.game.load.image('g', './image/phaser.png');
+		// this.game.load.image('h', './image/phaser.png');
+
+		this.game.load.image('phaser', './image/phaser.png');
+		this.game.load.spritesheet('button', './image/button_basic.png', 200, 100);
+		this.game.load.image('star', './image/star_particle.png');
+		this.game.load.image('medal_gold', './image/medal_gold.png');
+		this.game.load.image('medal_silver', './image/medal_silver.png');
+		this.game.load.image('medal_bronze', './image/medal_bronze.png');
+
+		this.game.load.start();
+	},
+
+	fileComplete: function(progress, cacheKey, success, totalLoaded, totalFiles) {
+		this.preloadBar.alpha = progress / 100;
+
+		// console.log('progress : ' + progress);
+
+		/*
+		text.setText("File Complete: " + progress + "% - " + totalLoaded + " out of " + totalFiles);
+
+		var newImage = game.add.image(x, y, cacheKey);
+		newImage.scale.set(0.3);
+
+		x += newImage.width + 20;
+		if (x > 700)
+		{
+			x = 32;
+			y += 332;
+		}
+		*/
+	},
+
+	loadComplete: function(progress, cacheKey, success, totalLoaded, totalFiles) {
+		this.preloadBar.alpha = 1;
+
+		if(isReleaseMode()) {
+			this.state.start('Login');
+			return;
+		}
+
+		this.state.start('Login');
+		// this.startMenu();
+		// this.startTypingTestStage();
+		// this.startTypingTestResult();
+	},
+
+	startMenu: function() {
+		this.setupTestData();
+		this.state.start('Menu');
+	},
+
+	startTypingTestStage: function() {
+		this.setupTestData();
+		this.state.start('TypingTestStage');
+	},
+
+	startTypingTestResult: function() {
+		this.setupTestData();
+		this.state.start('TypingTestResult');
+	},
+
+	setupTestData: function() {
+		playerUserID = 1;
+		playerName = "박지상";
+
+		bestRecord = 300;
+		typingRecordTotal = 400;
+		playingStageData = new StageData(LANGUAGE_KOREAN, 1);
+	}
+
+}
\ No newline at end of file
diff --git a/src/game/lib/input_type_text.js b/src/game/lib/input_type_text.js
new file mode 100644
index 0000000..0015a9a
--- /dev/null
+++ b/src/game/lib/input_type_text.js
@@ -0,0 +1,1425 @@
+var InputTypeText = function(x, y) {
+  var bmd = game.add.bitmapData(400, 50);    
+  var myInput = game.add.sprite(x, y, bmd);
+
+  myInput.canvasInput = new CanvasInput({
+    canvas: bmd.canvas,
+    fontSize: 30,
+    fontFamily: 'Arial',
+    fontColor: '#212121',
+    fontWeight: 'bold',
+    width: 400,
+    padding: 8,
+    borderWidth: 1,
+    borderColor: '#000',
+    borderRadius: 3,
+    boxShadow: '1px 1px 0px #fff',
+    innerShadow: '0px 0px 5px rgba(0, 0, 0, 0.5)',
+    placeHolder: 'Enter message here...'
+  });
+  myInput.inputEnabled = true;
+  myInput.input.useHandCursor = true;    
+  myInput.events.onInputUp.add(this.inputFocus, this);
+
+  return myInput;
+};
+
+InputTypeText.prototype = {
+  inputFocus: function(sprite){
+    sprite.canvasInput.focus();
+  }
+};
+
+/*
+var inputFocus = function(sprite){
+  sprite.canvasInput.focus();
+}
+
+var createInput = function(x, y){
+  var bmd = game.add.bitmapData(400, 50);    
+  var myInput = game.add.sprite(x, y, bmd);
+
+  myInput.canvasInput = new CanvasInput({
+    canvas: bmd.canvas,
+    fontSize: 30,
+    fontFamily: 'Arial',
+    fontColor: '#212121',
+    fontWeight: 'bold',
+    width: 400,
+    padding: 8,
+    borderWidth: 1,
+    borderColor: '#000',
+    borderRadius: 3,
+    boxShadow: '1px 1px 0px #fff',
+    innerShadow: '0px 0px 5px rgba(0, 0, 0, 0.5)',
+    placeHolder: 'Enter message here...'
+  });
+  myInput.inputEnabled = true;
+  myInput.input.useHandCursor = true;    
+  myInput.events.onInputUp.add(this.inputFocus, this);
+
+  return myInput;
+}
+*/
+
+
+/*!
+ *  CanvasInput v1.2.0
+ *  https://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input
+ *
+ *  (c) 2013-2015, James Simpson of GoldFire Studios
+ *  goldfirestudios.com
+ *
+ *  MIT License
+ */
+
+(function() {
+  // create a buffer that stores all inputs so that tabbing
+  // between them is made possible.
+  var inputs = [];
+
+  // initialize the Canvas Input
+  var CanvasInput = window.CanvasInput = function(o) {
+    var self = this;
+
+    o = o ? o : {};
+
+    // setup the defaults
+    self._canvas = o.canvas || null;
+    self._ctx = self._canvas ? self._canvas.getContext('2d') : null;
+    self._x = o.x || 0;
+    self._y = o.y || 0;
+    self._extraX = o.extraX || 0;
+    self._extraY = o.extraY || 0;
+    self._fontSize = o.fontSize || 14;
+    self._fontFamily = o.fontFamily || 'Arial';
+    self._fontColor = o.fontColor || '#000';
+    self._placeHolderColor = o.placeHolderColor || '#bfbebd';
+    self._fontWeight = o.fontWeight || 'normal';
+    self._fontStyle = o.fontStyle || 'normal';
+    self._readonly = o.readonly || false;
+    self._maxlength = o.maxlength || null;
+    self._width = o.width || 150;
+    self._height = o.height || self._fontSize;
+    self._padding = o.padding >= 0 ? o.padding : 5;
+    self._borderWidth = o.borderWidth >= 0 ? o.borderWidth : 1;
+    self._borderColor = o.borderColor || '#959595';
+    self._borderRadius = o.borderRadius >= 0 ? o.borderRadius : 3;
+    self._backgroundImage = o.backgroundImage || '';
+    self._boxShadow = o.boxShadow || '1px 1px 0px rgba(255, 255, 255, 1)';
+    self._innerShadow = o.innerShadow || '0px 0px 4px rgba(0, 0, 0, 0.4)';
+    self._selectionColor = o.selectionColor || 'rgba(179, 212, 253, 0.8)';
+    self._placeHolder = o.placeHolder || '';
+    self._value = (o.value || self._placeHolder) + '';
+    self._onsubmit = o.onsubmit || function() {};
+    self._onkeydown = o.onkeydown || function() {};
+    self._onkeyup = o.onkeyup || function() {};
+    self._onfocus = o.onfocus || function() {};
+    self._onblur = o.onblur || function() {};
+    self._cursor = false;
+    self._cursorPos = 0;
+    self._hasFocus = false;
+    self._selection = [0, 0];
+    self._wasOver = false;
+
+    // parse box shadow
+    self.boxShadow(self._boxShadow, true);
+
+    // calculate the full width and height with padding, borders and shadows
+    self._calcWH();
+
+    // setup the off-DOM canvas
+    self._renderCanvas = document.createElement('canvas');
+    self._renderCanvas.setAttribute('width', self.outerW);
+    self._renderCanvas.setAttribute('height', self.outerH);
+    self._renderCtx = self._renderCanvas.getContext('2d');
+
+    // setup another off-DOM canvas for inner-shadows
+    self._shadowCanvas = document.createElement('canvas');
+    self._shadowCanvas.setAttribute('width', self._width + self._padding * 2);
+    self._shadowCanvas.setAttribute('height', self._height + self._padding * 2);
+    self._shadowCtx = self._shadowCanvas.getContext('2d');
+
+    // setup the background color
+    if (typeof o.backgroundGradient !== 'undefined') {
+      self._backgroundColor = self._renderCtx.createLinearGradient(
+        0,
+        0,
+        0,
+        self.outerH
+      );
+      self._backgroundColor.addColorStop(0, o.backgroundGradient[0]);
+      self._backgroundColor.addColorStop(1, o.backgroundGradient[1]);
+    } else {
+      self._backgroundColor = o.backgroundColor || '#fff';
+    }
+
+    // setup main canvas events
+    if (self._canvas) {
+      self._canvas.addEventListener('mousemove', function(e) {
+        e = e || window.event;
+        self.mousemove(e, self);
+      }, false);
+
+      self._canvas.addEventListener('mousedown', function(e) {
+        e = e || window.event;
+        self.mousedown(e, self);
+      }, false);
+
+      self._canvas.addEventListener('mouseup', function(e) {
+        e = e || window.event;
+        self.mouseup(e, self);
+      }, false);
+    }
+
+    // setup a global mouseup to blur the input outside of the canvas
+    window.addEventListener('mouseup', function(e) {
+      e = e || window.event;
+
+      if (self._hasFocus && !self._mouseDown) {
+        self.blur();
+      }
+    }, true);
+    
+    // create the hidden input element
+    self._hiddenInput = document.createElement('input');
+    self._hiddenInput.type = 'text';
+    self._hiddenInput.style.position = 'absolute';
+    self._hiddenInput.style.opacity = 0;
+    self._hiddenInput.style.pointerEvents = 'none';
+    self._hiddenInput.style.left = (self._x + self._extraX + (self._canvas ? self._canvas.offsetLeft : 0)) + 'px';
+    self._hiddenInput.style.top = (self._y + self._extraY + (self._canvas ? self._canvas.offsetTop : 0)) + 'px';
+    self._hiddenInput.style.width = self._width + 'px';
+    self._hiddenInput.style.height = self._height + 'px';
+    self._hiddenInput.style.zIndex = 0;
+    if (self._maxlength) {
+      self._hiddenInput.maxLength = self._maxlength;
+    }
+    document.body.appendChild(self._hiddenInput);
+    self._hiddenInput.value = self._value;
+
+    // setup the keydown listener
+    self._hiddenInput.addEventListener('keydown', function(e) {
+      e = e || window.event;
+
+      if (self._hasFocus) {
+        self.keydown(e, self);
+      }
+    });
+
+    // setup the keyup listener
+    self._hiddenInput.addEventListener('keyup', function(e) {
+      e = e || window.event;
+
+      // update the canvas input state information from the hidden input
+      self._value = self._hiddenInput.value;
+      self._cursorPos = self._hiddenInput.selectionStart;
+      self.render();
+
+      if (self._hasFocus) {
+        self._onkeyup(e, self);
+      }
+    });
+
+    // add this to the buffer
+    inputs.push(self);
+    self._inputsIndex = inputs.length - 1;
+
+    // draw the text box
+    self.render();
+  };
+
+  // setup the prototype
+  CanvasInput.prototype = {
+    /**
+     * Get/set the main canvas.
+     * @param  {Object} data Canvas reference.
+     * @return {Mixed}      CanvasInput or current canvas.
+     */
+    canvas: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._canvas = data;
+        self._ctx = self._canvas.getContext('2d');
+
+        return self.render();
+      } else {
+        return self._canvas;
+      }
+    },
+
+    /**
+     * Get/set the x-position.
+     * @param  {Number} data The pixel position along the x-coordinate.
+     * @return {Mixed}      CanvasInput or current x-value.
+     */
+    x: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._x = data;
+
+        return self.render();
+      } else {
+        return self._x;
+      }
+    },
+
+    /**
+     * Get/set the y-position.
+     * @param  {Number} data The pixel position along the y-coordinate.
+     * @return {Mixed}      CanvasInput or current y-value.
+     */
+    y: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._y = data;
+
+        return self.render();
+      } else {
+        return self._y;
+      }
+    },
+
+    /**
+     * Get/set the extra x-position (generally used when no canvas is specified).
+     * @param  {Number} data The pixel position along the x-coordinate.
+     * @return {Mixed}      CanvasInput or current x-value.
+     */
+    extraX: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._extraX = data;
+
+        return self.render();
+      } else {
+        return self._extraX;
+      }
+    },
+
+    /**
+     * Get/set the extra y-position (generally used when no canvas is specified).
+     * @param  {Number} data The pixel position along the y-coordinate.
+     * @return {Mixed}      CanvasInput or current y-value.
+     */
+    extraY: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._extraY = data;
+
+        return self.render();
+      } else {
+        return self._extraY;
+      }
+    },
+
+    /**
+     * Get/set the font size.
+     * @param  {Number} data Font size.
+     * @return {Mixed}      CanvasInput or current font size.
+     */
+    fontSize: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._fontSize = data;
+
+        return self.render();
+      } else {
+        return self._fontSize;
+      }
+    },
+
+    /**
+     * Get/set the font family.
+     * @param  {String} data Font family.
+     * @return {Mixed}      CanvasInput or current font family.
+     */
+    fontFamily: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._fontFamily = data;
+
+        return self.render();
+      } else {
+        return self._fontFamily;
+      }
+    },
+
+    /**
+     * Get/set the font color.
+     * @param  {String} data Font color.
+     * @return {Mixed}      CanvasInput or current font color.
+     */
+    fontColor: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._fontColor = data;
+
+        return self.render();
+      } else {
+        return self._fontColor;
+      }
+    },
+
+    /**
+     * Get/set the place holder font color.
+     * @param  {String} data Font color.
+     * @return {Mixed}      CanvasInput or current place holder font color.
+     */
+    placeHolderColor: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._placeHolderColor = data;
+
+        return self.render();
+      } else {
+        return self._placeHolderColor;
+      }
+    },
+
+    /**
+     * Get/set the font weight.
+     * @param  {String} data Font weight.
+     * @return {Mixed}      CanvasInput or current font weight.
+     */
+    fontWeight: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._fontWeight = data;
+
+        return self.render();
+      } else {
+        return self._fontWeight;
+      }
+    },
+
+    /**
+     * Get/set the font style.
+     * @param  {String} data Font style.
+     * @return {Mixed}      CanvasInput or current font style.
+     */
+    fontStyle: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._fontStyle = data;
+
+        return self.render();
+      } else {
+        return self._fontStyle;
+      }
+    },
+
+    /**
+     * Get/set the width of the text box.
+     * @param  {Number} data Width in pixels.
+     * @return {Mixed}      CanvasInput or current width.
+     */
+    width: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._width = data;
+        self._calcWH();
+        self._updateCanvasWH();
+
+        return self.render();
+      } else {
+        return self._width;
+      }
+    },
+
+    /**
+     * Get/set the height of the text box.
+     * @param  {Number} data Height in pixels.
+     * @return {Mixed}      CanvasInput or current height.
+     */
+    height: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._height = data;
+        self._calcWH();
+        self._updateCanvasWH();
+
+        return self.render();
+      } else {
+        return self._height;
+      }
+    },
+
+    /**
+     * Get/set the padding of the text box.
+     * @param  {Number} data Padding in pixels.
+     * @return {Mixed}      CanvasInput or current padding.
+     */
+    padding: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._padding = data;
+        self._calcWH();
+        self._updateCanvasWH();
+
+        return self.render();
+      } else {
+        return self._padding;
+      }
+    },
+
+    /**
+     * Get/set the border width.
+     * @param  {Number} data Border width.
+     * @return {Mixed}      CanvasInput or current border width.
+     */
+    borderWidth: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._borderWidth = data;
+        self._calcWH();
+        self._updateCanvasWH();
+
+        return self.render();
+      } else {
+        return self._borderWidth;
+      }
+    },
+
+    /**
+     * Get/set the border color.
+     * @param  {String} data Border color.
+     * @return {Mixed}      CanvasInput or current border color.
+     */
+    borderColor: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._borderColor = data;
+
+        return self.render();
+      } else {
+        return self._borderColor;
+      }
+    },
+
+    /**
+     * Get/set the border radius.
+     * @param  {Number} data Border radius.
+     * @return {Mixed}      CanvasInput or current border radius.
+     */
+    borderRadius: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._borderRadius = data;
+
+        return self.render();
+      } else {
+        return self._borderRadius;
+      }
+    },
+
+    /**
+     * Get/set the background color.
+     * @param  {Number} data Background color.
+     * @return {Mixed}      CanvasInput or current background color.
+     */
+    backgroundColor: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._backgroundColor = data;
+
+        return self.render();
+      } else {
+        return self._backgroundColor;
+      }
+    },
+
+    /**
+     * Get/set the background gradient.
+     * @param  {Number} data Background gradient.
+     * @return {Mixed}      CanvasInput or current background gradient.
+     */
+    backgroundGradient: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._backgroundColor = self._renderCtx.createLinearGradient(
+          0,
+          0,
+          0,
+          self.outerH
+        );
+        self._backgroundColor.addColorStop(0, data[0]);
+        self._backgroundColor.addColorStop(1, data[1]);
+
+        return self.render();
+      } else {
+        return self._backgroundColor;
+      }
+    },
+
+    /**
+     * Get/set the box shadow.
+     * @param  {String} data     Box shadow in CSS format (1px 1px 1px rgba(0, 0, 0.5)).
+     * @param  {Boolean} doReturn (optional) True to prevent a premature render.
+     * @return {Mixed}          CanvasInput or current box shadow.
+     */
+    boxShadow: function(data, doReturn) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        // parse box shadow
+        var boxShadow = data.split('px ');
+        self._boxShadow = {
+          x: self._boxShadow === 'none' ? 0 : parseInt(boxShadow[0], 10),
+          y: self._boxShadow === 'none' ? 0 : parseInt(boxShadow[1], 10),
+          blur: self._boxShadow === 'none' ? 0 : parseInt(boxShadow[2], 10),
+          color: self._boxShadow === 'none' ? '' : boxShadow[3]
+        };
+
+        // take into account the shadow and its direction
+        if (self._boxShadow.x < 0) {
+          self.shadowL = Math.abs(self._boxShadow.x) + self._boxShadow.blur;
+          self.shadowR = self._boxShadow.blur + self._boxShadow.x;
+        } else {
+          self.shadowL = Math.abs(self._boxShadow.blur - self._boxShadow.x);
+          self.shadowR = self._boxShadow.blur + self._boxShadow.x;
+        }
+        if (self._boxShadow.y < 0) {
+          self.shadowT = Math.abs(self._boxShadow.y) + self._boxShadow.blur;
+          self.shadowB = self._boxShadow.blur + self._boxShadow.y;
+        } else {
+          self.shadowT = Math.abs(self._boxShadow.blur - self._boxShadow.y);
+          self.shadowB = self._boxShadow.blur + self._boxShadow.y;
+        }
+
+        self.shadowW = self.shadowL + self.shadowR;
+        self.shadowH = self.shadowT + self.shadowB;
+
+        self._calcWH();
+
+        if (!doReturn) {
+          self._updateCanvasWH();
+
+          return self.render();
+        }
+      } else {
+        return self._boxShadow;
+      }
+    },
+
+    /**
+     * Get/set the inner shadow.
+     * @param  {String} data In the format of a CSS box shadow (1px 1px 1px rgba(0, 0, 0.5)).
+     * @return {Mixed}          CanvasInput or current inner shadow.
+     */
+    innerShadow: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._innerShadow = data;
+
+        return self.render();
+      } else {
+        return self._innerShadow;
+      }
+    },
+
+    /**
+     * Get/set the text selection color.
+     * @param  {String} data Color.
+     * @return {Mixed}      CanvasInput or current selection color.
+     */
+    selectionColor: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._selectionColor = data;
+
+        return self.render();
+      } else {
+        return self._selectionColor;
+      }
+    },
+
+    /**
+     * Get/set the place holder text.
+     * @param  {String} data Place holder text.
+     * @return {Mixed}      CanvasInput or current place holder text.
+     */
+    placeHolder: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._placeHolder = data;
+
+        return self.render();
+      } else {
+        return self._placeHolder;
+      }
+    },
+
+    /**
+     * Get/set the current text box value.
+     * @param  {String} data Text value.
+     * @return {Mixed}      CanvasInput or current text value.
+     */
+    value: function(data) {
+      var self = this;
+
+      if (typeof data !== 'undefined') {
+        self._value = data + '';
+        self._hiddenInput.value = data + '';
+
+        // update the cursor position
+        self._cursorPos = self._clipText().length;
+
+        self.render();
+
+        return self;
+      } else {
+        return (self._value === self._placeHolder) ? '' : self._value;
+      }
+    },
+
+    /**
+     * Set or fire the onsubmit event.
+     * @param  {Function} fn Custom callback.
+     */
+    onsubmit: function(fn) {
+      var self = this;
+
+      if (typeof fn !== 'undefined') {
+        self._onsubmit = fn;
+
+        return self;
+      } else {
+        self._onsubmit();
+      }
+    },
+
+    /**
+     * Set or fire the onkeydown event.
+     * @param  {Function} fn Custom callback.
+     */
+    onkeydown: function(fn) {
+      var self = this;
+
+      if (typeof fn !== 'undefined') {
+        self._onkeydown = fn;
+
+        return self;
+      } else {
+        self._onkeydown();
+      }
+    },
+
+    /**
+     * Set or fire the onkeyup event.
+     * @param  {Function} fn Custom callback.
+     */
+    onkeyup: function(fn) {
+      var self = this;
+
+      if (typeof fn !== 'undefined') {
+        self._onkeyup = fn;
+
+        return self;
+      } else {
+        self._onkeyup();
+      }
+    },
+
+    /**
+     * Place focus on the CanvasInput box, placing the cursor
+     * either at the end of the text or where the user clicked.
+     * @param  {Number} pos (optional) The position to place the cursor.
+     * @return {CanvasInput}
+     */
+    focus: function(pos) {
+      var self = this;
+
+      // only fire the focus event when going from unfocussed
+      if (!self._hasFocus) {
+        self._onfocus(self);
+
+        // remove focus from all other inputs
+        for (var i=0; i<inputs.length; i++) {
+          if (inputs[i]._hasFocus) {
+            inputs[i].blur();
+          }
+        }
+      }
+
+      // remove selection
+      if (!self._selectionUpdated) {
+        self._selection = [0, 0];
+      } else {
+        delete self._selectionUpdated;
+      }
+
+      // if this is readonly, don't allow it to get focus
+      self._hasFocus = true;
+      if (self._readonly) {
+        self._hiddenInput.readOnly = true;
+        return;
+      } else {
+        self._hiddenInput.readOnly = false;
+      }
+
+      // update the cursor position
+      self._cursorPos = (typeof pos === 'number') ? pos : self._clipText().length;
+
+      // clear the place holder
+      if (self._placeHolder === self._value) {
+        self._value = '';
+        self._hiddenInput.value = '';
+      }
+
+      self._cursor = true;
+
+      // setup cursor interval
+      if (self._cursorInterval) {
+        clearInterval(self._cursorInterval);
+      }
+      self._cursorInterval = setInterval(function() {
+        self._cursor = !self._cursor;
+        self.render();
+      }, 500);
+
+      // move the real focus to the hidden input
+      var hasSelection = (self._selection[0] > 0 || self._selection[1] > 0);
+      self._hiddenInput.focus();
+      self._hiddenInput.selectionStart = hasSelection ? self._selection[0] : self._cursorPos;
+      self._hiddenInput.selectionEnd = hasSelection ? self._selection[1] : self._cursorPos;
+
+      return self.render();
+    },
+
+    /**
+     * Removes focus from the CanvasInput box.
+     * @param  {Object} _this Reference to this.
+     * @return {CanvasInput}
+     */
+    blur: function(_this) {
+      var self = _this || this;
+
+      self._onblur(self);
+
+      if (self._cursorInterval) {
+        clearInterval(self._cursorInterval);
+      }
+      self._hasFocus = false;
+      self._cursor = false;
+      self._selection = [0, 0];
+      self._hiddenInput.blur();
+
+      // fill the place holder
+      if (self._value === '') {
+        self._value = self._placeHolder;
+      }
+
+      return self.render();
+    },
+
+    /**
+     * Fired with the keydown event to draw the typed characters.
+     * @param  {Event}       e    The keydown event.
+     * @param  {CanvasInput} self
+     * @return {CanvasInput}
+     */
+    keydown: function(e, self) {
+      var keyCode = e.which,
+        isShift = e.shiftKey,
+        key = null,
+        startText, endText;
+
+      // make sure the correct text field is being updated
+      if (self._readonly || !self._hasFocus) {
+        return;
+      }
+
+      // fire custom user event
+      self._onkeydown(e, self);
+
+      // add support for Ctrl/Cmd+A selection
+      if (keyCode === 65 && (e.ctrlKey || e.metaKey)) {
+        self.selectText();
+        e.preventDefault();
+        return self.render();
+      }
+
+      // block keys that shouldn't be processed
+      if (keyCode === 17 || e.metaKey || e.ctrlKey) {
+        return self;
+      }
+
+      if (keyCode === 13) { // enter key
+        e.preventDefault();
+        self._onsubmit(e, self);
+      } else if (keyCode === 9) { // tab key
+        e.preventDefault();
+        if (inputs.length > 1) {
+          var next = (inputs[self._inputsIndex + 1]) ? self._inputsIndex + 1 : 0;
+          self.blur();
+          setTimeout(function() {
+            inputs[next].focus();
+          }, 10);
+        }
+      }
+
+      // update the canvas input state information from the hidden input
+      self._value = self._hiddenInput.value;
+      self._cursorPos = self._hiddenInput.selectionStart;
+      self._selection = [0, 0];
+
+      return self.render();
+    },
+
+    /**
+     * Fired with the click event on the canvas, and puts focus on/off
+     * based on where the user clicks.
+     * @param  {Event}       e    The click event.
+     * @param  {CanvasInput} self
+     * @return {CanvasInput}
+     */
+    click: function(e, self) {
+      var mouse = self._mousePos(e),
+        x = mouse.x,
+        y = mouse.y;
+
+      if (self._endSelection) {
+        delete self._endSelection;
+        delete self._selectionUpdated;
+        return;
+      }
+
+      if (self._canvas && self._overInput(x, y) || !self._canvas) {
+        if (self._mouseDown) {
+          self._mouseDown = false;
+          self.click(e, self);
+          return self.focus(self._clickPos(x, y));
+        }
+      } else {
+        return self.blur();
+      }
+    },
+
+    /**
+     * Fired with the mousemove event to update the default cursor.
+     * @param  {Event}       e    The mousemove event.
+     * @param  {CanvasInput} self
+     * @return {CanvasInput}
+     */
+    mousemove: function(e, self) {
+      var mouse = self._mousePos(e),
+        x = mouse.x,
+        y = mouse.y,
+        isOver = self._overInput(x, y);
+
+      if (isOver && self._canvas) {
+        self._canvas.style.cursor = 'text';
+        self._wasOver = true;
+      } else if (self._wasOver && self._canvas) {
+        self._canvas.style.cursor = 'default';
+        self._wasOver = false;
+      }
+
+      if (self._hasFocus && self._selectionStart >= 0) {
+        var curPos = self._clickPos(x, y),
+          start = Math.min(self._selectionStart, curPos),
+          end = Math.max(self._selectionStart, curPos);
+
+        if (!isOver) {
+          self._selectionUpdated = true;
+          self._endSelection = true;
+          delete self._selectionStart;
+          self.render();
+          return;
+        }
+
+        if (self._selection[0] !== start || self._selection[1] !== end) {
+          self._selection = [start, end];
+          self.render();
+        }
+      }
+    },
+
+    /**
+     * Fired with the mousedown event to start a selection drag.
+     * @param  {Event} e    The mousedown event.
+     * @param  {CanvasInput} self
+     */
+    mousedown: function(e, self) {
+      var mouse = self._mousePos(e),
+        x = mouse.x,
+        y = mouse.y,
+        isOver = self._overInput(x, y);
+
+      // setup the 'click' event
+      self._mouseDown = isOver;
+
+      // start the selection drag if inside the input
+      if (self._hasFocus && isOver) {
+        self._selectionStart = self._clickPos(x, y);
+      }
+    },
+
+    /**
+     * Fired with the mouseup event to end a selection drag.
+     * @param  {Event} e    The mouseup event.
+     * @param  {CanvasInput} self
+     */
+    mouseup: function(e, self) {
+      var mouse = self._mousePos(e),
+        x = mouse.x,
+        y = mouse.y;
+
+      // update selection if a drag has happened
+      var isSelection = self._clickPos(x, y) !== self._selectionStart;
+      if (self._hasFocus && self._selectionStart >= 0 && self._overInput(x, y) && isSelection) {
+        self._selectionUpdated = true;
+        delete self._selectionStart;
+        self.render();
+      } else {
+        delete self._selectionStart;
+      }
+
+      self.click(e, self);
+    },
+
+    /**
+     * Select a range of text in the input.
+     * @param  {Array} range (optional) Leave blank to select all. Format: [start, end]
+     * @return {CanvasInput}
+     */
+    selectText: function(range) {
+      var self = this,
+        range = range || [0, self._value.length];
+
+      // select the range of text specified (or all if none specified)
+      setTimeout(function() {
+        self._selection = [range[0], range[1]];
+        self._hiddenInput.selectionStart = range[0];
+        self._hiddenInput.selectionEnd = range[1];
+        self.render();
+      }, 1);
+
+      return self;
+    },
+
+    /**
+     * Helper method to get the off-DOM canvas.
+     * @return {Object} Reference to the canvas.
+     */
+    renderCanvas: function() {
+      return this._renderCanvas;
+    },
+
+    /**
+     * Clears and redraws the CanvasInput on an off-DOM canvas,
+     * and if a main canvas is provided, draws it all onto that.
+     * @return {CanvasInput}
+     */
+    render: function() {
+      var self = this,
+        ctx = self._renderCtx,
+        w = self.outerW,
+        h = self.outerH,
+        br = self._borderRadius,
+        bw = self._borderWidth,
+        sw = self.shadowW,
+        sh = self.shadowH;
+
+      if (!ctx) {
+        return;
+      }
+
+      // clear the canvas
+      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+      // setup the box shadow
+      ctx.shadowOffsetX = self._boxShadow.x;
+      ctx.shadowOffsetY = self._boxShadow.y;
+      ctx.shadowBlur = self._boxShadow.blur;
+      ctx.shadowColor = self._boxShadow.color;
+
+      // draw the border
+      if (self._borderWidth > 0) {
+        ctx.fillStyle = self._borderColor;
+        self._roundedRect(ctx, self.shadowL, self.shadowT, w - sw, h - sh, br);
+        ctx.fill();
+
+        ctx.shadowOffsetX = 0;
+        ctx.shadowOffsetY = 0;
+        ctx.shadowBlur = 0;
+      }
+
+      // draw the text box background
+      self._drawTextBox(function() {
+        // make sure all shadows are reset
+        ctx.shadowOffsetX = 0;
+        ctx.shadowOffsetY = 0;
+        ctx.shadowBlur = 0;
+
+        // clip the text so that it fits within the box
+        var text = self._clipText();
+
+        // draw the selection
+        var paddingBorder = self._padding + self._borderWidth + self.shadowT;
+        if (self._selection[1] > 0) {
+          var selectOffset = self._textWidth(text.substring(0, self._selection[0])),
+            selectWidth = self._textWidth(text.substring(self._selection[0], self._selection[1]));
+
+          ctx.fillStyle = self._selectionColor;
+          ctx.fillRect(paddingBorder + selectOffset, paddingBorder, selectWidth, self._height);
+        }
+
+        // draw the cursor
+        if (self._cursor) {
+          var cursorOffset = self._textWidth(text.substring(0, self._cursorPos));
+          ctx.fillStyle = self._fontColor;
+          ctx.fillRect(paddingBorder + cursorOffset, paddingBorder, 1, self._height);
+        }
+
+        // draw the text
+        var textX = self._padding + self._borderWidth + self.shadowL,
+          textY = Math.round(paddingBorder + self._height / 2);
+
+        // only remove the placeholder text if they have typed something
+        text = (text === '' && self._placeHolder) ? self._placeHolder : text;
+
+        ctx.fillStyle = (self._value !== '' && self._value !== self._placeHolder) ? self._fontColor : self._placeHolderColor;
+        ctx.font = self._fontStyle + ' ' + self._fontWeight + ' ' + self._fontSize + 'px ' + self._fontFamily;
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(text, textX, textY);
+
+        // parse inner shadow
+        var innerShadow = self._innerShadow.split('px '),
+          isOffsetX = self._innerShadow === 'none' ? 0 : parseInt(innerShadow[0], 10),
+          isOffsetY = self._innerShadow === 'none' ? 0 : parseInt(innerShadow[1], 10),
+          isBlur = self._innerShadow === 'none' ? 0 : parseInt(innerShadow[2], 10),
+          isColor = self._innerShadow === 'none' ? '' : innerShadow[3];
+
+        // draw the inner-shadow (damn you canvas, this should be easier than this...)
+        if (isBlur > 0) {
+          var shadowCtx = self._shadowCtx,
+            scw = shadowCtx.canvas.width,
+            sch = shadowCtx.canvas.height;
+
+          shadowCtx.clearRect(0, 0, scw, sch);
+          shadowCtx.shadowBlur = isBlur;
+          shadowCtx.shadowColor = isColor;
+
+          // top shadow
+          shadowCtx.shadowOffsetX = 0;
+          shadowCtx.shadowOffsetY = isOffsetY;
+          shadowCtx.fillRect(-1 * w, -100, 3 * w, 100);
+
+          // right shadow
+          shadowCtx.shadowOffsetX = isOffsetX;
+          shadowCtx.shadowOffsetY = 0;
+          shadowCtx.fillRect(scw, -1 * h, 100, 3 * h);
+
+          // bottom shadow
+          shadowCtx.shadowOffsetX = 0;
+          shadowCtx.shadowOffsetY = isOffsetY;
+          shadowCtx.fillRect(-1 * w, sch, 3 * w, 100);
+
+          // left shadow
+          shadowCtx.shadowOffsetX = isOffsetX;
+          shadowCtx.shadowOffsetY = 0;
+          shadowCtx.fillRect(-100, -1 * h, 100, 3 * h);
+
+          // create a clipping mask on the main canvas
+          self._roundedRect(ctx, bw + self.shadowL, bw + self.shadowT, w - bw * 2 - sw, h - bw * 2 - sh, br);
+          ctx.clip();
+
+          // draw the inner-shadow from the off-DOM canvas
+          ctx.drawImage(self._shadowCanvas, 0, 0, scw, sch, bw + self.shadowL, bw + self.shadowT, scw, sch);
+        }
+
+        // draw to the visible canvas
+        if (self._ctx) {
+          self._ctx.clearRect(self._x, self._y, ctx.canvas.width, ctx.canvas.height);
+          self._ctx.drawImage(self._renderCanvas, self._x, self._y);
+        }
+
+        return self;
+
+      });
+    },
+
+    /**
+     * Destroy this input and stop rendering it.
+     */
+    destroy: function() {
+      var self = this;
+
+      // pull from the inputs array
+      var index = inputs.indexOf(self);
+      if (index) {
+        inputs.splice(index, 1);
+      }
+
+      // remove focus
+      if (self._hasFocus) {
+        self.blur();
+      }
+
+      // remove the hidden input box
+      document.body.removeChild(self._hiddenInput);
+
+      // remove off-DOM canvas
+      self._renderCanvas = null;
+      self._shadowCanvas = null;
+      self._renderCtx = null;
+    },
+
+    /**
+     * Draw the text box area with either an image or background color.
+     * @param  {Function} fn Callback.
+     */
+    _drawTextBox: function(fn) {
+      var self = this,
+        ctx = self._renderCtx,
+        w = self.outerW,
+        h = self.outerH,
+        br = self._borderRadius,
+        bw = self._borderWidth,
+        sw = self.shadowW,
+        sh = self.shadowH;
+
+      // only draw the background shape if no image is being used
+      if (self._backgroundImage === '') {
+        ctx.fillStyle = self._backgroundColor;
+        self._roundedRect(ctx, bw + self.shadowL, bw + self.shadowT, w - bw * 2 - sw, h - bw * 2 - sh, br);
+        ctx.fill();
+
+        fn();
+      } else {
+        var img = new Image();
+        img.src = self._backgroundImage;
+        img.onload = function() {
+          ctx.drawImage(img, 0, 0, img.width, img.height, bw + self.shadowL, bw + self.shadowT, w, h);
+
+          fn();
+        };
+      }
+    },
+
+    /**
+     * Deletes selected text in selection range and repositions cursor.
+     * @return {Boolean} true if text removed.
+     */
+    _clearSelection: function() {
+      var self = this;
+
+      if (self._selection[1] > 0) {
+        // clear the selected contents
+        var start = self._selection[0],
+          end = self._selection[1];
+
+        self._value = self._value.substr(0, start) + self._value.substr(end);
+        self._cursorPos = start;
+        self._cursorPos = (self._cursorPos < 0) ? 0 : self._cursorPos;
+        self._selection = [0, 0];
+
+        return true;
+      }
+
+      return false;
+    },
+
+    /**
+     * Clip the text string to only return what fits in the visible text box.
+     * @param  {String} value The text to clip.
+     * @return {String} The clipped text.
+     */
+    _clipText: function(value) {
+      var self = this;
+      value = (typeof value === 'undefined') ? self._value : value;
+
+      var textWidth = self._textWidth(value),
+        fillPer = textWidth / (self._width - self._padding),
+        text = fillPer > 1 ? value.substr(-1 * Math.floor(value.length / fillPer)) : value;
+
+      return text + '';
+    },
+
+    /**
+     * Gets the pixel with of passed text.
+     * @param  {String} text The text to measure.
+     * @return {Number}      The measured width.
+     */
+    _textWidth: function(text) {
+      var self = this,
+        ctx = self._renderCtx;
+
+      ctx.font = self._fontStyle + ' ' + self._fontWeight + ' ' + self._fontSize + 'px ' + self._fontFamily;
+      ctx.textAlign = 'left';
+
+      return ctx.measureText(text).width;
+    },
+
+    /**
+     * Recalculate the outer with and height of the text box.
+     */
+    _calcWH: function() {
+      var self = this;
+
+      // calculate the full width and height with padding, borders and shadows
+      self.outerW = self._width + self._padding * 2 + self._borderWidth * 2 + self.shadowW;
+      self.outerH = self._height + self._padding * 2 + self._borderWidth * 2 + self.shadowH;
+    },
+
+    /**
+     * Update the width and height of the off-DOM canvas when attributes are changed.
+     */
+    _updateCanvasWH: function() {
+      var self = this,
+        oldW = self._renderCanvas.width,
+        oldH = self._renderCanvas.height;
+
+      // update off-DOM canvas
+      self._renderCanvas.setAttribute('width', self.outerW);
+      self._renderCanvas.setAttribute('height', self.outerH);
+      self._shadowCanvas.setAttribute('width', self._width + self._padding * 2);
+      self._shadowCanvas.setAttribute('height', self._height + self._padding * 2);
+
+      // clear the main canvas
+      if (self._ctx) {
+        self._ctx.clearRect(self._x, self._y, oldW, oldH);
+      }
+    },
+
+    /**
+     * Creates the path for a rectangle with rounded corners.
+     * Must call ctx.fill() after calling this to draw the rectangle.
+     * @param  {Object} ctx Canvas context.
+     * @param  {Number} x   x-coordinate to draw from.
+     * @param  {Number} y   y-coordinate to draw from.
+     * @param  {Number} w   Width of rectangle.
+     * @param  {Number} h   Height of rectangle.
+     * @param  {Number} r   Border radius.
+     */
+    _roundedRect: function(ctx, x, y, w, h, r) {
+      if (w < 2 * r) r = w / 2;
+      if (h < 2 * r) r = h / 2;
+
+      ctx.beginPath();
+
+      ctx.moveTo(x + r, y);
+      ctx.lineTo(x + w - r, y);
+      ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+      ctx.lineTo(x + w, y + h - r);
+      ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+      ctx.lineTo(x + r, y + h);
+      ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+      ctx.lineTo(x, y + r);
+      ctx.quadraticCurveTo(x, y, x + r, y);
+
+      ctx.closePath();
+    },
+
+    /**
+     * Checks if a coordinate point is over the input box.
+     * @param  {Number} x x-coordinate position.
+     * @param  {Number} y y-coordinate position.
+     * @return {Boolean}   True if it is over the input box.
+     */
+    _overInput: function(x, y) {
+      var self = this,
+        xLeft = x >= self._x + self._extraX,
+        xRight = x <= self._x + self._extraX + self._width + self._padding * 2,
+        yTop = y >= self._y + self._extraY,
+        yBottom = y <= self._y + self._extraY + self._height + self._padding * 2;
+
+      return xLeft && xRight && yTop && yBottom;
+    },
+
+    /**
+     * Use the mouse's x & y coordinates to determine
+     * the position clicked in the text.
+     * @param  {Number} x X-coordinate.
+     * @param  {Number} y Y-coordinate.
+     * @return {Number}   Cursor position.
+     */
+    _clickPos: function(x, y) {
+      var self = this,
+        value = self._value;
+
+      // don't count placeholder text in this
+      if (self._value === self._placeHolder) {
+        value = '';
+      }
+
+      // determine where the click was made along the string
+      var text = self._clipText(value),
+        totalW = 0,
+        pos = text.length;
+
+      if (x - (self._x + self._extraX) < self._textWidth(text)) {
+        // loop through each character to identify the position
+        for (var i=0; i<text.length; i++) {
+          totalW += self._textWidth(text[i]);
+          if (totalW >= x - (self._x + self._extraX)) {
+            pos = i;
+            break;
+          }
+        }
+      }
+
+      return pos;
+    },
+
+    /**
+     * Calculate the mouse position based on the event callback and the elements on the page.
+     * @param  {Event} e
+     * @return {Object}   x & y values
+     */
+    _mousePos: function(e) {
+      var elm = e.target,
+        style = document.defaultView.getComputedStyle(elm, undefined),
+        paddingLeft = parseInt(style['paddingLeft'], 10) || 0,
+        paddingTop = parseInt(style['paddingLeft'], 10) || 0,
+        borderLeft = parseInt(style['borderLeftWidth'], 10) || 0,
+        borderTop = parseInt(style['borderLeftWidth'], 10) || 0,
+        htmlTop = document.body.parentNode.offsetTop || 0,
+        htmlLeft = document.body.parentNode.offsetLeft || 0,
+        offsetX = 0,
+        offsetY = 0,
+        x, y;
+
+      // calculate the total offset
+      if (typeof elm.offsetParent !== 'undefined') {
+        do {
+          offsetX += elm.offsetLeft;
+          offsetY += elm.offsetTop;
+        } while ((elm = elm.offsetParent));
+      }
+
+      // take into account borders and padding
+      offsetX += paddingLeft + borderLeft + htmlLeft;
+      offsetY += paddingTop + borderTop + htmlTop;
+
+      return {
+        x: e.pageX - offsetX,
+        y: e.pageY - offsetY
+      };
+    }
+  };
+})();
\ No newline at end of file
diff --git a/src/game/lib/js/round_rect_button.js b/src/game/lib/round_rect_button.js
similarity index 100%
rename from src/game/lib/js/round_rect_button.js
rename to src/game/lib/round_rect_button.js
diff --git a/src/game/login/login.js b/src/game/login/login.js
new file mode 100644
index 0000000..9a44bea
--- /dev/null
+++ b/src/game/login/login.js
@@ -0,0 +1,149 @@
+/////////////////////////////
+// Login
+
+var Login = {
+
+	create: function() {
+		var self = this;
+
+		this.game.stage.backgroundColor = '#4d4d4d';
+		
+		var phaser = game.add.image(game.world.centerX, game.world.centerY, 'phaser');
+		phaser.anchor.set(0.5);
+		phaser.alpha = 0.1;
+		game.stage.backgroundColor = '#4d4d4d';
+
+		// name
+		var textX = this.game.world.centerX - 360;
+		var inputX = this.game.world.centerX + 60;
+		var nameTextY = 340;
+		game.add.text(textX, nameTextY, "이름 :", textStyleBasic)
+		.setTextBounds(0, 0, 200, 0)
+		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
+		.boundsAlignH = 'right';
+
+		this.inputTextName = new InputTypeText(inputX, nameTextY);
+		this.inputTextName.anchor.set(0.5);
+		this.inputTextName.canvasInput.value('');
+		if(isDebugMode()) {
+			this.inputTextName.canvasInput.value('박지상');
+		}
+		this.inputTextName.canvasInput._onkeyup = function() {
+			if(event.keyCode == Phaser.Keyboard.ENTER) {
+				self.startMenu();
+			}
+		}
+
+		// birthday
+		var birthdayTextY = 400;
+		game.add.text(textX, birthdayTextY, "생년월일 :", textStyleBasic)
+		.setTextBounds(0, 0, 200, 0)
+		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
+		.boundsAlignH = 'right';
+
+		this.inputTextBirthday = new InputTypeText(inputX, birthdayTextY);
+		this.inputTextBirthday.anchor.set(0.5);
+		this.inputTextBirthday.canvasInput.value('');
+		if(isDebugMode()) {
+			this.inputTextBirthday.canvasInput.value('760621');
+		}
+		this.inputTextBirthday.canvasInput._onkeyup = function() {
+			if(event.keyCode == Phaser.Keyboard.ENTER) {
+				self.startMenu();
+			}
+		}
+	
+
+		this.inputTextName.canvasInput.focus();
+		// this.inputTextBirthday.canvasInput.focus();
+
+		// start button
+		/*
+		var textStyle = { font: "bold 32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" };
+		var buttonText = game.add.text(0, 0, "시작", textStyle);
+		buttonText.addColor("#a0d", 0);
+		buttonText.anchor.setTo(0.5, 0.4);
+
+		var startButton = game.add.button(game.world.centerX, game.world.centerY + 140, 'button', this.startMenu, this, 2, 1, 0);
+		startButton.anchor.set(0.5);
+		startButton.inputEnabled = true;
+		startButton.input.priorityId = 1;
+		startButton.input.useHandCursor = true;
+		startButton.addChild(buttonText);
+		*/
+
+		let setting = new RoundRectButtonSetting(200, 100);
+		setting.fontStyle = {
+			fontSize: "30px",
+			align: "center",
+			fontWeight: "",
+			stroke: "red",
+			strokeThickness: 5
+		};
+
+		let startButton = new RoundRectButton(setting, "둥근 모서리\n버튼", this.startMenu);
+		startButton.move(game.world.centerX, game.world.centerY + 140);
+	},
+
+	startMenu: function() {
+		var self = this;
+
+		playerName = this.inputTextName.canvasInput._value;
+		var birthday = this.inputTextBirthday.canvasInput._value;
+
+		xhr = new XMLHttpRequest();
+		xhr.onreadystatechange = function() {
+			// console.log("onreadystatechange : " + xhr);
+			// console.log("xhr.readyState : " + xhr.readyState);
+			// console.log("xhr.status : " + xhr.status);
+			if(xhr.readyState == 4 && xhr.status == 200) {
+				// console.log(xhr.responseText);
+				var jsonData = JSON.parse(xhr.responseText);
+				// console.log(JSON.stringify(jsonData));
+
+				// console.log(jsonData);
+				if(jsonData != null && jsonData["UserID"] != null) {
+					// login successed
+					self.loginSucceeded(jsonData);
+				} else {
+					// login failed
+					self.loginFailed(jsonData);
+				}
+			}
+		}
+		xhr.open('POST', 'login.php', true);
+		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+		var param = 'name=' + playerName + '&birthday=' + birthday;
+		// console.log(param);
+		xhr.send(param);
+
+		/*
+		var params = {
+			'name': this.inputTextName.canvasInput._value,
+			'birthday': this.inputTextBirthday.canvasInput._value
+		};
+		console.log(params);
+		console.log(JSON.stringify(params));
+
+		xhr.setRequestHeader("Content-type", "application/json");
+		// var data = JSON.stringify({"name":"박지상","birthday":"760621","test":101});
+		xhr.send(data);
+		xhr.send(JSON.stringify(params));
+
+		// xhr.send(null);
+		*/
+	},
+
+	loginSucceeded: function(jsonData) {
+		playerUserID = jsonData['UserID'];
+		// console.log('playerUserID : ' + playerUserID);
+
+		this.state.start('Menu');
+	},
+
+	loginFailed: function(jsonData) {
+		// show retry message
+		console.log('login failed, jsonData : ' + JSON.stringify(jsonData));
+	}
+
+}
\ No newline at end of file
diff --git a/src/game/login/main.js b/src/game/login/main.js
new file mode 100644
index 0000000..4f2566f
--- /dev/null
+++ b/src/game/login/main.js
@@ -0,0 +1,12 @@
+/////////////////////////////
+// Main game
+
+const CONTENT_ID = "Login";
+
+var game = new Phaser.Game(
+	GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y,
+	Phaser.CANVAS, CONTENT_ID
+);
+
+game.state.add('Login', Login);
+game.state.start('Login');
diff --git a/src/game/menu/menu_app.js b/src/game/menu/menu_app.js
new file mode 100644
index 0000000..d2329ae
--- /dev/null
+++ b/src/game/menu/menu_app.js
@@ -0,0 +1,191 @@
+/////////////////////////////
+// Menu
+
+var Menu = {
+
+	create: function() {
+		this.stageButtonArray = [];
+
+		var bar = game.add.graphics();
+		bar.beginFill(0x000000, 0.2);
+		bar.drawRect(0, 0, 1000, 80);
+
+		var newTextStyle = $.extend( {}, textStyleBasic);
+		newTextStyle.font = "bold 64px Arial";
+
+		var textPlayerName = game.add.text(0, 2, "연습 내용", newTextStyle)
+		.setTextBounds(0, 0, 1000, 80)
+		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+
+		var phaser = game.add.image(game.world.centerX, game.world.centerY + 70, 'phaser');
+		phaser.anchor.set(0.5);
+		phaser.alpha = 0.1;
+		game.stage.backgroundColor = '#4d4d4d';
+
+		// korean
+		var buttonPosX = 280;
+		var buttonKoreanPosY = 140;	// 380;
+
+		game.add.text(0, 2, "한글", newTextStyle)
+		.setTextBounds(0, buttonKoreanPosY + 20, 200, 80)
+		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+
+		for(var i = 0; i < 4; i++) {
+			var button = new TextButton(buttonPosX + i * 200, buttonKoreanPosY,
+				koreanLessonTitle[i], this.startStage);
+			button.name = "k" + (i + 1);
+			button.scaleTo(0.9);
+			this.stageButtonArray.push(button);
+		}
+
+		for(var i = 0; i < 4; i++) {
+			var button = new TextButton(buttonPosX + i * 200, buttonKoreanPosY + 100,
+				koreanLessonTitle[i + 4], this.startStage);
+			button.name = "k" + (i + 5);
+			button.scaleTo(0.9);
+			this.stageButtonArray.push(button);
+		}
+
+		var button = new TextButton(buttonPosX, buttonKoreanPosY + 200,
+			koreanLessonTitle[8], this.startStage);
+		button.name = "k9";
+		button.scaleTo(0.9);
+		this.stageButtonArray.push(button);
+
+		var button = new TextButton(buttonPosX + 200, buttonKoreanPosY + 200,
+			koreanLessonTitle[9], this.startStage);
+		button.name = "k10";
+		button.scaleTo(0.9);
+		this.stageButtonArray.push(button);
+
+
+		// english
+		var buttonEnglishPosY = 480;
+
+		game.add.text(0, 2, "영문", newTextStyle)
+		.setTextBounds(0, buttonEnglishPosY + 20, 200, 80)
+		.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+
+		for(var i = 0; i < 3; i++) {
+			var button = new TextButton(buttonPosX + i * 200, buttonEnglishPosY,
+				englishLessonTitle[i], this.startStage);
+			button.name = "e" + (i + 1);
+			button.scaleTo(0.9);
+			this.stageButtonArray.push(button);
+		}
+
+		for(var i = 0; i < 3; i++) {
+			var button = new TextButton(buttonPosX + i * 200, buttonEnglishPosY + 100,
+				englishLessonTitle[i + 3], this.startStage);
+			button.name = "e" + (i + 4);
+			button.scaleTo(0.9);
+			this.stageButtonArray.push(button);
+		}
+
+		var button = new TextButton(buttonPosX, buttonEnglishPosY + 200,
+			englishLessonTitle[8], this.startStage);
+		button.name = "e9";
+		button.scaleTo(0.9);
+		this.stageButtonArray.push(button);
+
+		var button = new TextButton(buttonPosX + 200, buttonEnglishPosY + 200,
+			englishLessonTitle[9], this.startStage);
+		button.name = "e10";
+		button.scaleTo(0.9);
+		this.stageButtonArray.push(button);
+
+		// for(var i = 0; i < this.stageButtonArray.length; i++) {
+		// 	console.log("button name : " + this.stageButtonArray[i].name);
+		// }
+
+		// bottom
+		var bottomAreaPositionY = 750;
+
+		var bar = game.add.graphics();
+		bar.beginFill(0xffffff, 0.1);
+		bar.drawRect(0, bottomAreaPositionY, 1000, 50);
+
+		var textStyleInfo = $.extend( {}, textStyleBasic);
+		textStyleInfo.font = "32px Arial";
+		textStyleInfo.align = "right";
+		textStyleInfo.boundsAlignH = "right";
+
+		var textPlayerName = game.add.text(800 - OFFSET_RIGHT_ALIGN, bottomAreaPositionY - 12, playerName, textStyleInfo)
+		.setTextBounds(0, 0, 200, 80)
+		.addColor('#ffffff', 0);
+		// .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+
+		this.loadTypingStageData();
+	},
+
+	loadTypingStageData: function() {
+		var self = this;
+
+		xhr = new XMLHttpRequest();
+		xhr.onreadystatechange = function() {
+			// console.log("onreadystatechange : " + xhr);
+			// console.log("xhr.readyState : " + xhr.readyState);
+			// console.log("xhr.status : " + xhr.status);
+			if(xhr.readyState == 4 && xhr.status == 200) {
+				// console.log(xhr.responseText);
+				var jsonData = JSON.parse(xhr.responseText);
+				self.updateStageButton(jsonData);
+			}
+		}
+		xhr.open('GET', 'activated_stage_list.php', true);
+		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+		xhr.send();
+	},
+
+	updateStageButton: function(jsonData) {
+		// console.log(JSON.stringify(jsonData));
+
+		for(var i = 0; i < jsonData.length; i++) {
+			// console.log(jsonData[i]["StageName"] + " : " + jsonData[i]["Activated"]);
+
+			this.activateStageButton(
+				// jsonData[i]["Language"],
+				jsonData[i]["StageName"],
+				jsonData[i]["Activated"]
+			);
+		}
+	},
+
+	activateStageButton: function(stageName, isActivated) {
+		for(var i = 0; i < this.stageButtonArray.length; i++) {
+			var buttonName = this.stageButtonArray[i].name;
+			var buttonLanguage = buttonName.charAt(0) == "k" ? "korean" : "english";
+			var buttonStageName = getStageCodeByStageNo(buttonName.substring(1));
+			var buttonNewName = buttonLanguage + "_" + buttonStageName;
+			// console.log("buttonNewName : " + buttonNewName);
+
+			if(buttonNewName == stageName) {
+				if(isActivated == true) {
+					// console.log("stageName : " + stageName);
+
+					this.stageButtonArray[i].startButton.alpha = 1;
+					this.stageButtonArray[i].startButton.inputEnabled = true;
+					return;
+				} else {
+					// console.log("this.stageButtonArray[" + i + "].name : " + this.stageButtonArray[i].name);
+					// console.log("buttonNewName : " + buttonNewName);
+
+					this.stageButtonArray[i].startButton.alpha = 0.3;
+					this.stageButtonArray[i].startButton.inputEnabled = false;
+					return;
+				}
+			}
+		}
+	},
+
+	startStage: function() {
+		var language = this.name.substring(0, 1) == "k" ? LANGUAGE_KOREAN : LANGUAGE_ENGLISH;
+		var level = this.name.substring(1);
+
+		playingStageData = new StageData(language, level);
+		// console.log(playingStageData);
+		
+		this.startState('TypingTestStage');
+	}
+
+}
\ No newline at end of file
diff --git a/src/game/mouse/space_invaders/define_variables.js b/src/game/mouse/space_invaders/define_variables.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/game/mouse/space_invaders/main.js b/src/game/mouse/space_invaders/main.js
new file mode 100644
index 0000000..06dd254
--- /dev/null
+++ b/src/game/mouse/space_invaders/main.js
@@ -0,0 +1,12 @@
+/////////////////////////////
+// Main game
+
+const CONTENT_ID = "Space Invaders";
+
+var game = new Phaser.Game(960, 540, Phaser.CANVAS, CONTENT_ID);
+
+game.state.add('Loading', Loading);
+game.state.start('Loading');
+
+// game.state.add('Login', Login);
+// game.state.add('Menu', Menu);
diff --git a/src/web/client/login.html b/src/web/client/login.html
new file mode 100644
index 0000000..c9caa1f
--- /dev/null
+++ b/src/web/client/login.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title>Login</title>
+
+
+		<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> -->
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.js"></script>
+
+		<!-- global source files -->
+		<script src="../../game/lib/input_type_text.js"></script>
+		<script src="../../game/lib/round_rect_button.js"></script>
+		<script src="../../game/global/define_variables_global.js"></script>
+
+		<!-- Space Invaders : source files -->
+		<script src="../../game/login/login.js"></script>
+		<script src="../../game/login/main.js"></script>
+
+
+		<style>
+			body{
+				padding: 0;
+				margin: 0;
+			}
+
+			canvas{
+				margin: 0 auto;
+			}
+		</style>
+	</head>
+
+	<body>
+		<div id="Space Invaders" style="text-align:center;" />
+	</body>
+</html>
\ No newline at end of file
diff --git a/src/web/client/space_invaders.html b/src/web/client/space_invaders.html
new file mode 100644
index 0000000..7ddb93e
--- /dev/null
+++ b/src/web/client/space_invaders.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title>Space Invaders</title>
+
+
+		<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> -->
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.js"></script>
+
+		<!-- global source files -->
+		<script src="../../game/global/define_variables_global.js"></script>
+		<script src="../../game/global/loading/loading.js"></script>
+
+		<!-- Space Invaders : source files -->
+		<script src="../../game/mouse/space_invaders/define_variables.js"></script>
+		<script src="../../game/mouse/space_invaders/main.js"></script>
+
+
+		<style>
+			body{
+				padding: 0;
+				margin: 0;
+			}
+
+			canvas{
+				margin: 0 auto;
+			}
+		</style>
+	</head>
+
+	<body>
+		<div id="Space Invaders" style="text-align:center;" />
+	</body>
+</html>
\ No newline at end of file