리팩토링 이후

weekly-after.tsx

const DAYS_OF_WEEK = ['일', '월', '화', '수', '목', '금', '토'];
const today = dayjs().format('YYYY-MM-DD');

const getColumnTitle = (dateStr: string, index: number) => {
  const dayOfMonth = dateStr.slice(8); // YYYY-MM-DD 에서 DD에 해당하는 부분
  const isToday = dateStr === today;

  return (
    <>
      <span className={`mr-px ${isToday ? 'p-[2px] bg-red-400 text-white' : 'p-px'} rounded-full`}>{parseInt(dayOfMonth)}</span>
      {`일 (${DAYS_OF_WEEK[index]})`}
    </>
  );
};

const renderJobs = (jobs: WeekData[keyof WeekData]) => (
  <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>
);

const generateColumns = (currentDate: Date): ColumnsType<WeekData> => {
  const weekDates = getWeekDates(currentDate);

  return columnsTemplate.map((col, index) => ({
    ...col,
    title: () => getColumnTitle(weekDates[index], index),
    render: (_, record: WeekData) => renderJobs(record[col.key as keyof WeekData]),
  }));
};

export default function Weekly({ date, setDate }: Props) {
  const columns = generateColumns(date);

  return (
    <Table columns={columns} pagination={false} className="weekly" />
  );
}