문제상황

{
  "data": [
    {
      "scheduleListId": 1,
      "hospitalName": "삼성서울병원",
      "hospitalHour": "10:00 ~ 18:00",
      "reservationHour": "10:00"
    },
    {
      "scheduleListId": 2,
      "hospitalName": "여의도서울성모병원",
      "hospitalHour": "09:00 ~ 18:00",
      "reservationHour": "15:00"
    },
    {
      "scheduleListId": 3,
      "hospitalName": "강남서울성모병원",
      "hospitalHour": "08:30 ~ 18:00",
      "reservationHours": [
        {
          "hourId": 3,
          "firstHour": "10:00",
          "secondHour": "12:30",
          "thirdHour": "13:00"
        }
      ]
    },
    {
      "scheduleListId": 4,
      "hospitalName": "고려대학교병원",
      "hospitalHour": "09:30 ~ 18:00",
      "reservationHours": [
        {
          "hourId": 4,
          "firstHour": "09:30",
          "secondHour": "14:30",
          "thirdHour": "15:30"
        }
      ]
    },
    {
      "scheduleListId": 5,
      "hospitalName": "강남세브란스병원",
      "hospitalHour": "08:00 ~ 18:00",
      "reservationHours": [
        {
          "hourId": 5,
          "firstHour": "10:00",
          "secondHour": "15:30",
          "thirdHour": "17:00"
        }
      ]
    }
  ]
}

예약시간이 하나일 때,

<div className="schedulelist_container">
        <span className="schedulelist_title">병원목록</span>
        <ul className="schedule_component">
          {scheduleList &&
            scheduleList.map((schedule, index) => {
              return (
                <li key={schedule.scheduleListId}>
                  <li className="hospital_name">{schedule.hospitalName}</li>
                  <li className="hospital_hour">
                    {`${dayOfWeek}요일 ${schedule.hospitalHour}`}
                  </li>
                  <li className="reservation_container">
                    <div className="reservation_hour">
                      {schedule.reservationHour}
                    </div>
                    {currentTime}
                    <div className="reservationable">예약 가능</div>
                    <div className="no_reservationable">예약 불가능</div>
                  </li>
                </li>
              );
            })}
        </ul>
      </div>

예약시간이 여러개일 때,

<div className="schedulelist_container">
        <span className="schedulelist_title">병원목록</span>
        <ul className="schedule_component">
          {scheduleList &&
            scheduleList.map((schedule, index) => {
              return (
                <li key={schedule.scheduleListId}>
                  <li className="hospital_name">{schedule.hospitalName}</li>
                  <li className="hospital_hour">
                    {`${dayOfWeek}요일 ${schedule.hospitalHour}`}
                  </li>
                  <li className="reservation_container">
                    <ul className="reservation_hours">
                      {scheduleList.reservationHours &&
                        scheduleList.reservationHours.map((hour, index) => {
                          {
                            <li key={hour.hourId}>
                              <span>{hour.firstHour}</span>
                              <span>{hour.secondHour}</span>
                              <span>{hour.thirdHour}</span>
                            </li>;
                          }
                        })}
                    </ul>
                    {currentTime}
                    <div className="reservationable">예약 가능</div>
                    <div className="no_reservationable">예약 불가능</div>
                  </li>
                </li>
              );
            })}
        </ul>
      </div>

• 현재 보여지는 코드는 목데이타를 저렇게 해놓고, UI에 출력을 해보려고 했으나, 나오지 않는 문제가 생겼다! 일단, 이 상태로 이 브랜치는 push한 상태다.

• 아침에 일어나서 목데이타를 어떻게 구성하고, key값과 관련해서 찾고 싶어했다.

• 예약시간이 여러개일 때, 직접 firstHour, secondHour, thirdHour 각각의 id값 부여해서 해야 한다는 걸 아침에 구글링해서 ‘목데이타 키값’으로 검색해서, https://velog.io/@ksung1889/mock-data 빠르게 훑어보았다. 객체 1개 안에 3개의 값들을 넣는 게 아니었다는 것이다.

