[FEAT] weekly 퍼블리싱

package.json

@@ -16,7 +16,9 @@
 	"dependencies": {
 		"@emotion/react": "^11.11.4",
 		"@emotion/styled": "^11.11.5",
+		"@fullcalendar/react": "^6.1.14",
 		"@svgr/cli": "^8.1.0",
+		"fullcalendar": "^6.1.14",
 		"react": "^18.3.1",
 		"react-datepicker": "^7.2.0",
 		"react-dom": "^18.3.1",

src/components/common/button/RefreshBtn.tsx

@@ -30,6 +30,8 @@ const RefreshBtnCss = css`
 `;
 
 const RefreshBtnLayout = styled.button<{ isDisabled: boolean }>`
+	z-index: 2;
+
 	${RefreshBtnCss}
 	color: ${({ theme, isDisabled }) => (isDisabled ? theme.palette.Grey.Grey5 : theme.palette.Grey.White)};
 

src/components/common/fullCalendar/DayHeaderContent.tsx

@@ -0,0 +1,50 @@
+import styled from '@emotion/styled';
+import { DayHeaderContentArg } from '@fullcalendar/core';
+
+interface DayHeaderContentProps {
+	arg: DayHeaderContentArg;
+	currentView: string;
+	today: string;
+}
+
+function DayHeaderContent({ arg, currentView, today }: DayHeaderContentProps) {
+	const isTimeGridDay = currentView === 'timeGridDay';
+	const day = new Intl.DateTimeFormat('en-US', { weekday: isTimeGridDay ? 'long' : 'short' }).format(arg.date);
+	const date = arg.date.getDate();
+	const isToday = arg.date.toDateString() === today;
+
+	return (
+		<div>
+			{!isTimeGridDay ? (
+				<>
+					<WeekDay isToday={isToday}>{day}</WeekDay>
+					{currentView !== 'dayGridMonth' && <WeekDate isToday={isToday}>{date}</WeekDate>}
+				</>
+			) : (
+				<DayLayout>
+					<WeekDate isToday={false}>{date}일</WeekDate> <WeekDay isToday={false}>{day}</WeekDay>
+				</DayLayout>
+			)}
+		</div>
+	);
+}
+
+const DayLayout = styled.div`
+	display: flex;
+	gap: 1.2rem;
+	align-items: flex-end;
+	margin-left: 0.8rem;
+`;
+
+const WeekDay = styled.div<{ isToday: boolean }>`
+	${({ theme }) => theme.fontTheme.CAPTION_02};
+	color: ${({ isToday, theme }) => (isToday ? theme.palette.Blue.Blue11 : theme.palette.Grey.Grey6)};
+	text-transform: uppercase;
+`;
+
+const WeekDate = styled.div<{ isToday: boolean }>`
+	${({ theme }) => theme.fontTheme.HEADLINE_01};
+	color: ${({ isToday, theme }) => (isToday ? theme.palette.Primary : theme.palette.Grey.Black)};
+`;
+
+export default DayHeaderContent;

src/components/common/fullCalendar/FullCalendarBox.tsx

@@ -0,0 +1,108 @@
+import styled from '@emotion/styled';
+import { ViewMountArg, DatesSetArg } from '@fullcalendar/core';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import FullCalendar from '@fullcalendar/react';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import { useState } from 'react';
+
+import RefreshBtn from '@/components/common/button/RefreshBtn';
+import DayHeaderContent from '@/components/common/fullCalendar/DayHeaderContent';
+import FullCalendarLayout from '@/components/common/fullCalendar/FullCalendarStyle';
+import { customDayCellContent, customSlotLabelContent } from '@/components/common/fullCalendar/fullCalendarUtils';
+import { theme } from '@/styles/theme';
+
+interface FullCalendarBoxProps {
+	size: 'small' | 'big';
+}
+
+function FullCalendarBox({ size }: FullCalendarBoxProps) {
+	const today = new Date().toDateString();
+	const [currentView, setCurrentView] = useState('timeGridWeek');
+
+	const handleViewChange = (view: ViewMountArg) => {
+		setCurrentView(view.view.type);
+	};
+
+	const handleDatesSet = (dateInfo: DatesSetArg) => {
+		setCurrentView(dateInfo.view.type);
+	};
+
+	return (
+		<FullCalendarLayout size={size}>
+			<CustomButtonContainer>
+				<RefreshBtn isDisabled={false} />
+			</CustomButtonContainer>
+			<FullCalendar
+				initialView="timeGridWeek"
+				plugins={[timeGridPlugin, dayGridPlugin, interactionPlugin]}
+				headerToolbar={{
+					left: 'title today prev next timeGridDay,timeGridWeek,dayGridMonth',
+					right: '',
+				}}
+				views={{
+					timeGridDay: {
+						titleFormat: { year: 'numeric', month: 'short' },
+					},
+					timeGridWeek: {
+						titleFormat(date) {
+							return `${date.date.year}년 ${date.date.month + 1}월`;
+						},
+					},
+					dayGridMonth: {
+						titleFormat: { year: 'numeric', month: 'short' },
+					},
+				}}
+				slotDuration="00:30:00"
+				editable
+				selectable
+				nowIndicator
+				dayMaxEvents
+				events={[
+					{ title: 'Meeting', start: '2024-07-06T10:00:00', end: '2024-07-06T12:00:00' },
+					{ title: 'Lunch', start: '2024-07-07T12:00:00', end: '2024-07-07T12:45:00' },
+					{ title: 'Lunch', start: '2024-07-08T12:00:00', end: '2024-07-08T12:30:00' },
+					{ title: 'All Day Event', start: '2024-07-08T10:00:00', end: '2024-07-08T12:00:00', allDay: true },
+				]}
+				eventColor={theme.palette.Blue.Blue2}
+				buttonText={{
+					today: '오늘',
+					month: '월간',
+					week: '주간',
+					day: '일간',
+				}}
+				allDayText="종일"
+				locale="ko"
+				slotLabelFormat={{
+					hour: 'numeric',
+					minute: '2-digit',
+					meridiem: 'short',
+					hour12: true,
+				}}
+				slotLabelContent={customSlotLabelContent}
+				/* eslint-disable */
+				dayHeaderContent={(arg) => <DayHeaderContent arg={arg} currentView={currentView} today={today} />}
+				viewDidMount={handleViewChange}
+				datesSet={handleDatesSet}
+				dayCellContent={customDayCellContent}
+				eventTimeFormat={{
+					hour: 'numeric',
+					minute: '2-digit',
+					hour12: false,
+				}}
+			/>
+		</FullCalendarLayout>
+	);
+}
+
+const CustomButtonContainer = styled.div`
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	box-sizing: border-box;
+	width: 100%;
+	margin-bottom: -2.6rem;
+	padding-right: 1rem;
+`;
+
+export default FullCalendarBox;