[NextJS] Notion API - 기간 맵핑

notion api에서 block으로 가져온 데이터를 가져오고 보니 block으로 객체형태로 오면서

기간이 date로 오면서 해당 부분을 원하는 모양으로 custom하고 싶어서 해당 작업을했다. 

 

`period-maaping.ts`

export const calculatedPeriod = (start: string, end: string): string => {
  const startDateStringArray = start.split('-');
  const endDateStringArray = end.split('-');

  var startDate = new Date(
    Number(startDateStringArray[0]),
    Number(startDateStringArray[1]) - 1, // 월은 0부터 시작하므로 -1 필요
    Number(startDateStringArray[2]),
  );
  var endDate = new Date(
    Number(endDateStringArray[0]),
    Number(endDateStringArray[1]) - 1, // 월은 0부터 시작하므로 -1 필요
    Number(endDateStringArray[2]),
  );

  const diffInMs = Math.abs(endDate.getTime() - startDate.getTime());
  const days = diffInMs / (1000 * 60 * 60 * 24);
  const result = Math.floor(days / 7);

  return result === 0 ? `${days}일` : `${result}주`;
};

 

3주 걸렸는데 21일이라고 표시되는게 너무 과격해서 '주'로 보여지게끔 작업했다.

그치만 1주일도 안걸렸을 경우엔 '일'로 표시하게 작업했다.

 

`period.tsx`

import { calculatedPeriod } from '@/utils/period-mapping';

interface Props {
  start: string;
  end: string | null;
}

const CommonPeriod = ({ start, end }: Props) => {
  return (
    <p className="my-1 ">
      {end ? (
        <>
          작업기간 : {start} ~ {end} ({calculatedPeriod(start, end)})
        </>
      ) : (
        <>작업기간 : {start} ~ (진행 중)</>
      )}
    </p>
  );
};

export default CommonPeriod;

 

표시하고 싶은 부분에선 위와 같이 작업했다