과제 리뷰3

8. src/components/HourSelector/HourSelector.js

import React, { useState } from "react";
import { hours } from "../../Common/Common";
import "./index.scss";

const HourSelector = (props) => {
  const [show, setShow] = useState(false);
  const [selectHour, setSelectHour] = useState("");
  const _setOptions = () => {
    let hourArr = [];
    for (let i = 0; i < hours.length; i++) {
      hourArr.push(
        <div
          className="options"
          onClick={() => {
            setSelectHour(hours[i]);
            let dateObj =
              props.status === "start"
                ? Object.assign({}, props.date, {
                    startHour: hours[i],
                  })
                : Object.assign({}, props.date, {
                    finishHour: hours[i],
                  });
            props.viewAction.receiveView("date", dateObj);
            setShow(false);
          }}
          key={hours[i]}
        >
          {hours[i]}
        </div>
      );
    }
    return hourArr;
  };
  return (
    <div className="scroll">
      <input
        onClick={() => setShow(!show)}
        readOnly
        placeholder="시간 선택"
        value={selectHour}
        style={{ backgroundColor: selectHour ? "#efefef" : "" }}
        className={`hour-selector-input ${show}`}
      />
      {show && <div className="select-wrapper">{_setOptions()}</div>}
    </div>
  );
};

export default HourSelector;

1. input 을 readonly 처리한다.
2. click 하게 되면 show를 true 로 바뀌어 select-wrapper를 보여준다.
3. 들어가는 내용을 보면 "../../Common/Common" 에서 [오전12시, 오후 1시, ...]와 같은 배열을 미리 만들어 줬다. 그 배열의 길이만큼 for 문을 돌게 되는데, <div> 로 묶어 빈 어레이 (hourArr)에 push 해준다.
4. 클릭 하게 되면 status 에 따라서 (start 인지) store 에 저장할 key 이름을 변경해서 저장한다.

minuteSelector 역시 지금 컴포넌트와 똑같은 로직으로 작동한다.