Skip to content

Commit cb5fa47

Browse files
UbinquitousUbinquitous
authored
Merge pull request #84 from Team-INSERT/feat/calender
캘린더 페이지 완성
2 parents 0d99f0a + ef8b32a commit cb5fa47

File tree

20 files changed

+472
-41
lines changed

20 files changed

+472
-41
lines changed

‎src/apis/httpClient/httpClient.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,4 +171,5 @@ export default {
171171
like: new HttpClient("api/likes/update", axiosConfig),
172172
image: new HttpClient("api/image/save", axiosConfig),
173173
meal: new HttpClient("api/meal", axiosConfig),
174+
calender: new HttpClient("api/calender", axiosConfig),
174175
};

‎src/components/common/Modal/PlanAddModal/index.tsx

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import { XIcon } from "@/assets/icons";
2+
import { Column } from "@/components/Flex";
3+
import { Button, Input, Select } from "@/components/atoms";
4+
import useModal from "@/hooks/useModal";
5+
import useUser from "@/hooks/useUser";
6+
import { useAddCalenderPlanMutation } from "@/page/calender/services/mutation.service";
7+
import { color, flex, font } from "@/styles";
8+
import React from "react";
9+
import styled from "styled-components";
10+
11+
interface IPlanAddModalProps {
12+
date: string;
13+
}
14+
15+
const PlanAddModal = ({ date }: IPlanAddModalProps) => {
16+
const { closeModal } = useModal();
17+
const { mutate } = useAddCalenderPlanMutation();
18+
const { user } = useUser();
19+
const [planType, setPlanType] = React.useState("CLASS");
20+
const [title, setTitle] = React.useState("");
21+
const textareaRef = React.useRef<HTMLTextAreaElement>(null);
22+
23+
const handleAddButtonClick = () => {
24+
mutate({
25+
title,
26+
priority: 0,
27+
date,
28+
color: "#000",
29+
type: planType,
30+
grade: user.grade,
31+
classNumber: user.classNum,
32+
});
33+
};
34+
35+
React.useEffect(() => {
36+
if (textareaRef.current) textareaRef.current.focus();
37+
}, []);
38+
39+
return (
40+
<Container>
41+
<Header>
42+
<BambooTitle />
43+
<CloseButton>
44+
<XIcon onClick={closeModal} />
45+
</CloseButton>
46+
</Header>
47+
<Body>
48+
<Input
49+
label="일정 내용"
50+
placeholder="간략한 일정 내용을 입력해주세요."
51+
onChange={(e) => setTitle(e.target.value)}
52+
value={title}
53+
/>
54+
<Column gap="6px">
55+
<StyledTitle>일정 분류</StyledTitle>
56+
<Select
57+
label=""
58+
width="100px"
59+
options={["CLASS", "GRADE", "SCHOOL"]}
60+
defaultOption={planType}
61+
handler={setPlanType}
62+
/>
63+
</Column>
64+
</Body>
65+
<PlanButtonBox>
66+
<Button onClick={handleAddButtonClick} color={color.primary_blue}>
67+
추가하기
68+
</Button>
69+
</PlanButtonBox>
70+
</Container>
71+
);
72+
};
73+
74+
const Container = styled.div`
75+
width: 40vw;
76+
height: fit-content;
77+
overflow-y: scroll;
78+
background-color: ${color.white};
79+
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
80+
border-radius: 8px;
81+
${flex.COLUMN};
82+
`;
83+
84+
const Header = styled.header`
85+
width: 100%;
86+
padding: 10px 0 10px 18px;
87+
display: flex;
88+
align-items: center;
89+
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
90+
`;
91+
92+
const BambooTitle = styled.div`
93+
${font.p2};
94+
font-weight: 500;
95+
96+
&:after {
97+
content: "📆 일정 추가하기";
98+
}
99+
`;
100+
101+
const Body = styled.div`
102+
padding: 16px 28px;
103+
${flex.COLUMN};
104+
gap: 12px;
105+
`;
106+
107+
const CloseButton = styled.button`
108+
margin: 0 20px 0 auto;
109+
`;
110+
111+
const PlanButtonBox = styled.div`
112+
width: fit-content;
113+
margin: 0 16px 16px auto;
114+
`;
115+
116+
const StyledTitle = styled.span`
117+
${font.p3};
118+
font-weight: 500;
119+
`;
120+
121+
export default PlanAddModal;

‎src/constants/key.constant.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const KEY = {
77
BAMBOO: "useBamboo",
88
BAMBOO_ADMIN: "useBambooAdmin",
99
MEAL: "useMeal",
10+
CALENDER: "useCalender",
1011
} as const;
1112

1213
export default KEY;

‎src/helpers/getClassName.helper.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const getClassName = (classname: string) => {
2+
switch (classname) {
3+
case "GRADE":
4+
return "학년";
5+
case "CLASS":
6+
return "학급";
7+
case "SCHOOL":
8+
return "학교";
9+
default:
10+
return classname;
11+
}
12+
};
13+
14+
export default getClassName;

‎src/helpers/getDay.helper.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const getDay = (date: string) => {
2+
return date.split("-")[2];
3+
};
4+
5+
export default getDay;

‎src/helpers/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,5 @@ export { default as checkTextOverflow } from "./checkTextOverflow.helper";
1010
export { default as getTextDepth } from "./getTextDepth.helper";
1111
export { default as getMealName } from "./getMealName.helper";
1212
export { default as getTimetableType } from "./getTimetableType.helper";
13+
export { default as getDay } from "./getDay.helper";
14+
export { default as getClassName } from "./getClassName.helper";

‎src/interfaces/calender.interface.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export default interface ICalender {
2+
title: string;
3+
priority: number;
4+
date: string;
5+
color: string;
6+
type: string;
7+
grade: number;
8+
classNumber: number;
9+
}

‎src/interfaces/calenderItem.interface.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import IPlan from "./plan.interface";
2+
3+
export default interface ICalenderItem {
4+
date: string;
5+
plans: Array<IPlan>;
6+
}

‎src/interfaces/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,5 @@ export type { default as IPostInfiniteList } from "./postInfiniteList.interface"
1616
export type { default as IInfiniteResult } from "./infiniteResult.interface";
1717
export type { default as IInputPost } from "./inputPost.interface";
1818
export type { default as IRecomment } from "./recomment.interface";
19+
export type { default as ICalender } from "./calender.interface";
20+
export type { default as IPlan } from "./plan.interface";

‎src/interfaces/plan.interface.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import ICalender from "./calender.interface";
2+
3+
export default interface IPlan extends ICalender {
4+
id: number;
5+
type: string;
6+
user: {
7+
id: number;
8+
nickName: string;
9+
profileImage: string;
10+
};
11+
}

0 commit comments

Comments
 (0)