Skip to content

Commit 2e32d6d

Browse files
LainariLainari
committed
✨ feat : Connecting to the Class API
- Joining a Class - Connect to the Member Management API - Verify class code and password Related Issue : #109
1 parent 0f78aef commit 2e32d6d

File tree

19 files changed

+363
-52
lines changed

19 files changed

+363
-52
lines changed

‎public/svgs/_class/copyButton.svg

Lines changed: 3 additions & 0 deletions
Loading

‎public/svgs/_class/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
const icons = {
2+
copy: '/svgs/_class/copyButton.svg',
23
favorite: '/svgs/_class/favorite.svg',
34
folder: '/svgs/_class/folder.svg',
45
noneFavorite: '/svgs/_class/noneFavorite.svg',

‎public/svgs/_class/member/admin.svg

Lines changed: 11 additions & 0 deletions
Loading

‎public/svgs/_class/member/assistant.svg

Lines changed: 3 additions & 0 deletions
Loading

‎public/svgs/_class/member/index.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
const icons = {
2+
admin: '/svgs/_class/member/admin.svg',
3+
assistant: '/svgs/_class/member/assistant.svg',
4+
};
5+
6+
export default icons;

‎src/api/_class/getClassesRole.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import req from '@/src/api/apiUtils';
22

33
const getClassesRole = async (uid: number, roleID: string) => {
4-
const response = await req(`/cu/${uid}/classes?role=${roleID}`, 'get', 'gin');
4+
const response = await req(
5+
`/cu/${uid}/classes/by-role?role=${roleID}`,
6+
'get',
7+
'gin'
8+
);
59

610
return response;
711
};

‎src/api/_class/index.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@ import getClassInfo from './getClassInfo';
22
import getClasses from './getClasses';
33
import getClassesRole from './getClassesRole';
44
import getFavoriteClasses from './getFavoriteClasses';
5-
// import patchClassRole from './patchClassRole';
6-
// import patchToggleFavoriteClass from './patchToggleFavoriteClass';
5+
import patchClassRole from './patchClassRole';
6+
import patchToggleFavoriteClass from './patchToggleFavoriteClass';
77
import postCreateClass from './postCreateClass';
88

99
const classAPI = {
1010
getClassInfo,
1111
getClasses,
1212
getClassesRole,
1313
getFavoriteClasses,
14-
// patchClassRole,
15-
// patchToggleFavoriteClass,
14+
patchClassRole,
15+
patchToggleFavoriteClass,
1616
postCreateClass,
1717
};
1818

‎src/api/classCode/getVerifySecret.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@ const getVerifySecret = async (
66
uid: number
77
) => {
88
const response = await req(
9-
`/cc/VerifyClassCode?code=${classCode}secret=${secret}&uid=${uid}`,
9+
`/cc/verifyAndRequestAccess?code=${classCode}${
10+
secret ? `&secret=${secret}` : ''
11+
}&uid=${uid}`,
1012
'get',
1113
'gin'
1214
);

‎src/api/classUser/getClassUsers.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import req from '../apiUtils';
2+
3+
const getClassUsers = async (cid: number, role: string) => {
4+
const response = await req(
5+
`/cu/class/${cid}/members?role=${role}`,
6+
'get',
7+
'gin'
8+
);
9+
10+
return response.data;
11+
};
12+
13+
export default getClassUsers;

‎src/app/classes/[cId]/components/card/MemberCard.tsx

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
'use client';
2+
3+
import {useState} from 'react';
4+
import {useRecoilValue} from 'recoil';
5+
import Image from 'next/image';
6+
import userState from '@/src/recoil/atoms/userState';
7+
import {User} from '@/src/interfaces/user';
8+
import icons from '@/public/svgs/_class/member';
9+
10+
export interface MemberCardProps {
11+
adminInfo?: Array<{
12+
id: number;
13+
image: string;
14+
nickname: string;
15+
}>;
16+
userInfo?: Array<{
17+
id: number;
18+
image: string;
19+
nickname: string;
20+
}>;
21+
assistantInfo?: Array<{
22+
id: number;
23+
image: string;
24+
nickname: string;
25+
}>;
26+
applicantInfo?: Array<{
27+
id: number;
28+
image: string;
29+
nickname: string;
30+
}>;
31+
}
32+
33+
const MemberCard = ({
34+
adminInfo,
35+
userInfo,
36+
assistantInfo,
37+
applicantInfo,
38+
}: MemberCardProps) => {
39+
const combinedUsers = [
40+
...(adminInfo?.map(user => ({...user, role: 'ADMIN'})) || []),
41+
...(userInfo?.map(user => ({...user, role: 'USER'})) || []),
42+
...(assistantInfo?.map(user => ({...user, role: 'ASSISTANT'})) || []),
43+
...(applicantInfo?.map(user => ({...user, role: 'APPLICANT'})) || []),
44+
];
45+
const loginUser = useRecoilValue(userState) as User;
46+
const [selectedRole, setSelectedRole] = useState(loginUser.role_id);
47+
48+
const handleRoleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
49+
setSelectedRole(event.target.value);
50+
};
51+
52+
return (
53+
<div className="w-11/12 mt-2 mb-4">
54+
{combinedUsers.map(user => (
55+
<div
56+
key={user.id}
57+
className="border h-16 flex items-center mb-2 w-full"
58+
style={{background: '#1C1F3B', borderRadius: '18px'}}
59+
>
60+
<div className="ps-4 flex w-full items-center">
61+
<Image
62+
src={user.image}
63+
alt={'profile'}
64+
width={35}
65+
height={35}
66+
className="border border-none rounded-full"
67+
/>
68+
{user.role === 'ADMIN' && (
69+
<Image
70+
src={icons.admin}
71+
alt={'admin'}
72+
width={20}
73+
height={20}
74+
className="border border-none rounded-full z-10 -ms-4 mt-6"
75+
/>
76+
)}
77+
{user.role === 'ASSISTANT' && (
78+
<Image
79+
src={icons.assistant}
80+
alt={'assistant'}
81+
width={20}
82+
height={20}
83+
className="border border-none rounded-full z-10 -ms-4 mt-6"
84+
/>
85+
)}
86+
<p className="ms-4 text-white text-lg">{user.nickname}</p>
87+
</div>
88+
<div className="w-full pe-4">
89+
{loginUser.role_id === 'ADMIN' &&
90+
user.role !== 'ADMIN' &&
91+
user.role !== 'APPLICANT' && (
92+
<div className="flex justify-end">
93+
<select
94+
value={selectedRole}
95+
onChange={handleRoleChange}
96+
className="bg-white font-semibold text-black py-1 px-2 rounded hover:bg-gray-200"
97+
>
98+
<option value="USER" selected={user.role === 'USER'}>
99+
USER
100+
</option>
101+
<option
102+
value="ASSISTANT"
103+
selected={user.role === 'ASSISTANT'}
104+
>
105+
ASSISTANT
106+
</option>
107+
<option
108+
value="BLACKLIST"
109+
selected={user.role === 'BLACKLIST'}
110+
>
111+
BLACKLIST
112+
</option>
113+
</select>
114+
<button className="bg-white font-semibold text-black py-1 px-2 rounded hover:bg-gray-200 ml-2">
115+
권한 변경
116+
</button>
117+
</div>
118+
)}
119+
</div>
120+
{user.role === 'APPLICANT' && (
121+
<div className="flex justify-end w-full me-8">
122+
<p className="me-2">✅</p>
123+
<p>❌</p>
124+
</div>
125+
)}
126+
</div>
127+
))}
128+
</div>
129+
);
130+
};
131+
132+
export default MemberCard;

0 commit comments

Comments
 (0)