[FEAT] 공통 캘린더 컴포넌트 구현

apps/timo-web/components/layout/header/Header.tsx

@@ -4,7 +4,7 @@ import {
   DropdownView,
   SidebarButton,
   TodayButton,
-  WeeklyButton,
+  ChevronButton,
 } from "@repo/timo-design-system/ui";
 import { cn } from "@repo/timo-design-system/utils";
 
@@ -39,13 +39,13 @@ export interface HeaderWeeklyNavProps {
 const HeaderWeeklyNav = ({ onPrev, onNext, label }: HeaderWeeklyNavProps) => {
   return (
     <div className="flex items-center gap-2">
-      <WeeklyButton variant="left" onClick={onPrev} />
+      <ChevronButton variant="left" onClick={onPrev} />
       {label && (
         <span className="typo-headline-m-14 text-timo-gray-900 flex h-8 items-center rounded-[4px] bg-white px-2">
           {label}
         </span>
       )}
-      <WeeklyButton variant="right" onClick={onNext} />
+      <ChevronButton variant="right" onClick={onNext} />
     </div>
   );
 };

packages/timo-design-system/src/components/button/weekly-button/WeeklyButton.stories.tsx → packages/timo-design-system/src/components/button/chevron-button/ChevronButton.stories.tsx

@@ -1,10 +1,10 @@
-import { WeeklyButton } from "./WeeklyButton";
+import { ChevronButton } from "./ChevronButton";
 
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta = {
-  title: "Components/Button/WeeklyButton",
-  component: WeeklyButton,
+  title: "Components/Button/ChevronButton",
+  component: ChevronButton,
   parameters: {
     layout: "centered",
   },
@@ -15,7 +15,7 @@ const meta = {
   args: {
     variant: "left",
   },
-} satisfies Meta<typeof WeeklyButton>;
+} satisfies Meta<typeof ChevronButton>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -24,8 +24,8 @@ export const AllStates: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
     <div className="flex gap-4">
-      <WeeklyButton variant="left" />
-      <WeeklyButton variant="right" />
+      <ChevronButton variant="left" />
+      <ChevronButton variant="right" />
     </div>
   ),
 };

packages/timo-design-system/src/components/button/weekly-button/WeeklyButton.tsx → packages/timo-design-system/src/components/button/chevron-button/ChevronButton.tsx

@@ -3,38 +3,38 @@ import { cn } from "../../../lib";
 
 import type { ReactNode } from "react";
 
-export type WeeklyButtonVariantTypes = "left" | "right";
+export type ChevronButtonVariantTypes = "left" | "right";
 
