diff --git a/components/atoms/CalendarDayBox.tsx b/components/atoms/CalendarDayBox.tsx
index 3aca4c110..beedfead0 100644
--- a/components/atoms/CalendarDayBox.tsx
+++ b/components/atoms/CalendarDayBox.tsx
@@ -1,6 +1,8 @@
+import "dayjs/locale/ko";
+
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";
diff --git a/components/molecules/Calendar.tsx b/components/molecules/Calendar.tsx
index 815f558fe..675794b6f 100644
--- a/components/molecules/Calendar.tsx
+++ b/components/molecules/Calendar.tsx
@@ -5,7 +5,6 @@ import { getTextSwitcherProps } from "../../pageTemplates/home/studyController/S
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";
@@ -22,13 +21,13 @@ function Calendar({ type, selectedDate, func }: CalendarProps) {
console.log(calendarArr);
return (
<>
-
+ {/* */}
<>
{type === "week" ? (
{calendarArr.map((date, idx) => (
-
+
))}
diff --git a/components/molecules/DateVoteBlock.tsx b/components/molecules/DateVoteBlock.tsx
index e0b68d5aa..49bef4452 100644
--- a/components/molecules/DateVoteBlock.tsx
+++ b/components/molecules/DateVoteBlock.tsx
@@ -1,8 +1,6 @@
import { Box, Button, Flex } from "@chakra-ui/react";
-import dayjs from "dayjs";
import { DateVoteButtonProps } from "../../pageTemplates/home/studyController/StudyControllerVoteButton";
-import { dayjsToFormat } from "../../utils/dateTimeUtils";
interface DateVoteBlockProps {
buttonProps: DateVoteButtonProps;
@@ -14,16 +12,17 @@ function DateVoteBlock({ buttonProps, func }: DateVoteBlockProps) {
- 오늘
+ 현재 신청자:
- {dayjsToFormat(dayjs(), "D일")}
+ 5명
diff --git a/components/molecules/WeekSlideCalendar.tsx b/components/molecules/WeekSlideCalendar.tsx
new file mode 100644
index 000000000..f6255762e
--- /dev/null
+++ b/components/molecules/WeekSlideCalendar.tsx
@@ -0,0 +1,58 @@
+import { Box, Flex } from "@chakra-ui/react";
+import { Dayjs } from "dayjs";
+
+import { getTextSwitcherProps } from "../../pageTemplates/home/studyController/StudyController";
+import { dayjsToStr, getCalendarDates } from "../../utils/dateTimeUtils";
+import CalendarDayBox from "../atoms/CalendarDayBox";
+
+interface CalendarProps {
+ selectedDate: Dayjs;
+ func: (date: number) => void;
+}
+
+const DAYS = ["일", "월", "화", "수", "목", "금", "토"];
+
+function WeekSlideCalendar({ selectedDate, func }: CalendarProps) {
+ const textSwitcherProps = getTextSwitcherProps(selectedDate, func);
+
+ const calendarArr = getCalendarDates("week", selectedDate);
+
+ return (
+ <>
+ {/* */}
+
+ <>
+
+ {calendarArr.map((date, idx) => (
+
+
+
+ ))}
+ {/*
+ {DAYS.map((day, idx) => (
+
+ {day}
+
+ ))}
+
+
+ {calendarArr.map((dateStr, idx) => {
+ const date = dayjs(dateStr).date();
+ return (
+
+
+
+ );
+ })}
+ */}
+
+ >
+ >
+ );
+}
+
+export default WeekSlideCalendar;
diff --git a/pageTemplates/home/studyController/StudyController.tsx b/pageTemplates/home/studyController/StudyController.tsx
index 9bc5c02b8..2d8810889 100644
--- a/pageTemplates/home/studyController/StudyController.tsx
+++ b/pageTemplates/home/studyController/StudyController.tsx
@@ -1,4 +1,6 @@
import { Box, Flex } from "@chakra-ui/react";
+import { faChevronDown } from "@fortawesome/pro-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import dayjs, { Dayjs } from "dayjs";
import { useRouter, useSearchParams } from "next/navigation";
import { Dispatch, useEffect, useState } from "react";
@@ -6,7 +8,7 @@ import { useSetRecoilState } from "recoil";
import styled from "styled-components";
import Slide from "../../../components/layouts/PageSlide";
-import Calendar from "../../../components/molecules/Calendar";
+import WeekSlideCalendar from "../../../components/molecules/WeekSlideCalendar";
import DateCalendarModal from "../../../modals/aboutHeader/DateCalendarModal";
import StudyAttendCheckModal from "../../../modals/study/StudyAttendCheckModal";
import { studyDateStatusState } from "../../../recoils/studyRecoils";
@@ -53,13 +55,16 @@ function StudyController() {
<>
-
{selectedDate && (
<>
-
-
-
+
+
+ 5월
+
+
+
+
>
)}
@@ -73,6 +78,11 @@ function StudyController() {
);
}
+const MonthButton = styled.button`
+ width: 60px;
+ background-color: pink;
+`;
+
interface ControllerHeaderProps {
selectedDateDayjs: Dayjs;
setModalType: Dispatch;
@@ -162,9 +172,7 @@ const handleMonthMoveByDate = (date: number, currentDate: number) => {
const OuterContainer = styled.div`
background-color: white;
-
border-radius: 12px;
-
position: relative;
`;
diff --git a/utils/dateTimeUtils.ts b/utils/dateTimeUtils.ts
index b2927acc0..d18ce55ca 100644
--- a/utils/dateTimeUtils.ts
+++ b/utils/dateTimeUtils.ts
@@ -1,5 +1,6 @@
-import dayjs, { Dayjs } from "dayjs";
import "dayjs/locale/ko";
+
+import dayjs, { Dayjs } from "dayjs";
import weekday from "dayjs/plugin/weekday";
dayjs.extend(weekday);