Merge pull request #122 from codesquad-team4-issue-tracker/feat/#121-…

…crud

[FE] api 테스트 페이지 구현 및 토큰 검사 실패 기능 구현

fe/src/App.tsx

@@ -8,6 +8,7 @@ import IssueDetail from './components/Issue/IssueDetail/IssueDetail';
 import LabelList from './components/Label/LabelList';
 import MilestoneList from './components/Milestone/MilestoneList';
 import UserProvider from './components/Context/UserContext';
+import ApiTest from './components/ApiTest';
 
 export default function App() {
   const location = useLocation();
@@ -26,6 +27,7 @@ export default function App() {
         <Route path="/issue/:id" element={<IssueDetail />} />
         <Route path="/label" element={<LabelList />} />
         <Route path="/milestone" element={<MilestoneList />} />
+        <Route path="/test" element={<ApiTest />} />
       </Routes>
     </UserProvider>
   );

fe/src/components/ApiTest.tsx

@@ -0,0 +1,64 @@
+import { css } from '@emotion/react';
+
+export default function ApiTest() {
+  const GetAssignee = () => {};
+
+  const on = () => {};
+  return (
+    <div css={test}>
+      <button type="button" onClick={GetAssignee}>
+        GET 담당자를 불러온다
+      </button>
+      <button type="button" onClick={on}>
+        GET 레이블을 불러온다
+      </button>
+      <button type="button" onClick={on}>
+        GET 마일스톤을 불러온다
+      </button>
+      <button type="button" onClick={on}>
+        GET 작성자를 불러온다
+      </button>
+      <button type="button" onClick={on}>
+        POST 이슈의 담당자를 수정한다
+      </button>
+      <button type="button" onClick={on}>
+        POST 이슈 레이블을 수정한다
+      </button>
+      <button type="button" onClick={on}>
+        POST 이슈 마일스톤을 수정한다
+      </button>
+      <button type="button" onClick={on}>
+        DELETE 이슈 상세페이지의 코멘트를 삭제한다
+      </button>
+      <button type="button" onClick={on}>
+        POST 레이블을 추가한다
+      </button>
+      <button type="button" onClick={on}>
+        PUT 레이블을 수정한다
+      </button>
+      <button type="button" onClick={on}>
+        DELETE 레이블을 삭제한다
+      </button>
+      <button type="button" onClick={on}>
+        POST 마일스톤을 추가한다
+      </button>
+      <button type="button" onClick={on}>
+        PUT 마일스톤을 수정한다
+      </button>
+      <button type="button" onClick={on}>
+        DELETE 마일스톤을 삭제한다
+      </button>
+    </div>
+  );
+}
+
+const test = css`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  > button {
+    width: 200px;
+    height: 40px;
+  }
+`;

fe/src/components/Issue/IssueList/IssueList.tsx

@@ -20,10 +20,10 @@ export default function IssueList() {
   useEffect(() => {
     (async () => {
       try {
-        const issueData = await customFetch<GetIssueRes>({ subUrl: 'api/' });
+        const response = await customFetch<GetIssueRes>({ subUrl: 'api/' });
 
-        if (issueData.success && issueData.data) {
-          setIssueList(issueData.data);
+        if (response.success && response.data) {
+          setIssueList(response.data);
         }
       } catch (error) {
         //Memo: 에러 핸들링 필요

fe/src/util/customFetch.ts

@@ -1,3 +1,5 @@
+import { useNavigate } from 'react-router-dom';
+
 type Props = {
   subUrl: string;
   method?: string;
@@ -13,6 +15,7 @@ export async function customFetch<T>({
   contentType = 'application/json',
   body,
 }: Props): Promise<T> {
+  const navigate = useNavigate();
   const baseUrl = import.meta.env.VITE_APP_BASE_URL;
   const authorization = 'Bearer ' + localStorage.getItem('accessToken');
 
@@ -31,6 +34,12 @@ export async function customFetch<T>({
     const res = await fetch(url, options);
     const json = await res.json();
 
+    if (!json.success) {
+      if (json.errorCode.status === 401) {
+        navigate('/sign-in');
+      }
+    }
+
     return json;
   } catch (error) {
     throw error;