리팩토링 이전

weekly-before.tsx

import dayjs from 'dayjs';
import type { ColumnsType } from 'antd/es/table';

/** @returns {string[]} 'YYYY-MM-DD' 형식의 문자열을 요소로 갖는 배열 */
function getWeekDates(startDate: Date): string[] {
  const dates = [];
  const startDayOfWeek = startDate.getDay(); // 월요일이라면 1을 반환

  for (let i = 0; i < 7; i++) {
    const date = new Date(startDate);
    date.setDate(startDate.getDate() - startDayOfWeek + i);
    dates.push(dayjs(date).format('YYYY-MM-DD'));
  }

  return dates;
}

interface WeekData {
  sun: JobSubset[];
  mon: JobSubset[];
  tue: JobSubset[];
  wed: JobSubset[];
  thu: JobSubset[];
  fri: JobSubset[];
  sat: JobSubset[];
  [key: string]: JobSubset[];
}

const columnsTemplate: ColumnsType<WeekData> = [
  { key: 'sun', width: '14%' },
  { key: 'mon', width: '14%' },
  { key: 'tue', width: '14%' },
  { key: 'wed', width: '14%' },
  { key: 'thu', width: '14%' },
  { key: 'fri', width: '14%' },
  { key: 'sat', width: '14%' },
];

type Props = {
  date: Date;
  setDate: React.Dispatch<React.SetStateAction<Date>>;
};

export default function Weekly({ date, setDate }: Props) {
  const [columns, setColumns] = useState(columnsTemplate);

  useEffect(() => {
    const weekDates = getWeekDates(date);
    const newColumns: ColumnsType<WeekData> = columnsTemplate.map((col, index) => ({
      ...col,
      title: () => {
        const today = dayjs().format('YYYY-MM-DD');

        return (
          <>
            {weekDates[index] === today ? (
              <span className="p-1 mr-px rounded-full bg-red-400 text-white">{weekDates[index].slice(8)}</span>
            ) : (
              parseInt(weekDates[index].slice(8)) // YYYY-MM-DD에서 DD에 해당하는 02, 03 을 2, 3과 같은 숫자로 변환
            )}
            {`일 (${['일', '월', '화', '수', '목', '금', '토'][index]})`}
          </>
        );
      },
      render: (_, record) => {
        const jobs = record[col.key as keyof WeekData];

        return (
          <ul>
            {jobs.map((job) => {
              const content = job.translator?.name ? `[${job.translator.name}] ${job.name}` : job.name;

              return (
                <li key={job.id} className="mb-1 p-2 rounded shadow-md">
                  <Badge color="blue" text={content} />
                </li>
              );
            })}
          </ul>
        );
      },
    }));

    setColumns(newColumns);
  }, [date]);
  
    return (
      <Table columns={columns} pagination={false} className="weekly" />
    );
}