From 6f15b9b37071e2f12e304de3e22e31286248df06 Mon Sep 17 00:00:00 2001
From: AnSui22 <ansui218@ewhain.net>
Date: Sun, 12 Jan 2025 22:37:13 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20api=20=EB=AA=85=EC=84=B8=EC=84=9C=20?=
=?UTF-8?q?=ED=98=95=EC=8B=9D=EC=97=90=20=EB=A7=9E=EC=B6=B0=EC=84=9C=20?=
=?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/PermissionToggle.tsx | 5 +-
src/components/RoomEditor.tsx | 102 +++++++++++++++-------------
src/components/SelectDate.tsx | 16 ++---
src/context/RoomContext.tsx | 40 +++++++----
src/pages/CreateRoom.tsx | 10 +--
src/pages/EditRoom.tsx | 10 +--
src/utils/LessonDaysList.ts | 14 ++++
src/utils/PermissionList.ts | 16 ++---
src/utils/WeekList.ts | 14 ----
9 files changed, 122 insertions(+), 105 deletions(-)
create mode 100644 src/utils/LessonDaysList.ts
delete mode 100644 src/utils/WeekList.ts
diff --git a/src/components/PermissionToggle.tsx b/src/components/PermissionToggle.tsx
index ac51a4f..9364267 100644
--- 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
index 21b5e29..ad8ccbd 100644
--- 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,10 +21,23 @@ 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 }));
@@ -32,47 +45,38 @@ const RoomEditor = ({ currentRoom, onSubmit }: EditProps) => {
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
index bf21d26..92d2878 100644
--- 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
index 1a9282d..4c5ac96 100644
--- a/src/context/RoomContext.tsx
+++ b/src/context/RoomContext.tsx
@@ -1,13 +1,25 @@
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 = (
@@ -15,9 +27,9 @@ export type OnSubmit = (
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
index 72b08fc..8c41a26 100644
--- 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
index 26e8674..81ed4b0 100644
--- 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
new file mode 100644
index 0000000..51f97ef
--- /dev/null
+++ 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
index 2e8b9de..5026890 100644
--- 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
deleted file mode 100644
index 26c3600..0000000
--- a/src/utils/WeekList.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export interface Week {
- id: number;
- date: string;
-}
-
-export const WeekList: Week[] = [
- { id: 0, date: '월' },
- { id: 1, date: '화' },
- { id: 2, date: '수' },
- { id: 3, date: '목' },
- { id: 4, date: '금' },
- { id: 5, date: '토' },
- { id: 6, date: '일' },
-];