mt.js

/* 밑에서 부터 읽으면 됨(?)
**  코드 흐름(라인 넘버 기준. 막 엔터치다 깨지면 나도 몰랑): 141(react 렌더링 시작) --> 78 (아이템 박스 생성) --> 103(인풋박스 바뀌는거 콜백 설정) -->
**  83 (참가 인원이 확정됨, 그에 따라 데이터 갱신) --> 111 (렌더링) --> 122 (각 품목 렌더링)
*/

function sum(args){
  var s=0
  args.map(function(data){
    var realPrice = data['priceByPiece']*data['amount']
    s+=(realPrice);
  });
  return s;
} // 개별 가격 * 1봉당 갯수 해서 실제 가격구하는 함수

function prettyMoney(money){
  if(typeof(money) != "number")
    return null;
  var man = parseInt((money / 10000))
  if(man < 1)
    return money + '원'
  return man+'만 '+(money-man*10000)+'원';
} // 123456원 12만 3456원으로 바꿔주는 함수

// TODO: 위에 두 함수 다른 파일로 분리. 성향이 다름

var Item = React.createClass({
  // TODO: 한사람당 소비하는 갯수(perMan)에 맞추어 NUMBERS값 곱해야함
  rawMarkup: function() {
    var data = this.props;
    var price = data['priceByPiece']*data['amount']; // 개별 가격 * 1봉(박스) 가격
    var totalAmount = data['amount']* NUMBERS;
    price = prettyMoney(price);
    var rawMarkup = marked(totalAmount+"개 ("+data['amount']+"X"+NUMBERS+")"+price.toString(), {sanitize: true});
    // TODO: 좀 이쁘게... 
    return { __html: rawMarkup };
  },

  render: function() {
    return (
      <tr className="item">
        <td>
          <b className="itemName">
            {this.props.name} 
          </b>
          </td> &nbsp;
        <td><u>개당 {this.props.priceByPiece}원</u> </td>
        <td><span className="price" dangerouslySetInnerHTML={this.rawMarkup()} /></td>
        <hr />
      </tr>
      // TODO: 테이블 정상작동 안됨. table 태그 위에 안씌워서 그럴수도 있고
    );
  }
});

var originData = [
  {"id": 1, "name": "나무젓가락", "priceByPiece": 25, "amount": 100, "perMan": 3},
  {"id": 2, "name": "종이컵", "priceByPiece": 23, "amount": 50, "perMan": 3},
  {"id": 3, "name": "위생접시", "priceByPiece": 23, "amount": 50, "perMan": 3},
  {"id": 4, "name": "플라스틱 숟가락", "priceByPiece": 8, "amount": 10, "perMan": 2},
  {"id": 5, "name": "새우깡", "priceByPiece": 3190, "amount": 1, "perMan": 0.3},
  {"id": 6, "name": "포스틱", "priceByPiece": 3100, "amount": 1, "perMan": 0.3},
  {"id": 7, "name": "감자깡", "priceByPiece": 3100, "amount": 1, "perMan": 0.3},
  {"id": 8, "name": "돼지 앞다리", "priceByPiece": 1470, "amount": 1, "perMan": 1},
  {"id": 9, "name": "냉장 돈목심", "priceByPiece": 1080, "amount": 1, "perMan": 1},
  {"id": 10, "name": "냉장 삼겹살", "priceByPiece": 1080, "amount": 1, "perMan": 1},
  {"id": 11, "name": "쌈장", "priceByPiece": 1470, "amount": 1, "perMan": 0},
  {"id": 12, "name": "김치", "priceByPiece": 1080, "amount": 1, "perMan": 0},
  {"id": 13, "name": "소주", "priceByPiece": 1200, "amount": 20, "perMan": 1.5},
  {"id": 14, "name": "맥주", "priceByPiece": 4000, "amount": 1, "perMan": 1},
  {"id": 15, "name": "매화수", "priceByPiece": 2500, "amount": 1, "perMan": 1},
];
// id, 품목, 개별가격, 한 박스 당 들어있는 물품양, 한 사람당 소비할 개수
// eg) 소주는 명당 1.5병, 새우깡은 셋이 하나

var NUMBERS = 1
// 참가 인원

var ItemBox = React.createClass(
{  
  getInitialState: function() {
    return {data: originData};
  },
  handleChange: function(numbers) {
    if(numbers < 1) // number가 0되면 뭘곱해도 다 0되서 ㄴㄴ 무조건 1이상
      return;
    NUMBERS = numbers;
    var newData = originData.map(function(data){
      // map 함수: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
      var tmp = $.extend(true, {}, data);
      // 얕은 복사 깊은 복사.
      // 그냥 tmp = data 해버리면 data의 변수값이 아니라 data변수 그 자체가 tmp가 되버림
      /* 예를 들면 data로 넘어오는 값이 1이라 가정, tmp=data 하면 tmp는 1됨 (이건 당연하고)
        근데 얕은 복사가 수행되었기 때문에 tmp=2 하면 originData도 값이 바뀜
        따라서 깊은 복사를 하기 위해 Jquery extend함수 써줌
      */ 
      tmp['priceByPiece'] *= numbers;
      return tmp;
    });
    this.setState({data: newData});
    
  },
  render: function() {
    var valueLink = {
      requestChange: this.handleChange
    };
    // https://facebook.github.io/react/docs/two-way-binding-helpers.html#reactlink-without-linkedstatemixin
    // 한국어 링크 절레절레.. 언제적꺼지
    // require('react-addons-linked-state-mixin'); 이거 하기 귀찮아서 저걸로함.

    return (
      <div className="itemBox">
        <h1>살 것</h1>
        <ItemList data={this.state.data} />
        <form>
          참가인원: <input type="text" valueLink={valueLink} /> 명
        </form>
      </div>
    );
  }
});

var ItemList = React.createClass({
  render: function() {
    var itemNodes = this.props.data.map(function(item) {
      console.log(item);
      return (
        <Item name={item.name} key={item.id} priceByPiece={item.priceByPiece} amount={item.amount}> // var Item으로 선언한  객체에서 this.props.name, this.props.key, this.props.priceByPiece, this.props.name.amount로 받아 올수 있게 인자 넘겨줌
        </Item>);
    });
    var total = prettyMoney(sum(this.props.data));
    return (
      <div className="itemList">
        {itemNodes}
        <h1>{total}</h1>
      </div>
    );
  }
});


ReactDOM.render(
  <ItemBox/>,
  document.getElementById('content')
);