Gwasuwon-shot · eunbeann · Jun 29, 2023 · Jun 30, 2023 · Jun 30, 2023 · Jul 1, 2023
diff --git a/index.html b/index.html
@@ -1,19 +1,19 @@
 <!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/fruit.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link
-      rel="stylesheet"
-      as="style"
-      crossorigin="anonymous"
-      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css" />
-    <link href="https://webfontworld.github.io/kt/YDestreet.css" rel="stylesheet" />
-    <title>web-pre-task</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+<html lang="ko">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/fruit.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" as="style" crossorigin="anonymous"
+    href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css" />
+  <link href="https://webfontworld.github.io/kt/YDestreet.css" rel="stylesheet" />
+  <title>web-pre-task</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -11,13 +11,17 @@
     "format": "prettier --write --cache ."
   },
   "dependencies": {
+    "@types/react-big-calendar": "^1.6.4",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-simple-import-sort": "^10.0.0",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
+    "react-big-calendar": "^1.8.1",
     "react-dom": "^18.2.0",
+    "react-moment": "^1.1.3",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.14.0",
     "recoil": "^0.7.7",

diff --git a/src/Router.tsx b/src/Router.tsx
@@ -9,6 +9,7 @@ export default function Router() {
   return (
     <BrowserRouter>
       <Routes>
+        <Route path="/" element={<EunBean />} />
         <Route path="/eun-bean" element={<EunBean />} />
         <Route path="/hee-jung" element={<HeeJung />} />
         <Route path="/hye-in" element={<Hyein />} />

diff --git a/src/components/eunBean/.keep b/src/components/eunBean/.keep
diff --git a/src/components/eunBean/BeanCalendar.tsx b/src/components/eunBean/BeanCalendar.tsx
@@ -0,0 +1,103 @@
+import { styled } from "styled-components";
+import { Calendar, momentLocalizer } from "react-big-calendar";
+import moment from "moment";
+// 한글 넣기
+import "moment/dist/locale/ko";
+
+import "./calendar-style/calendarStyles.css";
+import Toolbar from "./calendar-component/Toolbar";
+import DateHeader from "./calendar-component/DateHeader";
+import { EVENT_LIST } from "./calendar-data/CalendarConstnat";
+
+export default function BeanCalendar() {
+  // locale 한글로 설정
+  moment.locale("ko-KR");
+  // localizer 인스턴스 생성
+  const localizer = momentLocalizer(moment);
+
+  //  일정 등록 => 카테고리 마다 색 구분
+  const components = {
+    event: (props: any) => {
+      // 시간 만들기
+      const dateString = props.event.start;
+      const dateObject = new Date(dateString);
+      const timeString = dateObject.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false });
+      const eventType = props?.event?.type;
+
+      // 이벤트 색 주기
+      switch (eventType) {
+        case "토마토":
+          return (
+            <Event style={{ background: "yellow" }}>
+              {props.title} {timeString}
+            </Event>
+          );
+        case "키위":
+          return (
+            <Event style={{ background: "beige" }}>
+              {props.title} {timeString}
+            </Event>
+          );
+        case "바나나":
+          return (
+            <Event style={{ background: "lightgrey" }}>
+              {props.title} {timeString}
+            </Event>
+          );
+        case "체리":
+          return (
+            <Event style={{ background: "lightblue" }}>
+              {props.title} {timeString}
+            </Event>
+          );
+        case "복숭아":
+          return (
+            <Event style={{ background: "lightpink" }}>
+              {props.title} {timeString}
+            </Event>
+          );
+        default:
+          return null;
+      }
+    },
+  };
+
+  return (
+    <>
+      <Header> 비니 캘린더 </Header>
+      <CalendarWrapper>
+        <Calendar
+          localizer={localizer}
+          style={{ height: 500, width: 500 }}
+          events={EVENT_LIST}
+          startAccessor="start"
+          endAccessor="end"
+          components={{
+            ...components,
+            toolbar: Toolbar,
+            dateHeader: DateHeader,
+          }}
+        />
+      </CalendarWrapper>
+    </>
+  );
+}
+
+const CalendarWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Header = styled.header`
+  font-size: 3rem;
+  text-align: center;
+  margin: 3rem;
+`;
+
+const Event = styled.div`
+  color: black;
+  border-radius: 3px;
+  height: 100%;
+  padding: 0.2rem;
+`;
diff --git a/src/components/eunBean/calendar-component/DateHeader.tsx b/src/components/eunBean/calendar-component/DateHeader.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+export default function DateHeader(props) {
+  const { date, label } = props;
+  const isSunday = new Date(date).getDay() === 0;
+
+  function headerStyle() {
+    return {
+      color: isSunday ? "red" : "inherit",
+    };
+  }
+
+  return (
+    <div className="rbc-date-header" style={headerStyle()}>
+      {label}
+    </div>
+  );
+}
diff --git a/src/components/eunBean/calendar-component/Toolbar.tsx b/src/components/eunBean/calendar-component/Toolbar.tsx
@@ -0,0 +1,13 @@
+export default function Toolbar(props) {
+  const { date } = props;
+
+  const navigate = (action) => {
+    props.onNavigate(action);
+  };
+
+  return (
+    <div className="rbc-toolbar">
+      <span className="rbc-toolbar-label">{`${date.getFullYear()}년 ${date.getMonth() + 1}월`}</span>
+    </div>
+  );
+}
diff --git a/src/components/eunBean/calendar-data/CalendarConstnat.ts b/src/components/eunBean/calendar-data/CalendarConstnat.ts
@@ -0,0 +1,75 @@
+export interface eventInfo {
+  id: number;
+  title: string;
+  start: Date;
+  end: Date;
+  type: string;
+}
+
+// 이벤트 리스트
+export const EVENT_LIST = [
+  {
+    id: 0,
+    title: "지수",
+    start: new Date(2023, 6, 6, 13, 0), // 시작 시간 (년, 월(0부터 시작), 일, 시간, 분)
+    end: new Date(2023, 6, 6, 14, 0), // 종료 시간 (년, 월(0부터 시작), 일, 시간, 분
+    type: "복숭아",
+    // 각 컬러 지정을 위한 type 지정
+  },
+  {
+    id: 1,
+    title: "희정",
+    start: new Date(2023, 6, 6, 19, 0),
+    end: new Date(2023, 6, 6, 20, 0),
+    type: "키위",
+  },
+  {
+    id: 2,
+    title: "은빈",
+    start: new Date(2023, 6, 9, 18, 0),
+    end: new Date(2023, 6, 9, 19, 0),
+    type: "토마토",
+  },
+  {
+    id: 3,
+    title: "지수",
+    start: new Date(2023, 6, 13, 13, 0),
+    end: new Date(2023, 6, 13, 14, 0),
+    type: "복숭아",
+  },
+  {
+    id: 4,
+    title: "희정",
+    start: new Date(2023, 6, 16, 16, 0),
+    end: new Date(2023, 6, 16, 24, 0),
+    type: "키위",
+  },
+  {
+    id: 5,
+    title: "지수",
+    start: new Date(2023, 6, 20, 13, 0),
+    end: new Date(2023, 6, 20, 14, 0),
+    type: "복숭아",
+  },
+  {
+    id: 5,
+    title: "성경",
+    start: new Date(2023, 6, 22, 11, 0),
+    end: new Date(2023, 6, 22, 12, 0),
+    type: "체리",
+  },
+  {
+    id: 5,
+    title: "지수",
+    start: new Date(2023, 6, 27, 13, 0),
+    end: new Date(2023, 6, 27, 14, 0),
+    type: "복숭아",
+  },
+  {
+    id: 6,
+    title: "혜인",
+    start: new Date(2023, 6, 30, 15, 0),
+    end: new Date(2023, 6, 30, 16, 0),
+    type: "바나나",
+  },
+];