[TIL] 내일배움캠프 React 과정 2023.03.05

Today I Learned

• 청약캘린더 CSS 작업

 

---

FullCalendar 커스텀 CSS 적용하기

기본 디자인 / 커스텀 디자인 적용

너무 예뻐진 거 같다 🥰❤️

 

Overriding Properties

Use the Chrome DevTools or equivelant to pinpoint the element you want to customize. Then, view its active CSS statements. For example, if you want to customize the day-of-week headers at the top of dayGrid view, you’ll see this CSS:

.fc .fc-col-header-cell-cushion {
  display: inline-block;
  padding: 2px 4px;
}

 

<S.FullCalendarContainer>
    <FullCalendar
      plugins={[dayGridPlugin, interactionPlugin]}
      initialView="dayGridMonth"
    />
</S.FullCalendarContainer>

FullCalendar를 styled-components로 감싸고 해당 styled-components에 속성을 주면 된다.

 

const FullCalendarContainer = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;

  // 캘린더 전체 사이즈 조정
  .fc {
    width: 100%;
  }

  // toolbar container
  .fc .fc-toolbar.fc-header-toolbar {
    margin: 0;
    padding: 0 40px;
    background-color: #356eff;
    height: 63px;
    font-weight: 600;
    font-size: 12px;
    line-height: 29px;
    color: white;
    border-radius: 20px 20px 0px 0px;
  }

  // toolbar 버튼
  .fc .fc-button-primary {
    background-color: transparent;
    border: none;

    span {
      font-weight: 500;
      font-size: 28px;
    }

    :hover {
      background-color: transparent;
    }
  }

  // 요일 부분
  .fc-theme-standard th {
    height: 32px;
    padding-top: 3.5px;
    background: #e5edff;
    border: 1px solid #dddee0;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: #7b7b7b;
  }

  // 오늘 날짜 배경색
  .fc .fc-daygrid-day.fc-day-today {
    background-color: #fff8bd;
    color: #356eff;
  }

  // 날짜별 그리드
  .fc .fc-daygrid-day-frame {
    padding: 10px;
  }

  // 날짜  ex) 2일
  .fc .fc-daygrid-day-top {
    flex-direction: row;
    margin-bottom: 3px;
  }

  // 각 이벤트 요소
  .fc-event {
    cursor: pointer;
    padding: 5px 8px;
    margin-bottom: 5px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 14px;
  }
`;

 

공식문서 https://fullcalendar.io/docs/css-customization

 

---

회고

오후에 잠시 디자인 회의하며 디자이저님 요청에 따라 디테일한 부분 수정하고 그 이후로는 계속 청약캘린더 수정을 했다. 일단 분양 형태에 따라 이벤트 색상을 세분화하는 걸 했고, 라이브러리로 사용하는 거라 걱정했던 커스텀 CSS 적용도 figma와 똑같이 적용할 수 있었다! 우리 팀 너무나도 멋진 결과물을 만들어 내고 있는 거 같아서 뿌듯하다 🥰 (물론 그만큼 팀원들 모두 시간을 갈아 넣었지만..🥹)