Merge pull request YJU-OKURA#127 from dorimu0/refact/folder-structure

プロジェクトフォルダ構造の改善

Author: Lainari

public/gif/eclipse.gif

@@ -1,80 +1,88 @@
-import axios from 'axios';
 import BASE_URLS from './baseUrl';
 import HTTP_STATUS from './httpStatus';
 
-const api = axios.create();
-
-api.interceptors.request.use(async config => {
+async function fetchWithInterceptors(url: string, options: RequestInit) {
   const token = localStorage.getItem('access_token');
 
   if (token) {
-    config.headers.Authorization = `Bearer ${token}`;
+    options.headers = {
+      ...options.headers,
+      Authorization: `Bearer ${token}`,
+    };
   }
 
-  return config;
-});
+  let response = await fetch(url, options);
 
-api.interceptors.response.use(
-  response => {
-    return response;
-  },
-  async error => {
-    const originalRequest = error.config;
-    // トークンの有効期限が切れていて、トークン更新要求がない場合
-    if (error.response.status === 401 && !originalRequest._retry) {
-      originalRequest._retry = true;
-      const body = {
-        refresh_token: localStorage.getItem('refresh_token'),
-      };
-      try {
-        const res = await axios.post(
-          `${BASE_URLS.gin}/auth/google/refresh-token`,
-          body
-        );
-        if (res.status === 200) {
-          const newToken = res.data.data.access_token;
-          localStorage.setItem('access_token', newToken);
-          api.defaults.headers.common['Authorization'] = `Bearer ${newToken}`;
-          // トークンが更新された後、元のリクエストを再実行
-          return api(originalRequest);
-        }
-      } catch (error) {
-        console.error('トークンの有効期限が切れました。');
-        window.location.href = '/intro';
+  if (response.status === 401) {
+    const refreshToken = localStorage.getItem('refresh_token');
+    const refreshResponse = await fetch(
+      `${BASE_URLS.gin}/auth/google/refresh-token`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({refresh_token: refreshToken}),
       }
+    );
+
+    if (refreshResponse.ok) {
+      const data = await refreshResponse.json();
+      const newToken = data.data.access_token;
+      localStorage.setItem('access_token', newToken);
+      options.headers = {
+        ...options.headers,
+        Authorization: `Bearer ${newToken}`,
+      };
+
+      response = await fetch(url, options);
+    } else {
+      console.error('トークンの有効期限が切れました。');
+      window.location.href = '/intro';
     }
-    return Promise.reject(error);
   }
-);
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+
+  return response;
+}
 
 const req = async (
   url: string,
-  method: string,
+  method: RequestInit['method'],
   server: 'gin' | 'nest',
-  body: object | undefined = undefined
+  body: BodyInit | null | undefined = undefined
 ) => {
-  api.defaults.baseURL = BASE_URLS[server];
+  const headers = new Headers();
+  const token = localStorage.getItem('access_token');
+  if (token) {
+    headers.append('Authorization', `Bearer ${token}`);
+  }
 
-  if (typeof body !== 'undefined') {
-    if (body instanceof FormData) {
-      api.defaults.headers.common['Content-Type'] = 'multipart/form-data';
-    } else if (typeof body !== 'undefined') {
-      api.defaults.headers.common['Content-Type'] = 'application/json';
-    }
+  if (body instanceof FormData) {
+    headers.append('Content-Type', 'multipart/form-data');
+  } else if (body) {
+    headers.append('Content-Type', 'application/json');
+    body = JSON.stringify(body);
   }
+
   try {
-    const response = await api.request({
-      url,
+    const response = await fetchWithInterceptors(BASE_URLS[server] + url, {
       method,
-      data: body,
-      withCredentials: true,
+      headers,
+      body,
+      credentials: 'include',
     });
+
     if (response.status === HTTP_STATUS.NO_CONTENT) {
       return {};
     }
-    return response.data;
+
+    return response.json();
   } catch (error) {
-    console.error(`${method} リクエスト中にエラーが発生しました.`, error);
+    console.error(`${method} リクエスト中にエラーが発生しました。`, error);
     throw error;
   }
 };

public/svgs/login/logo.svg

@@ -1,7 +1,7 @@
 import req from '../apiUtils';
 
 const getGoogleLogin = async () => {
-  const response = await req('auth/google/login', 'get', 'gin');
+  const response = await req('/auth/google/login', 'get', 'gin');
 
   return response.data;
 };

src/api/apiUtils.ts

@@ -0,0 +1,15 @@
+import req from '../apiUtils';
+
+const getCheckRefer = async (cId: number, mId: number): Promise<boolean> => {
+  const response = await req(
+    `/class/${cId}/feedback/materials/${mId}/check-refer`,
+    'get',
+    'nest'
+  );
+
+  console.log(response);
+
+  return response;
+};
+
+export default getCheckRefer;

src/api/auth/getGoogleLogin.ts

@@ -7,17 +7,23 @@ 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 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 => {
       console.log(res);
       setFeedbacks(res);
     });
+    getCheckRefer(4, parseInt(material.id)).then(res => {
+      console.log(res);
+      setReferences(res);
+    });
   }, [reload]);
 
   return (
@@ -55,7 +61,9 @@ const FeedbackContainer = () => {
           <div className="text-2xl font-semibold p-5">
             ✅ 사용자가 질문한 내용과 가장 관련성이 높은 페이지
           </div>
-          {material ? <FeedbackKeywordList mId={material?.id} /> : null}
+          {material ? (
+            <FeedbackKeywordList mId={material?.id} references={references} />
+          ) : null}
         </div>
       </div>
     </div>

src/api/feedback/getCheckRefer.ts

@@ -1,7 +1,9 @@
 'use client';
 import {useState} from 'react';
+import Image from 'next/image';
 import getFeedback from '@/src/api/feedback/getFeedback';
 import postFeedback from '@/src/api/feedback/postFeedback';
+import gifs from '@/public/gif';
 
 const FeedbackForm = ({
   mId,
@@ -11,6 +13,7 @@ const FeedbackForm = ({
   setReload: (value: boolean) => void;
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [feedback, setFeedback] = useState('');
   const [type, setType] = useState('all');
 
@@ -24,6 +27,7 @@ const FeedbackForm = ({
       console.log('feedback:', feedback);
       setFeedback('');
     }
+    setIsLoading(true);
     getFeedback(4, mId, type, chat);
   };
 
@@ -37,6 +41,7 @@ const FeedbackForm = ({
   };
 
   const chat = async (reader: ReadableStreamDefaultReader) => {
+    setIsLoading(false);
     let feedbackData = '';
     try {
       while (reader) {
@@ -46,12 +51,10 @@ const FeedbackForm = ({
         setFeedback(feedback => feedback + decodedValue);
 
         if (feedback.includes(' ')) {
-          console.log(feedbackData);
           feedbackData = '';
         }
         if (done) {
-          // console.log('스트림이 완료되었습니다.');
-          // console.log(feedback);
+          console.log(feedbackData);
           break;
         }
       }
@@ -78,19 +81,19 @@ const FeedbackForm = ({
           >
             <div className="w-[550px] h-full text-center box-border">
               <div className="text-4xl font-semibold pt-4">
-                어시스턴트의 분석 결과
+                The Assistant’s Analysis
               </div>
               <div className="text-sm text-neutral-400 my-2">
-                팀과 협업하여 미노리를 최대한 활용하세요.
+                Collaborate with your team to get the most out of monday.com
               </div>
               <div className="w-full m-auto flex text-left py-2">
                 <div className="w-1/2 flex items-center">
                   <select
                     className="border p-2 rounded-lg"
                     onChange={handleChangeType}
                   >
-                    <option value="all">모든 피드백</option>
-                    <option value="part">일부 피드백</option>
+                    <option value="all">All Feedback</option>
+                    <option value="part">Partial feedback</option>
                   </select>
                   <div className="px-2">
                     <button
@@ -104,22 +107,32 @@ const FeedbackForm = ({
               </div>
               <div className="py-3">
                 <div className="w-full h-[260px] rounded-md p-4 bg-gray-100 overflow-scroll">
-                  {feedback.replace(/AI|:|"/g, '')}
-                  {/* {feedback} */}
+                  {isLoading ? (
+                    <div className="h-[260px] flex justify-center items-center">
+                      <Image
+                        src={gifs.eclipse}
+                        width={100}
+                        height={100}
+                        alt="gif"
+                      />
+                    </div>
+                  ) : (
+                    feedback.replace(/AI|:|"/g, '')
+                  )}
                 </div>
               </div>
               <div className="w-2/3 m-auto flex justify-between">
                 <button
                   className="border border-gray-500 rounded-full px-6 py-2"
                   onClick={() => setIsOpen(false)}
                 >
-                  {'< '}뒤로가기
+                  {'< '}Close
                 </button>
                 <button
                   className="bg-blue-500 text-white rounded-full px-6 py-2"
                   onClick={handleClickSave}
                 >
-                  저장
+                  Save
                 </button>
               </div>
             </div>

src/app/Loading.tsx

@@ -4,25 +4,29 @@ import Image from 'next/image';
 import getKeywords from '@/src/api/feedback/getKeywords';
 import {keyword} from '@/src/interfaces/feedback';
 
-const FeedbackKeywordList = ({mId}: {mId: string}) => {
+const FeedbackKeywordList = ({
+  mId,
+  references,
+}: {
+  mId: string;
+  references: boolean;
+}) => {
   const [keywords, setKeywords] = useState<keyword[]>([]);
   const [loading, setLoading] = useState(true);
   useEffect(() => {
-    console.log(mId);
-    getKeywords(4, parseInt(mId))
-      .then(res => {
+    if (references) {
+      getKeywords(4, parseInt(mId)).then(res => {
         console.log(res);
         setKeywords(res);
         setLoading(false);
-      })
-      .catch(err => {
-        console.log(err);
-        setLoading(false);
       });
+    }
   }, []);
   return (
     <div className="flex justify-center">
-      {loading ? (
+      {!references ? (
+        <div>not found</div>
+      ) : loading ? (
         <div className="text-3xl p-3 font-semibold">
           <Image
             src="/gif/loading.gif"

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

@@ -8,12 +8,12 @@ import FeedbackContainer from './FeedbackContainer';
 import '@/src/styles/variable.css';
 
 const ManageContainer = () => {
-  const tabs = ['Material', 'Quiz', 'Feedback', 'Attendance'];
+  const tabs = ['자료', '퀴즈', '피드백', '출석'];
   const [activeTab, setActiveTab] = useState(tabs[0]);
   const tabMapping = {
-    Material: <ManageMaterialContainer />,
+    자료: <ManageMaterialContainer />,
     // Quiz: <QuizContainer />,
-    Feedback: <FeedbackContainer />,
+    피드백: <FeedbackContainer />,
     // Attendance: <AttendanceContainer />,
   };
   return (

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

@@ -20,7 +20,7 @@ const PromptChat = ({pId}: {pId: number}) => {
       res.messages.reverse();
       setMsg(res.messages);
     });
-  }, [reload]);
+  }, []);
 
   const handleClickIcon = (mId: number) => {
     patchMessage(4, pId, mId, true).then(res => {

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

@@ -8,12 +8,12 @@ import materialState from '@/src/recoil/atoms/materialState';
 import '@/src/styles/variable.css';
 
 const SubContainer = () => {
-  const TABS = ['PromptChat', 'Storage'];
+  const TABS = ['프롬프트창', '저장목록'];
   const [activeTab, setActiveTab] = useState(TABS[0]);
   const material = useRecoilValue(materialState);
   const tabMapping = {
-    PromptChat: <PromptChat pId={material ? material.prompts[0]?.id : 0} />,
-    Storage: <Storage pId={material ? material.prompts[0]?.id : 0} />,
+    프롬프트창: <PromptChat pId={material ? material.prompts[0]?.id : 0} />,
+    저장목록: <Storage pId={material ? material.prompts[0]?.id : 0} />,
   };
 
   return (