[BUSGO] 시간표 테이블 구성

6004번 버스의 평일/토요일/일요일의 기점 출발 데이터를 쌓아놓은 것을 바탕으로 테이블 UI를 구성했다.

const result = departures?.reduce(
  (acc, dep) => {
    const dayOfWeek = dep.departure.slice(0, 3);

    switch (dayOfWeek) {
      case 'Sun':
        acc.sundays.push(dep.departure);
        break;
      case 'Sat':
        acc.saturdays.push(dep.departure);
        break;
      default:
        acc.weekdays.push(dep.departure);
        break;
    }
    return acc;
  },
  { weekdays: [], saturdays: [], sundays: [] },
);

일단 먼저 하나의 배열에 들어간 모든 시간을 주말, 토요일, 일요일의 각 배열에 push해서 새로운 배열을 생성해준다.

const getRows = (arr) => {
  // 배열을 받아서 행(row)으로 변환하는 함수
  const rows = []; // 행(row)을 저장할 빈 배열 생성
  const rowCount = Math.ceil(arr?.length / 10); // 배열의 길이를 10으로 나눈 후, 올림하여 행(row)의 개수 계산
  for (let i = 0; i < rowCount; i++) {
    // 행(row)의 개수만큼 반복
    const startIndex = i * 10; // 현재 행(row)의 시작 인덱스 계산
    const endIndex = Math.min(startIndex + 10, arr?.length); // 현재 행(row)의 끝 인덱스 계산
    rows.push(arr?.slice(startIndex, endIndex)); // 현재 행(row)을 배열에서 추출하여 rows 배열에 추가
  }
  return rows; // 변환된 행(row) 배열 반환
};

const weekdaysRows = getRows(result?.weekdays.filter((v) => v.includes('Tue')));
const saturdaysRows = getRows(result?.saturdays);
const sundaysRows = getRows(result?.sundays);

그리고 테이블의 한 줄당 10개의 시간씩 보여주기 위해서 새로운 함수를 생성한다.

{/* Weekdays */}
<TimeTable>
  <TableHead>
    <th>평일</th>
  </TableHead>
  <TableBody>
    {weekdaysRows.map((row, rowIndex) => (
      <tr key={rowIndex}>
        {row.map((time, columnIndex) => {
          // row 배열의 각 요소에 대해 반복문 실행
          const num = parseInt(time.split(':')[1], 10); // time 문자열에서 ':' 뒤의 숫자를 추출하여 정수로 변환
          const roundedNum = Math.floor(num / 10) * 10 + (num % 10 >= 5 ? 5 : 0); // 추출한 숫자를 10으로 나눈 몫에 10을 곱하고, 나머지가 5 이상이면 5를 더하여 반올림
          const roundedTime = `${time.slice(4, 6)}:${roundedNum.toString().padStart(2, '0')}`; // time 문자열에서 4~5번째 문자열과 반올림한 숫자를 조합하여 문자열 생성
          return <td key={columnIndex}>{roundedTime}</td>; // 생성한 문자열을 td 태그로 감싸서 반환
        })}
      </tr>
    ))}
  </TableBody>
</TimeTable>

위의 코드는 평일을 기준으로 작성된 코드다.

DB상의 시간표들의 분 단위가 5로 떨어졌으면 좋겠다고 생각해서 위와 같이 time문자열에서 분을 나타내는 숫자를 추출하여 내림하는 과정을 거친다.

그 후 다시 time의 '시'와 내림 처리된 '분'을 합쳐 td태그로 감싸서 렌더링 해준다.

위와 같이 5분단위로 내림 처리된 깔끔한 시간표를 생성했다.