📌 React Calendar 설정 및 커스텀 정리

✅ 1. 주말을 숨기거나 비활성화

🔹 주말을 선택하지 못하게 하기

tileDisabled={({ date }) => date.getDay() === 0 || date.getDay() === 6}

✅ 토요일(6)과 일요일(0)을 선택할 수 없도록 설정

🔹 주말을 아예 화면에서 숨기기

.react-calendar__month-view__weekdays__weekday:nth-child(7),
.react-calendar__month-view__weekdays__weekday:nth-child(1),
.react-calendar__tile:nth-child(7n),
.react-calendar__tile:nth-child(7n-6) {
  display: none; /* 주말 안 보이게 설정 */
}

✅ 토, 일을 화면에서 아예 숨김 (단, 그리드 구조는 유지됨)

---

✅ 2. 요일을 "일월화수목금" 순서로 변경

🔹 React Calendar 기본은 월화수목금토일 → 일월화수목금토로 변경

<Calendar
  calendarType="hebrew" // 요일을 '일월화수목금토' 순서로 설정
/>

✅ 요일 순서를 일요일부터 시작하도록 변경

🔹 일요일만 빨간색으로 표시

.react-calendar__month-view__weekdays__weekday abbr[aria-label="일요일"],
.react-calendar__month-view__weekdays__weekday abbr[title="일요일"] {
  color: red !important;
}

✅ "일" 요일을 빨간색으로 표시

---

✅ 3. 현재 월의 날짜만 표시

🔹 현재 월이 아닌 날짜 비활성화

<Calendar
  tileDisabled={({ date }) => date.getMonth() !== new Date().getMonth()}
/>

✅ 현재 월이 아닌 날짜는 클릭할 수 없도록 비활성화

🔹 현재 월이 아닌 날짜를 화면에서 숨기기

.react-calendar__tile--disabled {
  visibility: hidden;
  pointer-events: none;
}

✅ 현재 월이 아닌 날짜를 완전히 숨김

---

✅ 4. 네비게이션(달력 상단) 한글로 변경

🔹 "YYYY년 MM월" 형식으로 표시

<Calendar
  locale="ko-KR"
  formatMonthYear={(locale, date) => `${date.getFullYear()}년 ${date.getMonth() + 1}월`}
/>

✅ 달력 상단에서 "2025년 3월" 형식으로 표시됨

---

✅ 5. 날짜에서 '일'을 빼고 숫자만 표시

<Calendar
  formatDay={(locale, date) => date.getDate()} // "12일" → "12"
/>

✅ 날짜를 숫자로만 표시 (예: "12"로 보이게)

---

✅ 6. 캘린더 스타일 커스텀

🔹 배경 흰색, border-radius: 10px, padding: 20px 적용

.react-calendar__viewContainer {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
}

🔹 네비게이션(달력 상단) 스타일 변경

.react-calendar__navigation {
  background: linear-gradient(135deg, #3856a1, #3856a1);
  color: white;
  font-weight: bold;
  border-radius: 12px;
}

---

✅ 7. 버튼을 화면 하단 중앙에 고정

.next-step-button {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 50px;
  border-radius: 15px;
  background: white;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.15);
}

✅ 버튼이 화면 하단 중앙에 고정됨

---

🎯 최종 정리

기능 적용 방법

주말 숨기기/비활성화	tileDisabled 또는 display: none;
요일을 '일월화수목금토'로 변경	calendarType="hebrew"
일요일을 빨간색으로 표시	CSS (color: red;)
현재 월의 날짜만 보이게 하기	tileDisabled & visibility: hidden;
달력 상단 한글 표시	formatMonthYear={(locale, date) => ${date.getFullYear()}년 ${date.getMonth() + 1}월}
날짜에서 '일' 빼기	formatDay={(locale, date) => date.getDate()}
캘린더 배경 스타일 변경	.react-calendar__viewContainer 수정
버튼 하단 중앙 고정	position: fixed; bottom: 20px; left: 50%;

이제 React Calendar를 완벽하게 커스터마이징할 수 있습니다! 🚀
추가로 더 필요한 기능이 있으면 말씀해주세요. 😊