diff --git a/@types/emotion.d.ts b/@types/emotion.d.ts
new file mode 100644
index 0000000..5d189b2
--- /dev/null
+++ b/@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 {}
+}
diff --git a/src/components/common/AuthStatusSnackbar.jsx b/src/components/common/AuthStatusSnackbar.tsx
similarity index 88%
rename from src/components/common/AuthStatusSnackbar.jsx
rename to src/components/common/AuthStatusSnackbar.tsx
index 7532a47..54695a7 100644
--- a/src/components/common/AuthStatusSnackbar.jsx
+++ b/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,
   }));
diff --git a/src/components/common/LoadingSpinner.jsx b/src/components/common/LoadingSpinner.tsx
similarity index 100%
rename from src/components/common/LoadingSpinner.jsx
rename to src/components/common/LoadingSpinner.tsx
diff --git a/src/components/common/TodoStatusSnackbar.jsx b/src/components/common/TodoStatusSnackbar.tsx
similarity index 81%
rename from src/components/common/TodoStatusSnackbar.jsx
rename to src/components/common/TodoStatusSnackbar.tsx
index 3fe50ee..2a796fb 100644
--- a/src/components/common/TodoStatusSnackbar.jsx
+++ b/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,
   }));
diff --git a/src/components/common/ToggleThemeButton.jsx b/src/components/common/ToggleThemeButton.jsx
index dd4e10c..e3e31f0 100644
--- a/src/components/common/ToggleThemeButton.jsx
+++ b/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>
diff --git a/src/components/footer/ExternalLink.jsx b/src/components/footer/ExternalLink.jsx
deleted file mode 100644
index 6fe9084..0000000
--- a/src/components/footer/ExternalLink.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-function ExternalLink({ children, link }) {
-  return (
-    <a href={link} target="_blank" rel="noopener noreferrer">
-      {children}
-    </a>
-  );
-}
-
-export default ExternalLink;
diff --git a/src/components/footer/ExternalLink.test.jsx b/src/components/footer/ExternalLink.test.tsx
similarity index 89%
rename from src/components/footer/ExternalLink.test.jsx
rename to src/components/footer/ExternalLink.test.tsx
index 019ac66..eba3e43 100644
--- a/src/components/footer/ExternalLink.test.jsx
+++ b/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}
     >
diff --git a/src/components/footer/ExternalLink.tsx b/src/components/footer/ExternalLink.tsx
new file mode 100644
index 0000000..912c3a3
--- /dev/null
+++ b/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;
diff --git a/src/components/footer/Footer.test.jsx b/src/components/footer/Footer.test.tsx
similarity index 100%
rename from src/components/footer/Footer.test.jsx
rename to src/components/footer/Footer.test.tsx
diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.tsx
similarity index 100%
rename from src/components/footer/Footer.jsx
rename to src/components/footer/Footer.tsx
diff --git a/src/recoil/auth/atom.js b/src/recoil/auth/atom.ts
similarity index 71%
rename from src/recoil/auth/atom.js
rename to src/recoil/auth/atom.ts
index fda9aa7..3325dc3 100644
--- a/src/recoil/auth/atom.js
+++ b/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,
diff --git a/src/recoil/common/withThemeChange.js b/src/recoil/common/withThemeChange.ts
similarity index 100%
rename from src/recoil/common/withThemeChange.js
rename to src/recoil/common/withThemeChange.ts
diff --git a/src/recoil/todos/atom.js b/src/recoil/todos/atom.ts
similarity index 59%
rename from src/recoil/todos/atom.js
rename to src/recoil/todos/atom.ts
index c5424c9..9579413 100644
--- a/src/recoil/todos/atom.js
+++ b/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: [],
diff --git a/src/styles/theme.js b/src/styles/theme.ts
similarity index 96%
rename from src/styles/theme.js
rename to src/styles/theme.ts
index d3a3499..c3c3e2d 100644
--- a/src/styles/theme.js
+++ b/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;