Merge pull request YJU-OKURA#131 from dorimu0/refact/component-prompt

管理者プロンプトページの最適化
Lainari · May 8, 2024 · 9ced260 · 9ced260
2 parents 4eab13e + ea4a078
commit 9ced260
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 78 deletions.
diff --git a/src/api/apiUtils.ts b/src/api/apiUtils.ts
@@ -2,18 +2,9 @@ import BASE_URLS from './baseUrl';
 import HTTP_STATUS from './httpStatus';
 
 async function fetchWithInterceptors(url: string, options: RequestInit) {
-  const token = localStorage.getItem('access_token');
-
-  if (token) {
-    options.headers = {
-      ...options.headers,
-      Authorization: `Bearer ${token}`,
-    };
-  }
-
   let response = await fetch(url, options);
 
-  if (response.status === 401) {
+  if (response.status === HTTP_STATUS.UNAUTHORIZED) {
     const refreshToken = localStorage.getItem('refresh_token');
     const refreshResponse = await fetch(
       `${BASE_URLS.gin}/auth/google/refresh-token`,

diff --git a/src/app/classes/[cId]/[mId]/components/FeedbackContainer.tsx b/src/app/classes/[cId]/[mId]/components/FeedbackContainer.tsx
@@ -3,24 +3,24 @@ import {useRecoilValue} from 'recoil';
 import FeedbackForm from './FeedbackForm';
 import FeedbackList from './FeedbackList';
 import FeedbackKeywordList from './FeedbackKeywordList';
+import getCheckRefer from '@/src/api/feedback/getCheckRefer';
 import getFeedbacks from '@/src/api/feedback/getFeedbacks';
 import materialState from '@/src/recoil/atoms/materialState';
 import {feedback} from '@/src/interfaces/feedback';
 import '@/src/styles/variable.css';
-import getCheckRefer from '@/src/api/feedback/getCheckRefer';
 
-const FeedbackContainer = () => {
+const FeedbackContainer = (props: {cId: number}) => {
   const material = useRecoilValue(materialState);
   const [reload, setReload] = useState<boolean>(false);
   const [references, setReferences] = useState<boolean>(false);
   const [feedbacks, setFeedbacks] = useState<feedback[]>([]);
   useEffect(() => {
     if (!material) return;
-    getFeedbacks(4, parseInt(material.id), 1, 5).then(res => {
+    getFeedbacks(props.cId, parseInt(material.id), 1, 5).then(res => {
       console.log(res);
       setFeedbacks(res);
     });
-    getCheckRefer(4, parseInt(material.id)).then(res => {
+    getCheckRefer(props.cId, parseInt(material.id)).then(res => {
       console.log(res);
       setReferences(res);
     });
@@ -31,7 +31,11 @@ const FeedbackContainer = () => {
       <div className="flex justify-between items-center p-4">
         <div className="text-gray-500 text-lg">피드백 요청</div>
         {material ? (
-          <FeedbackForm mId={parseInt(material?.id)} setReload={setReload} />
+          <FeedbackForm
+            cId={props.cId}
+            mId={parseInt(material?.id)}
+            setReload={setReload}
+          />
         ) : null}
       </div>
       <div className="text-center w-full feedbackContainer box-border">
@@ -62,7 +66,11 @@ const FeedbackContainer = () => {
             ✅ 사용자가 질문한 내용과 가장 관련성이 높은 페이지
           </div>
           {material ? (
-            <FeedbackKeywordList mId={material?.id} references={references} />
+            <FeedbackKeywordList
+              cId={props.cId}
+              mId={parseInt(material?.id)}
+              references={references}
+            />
           ) : null}
         </div>
       </div>

diff --git a/src/app/classes/[cId]/[mId]/components/FeedbackForm.tsx b/src/app/classes/[cId]/[mId]/components/FeedbackForm.tsx
@@ -6,9 +6,11 @@ import postFeedback from '@/src/api/feedback/postFeedback';
 import gifs from '@/public/gif';
 
 const FeedbackForm = ({
+  cId,
   mId,
   setReload,
 }: {
+  cId: number;
   mId: number;
   setReload: (value: boolean) => void;
 }) => {
@@ -28,12 +30,13 @@ const FeedbackForm = ({
       setFeedback('');
     }
     setIsLoading(true);
-    getFeedback(4, mId, type, chat);
+    getFeedback(cId, mId, type, chat);
   };
 
   const handleClickSave = () => {
     const data = feedback.replace(/AI|:|"/g, '');
-    postFeedback(4, mId, data).then(() => {
+    console.log(data);
+    postFeedback(cId, mId, data).then(() => {
       setFeedback('');
       setReload(true);
       setIsOpen(false);

diff --git a/src/app/classes/[cId]/[mId]/components/FeedbackKeywordList.tsx b/src/app/classes/[cId]/[mId]/components/FeedbackKeywordList.tsx
@@ -5,53 +5,63 @@ import getKeywords from '@/src/api/feedback/getKeywords';
 import {keyword} from '@/src/interfaces/feedback';
 
 const FeedbackKeywordList = ({
+  cId,
   mId,
   references,
 }: {
-  mId: string;
+  cId: number;
+  mId: number;
   references: boolean;
 }) => {
   const [keywords, setKeywords] = useState<keyword[]>([]);
   const [loading, setLoading] = useState(true);
+
   useEffect(() => {
     if (references) {
-      getKeywords(4, parseInt(mId)).then(res => {
+      getKeywords(cId, mId).then(res => {
         console.log(res);
         setKeywords(res);
         setLoading(false);
       });
+    } else {
+      setLoading(false);
     }
   }, []);
   return (
     <div className="flex justify-center">
       {!references ? (
-        <div>not found</div>
-      ) : loading ? (
-        <div className="text-3xl p-3 font-semibold">
-          <Image
-            src="/gif/loading.gif"
-            width={200}
-            height={200}
-            alt="gif"
-          ></Image>
-        </div>
-      ) : (
-        keywords.map((keyword, index) => (
-          <div className="px-3" key={index}>
-            <div className="w-52 h-64 bg-green-200 rounded-lg p-4 border border-green-400">
-              <div className="w-16 h-16 bg-green-500 rounded-full m-auto flex justify-center items-center text-4xl text-white">
-                P
+        loading ? (
+          <div className="text-3xl p-3 font-semibold">
+            <Image
+              src="/gif/loading.gif"
+              width={200}
+              height={112}
+              alt="gif"
+              style={{width: '200px', height: '112px'}}
+            ></Image>
+          </div>
+        ) : (
+          keywords.map((keyword, index) => (
+            <div className="px-3" key={index}>
+              <div className="w-52 h-64 bg-green-200 rounded-lg p-4 border border-green-400">
+                <div className="w-16 h-16 bg-green-500 rounded-full m-auto flex justify-center items-center text-4xl text-white">
+                  P
+                </div>
+                <div className="p-1 font-semibold">{keyword.page}</div>
+                <div className="font-semibold">KeyWord</div>
+                <ul>
+                  <li>{keyword.keywords[0]}</li>
+                  <li>{keyword.keywords[1]}</li>
+                  <li>{keyword.keywords[2]}</li>
+                </ul>
               </div>
-              <div className="p-1 font-semibold">{keyword.page}</div>
-              <div className="font-semibold">KeyWord</div>
-              <ul>
-                <li>{keyword.keywords[0]}</li>
-                <li>{keyword.keywords[1]}</li>
-                <li>{keyword.keywords[2]}</li>
-              </ul>
             </div>
-          </div>
-        ))
+          ))
+        )
+      ) : (
+        <div className="text-blue-400">
+          현재 질문 데이터가 존재하지 않습니다.
+        </div>
       )}
     </div>
   );

diff --git a/src/app/classes/[cId]/[mId]/components/ManageContainer.tsx b/src/app/classes/[cId]/[mId]/components/ManageContainer.tsx
@@ -7,13 +7,13 @@ import FeedbackContainer from './FeedbackContainer';
 // import AttendanceContainer from './AttendanceContainer';
 import '@/src/styles/variable.css';
 
-const ManageContainer = () => {
+const ManageContainer = (props: {cId: string}) => {
   const tabs = ['자료', '퀴즈', '피드백', '출석'];
   const [activeTab, setActiveTab] = useState(tabs[0]);
   const tabMapping = {
     자료: <ManageMaterialContainer />,
     // Quiz: <QuizContainer />,
-    피드백: <FeedbackContainer />,
+    피드백: <FeedbackContainer cId={parseInt(props.cId)} />,
     // Attendance: <AttendanceContainer />,
   };
   return (

diff --git a/src/app/classes/[cId]/[mId]/components/subComponents/PromptChat.tsx b/src/app/classes/[cId]/[mId]/components/subComponents/PromptChat.tsx
@@ -1,6 +1,7 @@
 import {useEffect, useState} from 'react';
 import ReactMarkdown from 'react-markdown';
 import Image from 'next/image';
+import {useParams} from 'next/navigation';
 import ChatInput from './ChatInput';
 import getPrompt from '@/src/api/prompts/getPrompt';
 import patchMessage from '@/src/api/prompts/patchMessage';
@@ -14,16 +15,17 @@ const PromptChat = ({pId}: {pId: number}) => {
   const [inputMsg, setInputMsg] = useState<string>('');
   const [promptRes, setPromptRes] = useState<string>('');
   const [reload, setReload] = useState<boolean>(false);
+  const params = useParams<{cId: string}>();
 
   useEffect(() => {
-    getPrompt(4, pId, 1, 6).then(res => {
+    getPrompt(parseInt(params.cId), pId, 1, 6).then(res => {
       res.messages.reverse();
       setMsg(res.messages);
     });
   }, []);
 
   const handleClickIcon = (mId: number) => {
-    patchMessage(4, pId, mId, true).then(res => {
+    patchMessage(parseInt(params.cId), pId, mId, true).then(res => {
       console.log(res);
     });
   };

diff --git a/src/app/classes/[cId]/[mId]/page.tsx b/src/app/classes/[cId]/[mId]/page.tsx
@@ -1,40 +1,41 @@
 'use client';
+import {useEffect, useState} from 'react';
 import {useRecoilValue} from 'recoil';
 import {ManageContainer, UserContainer} from './components';
 import {SubContainer} from './components/subComponents';
-import classUserState from '@/src/recoil/atoms/classUserState';
-import ROLES from '@/src/constants/roles';
-import materialState from '@/src/recoil/atoms/materialState';
-import {Suspense} from 'react';
+import userState from '@/src/recoil/atoms/userState';
 
-const Page = () => {
-  const classUser = useRecoilValue(classUserState);
-  const material = useRecoilValue(materialState);
+const Page = (props: {params: {cId: string; mId: string}}) => {
+  const {params} = props;
+  const user = useRecoilValue(userState);
+  const [userRole, setUserRole] = useState<string>('');
+
+  useEffect(() => {
+    if (user.role_id) setUserRole(user.role_id);
+  }, []);
 
   return (
     <div className="w-full box-border ">
-      <Suspense fallback={<div>로딩중...</div>}>
-        {classUser && ROLES[classUser?.role_id] === 'ADMIN' ? (
-          <div className="p-4">
-            <div className="text-5xl py-4 border-b-2">{material?.name}</div>
-            <ManageContainer />
+      {userRole === 'ADMIN' ? (
+        <div className="p-4">
+          <div className="text-5xl py-4 border-b-2">{params.mId}</div>
+          <ManageContainer cId={params.cId} />
+        </div>
+      ) : (
+        <div className="flex w-full h-screen p-3">
+          <div className="w-2/3">
+            <div className="text-5xl py-4 border-b-2">{params.mId}</div>
+            <UserContainer />
+          </div>
+          {/* 右側 */}
+          <div className="px-3">
+            <div className="h-full w-0.5 bg-gray-200"></div>
           </div>
-        ) : (
-          <div className="flex w-full h-screen p-3">
-            <div className="w-2/3">
-              <div className="text-5xl py-4 border-b-2">{material?.name}</div>
-              <UserContainer />
-            </div>
-            {/* 右側 */}
-            <div className="px-3">
-              <div className="h-full w-0.5 bg-gray-200"></div>
-            </div>
-            <div className="w-1/3">
-              <SubContainer />
-            </div>
+          <div className="w-1/3">
+            <SubContainer />
           </div>
-        )}
-      </Suspense>
+        </div>
+      )}
     </div>
   );
 };

diff --git a/src/components/navbar/material/MaterialList.tsx b/src/components/navbar/material/MaterialList.tsx
@@ -53,10 +53,9 @@ const MaterialList = ({
     const material = materials.find(material => material.id === String(mId));
     if (material?.prompts.length === 0 && cId) {
       postPromptAccess(parseInt(cId), mId).then(res => {
-        console.log(res);
         setMaterialState({
           ...material,
-          prompts: [...(material?.prompts || []), {id: res.data.id}],
+          prompts: [...(material?.prompts || []), {id: res}],
         });
       });
     }