Gwasuwon-shot · seojisoosoo · Jun 29, 2023 · Jun 30, 2023 · Jul 1, 2023 · Jul 1, 2023
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -7,7 +7,7 @@ module.exports = {
     "plugin:import/warnings",
     "plugin:prettier/recommended",
     "plugin:@typescript-eslint/recommended",
-    "prettier/@typescript-eslint",
+    // "prettier/@typescript-eslint",
   ],
   rules: {
     "linebreak-style": 0,
@@ -22,6 +22,6 @@ module.exports = {
     "eol-last": ["error", "always"], // line의 가장 마지막 줄에는 개행 넣기
     "react/react-in-jsx-scope": "off",
     "no-multi-spaces": "error", // 스페이스 여러개 금지
-    "simple-import-sort/imports": "error",
+    // "simple-import-sort/imports": "error",
   },
 };
diff --git a/.husky/pre-commit b/.husky/pre-commit
diff --git a/index.html b/index.html
@@ -10,10 +10,27 @@
       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" />
+    <link rel="stylesheet" href="src/index.css" />
     <title>web-pre-task</title>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
+    <script>
+      window.onload = function () {
+        document.querySelector(".react-ios-time-picker-cell-inner-hour-format-selected").innerHTML = "오전";
+        const sections = document.querySelectorAll(".react-ios-time-picker-cell-inner-hour-format");
+
+        console.log(sections);
+        console.log(sections.length);
+        for (let i = 0; i < sections.length; i++) {
+          if (i === 0) {
+            let item = sections.item(i);
+
+            item.innerHTML = "오전";
+          }
+        }
+      };
+    </script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -11,13 +11,21 @@
     "format": "prettier --write --cache ."
   },
   "dependencies": {
+    "antd": "^5.6.4",
+    "date-fns": "^2.30.0",
+    "dayjs": "^1.11.9",
     "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-calendar": "^4.3.0",
+    "react-datepicker": "^4.14.1",
+    "react-day-picker": "^8.8.0",
     "react-dom": "^18.2.0",
+    "react-ios-time-picker": "^0.2.2",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.14.0",
     "recoil": "^0.7.7",
@@ -27,19 +35,19 @@
   },
   "devDependencies": {
     "@types/react": "^18.0.37",
+    "@types/react-datepicker": "^4.11.2",
     "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
+    "@typescript-eslint/eslint-plugin": "5",
+    "@typescript-eslint/parser": "5",
     "@vitejs/plugin-react": "^4.0.1",
     "eslint": "^8.38.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
-    "husky": "^8.0.3",
     "lint-staged": "^13.2.3",
     "prettier": "^2.8.8",
-    "typescript": "^5.0.2",
+    "typescript": "^5.1.6",
     "vite": "^4.3.9"
   },
   "lint-staged": {

diff --git a/src/components/.keep b/src/components/.keep
diff --git a/src/components/jisoo/.keep b/src/components/jisoo/.keep
diff --git a/src/components/jisoo/JisooCalendar.tsx b/src/components/jisoo/JisooCalendar.tsx
@@ -0,0 +1,281 @@
+import moment from "moment";
+import { useState } from "react";
+import Calendar from "react-calendar";
+import "react-calendar/dist/Calendar.css";
+import { TimePicker } from "react-ios-time-picker";
+import { styled } from "styled-components";
+import { CAELENDAR_DATA } from "../../core/jisoo/calendarData";
+import { calendarDatatTypes } from "../../type/jisoo/calendarDataTypes";
+
+export default function JisooCalendar() {
+  const [value, onChange] = useState(new Date());
+  const [classData, setClassData] = useState<calendarDatatTypes[]>(CAELENDAR_DATA);
+  const [openModal, setOpenModal] = useState<boolean>(false);
+  const [startTimeValue, setStartTimeValue] = useState("10:00 AM");
+  const [endTimeValue, setEndTimeValue] = useState("11:00 AM");
+  const [studentName, setStudentName] = useState("");
+
+  function handleChangeStartTimeValue(timeValue: string) {
+    setStartTimeValue(timeValue);
+  }
+
+  function handleChangeEndTimeValue(timeValue: string) {
+    setEndTimeValue(timeValue);
+
+    console.log(typeof timeValue);
+  }
+
+  function handleOpenModal() {
+    setOpenModal(true);
+  }
+
+  function handleCloseModal() {
+    setOpenModal(false);
+  }
+
+  function checkTimeValue(time: string) {
+    const hour = time.split(" ")[1];
+    const realTime = time.split(" ")[0];
+
+    return hour === "AM" ? "오전 " + realTime : "오후 " + realTime;
+  }
+
+  function handleInputStudentName(e: React.ChangeEvent<HTMLInputElement>) {
+    setStudentName(e.target.value);
+  }
+
+  function handleSaveTimes() {
+    handleCloseModal();
+    const newTimeData = startTimeValue.split(" ")[0] + "~" + endTimeValue.split(" ")[0];
+    const originTimeDatas = classData
+      .map(({ student, times }) => student === studentName && times)
+      .filter((time) => time !== false)[0];
+
+    setClassData(
+      classData.map((data) =>
+        data.student === studentName
+          ? {
+              ...data,
+              times: [...originTimeDatas, { dates: moment(value).format("YYYY-MM-DD"), time: newTimeData }],
+            }
+          : data,
+      ),
+    );
+  }
+
+  return (
+    <JisooCalendarContainer>
+      {openModal && (
+        <Modal>
+          <ModalTitleWrapper>
+            <ModalTitle>{moment(value).format("YYYY-MM-DD")}</ModalTitle>
+            <XButton onClick={handleCloseModal}>X</XButton>
+          </ModalTitleWrapper>
+          <TimePickerWrapper>
+            <li>
+              <p>시작</p>
+              <TimePicker
+                onChange={handleChangeStartTimeValue}
+                value={startTimeValue}
+                cancelButtonText="취소"
+                saveButtonText="확인"
+                use12Hours
+              />
+              <RealTimeBox>{checkTimeValue(startTimeValue)}</RealTimeBox>
+            </li>
+            <li>
+              <p>종료</p>
+              <TimePicker
+                onChange={handleChangeEndTimeValue}
+                value={endTimeValue}
+                cancelButtonText="취소"
+                saveButtonText="확인"
+                use12Hours
+              />
+              <RealTimeBox>{checkTimeValue(endTimeValue)}</RealTimeBox>
+            </li>
+          </TimePickerWrapper>
+          <StudentNameInput type="text" placeholder="학생이름" onChange={handleInputStudentName} />
+          <TimeResultButtom type="button" onClick={handleSaveTimes}>
+            저장
+          </TimeResultButtom>
+        </Modal>
+      )}
+      <JisooCalendarWrapper onClick={handleOpenModal}>
+        <Calendar
+          onChange={onChange}
+          // useState로 포커스 변경 시 현재 날짜 받아오기
+          formatDay={(locale, date) => moment(date).format("DD")} // 날'일' 제외하고 숫자만 보이도록 설정
+          value={value}
+          minDetail="month"
+          maxDetail="month"
+          showNeighboringMonth={false}
+          tileContent={({ date, view }) => {
+            let html: Element[] = [];
+            {
+              classData.map(({ id, student, times, color }: calendarDatatTypes) => {
+                times.map(
+                  ({ dates, time }) =>
+                    dates === moment(date).format("YYYY-MM-DD") &&
+                    html.push(
+                      <Box key={id} $color={color}>
+                        <p>{student}</p>
+                        <p>{time}</p>
+                      </Box>,
+                    ),
+                );
+              });
+            }
+
+            return <>{html}</>;
+          }}
+        />
+      </JisooCalendarWrapper>
+    </JisooCalendarContainer>
+  );
+}
+
+const ModalTitle = styled.h1`
+  ${({ theme }) => theme.fonts.caption_large};
+`;
+
+const XButton = styled.p`
+  ${({ theme }) => theme.fonts.caption_large};
+
+  cursor: pointer;
+`;
+
+const JisooCalendarContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Modal = styled.aside`
+  display: flex;
+  flex-direction: column;
+  align-items: space-between;
+  /* justify-content: space-between; */
+
+  position: absolute;
+
+  width: 50rem;
+  height: 50rem;
+  padding: 3rem;
+
+  border: 1px solid ${({ theme }) => theme.colors.black};
+  border-radius: 5px;
+  background-color: ${({ theme }) => theme.colors.gray1};
+`;
+
+const Box = styled.button<{ $color: string }>`
+  display: flex;
+
+  padding: 1rem;
+  margin: 1rem !important;
+
+  border-radius: 5px;
+
+  background-color: ${({ $color }) => $color};
+`;
+
+const JisooCalendarWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  margin: 2rem 0;
+
+  .react-calendar__navigation button:disabled {
+    //제목
+    color: ${({ theme }) => theme.colors.main};
+    background-color: ${({ theme }) => theme.colors.white};
+    ${({ theme }) => theme.fonts.body1};
+  }
+
+  .react-calendar {
+    border: none;
+    width: 100%;
+    height: 100%;
+    ${({ theme }) => theme.fonts.body1};
+  }
+  .react-calendar__month-view {
+    // 날짜
+    abbr {
+      color: ${({ theme }) => theme.colors.black};
+    }
+  }
+  .react-calendar__month-view__weekdays {
+    // 요일
+    abbr {
+      ${({ theme }) => theme.fonts.body1};
+      text-decoration: none;
+    }
+  }
+  .react-calendar__tile {
+    //타일 한 칸
+    text-align: center;
+    min-height: 10rem;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    border: 0.5px solid black;
+  }
+  /*hover, focus, 선택됐을 시 */
+  .react-calendar__tile:enabled:hover,
+  .react-calendar__tile:enabled:focus,
+  .react-calendar__tile--active {
+    background-color: ${({ theme }) => theme.colors.gray1};
+    outline: none;
+    cursor: pointer;
+  }
+  /* 오늘 날짜 */
+  .react-calendar__tile--now:enabled:hover,
+  .react-calendar__tile--now:enabled:focus,
+  .react-calendar__tile--now {
+    background: ${({ theme }) => theme.colors.sub1};
+    border-radius: 10px;
+  }
+  /* 1년 앞뒤 버튼 */
+  .react-calendar__navigation__prev2-button,
+  .react-calendar__navigation__next2-button {
+    display: none;
+  }
+`;
+
+const TimePickerWrapper = styled.ul`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  width: 30rem;
+  margin-top: 3rem;
+`;
+
+const ModalTitleWrapper = styled.header`
+  display: flex;
+  justify-content: space-between;
+`;
+
+const RealTimeBox = styled.div`
+  position: absolute;
+
+  ${({ theme }) => theme.fonts.body1};
+
+  z-index: 0;
+`;
+
+const TimeResultButtom = styled.button`
+  padding: 1rem;
+  margin-top: 35rem;
+
+  border: 1px solid black;
+
+  cursor: pointer;
+`;
+
+const StudentNameInput = styled.input`
+  margin-top: -4.5rem;
+
+  border: 1px solid black;
+`;
diff --git a/src/core/.keep b/src/core/.keep