New date를 사용한 주간 달력 커스텀

1. 필요한 데이터 변수에 저장하기

const date = new Date();

  const todayWeak = date.getDay();
  const today = date.getDate();
  const lastday = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();

2. 일수 가져오는 함수(1,2,3,4 ...)

// 일수 가져오는 함수(1,2,3,4 ...)
  const getAlldate = (today: number, lastday: number) => {
    const dates = [];

    //초깃값 설정
    dates[0] = today;

    for (let i = 1; i <= 13; i++) {
      today++;
      //마지막 날보다 날짜가 클경우 today를 1로 초기화.
      if (today > lastday) {
        today = 1;
        dates.push(today);
      }
      //일반 경우 그냥 날짜 추가
      else {
        dates.push(today);
      }
    }

    //요일 정상적으로 뜨는지 확인해보자
    // console.log(dates);

    return dates;
  };

3. 요일 가져오는 함수

// 요일 표시하는 함수
  const getAllweak = (todayWeak: number) => {
    const strWeak = ['일', '월', '화', '수', '목', '금', '토'];
    const weaklist = [];

    //첫번째 오늘 날짜 적용 = 초깃값 설정
    weaklist[0] = '오늘';

    for (let i = 1; i <= 13; i++) {
      todayWeak++;

      //6일 이상이면 0으로 초기화
      if (todayWeak > 6) {
        todayWeak = 0;
        weaklist[i] = strWeak[todayWeak];
        // 오늘이면 오늘 추가, 오늘 다음 내일 추가
        // 조건 0번째가 오늘이고 1번째가 내일이 아니라면 내일 추가
      } else if (weaklist[0] === '오늘' && weaklist[1] !== '내일') {
        weaklist[i] = '내일';
        // 나머지 요일들 배열 추가
      } else {
        weaklist[i] = strWeak[todayWeak];
      }
    }

    // console.log(weaklist);

    return weaklist;
  };

4. 맵핑을 위한 배열안에 객체로 데이터 관리하기

2번과 3번에서 만든 함수 리턴값이 배열이기때문에 변수에 값을 담아주고 1번에 데이터를 함수 인자로 넘겨준다. 그후 동일한 키값을 가진 객체가 만들어지기 때문에 반복문을 활용해준다.

// 함수 리턴 값을 이용하여 함수에 값을 담아주기
  const CalendarDay = getAlldate(today, lastday);
  const CalendarWeak = getAllweak(todayWeak);

// 배열안 객체로 관리
  const [CalendarObject, setCalendarObject] = useState<{ weak: string; day: number }[]>([]);
  const getCalendar = () => {
    // 위에 유즈스태이트와 구분짓기위해 s르 붙힘
    const CalendarObjects = [];
    for (let i = 0; i <= 13; i++) {
      CalendarObjects.push({ weak: CalendarWeak[i], day: CalendarDay[i] });
    }
    setCalendarObject(CalendarObjects);
  };

  useEffect(() => {
    getCalendar();
  }, []);

5. 마무리 맵핑하기

맵핑시 ContentLi스타일드 컴포넌트에 클래스네임을 삼항 연산자로 주었다.

• active는 선택했는지 여부 파악이고 중요한건 토요일과 일요일 색 변환을 위한 클래스네임 삼항연산자이다.

<ContainerUl>
      {CalendarObject.map((el, idx) => (
        <button key={idx} onClick={() => onClickHandler(idx)}>
          <ContentLi
            className={
              curIdx === idx
                ? `active ${el.weak === '토' ? 'sat' : el.weak === '일' ? 'sun' : ''}`
                : el.weak === '토'
                ? 'sat'
                : el.weak === '일'
                ? 'sun'
                : ''
            }
          >
            <span className="day" ref={el => (WeakRefs.current[idx] = el)}>
              {el.day}
            </span>
            <span className="weak">{el.weak}</span>
          </ContentLi>
        </button>
      ))}
    </ContainerUl>

완성후

참고 블로그

블로그