• 목데이타에 있는 데이터가 UI로 출력이 된다면, 문제는 currentTime 현재시간 으로 출력되는 부분인데,…

  • 삼항연산자 이용

    • 예약시간이 1개일 때,

    currentTime > schedule.reservationHour ? 
    return (<div className="no_reservationable">예약 불가능</div>) : 
    return (<div className="reservationable">예약 가능</div>)
    

    • 예약시간이 여러개일 때,

    currentTime > hour.firstHour ? hour의 색깔을 회색text : 원래text색
    

    currentTime > hour.secondHour ? hour의 색깔을 회색text : 원래text색
    

    currentTime > hour.thirdHour ? hour의 색깔을 회색text : 원래text색
    

    ---

  • if 조건 이용

    • 예약시간이 1개일 때,

      if (currentTime > schedule.reservationHour) {
      	<div className="no_reservationable">예약 불가능</div>
      } else {
      	<div className="reservationable">예약 가능</div>
      }
      

    • 예약시간이 여러개일 때,

      이것도 적용해봤을 경우, 빨간줄이 나올 예상이 된다...
      

해결상황

먼저, 내가 놓친 부분으로 인해 발생한 목데이타를 수정해보았다.

{
  "data": [
    {
      "scheduleListId": 1,
      "hospitalName": "삼성서울병원",
      "hospitalHour": "10:00 ~ 18:00",
      "reservationHours": [
        {
          "hourId": 1,
          "hour": "10:00"
        },
        {
          "hourId": 2,
          "hour": "10:30"
        },
        {
          "hourId": 3,
          "hour": "11:00"
        }
      ]
    },
    {
      "scheduleListId": 2,
      "hospitalName": "여의도서울성모병원",
      "hospitalHour": "09:00 ~ 18:00",
      "reservationHours": [
        {
          "hourId": 1,
          "hour": "09:30"
        },
        {
          "hourId": 2,
          "hour": "13:00"
        },
        {
          "hourId": 3,
          "hour": "15:00"
        }
      ]
    },
    {
      "scheduleListId": 3,
      "hospitalName": "강남서울성모병원",
      "hospitalHour": "08:30 ~ 18:00",
      "reservationHours": [
        {
          "hourId": 1,
          "hour": "10:00"
        },
        {
          "hourId": 2,
          "hour": "12:30"
        },
        {
          "hourId": 3,
          "hour": "13:00"
        }
      ]
    },
    {
      "scheduleListId": 4,
      "hospitalName": "고려대학교병원",
      "hospitalHour": "09:30 ~ 18:00",
      "reservationHours": [
        {
          "hourId": 1,
          "hour": "09:30"
        },
        {
          "hourId": 2,
          "hour": "14:30"
        },
        {
          "hourId": 3,
          "hour": "15:30"
        }
      ]
    },
    {
      "scheduleListId": 5,
      "hospitalName": "강남세브란스병원",
      "hospitalHour": "08:00 ~ 18:00",
      "reservationHours": [
        {
          "hourId": 1,
          "hour": "10:00"
        },
        {
          "hourId": 2,
          "hour": "15:30"
        },
        {
          "hourId": 3,
          "hour": "17:00"
        }
      ]
    }
  ]
}

이렇게 json 목록을 수정하고,

<div className="schedulelist_container">
        <span className="schedulelist_title">병원목록</span>
        <ul className="schedule_component">
          {scheduleList &&
            scheduleList.map((schedule, index) => {
              return (
                <li key={schedule.scheduleListId}>
                  <li className="hospital_name">{schedule.hospitalName}</li>
                  <li className="hospital_hour">
                    {`${dayOfWeek}요일 ${schedule.hospitalHour}`}
                  </li>
                  <li className="reservation_container">
                    <ul className="reservation_hours">
                      {schedule.reservationHours &&
                        schedule.reservationHours.map(
                          (reservationHour, index) => {
                            return (
                              <li key={reservationHour.hourId}>
                                <span>{reservationHour.hour}</span>
                              </li>
                            );
                          }
                        )}
                    </ul>
                    {currentTime}
                    <div className="reservationable">예약 가능</div>
                    <div className="no_reservationable">예약 불가능</div>
                  </li>
                </li>
              );
            })}
        </ul>
      </div>

→ 이렇게 해보니 UI에 출력해졌다.

😅 2차 팀프로젝트 땐, 백엔드쪽에서 데이터를 주셔셔 그 데이터에 맞게 접근할 수 있는 방법을 배웠다면, 이 개인과제에선, 직접 목데이타를 만들어보며, 그 객체의 id값도 존재해야 한다는 것을 알게 되었다. 그래야 map돌릴 때 key값을 가지면서 코드가 돌아가는 이유가 되니깐…