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

navbarのレイアウトを修正し、Quizコンポーネントにステータスチェックを追加。
Lainari · Jun 18, 2024 · 6f7aff1 · 6f7aff1
2 parents 372c7c5 + 7d1f690
commit 6f7aff1
Show file tree

Hide file tree

Showing 15 changed files with 375 additions and 228 deletions.
diff --git a/src/api/feedback/getFeedback.ts b/src/api/feedback/getFeedback.ts
@@ -1,12 +1,13 @@
 import BASE_URLS from '../baseUrl';
+import Cookies from 'js-cookie';
 
 const getFeedback = async (
   cId: number,
   mId: number,
   type: string,
   chat: (reader: ReadableStreamDefaultReader) => void
 ) => {
-  const token = localStorage.getItem('access_token');
+  const token = Cookies.get('access_token');
   try {
     const response = await fetch(
       `${BASE_URLS.nest}/class/${cId}/feedback/materials/${mId}/get-feedback?type=${type}`,

diff --git a/src/api/material/patchMaterial.ts b/src/api/material/patchMaterial.ts
@@ -11,7 +11,7 @@ const patchMaterial = async (
   formData.append('file', file ? file : '');
   const response = await req(
     `/class/${cId}/materials/${id}`,
-    'patch',
+    'PATCH',
     'nest',
     formData
   );

diff --git a/src/api/prompts/patchMessage.ts b/src/api/prompts/patchMessage.ts
@@ -8,7 +8,7 @@ const patchMessage = async (
 ) => {
   const response = await req(
     `/class/${cId}/prompts/${id}/messages/${mId}?is_save=${isSave}`,
-    'patch',
+    'PATCH',
     'nest'
   );
 

diff --git a/src/api/prompts/postPrompt.ts b/src/api/prompts/postPrompt.ts
@@ -1,10 +1,12 @@
+import Cookies from 'js-cookie';
+
 const postPrompt = async (
   cId: number,
   id: number,
   message: string,
   chat: (reader: ReadableStreamDefaultReader) => void
 ) => {
-  const token = localStorage.getItem('access_token');
+  const token = Cookies.get('access_token');
   console.log('token:', token);
   const body = {
     message: message,

diff --git a/src/app/classes/[cId]/[mId]/components/FeedbackKeywordList.tsx b/src/app/classes/[cId]/[mId]/components/FeedbackKeywordList.tsx
@@ -14,7 +14,7 @@ const FeedbackKeywordList = ({cId, mId}: {cId: number; mId: number}) => {
     getCheckRefer(cId, mId).then(res => {
       setReferences(res);
     });
-  }, []);
+  }, [cId, mId]);
 
   useEffect(() => {
     if (!references) {
@@ -27,7 +27,9 @@ const FeedbackKeywordList = ({cId, mId}: {cId: number; mId: number}) => {
       setKeywords(res);
       setLoading(false);
     });
-  }, [references]);
+  }, [references, cId, mId]);
+
+  console.log(keywords);
 
   return (
     <div className="flex justify-center">

diff --git a/src/app/classes/[cId]/[mId]/components/FeedbackList.tsx b/src/app/classes/[cId]/[mId]/components/FeedbackList.tsx
@@ -27,7 +27,7 @@ const FeedbackList = ({feedbacks}: {feedbacks: feedback[]}) => {
         >
           {feedbacks.map(feedback => (
             <SwiperSlide key={feedback.id}>
-              <div className="w-[500px] h-[400px] bg-green-300 drop-shadow-xl overflow-scroll m-auto">
+              <div className="w-[500px] h-[400px] bg-green-300 drop-shadow-lg overflow-scroll m-auto my-3">
                 <div className="p-2 text-start">
                   {feedback.content.split('\n').map((content, index) => {
                     return (

diff --git a/src/app/classes/[cId]/[mId]/components/QuizFeedback.tsx b/src/app/classes/[cId]/[mId]/components/QuizFeedback.tsx
@@ -20,11 +20,19 @@ const QuizFeedback = ({
   const [submitQuizList, setSubmitQuizList] = useState<SubmitQuiz[]>([]);
   const [feedback, setFeedback] = useState<string>('');
   const [collectRate, setCollectRate] = useState<number>(0);
+  const [isWrite, setIsWrite] = useState<boolean>(false);
 
   useEffect(() => {
-    getQuizFeedback(cId, mId, uId).then(res => {
-      console.log(res);
-    });
+    getQuizFeedback(cId, mId, uId)
+      .then(res => {
+        console.log(res);
+        setFeedback(res.data.content);
+        setIsWrite(true);
+      })
+      .catch(() => {
+        console.log('error');
+        setIsWrite(false);
+      });
     getUserQuizInfo(cId, mId, uId).then(res => {
       console.log(res);
       setSubmitQuizList(res.results);
@@ -49,20 +57,24 @@ const QuizFeedback = ({
           <div className="text-xl font-semibold">ㅇㅇ님이 제출한 퀴즈</div>
           <div className="py-3">
             <p className="pb-2">ㅇㅇ님에 대한 피드백</p>
-            <div className="flex justify-between items-end">
-              <input
-                type="text"
-                className="w-[550px] p-2 outline-none border-2 border-gray-400 rounded-lg"
-                value={feedback}
-                onChange={e => setFeedback(e.target.value)}
-              />
-              <button
-                className="bg-blue-500 text-white px-4 py-2 rounded-lg font-semibold"
-                onClick={handleCreateFeedback}
-              >
-                작성
-              </button>
-            </div>
+            {isWrite ? (
+              <div>{feedback}</div>
+            ) : (
+              <div className="flex justify-between items-end">
+                <input
+                  type="text"
+                  className="w-[550px] p-2 outline-none border-2 border-gray-400 rounded-lg"
+                  value={feedback}
+                  onChange={e => setFeedback(e.target.value)}
+                />
+                <button
+                  className="bg-blue-500 text-white px-4 py-2 rounded-lg font-semibold"
+                  onClick={handleCreateFeedback}
+                >
+                  작성
+                </button>
+              </div>
+            )}
           </div>
           <div className="h-[280px] overflow-scroll">
             <div className="font-bold py-2">