refactore: 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 {}
+}

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

@@ -6,6 +6,7 @@ import { useSnackbar } from 'notistack';
 
 import authResultAtom from '../../recoil/auth';
 import userAtom from '../../recoil/user';
+import { AuthResultAtomType } from 'src/recoil/auth/atom';
 
 function AuthStatusSnackbar() {
   const [{ authSuccess, authError }, setAuthState] = useRecoilState(authResultAtom);
@@ -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/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.jsx

@@ -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(), []);
 
   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}
     >

src/components/footer/ExternalLink.tsx

@@ -0,0 +1,15 @@
+import React, { PropsWithChildren } from 'react';
+
+type Props = {
+  link: string;
+};
+
+function ExternalLink({ children, link }: PropsWithChildren<Props>) {
+  return (
+    <a href={link} target="_blank" rel="noopener noreferrer">
+      {children}
+    </a>
+  );
+}
+
+export default ExternalLink;

src/recoil/auth/atom.js → src/recoil/auth/atom.ts

@@ -2,6 +2,12 @@ import { atom } from 'recoil';
 
 import { AUTH_FORM_STATUS_ATOM_KEY, AUTH_RESULT_ATOM_KEY } from '../../utils/constants/atomKey';
 
+export type AuthResultAtomType = {
+  auth: any;
+  authError: null | string;
+  authSuccess: null | string;
+};
+
 export const authFormStatusAtom = atom({
   key: AUTH_FORM_STATUS_ATOM_KEY,
   default: {
@@ -10,7 +16,7 @@ export const authFormStatusAtom = atom({
   },
 });
 
-const authResultAtom = atom({
+const authResultAtom = atom<AuthResultAtomType>({
   key: AUTH_RESULT_ATOM_KEY,
   default: {
     auth: null,

src/recoil/todos/atom.js → src/recoil/todos/atom.ts

@@ -2,12 +2,24 @@ import { atom } from 'recoil';
 
 import { FILTER_ATOM_KEY, TODOS_RESULT_ATOM_KEY } from '../../utils/constants/atomKey';
 
+type Todo = {
+  _id: string;
+  task: string;
+  isComplete: boolean;
+};
+
+export type TodosResultAtomType = {
+  todos: Todo[];
+  todoError: null | string;
+  todoSuccess: null | string;
+};
+
 export const filterAtom = atom({
   key: FILTER_ATOM_KEY,
   default: 'ALL',
 });
 
-const todosResultAtom = atom({
+const todosResultAtom = atom<TodosResultAtomType>({
   key: TODOS_RESULT_ATOM_KEY,
   default: {
     todos: [],

src/styles/theme.js → src/styles/theme.ts

@@ -20,7 +20,7 @@ export const lightTheme = {
     '#868e96',
     '#495057',
   ],
-};
+} as const;
 
 export const darkTheme = {
   baseTone: '#6A7BA2',
@@ -44,4 +44,4 @@ export const darkTheme = {
     '#495057',
     '#868e96',
   ],
-};
+} as const;