[FE] 해커톤 구현 내용 리팩터링

frontend/.eslintrc.json

@@ -26,6 +26,9 @@
     "plugin:storybook/recommended"
   ],
   "rules": {
+    "@typescript-eslint/consistent-type-imports": "error",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/no-noninteractive-element-interactions": "off",
     "react-refresh/only-export-components": [
       "warn",
       {

frontend/.prettierrc

@@ -13,10 +13,12 @@
 
   "importOrder": [
     "^@layouts/(.*)$",
+    "^@contexts/(.*)$",
     "^@pages/(.*)$",
     "^@components/(.*)$",
     "^@hooks/(.*)$",
     "^@apis/(.*)$",
+    "^@stores/(.*)$",
     "^@common/(.*)$",
     "^@utils/(.*)$",
     "^@assets/(.*)$",

frontend/.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "eslint.workingDirectories": ["./frontend"],
+  "stylelint.configFile": ".stylelintrc.json",
+  "stylelint.packageManager": "npm",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.stylelint": "explicit",
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.prettier": "explicit"
+  },
+  "stylelint.validate": ["typescript", "typescriptreact"]
+}

frontend/src/apis/getMeeting.ts

@@ -5,15 +5,16 @@ export interface Schedules {
   times: string[];
 }
 
-export interface getMeetingResponse {
+export interface GetMeetingResponse {
   meetingName: string;
   startTime: string;
   endTime: string;
   availableDates: string[];
   schedules: Schedules[];
 }
 
-const getMeeting = async (uuid = '550e8400') => {
+// uuid 기본값은 임시 설정된 uuid
+const getMeeting = async (uuid = '550e8400'): Promise<GetMeetingResponse> => {
   const url = `${API_URL}/api/v1/meeting/${uuid}`;
 
   const response = await fetch(url, {
@@ -29,7 +30,7 @@ const getMeeting = async (uuid = '550e8400') => {
 
   const data = await response.json();
 
-  return data.data as getMeetingResponse;
+  return data.data;
 };
 
 export default getMeeting;

frontend/src/apis/schedule.ts

@@ -0,0 +1,42 @@
+import { API_URL } from '@constants/api';
+
+import type { Schedules } from './getMeeting';
+
+export const postSchedule = async (requestData: Schedules[]) => {
+  const url = `${API_URL}/api/v1/schedule`;
+
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      meetingId: 1,
+      guestName: 'daon',
+      dateTimes: requestData,
+    }),
+  });
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! Status: ${response.status}`);
+  }
+};
+
+// 현재 쓰지 않는 API (schedule 수정 시 사용하는 API)
+export const getSchedule = async () => {
+  const url = `${API_URL}/api/v1/schedule}`;
+
+  const response = await fetch(url, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! Status: ${response.status}`);
+  }
+
+  const data = await response.json();
+  return data;
+};

frontend/src/components/TimePicker/TimePicker.utils.ts → frontend/src/components/Time/Picker/TimePicker.util.ts

@@ -1,37 +1,42 @@
-import { TimePickerProps } from '.';
+import type { GetMeetingResponse } from '@apis/getMeeting';
 
-type Test = Record<string, number>;
+type TimeSlot = Record<string, number>;
 
 const generateTimeSlots = (start: string, end: string) => {
   const startHour = Number(start.split(':')[0]);
   const endHour = Number(end.split(':')[0]);
-  const slots = [];
+  const slots: string[] = [];
 
   for (let i = startHour; i <= endHour; i++) {
-    slots.push(`${i.toString().padStart(2, '0')}:00`);
+    slots.push(`${i.toString().padStart(2, '0') + ':00'}`);
   }
 
   return slots;
 };
 
-export const generateScheduleMatrix = (data: TimePickerProps) => {
-  const { startTime, endTime, availableDates, schedules } = data;
-
+export const generateScheduleMatrix = ({
+  startTime,
+  endTime,
+  availableDates,
+  schedules,
+}: GetMeetingResponse) => {
   const timeSlots = generateTimeSlots(startTime, endTime);
   const timeSlotIndex = timeSlots.reduce((acc, slot, idx) => {
     acc[slot] = idx;
     return acc;
-  }, {} as Test);
+  }, {} as TimeSlot);
 
