From 369f3e19ebb682726beb59d791c2359e746d1ebe Mon Sep 17 00:00:00 2001
From: LSJ <j44s11@naver.com>
Date: Fri, 17 May 2024 19:58:20 +0900
Subject: [PATCH] wip

---
 components/atoms/CalendarDayBox.tsx      | 29 +++++++++++++
 components/molecules/Calendar.tsx        | 54 ++++++++++++++----------
 components/molecules/DatePointButton.tsx | 46 +++++++++++---------
 utils/dateTimeUtils.ts                   |  8 ++--
 4 files changed, 90 insertions(+), 47 deletions(-)
 create mode 100644 components/atoms/CalendarDayBox.tsx

diff --git a/components/atoms/CalendarDayBox.tsx b/components/atoms/CalendarDayBox.tsx
new file mode 100644
index 000000000..3aca4c110
--- /dev/null
+++ b/components/atoms/CalendarDayBox.tsx
@@ -0,0 +1,29 @@
+import { Box, Flex } from "@chakra-ui/react";
+import dayjs from "dayjs";
+import "dayjs/locale/ko";
+import { dayjsToFormat } from "../../utils/dateTimeUtils";
+import DatePointButton from "../molecules/DatePointButton";
+
+interface CalendarDayBoxProps {
+  date: string;
+  func: (date: number) => void;
+  selectedDate: string;
+  pointType?: "mint";
+}
+
+function CalendarDayBox({ date, func, selectedDate, pointType }: CalendarDayBoxProps) {
+  const dayjsDate = dayjs(date);
+  return (
+    <Flex direction="column">
+      <Box textAlign="center">{dayjsToFormat(dayjsDate, "ddd")}</Box>
+      <DatePointButton
+        date={dayjsDate.date()}
+        func={() => func(dayjsDate.date())}
+        isSelected={date === selectedDate}
+        pointType={pointType}
+      />
+    </Flex>
+  );
+}
+
+export default CalendarDayBox;
diff --git a/components/molecules/Calendar.tsx b/components/molecules/Calendar.tsx
index 22936c893..815f558fe 100644
--- a/components/molecules/Calendar.tsx
+++ b/components/molecules/Calendar.tsx
@@ -1,15 +1,15 @@
-import { Flex, Grid } from "@chakra-ui/react";
+import { Box, Flex, Grid } from "@chakra-ui/react";
 import dayjs, { Dayjs } from "dayjs";
 
 import { getTextSwitcherProps } from "../../pageTemplates/home/studyController/StudyController";
-import { getCalendarDates } from "../../utils/dateTimeUtils";
+import { dayjsToStr, getCalendarDates } from "../../utils/dateTimeUtils";
+import CalendarDayBox from "../atoms/CalendarDayBox";
 import DatePointButton from "./DatePointButton";
 import BetweenTextSwitcher from "./navs/BetweenTextSwitcher";
 
 interface CalendarProps {
   type: "week" | "month";
   selectedDate: Dayjs;
-
   func: (date: number) => void;
 }
 
