여태까지 브랜치 분할되어 작업한것들 일단 모두 합치고 정리하냐고고 조금 지저분 했습니다!

AboutClan · May 20, 2024 · 6fcfbfa · 6fcfbfa
1 parent a54a870
commit 6fcfbfa
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 16 deletions.
diff --git 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
@@ -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 (
     <>
-      <BetweenTextSwitcher left={textSwitcherProps.left} right={textSwitcherProps.right} />
+      {/* <BetweenTextSwitcher left={textSwitcherProps.left} right={textSwitcherProps.right} /> */}
 
       <>
         {type === "week" ? (
           <Flex overflow="auto">
             {calendarArr.map((date, idx) => (
-              <Box key={idx} mr="14px">
+              <Box key={idx} mr="2px">
                 <CalendarDayBox date={date} selectedDate={dayjsToStr(selectedDate)} func={func} />
               </Box>
             ))}

diff --git 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) {
     <Flex w="100%" className="main_vote_btn" h="77px" justify="space-between" align="center">
       <Box fontSize="16px" fontWeight={500}>
         <Box as="span" mr="4px">
-          오늘
+          현재 신청자:
         </Box>
         <Box as="span" color="var(--color-mint)">
-          {dayjsToFormat(dayjs(), "D일")}
+          5명
         </Box>
       </Box>
       <Button
         bgColor={buttonProps.color}
         color={buttonProps.color === "var(--gray-400)" ? "black" : "white"}
         onClick={func}
+        size="lg"
       >
         {buttonProps.text}
       </Button>

diff --git a/components/molecules/WeekSlideCalendar.tsx 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 (
+    <>
+      {/* <BetweenTextSwitcher left={textSwitcherProps.left} right={textSwitcherProps.right} /> */}
+
+      <>
+        <Flex overflow="auto" flex={1}>
+          {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>
+      </>
+    </>
+  );
+}
+
+export default WeekSlideCalendar;
diff --git a/pageTemplates/home/studyController/StudyController.tsx b/pageTemplates/home/studyController/StudyController.tsx
@@ -1,12 +1,14 @@
 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";
 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() {
     <>
       <Slide>
         <OuterContainer className="about_calendar">
-          <ControllerHeader selectedDateDayjs={selectedDateDayjs} setModalType={setModalType} />
           <InnerContainer>
             {selectedDate && (
               <>
-                <Box px="20px" borderBottom="var(--border)">
-                  <Calendar type="week" selectedDate={selectedDateDayjs} func={onClick} />
-                </Box>
+                <Flex align="center" borderBottom="var(--border)">
+                  <MonthButton>
+                    <span>5월</span>
+                    <FontAwesomeIcon icon={faChevronDown} />
+                  </MonthButton>
+                  <WeekSlideCalendar selectedDate={selectedDateDayjs} func={onClick} />
+                </Flex>
                 <StudyControllerVoteButton setModalType={setModalType} />
               </>
             )}
@@ -73,6 +78,11 @@ function StudyController() {
   );
 }
 
+const MonthButton = styled.button`
+  width: 60px;
+  background-color: pink;
+`;
+
 interface ControllerHeaderProps {
   selectedDateDayjs: Dayjs;
   setModalType: Dispatch<VoteType>;
@@ -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
@@ -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);