캘린더 요일 열 만들기

캘린더 바디 영역 중 요일이 붙어있는 헤더를 만들 차례.
사용자 호키도키님의 포스팅을 참조해서 만들었다.

1. 접근하기

1. 배열에 "일"부터 "토"까지 일곱 개의 요일을 담는다.
2. .map을 이용해 해당 배열에 담긴 요일을 차례차례 불러오며 className을 설정해준다.
   • 일곱 개의 요일 div 전체에 공통된 스타일을 적용할 className 하나(여기서는 calBodyHeaderCell로 지정했다)에
   • 일요일 / 토요일 / 주중에 각각 다른 색을 적용하기 위한 className을 덧붙여준다.
3. 출력한 후 레이아웃을 설정한다.

2. 요일 불러오기

const dateArray = ["일", "월", "화", "수", "목", "금", "토"]

• 원본 포스팅에서는 각 언어를 다르게 설정할 때와 예외 상황을 처리해 주었지만 나는 우선 요일 배열은 고정시켜 사용하기로 한다.

3. 배열의 요소(요일)에 class 맵핑하기

const mapArrayToDate = (dateArray) => {
    return dateArray.map((date, index) => {
      const className = () => {
        let className = "calBodyHeaderCell";
        if (index === 0) {
          return className + " date-sun"
        } else if (index === 6) {
          return className + " date-sat"
        } else {
          return className + " date-weekday"
        }
      }
      return (
        <div className={className()}>
          { date }
        </div>
      )
    })
  }

• 이 부분은 두 겹으로 구성되어 있는데, 안쪽에 주어진 요소(date) index에 따라 className의 요소를 부여하고 구성하는 className 이라는 함수와,

• 바깥에 그렇게 주어진 className을 div에 지정하고 해당 요소(date)를 나열하는 mapArrayToDate 라는 함수로 되어있다.

• 같은 이름이 함수명과 동시에 변수명으로 사용되고 있으므로, 주의해서 살펴보고 이해해야 한다.

함수 명 부여할 때 주의할 점

return className + " date-sun"

• 이 부분에서 띄어쓰기 없이 "date-sun"으로 작성하면 결과적으로 클래스명이 "calBodyHeaderCelldate-sun" 으로 완성된다. 띄어쓰기를 이용해 함수명을 분리하자.

3. 레이아웃

• 그리드를 사용해 column을 7개로 균등 분할했다.
• 이 경우 각각의 div는 따로 위치를 부여하지 않아도 자동으로 분할된 영역에 들어가게 된다.

// 캘린더 바디 중 요일 영역

.calBodyHeader {
  height: 100%;
  width: 100%;

  background-color: #EFBF43;
  
  display: grid;
  grid-template-columns: repeat(7, 1fr);

  justify-items: center;
  align-items: center;
}

// 각 요일 영역 셀 공통
.calBodyHeaderCell {
  font-size: x-small;
}

// 요일별 셀 속성
.date-sun {
  color: red;
}
.date-sat {
  color: blue;
}
.date-weekday {
  color: black;
}

4. 전체 코드

import React from "react";

function Calendar() {

  const dateArray = ["일", "월", "화", "수", "목", "금", "토"]

  const mapArrayToDate = (dateArray) => {
    return dateArray.map((date, index) => {
      const className = () => {
        let className = "calBodyHeaderCell";
        if (index === 0) {
          return className + " date-sun"
        } else if (index === 6) {
          return className + " date-sat"
        } else {
          return className + " date-weekday"
        }
      }
      return (
        <div className={className()}>
          { date }
        </div>
      )
    })
  }

  return (
    <div className="calBodyWrapper">
      <div className="calBodyHeader">
        { mapArrayToDate(dateArray) }        
      </div>
      <div className="calBodyContent">
        
      </div>
    </div>
  );
}

export default Calendar;