@@ -19,32 +19,40 @@ function Calendar({ type, selectedDate, func }: CalendarProps) {
   const textSwitcherProps = getTextSwitcherProps(selectedDate, func);
 
   const calendarArr = getCalendarDates(type, selectedDate);
-
+  console.log(calendarArr);
   return (
     <>
       <BetweenTextSwitcher left={textSwitcherProps.left} right={textSwitcherProps.right} />
-      <Flex h="42px" align="center" color="var(--gray-500)" fontWeight={500}>
-        {DAYS.map((day, idx) => (
-          <Flex justify="center" align="center" flex={1} h="30px" key={idx}>
-            {day}
-          </Flex>
-        ))}
-      </Flex>
+
       <>
         {type === "week" ? (
-          <Flex h="58px" justify="space-between">
-            {calendarArr.map((dateStr, idx) => {
-              const date = dayjs(dateStr).date();
-              return (
-                <Flex key={idx} flex={1} w="100%" justify="center" align="center">
-                  <DatePointButton
-                    date={date}
-                    func={() => func(date)}
-                    isSelected={date === selectedDate.date()}
-                  />
+          <Flex overflow="auto">
+            {calendarArr.map((date, idx) => (
+              <Box key={idx} mr="14px">
+                <CalendarDayBox date={date} selectedDate={dayjsToStr(selectedDate)} func={func} />
+              </Box>
+            ))}
+            {/* <Flex h="42px" align="center" color="var(--gray-500)" fontWeight={500}>
+              {DAYS.map((day, idx) => (
+                <Flex justify="center" align="center" flex={1} h="30px" key={idx}>
+                  {day}
                 </Flex>
-              );
-            })}
+              ))}
+            </Flex>
+            <Flex h="58px">
+              {calendarArr.map((dateStr, idx) => {
+                const date = dayjs(dateStr).date();
+                return (
+                  <Flex mr="14px" key={idx} justify="center" align="center">
+                    <DatePointButton
+                      date={date}
+                      func={func}
+                      isSelected={date === selectedDate.date()}
+                    />
+                  </Flex>
+                );
+              })}
+            </Flex> */}
           </Flex>
         ) : (
           <Grid templateColumns="repeat(7,1fr)" rowGap="12px">
diff --git a/components/molecules/DatePointButton.tsx b/components/molecules/DatePointButton.tsx
index 1e2e79fa9..d54c872cb 100644
--- a/components/molecules/DatePointButton.tsx
+++ b/components/molecules/DatePointButton.tsx
@@ -1,7 +1,7 @@
 import { Box, Flex } from "@chakra-ui/react";
 import styled from "styled-components";
 
-interface DatePointButtonProps {
+export interface DatePointButtonProps {
   date: number;
   func: () => void;
   isSelected?: boolean;
@@ -10,28 +10,32 @@ interface DatePointButtonProps {
 
 function DatePointButton({ date, func, isSelected }: DatePointButtonProps) {
   function PointDot() {
-  return <Flex w="16px" h="16px" justify="center" align="center">
-      <Box w="4px" h="4px" borderRadius="50%" bgColor="var(--color-mint)" />
-    </Flex>
-}
+    return (
+      <Flex w="16px" h="16px" justify="center" align="center">
+        <Box w="4px" h="4px" borderRadius="50%" bgColor="var(--color-mint)" />
+      </Flex>
+    );
+  }
 
   function TodayCircle({ date }: { date: number }) {
-  return <Flex
-      justify="center"
-      align="center"
-      w="100%"
-      h="100%"
-      position="absolute"
-      borderRadius="50%"
-      top={0}
-      left={0}
-      bgColor="var(--color-mint)"
-      zIndex={1}
-      color="white"
-    >
-      {date}
-    </Flex>
-}
+    return (
+      <Flex
+        justify="center"
+        align="center"
+        w="100%"
+        h="100%"
+        position="absolute"
+        borderRadius="50%"
+        top={0}
+        left={0}
+        bgColor="var(--color-mint)"
+        zIndex={1}
+        color="white"
+      >
+        {date}
+      </Flex>
+    );
+  }
 
   return (
     <Button onClick={func}>
diff --git a/utils/dateTimeUtils.ts b/utils/dateTimeUtils.ts
index 1751c3d9c..b2927acc0 100644
--- a/utils/dateTimeUtils.ts
+++ b/utils/dateTimeUtils.ts
@@ -1,4 +1,5 @@
 import dayjs, { Dayjs } from "dayjs";
+import "dayjs/locale/ko";
 import weekday from "dayjs/plugin/weekday";
 dayjs.extend(weekday);
 
@@ -70,9 +71,10 @@ export const getCalendarDates = (type: "week" | "month", selectedDate: Dayjs) =>
   const calendar: string[] = [];
 
   if (type === "week") {
-    const startDate = selectedDate.startOf(type);
-    for (let i = 0; i < 7; i++) {
-      calendar.push(dayjsToStr(startDate.add(i, "day")));
+    const startDate = selectedDate.startOf("month");
+    for (let i = 0; i < selectedDate.endOf("month").date(); i++) {
+      const date = startDate.add(i, "day");
+      calendar.push(dayjsToStr(date));
     }
   } else {
     const startOfMonth = selectedDate.startOf("month");