diff --git a/package-lock.json b/package-lock.json
index 6c48b1fa..6c4e8dba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,11 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "@types/jest": "^29.5.14",
+        "@types/node": "^22.13.5",
+        "@types/react": "^19.0.10",
+        "@types/react-dom": "^19.0.4",
+        "@types/styled-components": "^5.1.34",
         "axios": "^1.7.9",
         "lodash.debounce": "^4.0.8",
         "react": "^18.2.0",
@@ -20,6 +25,11 @@
         "react-scripts": "5.0.1",
         "styled-components": "^6.1.14",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "@types/lodash.debounce": "^4.0.9",
+        "@types/react-js-pagination": "^3.0.7",
+        "typescript": "^4.9.5"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -3805,6 +3815,24 @@
         "node": ">=12"
       }
     },
+    "node_modules/@testing-library/react/node_modules/@types/react": {
+      "version": "18.3.18",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz",
+      "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==",
+      "peer": true,
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@testing-library/react/node_modules/@types/react-dom": {
+      "version": "18.3.5",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.5.tgz",
+      "integrity": "sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==",
+      "peerDependencies": {
+        "@types/react": "^18.0.0"
+      }
+    },
     "node_modules/@testing-library/react/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -4037,6 +4065,15 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.6.tgz",
+      "integrity": "sha512-lPByRJUer/iN/xa4qpyL0qmL11DqNW81iU/IG1S3uvRUq4oKagz8VCxZjiWkumgt66YT3vOdDgZ0o32sGKtCEw==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -4077,9 +4114,9 @@
       }
     },
     "node_modules/@types/jest": {
-      "version": "29.5.4",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.4.tgz",
-      "integrity": "sha512-PhglGmhWeD46FYOVLt3X7TiWjzwuVGW9wG/4qocPevXMjCmrIc5b6db9WjeGE4QYVpUAWMDv3v0IiBwObY289A==",
+      "version": "29.5.14",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.14.tgz",
+      "integrity": "sha512-ZN+4sdnLUbo8EVvVc2ao0GFW6oVrQRPn4K2lglySj7APvSrgzxHiNNK99us4WDMi57xxA2yggblIAMNhXOotLQ==",
       "dependencies": {
         "expect": "^29.0.0",
         "pretty-format": "^29.0.0"
@@ -4322,15 +4359,33 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.15",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.15.tgz",
+      "integrity": "sha512-w/P33JFeySuhN6JLkysYUK2gEmy9kHHFN7E8ro0tkfmlDOgxBDzWEZ/J8cWA+fHqFevpswDTFZnDx+R9lbL6xw==",
+      "dev": true
+    },
+    "node_modules/@types/lodash.debounce": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash.debounce/-/lodash.debounce-4.0.9.tgz",
+      "integrity": "sha512-Ma5JcgTREwpLRwMM+XwBR7DaWe96nC38uCBDFKZWbNKD+osjVzdpnUSwBcqCptrp16sSOLBAUb50Car5I0TCsQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
       "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw=="
     },
     "node_modules/@types/node": {
-      "version": "20.5.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.9.tgz",
-      "integrity": "sha512-PcGNd//40kHAS3sTlzKB9C9XL4K0sTup8nbG5lC14kzEteTNuAFh9u5nA0o5TWnSG2r/JNPRXFVcHJIIeRlmqQ=="
+      "version": "22.13.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.5.tgz",
+      "integrity": "sha512-+lTU0PxZXn0Dr1NBtC7Y8cR21AJr87dLLU953CWA6pMxxv/UDc7jYAY90upcrie1nRcD6XNG5HOYEDtgW5TxAg==",
+      "dependencies": {
+        "undici-types": "~6.20.0"
+      }
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -4343,9 +4398,10 @@
       "integrity": "sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA=="
     },
     "node_modules/@types/prop-types": {
-      "version": "15.7.5",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+      "version": "15.7.14",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
+      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
+      "peer": true
     },
     "node_modules/@types/q": {
       "version": "1.5.6",
@@ -4363,19 +4419,26 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
     "node_modules/@types/react": {
-      "version": "18.2.21",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.21.tgz",
-      "integrity": "sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==",
+      "version": "19.0.10",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.10.tgz",
+      "integrity": "sha512-JuRQ9KXLEjaUNjTWpzuR231Z2WpIwczOkBEIvbHNCzQefFIT0L8IqE6NV6ULLyC1SI/i234JnDoMkfg+RjQj2g==",
       "dependencies": {
-        "@types/prop-types": "*",
-        "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.2.7",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz",
-      "integrity": "sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==",
+      "version": "19.0.4",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.0.4.tgz",
+      "integrity": "sha512-4fSQ8vWFkg+TGhePfUzVmat3eC14TXYSsiiDSLI0dVLsrm9gZFABjPy/Qu6TKgl1tq1Bu1yDsuQgY3A3DOjCcg==",
+      "peerDependencies": {
+        "@types/react": "^19.0.0"
+      }
+    },
+    "node_modules/@types/react-js-pagination": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/react-js-pagination/-/react-js-pagination-3.0.7.tgz",
+      "integrity": "sha512-h16F5eFcVaTO5LTT5jJrvK8SxTlxkuv03ZKt/e6L3GPng/0TZTqhEKEyD8F5XksLeKBalsS1tTN2foJLWv/6mA==",
+      "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -4393,11 +4456,6 @@
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
     },
-    "node_modules/@types/scheduler": {
-      "version": "0.16.3",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
-      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
-    },
     "node_modules/@types/semver": {
       "version": "7.5.1",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.1.tgz",
@@ -4443,6 +4501,16 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
     },
+    "node_modules/@types/styled-components": {
+      "version": "5.1.34",
+      "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.34.tgz",
+      "integrity": "sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA==",
+      "dependencies": {
+        "@types/hoist-non-react-statics": "*",
+        "@types/react": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/@types/stylis": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
@@ -9018,6 +9086,19 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -16869,7 +16950,6 @@
       "version": "4.9.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
       "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -16897,6 +16977,11 @@
       "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz",
       "integrity": "sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw=="
     },
+    "node_modules/undici-types": {
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg=="
+    },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
diff --git a/package.json b/package.json
index 7c5a459a..691455b6 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,11 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.13.5",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@types/styled-components": "^5.1.34",
     "axios": "^1.7.9",
     "lodash.debounce": "^4.0.8",
     "react": "^18.2.0",
@@ -39,5 +44,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/lodash.debounce": "^4.0.9",
+    "@types/react-js-pagination": "^3.0.7",
+    "typescript": "^4.9.5"
   }
 }
