[Feat] swagger바탕으로 api작성과 네비게이션바 동작하게 변경 그리고 로그인 상태 저장 로그인 상태에 따라 네비게이션 따로 보여주기

.github/workflows/action.yml

@@ -5,15 +5,15 @@ on:
       - master
 jobs:
   build:
-    runs-on: ubuntu-latest      
+    runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [ 16.x ]
+        node-version: [20.x]
 
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
       - name: Create env file

__tests__/pages/home/components/RightSection/renderingCodeFlowUnitTest.test.tsx

@@ -1,21 +1,26 @@
 import { ReactNode } from "react";
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import { renderingCodeFlow } from "@/pages/Home/components/RightSection/renderingCodeFlow.tsx";
-import { ForItem } from "@/pages/Home/types/forItem";
+import { renderingCodeFlow } from "@/pages/Visualization/components/RightSection/renderingCodeFlow";
+import { ForItem } from "@/pages/Visualization/types/codeFlow/forItem";
 type Props = {
   children: ReactNode;
   forItem: ForItem;
 };
 // ForBox 컴포넌트 모킹
 // ForBox의 실제 경로에서 forItem과 children인자만 가지고와서 사용한다
-jest.mock("@/pages/Home/components/RightSection/components/ForBox/ForBox", () => ({ forItem, children }: Props) => (
-  // 실제 ForBox의 컴포넌트를 가지고 오는 것이 아닌 가짜로 만들어서 사용
-  <div data-testid="for-box">
-    For Box: {forItem.id}
-    <div data-testid="for-children">{children}</div>
-  </div>
-));
+jest.mock(
+  "@/pages/Visualization/components/RightSection/components/ForBox/ForBox",
+  () =>
+    ({ forItem, children }: Props) =>
+      (
+        // 실제 ForBox의 컴포넌트를 가지고 오는 것이 아닌 가짜로 만들어서 사용
+        <div data-testid="for-box">
+          For Box: {forItem.id}
+          <div data-testid="for-children">{children}</div>
+        </div>
+      )
+);
 
 describe("renderingCodeFlow 함수", () => {
   it("forBox 컴포넌트 하나만 출력하는 테스트", () => {

__tests__/pages/home/homeUnitTest.test.tsx

@@ -3,16 +3,20 @@ import React from "react";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import forPrintMockData from "./samples/successForAndPrintResponseBody.json";
-import Home from "../../../src/pages/Home/Home";
-
+import Home from "../../../src/pages/Visualization/Visualization";
+import { MemoryRouter } from "react-router-dom";
 // 브라우저API 모킹
 (window as any).fetch = jest.fn();
 window.alert = jest.fn();
 
 // reactQuery를 사용하는 컴포넌트를 테스트하기 위해 컴포넌트를 렌더링 하는 함수
 const renderWithQueryClient = (component: React.ReactElement) => {
   const queryClient = new QueryClient();
-  return render(<QueryClientProvider client={queryClient}>{component}</QueryClientProvider>);
+  return render(
+    <MemoryRouter>
+      <QueryClientProvider client={queryClient}>{component}</QueryClientProvider>
+    </MemoryRouter>
+  );
 };
 
 describe("백엔드로 부터 Object 외에 다른 response body(code) 를 받았을 때", () => {

package.json

@@ -20,6 +20,7 @@
     "framer-motion": "^11.2.12",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
+    "react-cookie": "^7.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.23.1",
     "react-split": "^2.0.14",
@@ -50,6 +51,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
+    "jose": "^5.8.0",
     "msw": "^2.3.1",
     "ts-jest": "^29.2.4",
     "ts-node": "^10.9.2",