From 6fcfbfa58b58127dbd63df9c6a122cb899c88c40 Mon Sep 17 00:00:00 2001 From: LSJ Date: Mon, 20 May 2024 15:30:21 +0900 Subject: [PATCH] =?UTF-8?q?=EC=97=AC=ED=83=9C=EA=B9=8C=EC=A7=80=20?= =?UTF-8?q?=EB=B8=8C=EB=9E=9C=EC=B9=98=20=EB=B6=84=ED=95=A0=EB=90=98?= =?UTF-8?q?=EC=96=B4=20=EC=9E=91=EC=97=85=ED=95=9C=EA=B2=83=EB=93=A4=20?= =?UTF-8?q?=EC=9D=BC=EB=8B=A8=20=EB=AA=A8=EB=91=90=20=ED=95=A9=EC=B9=98?= =?UTF-8?q?=EA=B3=A0=20=EC=A0=95=EB=A6=AC=ED=95=98=EB=83=90=EA=B3=A0?= =?UTF-8?q?=EA=B3=A0=20=EC=A1=B0=EA=B8=88=20=EC=A7=80=EC=A0=80=EB=B6=84=20?= =?UTF-8?q?=ED=96=88=EC=8A=B5=EB=8B=88=EB=8B=A4!?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/atoms/CalendarDayBox.tsx | 4 +- components/molecules/Calendar.tsx | 5 +- components/molecules/DateVoteBlock.tsx | 7 +-- components/molecules/WeekSlideCalendar.tsx | 58 +++++++++++++++++++ .../home/studyController/StudyController.tsx | 22 ++++--- utils/dateTimeUtils.ts | 3 +- 6 files changed, 83 insertions(+), 16 deletions(-) create mode 100644 components/molecules/WeekSlideCalendar.tsx 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);