diff --git a/src/App.jsx b/src/App.tsx
similarity index 100%
rename from src/App.jsx
rename to src/App.tsx
diff --git a/src/api/comment.js b/src/api/comment.js
deleted file mode 100644
index 609d6110..00000000
--- a/src/api/comment.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import axios from "axios";
-
-const BASE_URL = process.env.REACT_APP_BASE_URL;
-
-export async function getComments(productId) {
-  const response = await axios.get(
-    `${BASE_URL}/products/${productId}/comments?limit=3`
-  );
-
-  return response.data.list;
-}
diff --git a/src/api/comment.tsx b/src/api/comment.tsx
new file mode 100644
index 00000000..b5311cba
--- /dev/null
+++ b/src/api/comment.tsx
@@ -0,0 +1,24 @@
+import api from "./index";
+
+export interface Comment {
+  id: number;
+  content: string;
+  createdAt: string;
+  updatedAt: string;
+  writer: {
+    id: number;
+    image: string | null;
+    nickname: string;
+  };
+}
+
+export async function getComments(
+  productId: string,
+  limit: number = 3
+): Promise<Comment[]> {
+  const response = await api.get(
+    `/products/${productId}/comments?limit=${limit}`
+  );
+
+  return response.data.list;
+}
diff --git a/src/api/index.tsx b/src/api/index.tsx
new file mode 100644
index 00000000..e9ddd6b1
--- /dev/null
+++ b/src/api/index.tsx
@@ -0,0 +1,12 @@
+import axios from "axios";
+
+const BASE_URL = process.env.REACT_APP_BASE_URL;
+
+const api = axios.create({
+  baseURL: BASE_URL,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+export default api;
diff --git a/src/api/products.js b/src/api/products.js
deleted file mode 100644
index 4f9bb5c2..00000000
--- a/src/api/products.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import axios from "axios";
-
-const BASE_URL = process.env.REACT_APP_BASE_URL;
-
-export async function getProducts(params) {
-  const { page, pageSize, orderBy, keyword } = params;
-  const response = await axios.get(`${BASE_URL}/products`, {
-    params: { page, pageSize, orderBy, keyword },
-  });
-
-  return response.data;
-}
-
-export async function getProductInfo(productId) {
-  const response = await axios.get(`${BASE_URL}/products/${productId}`);
-
-  return response.data;
-}
diff --git a/src/api/products.tsx b/src/api/products.tsx
new file mode 100644
index 00000000..42c1f452
--- /dev/null
+++ b/src/api/products.tsx
@@ -0,0 +1,40 @@
+import { AddItem } from "../components/pages/AddItemPage/AddItemPage";
+import api from "./index";
+
+export interface Items {
+  id: string;
+  images: string;
+  name: string;
+  price: number;
+  favoriteCount: number;
+}
+
+interface Params {
+  page: number;
+  pageSize: number;
+  orderBy: string;
+  keyword: string;
+}
+
+export interface DetailItem extends Omit<AddItem, "images"> {
+  images: string | null;
+  favoriteCount: number;
+  createdAt: string;
+  updatedAt: string;
+  ownerNickname: string;
+}
+
+export async function getProducts(params: Params) {
+  const { page, pageSize, orderBy, keyword } = params;
+  const response = await api.get(`/products`, {
+    params: { page, pageSize, orderBy, keyword },
+  });
+
+  return response.data;
+}
+
+export async function getProductInfo(productId: string): Promise<DetailItem> {
+  const response = await api.get(`/products/${productId}`);
+
+  return response.data;
+}
diff --git a/src/components/Comment/Comment.styles.jsx b/src/components/Comment/Comment.styles.tsx
similarity index 100%
rename from src/components/Comment/Comment.styles.jsx
rename to src/components/Comment/Comment.styles.tsx
diff --git a/src/components/Comment/Comment.jsx b/src/components/Comment/Comment.tsx
similarity index 100%
rename from src/components/Comment/Comment.jsx
rename to src/components/Comment/Comment.tsx
diff --git a/src/components/Comment/CommentInput.styles.jsx b/src/components/Comment/CommentInput.styles.tsx
similarity index 100%
rename from src/components/Comment/CommentInput.styles.jsx
rename to src/components/Comment/CommentInput.styles.tsx
diff --git a/src/components/Comment/CommentInput.jsx b/src/components/Comment/CommentInput.tsx
similarity index 82%
rename from src/components/Comment/CommentInput.jsx
rename to src/components/Comment/CommentInput.tsx
index 1b6129ee..e06f07b8 100644
--- a/src/components/Comment/CommentInput.jsx
+++ b/src/components/Comment/CommentInput.tsx
@@ -3,7 +3,7 @@ import * as S from "./CommentInput.styles";
 import { useState } from "react";
 
 export default function CommentInput() {
-  const [comment, setComment] = useState("");
+  const [comment, setComment] = useState<string>("");
 
   return (
     <S.CommentContainer>
@@ -14,7 +14,9 @@ export default function CommentInput() {
         largeHeight="140px"
         isTextarea
         value={comment}
-        onChange={(e) => setComment(e.target.value)}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+          setComment(e.target.value)
+        }
       />
       <S.RegisterBtn>
         <button disabled={!comment.trim()} onClick={() => setComment("")}>
diff --git a/src/components/Comment/CommentList.styles.jsx b/src/components/Comment/CommentList.styles.tsx
similarity index 100%
rename from src/components/Comment/CommentList.styles.jsx
rename to src/components/Comment/CommentList.styles.tsx
diff --git a/src/components/Comment/CommentList.jsx b/src/components/Comment/CommentList.tsx
similarity index 75%
rename from src/components/Comment/CommentList.jsx
rename to src/components/Comment/CommentList.tsx
index a4852c49..572e37c7 100644
--- a/src/components/Comment/CommentList.jsx
+++ b/src/components/Comment/CommentList.tsx
@@ -1,31 +1,34 @@
 import * as S from "./CommentList.styles";
 import dots from "../../assets/icons/dots.svg";
 import { useState, useEffect } from "react";
-import { getComments } from "../../api/comment";
+import { Comment, getComments } from "../../api/comment";
 import { useParams } from "react-router-dom";
 import User from "../User/User";
 import Input from "../common/Input/Input";
 import NoneComment from "../NoneComment/NoneComment";
+import { ProductParams } from "../Detail/Detail";
 
 export default function CommentList() {
-  const [comments, setComments] = useState([]);
-  const [commentId, setCommentId] = useState(null);
-  const [editCommentId, setEditCommentId] = useState(null);
-  const { productId } = useParams();
+  const [comments, setComments] = useState<Comment[]>([]);
+  const [commentId, setCommentId] = useState<number | null>(null);
+  const [editCommentId, setEditCommentId] = useState<number | null>(null);
+  const { productId } = useParams<ProductParams>();
 
   useEffect(() => {
-    getComments(productId)
-      .then((result) => setComments(result))
-      .catch((error) => console.error(error));
-  }, []);
+    if (productId) {
+      getComments(productId)
+        .then((result) => setComments(result))
+        .catch((error) => console.error(error));
+    }
+  }, [productId]);
 
-  function SelectBox({ comment }) {
+  function SelectBox({ id }: { id: number | null }) {
     const options = [
       {
         id: 1,
         option: "수정하기",
         onClick: () => {
-          setEditCommentId(comment.id);
+          setEditCommentId(id);
           setCommentId(null);
         },
       },
@@ -48,7 +51,7 @@ export default function CommentList() {
     );
   }
 
-  const handleOpenClick = (commentId) => {
+  const handleOpenClick = (commentId: number) => {
     setCommentId((prevId) => (prevId === commentId ? null : commentId));
   };
 
@@ -61,7 +64,7 @@ export default function CommentList() {
           {editCommentId === comment.id ? (
             <Input
               placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
-              value={comment.content}
+              defaultValue={comment.content}
               style={{ height: "80px" }}
               isTextarea
             />
@@ -73,7 +76,7 @@ export default function CommentList() {
                   src={dots}
                   onClick={() => handleOpenClick(comment.id)}
                 />
-                {commentId === comment.id && <SelectBox comment={comment} />}
+                {commentId === comment.id && <SelectBox id={comment.id} />}
               </S.Select>
             </S.Content>
           )}
diff --git a/src/components/Detail/Detail.styles.jsx b/src/components/Detail/Detail.styles.tsx
similarity index 98%
rename from src/components/Detail/Detail.styles.jsx
rename to src/components/Detail/Detail.styles.tsx
index 6137f2e5..ac1ba506 100644
--- a/src/components/Detail/Detail.styles.jsx
+++ b/src/components/Detail/Detail.styles.tsx
@@ -48,10 +48,6 @@ export const NoneImageContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-
-  /* @media (max-width: 767px) {
-    min-width: 343px;
-  } */
 `;
 
 export const NoneImage = styled.img`
diff --git a/src/components/Detail/Detail.jsx b/src/components/Detail/Detail.tsx
similarity index 72%
rename from src/components/Detail/Detail.jsx
rename to src/components/Detail/Detail.tsx
index 35efb572..eddbe27c 100644
--- a/src/components/Detail/Detail.jsx
+++ b/src/components/Detail/Detail.tsx
@@ -1,7 +1,7 @@
 import * as S from "./Detail.styles";
 import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
-import { getProductInfo } from "../../api/products";
+import { DetailItem, getProductInfo } from "../../api/products";
 import Tag from "../Tag/Tag";
 import User from "../User/User";
 import emptyHeart from "../../assets/icons/emptyHeart.svg";
@@ -9,27 +9,35 @@ import fullHeart from "../../assets/icons/fullHeart.svg";
 import dots from "../../assets/icons/dots.svg";
 import noneImg from "../../assets/icons/image.svg";
 
+export interface ProductParams extends Record<string, string | undefined> {
+  productId: string;
+}
+
+const INITIAL_VALUE = {
+  name: "",
+  description: "",
+  price: 0,
+  tags: [],
+  images: null,
+  favoriteCount: 0,
+  createdAt: "",
+  updatedAt: "",
+  ownerNickname: "",
+};
+
 export default function Detail() {
-  const [product, setProduct] = useState({
-    name: "",
-    description: "",
-    price: 0,
-    tags: [],
-    images: null,
-    favoriteCount: 0,
-    createdAt: "",
-    updatedAt: "",
-    ownerNickname: "",
-  });
-  const [isFull, setIsFull] = useState(false);
-  const [isImgError, setIsImgError] = useState(false);
-  const { productId } = useParams();
+  const [product, setProduct] = useState<DetailItem>(INITIAL_VALUE);
+  const [isFull, setIsFull] = useState<boolean>(false);
+  const [isImgError, setIsImgError] = useState<boolean>(false);
+  const { productId } = useParams<ProductParams>();
 
   useEffect(() => {
-    getProductInfo(productId)
-      .then((result) => setProduct(result))
-      .catch((error) => console.error(error));
-  }, []);
+    if (productId) {
+      getProductInfo(productId)
+        .then((result) => setProduct(result))
+        .catch((error) => console.error(error));
+    }
+  }, [productId]);
 
   const handleHeartChange = () => {
     setIsFull((prev) => !prev);
@@ -48,7 +56,6 @@ export default function Detail() {
           <S.NoneImage src={noneImg} />
         </S.NoneImageContainer>
       )}
-
       <S.Detail>
         <div>
           <S.Header>
@@ -67,7 +74,7 @@ export default function Detail() {
               <S.Label>상품 태그</S.Label>
               <S.TagWrapper>
                 {product.tags.map((tag) => (
-                  <Tag key={tag} tag={tag} readOnly />
+                  <Tag key={tag} tag={tag} readonly />
                 ))}
               </S.TagWrapper>
             </div>
diff --git a/src/components/FileInput/FileInput.styles.jsx b/src/components/FileInput/FileInput.styles.tsx
similarity index 96%
rename from src/components/FileInput/FileInput.styles.jsx
rename to src/components/FileInput/FileInput.styles.tsx
index 5a3253f8..38306f79 100644
--- a/src/components/FileInput/FileInput.styles.jsx
+++ b/src/components/FileInput/FileInput.styles.tsx
@@ -45,7 +45,7 @@ export const PlusIcon = styled.img`
 `;
 
 export const AddImg = styled.div`
-  font:${theme.font.H5Regular}
+  font: ${theme.font.H5Regular};
   color: ${theme.color.gray400};
 `;
 
@@ -71,5 +71,5 @@ export const DeleteImg = styled.img`
   position: absolute;
   right: 10px;
   top: 10px;
-  cursor: pointer;:
+  cursor: pointer;
 `;
diff --git a/src/components/FileInput/FileInput.jsx b/src/components/FileInput/FileInput.tsx
similarity index 67%
rename from src/components/FileInput/FileInput.jsx
rename to src/components/FileInput/FileInput.tsx
index 5d0f74ad..ad7de115 100644
--- a/src/components/FileInput/FileInput.jsx
+++ b/src/components/FileInput/FileInput.tsx
@@ -1,14 +1,21 @@
 import * as S from "./FileInput.styles";
 import x from "../../assets/icons/delete.svg";
 import plus from "../../assets/icons/plus.svg";
-import { useState, useRef } from "react";
+import { useState, useRef, SetStateAction } from "react";
+import { AddItem } from "../pages/AddItemPage/AddItemPage";
 
-export default function FileInput({ label, images, setValues }) {
-  const [preview, setPreview] = useState(null);
-  const inputRef = useRef();
+interface FileProps {
+  label: string;
+  images: File | null;
+  setValues: React.Dispatch<SetStateAction<AddItem>>;
+}
+
+export default function FileInput({ label, images, setValues }: FileProps) {
+  const [preview, setPreview] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
 
-  const handleImageChange = (e) => {
-    const file = e.target.files[0];
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
 
     if (file) {
       setValues((prevState) => ({
@@ -53,7 +60,7 @@ export default function FileInput({ label, images, setValues }) {
       </S.FileContainer>
       {images && (
         <S.Preview>
-          <S.PreviewImg src={preview} />
+          <S.PreviewImg src={preview ?? undefined} />
           <S.DeleteImg src={x} onClick={handleImageDelete} />
         </S.Preview>
       )}
diff --git a/src/components/Items/AllItems/AllItems.styles.jsx b/src/components/Items/AllItems/AllItems.styles.tsx
similarity index 100%
rename from src/components/Items/AllItems/AllItems.styles.jsx
rename to src/components/Items/AllItems/AllItems.styles.tsx
diff --git a/src/components/Items/AllItems/AllItems.jsx b/src/components/Items/AllItems/AllItems.tsx
similarity index 78%
rename from src/components/Items/AllItems/AllItems.jsx
rename to src/components/Items/AllItems/AllItems.tsx
index 8d684a21..2008b1d6 100644
--- a/src/components/Items/AllItems/AllItems.jsx
+++ b/src/components/Items/AllItems/AllItems.tsx
@@ -5,18 +5,23 @@ import ItemCard from "../ItemCard/ItemCard";
 import Dropdown from "../../common/Dropdown/Dropdown";
 import Search from "../../Search/Search";
 import NoneItem from "../../NoneItem/NoneItem";
-import { getProducts } from "../../../api/products";
+import { getProducts, Items } from "../../../api/products";
 import Paging from "../../Paging/Paging";
 import useResize from "../../../hooks/useResize";
 
 const LIST = ["최신순", "좋아요순"];
 
+export interface AllItem {
+  list: Items[];
+  totalCount: number;
+}
+
 export default function AllItems() {
-  const [items, setItems] = useState([]);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [sortOption, setSortOption] = useState("최신순");
-  const [keyword, setKeyword] = useState("");
-  const [totalItems, setTotalItems] = useState(0);
+  const [items, setItems] = useState<Items[]>([]);
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const [sortOption, setSortOption] = useState<string>("최신순");
+  const [keyword, setKeyword] = useState<string>("");
+  const [totalItems, setTotalItems] = useState<number>(0);
   const { showItems } = useResize(4, 6, 10);
 
   const orderByValue = sortOption === "최신순" ? "recent" : "favorite";
@@ -27,14 +32,14 @@ export default function AllItems() {
       pageSize: showItems,
       orderBy: orderByValue,
       keyword: keyword,
-    }).then((result) => {
+    }).then((result: AllItem) => {
       if (!result) return;
       setItems(result.list);
       setTotalItems(result.totalCount);
     });
   }, [currentPage, showItems, orderByValue, keyword]);
 
-  const handleChangeClick = (sortOption) => {
+  const handleChangeClick = (sortOption: string) => {
     setSortOption(sortOption);
     setCurrentPage(1);
   };
@@ -57,7 +62,7 @@ export default function AllItems() {
             <Dropdown
               sortOption={sortOption}
               list={LIST}
-              onChange={handleChangeClick}
+              onChange={(option: string) => handleChangeClick(option)}
             />
           </S.Filter>
         </S.AllHeader>
diff --git a/src/components/Items/BestItems/BestItems.styles.jsx b/src/components/Items/BestItems/BestItems.styles.tsx
similarity index 100%
rename from src/components/Items/BestItems/BestItems.styles.jsx
rename to src/components/Items/BestItems/BestItems.styles.tsx
diff --git a/src/components/Items/BestItems/BestItems.jsx b/src/components/Items/BestItems/BestItems.tsx
similarity index 80%
rename from src/components/Items/BestItems/BestItems.jsx
rename to src/components/Items/BestItems/BestItems.tsx
index 07977174..fe413ad2 100644
--- a/src/components/Items/BestItems/BestItems.jsx
+++ b/src/components/Items/BestItems/BestItems.tsx
@@ -1,11 +1,15 @@
 import * as S from "./BestItems.styles";
 import { useState, useEffect } from "react";
 import ItemCard from "../ItemCard/ItemCard";
-import { getProducts } from "../../../api/products";
+import { getProducts, Items } from "../../../api/products";
 import useResize from "../../../hooks/useResize";
 
+export interface BestItem {
+  list: Items[];
+}
+
 export default function BestItems() {
-  const [bestItems, setBestItems] = useState([]);
+  const [bestItems, setBestItems] = useState<Items[]>([]);
   const { showItems } = useResize(1, 2, 4);
 
   useEffect(() => {
@@ -14,7 +18,7 @@ export default function BestItems() {
       pageSize: 4,
       orderBy: "favorite",
       keyword: "",
-    }).then((result) => {
+    }).then((result: BestItem) => {
       if (!result) return;
       const sortedBestItems = [...result.list].slice(0, 4);
       setBestItems(sortedBestItems);
diff --git a/src/components/Items/ItemCard/ItemCard.styles.jsx b/src/components/Items/ItemCard/ItemCard.styles.tsx
similarity index 77%
rename from src/components/Items/ItemCard/ItemCard.styles.jsx
rename to src/components/Items/ItemCard/ItemCard.styles.tsx
index 9727553c..5d1ad714 100644
--- a/src/components/Items/ItemCard/ItemCard.styles.jsx
+++ b/src/components/Items/ItemCard/ItemCard.styles.tsx
@@ -1,32 +1,38 @@
 import styled from "styled-components";
 import theme from "../../../styles/theme";
 
+export interface List {
+  list: string;
+}
+
+type ScreenSize = keyof typeof BEST_IMG;
+
 export const BEST_IMG = {
   PC: "282px",
   Tablet: "343px",
-  Moblie: "343px",
-};
+  Mobile: "343px",
+} as const;
 
 export const ALL_IMG = {
   PC: "221px",
   Tablet: "221px",
-  Moblie: "168px",
-};
+  Mobile: "168px",
+} as const;
 
-export const getImgSize = (list, screen) => {
+export const getImgSize = (list: string, screen: ScreenSize) => {
   const item = list === "best" ? BEST_IMG : ALL_IMG;
   return item[screen];
 };
 
-export const ItemImg = styled.img`
+export const ItemImg = styled.img<List>`
   width: ${({ list }) => getImgSize(list, "PC")};
   height: ${({ list }) => getImgSize(list, "PC")};
   border-radius: 16px;
   object-fit: cover;
 
   @media (max-width: 767px) {
-    width: ${({ list }) => getImgSize(list, "Moblie")};
-    height: ${({ list }) => getImgSize(list, "Moblie")};
+    width: ${({ list }) => getImgSize(list, "Mobile")};
+    height: ${({ list }) => getImgSize(list, "Mobile")};
   }
 
   @media (min-width: 768px) and (max-width: 1199px) {
@@ -40,14 +46,15 @@ export const ItemImg = styled.img`
   }
 `;
 
-export const ItemContainer = styled.div`
+export const ItemContainer = styled.div<List>`
   width: ${({ list }) => getImgSize(list, "PC")};
   display: flex;
   flex-direction: column;
   gap: 16px;
+  cursor: pointer;
 
   @media (max-width: 767px) {
-    width: ${({ list }) => getImgSize(list, "Moblie")};
+    width: ${({ list }) => getImgSize(list, "Mobile")};
   }
 
   @media (min-width: 768px) and (max-width: 1199px) {
diff --git a/src/components/Items/ItemCard/ItemCard.jsx b/src/components/Items/ItemCard/ItemCard.tsx
similarity index 89%
rename from src/components/Items/ItemCard/ItemCard.jsx
rename to src/components/Items/ItemCard/ItemCard.tsx
index 33b01380..8089d838 100644
--- a/src/components/Items/ItemCard/ItemCard.jsx
+++ b/src/components/Items/ItemCard/ItemCard.tsx
@@ -4,6 +4,15 @@ import NoneImage from "../../NoneImage/NoneImage";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
+interface Card {
+  list: string;
+  id: string;
+  images: string;
+  name: string;
+  price: number;
+  favoriteCount: number;
+}
+
 export default function ItemCard({
   list = "best",
   id,
@@ -11,7 +20,7 @@ export default function ItemCard({
   name,
   price,
   favoriteCount,
-}) {
+}: Card) {
   const [isImgError, setIsImgError] = useState(false);
   const navigate = useNavigate();
 
diff --git a/src/components/NoneComment/NoneComment.styles.jsx b/src/components/NoneComment/NoneComment.styles.tsx
similarity index 100%
rename from src/components/NoneComment/NoneComment.styles.jsx
rename to src/components/NoneComment/NoneComment.styles.tsx
diff --git a/src/components/NoneComment/NoneComment.jsx b/src/components/NoneComment/NoneComment.tsx
similarity index 100%
rename from src/components/NoneComment/NoneComment.jsx
rename to src/components/NoneComment/NoneComment.tsx
diff --git a/src/components/NoneImage/NoneImage.styles.jsx b/src/components/NoneImage/NoneImage.styles.tsx
similarity index 72%
rename from src/components/NoneImage/NoneImage.styles.jsx
rename to src/components/NoneImage/NoneImage.styles.tsx
index 1ade409d..c8459201 100644
--- a/src/components/NoneImage/NoneImage.styles.jsx
+++ b/src/components/NoneImage/NoneImage.styles.tsx
@@ -1,8 +1,8 @@
 import styled from "styled-components";
-import { getImgSize } from "../Items/ItemCard/ItemCard.styles";
+import { getImgSize, List } from "../Items/ItemCard/ItemCard.styles";
 import theme from "../../styles/theme";
 
-export const NoneImgContainer = styled.div`
+export const NoneImgContainer = styled.div<List>`
   width: ${({ list }) => getImgSize(list, "PC")};
   height: ${({ list }) => getImgSize(list, "PC")};
   border-radius: 16px;
@@ -13,8 +13,8 @@ export const NoneImgContainer = styled.div`
   flex-shrink: 0;
 
   @media (max-width: 767px) {
-    width: ${({ list }) => getImgSize(list, "Moblie")};
-    height: ${({ list }) => getImgSize(list, "Moblie")};
+    width: ${({ list }) => getImgSize(list, "Mobile")};
+    height: ${({ list }) => getImgSize(list, "Mobile")};
   }
 
   @media (min-width: 768px) and (max-width: 1199px) {
diff --git a/src/components/NoneImage/NoneImage.jsx b/src/components/NoneImage/NoneImage.tsx
similarity index 61%
rename from src/components/NoneImage/NoneImage.jsx
rename to src/components/NoneImage/NoneImage.tsx
index 031e7130..5b3b6528 100644
--- a/src/components/NoneImage/NoneImage.jsx
+++ b/src/components/NoneImage/NoneImage.tsx
@@ -1,9 +1,9 @@
 import * as S from "./NoneImage.styles";
 import noneImg from "../../assets/icons/image.svg";
 
-export default function NoneImage({ list, detail }) {
+export default function NoneImage({ list }: { list: string }) {
   return (
-    <S.NoneImgContainer list={list} $detail={detail}>
+    <S.NoneImgContainer list={list}>
       <S.NoneImg src={noneImg} />
     </S.NoneImgContainer>
   );
diff --git a/src/components/NoneItem/NoneItem.styles.jsx b/src/components/NoneItem/NoneItem.styles.tsx
similarity index 100%
rename from src/components/NoneItem/NoneItem.styles.jsx
rename to src/components/NoneItem/NoneItem.styles.tsx
diff --git a/src/components/NoneItem/NoneItem.jsx b/src/components/NoneItem/NoneItem.tsx
similarity index 78%
rename from src/components/NoneItem/NoneItem.jsx
rename to src/components/NoneItem/NoneItem.tsx
index de86223d..c7fd09d0 100644
--- a/src/components/NoneItem/NoneItem.jsx
+++ b/src/components/NoneItem/NoneItem.tsx
@@ -1,6 +1,6 @@
 import * as S from "./NoneItem.styles";
 
-export default function NoneItem({ list }) {
+export default function NoneItem() {
   return (
     <S.NoneItemContainer>
       <S.Text>검색한 상품이 없습니다</S.Text>
diff --git a/src/components/Paging/Paging.styles.jsx b/src/components/Paging/Paging.styles.tsx
similarity index 100%
rename from src/components/Paging/Paging.styles.jsx
rename to src/components/Paging/Paging.styles.tsx
diff --git a/src/components/Paging/Paging.jsx b/src/components/Paging/Paging.tsx
similarity index 66%
rename from src/components/Paging/Paging.jsx
rename to src/components/Paging/Paging.tsx
index 95de4453..266a543d 100644
--- a/src/components/Paging/Paging.jsx
+++ b/src/components/Paging/Paging.tsx
@@ -2,8 +2,21 @@ import * as S from "./Paging.styles";
 import Pagination from "react-js-pagination";
 import { ReactComponent as Left } from "../../assets/icons/arrowLeft.svg";
 import { ReactComponent as Right } from "../../assets/icons/arrowRight.svg";
+import { SetStateAction } from "react";
 
-export default function Paging({ currentPage, pageSize, totalItemsCount, setPage }) {
+interface PagingProps {
+  currentPage: number;
+  pageSize: number;
+  totalItemsCount: number;
+  setPage: React.Dispatch<SetStateAction<number>>;
+}
+
+export default function Paging({
+  currentPage,
+  pageSize,
+  totalItemsCount,
+  setPage,
+}: PagingProps) {
   return (
     <S.PagingContainer>
       <Pagination
diff --git a/src/components/Router.jsx b/src/components/Router.tsx
similarity index 100%
rename from src/components/Router.jsx
rename to src/components/Router.tsx
diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.jsx
deleted file mode 100644
index b6cf58a7..00000000
--- a/src/components/Search/Search.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as S from "./Search.styles";
-import searchImg from "../../assets/icons/search.svg";
-import { useMemo } from "react";
-import { debounce } from "lodash";
-
-export default function Search({ onSearch }) {
-  const debouncedOnSearch = useMemo(() => debounce(onSearch, 500), [onSearch]);
-
-  const handleSearchChange = (e) => {
-    const search = e.target.value;
-    debouncedOnSearch(search);
-  };
-
-  return (
-    <S.SearchContainer>
-      <S.SearchImg src={searchImg} />
-      <S.Input type="text" placeholder="검색할 상품을 입력해주세요" onChange={handleSearchChange} />
-    </S.SearchContainer>
-  );
-}
diff --git a/src/components/Search/Search.styles.jsx b/src/components/Search/Search.styles.tsx
similarity index 100%
rename from src/components/Search/Search.styles.jsx
rename to src/components/Search/Search.styles.tsx
diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx
new file mode 100644
index 00000000..a76a7f23
--- /dev/null
+++ b/src/components/Search/Search.tsx
@@ -0,0 +1,28 @@
+import * as S from "./Search.styles";
+import searchImg from "../../assets/icons/search.svg";
+import { SetStateAction, useMemo } from "react";
+import { debounce } from "lodash";
+
+interface SearchProps {
+  onSearch: React.Dispatch<SetStateAction<string>>;
+}
+
+export default function Search({ onSearch }: SearchProps) {
+  const debouncedOnSearch = useMemo(() => debounce(onSearch, 500), [onSearch]);
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const search = e.target.value;
+    debouncedOnSearch(search);
+  };
+
+  return (
+    <S.SearchContainer>
+      <S.SearchImg src={searchImg} />
+      <S.Input
+        type="text"
+        placeholder="검색할 상품을 입력해주세요"
+        onChange={handleSearchChange}
+      />
+    </S.SearchContainer>
+  );
+}
diff --git a/src/components/Tag/Tag.jsx b/src/components/Tag/Tag.jsx
deleted file mode 100644
index 13902048..00000000
--- a/src/components/Tag/Tag.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as S from "./Tag.styles";
-import x from "../../assets/icons/delete.svg";
-
-export default function Tag({ tag, onClick, readOnly }) {
-  return (
-    <S.TagContainer>
-      <S.Tag>
-        <S.TagName>#{tag}</S.TagName>
-        <S.DeleteTag readOnly src={x} onClick={onClick} />
-      </S.Tag>
-    </S.TagContainer>
-  );
-}
diff --git a/src/components/Tag/Tag.styles.jsx b/src/components/Tag/Tag.styles.tsx
similarity index 74%
rename from src/components/Tag/Tag.styles.jsx
rename to src/components/Tag/Tag.styles.tsx
index 4c3e15c4..f6ae6c92 100644
--- a/src/components/Tag/Tag.styles.jsx
+++ b/src/components/Tag/Tag.styles.tsx
@@ -1,6 +1,10 @@
 import { styled } from "styled-components";
 import theme from "../../styles/theme";
 
+interface Readonly {
+  $readonly?: boolean;
+}
+
 export const TagContainer = styled.li`
   height: 36px;
   background-color: ${theme.color.gray100};
@@ -19,10 +23,10 @@ export const TagName = styled.div`
   color: ${theme.color.gray800};
 `;
 
-export const DeleteTag = styled.img`
+export const DeleteTag = styled.img<Readonly>`
   width: 22px;
   height: 24px;
   cursor: pointer;
 
-  display: ${({ readOnly }) => (readOnly ? "none" : "block")};
+  display: ${({ $readonly }) => ($readonly ? "none" : "block")};
 `;
diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx
new file mode 100644
index 00000000..47634048
--- /dev/null
+++ b/src/components/Tag/Tag.tsx
@@ -0,0 +1,19 @@
+import * as S from "./Tag.styles";
+import x from "../../assets/icons/delete.svg";
+
+interface TagProps {
+  tag: string;
+  onClick?: () => void;
+  readonly?: boolean;
+}
+
+export default function Tag({ tag, onClick, readonly }: TagProps) {
+  return (
+    <S.TagContainer>
+      <S.Tag>
+        <S.TagName>#{tag}</S.TagName>
+        <S.DeleteTag $readonly={readonly} src={x} onClick={onClick} />
+      </S.Tag>
+    </S.TagContainer>
+  );
+}
diff --git a/src/components/User/User.styles.jsx b/src/components/User/User.styles.tsx
similarity index 77%
rename from src/components/User/User.styles.jsx
rename to src/components/User/User.styles.tsx
index 6c4b2edd..d1ca5cc7 100644
--- a/src/components/User/User.styles.jsx
+++ b/src/components/User/User.styles.tsx
@@ -1,14 +1,18 @@
 import styled from "styled-components";
 import theme from "../../styles/theme";
 
-export const User = styled.div`
+interface Detail {
+  $detail: boolean;
+}
+
+export const User = styled.div<Detail>`
   display: flex;
   justify-content: flex-start;
   align-items: center;
   gap: ${({ $detail }) => ($detail ? "16px" : "8px")};
 `;
 
-export const Profile = styled.img`
+export const Profile = styled.img<Detail>`
   width: ${({ $detail }) => ($detail ? "40px" : "32px")};
   height: ${({ $detail }) => ($detail ? "40px" : "32px")};
   border-radius: 100px;
@@ -20,13 +24,13 @@ export const UserInfo = styled.div`
   gap: 4px;
 `;
 
-export const Name = styled.div`
+export const Name = styled.div<Detail>`
   font: ${({ $detail }) =>
     $detail ? `${theme.font.H7Regular}` : `${theme.font.H8}`};
   color: ${theme.color.gray600};
 `;
 
-export const CreatedAt = styled.div`
+export const CreatedAt = styled.div<Detail>`
   font: ${({ $detail }) =>
     $detail ? `${theme.font.H7Regular}` : `${theme.font.H8}`};
   color: ${theme.color.gray400};
diff --git a/src/components/User/User.jsx b/src/components/User/User.tsx
similarity index 78%
rename from src/components/User/User.jsx
rename to src/components/User/User.tsx
index 36822b3a..dcc230da 100644
--- a/src/components/User/User.jsx
+++ b/src/components/User/User.tsx
@@ -1,7 +1,13 @@
 import * as S from "./User.styles";
 import user from "../../assets/icons/user.svg";
 
-export default function User({ owner, createdAt, detail }) {
+interface UserProps {
+  owner: string;
+  createdAt: string;
+  detail: boolean;
+}
+
+export default function User({ owner, createdAt, detail }: UserProps) {
   const date = new Date(createdAt);
   const formattedDate = `${date.getFullYear()}.${String(
     date.getMonth() + 1
diff --git a/src/components/common/Dropdown/Dropdown.styles.jsx b/src/components/common/Dropdown/Dropdown.styles.tsx
similarity index 95%
rename from src/components/common/Dropdown/Dropdown.styles.jsx
rename to src/components/common/Dropdown/Dropdown.styles.tsx
index 4b182382..5ea84a4c 100644
--- a/src/components/common/Dropdown/Dropdown.styles.jsx
+++ b/src/components/common/Dropdown/Dropdown.styles.tsx
@@ -4,6 +4,10 @@ import up from "../../../assets/icons/arrowUp.svg";
 import dropdown from "../../../assets/icons/dropdown.svg";
 import theme from "../../../styles/theme";
 
+interface IsOpen {
+  $isOpen: boolean;
+}
+
 export const DropdownContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -45,7 +49,7 @@ export const PresentValue = styled.div`
   }
 `;
 
-export const Arrow = styled.img`
+export const Arrow = styled.img<IsOpen>`
   width: 24px;
   height: 24px;
   user-select: none;
diff --git a/src/components/common/Dropdown/Dropdown.jsx b/src/components/common/Dropdown/Dropdown.tsx
similarity index 73%
rename from src/components/common/Dropdown/Dropdown.jsx
rename to src/components/common/Dropdown/Dropdown.tsx
index e64aba65..1eab1001 100644
--- a/src/components/common/Dropdown/Dropdown.jsx
+++ b/src/components/common/Dropdown/Dropdown.tsx
@@ -1,8 +1,18 @@
 import * as S from "./Dropdown.styles";
 import { useState } from "react";
 
-export default function Dropdown({ sortOption = "최신순", onChange, list = [] }) {
-  const [isOpen, setIsOpen] = useState(false);
+interface DropDownProps {
+  sortOption: string;
+  onChange: (option: string) => void;
+  list: string[];
+}
+
+export default function Dropdown({
+  sortOption,
+  onChange,
+  list = [],
+}: DropDownProps) {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const handleOpenClick = () => {
     setIsOpen(!isOpen);
diff --git a/src/components/common/Header/Header.styles.jsx b/src/components/common/Header/Header.styles.tsx
similarity index 97%
rename from src/components/common/Header/Header.styles.jsx
rename to src/components/common/Header/Header.styles.tsx
index 8b32092b..163a4ddb 100644
--- a/src/components/common/Header/Header.styles.jsx
+++ b/src/components/common/Header/Header.styles.tsx
@@ -62,7 +62,7 @@ export const NavItems = styled.div`
   line-height: 26px;
   text-align: center;
   padding: 15px 21px;
-  color: ${theme.color.gray00};
+  color: ${theme.color.gray100};
   cursor: pointer;
   @media (max-width: 768px) {
     padding: 15px 0;
diff --git a/src/components/common/Header/Header.jsx b/src/components/common/Header/Header.tsx
similarity index 91%
rename from src/components/common/Header/Header.jsx
rename to src/components/common/Header/Header.tsx
index 55e46589..31122e53 100644
--- a/src/components/common/Header/Header.jsx
+++ b/src/components/common/Header/Header.tsx
@@ -7,7 +7,7 @@ import theme from "../../../styles/theme";
 export default function Header() {
   const location = useLocation().pathname;
 
-  const activeLink = ({ isActive }) => {
+  const activeLink = ({ isActive }: { isActive: boolean }) => {
     const isItemsOrAddItem = isActive || location.startsWith("/addItem");
 
     return {
@@ -20,7 +20,7 @@ export default function Header() {
   const navLink = [
     {
       to: "/freeBoard",
-      style: ({ isActive }) => ({
+      style: ({ isActive }: { isActive: boolean }) => ({
         color: isActive ? `${theme.color.blue}` : `${theme.color.gray600}`,
       }),
       name: "자유게시판",
diff --git a/src/components/common/Input/Input.styles.jsx b/src/components/common/Input/Input.styles.tsx
similarity index 89%
rename from src/components/common/Input/Input.styles.jsx
rename to src/components/common/Input/Input.styles.tsx
index e5de2cf1..035be032 100644
--- a/src/components/common/Input/Input.styles.jsx
+++ b/src/components/common/Input/Input.styles.tsx
@@ -1,6 +1,10 @@
 import styled from "styled-components";
 import theme from "../../../styles/theme";
 
+interface LargeHeight {
+  $largeHeight?: string;
+}
+
 export const InputContainer = styled.div`
   width: 100%;
   height: 100%;
@@ -16,7 +20,7 @@ export const Label = styled.label`
   color: ${theme.color.gray800};
 `;
 
-export const StyledInput = styled.input`
+export const StyledInput = styled.input<LargeHeight>`
   width: 100%;
   height: ${({ height }) => height || "100%"};
   background-color: ${theme.color.gray100};
diff --git a/src/components/common/Input/Input.jsx b/src/components/common/Input/Input.tsx
similarity index 61%
rename from src/components/common/Input/Input.jsx
rename to src/components/common/Input/Input.tsx
index a519e71e..6b95dac0 100644
--- a/src/components/common/Input/Input.jsx
+++ b/src/components/common/Input/Input.tsx
@@ -1,21 +1,28 @@
 import * as S from "./Input.styles";
+import { CSSProperties, InputHTMLAttributes } from "react";
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  style?: CSSProperties;
+  isTextarea?: boolean;
+  height?: string;
+  largeHeight?: string;
+}
 
 export default function Input({
   label,
   style,
   isTextarea,
-  onChange,
   height,
   largeHeight,
   ...rest
-}) {
+}: InputProps) {
   return (
     <S.InputContainer>
       <S.Label>{label}</S.Label>
       <S.StyledInput
         height={height}
         $largeHeight={largeHeight}
-        onChange={onChange}
         style={style}
         {...rest}
         as={isTextarea ? "textarea" : "input"}
diff --git a/src/components/pages/AddItemPage/AddItemPage.styles.jsx b/src/components/pages/AddItemPage/AddItemPage.styles.tsx
similarity index 100%
rename from src/components/pages/AddItemPage/AddItemPage.styles.jsx
rename to src/components/pages/AddItemPage/AddItemPage.styles.tsx
diff --git a/src/components/pages/AddItemPage/AddItemPage.jsx b/src/components/pages/AddItemPage/AddItemPage.tsx
similarity index 81%
rename from src/components/pages/AddItemPage/AddItemPage.jsx
rename to src/components/pages/AddItemPage/AddItemPage.tsx
index f1ddc6a5..62067e58 100644
--- a/src/components/pages/AddItemPage/AddItemPage.jsx
+++ b/src/components/pages/AddItemPage/AddItemPage.tsx
@@ -6,6 +6,14 @@ import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { isValidAddItem } from "../../../utils/addValidate";
 
+export interface AddItem {
+  images: File | null;
+  name: string;
+  description: string;
+  price: number;
+  tags: string[];
+}
+
 const INITIAL_VALUE = {
   images: null,
   name: "",
@@ -16,10 +24,10 @@ const INITIAL_VALUE = {
 
 export default function AddItemPage() {
   const navigate = useNavigate();
-  const [values, setValues] = useState(INITIAL_VALUE);
-  const [tag, setTag] = useState("");
+  const [values, setValues] = useState<AddItem>(INITIAL_VALUE);
+  const [tag, setTag] = useState<string>("");
 
-  const handleInputChange = (e) => {
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
 
     setValues((prevState) => ({
@@ -28,14 +36,14 @@ export default function AddItemPage() {
     }));
   };
 
-  const handleTagChange = (e) => {
+  const handleTagChange = (e: React.KeyboardEvent<HTMLInputElement>) => {
     // IME composition
     if (e.nativeEvent.isComposing) return;
 
-    const eqaulTag = values.tags.some((existing) => existing === tag);
+    const equalTag = values.tags.some((existing) => existing === tag);
     const enterEvent = e.key === "Enter";
 
-    if (!eqaulTag) {
+    if (!equalTag) {
       if (enterEvent && tag.trim() !== "") {
         setValues((prevState) => ({
           ...prevState,
@@ -49,14 +57,14 @@ export default function AddItemPage() {
     }
   };
 
-  const handleTagDelete = (deleteTag) => {
+  const handleTagDelete = (deleteTag: string) => {
     setValues((prevState) => ({
       ...prevState,
       tags: prevState.tags.filter((tag) => tag !== deleteTag),
     }));
   };
 
-  const handleSubmit = (e) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     if (isValidAddItem(values)) {
       e.preventDefault();
       // const formData = new FormData();
@@ -69,7 +77,7 @@ export default function AddItemPage() {
     }
   };
 
-  const handleKeyDown = (e) => {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLFormElement>) => {
     if (e.key === "Enter") {
       e.preventDefault();
     }
@@ -108,7 +116,8 @@ export default function AddItemPage() {
       type: "text",
       placeholder: "태그를 입력해주세요",
       value: tag,
-      onChange: (e) => setTag(e.target.value),
+      onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
+        setTag(e.target.value),
       onKeyDown: handleTagChange,
     },
   ];
@@ -130,9 +139,9 @@ export default function AddItemPage() {
               setValues={setValues}
             />
           </S.AddImg>
-          {INPUT.map((i, idx) => (
+          {INPUT.map((i) => (
             <Input
-              key={idx}
+              key={i.name}
               label={i.label}
               name={i.name}
               type={i.type}
diff --git a/src/components/pages/FreeBoardPage/FreeBoardPage.jsx b/src/components/pages/FreeBoardPage/FreeBoardPage.tsx
similarity index 100%
rename from src/components/pages/FreeBoardPage/FreeBoardPage.jsx
rename to src/components/pages/FreeBoardPage/FreeBoardPage.tsx
diff --git a/src/components/pages/ItemPage/ItemPage.styles.jsx b/src/components/pages/ItemPage/ItemPage.styles.tsx
similarity index 100%
rename from src/components/pages/ItemPage/ItemPage.styles.jsx
rename to src/components/pages/ItemPage/ItemPage.styles.tsx
diff --git a/src/components/pages/ItemPage/ItemPage.jsx b/src/components/pages/ItemPage/ItemPage.tsx
similarity index 100%
rename from src/components/pages/ItemPage/ItemPage.jsx
rename to src/components/pages/ItemPage/ItemPage.tsx
diff --git a/src/components/pages/ProductPage/ProductPage.styles.jsx b/src/components/pages/ProductPage/ProductPage.styles.tsx
similarity index 100%
rename from src/components/pages/ProductPage/ProductPage.styles.jsx
rename to src/components/pages/ProductPage/ProductPage.styles.tsx
diff --git a/src/components/pages/ProductPage/ProductPage.jsx b/src/components/pages/ProductPage/ProductPage.tsx
similarity index 100%
rename from src/components/pages/ProductPage/ProductPage.jsx
rename to src/components/pages/ProductPage/ProductPage.tsx
diff --git a/src/hooks/useResize.js b/src/hooks/useResize.tsx
similarity index 80%
rename from src/hooks/useResize.js
rename to src/hooks/useResize.tsx
index 4bb0f51b..aa9a2059 100644
--- a/src/hooks/useResize.js
+++ b/src/hooks/useResize.tsx
@@ -1,7 +1,11 @@
 import { useState, useEffect, useMemo } from "react";
-import throttle from "lodash.throttle";
+import debounce from "lodash.debounce";
 
-export default function useResize(mobile, tablet, desktop) {
+export default function useResize(
+  mobile: number,
+  tablet: number,
+  desktop: number
+) {
   const [showItems, setShowItems] = useState(desktop);
 
   const updateItemsCount = () => {
@@ -15,7 +19,7 @@ export default function useResize(mobile, tablet, desktop) {
   };
 
   const handleThrottleUpdate = useMemo(
-    () => throttle(updateItemsCount, 500),
+    () => debounce(updateItemsCount, 500),
     []
   );
 
diff --git a/src/index.js b/src/index.tsx
similarity index 71%
rename from src/index.js
rename to src/index.tsx
index d4c777aa..b64fe63e 100644
--- a/src/index.js
+++ b/src/index.tsx
@@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client";
 import App from "./App";
 import GlobalStyle from "./styles/GlobalStyle";
 
-ReactDOM.createRoot(document.getElementById("root")).render(
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <>
     <GlobalStyle />
     <App />
diff --git a/src/styles/GlobalStyle.jsx b/src/styles/GlobalStyle.tsx
similarity index 100%
rename from src/styles/GlobalStyle.jsx
rename to src/styles/GlobalStyle.tsx
diff --git a/src/styles/Layout.jsx b/src/styles/Layout.tsx
similarity index 100%
rename from src/styles/Layout.jsx
rename to src/styles/Layout.tsx
diff --git a/src/styles/theme.jsx b/src/styles/theme.tsx
similarity index 100%
rename from src/styles/theme.jsx
rename to src/styles/theme.tsx
diff --git a/src/types/svg.d.ts b/src/types/svg.d.ts
new file mode 100644
index 00000000..6382d3cd
--- /dev/null
+++ b/src/types/svg.d.ts
@@ -0,0 +1,7 @@
+declare module "*.svg" {
+  import React = require("react");
+
+  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+}
diff --git a/src/utils/addValidate.js b/src/utils/addValidate.js
deleted file mode 100644
index b50e8354..00000000
--- a/src/utils/addValidate.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export const isValidAddItem = (values) => {
-  const isValid = values.name.trim() && values.description.trim() && values.price > 0 && values.tags.length > 0;
-
-  return isValid;
-};
diff --git a/src/utils/addValidate.tsx b/src/utils/addValidate.tsx
new file mode 100644
index 00000000..067d062c
--- /dev/null
+++ b/src/utils/addValidate.tsx
@@ -0,0 +1,11 @@
+import { AddItem } from "../components/pages/AddItemPage/AddItemPage";
+
+export const isValidAddItem = (values: AddItem) => {
+  const isValid =
+    values.name.trim() &&
+    values.description.trim() &&
+    values.price > 0 &&
+    values.tags.length > 0;
+
+  return isValid;
+};
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..c54ebdb0
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}