imp: add badge at pagination and remove unused variables

Author: hoon2hooni

components/common/Badge.tsx

@@ -0,0 +1,20 @@
+import styled from "@emotion/styled";
+import type { ReactNode } from "react";
+type BadgeProps = {
+  children: ReactNode;
+};
+export default function Badge({ children }: BadgeProps) {
+  return <Wrapper>{children}</Wrapper>;
+}
+
+const Wrapper = styled.div`
+  background-color: ${(props) => props.theme.colors.lightOrange};
+  color: ${(props) => props.theme.colors.orange};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 8rem;
+  height: 1.8rem;
+  font-size: 1rem;
+  border-radius: 0.5rem;
+`;

components/events/Days.tsx

@@ -14,7 +14,6 @@ type ComponentProps = {
   currentAttendee: string;
   attendees: Attendees;
   startWeekOfMonday: Date;
-  endWeekOfSunday: Date;
 };
 
 type CheckMarkWrapperProps = {
@@ -71,7 +70,6 @@ const Days: FC<ComponentProps> = ({
   attendees,
   currentAttendee,
   startWeekOfMonday,
-  endWeekOfSunday,
 }) => {
   const id = useUrlEventId();
   const [checkStatusArrayState, dispatch] = useReducer(

components/events/Pagination.tsx

@@ -1,22 +1,14 @@
+import Badge from "@components/common/Badge";
 import { Arrow } from "@components/icons";
 import styled from "@emotion/styled";
-import {
-  addDateAndTime,
-  dateToPattern,
-  getDayOfWeek,
-  getDiffDays,
-  parseStringDateAndCombine,
-} from "@lib/days";
 import type { FC } from "react";
 
 type ComponentProps = {
-  startDate: Date;
-  endDate: Date;
   currentPageIndex: number;
   startWeekOfMonday: Date;
-  endWeekOfSunday: Date;
   onClickPageUp: () => void;
   onClickPageDown: () => void;
+  totalNumberOfTableDays: number;
 };
 
 type ArrowProps = {
@@ -25,37 +17,17 @@ type ArrowProps = {
 };
 
 const Pagination: FC<ComponentProps> = ({
-  startDate,
-  endDate,
   currentPageIndex,
   onClickPageDown,
   onClickPageUp,
-  endWeekOfSunday,
   startWeekOfMonday,
+  totalNumberOfTableDays,
 }) => {
-  const diffDays = getDiffDays(endWeekOfSunday, startWeekOfMonday);
   const firstPageIndex = 0;
-  const lastPageIndex = Math.floor(diffDays / 7);
+  const lastPageIndex = Math.floor(totalNumberOfTableDays / 7);
 
   const isFirstPage = currentPageIndex === firstPageIndex;
   const isLastPage = currentPageIndex === lastPageIndex;
-  const currentStartDate = addDateAndTime(startDate, {
-    days: currentPageIndex * 7,
-  });
-
-  const currentLastDate =
-    endDate.getTime() > addDateAndTime(currentStartDate, { days: 6 }).getTime()
-      ? addDateAndTime(currentStartDate, { days: 6 })
-      : endDate;
-
-  const parsedCurrentStartDate = parseStringDateAndCombine(
-    dateToPattern(currentStartDate),
-    "-"
-  );
-  const parsedCurrentLastDate = parseStringDateAndCombine(
-    dateToPattern(currentLastDate),
-    "-"
-  );
 
   return (
     <Container>
@@ -68,29 +40,34 @@ const Pagination: FC<ComponentProps> = ({
       </ArrowWrapper>
       <TextWrapper>
         <span>
-          {parsedCurrentStartDate} {getDayOfWeek(currentStartDate)}요일
+          {startWeekOfMonday.getFullYear()}년 {startWeekOfMonday.getMonth() + 1}
+          월
         </span>
-        {parsedCurrentStartDate !== parsedCurrentLastDate && (
-          <span>
-            {" - "}
-            {parsedCurrentLastDate} {getDayOfWeek(currentLastDate)}요일
-          </span>
-        )}
       </TextWrapper>
-      <ArrowWrapper
-        isShown={!isLastPage}
-        direction={"right"}
-        onClick={onClickPageUp}
-      >
-        <Arrow />
-      </ArrowWrapper>
+      <BadgeRightArrowWrapper>
+        {!isLastPage && (
+          <BadgeWrapper>
+            <Badge>다음주도 있어요!</Badge>
+          </BadgeWrapper>
+        )}
+        <ArrowWrapper
+          isShown={!isLastPage}
+          direction={"right"}
+          onClick={onClickPageUp}
+        >
+          <Arrow />
+        </ArrowWrapper>
+      </BadgeRightArrowWrapper>
     </Container>
   );
 };
 
 export default Pagination;
 
 const ArrowWrapper = styled.div<ArrowProps>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
   visibility: ${(props) => (props.isShown ? "visible" : "hidden")};
   transform: ${(props) =>
     props.direction === "left" ? "rotate(-180deg)" : ""};
@@ -107,6 +84,12 @@ const ArrowWrapper = styled.div<ArrowProps>`
   }
 `;
 
+const BadgeRightArrowWrapper = styled.div`
+  position: relative;
+  align-items: center;
+  display: flex;
+`;
+
 const Container = styled.div`
   display: flex;
   justify-content: space-between;
@@ -118,3 +101,9 @@ const Container = styled.div`
 const TextWrapper = styled.div`
   font-size: 1.1rem;
 `;
+
+const BadgeWrapper = styled.div`
+  position: absolute;
+  right: 2rem;
+  font-size: 1.2rem;
+`;

components/events/TimetableTemplate.tsx

@@ -49,18 +49,19 @@ const TimetableTemplate: FC<Props> = ({
   const toastMessage = isEraseMode
     ? "지우개 모드 활성화!"
     : "지우개 모드 해제!";
-  const diffDays = getDiffDays(startWeekOfMonday, endWeekOfSunday);
-  const lastPageIndex = Math.floor(diffDays / 7);
+  const totalNumberOfTableDays = getDiffDays(
+    startWeekOfMonday,
+    endWeekOfSunday
+  );
+  const lastPageIndex = Math.floor(totalNumberOfTableDays / 7);
   return (
     <Container>
       <Pagination
-        endWeekOfSunday={endWeekOfSunday}
         startWeekOfMonday={startWeekOfMonday}
-        startDate={startDate}
-        endDate={endDate}
         onClickPageUp={handleClickPageUp}
         onClickPageDown={handleClickPageDown}
         currentPageIndex={currentPageIndex}
+        totalNumberOfTableDays={totalNumberOfTableDays}
       />
       <Wrapper>
         <EraserWrapper>
@@ -76,7 +77,6 @@ const TimetableTemplate: FC<Props> = ({
         </EraserWrapper>
         {isToastOpen && <Toast message={toastMessage} key={toastKeyVal} />}
         <Days
-          endWeekOfSunday={endWeekOfSunday}
           startWeekOfMonday={startWeekOfMonday}
           startDate={startDate}
           endDate={endDate}

styles/theme.ts

@@ -14,6 +14,8 @@ const theme: Theme = {
     buttonHoverPrimary: "#896300",
     buttonHoverSecondary: "#B8B8B8",
     header: "#EDAC00",
+    orange: "#E5A600",
+    lightOrange: "#FFEDBD",
   },
 };
 

types/emotion.d.ts

@@ -15,6 +15,8 @@ declare module "@emotion/react" {
       buttonHoverPrimary: string;
       buttonHoverSecondary: string;
       header: string;
+      orange: string;
+      lightOrange: string;
     };
   }
 }