-  const scheduleMatrix = Array.from({ length: timeSlots.length }, () =>
+  const scheduleMatrix: boolean[][] = Array.from({ length: timeSlots.length }, (): boolean[] =>
     Array(availableDates.length).fill(false),
   );
 
   schedules.forEach((schedule) => {
     const dateIndex = availableDates.indexOf(schedule.date);
+
     if (dateIndex !== -1) {
       schedule.times.forEach((time) => {
         const timeIndex = timeSlotIndex[time];
+
         if (timeIndex !== undefined) {
           scheduleMatrix[timeIndex][dateIndex] = true;
         }
@@ -52,16 +57,16 @@ export const convertToSchedule = (
 
   const schedules = availableDates.map((date, colIndex) => {
     const times: string[] = [];
+
     matrix.forEach((row, rowIndex) => {
       if (row[colIndex]) {
-        times.push(timeSlots[rowIndex] + ':00');
-        times.push(timeSlots[rowIndex].slice(0, 2) + ':30:00');
+        // 임시로 30분 단위도 추가되도록 설정
+        times.push(timeSlots[rowIndex]);
+        times.push(timeSlots[rowIndex].slice(0, 2) + ':30');
       }
     });
-    return {
-      date,
-      times,
-    };
+
+    return { date, times };
   });
 
   return schedules.filter((schedule) => schedule.times.length > 0);

frontend/src/components/Time/Picker/index.tsx

@@ -0,0 +1,74 @@
+import { useContext, useMemo } from 'react';
+
+import { TimePickerUpdateStateContext } from '@contexts/TimePickerUpdateStateProvider';
+
+import Button from '@components/_common/Button';
+import TimeSlot from '@components/_common/TimeSlot';
+
+import useTimePick from '@hooks/useTimePick/useTimePick';
+
+import type { GetMeetingResponse } from '@apis/getMeeting';
+
+import { usePostScheduleMutation } from '@stores/servers/meeting/mutations';
+
+import { s_buttonContainer, s_cell, s_table, s_th } from '../Time.styles';
+import { convertToSchedule, generateScheduleMatrix } from './TimePicker.util';
+
+export interface TimePickerProps {
+  data: GetMeetingResponse;
+}
+
+export default function TimePicker({ data }: TimePickerProps) {
+  const { isTimePickerUpdate, handleToggleIsTimePickerUpdate } = useContext(
+    TimePickerUpdateStateContext,
+  );
+
+  const initialValue = useMemo(() => generateScheduleMatrix(data), [data]);
+  const [ref, value] = useTimePick(isTimePickerUpdate, initialValue);
+
+  const { mutate: postScheduleMutate } = usePostScheduleMutation(() =>
+    handleToggleIsTimePickerUpdate(),
+  );
+
+  const handleOnToggle = () => {
+    const convert = convertToSchedule(value, data.availableDates, data.startTime, data.endTime);
+
+    postScheduleMutate(convert);
+  };
+
+  const formattedAvailableDates = ['', ...data.availableDates];
+
+  return (
+    <div>
+      <table css={s_table} ref={ref}>
+        <thead>
+          <tr>
+            {formattedAvailableDates.map((date) => (
+              <th key={date}>{date}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {value.map((row, rowIndex) => (
+            <tr key={rowIndex}>
+              <th css={[s_cell, s_th]}>
+                {String(rowIndex + Number(data.startTime.slice(0, 2)) + ':00')}
+              </th>
+              {row.map((_, columnIndex) => (
+                <TimeSlot
+                  key={rowIndex + columnIndex}
+                  isSelected={value[rowIndex][columnIndex]}
+                  isUpdate={isTimePickerUpdate}
+                />
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      <div css={s_buttonContainer}>
+        <Button text="등록하기" onClick={handleOnToggle} />
+      </div>
+    </div>
+  );
+}

frontend/src/components/TimePicker/TimePicker.styles.ts → frontend/src/components/Time/Time.styles.tsx

@@ -2,63 +2,44 @@ import { css } from '@emotion/react';
 
 import theme from '@styles/theme';
 
-export const tableStyle = css`
-  user-select: none;
-  border-collapse: collapse;
-`;
-
-export const tdStyle = css`
-  cursor: pointer;
-  padding: 8px;
-  text-align: center;
-  border-radius: 0.4rem;
-`;
-
-export const selectedStyle = css`
-  color: white;
-  background: ${theme.linear.selectedTime};
-`;
-
-export const table = css`
+export const s_table = css`
   cursor: pointer;
   user-select: none;
 
   border-spacing: 0.4rem 0.4rem;
+  border-collapse: collapse;
   border-collapse: separate;
 
   width: 100%;
 `;
 
-export const styledTd = (isSelected: boolean) => css`
+export const s_td = css`
   cursor: pointer;
-
-  padding: 0.4rem;
-
-  color: ${isSelected ? '#121010' : '#fff'};
-
-  background: ${isSelected ? theme.linear.selectedTime : '#ececec'};
+  padding: 8px;
+  text-align: center;
   border-radius: 0.4rem;
+`;
 
-  &:hover {
-    opacity: 0.7;
-  }
+export const s_selected = css`
+  color: white;
+  background: ${theme.linear.selectedTime};
 `;
 
-export const styledTh = css`
+export const s_th = css`
   display: flex;
   align-items: center;
   justify-content: center;
 `;
 
-export const buttonContainer = css`
+export const s_cell = css`
+  cursor: default;
+  width: 4rem;
+  height: 4rem;
+`;
+
+export const s_buttonContainer = css`
   display: flex;
   justify-content: flex-end;
   width: 100%;
   margin-top: 1rem;
 `;
-
-export const tableTexture = css`
-  cursor: default;
-  width: 4rem;
-  height: 4rem;
-`;