Merge pull request #45 from techeer-sv/develop

배포처리
techeer-sv · Jun 25, 2023 · fc4d3a5 · fc4d3a5
2 parents 5d1db7b + a6df6f1
commit fc4d3a5
Show file tree

Hide file tree

Showing 21 changed files with 2,210 additions and 89 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,28 @@
+name: DEPLOY
+on:
+  push:
+    branches:
+      - master
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ap-northeast-2
+
+      - name: Build and Deploy
+        run: |
+          yarn install
+          yarn build
+          yarn ci-deploy
+
+      - name: Invalidate CloudFront cache
+        run: |
+          aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} --paths "/*"
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -0,0 +1,31 @@
+# 워크 플로우의 이름 설정
+name: TEST
+
+# 워크 플로우의 트리거 설정 (develop브랜치에 대한 push,pr에 대해 처리한다)
+on:
+  push:
+    branches: [develop]
+  pull_request:
+    branches: [develop]
+
+# 워크 플로우에서 실행될 작업 정의
+jobs:
+  build:
+    name: jest test
+    # 작업을 실행할 운영체제 설정
+    runs-on: ubuntu-latest
+
+    # 병렬 실행 전략 설정 (Node사용)
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    steps:
+      # 각 단계 설정
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: yarn install
+      - run: yarn test
diff --git a/jest.config.ts b/jest.config.ts
@@ -0,0 +1,16 @@
+export default {
+  testEnvironment: 'jest-environment-jsdom',
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
+      'jest-transform-stub',
+  },
+  moduleNameMapper: {
+    '^.+\\.svg$': 'jest-svg-transformer',
+    '^@/(.*)$': '<rootDir>/src/$1',
+    '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      'identity-obj-proxy',
+    '\\.(css|less|scss)$': 'identity-obj-proxy',
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+};
diff --git a/jest.setup.ts b/jest.setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
     "@toast-ui/react-editor": "^3.2.3",
@@ -14,23 +14,27 @@
     "@types/react-lottie": "^1.2.6",
     "axios": "^1.4.0",
     "css-loader": "^6.7.3",
+    "jest": "^29.5.0",
+    "jest-svg-transformer": "^1.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-force-graph": "^1.42.0",
     "react-lottie": "^1.2.3",
+    "react-query": "^3.39.3",
     "react-router-dom": "^6.11.2",
     "react-scripts": "5.0.1",
     "recoil": "^0.7.7",
     "style-loader": "^3.3.2",
     "tui-color-picker": "^2.2.8",
-    "typescript": "^4.4.2",
+    "typescript": "^5.1.3",
     "web-vitals": "^2.1.0"
   },
   "scripts": {
     "start": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "deploy": "aws s3 sync ./dist/ s3://mindspace-front --profile=master"
+    "deploy": "aws s3 sync ./dist/ s3://mindspace-front --profile=master",
+    "test": "VITE_API_URL=http://test/ jest"
   },
   "eslintConfig": {
     "extends": [
@@ -66,10 +70,16 @@
     "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-transform-stub": "^2.0.0",
+    "msw": "^1.2.1",
     "prettier": "^2.8.4",
     "react-modal": "^3.16.1",
     "sass": "^1.60.0",
     "sass-loader": "^13.2.0",
-    "vite": "^4.3.2"
+    "ts-jest": "^29.1.0",
+    "ts-node": "^10.9.1",
+    "vite": "^4.3.2",
+    "vite-plugin-environment": "^1.1.3"
   }
 }
diff --git a/src/App.test.tsx b/src/App.test.tsx
diff --git a/src/api/Auth.ts b/src/api/Auth.ts
@@ -5,19 +5,33 @@ import axios from '@/utils/baseAxios';
  * React-query를 사용해 컴포넌트에서 직접 api를 호출하지 않도록 수정해야합니다.
  */
 
