Merge pull request #35 from IT-Cotato/feature/#19-roomlist-edit

[Fix] API 명세서 형식에 맞춰서 수정
IT-Cotato · Jan 12, 2025 · 6fe0e38 · 6fe0e38
2 parents 2cae3c2 + 6f15b9b
commit 6fe0e38
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 105 deletions.
diff --git a/src/components/PermissionToggle.tsx b/src/components/PermissionToggle.tsx
@@ -1,9 +1,10 @@
 import { Permission } from '../utils/PermissionList';
+import { SimplePermission } from '../context/RoomContext';
 
 type TypeProps = {
   permission: Permission;
+  handleToggleCheck: (id: number, permissionType: keyof SimplePermission) => void;
   isChecked: boolean;
-  handleToggleCheck: (id: number, permission: string) => void;
 };
 
 const PermissionToggle = ({ permission, handleToggleCheck, isChecked }: TypeProps) => {
@@ -15,7 +16,7 @@ const PermissionToggle = ({ permission, handleToggleCheck, isChecked }: TypeProp
         type="checkbox"
         checked={isChecked}
         className="hidden"
-        onChange={() => handleToggleCheck(permission.id, permission.type)}
+        onChange={() => handleToggleCheck(permission.id, permission.type as keyof SimplePermission)}
       />
       <label
         htmlFor={`permission-${permission.id}`}

diff --git a/src/components/RoomEditor.tsx b/src/components/RoomEditor.tsx
@@ -1,9 +1,9 @@
-import PermissionToggle from '../components/PermissionToggle';
 import SelectDate from '../components/SelectDate';
 import { useEffect, useState } from 'react';
-import { OnSubmit, Room } from '../context/RoomContext';
-import { WeekList } from '../utils/WeekList';
+import { OnSubmit, Room, SimpleLessonDay, SimplePermission } from '../context/RoomContext';
+import { LessonDaysList } from '../utils/LessonDaysList';
 import { ParentPermissions, StudentPermissions } from '../utils/PermissionList';
+import PermissionToggle from './PermissionToggle';
 
 type EditProps = {
   currentRoom: Room | undefined;
@@ -21,58 +21,62 @@ const RoomEditor = ({ currentRoom, onSubmit }: EditProps) => {
     roomName: '',
     studentName: '',
     subject: '',
-    days: [''],
-    parentPermissions: ['counseling', 'payment'],
-    studentPermissions: ['materials', 'homework', 'stats'],
+    lessonDays: [] as SimpleLessonDay[],
+    parentPermissions: {
+      lecture_file: false,
+      homework: false,
+      gradeStatistic: false,
+      counselingLog: true,
+      deposit: true,
+    },
+    studentPermissions: {
+      lecture_file: true,
+      homework: true,
+      gradeStatistic: true,
+      counselingLog: false,
+      deposit: false,
+    },
   });
+  console.log(input);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.placeholder === '방이름') setInput((prev) => ({ ...prev, roomName: e.target.value }));
     if (e.target.placeholder === '학생이름') setInput((prev) => ({ ...prev, studentName: e.target.value }));
     if (e.target.placeholder === '과목명') setInput((prev) => ({ ...prev, subject: e.target.value }));
   };
 
