add : 스케쥴 시각화 컴포넌트 WIP (#12)

Kim-s-Crew · May 13, 2024 · 08e4cc0 · 08e4cc0
1 parent 2383b5e
commit 08e4cc0
Show file tree

Hide file tree

Showing 5 changed files with 172 additions and 40 deletions.
diff --git a/src/app/admin/schedule/page.tsx b/src/app/admin/schedule/page.tsx
@@ -2,30 +2,35 @@
 import React, { useState } from 'react';
 import Calendar from 'react-calendar';
 import dayjs from 'dayjs';
-import Swal from 'sweetalert2';
-import { TimeInput } from '@nextui-org/react';
 import Modal from '@/components/ui/Modal';
 import ScheduleInput from '@/components/admin/schedule/ScheduleInput';
+import ScheduleVisualizer from '@/components/admin/schedule/ScheduleVisualizer';
 
-type scheduletype = {
+type scheduleType = {
   content: string;
-  starttime: string;
-  endtime: string;
+  startTime: string;
+  endTime: string;
   scheduleDate: string;
 };
+interface Time {
+  startHour: number;
+  startMinute: number;
+  endHour: number;
+  endMinute: number;
+}
 
 const CalendarPage = () => {
-  const [modalOpen, setmodalOpen] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
   const [date, onChange] = useState(new Date());
-  const [schedules, setSchedule] = useState<scheduletype[]>([]);
+  const [schedules, setSchedule] = useState<scheduleType[]>([]);
   const [dayList, setDayList] = useState(['2024-03-26', '2024-03-27']);
   //   const [showSchedule, setShowSchedule] = useState(false);
   console.log(schedules);
   // console.log(dayList);
 
-  let starttimeInput: HTMLInputElement;
-  let endtimeInput: HTMLInputElement;
-  let contentInput: HTMLInputElement;
+  //임시 test 용
+  const [times, setTimes] = useState<Time[]>([]);
+  console.log('시간들 잘 들어오니?', times);
 
   const selectedDate = dayjs(date).format('YYYY년 M월 D일');
 
@@ -50,7 +55,7 @@ const CalendarPage = () => {
         <span
           onClick={() => {
             console.log('hi');
-            setmodalOpen(true);
+            setModalOpen(true);
           }}
           className='days-btn'
         >
@@ -62,8 +67,12 @@ const CalendarPage = () => {
   return (
     <>
       {modalOpen && (
-        <Modal setIsOpen={setmodalOpen}>
-          <ScheduleInput selectedDate={selectedDate} />
+        <Modal setIsOpen={setModalOpen}>
+          <ScheduleInput
+            selectedDate={selectedDate}
+            times={times}
+            setTimes={setTimes}
+          />
         </Modal>
       )}
       <Calendar
@@ -85,36 +94,21 @@ const CalendarPage = () => {
           return (
             <>
               {schedule ? (
-                <>
-                  {/* <h1>일정 날짜: {schedule.scheduleDate}</h1> */}
-                  <div className='flex border-black border-2 w-[800px]'>
-                    <div className='w-[4.17%] bg-white h-[20px]'>0</div>
-                    <div className='w-[4.17%] bg-white h-[20px]'>1</div>
-                    <div className='w-[4.17%] bg-white h-[20px]'>2</div>
-                    <div className='w-[4.17%] bg-slate-600 h-[20px]'>3</div>
-                    <div className='w-[4.17%] bg-slate-600 h-[20px]'>4</div>
-                    <div className='w-[4.17%] bg-slate-600 h-[20px]'>5</div>
-                    <div className='w-[4.17%] bg-white h-[20px]'>6</div>
-                    <div className='w-[4.17%] bg-white h-[20px]'>7</div>
-                    <div className='w-[4.17%] bg-white h-[20px]'>8</div>
-                    <div className='w-[4.17%] bg-white h-[20px]'>9</div>
-                    <div className='w-[4.17%] bg-white h-[20px]'>10</div>
-                    <div className='w-[4.17%] bg-white h-[20px]'>11</div>
-                    <div className='w-[4.17%] bg-white h-[20px]'>12</div>
-                    <div className='w-[4.17%] bg-white h-[20px]'>13</div>
-                    <div className='w-[4.17%] bg-white h-[20px]'>14</div>
-                  </div>
+                // <>
+                //   {/* <h1>일정 날짜: {schedule.scheduleDate}</h1> */}
 
-                  <p>시작시간:{schedule.starttime}</p>
+                //   <p>시작시간:{schedule.startTime}</p>
 
-                  <p>끝나는 시간:{schedule.endtime}</p>
-                  <br />
-                  <p>{schedule.content}</p>
-                </>
+                //   <p>끝나는 시간:{schedule.endTime}</p>
+                //   <br />
+                //   <p>{schedule.content}</p>
+                // </>
+                <></>
               ) : null}
             </>
           );
         })}
+        <ScheduleVisualizer schedules={times} />
       </div>
     </>
   );

diff --git a/src/assets/images/123.png b/src/assets/images/123.png
diff --git a/src/components/admin/schedule/ScheduleBar.tsx b/src/components/admin/schedule/ScheduleBar.tsx
@@ -0,0 +1,85 @@
+'use client';
+import React from 'react';
+
+interface Props {
+  startHour: number;
+  startMinute: number;
+  endHour: number;
+  endMinute: number;
+}
+
+const ScheduleBar = ({ startHour, startMinute, endHour, endMinute }: Props) => {
+  let startPercentage = 0;
+  let endPercentage = 0;
+
+  function calculatePercentageInDay(
+    startHour: number,
+    startMinute: number,
+    endHour: number,
+    endMinute: number
+  ) {
+    // 입력된 시간을 분 단위로 변환
+    const totalStartMinutes = startHour * 60 + startMinute;
+    const totalEndMinutes = endHour * 60 + endMinute;
+
+    // 하루의 총 분 수
+    const totalMinutesInDay = 24 * 60;
+
+    // 시간을 백분율로 계산
+    startPercentage = (totalStartMinutes / totalMinutesInDay) * 100;
+    endPercentage = (totalEndMinutes / totalMinutesInDay) * 100;
+
+    return [Math.round(startPercentage / 2), Math.round(endPercentage / 2)];
+  }
+
+  //   const startDivNumber = startPercentage / 2;
+  //   const endDivNumber = endPercentage / 2;
+
+  const totalArray = Array.from({ length: 48 }, (_, index) => index + 1);
+
+  // 함수 호출하여 백분율 계산
+  const percentage = calculatePercentageInDay(
+    startHour,
+    startMinute,
+    endHour,
+    endMinute
+  );
+  console.log(percentage);
+  const [start, end] = percentage;
+  //   console.log(
+  //     `입력된 시간은 하루 중 약 ${percentage.toFixed(2)}% 에 해당합니다.`
+  //   );
+  function createIntegerArray(start: number, end: number) {
+    const result = [];
+    for (let i = start; i <= end; i++) {
+      result.push(i);
+    }
+    return result;
+  }
+  console.log(createIntegerArray(start, end));
+  const coloredDiv = createIntegerArray(start, end);
+
+  return (
+    <section className='flex w-[650px] h-[30px] '>
+      {totalArray.map((item) => {
+        return coloredDiv.includes(item) ? (
+          <div
+            className={`${item + ''} w-full p-1 text-xs bg-blue-400`}
+            key={item}
+          >
+            {/* {item} */}
+          </div>
+        ) : (
+          <div
+            className={`${item + ''} w-full p-1 text-xs bg-slate-400`}
+            key={item}
+          >
+            {/* {item} */}
+          </div>
+        );
+      })}
+    </section>
+  );
+};
+
+export default ScheduleBar;
diff --git a/src/components/admin/schedule/ScheduleInput.tsx b/src/components/admin/schedule/ScheduleInput.tsx
@@ -4,9 +4,17 @@ import Swal from 'sweetalert2';
 
 interface Props {
   selectedDate: string;
+  times: any;
+  setTimes: React.Dispatch<React.SetStateAction<Time[]>>;
+}
+interface Time {
+  startHour: number;
+  startMinute: number;
+  endHour: number;
+  endMinute: number;
 }
 
-const ScheduleInput = ({ selectedDate }: Props) => {
+const ScheduleInput = ({ selectedDate, setTimes }: Props) => {
   const [inputs, setInputs] = useState({
     content: '',
     startTime: '',
@@ -21,7 +29,19 @@ const ScheduleInput = ({ selectedDate }: Props) => {
 
       return;
     }
-    return { content, startTime, endTime };
+
+    const [startHour, startMinute] = startTime.split(':').map(Number);
+    const [endHour, endMinute] = endTime.split(':').map(Number);
+
+    console.log(content, startHour, startMinute, endHour, endMinute);
+    console.log(content, typeof +startTime, typeof +endTime);
+
+    setTimes((prev) => [
+      ...prev,
+      { startHour, startMinute, endHour, endMinute },
+    ]);
+
+    return { content, startHour, startMinute, endHour, endMinute };
   };
 
   const HandlerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -30,7 +50,7 @@ const ScheduleInput = ({ selectedDate }: Props) => {
       [e.target.name]: e.target.value,
     });
   };
-  console.log(inputs);
+  // console.log(inputs);
   return (
     <form className='flex flex-col justify-center' onSubmit={handleSubmit}>
       <h1 className='font-bold text-2xl text-center'>{selectedDate}</h1>

diff --git a/src/components/admin/schedule/ScheduleVisualizer.tsx b/src/components/admin/schedule/ScheduleVisualizer.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import ScheduleBar from './ScheduleBar';
+import Image from 'next/image';
+import ruler from '@/assets/images/123.png';
+
+interface Time {
+  startHour: number;
+  startMinute: number;
+  endHour: number;
+  endMinute: number;
+}
+interface Props {
+  schedules: Time[];
+}
+
+const ScheduleVisualizer = ({ schedules }: Props) => {
+  return (
+    <div className='w-[650px]'>
+      {schedules.map((schedule, idx) => (
+        <ScheduleBar
+          key={idx}
+          startHour={schedule.startHour}
+          startMinute={schedule.startMinute}
+          endHour={schedule.endHour}
+          endMinute={schedule.endMinute}
+        />
+      ))}
+      <Image src={ruler} />
+    </div>
+  );
+};
+
+export default ScheduleVisualizer;