-const WEEKLY_BUTTON_ICON: Record<WeeklyButtonVariantTypes, ReactNode> = {
+const CHEVRON_BUTTON_ICON: Record<ChevronButtonVariantTypes, ReactNode> = {
   left: <ChevronLeftIcon />,
   right: <ChevronRightIcon />,
 };
 
-const WEEKLY_BUTTON_ARIA_LABEL: Record<WeeklyButtonVariantTypes, string> = {
+const CHEVRON_BUTTON_ARIA_LABEL: Record<ChevronButtonVariantTypes, string> = {
   left: "이전",
   right: "다음",
 };
 
-export interface WeeklyButtonProps {
-  variant: WeeklyButtonVariantTypes;
+export interface ChevronButtonProps {
+  variant: ChevronButtonVariantTypes;
   onClick?: () => void;
   className?: string;
 }
 
-export const WeeklyButton = ({
+export const ChevronButton = ({
   variant,
   onClick,
   className,
-}: WeeklyButtonProps) => (
+}: ChevronButtonProps) => (
   <button
     type="button"
     onClick={onClick}
-    aria-label={WEEKLY_BUTTON_ARIA_LABEL[variant]}
+    aria-label={CHEVRON_BUTTON_ARIA_LABEL[variant]}
     className={cn(
       "border-timo-gray-500 flex size-8 items-center justify-center rounded-[4px] border bg-white",
       className,
     )}
   >
-    {WEEKLY_BUTTON_ICON[variant]}
+    {CHEVRON_BUTTON_ICON[variant]}
   </button>
 );

packages/timo-design-system/src/components/calendar/Calendar.stories.tsx

@@ -0,0 +1,36 @@
+import { useState } from "react";
+
+import { Calendar } from "./Calendar";
+
+import type { CalendarProps } from "./Calendar";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Calendar",
+  component: Calendar,
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Calendar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const CalendarDemo = (args: CalendarProps) => {
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(
+    new Date(2026, 6, 1),
+  );
+
+  return (
+    <Calendar
+      {...args}
+      value={selectedDate}
+      defaultMonth={new Date(2026, 6, 1)}
+      onChange={setSelectedDate}
+    />
+  );
+};
+
+export const Default: Story = {
+  render: (args) => <CalendarDemo {...args} />,
+};

packages/timo-design-system/src/components/calendar/Calendar.tsx

@@ -0,0 +1,165 @@
+import { useState } from "react";
+
+import { cn } from "../../lib";
+import { ChevronButton } from "../button/chevron-button/ChevronButton";
+
+const WEEKDAYS = ["S", "M", "T", "W", "T", "F", "S"];
+
+const MONTH_LABELS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+interface CalendarDate {
+  date: Date;
+  day: number;
+  isCurrentMonth: boolean;
+}
+
+const getCalendarDates = (month: Date): CalendarDate[] => {
+  const year = month.getFullYear();
+  const monthIndex = month.getMonth();
+  const firstDate = new Date(year, monthIndex, 1);
+  const firstDay = firstDate.getDay();
+  const lastDate = new Date(year, monthIndex + 1, 0);
+  const lastDay = lastDate.getDate();
+
+  const calendarCellCount = firstDay + lastDay > 35 ? 42 : 35;
+
+  const startDate = new Date(year, monthIndex, 1 - firstDay);
+
+  return Array.from({ length: calendarCellCount }, (_, index) => {
+    const date = new Date(
+      startDate.getFullYear(),
+      startDate.getMonth(),
+      startDate.getDate() + index,
+    );
+
+    return {
+      date,
+      day: date.getDate(),
+      isCurrentMonth: date.getMonth() === monthIndex,
+    };
+  });
+};
+
+export interface CalendarProps {
+  value?: Date;
+  defaultMonth?: Date;
+  onChange?: (date: Date) => void;
+  className?: string;
+}
+
+export const Calendar = ({
+  value,
+  defaultMonth,
+  onChange,
+  className,
+}: CalendarProps) => {
+  const [visibleMonth, setVisibleMonth] = useState(
+    defaultMonth ?? value ?? new Date(),
+  );
+  const calendarDates = getCalendarDates(visibleMonth);
+  const today = new Date();
+  const isSameDate = (a: Date, b: Date) => {
+    return (
+      a.getFullYear() === b.getFullYear() &&
+      a.getMonth() === b.getMonth() &&
+      a.getDate() === b.getDate()
+    );
+  };
+
+  const handleMoveMonth = (amount: number) => {
+    setVisibleMonth(
+      (prev) => new Date(prev.getFullYear(), prev.getMonth() + amount, 1),
+    );
+  };
+
+  return (
+    <div
+      className={cn("h-66 w-67 rounded-[4px] bg-white px-6 py-4", className)}
+    >
+      <div className="relative mb-4 h-8">
+        <ChevronButton
+          variant="left"
+          onClick={() => handleMoveMonth(-1)}
+          className="absolute top-0 left-0"
+        />
+
+        <div className="flex h-full items-center justify-center gap-1">
+          <span className="typo-headline-b-16 text-timo-gray-700">
+            {MONTH_LABELS[visibleMonth.getMonth()]}
+          </span>
+          <span className="typo-headline-b-16 text-timo-gray-700">
+            {visibleMonth.getFullYear()}
+          </span>
+        </div>
+
+        <ChevronButton
+          variant="right"
+          onClick={() => handleMoveMonth(1)}
+          className="absolute top-0 right-0"
+        />
+      </div>
+
+      <div className={cn("grid grid-cols-7 grid-rows-6 gap-x-1 gap-y-1.5")}>
+        {WEEKDAYS.map((weekday, index) => (
+          <div
+            key={`${weekday}-${index}`}
+            className="typo-headline-b-16 text-timo-gray-900 flex items-center justify-center"
+          >
+            {weekday}
+          </div>
+        ))}
+
+        {calendarDates.map((calendarDate) => {
+          const isSelected = value
+            ? isSameDate(calendarDate.date, value)
+            : false;
+          const isToday = isSameDate(calendarDate.date, today);
+
+          return (
+            <button
+              key={calendarDate.date.toISOString()}
+              type="button"
+              onClick={() => {
+                if (!calendarDate.isCurrentMonth) {
+                  setVisibleMonth(
+                    new Date(
+                      calendarDate.date.getFullYear(),
+                      calendarDate.date.getMonth(),
+                      1,
+                    ),
+                  );
+                }
+
+                onChange?.(calendarDate.date);
+              }}
+              className={cn(
+                "flex h-6.5 w-7 items-center justify-center",
+                isToday ? "typo-headline-b-14" : "typo-headline-r-14",
+                calendarDate.isCurrentMonth
+                  ? "text-timo-gray-700"
+                  : "text-timo-gray-500",
+                isToday && "text-timo-gray-900",
+                isSelected && "bg-timo-blue-300 rounded-[4px] text-white",
+              )}
+            >
+              {calendarDate.day}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

packages/timo-design-system/src/components/index.ts

@@ -32,6 +32,7 @@ export type {
 } from "./layout/modal/Modal";
 export { SidebarButton } from "./button/sidebar-button/SidebarButton";
 export { TodayButton } from "./button/today-button/TodayButton";
-export { WeeklyButton } from "./button/weekly-button/WeeklyButton";
+export { ChevronButton } from "./button/chevron-button/ChevronButton";
 export { TimeSelector } from "./time/time-selector/TimeSelector";
 export { RepeatSelector } from "./repeat/repeat-selector/RepeatSelector";
+export { Calendar } from "./calendar/Calendar";