feat: ✨ calendar

Author: gracefullight

apps/storybook/stories/calendar.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta } from "@storybook/react";
+import type { DateCalendarProps } from "node_modules/@mui/x-date-pickers";
+
+import { DateCalendar, LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+
+const meta: Meta<typeof DateCalendar> = {
+  title: "KRDS/Calendar",
+  component: DateCalendar,
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/FQZqKPOEJVqFCFglsC5VUt/KRDS_v1.0.0--Community-?node-id=5131-24401&t=Aqswq9fC3JfS3oxl-4",
+    },
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    showDaysOutsideCurrentMonth: {
+      control: { type: "boolean" },
+    },
+  },
+};
+
+export default meta;
+
+export const ExampleCalendar = {
+  args: {
+    showDaysOutsideCurrentMonth: true,
+  },
+  render: (args: DateCalendarProps) => (
+    <LocalizationProvider dateAdapter={AdapterLuxon} adapterLocale="ko">
+      <DateCalendar {...args} />
+    </LocalizationProvider>
+  ),
+};

apps/storybook/stories/date-input.stories.tsx

@@ -23,6 +23,11 @@ const meta: Meta<typeof DatePicker> = {
         type: "boolean",
       },
     },
+    showDaysOutsideCurrentMonth: {
+      control: {
+        type: "boolean",
+      },
+    },
   },
 };
 
@@ -31,6 +36,7 @@ export default meta;
 export const ExampleDateInput = {
   args: {
     disabled: false,
+    showDaysOutsideCurrentMonth: true,
     slotProps: {
       textField: {
         size: "medium",
@@ -40,7 +46,7 @@ export const ExampleDateInput = {
   },
   render: (args: DatePickerProps) => {
     return (
-      <LocalizationProvider dateAdapter={AdapterLuxon}>
+      <LocalizationProvider dateAdapter={AdapterLuxon} adapterLocale="ko">
         <DatePicker {...args} />
       </LocalizationProvider>
     );

…rds/src/components/base/mui-checkbox.tsx …krds/src/components/base/mui-checkbox.tspackages/krds/src/components/base/mui-checkbox.tsx renamed to packages/krds/src/components/base/mui-checkbox.ts packages/krds/src/components/base/mui-checkbox.tsx renamed to packages/krds/src/components/base/mui-checkbox.ts

@@ -2,9 +2,9 @@ import type { Components } from "@mui/material";
 import type { TablePaginationActionsProps } from "@mui/material/TablePagination/TablePaginationActions";
 import type { ChangeEvent } from "react";
 
-import { Box, Button, TextField, Typography } from "@mui/material";
+import { Button, TextField } from "@mui/material";
 import { useState } from "react";
-import { getPalette } from "#/design-tokens/palettes";
+import * as S from "#/components/base/mui/table-pagination.styles";
 
 declare module "@mui/material/TablePagination" {}
 
@@ -39,8 +39,8 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
   };
 
   return (
-    <Box sx={{ display: "flex", gap: "16px" }}>
-      <Box sx={{ display: "flex", alignItems: "center" }}>
+    <S.PaginationContainer>
+      <S.PaginationTextFieldContainer>
         <TextField
           size="small"
           value={pageInput}
@@ -52,13 +52,10 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
           }}
           error={!isValidPage}
         />
-        <Typography
-          variant="body-small"
-          sx={{ marginLeft: "9px", color: getPalette("text.subtle") }}
-        >
+        <S.TotalPageTypography variant="body-small">
           /{totalPages}
-        </Typography>
-      </Box>
+        </S.TotalPageTypography>
+      </S.PaginationTextFieldContainer>
       <Button
         variant="outlined"
         color="secondary"
@@ -68,7 +65,7 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
       >
         이동
       </Button>
-    </Box>
+    </S.PaginationContainer>
   );
 }
 

packages/krds/src/components/base/mui-table-pagination.tsx

@@ -28,7 +28,7 @@ import {
   usePickerActionsContext,
   yearCalendarClasses,
 } from "@mui/x-date-pickers";
-import * as S from "#/components/base/mui-x/date-picker.styles";
+import * as S from "#/components/base/mui-x/date-pickers.styles";
 import { getPalette } from "#/design-tokens/palettes";
 import { getRadius } from "#/design-tokens/radius";
 import { getTypography } from "#/design-tokens/typography";
@@ -50,7 +50,7 @@ export const MuiLocalizationProvider: Components["MuiLocalizationProvider"] = {
   },
 };
 
-export function DatePickerHeader(props: PickersCalendarHeaderProps) {
+function DatePickerHeader(props: PickersCalendarHeaderProps) {
   const { currentMonth, onMonthChange, onViewChange } = props;
 
   const handleNextMonth = () =>
@@ -109,7 +109,7 @@ export function DatePickerHeader(props: PickersCalendarHeaderProps) {
   );
 }
 
-export function DatePickerActionBar(props: PickersActionBarProps) {
+function DatePickerActionBar(props: PickersActionBarProps) {
   const { actions, className } = props;
   const { setValueToToday, acceptValueChanges, cancelValueChanges } =
     usePickerActionsContext();
@@ -165,8 +165,6 @@ export const MuiDatePicker: Components["MuiDatePicker"] = {
     slots: {
       // * https://mui.com/x/react-date-pickers/custom-components/#component
       actionBar: DatePickerActionBar,
-      // * https://mui.com/x/react-date-pickers/custom-components/#calendar-header
-      calendarHeader: DatePickerHeader,
     },
     views: ["year", "month", "day"],
   },
@@ -338,10 +336,7 @@ export const MuiPickersOutlinedInput: Components["MuiPickersOutlinedInput"] = {
 export const MuiPickerPopper: Components["MuiPickerPopper"] = {
   styleOverrides: {
     paper: {
-      backgroundColor: getPalette("surface.secondary-subtler"),
-      borderRadius: getRadius("xlarge2"),
       boxShadow: "none",
-      outline: `1px solid ${getPalette("border.secondary-light")}`,
     },
   },
 };
@@ -423,11 +418,21 @@ export const MuiDayCalendar: Components["MuiDayCalendar"] = {
 };
 
 export const MuiDateCalendar: Components["MuiDateCalendar"] = {
+  defaultProps: {
+    showDaysOutsideCurrentMonth: true,
+    slots: {
+      // * https://mui.com/x/react-date-pickers/custom-components/#calendar-header
+      calendarHeader: DatePickerHeader,
+    },
+  },
   styleOverrides: {
     root: {
+      backgroundColor: getPalette("surface.secondary-subtler"),
+      borderRadius: getRadius("xlarge2"),
       height: "auto",
       // * 6줄이 보이기 위한 처리
       minHeight: "400px",
+      outline: `1px solid ${getPalette("border.secondary-light")}`,
       paddingTop: "16px",
       width: "384px",
     },

packages/krds/src/components/base/mui-x-date-pickers.tsx

@@ -0,0 +1,24 @@
+import type { BoxProps, TypographyProps } from "@mui/material";
+import type { ComponentType } from "react";
+
+import { Box, Typography, styled } from "@mui/material";
+import { getPalette } from "#/design-tokens/palettes";
+
+export const PaginationContainer: ComponentType<BoxProps> = styled(Box)({
+  display: "flex",
+  gap: "16px",
+});
+
+export const PaginationTextFieldContainer: ComponentType<BoxProps> = styled(
+  Box,
+)({
+  display: "flex",
+  alignItems: "center",
+});
+
+export const TotalPageTypography: ComponentType<TypographyProps> = styled(
+  Typography,
+)({
+  color: getPalette("text.subtle"),
+  marginLeft: "9px",
+});