Skip to content

Commit 9ced260

Browse files
LainariLainari
authored
Merge pull request #131 from dorimu0/refact/component-prompt
管理者プロンプトページの最適化
2 parents 4eab13e + ea4a078 commit 9ced260

File tree

8 files changed

+92
-78
lines changed

8 files changed

+92
-78
lines changed

‎src/api/apiUtils.ts

+1-10
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,9 @@ import BASE_URLS from './baseUrl';
22
import HTTP_STATUS from './httpStatus';
33

44
async function fetchWithInterceptors(url: string, options: RequestInit) {
5-
const token = localStorage.getItem('access_token');
6-
7-
if (token) {
8-
options.headers = {
9-
...options.headers,
10-
Authorization: `Bearer ${token}`,
11-
};
12-
}
13-
145
let response = await fetch(url, options);
156

16-
if (response.status === 401) {
7+
if (response.status === HTTP_STATUS.UNAUTHORIZED) {
178
const refreshToken = localStorage.getItem('refresh_token');
189
const refreshResponse = await fetch(
1910
`${BASE_URLS.gin}/auth/google/refresh-token`,

‎src/app/classes/[cId]/[mId]/components/FeedbackContainer.tsx

+14-6
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,24 @@ import {useRecoilValue} from 'recoil';
33
import FeedbackForm from './FeedbackForm';
44
import FeedbackList from './FeedbackList';
55
import FeedbackKeywordList from './FeedbackKeywordList';
6+
import getCheckRefer from '@/src/api/feedback/getCheckRefer';
67
import getFeedbacks from '@/src/api/feedback/getFeedbacks';
78
import materialState from '@/src/recoil/atoms/materialState';
89
import {feedback} from '@/src/interfaces/feedback';
910
import '@/src/styles/variable.css';
10-
import getCheckRefer from '@/src/api/feedback/getCheckRefer';
1111

12-
const FeedbackContainer = () => {
12+
const FeedbackContainer = (props: {cId: number}) => {
1313
const material = useRecoilValue(materialState);
1414
const [reload, setReload] = useState<boolean>(false);
1515
const [references, setReferences] = useState<boolean>(false);
1616
const [feedbacks, setFeedbacks] = useState<feedback[]>([]);
1717
useEffect(() => {
1818
if (!material) return;
19-
getFeedbacks(4, parseInt(material.id), 1, 5).then(res => {
19+
getFeedbacks(props.cId, parseInt(material.id), 1, 5).then(res => {
2020
console.log(res);
2121
setFeedbacks(res);
2222
});
23-
getCheckRefer(4, parseInt(material.id)).then(res => {
23+
getCheckRefer(props.cId, parseInt(material.id)).then(res => {
2424
console.log(res);
2525
setReferences(res);
2626
});
@@ -31,7 +31,11 @@ const FeedbackContainer = () => {
3131
<div className="flex justify-between items-center p-4">
3232
<div className="text-gray-500 text-lg">피드백 요청</div>
3333
{material ? (
34-
<FeedbackForm mId={parseInt(material?.id)} setReload={setReload} />
34+
<FeedbackForm
35+
cId={props.cId}
36+
mId={parseInt(material?.id)}
37+
setReload={setReload}
38+
/>
3539
) : null}
3640
</div>
3741
<div className="text-center w-full feedbackContainer box-border">
@@ -62,7 +66,11 @@ const FeedbackContainer = () => {
6266
✅ 사용자가 질문한 내용과 가장 관련성이 높은 페이지
6367
</div>
6468
{material ? (
65-
<FeedbackKeywordList mId={material?.id} references={references} />
69+
<FeedbackKeywordList
70+
cId={props.cId}
71+
mId={parseInt(material?.id)}
72+
references={references}
73+
/>
6674
) : null}
6775
</div>
6876
</div>

‎src/app/classes/[cId]/[mId]/components/FeedbackForm.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@ import postFeedback from '@/src/api/feedback/postFeedback';
66
import gifs from '@/public/gif';
77

88
const FeedbackForm = ({
9+
cId,
910
mId,
1011
setReload,
1112
}: {
13+
cId: number;
1214
mId: number;
1315
setReload: (value: boolean) => void;
1416
}) => {
@@ -28,12 +30,13 @@ const FeedbackForm = ({
2830
setFeedback('');
2931
}
3032
setIsLoading(true);
31-
getFeedback(4, mId, type, chat);
33+
getFeedback(cId, mId, type, chat);
3234
};
3335

3436
const handleClickSave = () => {
3537
const data = feedback.replace(/AI|:|"/g, '');
36-
postFeedback(4, mId, data).then(() => {
38+
console.log(data);
39+
postFeedback(cId, mId, data).then(() => {
3740
setFeedback('');
3841
setReload(true);
3942
setIsOpen(false);

‎src/app/classes/[cId]/[mId]/components/FeedbackKeywordList.tsx

+37-27
Original file line numberDiff line numberDiff line change
@@ -5,53 +5,63 @@ import getKeywords from '@/src/api/feedback/getKeywords';
55
import {keyword} from '@/src/interfaces/feedback';
66

77
const FeedbackKeywordList = ({
8+
cId,
89
mId,
910
references,
1011
}: {
11-
mId: string;
12+
cId: number;
13+
mId: number;
1214
references: boolean;
1315
}) => {
1416
const [keywords, setKeywords] = useState<keyword[]>([]);
1517
const [loading, setLoading] = useState(true);
18+
1619
useEffect(() => {
1720
if (references) {
18-
getKeywords(4, parseInt(mId)).then(res => {
21+
getKeywords(cId, mId).then(res => {
1922
console.log(res);
2023
setKeywords(res);
2124
setLoading(false);
2225
});
26+
} else {
27+
setLoading(false);
2328
}
2429
}, []);
2530
return (
2631
<div className="flex justify-center">
2732
{!references ? (
28-
<div>not found</div>
29-
) : loading ? (
30-
<div className="text-3xl p-3 font-semibold">
31-
<Image
32-
src="/gif/loading.gif"
33-
width={200}
34-
height={200}
35-
alt="gif"
36-
></Image>
37-
</div>
38-
) : (
39-
keywords.map((keyword, index) => (
40-
<div className="px-3" key={index}>
41-
<div className="w-52 h-64 bg-green-200 rounded-lg p-4 border border-green-400">
42-
<div className="w-16 h-16 bg-green-500 rounded-full m-auto flex justify-center items-center text-4xl text-white">
43-
P
33+
loading ? (
34+
<div className="text-3xl p-3 font-semibold">
35+
<Image
36+
src="/gif/loading.gif"
37+
width={200}
38+
height={112}
39+
alt="gif"
40+
style={{width: '200px', height: '112px'}}
41+
></Image>
42+
</div>
43+
) : (
44+
keywords.map((keyword, index) => (
45+
<div className="px-3" key={index}>
46+
<div className="w-52 h-64 bg-green-200 rounded-lg p-4 border border-green-400">
47+
<div className="w-16 h-16 bg-green-500 rounded-full m-auto flex justify-center items-center text-4xl text-white">
48+
P
49+
</div>
50+
<div className="p-1 font-semibold">{keyword.page}</div>
51+
<div className="font-semibold">KeyWord</div>
52+
<ul>
53+
<li>{keyword.keywords[0]}</li>
54+
<li>{keyword.keywords[1]}</li>
55+
<li>{keyword.keywords[2]}</li>
56+
</ul>
4457
</div>
45-
<div className="p-1 font-semibold">{keyword.page}</div>
46-
<div className="font-semibold">KeyWord</div>
47-
<ul>
48-
<li>{keyword.keywords[0]}</li>
49-
<li>{keyword.keywords[1]}</li>
50-
<li>{keyword.keywords[2]}</li>
51-
</ul>
5258
</div>
53-
</div>
54-
))
59+
))
60+
)
61+
) : (
62+
<div className="text-blue-400">
63+
현재 질문 데이터가 존재하지 않습니다.
64+
</div>
5565
)}
5666
</div>
5767
);

‎src/app/classes/[cId]/[mId]/components/ManageContainer.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ import FeedbackContainer from './FeedbackContainer';
77
// import AttendanceContainer from './AttendanceContainer';
88
import '@/src/styles/variable.css';
99

10-
const ManageContainer = () => {
10+
const ManageContainer = (props: {cId: string}) => {
1111
const tabs = ['자료', '퀴즈', '피드백', '출석'];
1212
const [activeTab, setActiveTab] = useState(tabs[0]);
1313
const tabMapping = {
1414
자료: <ManageMaterialContainer />,
1515
// Quiz: <QuizContainer />,
16-
피드백: <FeedbackContainer />,
16+
피드백: <FeedbackContainer cId={parseInt(props.cId)} />,
1717
// Attendance: <AttendanceContainer />,
1818
};
1919
return (

‎src/app/classes/[cId]/[mId]/components/subComponents/PromptChat.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {useEffect, useState} from 'react';
22
import ReactMarkdown from 'react-markdown';
33
import Image from 'next/image';
4+
import {useParams} from 'next/navigation';
45
import ChatInput from './ChatInput';
56
import getPrompt from '@/src/api/prompts/getPrompt';
67
import patchMessage from '@/src/api/prompts/patchMessage';
@@ -14,16 +15,17 @@ const PromptChat = ({pId}: {pId: number}) => {
1415
const [inputMsg, setInputMsg] = useState<string>('');
1516
const [promptRes, setPromptRes] = useState<string>('');
1617
const [reload, setReload] = useState<boolean>(false);
18+
const params = useParams<{cId: string}>();
1719

1820
useEffect(() => {
19-
getPrompt(4, pId, 1, 6).then(res => {
21+
getPrompt(parseInt(params.cId), pId, 1, 6).then(res => {
2022
res.messages.reverse();
2123
setMsg(res.messages);
2224
});
2325
}, []);
2426

2527
const handleClickIcon = (mId: number) => {
26-
patchMessage(4, pId, mId, true).then(res => {
28+
patchMessage(parseInt(params.cId), pId, mId, true).then(res => {
2729
console.log(res);
2830
});
2931
};

‎src/app/classes/[cId]/[mId]/page.tsx

+28-27
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,41 @@
11
'use client';
2+
import {useEffect, useState} from 'react';
23
import {useRecoilValue} from 'recoil';
34
import {ManageContainer, UserContainer} from './components';
45
import {SubContainer} from './components/subComponents';
5-
import classUserState from '@/src/recoil/atoms/classUserState';
6-
import ROLES from '@/src/constants/roles';
7-
import materialState from '@/src/recoil/atoms/materialState';
8-
import {Suspense} from 'react';
6+
import userState from '@/src/recoil/atoms/userState';
97

10-
const Page = () => {
11-
const classUser = useRecoilValue(classUserState);
12-
const material = useRecoilValue(materialState);
8+
const Page = (props: {params: {cId: string; mId: string}}) => {
9+
const {params} = props;
10+
const user = useRecoilValue(userState);
11+
const [userRole, setUserRole] = useState<string>('');
12+
13+
useEffect(() => {
14+
if (user.role_id) setUserRole(user.role_id);
15+
}, []);
1316

1417
return (
1518
<div className="w-full box-border ">
16-
<Suspense fallback={<div>로딩중...</div>}>
17-
{classUser && ROLES[classUser?.role_id] === 'ADMIN' ? (
18-
<div className="p-4">
19-
<div className="text-5xl py-4 border-b-2">{material?.name}</div>
20-
<ManageContainer />
19+
{userRole === 'ADMIN' ? (
20+
<div className="p-4">
21+
<div className="text-5xl py-4 border-b-2">{params.mId}</div>
22+
<ManageContainer cId={params.cId} />
23+
</div>
24+
) : (
25+
<div className="flex w-full h-screen p-3">
26+
<div className="w-2/3">
27+
<div className="text-5xl py-4 border-b-2">{params.mId}</div>
28+
<UserContainer />
29+
</div>
30+
{/* 右側 */}
31+
<div className="px-3">
32+
<div className="h-full w-0.5 bg-gray-200"></div>
2133
</div>
22-
) : (
23-
<div className="flex w-full h-screen p-3">
24-
<div className="w-2/3">
25-
<div className="text-5xl py-4 border-b-2">{material?.name}</div>
26-
<UserContainer />
27-
</div>
28-
{/* 右側 */}
29-
<div className="px-3">
30-
<div className="h-full w-0.5 bg-gray-200"></div>
31-
</div>
32-
<div className="w-1/3">
33-
<SubContainer />
34-
</div>
34+
<div className="w-1/3">
35+
<SubContainer />
3536
</div>
36-
)}
37-
</Suspense>
37+
</div>
38+
)}
3839
</div>
3940
);
4041
};

‎src/components/navbar/material/MaterialList.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,9 @@ const MaterialList = ({
5353
const material = materials.find(material => material.id === String(mId));
5454
if (material?.prompts.length === 0 && cId) {
5555
postPromptAccess(parseInt(cId), mId).then(res => {
56-
console.log(res);
5756
setMaterialState({
5857
...material,
59-
prompts: [...(material?.prompts || []), {id: res.data.id}],
58+
prompts: [...(material?.prompts || []), {id: res}],
6059
});
6160
});
6261
}

0 commit comments

Comments
 (0)