+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+
+import {setUserName} from '../actions/userName';
+import {setGreetingText} from '../actions/greetingText';
+
+class InputArea extends React.PureComponent {
+ static propTypes = {
+ userName: PropTypes.string.isRequired,
+ greetingText: PropTypes.string.isRequired,
+ setUserName: PropTypes.func.isRequired,
+ setGreetingText: PropTypes.func.isRequired
+ };
+
+ state = {userName: '', greetingText: ''};
+
+ componentDidMount() {
+ const {greetingText} = this.props;
+
+ this.setState({greetingText: greetingText});
+ }
+
+ onChangeInput(ev, stateKey) {
+ this.setState({[stateKey]: ev.target.value});
+ }
+
+ onClickApplyButton() {
+ const {greetingText, userName} = this.state;
+
+ this.props.setUserName(userName);
+ this.props.setGreetingText(greetingText);
+ }
+
+ render() {
+ const {userName, greetingText} = this.state;
+
+ return (
+
+ User name{' '}
+ {
+ this.onChangeInput(ev, 'userName');
+ }}
+ />
+
+ Greeting:){' '}
+ {
+ this.onChangeInput(ev, 'greetingText');
+ }}
+ />
+
+
+
+ );
+ }
+}
+
+const mapStateToProps = state => {
+ const {greetingText, userName} = state;
+
+ return {
+ greetingText,
+ userName
+ };
+};
+
+const mapDispatchToProps = {
+ setUserName,
+ setGreetingText
+};
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(InputArea);
diff --git a/src/components/ResultMessageArea.js b/src/components/ResultMessageArea.js
new file mode 100755
index 0000000..8e9c3d4
--- /dev/null
+++ b/src/components/ResultMessageArea.js
@@ -0,0 +1,45 @@
+/**
+ * @fileoverview Result message input area component.
+ * @author NHN Ent. FE Development Lab
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {connect} from 'react-redux';
+
+class ResultMessageArea extends React.PureComponent {
+ static propTypes = {
+ userName: PropTypes.string,
+ greetingText: PropTypes.string
+ };
+
+ render() {
+ const {greetingText, userName} = this.props;
+ const text = `${greetingText} ${userName}${userName && '.'}`;
+
+ return (
+
+ {
+ ev.preventDefault();
+ }}
+ readOnly
+ />
+
+ );
+ }
+}
+
+const mapStateToProps = state => {
+ const {greetingText, userName} = state;
+
+ return {
+ greetingText,
+ userName
+ };
+};
+
+export default connect(mapStateToProps)(ResultMessageArea);
diff --git a/src/index.js b/src/index.js
new file mode 100755
index 0000000..649aca4
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,12 @@
+/**
+ * Index entry for bootstrapping source and assets.
+ */
+
+import {render} from 'react-dom';
+
+import '../assets/css/common.css';
+import '../assets/css/example.css';
+
+import App from './App';
+
+render(App, document.querySelector('#wrap'));
diff --git a/src/reducers/greetingText.js b/src/reducers/greetingText.js
new file mode 100644
index 0000000..072b53d
--- /dev/null
+++ b/src/reducers/greetingText.js
@@ -0,0 +1,24 @@
+/**
+ * @fileoverview 'state.greetingText' reducer.
+ * @author NHN Ent. FE Development Lab
+ */
+
+import {SET_GREETING_TEXT} from '../actions/greetingText';
+
+/**
+ * Reducer for greetingText state
+ * @param {string} state - current state
+ * @param {object} action - Action
+ * @param {string} action.type - Action type
+ * @param {string} action.greetingText - Greeting text string
+ * @returns {string}
+ */
+export const greetingText = (state = 'Hello!', action) => {
+ switch (action.type) {
+ case SET_GREETING_TEXT:
+ return action.greetingText;
+
+ default:
+ return state;
+ }
+};
diff --git a/src/reducers/index.js b/src/reducers/index.js
new file mode 100644
index 0000000..ee0f0e8
--- /dev/null
+++ b/src/reducers/index.js
@@ -0,0 +1,13 @@
+/**
+ * @fileoverview Reducer index file.
+ * @author NHN Ent. FE Development Lab
+ */
+import {combineReducers} from 'redux';
+
+import {greetingText} from './greetingText';
+import {userName} from './userName';
+
+export default combineReducers({
+ greetingText,
+ userName
+});
diff --git a/src/reducers/userName.js b/src/reducers/userName.js
new file mode 100644
index 0000000..b84d5f2
--- /dev/null
+++ b/src/reducers/userName.js
@@ -0,0 +1,24 @@
+/**
+ * @fileoverview 'state.userName' reducer.
+ * @author NHN Ent. FE Development Lab
+ */
+
+import {SET_USER_NAME} from '../actions/userName';
+
+/**
+ * Reducer for userName state
+ * @param {string} state - current state
+ * @param {object} action - Action
+ * @param {string} action.type - Action type
+ * @param {string} action.userName - User name string
+ * @returns {string}
+ */
+export const userName = (state = '', action) => {
+ switch (action.type) {
+ case SET_USER_NAME:
+ return action.userName;
+
+ default:
+ return state;
+ }
+};
diff --git a/src/store.js b/src/store.js
new file mode 100644
index 0000000..b9a14a9
--- /dev/null
+++ b/src/store.js
@@ -0,0 +1,28 @@
+/**
+ * @fileoverview Redux store creation & initialization.
+ * @export store
+ */
+
+import {createStore} from 'redux';
+
+import reducers from './reducers';
+
+/**
+ * Application's initial state.
+ * @type {{
+ * greetingText: string,
+ * userName: string
+ * }}
+ */
+const initialState = {
+ greetingText: 'Hello!',
+ userName: ''
+};
+
+/**
+ * Singleton store instance for this application.
+ * @type {Store}
+ */
+const store = createStore(reducers, initialState);
+
+export default store;
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100755
index 0000000..36c410d
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,97 @@
+const path = require('path');
+const webpack = require('webpack');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+
+module.exports = (env, options = {}) => {
+ const config = {
+ entry: {
+ app: ['./src/index.js']
+ },
+ output: {
+ filename: '[name].bundle.js',
+ libraryTarget: 'umd',
+ path: path.resolve(__dirname, 'dist')
+ },
+ module: {
+ rules: [
+ {
+ enforce: 'pre',
+ test: /\.js$/,
+ exclude: /node_modules/,
+ loader: 'eslint-loader'
+ },
+ {
+ test: /\.js$/,
+ exclude: /node_modules/,
+ use: {
+ loader: 'babel-loader'
+ }
+ },
+ {
+ test: /\.(png|jpg|gif|ttf)$/,
+ use: {
+ loader: 'file-loader',
+ options: {
+ name: '[path][name].[ext]'
+ }
+ }
+ },
+ {
+ test: /\.css$/,
+ use: [MiniCssExtractPlugin.loader, 'css-loader']
+ }
+ ]
+ },
+ optimization: {
+ splitChunks: {
+ cacheGroups: {
+ commons: {
+ test: /[\\/]node_modules[\\/]/,
+ name: 'vendors',
+ chunks: 'all'
+ }
+ }
+ }
+ }
+ };
+
+ if (options.mode === 'development') {
+ config.plugins = [
+ new webpack.HotModuleReplacementPlugin(),
+ new HtmlWebpackPlugin({
+ template: 'example/index.html'
+ })
+ ];
+
+ config.devtool = 'inline-source-map';
+ config.devServer = {
+ hot: true,
+ host: '0.0.0.0',
+ contentBase: './dist',
+ stats: {
+ color: true
+ }
+ };
+ } else {
+ config.optimization = {
+ minimizer: [
+ new UglifyJsPlugin({
+ cache: true,
+ parallel: true,
+ sourceMap: false
+ }),
+ new OptimizeCSSAssetsPlugin()
+ ]
+ };
+
+ config.plugins = [new CleanWebpackPlugin(['dist'])];
+ }
+
+ config.plugins.push(new MiniCssExtractPlugin());
+
+ return config;
+};