[FE]: 날짜를 선택할 수 있는 캘린더 UI 구현

frontend/src/components/_common/Calendar/Calendar.styles.ts

@@ -0,0 +1,86 @@
+import { css } from '@emotion/react';
+
+export const s_calendarContainer = css`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const s_calendarContent = css`
+  display: grid;
+  grid-auto-rows: 40px;
+  grid-template-columns: repeat(7, 1fr);
+  width: 100%;
+`;
+
+export const s_dayOfWeekContainer = css`
+  margin-bottom: 2rem;
+`;
+
+export const s_dayOfWeek = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  min-width: 40px;
+  height: 40px;
+  min-height: 40px;
+
+  font-size: 1.2rem;
+  font-weight: normal;
+  color: gray;
+`;
+
+export const s_monthHeader = css`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  width: 100%;
+  margin-bottom: 20px;
+  padding: 0 10px;
+
+  font-size: 1.5rem;
+  font-weight: bold;
+`;
+
+export const s_monthNavigation = css`
+  cursor: pointer;
+`;
+
+export const s_daySlotButton = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  min-width: 36px;
+  height: 36px;
+
+  background-color: transparent;
+  border: none;
+`;
+
+// TODO : 공휴일 색 변경 논의 필요(@해리)
+// TODO : s_todayDaySlot 추가 예정(@해리)
+export const s_daySlot = (isHoliday: boolean) => css`
+  cursor: pointer;
+  font-size: 1.5rem;
+  color: ${isHoliday ? 'red' : '#000'};
+`;
+
+export const s_selectedDaySlot = (isSelected: boolean) => css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 36px;
+  height: 36px;
+
+  ${isSelected &&
+  css`
+    background-color: #fcc;
+    border-radius: 50%;
+  `}
+`;

frontend/src/components/_common/Calendar/index.tsx

@@ -0,0 +1,65 @@
+import useCalendarInfo from '@hooks/useCalendarInfo/useCalendarInfo';
+
+import {
+  s_calendarContainer,
+  s_calendarContent,
+  s_dayOfWeek,
+  s_dayOfWeekContainer,
+  s_daySlot,
+  s_daySlotButton,
+  s_monthHeader,
+  s_monthNavigation,
+  s_selectedDaySlot,
+} from './Calendar.styles';
+
+const DAY_OF_WEEK = ['월', '화', '수', '목', '금', '토', '일'] as const;
+
+// TODO : 선택된 날짜에 대한 강조 색을 외부에서 주입받을 수 있도록 props 수정 예정 (@해리)
+interface CalendarProps {
+  hasDate: (date: string) => boolean;
+  onDateClick: (date: string) => void;
+}
+
+export default function Calendar({ hasDate, onDateClick }: CalendarProps) {
+  const { yearMonthInfo, handleGetDayInfo, handlePrevMonth, handleNextMonth } = useCalendarInfo();
+  const { year, month, daySlotCount } = yearMonthInfo;
+
+  return (
+    <div css={s_calendarContainer} aria-label={`${year}년 ${month}월 달력`}>
+      <header css={s_monthHeader}>
+        {/* TODO : 캘린더 헤더 버튼 스타일 수정 예정 (@해리) */}
+        <button css={s_monthNavigation} onClick={handlePrevMonth}>
+          {'<'}
+        </button>
+        <span>
+          {year}년 {month}월
+        </span>
+        <button css={s_monthNavigation} onClick={handleNextMonth}>
+          {'>'}
+        </button>
+      </header>
+      <section css={[s_calendarContent, s_dayOfWeekContainer]}>
+        {DAY_OF_WEEK.map((day) => (
+          <div key={day} css={s_dayOfWeek}>
+            {day}
+          </div>
+        ))}
+      </section>
+      <section css={s_calendarContent}>
+        {Array.from({ length: daySlotCount }, (_, index) => {
+          // TODO : isToday 변수를 활용한 스타일 변경 논의 필요 (@해리)
+          const { date, dateString, isDate, isToday, isHoliday } = handleGetDayInfo(index);
+          const isSelectedDate = hasDate(dateString);
+
+          return (
+            <button key={dateString} onClick={() => onDateClick(dateString)} css={s_daySlotButton}>
+              <span css={[s_daySlot(isHoliday), s_selectedDaySlot(isSelectedDate)]}>
+                {isDate ? date : ''}
+              </span>
+            </button>
+          );
+        })}
+      </section>
+    </div>
+  );
+}