-  const handleToggleCheck = (id: number, permission: string) => {
+  const handleDaysClick = (lessonDay: string) => {
+    setInput((prev) => {
+      const newDays = prev.lessonDays.some((d) => d.lessonDay === lessonDay)
+        ? prev.lessonDays.filter((d) => d.lessonDay !== lessonDay)
+        : [...prev.lessonDays, { lessonDay }];
+      return { ...prev, lessonDays: newDays };
+    });
+  };
+
+  const handleToggleCheck = (id: number, permissionType: keyof SimplePermission) => {
     if (id >= 3 && id <= 7) return;
-    else if (id < 5)
+    else if (id < 3) {
       setInput((prev) => {
-        const newPermissions = prev.parentPermissions.includes(permission)
-          ? prev.parentPermissions.filter((p) => p !== permission)
-          : [...prev.parentPermissions, permission];
-        return {
-          ...prev,
-          parentPermissions: newPermissions.sort(
-            (a, b) =>
-              ParentPermissions.find((permission) => permission.type === a)?.id! -
-              ParentPermissions.find((permission) => permission.type === b)?.id!,
-          ),
-        };
+        const updatedPermissions = { ...prev.parentPermissions };
+
+        if (updatedPermissions[permissionType] !== undefined) {
+          updatedPermissions[permissionType] = !updatedPermissions[permissionType];
+        }
+
+        return { ...prev, parentPermissions: updatedPermissions };
       });
-    else if (id >= 5)
+    } else if (id > 7) {
       setInput((prev) => {
-        const newPermissions = prev.studentPermissions.includes(permission)
-          ? prev.studentPermissions.filter((p) => p !== permission)
-          : [...prev.studentPermissions, permission];
-        return {
-          ...prev,
-          studentPermissions: newPermissions.sort(
-            (a, b) =>
-              StudentPermissions.find((permission) => permission.type === a)?.id! -
-              StudentPermissions.find((permission) => permission.type === b)?.id!,
-          ),
-        };
-      });
-  };
+        const updatedPermissions = { ...prev.studentPermissions };
 
-  const handleWeekClick = (day: string) => {
-    setInput((prev) => {
-      const newDays = prev.days.includes(day) ? prev.days.filter((d) => d !== day) : [...prev.days, day];
-      const sortedDays = newDays.sort(
-        (a, b) => WeekList.find((week) => week.date === a)?.id! - WeekList.find((week) => week.date === b)?.id!,
-      );
+        if (updatedPermissions[permissionType] !== undefined) {
+          updatedPermissions[permissionType] = !updatedPermissions[permissionType];
+        }
 
-      return { ...prev, days: sortedDays };
-    });
+        return { ...prev, studentPermissions: updatedPermissions };
+      });
+    }
   };
 
   return (
@@ -81,12 +85,12 @@ const RoomEditor = ({ currentRoom, onSubmit }: EditProps) => {
       <input placeholder="학생이름" onChange={handleInputChange} value={input.studentName} />
       <input placeholder="과목명" onChange={handleInputChange} value={input.subject} />
       <div className="flex gap-4 justify-center">
-        {WeekList.map((week) => (
+        {LessonDaysList.map((lessonDayItem) => (
           <SelectDate
-            key={week.id}
-            week={week}
-            isClicked={input.days.includes(week.date)}
-            handleWeekClick={handleWeekClick}
+            key={lessonDayItem.id}
+            lessonDayItem={lessonDayItem}
+            isClicked={input.lessonDays.find((day) => day.lessonDay === lessonDayItem.lessonDay) !== undefined}
+            handleDaysClick={handleDaysClick}
           />
         ))}
       </div>
@@ -96,9 +100,9 @@ const RoomEditor = ({ currentRoom, onSubmit }: EditProps) => {
           {ParentPermissions.map((permission) => (
             <PermissionToggle
               key={permission.id}
-              isChecked={input.parentPermissions.includes(permission.type)}
               permission={permission}
               handleToggleCheck={handleToggleCheck}
+              isChecked={input.parentPermissions[permission.type as keyof SimplePermission]}
             />
           ))}
         </div>
@@ -107,9 +111,9 @@ const RoomEditor = ({ currentRoom, onSubmit }: EditProps) => {
           {StudentPermissions.map((permission) => (
             <PermissionToggle
               key={permission.id}
-              isChecked={input.studentPermissions.includes(permission.type)}
               permission={permission}
               handleToggleCheck={handleToggleCheck}
+              isChecked={input.studentPermissions[permission.type as keyof SimplePermission]}
             />
           ))}
         </div>
@@ -121,7 +125,7 @@ const RoomEditor = ({ currentRoom, onSubmit }: EditProps) => {
             input.roomName,
             input.studentName,
             input.subject,
-            input.days,
+            input.lessonDays,
             input.parentPermissions,
             input.studentPermissions,
           )

diff --git a/src/components/SelectDate.tsx b/src/components/SelectDate.tsx
@@ -1,19 +1,19 @@
-import { Week } from '../utils/WeekList';
+import { LessonDay } from '../utils/LessonDaysList';
 
-type WeekProps = {
-  week: Week;
+type LessonDayProps = {
+  lessonDayItem: LessonDay;
   isClicked: boolean;
-  handleWeekClick: (day: string) => void;
+  handleDaysClick: (day: string) => void;
 };
 
-const SelectDate = ({ week, isClicked, handleWeekClick }: WeekProps) => {
+const SelectDate = ({ lessonDayItem, isClicked, handleDaysClick }: LessonDayProps) => {
   return (
     <div>
       <button
-        className={`px-4 text-white  ${isClicked ? 'bg-black' : 'bg-gray-300'}`}
-        onClick={() => handleWeekClick(week.date)}
+        className={`px-4 text-white ${isClicked ? 'bg-black' : 'bg-gray-300'}`}
+        onClick={() => handleDaysClick(lessonDayItem.lessonDay)} // lessonDay만 전달
       >
-        {week.date}
+        {lessonDayItem.lessonDay}
       </button>
     </div>
   );

diff --git a/src/context/RoomContext.tsx b/src/context/RoomContext.tsx
@@ -1,23 +1,35 @@
 import { createContext, ReactNode, useContext, useState, useRef } from 'react';
 
+export type SimpleLessonDay = {
+  lessonDay: string;
+};
+
+export type SimplePermission = {
+  lecture_file: boolean;
+  homework: boolean;
+  gradeStatistic: boolean;
+  counselingLog: boolean;
+  deposit: boolean;
+};
+
 export type Room = {
   id: number;
   roomName: string;
   studentName: string;
   subject: string;
-  days: string[];
-  parentPermissions: string[];
-  studentPermissions: string[];
+  lessonDays: SimpleLessonDay[];
+  parentPermissions: SimplePermission;
+  studentPermissions: SimplePermission;
 };
 
 export type OnSubmit = (
   id: number,
   roomName: string,
   studentName: string,
   subject: string,
-  days: string[],
-  parentPermissions: string[],
-  studentPermissions: string[],
+  lessonDays: SimpleLessonDay[],
+  parentPermissions: SimplePermission,
+  studentPermissions: SimplePermission,
 ) => void;
 
 type RoomContextType = {
@@ -46,16 +58,16 @@ export const RoomProvider = ({ children }: { children: ReactNode }) => {
     roomName: string,
     studentName: string,
     subject: string,
-    days: string[],
-    parentPermissions: string[],
-    studentPermissions: string[],
+    lessonDays: SimpleLessonDay[],
+    parentPermissions: SimplePermission,
+    studentPermissions: SimplePermission,
   ) => {
     const newRoom: Room = {
       id: idRef.current++,
       roomName: roomName,
       studentName: studentName,
       subject: subject,
-      days: days,
+      lessonDays: lessonDays,
       parentPermissions: parentPermissions,
       studentPermissions: studentPermissions,
     };
@@ -67,16 +79,16 @@ export const RoomProvider = ({ children }: { children: ReactNode }) => {
     roomName: string,
     studentName: string,
     subject: string,
-    days: string[],
-    parentPermissions: string[],
-    studentPermissions: string[],
+    lessonDays: SimpleLessonDay[],
+    parentPermissions: SimplePermission,
+    studentPermissions: SimplePermission,
   ) => {
     const updatedRoom: Room = {
       id: id,
       roomName: roomName,
       studentName: studentName,
       subject: subject,
-      days: days,
+      lessonDays: lessonDays,
       parentPermissions: parentPermissions,
       studentPermissions: studentPermissions,
     };

diff --git a/src/pages/CreateRoom.tsx b/src/pages/CreateRoom.tsx
@@ -1,6 +1,6 @@
 import RoomEditor from '../components/RoomEditor';
 import { useState } from 'react';
-import { Room, useRoomContext } from '../context/RoomContext';
+import { Room, useRoomContext, SimpleLessonDay, SimplePermission } from '../context/RoomContext';
 import { useNavigate } from 'react-router-dom';
 
 const CreateRoom = () => {
@@ -13,11 +13,11 @@ const CreateRoom = () => {
     roomName: string,
     studentName: string,
     subject: string,
-    days: string[],
-    parentPermissions: string[],
-    studentPermissions: string[],
+    lessonDays: SimpleLessonDay[],
+    parentPermissions: SimplePermission,
+    studentPermissions: SimplePermission,
   ) => {
-    onCreate(id, roomName, studentName, subject, days, parentPermissions, studentPermissions);
+    onCreate(id, roomName, studentName, subject, lessonDays, parentPermissions, studentPermissions);
     navigate('/user/roomlist');
   };
 

diff --git a/src/pages/EditRoom.tsx b/src/pages/EditRoom.tsx
@@ -1,5 +1,5 @@
 import { useNavigate, useParams } from 'react-router-dom';
-import { Room, useRoomContext } from '../context/RoomContext';
+import { Room, useRoomContext, SimpleLessonDay, SimplePermission } from '../context/RoomContext';
 import { useEffect, useState } from 'react';
 import RoomEditor from '../components/RoomEditor';
 
@@ -26,11 +26,11 @@ const EditRoom = () => {
     roomName: string,
     studentName: string,
     subject: string,
-    days: string[],
-    parentPermissions: string[],
-    studentPermissions: string[],
+    lessonDays: SimpleLessonDay[],
+    parentPermissions: SimplePermission,
+    studentPermissions: SimplePermission,
   ) => {
-    onUpdate(paramsId, roomName, studentName, subject, days, parentPermissions, studentPermissions);
+    onUpdate(paramsId, roomName, studentName, subject, lessonDays, parentPermissions, studentPermissions);
     navigate('/user/roomlist');
   };
 

diff --git a/src/utils/LessonDaysList.ts b/src/utils/LessonDaysList.ts
@@ -0,0 +1,14 @@
+export interface LessonDay {
+  id: number;
+  lessonDay: string;
+}
+
+export const LessonDaysList: LessonDay[] = [
+  { id: 0, lessonDay: '월' },
+  { id: 1, lessonDay: '화' },
+  { id: 2, lessonDay: '수' },
+  { id: 3, lessonDay: '목' },
+  { id: 4, lessonDay: '금' },
+  { id: 5, lessonDay: '토' },
+  { id: 6, lessonDay: '일' },
+];
diff --git a/src/utils/PermissionList.ts b/src/utils/PermissionList.ts
@@ -5,17 +5,17 @@ export interface Permission {
 }
 
 export const ParentPermissions: Permission[] = [
-  { id: 0, type: 'materials', title: '강의 자료함' },
+  { id: 0, type: 'lecture_file', title: '강의 자료함' },
   { id: 1, type: 'homework', title: '주차별 숙제' },
-  { id: 2, type: 'stats', title: '성적 통계' },
-  { id: 3, type: 'counseling', title: '상담 일지' }, //true
-  { id: 4, type: 'payment', title: '입금' }, //true
+  { id: 2, type: 'gradeStatistic', title: '성적 통계' },
+  { id: 3, type: 'counselingLog', title: '상담 일지' }, //true
+  { id: 4, type: 'deposit', title: '입금' }, //true
 ];
 
 export const StudentPermissions: Permission[] = [
-  { id: 5, type: 'materials', title: '강의 자료함' }, //true
+  { id: 5, type: 'lecture_file', title: '강의 자료함' }, //true
   { id: 6, type: 'homework', title: '주차별 숙제' }, //true
-  { id: 7, type: 'stats', title: '성적 통계' }, //true
-  { id: 8, type: 'counseling', title: '상담 일지' },
-  { id: 9, type: 'payment', title: '입금' },
+  { id: 7, type: 'gradeStatistic', title: '성적 통계' }, //true
+  { id: 8, type: 'counselingLog', title: '상담 일지' },
+  { id: 9, type: 'deposit', title: '입금' },
 ];
diff --git a/src/utils/WeekList.ts b/src/utils/WeekList.ts