-export const createUser = async (
-  userName: string,
-  email: string,
-  password: string,
-) => {
+interface CreateUserParams {
+  userName: string;
+  email: string;
+  password: string;
+}
+
+export const createUser = async ({
+  userName,
+  email,
+  password,
+}: CreateUserParams) => {
   await axios.post('user/signup', {
     nickname: userName,
     email: email,
     password: password,
   });
 };
 
-export const getAccessToken = async (email: string, password: string) => {
+interface GetAccessTokenParams {
+  email: string;
+  password: string;
+}
+
+export const getAccessToken = async ({
+  email,
+  password,
+}: GetAccessTokenParams) => {
   const response = await axios.post('user/login', {
     email: email,
     password: password,
@@ -27,6 +41,12 @@ export const getAccessToken = async (email: string, password: string) => {
    * //FIXME
    * data.id값으로 받아오는 응답값을 향후 백엔드 업데이트에 맞춰 accessToken값으로 수정해야합니다.
    */
+
   const accessToken = response.data.id;
   return accessToken;
 };
+
+export const getUserNickname = async () => {
+  const response = await axios.get('user/nickname');
+  return response.data.nickname;
+};
diff --git a/src/components/Navbar/index.test.tsx b/src/components/Navbar/index.test.tsx
@@ -0,0 +1,116 @@
+import {
+  render,
+  fireEvent,
+  screen,
+  waitFor,
+  act,
+} from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import Navbar from '.';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+import { rest } from 'msw';
+import { setupServer } from 'msw/node';
+import { RecoilRoot } from 'recoil';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  Link: ({ to, children }: any) => (
+    <div data-testid="mock-link" data-to={to}>
+      {children}
+    </div>
+  ),
+}));
+
+const server = setupServer(
+  rest.get('http://test/api/v1/user/nickname', (_, res, ctx) => {
+    return res(ctx.status(200), ctx.json({ nickname: 'testName' }));
+  }),
+);
+
+beforeAll(() => {
+  server.listen();
+  jest.spyOn(console, 'error').mockImplementation(() => {});
+});
+afterEach(() => server.resetHandlers());
+afterAll(() => {
+  server.close();
+});
+
+describe('Navbar 컴포넌트', () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  beforeEach(() => {
+    render(
+      <BrowserRouter>
+        <RecoilRoot>
+          <QueryClientProvider client={queryClient}>
+            <Navbar />
+          </QueryClientProvider>
+        </RecoilRoot>
+      </BrowserRouter>,
+    );
+  });
+
+  afterEach(() => {
+    localStorage.clear();
+  });
+
+  describe('1. 로그인 상태일 때', () => {
+    beforeEach(() => {
+      localStorage.setItem('accessToken', 'testToken');
+
+      render(
+        <BrowserRouter>
+          <RecoilRoot>
+            <QueryClientProvider client={queryClient}>
+              <Navbar />
+            </QueryClientProvider>
+          </RecoilRoot>
+        </BrowserRouter>,
+      );
+    });
+
+    it('1.1 사용자 닉네임을 화면에 표시한다.', async () => {
+      await waitFor(() => {
+        expect(screen.getByText('testName')).toBeInTheDocument();
+      });
+    });
+
+    it('1.2 로그아웃 버튼을 화면에 표시한다.', () => {
+      const logoutButton = screen.getByText('logout');
+      expect(logoutButton).toBeInTheDocument();
+    });
+
+    it('1.3 로그아웃 버튼을 클릭하면 스토리지값을 초기화한다.', () => {
+      const logoutButton = screen.getByText('logout');
+      fireEvent.click(logoutButton);
+      expect(localStorage.getItem('accessToken')).toBeNull();
+    });
+  });
+
+  describe('2. 로그인 상태가 아닐 때', () => {
+    it('2.1 회원가입과 로그인 버튼을 화면에 표현한다.', async () => {
+      const loginButton = screen.getByText('SignIn');
+      expect(loginButton).toBeInTheDocument();
+
+      const signUpButton = screen.getByText('SignUp');
+      expect(signUpButton).toBeInTheDocument();
+    });
+  });
+
+  it('로고 클릭 시 루트 경로(/)로 이동한다.', async () => {
+    const links = screen.getAllByTestId('mock-link');
+    const logo = links.find((link) => link.getAttribute('data-to') === '/');
+
+    fireEvent.click(logo);
+
+    expect(logo).toHaveAttribute('data-to', '/');
+  });
+});
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -1,21 +1,26 @@
 import { useState, useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import MindSpaceText from '@/images/MindSpaceText.png';
+import styles from './Navbar.module.scss';
 
 import { useRecoilState } from 'recoil';
 import { isLoggedInAtom } from '@/recoil/state/authAtom';
-
-import styles from './Navbar.module.scss';
+import {
+  useUserNicknameQuery,
+  useClearUserNicknameCache,
+} from '@/hooks/queries/user';
 
 const Navbar = () => {
   const navigate = useNavigate();
   const [isLoggedIn, setLoggedIn] = useRecoilState(isLoggedInAtom);
   const [isNavExpanded, setIsNavExpanded] = useState(false);
 
+  const { data: userNickname } = useUserNicknameQuery(isLoggedIn);
+
   const logout = () => {
+    setLoggedIn(false);
     alert('로그아웃 되었습니다');
     navigate('/');
-    setLoggedIn(false);
     localStorage.clear();
   };
 
@@ -29,6 +34,13 @@ const Navbar = () => {
     };
   }, []);
 
+  useEffect(() => {
+    const isCurrentlyLoggedIn = localStorage.getItem('accessToken') !== null;
+    setLoggedIn(isCurrentlyLoggedIn);
+  }, []);
+
+  useClearUserNicknameCache(isLoggedIn);
+
   return (
     <nav className={styles.navbar}>
       <Link to="/" className={styles.navbar__title}>
@@ -65,7 +77,7 @@ const Navbar = () => {
                     : styles.navbar__menu__text
                 }
               >
-                <span>{'testEmail'}</span>
+                <span>{userNickname}</span>
               </li>
               <li>
                 <span

diff --git a/src/components/ResizebleModal/index.tsx b/src/components/ResizebleModal/index.tsx
@@ -4,6 +4,7 @@ import styles from './ResizebleModal.module.scss';
 import { ResizableModalProps } from '@/utils/types';
 import { useRecoilState } from 'recoil';
 import { ModalWidthAtom, ModalHeightAtom } from '@/recoil/state/resizeAtom';
+import { NAVBAR_HEIGHT } from '@/utils/constants';
 
 const ResizableModal = ({
   isOpen,
@@ -14,7 +15,7 @@ const ResizableModal = ({
   const minHeight = window.innerHeight * 0.6;
 
   const maxWidth = window.innerWidth - 50;
-  const maxHeight = window.innerHeight - 76 * 2;
+  const maxHeight = window.innerHeight - NAVBAR_HEIGHT * 2;
 
   const [isResizing, setIsResizing] = useState(false);
   const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });