Merge pull request #111 from Team-INSERT/refactor/calender

캘린더 페이지 리팩토링

docs/REFACTOR_CONVENTION.md

@@ -32,7 +32,7 @@
 
 - applications : 쉬움 ( done )
 - bamboo : 보통 ( done )
-- calender : 조금 어려움
+- calendar : 조금 어려움
 
 [ forum 도메인은 심신건강을 위해 웬만하면 시도해보지 말 것 추천 ]
 

src/apis/httpClient/httpClient.ts

@@ -177,7 +177,7 @@ export default {
   like: new HttpClient("api/likes/update", axiosConfig),
   image: new HttpClient("api/image/save", axiosConfig),
   meal: new HttpClient("api/meal", axiosConfig),
-  calender: new HttpClient("api/calender", axiosConfig),
+  calendar: new HttpClient("api/calendar", axiosConfig),
   reserve: new HttpClient("api/ber", axiosConfig),
   meister: new HttpClient("api/meister", axiosConfig),
   ranking: new HttpClient("api/meister/ranking", axiosConfig),

src/app/calendar/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import CalendarPage from "@/templates/calendar/layouts";
+
+const Calendar = () => {
+  return <CalendarPage />;
+};
+
+export default Calendar;

src/assets/icons/CalenderIcon.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-const CalenderIcon = ({ ...props }: React.SVGProps<SVGSVGElement>) => {
+const CalendarIcon = ({ ...props }: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg
       width="21"
@@ -24,4 +24,4 @@ const CalenderIcon = ({ ...props }: React.SVGProps<SVGSVGElement>) => {
   );
 };
 
-export default CalenderIcon;
+export default CalendarIcon;

src/assets/icons/index.ts

@@ -7,7 +7,6 @@ export { default as LinkArrow } from "./LinkArrow";
 export { default as Logo } from "./Logo";
 export { default as Setting } from "./Setting";
 export { default as View } from "./View";
-export { default as XIcon } from "./XIcon";
 export { default as Grinning } from "./emojis/Grinning";
 export { default as HoldingBackTears } from "./emojis/HoldingBackTears";
 export { default as Kissing } from "./emojis/Kissing";
@@ -20,7 +19,7 @@ export { default as AddCommentIcon } from "./AddCommentIcon";
 export { default as DesktopIcon } from "./DesktopIcon";
 export { default as MealIcon } from "./MealIcon";
 export { default as BerIcon } from "./BerIcon";
-export { default as CalenderIcon } from "./CalenderIcon";
+export { default as CalendarIcon } from "./CalendarIcon";
 export { default as NoticeIcon } from "./NoticeIcon";
 export { default as ChatIcon } from "./ChatIcon";
 export { default as BambooIcon } from "./BambooIcon";

src/components/common/Header/assets/data/navigationList.ts

@@ -22,7 +22,7 @@ const navigationList = [
   {
     id: 5,
     name: "🗓️  캘린더",
-    href: "/calender",
+    href: "/calendar",
   },
   {
     id: 6,

src/constants/key.constant.ts

@@ -7,7 +7,7 @@ const KEY = {
   BAMBOO: "useBamboo",
   BAMBOO_ADMIN: "useBambooAdmin",
   MEAL: "useMeal",
-  CALENDER: "useCalender",
+  CALENDER: "useCalendar",
   RESERVE: "useReserve",
   MEISTER: "useMeister",
   MEISTER_DETAIL: "useMeisterDetail",

src/constants/router.constant.ts

@@ -14,7 +14,7 @@ const ROUTER = {
   MEAL: "/meal",
   RESERVE: "/reserve",
   JOIN_CHECK: "/join",
-  CALENDER: "/calender",
+  CALENDER: "/calendar",
 } as const;
 
 export default ROUTER;

src/interfaces/index.ts

@@ -11,8 +11,6 @@ export type { default as IComment } from "./comment.interface";
 export type { default as IInfiniteResult } from "./infiniteResult.interface";
 export type { default as IInputPost } from "./inputPost.interface";
 export type { default as IRecomment } from "./recomment.interface";
-export type { default as ICalender } from "./calender.interface";
-export type { default as IPlan } from "./plan.interface";
 export type { default as IReserve } from "./reserve.interface";
 export type { default as IReserveList } from "./reserveList.interface";
 export type { default as ICreateReserve } from "./createReserve.interface";

src/provider/layoutProvider.helper.tsx

@@ -10,7 +10,7 @@ import { ROUTER } from "@/constants";
 const LayoutProvider = ({ children }: React.PropsWithChildren) => {
   const { isWindow } = useWindow();
   const routerName = isWindow ? window.location.pathname : "";
-  const dontNeedAsidePage: Array<string> = [ROUTER.LOGIN, ROUTER.MEAL];
+  const dontNeedAsidePage: Array<string> = [ROUTER.LOGIN, ROUTER.CALENDER];
   const isNeedAsidePage = !dontNeedAsidePage.includes(routerName);
 
   return (

src/templates/calendar/assets/data/CalendarArrowIcon.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { CalendarArrowDirectionType } from "../../types";
+
+const PATH = {
+  RIGHT:
+    "M1.36271 0.972786C0.784855 1.55081 0.460235 2.33468 0.460235 3.15201C0.460235 3.96934 0.784855 4.75321 1.36271 5.33124L16.6204 20.5889L1.36271 35.8466C0.801232 36.4279 0.490547 37.2066 0.49757 38.0147C0.504593 38.8229 0.828761 39.596 1.40026 40.1675C1.97175 40.739 2.74485 41.0632 3.55303 41.0702C4.36121 41.0772 5.13982 40.7665 5.72116 40.2051L23.1581 22.7681C23.7359 22.1901 24.0605 21.4063 24.0605 20.5889C24.0605 19.7716 23.7359 18.9877 23.1581 18.4097L5.72116 0.972786C5.14314 0.394932 4.35927 0.0703125 3.54194 0.0703125C2.7246 0.0703125 1.94074 0.394932 1.36271 0.972786Z",
+  LEFT: "M23.1588 40.1678C23.7366 39.5898 24.0612 38.8059 24.0612 37.9886C24.0612 37.1713 23.7366 36.3874 23.1588 35.8094L7.9011 20.5517L23.1588 5.29402C23.7203 4.71268 24.0309 3.93407 24.0239 3.12589C24.0169 2.3177 23.6927 1.54461 23.1212 0.973112C22.5497 0.401617 21.7766 0.0774523 20.9685 0.0704294C20.1603 0.0634065 19.3817 0.374091 18.8003 0.935568L1.36341 18.3725C0.785557 18.9505 0.460938 19.7344 0.460938 20.5517C0.460938 21.369 0.785557 22.1529 1.36341 22.7309L18.8003 40.1678C19.3783 40.7457 20.1622 41.0703 20.9795 41.0703C21.7969 41.0703 22.5807 40.7457 23.1588 40.1678Z",
+};
+
+interface MealArrowIconProps extends React.SVGProps<SVGSVGElement> {
+  direction: CalendarArrowDirectionType;
+}
+
+const MealArrowIcon = ({ direction, ...props }: MealArrowIconProps) => {
+  return (
+    <svg
+      {...props}
+      width="36"
+      height="38"
+      viewBox="0 0 41 41"
+      fill="none"
+      cursor="pointer"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d={PATH[direction]} fill="#E6E6E6" />
+    </svg>
+  );
+};
+
+export default MealArrowIcon;

src/templates/calendar/assets/data/index.ts

@@ -0,0 +1 @@
+export { default as CalendarArrowIcon } from "./CalendarArrowIcon";

src/assets/icons/XIcon.tsx → src/templates/calendar/assets/icons/PlanModalCloseIcon.tsx

@@ -1,8 +1,11 @@
-const XIcon = ({ ...props }: React.SVGAttributes<HTMLOrSVGElement>) => {
+const PlanModalCloseIcon = ({
+  ...props
+}: React.SVGAttributes<HTMLOrSVGElement>) => {
   return (
     <svg
       width="14"
       height="14"
+      cursor="pointer"
       {...props}
       viewBox="0 0 9 9"
       fill="none"
@@ -16,4 +19,4 @@ const XIcon = ({ ...props }: React.SVGAttributes<HTMLOrSVGElement>) => {
   );
 };
 
-export default XIcon;
+export default PlanModalCloseIcon;

src/templates/calendar/assets/icons/index.ts

@@ -0,0 +1 @@
+export { default as PlanModalCloseIcon } from "./PlanModalCloseIcon";

src/templates/calendar/constants/plan.constant.ts

@@ -0,0 +1,10 @@
+const PLAN = {
+  CLASS: "CLASS",
+  GRADE: "GRADE",
+  SCHOOL: "SCHOOL",
+  학급일정: "학급 일정",
+  학년일정: "학년 일정",
+  학교일정: "학교 일정",
+} as const;
+
+export default PLAN;

src/templates/calendar/helpers/getColorByDayName.helper.ts

@@ -0,0 +1,14 @@
+import { color } from "@/styles";
+
+const getColorByDayName = (weekday: string) => {
+  switch (weekday) {
+    case "토":
+      return color.primary_blue;
+    case "일":
+      return color.primary_red;
+    default:
+      return color.gray;
+  }
+};
+
+export default getColorByDayName;

src/templates/calendar/helpers/getColorByPlanType.helper.ts

@@ -0,0 +1,26 @@
+import { css } from "styled-components";
+import { color } from "@/styles";
+import PLAN from "../constants/plan.constant";
+
+const getColorByPlanType = (planType: string) => {
+  switch (planType) {
+    case PLAN.CLASS:
+      return css`
+        background-color: ${color.primary_blue};
+      `;
+    case PLAN.GRADE:
+      return css`
+        background-color: ${color.primary_yellow};
+      `;
+    case PLAN.SCHOOL:
+      return css`
+        background-color: ${color.primary_red};
+      `;
+    default:
+      return css`
+        background-color: ${color.primary_mint};
+      `;
+  }
+};
+
+export default getColorByPlanType;

src/templates/calendar/helpers/getPaddingDayOfWeek.helper.ts

@@ -0,0 +1,8 @@
+import dayjs from "dayjs";
+
+const getPaddingDayOfMonth = (currentMonth: number) => {
+  const dayOfWeek = dayjs().year(dayjs().year()).month(currentMonth).date(1);
+  return Array.from({ length: dayOfWeek.day() });
+};
+
+export default getPaddingDayOfMonth;

src/templates/calendar/helpers/getPlanNameByPlanType.helper.ts

@@ -0,0 +1,16 @@
+import PLAN from "../constants/plan.constant";
+
+const getPlanNameByPlanType = (planType: string) => {
+  switch (planType) {
+    case PLAN.CLASS:
+      return PLAN.학급일정;
+    case PLAN.GRADE:
+      return PLAN.학년일정;
+    case PLAN.SCHOOL:
+      return PLAN.학교일정;
+    default:
+      return planType;
+  }
+};
+
+export default getPlanNameByPlanType;

src/templates/calendar/helpers/getPlanTypeByPlanName.helper.ts

@@ -0,0 +1,16 @@
+import PLAN from "../constants/plan.constant";
+
+const getPlanTypeByPlanName = (planType: string) => {
+  switch (planType) {
+    case PLAN.학급일정:
+      return PLAN.CLASS;
+    case PLAN.학년일정:
+      return PLAN.GRADE;
+    case PLAN.학교일정:
+      return PLAN.SCHOOL;
+    default:
+      return planType;
+  }
+};
+
+export default getPlanTypeByPlanName;