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

[Fix] context 대신 백에서 정보 불러와 기능 구현으로 수정

src/App.tsx

@@ -1,14 +1,9 @@
 import './App.css';
 import { router } from './routes/Router';
 import { RouterProvider } from 'react-router-dom';
-import { RoomProvider } from './context/RoomContext';
 
 function App() {
-  return (
-    <RoomProvider>
-      <RouterProvider router={router} />
-    </RoomProvider>
-  );
+  return <RouterProvider router={router} />;
 }
 
 export default App;

src/api/authApi.ts → src/api/auth.api.ts

@@ -7,11 +7,13 @@ interface UserInfo {
   birthday: string;
 }
 
+// 카카오 로그인 인가코드 보내기
 export const postAuthCode = async (code: string) => {
   const res = await instance.post('/api/auth/kakao/signin', code);
   return res.data;
 };
 
+//회원가입 시 입력한 정보 보내기
 export const postUserInfo = async (userInfo: UserInfo) => {
   const res = await instance.post('/api/v1/user', userInfo);
   return res.data;

src/api/roomList.api.ts

@@ -0,0 +1,32 @@
+import instance from './axios';
+import { RoomInfo } from '../models/room.model';
+
+// 과외방 리스트 출력
+export const getRoomList = async () => {
+  const res = await instance.get('/api/v1/rooms');
+  return res.data.rooms;
+};
+
+// 과외방 정보 출력(수정 시)
+export const getCurrentRoomInfo = async (roomId: number) => {
+  const res = await instance.get(`/api/v1/rooms/${roomId}/info`);
+  return res.data;
+};
+
+// 과외방 생성
+export const postRoomInfo = async (roomInfo: RoomInfo) => {
+  const res = await instance.post('/api/v1/rooms', roomInfo);
+  return res.data.roomId;
+};
+
+// 과외방 수정
+export const patchRoomInfo = async (roomInfo: RoomInfo, roomId: number) => {
+  const res = await instance.post(`/api/v1/rooms/${roomId}`, roomInfo);
+  return res.status;
+};
+
+// 과외방 삭제
+export const deleteRoom = async (roomId: number) => {
+  const res = await instance.delete(`/api/v1/rooms/${roomId}`);
+  return res.status;
+};

src/components/KakaoOauth.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { postAuthCode } from '../api/authApi';
+import { postAuthCode } from '../api/auth.api';
 
 const KakaoOauth = () => {
   const navigate = useNavigate();

src/components/PermissionToggle.tsx

@@ -1,13 +1,12 @@
-import { Permission } from '../utils/PermissionList';
-import { SimplePermission } from '../context/RoomContext';
+import { SimplePermission, Permission } from '../models/room.model';
 
-type TypeProps = {
+type ToggleProps = {
   permission: Permission;
   handleToggleCheck: (id: number, permissionType: keyof SimplePermission) => void;
   isChecked: boolean;
 };
 
-const PermissionToggle = ({ permission, handleToggleCheck, isChecked }: TypeProps) => {
+const PermissionToggle = ({ permission, handleToggleCheck, isChecked }: ToggleProps) => {
   return (
     <div className="flex">
       {permission.title}

src/components/RoomEditor.tsx

@@ -1,6 +1,6 @@
 import SelectDate from '../components/SelectDate';
 import { useEffect, useState } from 'react';
-import { OnSubmit, Room, SimpleLessonDay, SimplePermission } from '../context/RoomContext';
+import { Room, OnSubmit, SimpleLessonDay, SimplePermission, RoomInfo } from '../models/room.model';
 import { LessonDaysList } from '../utils/LessonDaysList';
 import { ParentPermissions, StudentPermissions } from '../utils/PermissionList';
 import PermissionToggle from './PermissionToggle';
@@ -17,25 +17,25 @@ const RoomEditor = ({ currentRoom, onSubmit }: EditProps) => {
     }
   }, [currentRoom]);
 
-  const [input, setInput] = useState({
+  const [input, setInput] = useState<RoomInfo>({
     roomName: '',
     studentName: '',
     subject: '',
     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,
     },
+    parentPermissions: {
+      lecture_file: false,
+      homework: false,
+      gradeStatistic: false,
+      counselingLog: true,
+      deposit: true,
+    },
   });
   console.log(input);
 
@@ -55,25 +55,21 @@ const RoomEditor = ({ currentRoom, onSubmit }: EditProps) => {
   };
 
   const handleToggleCheck = (id: number, permissionType: keyof SimplePermission) => {
-    if (id >= 3 && id <= 7) return;
-    else if (id < 3) {
+    if (id <= 2 || id >= 8) return;
+    else if (id >= 5) {
       setInput((prev) => {
         const updatedPermissions = { ...prev.parentPermissions };
-
         if (updatedPermissions[permissionType] !== undefined) {
           updatedPermissions[permissionType] = !updatedPermissions[permissionType];
         }
-
         return { ...prev, parentPermissions: updatedPermissions };
       });
-    } else if (id > 7) {
+    } else if (id >= 3) {
       setInput((prev) => {
         const updatedPermissions = { ...prev.studentPermissions };
-
         if (updatedPermissions[permissionType] !== undefined) {
           updatedPermissions[permissionType] = !updatedPermissions[permissionType];
         }
-
         return { ...prev, studentPermissions: updatedPermissions };
       });
     }
@@ -118,20 +114,7 @@ const RoomEditor = ({ currentRoom, onSubmit }: EditProps) => {
           ))}
         </div>
       </div>
-      <button
-        onClick={() =>
-          onSubmit(
-            0,
-            input.roomName,
-            input.studentName,
-            input.subject,
-            input.lessonDays,
-            input.parentPermissions,
-            input.studentPermissions,
-          )
-        }
-        className="text-white"
-      >
+      <button onClick={() => onSubmit(input)} className="text-white">
         완료
       </button>
     </div>

src/components/RoomInfo.tsx

@@ -1,35 +1,31 @@
 import { MdDeleteOutline } from 'react-icons/md';
 import { CiEdit } from 'react-icons/ci';
-import { Room, useRoomContext } from '../context/RoomContext';
+import { SimpleRoomInfo } from '../models/room.model';
 import { useNavigate } from 'react-router-dom';
 
 type RoomProps = {
-  room: Room;
+  room: SimpleRoomInfo;
+  handleDelete: (roomId: number) => void;
 };
 
-const RoomInfo = ({ room }: RoomProps) => {
+const RoomInfo = ({ room, handleDelete }: RoomProps) => {
   const navigate = useNavigate();
-  const { onDelete } = useRoomContext();
-
-  const handleDelete = (id: number) => {
-    onDelete(id);
-  };
 
   return (
     <div className="flex items-center py-2.5 gap-4 px-4">
       <div className="flex items-center p-1.5">
         <img className="w-9 h-9" />
       </div>
-      <div className="flex flex-1 flex-col text-gray-900 cursor-pointer">
+      <div className="flex flex-1 flex-col text-gray-900 cursor-pointer" onClick={() => navigate(`${room.roomId}`)}>
         <h1 className="text-body1 font-bold leading-9">
           [{room.subject}] {room.roomName}
         </h1>
         <h3 className="text-body4 font-regular leading-6">{room.studentName}</h3>
       </div>
-      <div className="cursor-pointer" onClick={() => navigate(`${room.id}/edit`)}>
+      <div className="cursor-pointer" onClick={() => navigate(`${room.roomId}/edit`)}>
         <CiEdit size={20} />
       </div>
-      <div className="cursor-pointer" onClick={() => handleDelete(room.id)}>
+      <div className="cursor-pointer" onClick={() => handleDelete(room.roomId)}>
         <MdDeleteOutline size={20} />
       </div>
     </div>

src/components/SelectDate.tsx

@@ -1,4 +1,4 @@
-import { LessonDay } from '../utils/LessonDaysList';
+import { LessonDay } from '../models/room.model';
 
 type LessonDayProps = {
   lessonDayItem: LessonDay;

src/models/room.model.ts

@@ -0,0 +1,53 @@
+export interface LessonDay {
+  id: number;
+  lessonDay: string;
+}
+
+export interface SimpleLessonDay {
+  lessonDay: string;
+}
+
+export interface Permission {
+  id: number;
+  type: string;
+  title: string;
+}
+
+export interface SimplePermission {
+  lecture_file: boolean;
+  homework: boolean;
+  gradeStatistic: boolean;
+  counselingLog: boolean;
+  deposit: boolean;
+}
+
+export interface RoomInfo {
+  roomName: string;
+  studentName: string;
+  subject: string;
+  lessonDays: SimpleLessonDay[];
+  studentPermissions: SimplePermission;
+  parentPermissions: SimplePermission;
+}
+
+export interface SimpleRoomInfo {
+  roomId: number;
+  roomName: string;
+  studentName: string;
+  subject: string;
+  student: {
+    profileImgUrl: string; // 이부분 아직 확실 x
+  };
+}
+
+export interface Room {
+  roomId: number;
+  roomName: string;
+  studentName: string;
+  subject: string;
+  lessonDays: SimpleLessonDay[];
+  studentPermissions: SimplePermission;
+  parentPermissions: SimplePermission;
+}
+
+export type OnSubmit = (room: RoomInfo) => void;