Merge pull request #84 from Team-INSERT/feat/calender

캘린더 페이지 완성
Team-INSERT · Oct 3, 2023 · cb5fa47 · cb5fa47
2 parents 0d99f0a + ef8b32a
commit cb5fa47
Show file tree

Hide file tree

Showing 20 changed files with 472 additions and 41 deletions.
diff --git a/src/apis/httpClient/httpClient.ts b/src/apis/httpClient/httpClient.ts
@@ -171,4 +171,5 @@ 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),
 };
diff --git a/src/components/common/Modal/PlanAddModal/index.tsx b/src/components/common/Modal/PlanAddModal/index.tsx
@@ -0,0 +1,121 @@
+import { XIcon } from "@/assets/icons";
+import { Column } from "@/components/Flex";
+import { Button, Input, Select } from "@/components/atoms";
+import useModal from "@/hooks/useModal";
+import useUser from "@/hooks/useUser";
+import { useAddCalenderPlanMutation } from "@/page/calender/services/mutation.service";
+import { color, flex, font } from "@/styles";
+import React from "react";
+import styled from "styled-components";
+
+interface IPlanAddModalProps {
+  date: string;
+}
+
+const PlanAddModal = ({ date }: IPlanAddModalProps) => {
+  const { closeModal } = useModal();
+  const { mutate } = useAddCalenderPlanMutation();
+  const { user } = useUser();
+  const [planType, setPlanType] = React.useState("CLASS");
+  const [title, setTitle] = React.useState("");
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  const handleAddButtonClick = () => {
+    mutate({
+      title,
+      priority: 0,
+      date,
+      color: "#000",
+      type: planType,
+      grade: user.grade,
+      classNumber: user.classNum,
+    });
+  };
+
+  React.useEffect(() => {
+    if (textareaRef.current) textareaRef.current.focus();
+  }, []);
+
+  return (
+    <Container>
+      <Header>
+        <BambooTitle />
+        <CloseButton>
+          <XIcon onClick={closeModal} />
+        </CloseButton>
+      </Header>
+      <Body>
+        <Input
+          label="일정 내용"
+          placeholder="간략한 일정 내용을 입력해주세요."
+          onChange={(e) => setTitle(e.target.value)}
+          value={title}
+        />
+        <Column gap="6px">
+          <StyledTitle>일정 분류</StyledTitle>
+          <Select
+            label=""
+            width="100px"
+            options={["CLASS", "GRADE", "SCHOOL"]}
+            defaultOption={planType}
+            handler={setPlanType}
+          />
+        </Column>
+      </Body>
+      <PlanButtonBox>
+        <Button onClick={handleAddButtonClick} color={color.primary_blue}>
+          추가하기
+        </Button>
+      </PlanButtonBox>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  width: 40vw;
+  height: fit-content;
+  overflow-y: scroll;
+  background-color: ${color.white};
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  ${flex.COLUMN};
+`;
+
+const Header = styled.header`
+  width: 100%;
+  padding: 10px 0 10px 18px;
+  display: flex;
+  align-items: center;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
+`;
+
+const BambooTitle = styled.div`
+  ${font.p2};
+  font-weight: 500;
+
+  &:after {
+    content: "📆 일정 추가하기";
+  }
+`;
+
+const Body = styled.div`
+  padding: 16px 28px;
+  ${flex.COLUMN};
+  gap: 12px;
+`;
+
+const CloseButton = styled.button`
+  margin: 0 20px 0 auto;
+`;
+
+const PlanButtonBox = styled.div`
+  width: fit-content;
+  margin: 0 16px 16px auto;
+`;
+
+const StyledTitle = styled.span`
+  ${font.p3};
+  font-weight: 500;
+`;
+
+export default PlanAddModal;
diff --git a/src/constants/key.constant.ts b/src/constants/key.constant.ts
@@ -7,6 +7,7 @@ const KEY = {
   BAMBOO: "useBamboo",
   BAMBOO_ADMIN: "useBambooAdmin",
   MEAL: "useMeal",
+  CALENDER: "useCalender",
 } as const;
 
 export default KEY;
diff --git a/src/helpers/getClassName.helper.ts b/src/helpers/getClassName.helper.ts
@@ -0,0 +1,14 @@
+const getClassName = (classname: string) => {
+  switch (classname) {
+    case "GRADE":
+      return "학년";
+    case "CLASS":
+      return "학급";
+    case "SCHOOL":
+      return "학교";
+    default:
+      return classname;
+  }
+};
+
+export default getClassName;
diff --git a/src/helpers/getDay.helper.ts b/src/helpers/getDay.helper.ts
@@ -0,0 +1,5 @@
+const getDay = (date: string) => {
+  return date.split("-")[2];
+};
+
+export default getDay;
diff --git a/src/helpers/index.ts b/src/helpers/index.ts
@@ -10,3 +10,5 @@ export { default as checkTextOverflow } from "./checkTextOverflow.helper";
 export { default as getTextDepth } from "./getTextDepth.helper";
 export { default as getMealName } from "./getMealName.helper";
 export { default as getTimetableType } from "./getTimetableType.helper";
+export { default as getDay } from "./getDay.helper";
+export { default as getClassName } from "./getClassName.helper";
diff --git a/src/interfaces/calender.interface.ts b/src/interfaces/calender.interface.ts
@@ -0,0 +1,9 @@
+export default interface ICalender {
+  title: string;
+  priority: number;
+  date: string;
+  color: string;
+  type: string;
+  grade: number;
+  classNumber: number;
+}
diff --git a/src/interfaces/calenderItem.interface.ts b/src/interfaces/calenderItem.interface.ts
@@ -0,0 +1,6 @@
+import IPlan from "./plan.interface";
+
+export default interface ICalenderItem {
+  date: string;
+  plans: Array<IPlan>;
+}
diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts
@@ -16,3 +16,5 @@ export type { default as IPostInfiniteList } from "./postInfiniteList.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";
diff --git a/src/interfaces/plan.interface.ts b/src/interfaces/plan.interface.ts
@@ -0,0 +1,11 @@
+import ICalender from "./calender.interface";
+
+export default interface IPlan extends ICalender {
+  id: number;
+  type: string;
+  user: {
+    id: number;
+    nickName: string;
+    profileImage: string;
+  };
+}
diff --git a/src/page/calender/index.tsx b/src/page/calender/index.tsx
@@ -1,13 +1,17 @@
 import styled from "styled-components";
-import { Aside } from "@/components/common";
+import { color, flex, font } from "@/styles";
+import { Column } from "@/components/Flex";
 import ScheduleBox from "./layouts/ScheduleBox";
 
 const CalenderPage = () => {
   return (
     <Layout>
       <Container>
+        <Column gap="8px" alignItems="center">
+          <Title />
+          <SubTitle />
+        </Column>
         <ScheduleBox />
-        <Aside />
       </Container>
     </Layout>
   );
@@ -21,9 +25,24 @@ const Layout = styled.div`
 
 const Container = styled.div`
   width: 76%;
-  display: flex;
-  justify-content: center;
-  gap: 8px;
+  ${flex.COLUMN};
+  align-items: center;
+  gap: 24px;
+`;
+
+const Title = styled.span`
+  ${font.H2};
+
+  &:after {
+    content: "🗓️ 캘린더";
+  }
+`;
+
+const SubTitle = styled.span`
+  color: ${color.gray};
+  &:after {
+    content: "좌우 화살표 방향키를 탭해 날짜를 조정해보세요.";
+  }
 `;
 
 export default CalenderPage;
diff --git a/src/page/calender/layouts/CalenderList.tsx b/src/page/calender/layouts/CalenderList.tsx
@@ -1,11 +1,27 @@
 import styled from "styled-components";
+import dayjs from "dayjs";
+import ICalenderItem from "@/interfaces/calenderItem.interface";
 import CalenderListItem from "./CalenderListItem";
 
-const CalenderList = () => {
+interface ICalenderListProps {
+  currentMonth: number;
+  calenderList: Array<ICalenderItem>;
+}
+
+const CalenderList = ({ currentMonth, calenderList }: ICalenderListProps) => {
+  const firstDayOfMonth = dayjs()
+    .year(new Date().getFullYear())
+    .month(currentMonth - 1)
+    .date(1);
+  const dayOfWeek = firstDayOfMonth.day();
+
   return (
     <Container>
-      {Array.from({ length: 10 }).map((_, index) => (
-        <CalenderListItem key={index} />
+      {Array.from({ length: dayOfWeek }).map((_, i) => (
+        <CalenderListItem key={i} calender={calenderList[0]} isEmpty />
+      ))}
+      {calenderList?.map((calender) => (
+        <CalenderListItem key={calender.date} calender={calender} />
       ))}
     </Container>
   );
@@ -14,8 +30,8 @@ const CalenderList = () => {
 const Container = styled.ul`
   width: 100%;
   display: flex;
-  justify-content: space-between;
   flex-wrap: wrap;
+  gap: 1.5%;
 `;
 
 export default CalenderList;