Merge pull request #93 from saseungmin/refactor/typescript

[WIP] refactor: wip 타입스트립트로 마이그레이션

@types/emotion.d.ts

@@ -0,0 +1,10 @@
+import '@emotion/react';
+
+import { lightTheme } from '../src/styles/theme';
+
+declare module '@emotion/react' {
+  type CustomTheme = typeof lightTheme;
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends CustomTheme {}
+}

@types/svg.d.ts

@@ -0,0 +1,5 @@
+declare module '*.svg' {
+  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+
+  export default content;
+}

fixtures/recoil-atom-state.js → fixtures/recoil-atom-state.ts

@@ -9,7 +9,7 @@ export const authResultState = {
   authSuccess: null,
 };
 
-export const userState = {
+export const userState: { user: null | string; checkError: any } = {
   user: null,
   checkError: null,
 };

package.json

@@ -47,7 +47,7 @@
     "react-toggle": "^4.1.2",
     "react-tooltip": "^4.2.13",
     "react-use": "^17.1.1",
-    "recoil": "^0.3.1",
+    "recoil": "0.7.7",
     "universal-cookie": "^4.0.4"
   },
   "devDependencies": {
@@ -57,7 +57,13 @@
     "@svgr/webpack": "^5.5.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.3",
+    "@types/facepaint": "1.2.5",
     "@types/jest": "^26.0.20",
+    "@types/jest-plugin-context": "2.9.7",
+    "@types/lodash": "4.14.202",
+    "@types/react-dom": "18.2.18",
+    "@types/react-responsive": "8.0.8",
+    "@types/react-toggle": "4.0.5",
     "@typescript-eslint/eslint-plugin": "5.51.0",
     "@typescript-eslint/parser": "5.51.0",
     "babel-jest": "^26.6.3",

src/App.test.jsx → src/App.test.tsx

@@ -20,9 +20,9 @@ import { todoResultState, userState, authState } from '../fixtures/recoil-atom-s
 import App from './App';
 import InjectTestingRecoilState from './components/common/InjectTestingRecoilState';
 
-const mockGetApi = (response) => mockAxios.get.mockResolvedValueOnce(response);
+const mockGetApi = (response: any) => (mockAxios.get as jest.Mock).mockResolvedValueOnce(response);
 
-const mockPostApi = (response) => mockAxios.post.mockResolvedValueOnce(response);
+const mockPostApi = (response: any) => (mockAxios.post as jest.Mock).mockResolvedValueOnce(response);
 
 jest.mock('./services/storage');
 describe('App', () => {
@@ -233,7 +233,7 @@ describe('App', () => {
         response = renderApp({ user: mockUserState });
       });
 
-      expect(response.container).toHaveTextContent('할 일2');
+      expect((response as any).container).toHaveTextContent('할 일2');
     });
 
     describe('when logged in have success status', () => {
@@ -242,7 +242,7 @@ describe('App', () => {
       };
 
       beforeEach(() => {
-        loadItem.mockImplementation(() => user);
+        (loadItem as jest.Mock).mockImplementation(() => user);
       });
 
       it('has the user session value, so the Sign out button is visible.', async () => {
@@ -253,7 +253,7 @@ describe('App', () => {
           response = renderApp({ user: mockUserState });
         });
 
-        expect(response.container).toHaveTextContent('Sign out');
+        expect((response as any).container).toHaveTextContent('Sign out');
       });
     });
 

src/__mocks__/axios.js → src/__mocks__/axios.ts

@@ -1,5 +1,5 @@
 const mockAxios = jest.genMockFromModule('axios');
 
-mockAxios.create.mockReturnThis();
+(mockAxios as any).create.mockReturnThis();
 
 export default mockAxios;

src/components/auth/AuthInput.jsx → src/components/auth/AuthInput.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import styled from '@emotion/styled';
+import { RegisterOptions } from 'react-hook-form';
 import palette from '../../styles/palette';
 
 const AuthInputWrapper = styled.input`
@@ -48,7 +49,12 @@ const authFieldsProperty = {
   },
 };
 
-function AuthInput({ inputRef, inputName }) {
+type Props = {
+  inputRef: any;
+  inputName: 'userId' | 'password' | 'passwordConfirm';
+};
+
+function AuthInput({ inputRef, inputName }: Props) {
   const { inputType, placeholder, autoComplete } = authFieldsProperty[inputName];
 
   return (

src/components/auth/AuthModalForm.test.jsx → src/components/auth/AuthModalForm.test.tsx

@@ -10,6 +10,8 @@ import InjectTestingRecoilState from '../common/InjectTestingRecoilState';
 import AuthModalForm from './AuthModalForm';
 
 describe('AuthModalForm', () => {
+  const handleSubmit = jest.fn();
+
   beforeEach(() => {
     jest.clearAllMocks();
   });
@@ -20,7 +22,7 @@ describe('AuthModalForm', () => {
         <InjectTestingRecoilState
           auth={given.auth}
         />
-        <AuthModalForm />
+        <AuthModalForm onSubmit={handleSubmit} />
       </SnackbarProvider>
     </RecoilRoot>
   ));

src/components/auth/AuthModalForm.jsx → src/components/auth/AuthModalForm.tsx

@@ -7,6 +7,7 @@ import { css } from '@emotion/react';
 
 import { useForm } from 'react-hook-form';
 
+import { AuthForm } from 'src/types/auth';
 import mq from '../../styles/responsive';
 import palette from '../../styles/palette';
 
@@ -17,7 +18,7 @@ import { authFormStatusAtom } from '../../recoil/auth';
 import CloseIcon from '../../assets/icons/close.svg';
 import AuthInput from './AuthInput';
 
-const AuthModalFormWrapper = styled.div`
+const AuthModalFormWrapper = styled.div<{ visible: boolean; }>`
   top: 0;
   left: 0;
   position: fixed;
@@ -98,8 +99,12 @@ const SubmitButton = styled.button`
   }
 `;
 
-function AuthModalForm({ onSubmit }) {
-  const { register, handleSubmit } = useForm();
+type Props = {
+  onSubmit: (form: AuthForm) => void;
+};
+
+function AuthModalForm({ onSubmit }: Props) {
+  const { register, handleSubmit } = useForm<AuthForm>();
 
   const { type, visible } = useRecoilValue(authFormStatusAtom);
 

src/components/auth/AuthStatus.test.jsx → src/components/auth/AuthStatus.test.tsx

@@ -56,8 +56,8 @@ describe('AuthStatus', () => {
         ];
 
         it('when sign up is successful, renders Sign in modal', async () => {
-          mockAxios.post.mockResolvedValueOnce({ data: { access_token: mockToken } });
-          mockAxios.get.mockRejectedValueOnce({ response: { status: 403 } });
+          (mockAxios.post as jest.Mock).mockResolvedValueOnce({ data: { access_token: mockToken } });
+          (mockAxios.get as jest.Mock).mockRejectedValueOnce({ response: { status: 403 } });
 
           const { container } = renderAuthStatus();
 
@@ -94,8 +94,8 @@ describe('AuthStatus', () => {
         ];
 
         it('when login is successful, renders success message', async () => {
-          mockAxios.post.mockResolvedValueOnce({ data: { access_token: mockToken } });
-          mockAxios.get.mockRejectedValueOnce({ response: { status: 403 } });
+          (mockAxios.post as jest.Mock).mockResolvedValueOnce({ data: { access_token: mockToken } });
+          (mockAxios.get as jest.Mock).mockRejectedValueOnce({ response: { status: 403 } });
 
           const { container } = renderAuthStatus();
 

src/components/auth/LoginForm.test.jsx → src/components/auth/LoginForm.test.tsx

@@ -58,8 +58,8 @@ describe('LoginForm', () => {
           },
         };
 
-        mockAxios.post.mockRejectedValueOnce(mockData);
-        mockAxios.get.mockResolvedValueOnce(mockData);
+        (mockAxios.post as jest.Mock).mockRejectedValueOnce(mockData);
+        (mockAxios.get as jest.Mock).mockResolvedValueOnce(mockData);
 
         const { container } = renderLoginForm();
 

src/components/auth/LoginForm.jsx → src/components/auth/LoginForm.tsx

@@ -2,8 +2,9 @@ import React, { useEffect } from 'react';
 
 import { useResetRecoilState, useRecoilValue } from 'recoil';
 
-import { useSnackbar } from 'notistack';
+import { VariantType, useSnackbar } from 'notistack';
 
+import { AuthForm } from 'src/types/auth';
 import { isCheckValidate } from '../../utils/utils';
 import { FORM_TYPE } from '../../utils/constants/constants';
 import { EMPTY_AUTH_INPUT } from '../../utils/constants/messages';
@@ -27,11 +28,14 @@ function LoginForm() {
 
   const resetAuthFormState = useResetRecoilState(authFormStatusAtom);
 
-  const snackbar = (variant) => (message) => enqueueSnackbar(message, { variant });
+  const snackbar = (
+    variant: VariantType,
+  ) => (message: string) => enqueueSnackbar(message, { variant });
+
   const errorSnackbar = snackbar('error');
   const successSnackbar = snackbar('success');
 
-  const onSubmit = (formData) => {
+  const onSubmit = (formData: AuthForm) => {
     if (!isCheckValidate(formData)) {
       errorSnackbar(EMPTY_AUTH_INPUT);
 

src/components/auth/RegisterForm.test.jsx → src/components/auth/RegisterForm.test.tsx

@@ -76,7 +76,7 @@ describe('RegisterForm', () => {
           },
         };
 
-        mockAxios.post.mockRejectedValueOnce(mockData);
+        (mockAxios.post as jest.Mock).mockRejectedValueOnce(mockData);
 
         renderRegisterForm();
 

src/components/auth/RegisterForm.jsx → src/components/auth/RegisterForm.tsx

@@ -4,6 +4,7 @@ import { useSetRecoilState, useRecoilValue } from 'recoil';
 
 import { useSnackbar } from 'notistack';
 
+import { AuthForm } from 'src/types/auth';
 import authResultAtom, { authFormStatusAtom, authWithRegister } from '../../recoil/auth';
 
 import useAuthCallback from '../../hooks/useAuthCallback';
@@ -22,11 +23,11 @@ function RegisterForm() {
   const setLoginVisible = useSetRecoilState(authFormStatusAtom);
   const { authSuccess } = useRecoilValue(authResultAtom);
 
-  const errorSnackbar = (message) => enqueueSnackbar(message, {
+  const errorSnackbar = (message: string) => enqueueSnackbar(message, {
     variant: 'error',
   });
 
-  const onSubmit = (formData) => {
+  const onSubmit = (formData: AuthForm) => {
     if (!isCheckValidate(formData)) {
       errorSnackbar(EMPTY_AUTH_INPUT);
 

src/components/common/AuthStatusSnackbar.test.jsx → src/components/common/AuthStatusSnackbar.test.tsx

@@ -12,7 +12,7 @@ import AuthStatusSnackbar from './AuthStatusSnackbar';
 import InjectTestingRecoilState from './InjectTestingRecoilState';
 
 describe('AuthStatusSnackbar', () => {
-  const renderAuthStatusSnackbar = (state) => render((
+  const renderAuthStatusSnackbar = (state?: any) => render((
     <RecoilRoot>
       <InjectTestingRecoilState
         user={given.user}
@@ -24,7 +24,7 @@ describe('AuthStatusSnackbar', () => {
     </RecoilRoot>
   ));
 
-  const setAuthState = (state) => ({
+  const setAuthState = (state: any) => ({
     ...authResultState,
     ...state,
   });

src/components/common/AuthStatusSnackbar.jsx → src/components/common/AuthStatusSnackbar.tsx

@@ -4,6 +4,7 @@ import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil';
 
 import { useSnackbar } from 'notistack';
 
+import { AuthResultAtomType } from 'src/recoil/auth/atom';
 import authResultAtom from '../../recoil/auth';
 import userAtom from '../../recoil/user';
 
@@ -14,7 +15,7 @@ function AuthStatusSnackbar() {
 
   const { enqueueSnackbar } = useSnackbar();
 
-  const resetState = (state) => setAuthState((prevState) => ({
+  const resetState = (state: Partial<AuthResultAtomType>) => setAuthState((prevState) => ({
     ...prevState,
     ...state,
   }));

src/components/common/InjectTestingRecoilState.jsx → src/components/common/InjectTestingRecoilState.tsx

@@ -29,10 +29,10 @@ function InjectTestingRecoilState({
   const setThemeState = useSetRecoilState(themeModeAtom);
 
   useEffect(() => {
-    setUserState(user);
-    setAuthState(auth);
+    setUserState(user as any);
+    setAuthState(auth as any);
     setTodosState(todos);
-    setFilterState(filter);
+    setFilterState(filter as any);
     setAuthResultState(authResult);
     setLoadingState(isLoading);
     setThemeState(theme);

src/components/common/TodoStatusSnackbar.test.jsx → src/components/common/TodoStatusSnackbar.test.tsx

@@ -12,7 +12,7 @@ import TodoStatusSnackbar from './TodoStatusSnackbar';
 import InjectTestingRecoilState from './InjectTestingRecoilState';
 
 describe('TodoStatusSnackbar', () => {
-  const renderTodoStatusSnackbar = (state) => render((
+  const renderTodoStatusSnackbar = (state: any) => render((
     <RecoilRoot>
       <InjectTestingRecoilState
         todos={state}
@@ -23,7 +23,7 @@ describe('TodoStatusSnackbar', () => {
     </RecoilRoot>
   ));
 
-  const setTodoState = (state) => ({
+  const setTodoState = (state: any) => ({
     ...todoResultState,
     ...state,
   });

src/components/common/TodoStatusSnackbar.jsx → src/components/common/TodoStatusSnackbar.tsx

@@ -4,14 +4,14 @@ import { useRecoilState } from 'recoil';
 
 import { useSnackbar } from 'notistack';
 
-import todosResultAtom from '../../recoil/todos/atom';
+import todosResultAtom, { TodosResultAtomType } from '../../recoil/todos/atom';
 
 function TodoStatusSnackbar() {
   const [{ todoError, todoSuccess }, setTodoState] = useRecoilState(todosResultAtom);
 
   const { enqueueSnackbar } = useSnackbar();
 
-  const resetState = (state) => setTodoState((prevState) => ({
+  const resetState = (state: Partial<TodosResultAtomType>) => setTodoState((prevState) => ({
     ...prevState,
     ...state,
   }));

src/components/common/ToggleThemeButton.test.jsx → src/components/common/ToggleThemeButton.test.tsx

@@ -8,7 +8,7 @@ import ToggleThemeButton from './ToggleThemeButton';
 import InjectTestingRecoilState from './InjectTestingRecoilState';
 
 describe('ToggleThemeButton', () => {
-  const renderToggleThemeButton = (theme) => render((
+  const renderToggleThemeButton = (theme: boolean) => render((
     <RecoilRoot>
       <InjectTestingRecoilState
         theme={theme}

src/components/common/ToggleThemeButton.jsx → src/components/common/ToggleThemeButton.tsx

@@ -15,13 +15,13 @@ const ThemeButtonWrapper = styled.div`
   })};
 
   display: flex;
-  justify-content: flex-end;  
+  justify-content: flex-end;
 `;
 
 function ToggleThemeButton() {
   const [theme, setTheme] = useRecoilState(themeWithChange);
 
-  const handleToggle = useCallback(() => setTheme(), [setTheme]);
+  const handleToggle = useCallback(() => setTheme(!theme), [theme]);
 
   return (
     <ThemeButtonWrapper>

src/components/footer/ExternalLink.test.jsx → src/components/footer/ExternalLink.test.tsx

@@ -5,7 +5,7 @@ import { render } from '@testing-library/react';
 import ExternalLink from './ExternalLink';
 
 describe('Link', () => {
-  const renderLink = (url) => render((
+  const renderLink = (url: string) => render((
     <ExternalLink
       link={url}
     >