From a6078af74c3eebb1676a34f7b9a4dbdcdce27b00 Mon Sep 17 00:00:00 2001
From: heejin <heejin0857@naver.com>
Date: Mon, 24 Feb 2025 03:46:34 +0900
Subject: [PATCH 01/20] Refactor : add useEffect dependency array

---
 src/components/Detail/Detail.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Detail/Detail.jsx b/src/components/Detail/Detail.jsx
index 35efb572..b8825c2a 100644
--- a/src/components/Detail/Detail.jsx
+++ b/src/components/Detail/Detail.jsx
@@ -29,7 +29,7 @@ export default function Detail() {
     getProductInfo(productId)
       .then((result) => setProduct(result))
       .catch((error) => console.error(error));
-  }, []);
+  }, [productId]);
 
   const handleHeartChange = () => {
     setIsFull((prev) => !prev);

From bc52a216291fad9a6d9d64f6cec1f88a31bb9ad2 Mon Sep 17 00:00:00 2001
From: heejin <heejin0857@naver.com>
Date: Mon, 24 Feb 2025 03:51:20 +0900
Subject: [PATCH 02/20] Refactor : axios instance

---
 src/api/comment.js  | 10 ++++------
 src/api/index.js    | 12 ++++++++++++
 src/api/products.js |  8 +++-----
 3 files changed, 19 insertions(+), 11 deletions(-)
 create mode 100644 src/api/index.js

diff --git a/src/api/comment.js b/src/api/comment.js
index 609d6110..adfdaab1 100644
--- a/src/api/comment.js
+++ b/src/api/comment.js
@@ -1,10 +1,8 @@
-import axios from "axios";
+import api from "./index";
 
-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`
+export async function getComments(productId, limit = 3) {
+  const response = await api.get(
+    `/products/${productId}/comments?limit=${limit}`
   );
 
   return response.data.list;
diff --git a/src/api/index.js b/src/api/index.js
new file mode 100644
index 00000000..e9ddd6b1
--- /dev/null
+++ b/src/api/index.js
@@ -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
index 4f9bb5c2..294559de 100644
--- a/src/api/products.js
+++ b/src/api/products.js
@@ -1,10 +1,8 @@
-import axios from "axios";
-
-const BASE_URL = process.env.REACT_APP_BASE_URL;
+import api from "./index";
 
 export async function getProducts(params) {
   const { page, pageSize, orderBy, keyword } = params;
-  const response = await axios.get(`${BASE_URL}/products`, {
+  const response = await api.get(`/products`, {
     params: { page, pageSize, orderBy, keyword },
   });
 
@@ -12,7 +10,7 @@ export async function getProducts(params) {
 }
 
 export async function getProductInfo(productId) {
-  const response = await axios.get(`${BASE_URL}/products/${productId}`);
+  const response = await api.get(`/products/${productId}`);
 
   return response.data;
 }

From 1bfc74548c193fce5141935e02faa18aaf140ffd Mon Sep 17 00:00:00 2001
From: heejin <heejin0857@naver.com>
Date: Tue, 25 Feb 2025 04:25:46 +0900
Subject: [PATCH 03/20] Feat : add item page type

---
 package-lock.json                             | 82 ++++++++++++-------
 package.json                                  |  5 ++
 ...Page.styles.jsx => AddItemPage.styles.tsx} |  0
 .../{AddItemPage.jsx => AddItemPage.tsx}      | 29 ++++---
 tsconfig.json                                 | 19 +++++
 5 files changed, 96 insertions(+), 39 deletions(-)
 rename src/components/pages/AddItemPage/{AddItemPage.styles.jsx => AddItemPage.styles.tsx} (100%)
 rename src/components/pages/AddItemPage/{AddItemPage.jsx => AddItemPage.tsx} (83%)
 create mode 100644 tsconfig.json

diff --git a/package-lock.json b/package-lock.json
index 6c48b1fa..99b29892 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,10 @@
         "@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",
         "axios": "^1.7.9",
         "lodash.debounce": "^4.0.8",
         "react": "^18.2.0",
@@ -19,6 +23,7 @@
         "react-router-dom": "^6.28.1",
         "react-scripts": "5.0.1",
         "styled-components": "^6.1.14",
+        "typescript": "^5.7.3",
         "web-vitals": "^2.1.4"
       }
     },
@@ -3805,6 +3810,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",
@@ -4077,9 +4100,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"
@@ -4328,9 +4351,12 @@
       "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 +4369,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,21 +4390,19 @@
       "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==",
-      "dependencies": {
-        "@types/react": "*"
+      "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/resolve": {
@@ -4393,11 +4418,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",
@@ -16866,16 +16886,15 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
-      "peer": true,
+      "version": "5.7.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
+      "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=4.2.0"
+        "node": ">=14.17"
       }
     },
     "node_modules/unbox-primitive": {
@@ -16897,6 +16916,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..2cf1d248 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,10 @@
     "@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",
     "axios": "^1.7.9",
     "lodash.debounce": "^4.0.8",
     "react": "^18.2.0",
@@ -14,6 +18,7 @@
     "react-router-dom": "^6.28.1",
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.14",
+    "typescript": "^5.7.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
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 83%
rename from src/components/pages/AddItemPage/AddItemPage.jsx
rename to src/components/pages/AddItemPage/AddItemPage.tsx
index f1ddc6a5..176449b1 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";
 
+interface AddItem {
+  images: string | 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,7 +36,7 @@ export default function AddItemPage() {
     }));
   };
 
-  const handleTagChange = (e) => {
+  const handleTagChange = (e: React.KeyboardEvent<HTMLInputElement>) => {
     // IME composition
     if (e.nativeEvent.isComposing) return;
 
@@ -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/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"]
+}

From 5aeb67bd012f65b0bb381406f8f5538bbd89c0e8 Mon Sep 17 00:00:00 2001
From: heejin <heejin0857@naver.com>
Date: Tue, 25 Feb 2025 04:26:14 +0900
Subject: [PATCH 04/20] Feat : input common component type

---
 .../Input/{Input.styles.jsx => Input.styles.tsx}   |  6 +++++-
 .../common/Input/{Input.jsx => Input.tsx}          | 14 +++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)
 rename src/components/common/Input/{Input.styles.jsx => Input.styles.tsx} (89%)
 rename src/components/common/Input/{Input.jsx => Input.tsx} (59%)

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 59%
rename from src/components/common/Input/Input.jsx
rename to src/components/common/Input/Input.tsx
index a519e71e..d9f2add6 100644
--- a/src/components/common/Input/Input.jsx
+++ b/src/components/common/Input/Input.tsx
@@ -1,21 +1,29 @@
 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;
+  $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"}

From 03cae437736e9f2f11a4ebcbdc2c188968631b47 Mon Sep 17 00:00:00 2001
From: heejin <heejin0857@naver.com>
Date: Tue, 25 Feb 2025 04:30:35 +0900
Subject: [PATCH 05/20] Feat : tag component type & svg.d.ts

---
 src/components/Tag/Tag.jsx                    | 13 -------------
 .../Tag/{Tag.styles.jsx => Tag.styles.tsx}    |  8 ++++++--
 src/components/Tag/Tag.tsx                    | 19 +++++++++++++++++++
 src/types/svg.d.ts                            |  4 ++++
 4 files changed, 29 insertions(+), 15 deletions(-)
 delete mode 100644 src/components/Tag/Tag.jsx
 rename src/components/Tag/{Tag.styles.jsx => Tag.styles.tsx} (75%)
 create mode 100644 src/components/Tag/Tag.tsx
 create mode 100644 src/types/svg.d.ts

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 75%
rename from src/components/Tag/Tag.styles.jsx
rename to src/components/Tag/Tag.styles.tsx
index 4c3e15c4..51c06a07 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..628a0de2
--- /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/types/svg.d.ts b/src/types/svg.d.ts
new file mode 100644
index 00000000..5e52f805
--- /dev/null
+++ b/src/types/svg.d.ts
@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}

From e91dbc4e19efe229294aea05254eb4e6ae2de342 Mon Sep 17 00:00:00 2001
From: heejin <heejin0857@naver.com>
Date: Tue, 25 Feb 2025 18:40:15 +0900
Subject: [PATCH 06/20] Feat : dropdown type

---
 .../{Dropdown.styles.jsx => Dropdown.styles.tsx}   |  6 +++++-
 .../common/Dropdown/{Dropdown.jsx => Dropdown.tsx} | 14 ++++++++++++--
 src/components/common/Input/Input.tsx              |  1 -
 3 files changed, 17 insertions(+), 4 deletions(-)
 rename src/components/common/Dropdown/{Dropdown.styles.jsx => Dropdown.styles.tsx} (95%)
 rename src/components/common/Dropdown/{Dropdown.jsx => Dropdown.tsx} (73%)

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/Input/Input.tsx b/src/components/common/Input/Input.tsx
index d9f2add6..9d00fd2e 100644
--- a/src/components/common/Input/Input.tsx
+++ b/src/components/common/Input/Input.tsx
@@ -7,7 +7,6 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   isTextarea?: boolean;
   height?: string;
   largeHeight?: string;
-  $largeHeight?: string;
 }
 
 export default function Input({

From ed3d1696f1fa45af4aee04c67ae71c064b35102f Mon Sep 17 00:00:00 2001
From: heejin <heejin0857@naver.com>
Date: Tue, 25 Feb 2025 18:40:45 +0900
Subject: [PATCH 07/20] Feat : all items component type

---
 ...llItems.styles.jsx => AllItems.styles.tsx} |  0
 .../AllItems/{AllItems.jsx => AllItems.tsx}   | 23 +++++++++++--------
 ...oneItem.styles.jsx => NoneItem.styles.tsx} |  0
 .../NoneItem/{NoneItem.jsx => NoneItem.tsx}   |  2 +-
 4 files changed, 15 insertions(+), 10 deletions(-)
 rename src/components/Items/AllItems/{AllItems.styles.jsx => AllItems.styles.tsx} (100%)
 rename src/components/Items/AllItems/{AllItems.jsx => AllItems.tsx} (78%)
 rename src/components/NoneItem/{NoneItem.styles.jsx => NoneItem.styles.tsx} (100%)
 rename src/components/NoneItem/{NoneItem.jsx => NoneItem.tsx} (78%)

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..7d1775c2 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 AddItem {
+  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: AddItem) => {
       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/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>

From a2378ccbdc93aa49ac00e9e4ded87dbbd64e62a0 Mon Sep 17 00:00:00 2001
From: heejin <heejin0857@naver.com>
Date: Tue, 25 Feb 2025 18:41:17 +0900
Subject: [PATCH 08/20] Feat : best item component type

---
 .../{BestItems.styles.jsx => BestItems.styles.tsx}     |  0
 .../Items/BestItems/{BestItems.jsx => BestItems.tsx}   | 10 +++++++---
 .../{ItemPage.styles.jsx => ItemPage.styles.tsx}       |  0
 .../pages/ItemPage/{ItemPage.jsx => ItemPage.tsx}      |  0
 4 files changed, 7 insertions(+), 3 deletions(-)
 rename src/components/Items/BestItems/{BestItems.styles.jsx => BestItems.styles.tsx} (100%)
 rename src/components/Items/BestItems/{BestItems.jsx => BestItems.tsx} (80%)
 rename src/components/pages/ItemPage/{ItemPage.styles.jsx => ItemPage.styles.tsx} (100%)
 rename src/components/pages/ItemPage/{ItemPage.jsx => ItemPage.tsx} (100%)

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/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

From f509000fd11cc7eb09cf5fa5f3aaa82c5deb996a Mon Sep 17 00:00:00 2001
From: heejin <heejin0857@naver.com>
Date: Tue, 25 Feb 2025 18:44:12 +0900
Subject: [PATCH 09/20] Feat : header type

---
 .../common/Header/{Header.styles.jsx => Header.styles.tsx}    | 2 +-
 src/components/common/Header/{Header.jsx => Header.tsx}       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename src/components/common/Header/{Header.styles.jsx => Header.styles.tsx} (97%)
 rename src/components/common/Header/{Header.jsx => Header.tsx} (91%)

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: "자유게시판",

From f6bf6a40cf4671b89b343330b81384d44ccfb597 Mon Sep 17 00:00:00 2001
From: heejin <heejin0857@naver.com>
Date: Tue, 25 Feb 2025 18:54:10 +0900
Subject: [PATCH 10/20] Feat : apply type

---
 package-lock.json                             | 28 +++++++++++++++----
 package.json                                  |  5 +++-
 src/{App.jsx => App.tsx}                      |  0
 src/components/{Router.jsx => Router.tsx}     |  0
 src/hooks/{useResize.js => useResize.tsx}     | 10 +++++--
 src/{index.js => index.tsx}                   |  2 +-
 .../{GlobalStyle.jsx => GlobalStyle.tsx}      |  0
 src/styles/{Layout.jsx => Layout.tsx}         |  0
 src/styles/{theme.jsx => theme.tsx}           |  0
 9 files changed, 35 insertions(+), 10 deletions(-)
 rename src/{App.jsx => App.tsx} (100%)
 rename src/components/{Router.jsx => Router.tsx} (100%)
 rename src/hooks/{useResize.js => useResize.tsx} (80%)
 rename src/{index.js => index.tsx} (71%)
 rename src/styles/{GlobalStyle.jsx => GlobalStyle.tsx} (100%)
 rename src/styles/{Layout.jsx => Layout.tsx} (100%)
 rename src/styles/{theme.jsx => theme.tsx} (100%)

diff --git a/package-lock.json b/package-lock.json
index 99b29892..46e192e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,8 +23,11 @@
         "react-router-dom": "^6.28.1",
         "react-scripts": "5.0.1",
         "styled-components": "^6.1.14",
-        "typescript": "^5.7.3",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "@types/lodash.debounce": "^4.0.9",
+        "typescript": "^4.9.5"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -4345,6 +4348,21 @@
       "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",
@@ -16886,15 +16904,15 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.7.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
-      "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=14.17"
+        "node": ">=4.2.0"
       }
     },
     "node_modules/unbox-primitive": {
diff --git a/package.json b/package.json
index 2cf1d248..2fec4dd9 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,6 @@
     "react-router-dom": "^6.28.1",
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.14",
-    "typescript": "^5.7.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -44,5 +43,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/lodash.debounce": "^4.0.9",
+    "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/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/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

From 1461f32578e68db79b18da364559ae6bd4de7606 Mon Sep 17 00:00:00 2001
From: heejin <heejin0857@naver.com>
Date: Tue, 25 Feb 2025 19:53:34 +0900
Subject: [PATCH 11/20] Feat : item card component type

---
 src/components/Items/AllItems/AllItems.tsx    |  4 +--
 ...temCard.styles.jsx => ItemCard.styles.tsx} | 26 ++++++++++++-------
 .../ItemCard/{ItemCard.jsx => ItemCard.tsx}   | 11 +++++++-
 ...eImage.styles.jsx => NoneImage.styles.tsx} |  8 +++---
 .../{NoneImage.jsx => NoneImage.tsx}          |  4 +--
 .../pages/AddItemPage/AddItemPage.tsx         |  6 ++---
 6 files changed, 37 insertions(+), 22 deletions(-)
 rename src/components/Items/ItemCard/{ItemCard.styles.jsx => ItemCard.styles.tsx} (78%)
 rename src/components/Items/ItemCard/{ItemCard.jsx => ItemCard.tsx} (89%)
 rename src/components/NoneImage/{NoneImage.styles.jsx => NoneImage.styles.tsx} (72%)
 rename src/components/NoneImage/{NoneImage.jsx => NoneImage.tsx} (61%)

diff --git a/src/components/Items/AllItems/AllItems.tsx b/src/components/Items/AllItems/AllItems.tsx
index 7d1775c2..2008b1d6 100644
--- a/src/components/Items/AllItems/AllItems.tsx
+++ b/src/components/Items/AllItems/AllItems.tsx
@@ -11,7 +11,7 @@ import useResize from "../../../hooks/useResize";
 
 const LIST = ["최신순", "좋아요순"];
 
-export interface AddItem {
+export interface AllItem {
   list: Items[];
   totalCount: number;
 }
@@ -32,7 +32,7 @@ export default function AllItems() {
       pageSize: showItems,
       orderBy: orderByValue,
       keyword: keyword,
-    }).then((result: AddItem) => {
+    }).then((result: AllItem) => {
       if (!result) return;
       setItems(result.list);
       setTotalItems(result.totalCount);
diff --git a/src/components/Items/ItemCard/ItemCard.styles.jsx b/src/components/Items/ItemCard/ItemCard.styles.tsx
similarity index 78%
rename from src/components/Items/ItemCard/ItemCard.styles.jsx
rename to src/components/Items/ItemCard/ItemCard.styles.tsx
index 9727553c..bd094831 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,14 @@ 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;
 
   @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/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/pages/AddItemPage/AddItemPage.tsx b/src/components/pages/AddItemPage/AddItemPage.tsx
index 176449b1..3a75db96 100644
--- a/src/components/pages/AddItemPage/AddItemPage.tsx
+++ b/src/components/pages/AddItemPage/AddItemPage.tsx
@@ -6,7 +6,7 @@ import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { isValidAddItem } from "../../../utils/addValidate";
 
-interface AddItem {
+export interface AddItem {
   images: string | null;
   name: string;
   description: string;
@@ -40,10 +40,10 @@ export default function AddItemPage() {
     // 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,

From 7c820a5bcc86d956201725afa82b6911ad2ff7ed Mon Sep 17 00:00:00 2001
From: heejin <heejin0857@naver.com>
Date: Tue, 25 Feb 2025 20:16:24 +0900
Subject: [PATCH 12/20] Feat : detail component type

---
 .../{Detail.styles.jsx => Detail.styles.tsx}  |  4 ---
 .../Detail/{Detail.jsx => Detail.tsx}         | 31 +++++++++++++------
 src/components/Tag/Tag.styles.tsx             |  4 +--
 src/components/Tag/Tag.tsx                    |  4 +--
 .../User/{User.styles.jsx => User.styles.tsx} | 12 ++++---
 src/components/User/{User.jsx => User.tsx}    |  8 ++++-
 ...Page.styles.jsx => ProductPage.styles.tsx} |  0
 .../{ProductPage.jsx => ProductPage.tsx}      |  0
 8 files changed, 41 insertions(+), 22 deletions(-)
 rename src/components/Detail/{Detail.styles.jsx => Detail.styles.tsx} (98%)
 rename src/components/Detail/{Detail.jsx => Detail.tsx} (76%)
 rename src/components/User/{User.styles.jsx => User.styles.tsx} (77%)
 rename src/components/User/{User.jsx => User.tsx} (78%)
 rename src/components/pages/ProductPage/{ProductPage.styles.jsx => ProductPage.styles.tsx} (100%)
 rename src/components/pages/ProductPage/{ProductPage.jsx => ProductPage.tsx} (100%)

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 76%
rename from src/components/Detail/Detail.jsx
rename to src/components/Detail/Detail.tsx
index b8825c2a..405942f1 100644
--- a/src/components/Detail/Detail.jsx
+++ b/src/components/Detail/Detail.tsx
@@ -2,6 +2,7 @@ import * as S from "./Detail.styles";
 import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
 import { getProductInfo } from "../../api/products";
+import { AddItem } from "../pages/AddItemPage/AddItemPage";
 import Tag from "../Tag/Tag";
 import User from "../User/User";
 import emptyHeart from "../../assets/icons/emptyHeart.svg";
@@ -9,8 +10,19 @@ import fullHeart from "../../assets/icons/fullHeart.svg";
 import dots from "../../assets/icons/dots.svg";
 import noneImg from "../../assets/icons/image.svg";
 
+interface DetailItem extends AddItem {
+  favoriteCount: number;
+  createdAt: string;
+  updatedAt: string;
+  ownerNickname: string;
+}
+
+interface ProductParams extends Record<string, string | undefined> {
+  productId: string;
+}
+
 export default function Detail() {
-  const [product, setProduct] = useState({
+  const [product, setProduct] = useState<DetailItem>({
     name: "",
     description: "",
     price: 0,
@@ -21,14 +33,16 @@ export default function Detail() {
     updatedAt: "",
     ownerNickname: "",
   });
-  const [isFull, setIsFull] = useState(false);
-  const [isImgError, setIsImgError] = useState(false);
-  const { productId } = useParams();
+  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 = () => {
@@ -48,7 +62,6 @@ export default function Detail() {
           <S.NoneImage src={noneImg} />
         </S.NoneImageContainer>
       )}
-
       <S.Detail>
         <div>
           <S.Header>
@@ -67,7 +80,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/Tag/Tag.styles.tsx b/src/components/Tag/Tag.styles.tsx
index 51c06a07..f6ae6c92 100644
--- a/src/components/Tag/Tag.styles.tsx
+++ b/src/components/Tag/Tag.styles.tsx
@@ -2,7 +2,7 @@ import { styled } from "styled-components";
 import theme from "../../styles/theme";
 
 interface Readonly {
-  readonly?: boolean;
+  $readonly?: boolean;
 }
 
 export const TagContainer = styled.li`
@@ -28,5 +28,5 @@ export const DeleteTag = styled.img<Readonly>`
   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
index 628a0de2..47634048 100644
--- a/src/components/Tag/Tag.tsx
+++ b/src/components/Tag/Tag.tsx
@@ -3,7 +3,7 @@ import x from "../../assets/icons/delete.svg";
 
 interface TagProps {
   tag: string;
-  onClick: () => void;
+  onClick?: () => void;
   readonly?: boolean;
 }
 
@@ -12,7 +12,7 @@ export default function Tag({ tag, onClick, readonly }: TagProps) {
     <S.TagContainer>
       <S.Tag>
         <S.TagName>#{tag}</S.TagName>
-        <S.DeleteTag readonly={readonly} src={x} onClick={onClick} />
+        <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/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

From c42c8dad0a752b3be0292bfbe702596d5c673c34 Mon Sep 17 00:00:00 2001
From: heejin <heejin0857@naver.com>
Date: Tue, 25 Feb 2025 21:29:10 +0900
Subject: [PATCH 13/20] Feat : comment component type

---
 ...{Comment.styles.jsx => Comment.styles.tsx} |  0
 .../Comment/{Comment.jsx => Comment.tsx}      |  0
 ...put.styles.jsx => CommentInput.styles.tsx} |  0
 .../{CommentInput.jsx => CommentInput.tsx}    |  6 ++--
 ...List.styles.jsx => CommentList.styles.tsx} |  0
 .../{CommentList.jsx => CommentList.tsx}      | 31 ++++++++++---------
 src/components/Detail/Detail.tsx              |  2 +-
 ...ment.styles.jsx => NoneComment.styles.tsx} |  0
 .../{NoneComment.jsx => NoneComment.tsx}      |  0
 src/components/common/Input/Input.tsx         |  2 +-
 10 files changed, 23 insertions(+), 18 deletions(-)
 rename src/components/Comment/{Comment.styles.jsx => Comment.styles.tsx} (100%)
 rename src/components/Comment/{Comment.jsx => Comment.tsx} (100%)
 rename src/components/Comment/{CommentInput.styles.jsx => CommentInput.styles.tsx} (100%)
 rename src/components/Comment/{CommentInput.jsx => CommentInput.tsx} (82%)
 rename src/components/Comment/{CommentList.styles.jsx => CommentList.styles.tsx} (100%)
 rename src/components/Comment/{CommentList.jsx => CommentList.tsx} (75%)
 rename src/components/NoneComment/{NoneComment.styles.jsx => NoneComment.styles.tsx} (100%)
 rename src/components/NoneComment/{NoneComment.jsx => NoneComment.tsx} (100%)

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.tsx b/src/components/Detail/Detail.tsx
index 405942f1..a6d58b99 100644
--- a/src/components/Detail/Detail.tsx
+++ b/src/components/Detail/Detail.tsx
@@ -17,7 +17,7 @@ interface DetailItem extends AddItem {
   ownerNickname: string;
 }
 
-interface ProductParams extends Record<string, string | undefined> {
+export interface ProductParams extends Record<string, string | undefined> {
   productId: string;
 }
 
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/common/Input/Input.tsx b/src/components/common/Input/Input.tsx
index 9d00fd2e..6b95dac0 100644
--- a/src/components/common/Input/Input.tsx
+++ b/src/components/common/Input/Input.tsx
@@ -2,7 +2,7 @@ import * as S from "./Input.styles";
 import { CSSProperties, InputHTMLAttributes } from "react";
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-  label: string;
+  label?: string;
   style?: CSSProperties;
   isTextarea?: boolean;
   height?: string;

From ae862ec5a179d3d7284aaf567729a3e5c51b58f1 Mon Sep 17 00:00:00 2001
From: heejin <heejin0857@naver.com>
Date: Tue, 25 Feb 2025 21:53:47 +0900
Subject: [PATCH 14/20] Feat : file input type

---
 src/components/Detail/Detail.tsx              | 27 ++++++++++---------
 ...eInput.styles.jsx => FileInput.styles.tsx} |  4 +--
 .../{FileInput.jsx => FileInput.tsx}          | 21 ++++++++++-----
 .../pages/AddItemPage/AddItemPage.tsx         |  2 +-
 4 files changed, 32 insertions(+), 22 deletions(-)
 rename src/components/FileInput/{FileInput.styles.jsx => FileInput.styles.tsx} (96%)
 rename src/components/FileInput/{FileInput.jsx => FileInput.tsx} (67%)

diff --git a/src/components/Detail/Detail.tsx b/src/components/Detail/Detail.tsx
index a6d58b99..7dcbd2f6 100644
--- a/src/components/Detail/Detail.tsx
+++ b/src/components/Detail/Detail.tsx
@@ -10,7 +10,8 @@ import fullHeart from "../../assets/icons/fullHeart.svg";
 import dots from "../../assets/icons/dots.svg";
 import noneImg from "../../assets/icons/image.svg";
 
-interface DetailItem extends AddItem {
+interface DetailItem extends Omit<AddItem, "images"> {
+  images: string | null;
   favoriteCount: number;
   createdAt: string;
   updatedAt: string;
@@ -21,18 +22,20 @@ 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<DetailItem>({
-    name: "",
-    description: "",
-    price: 0,
-    tags: [],
-    images: null,
-    favoriteCount: 0,
-    createdAt: "",
-    updatedAt: "",
-    ownerNickname: "",
-  });
+  const [product, setProduct] = useState<DetailItem>(INITIAL_VALUE);
   const [isFull, setIsFull] = useState<boolean>(false);
   const [isImgError, setIsImgError] = useState<boolean>(false);
   const { productId } = useParams<ProductParams>();
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/pages/AddItemPage/AddItemPage.tsx b/src/components/pages/AddItemPage/AddItemPage.tsx
index 3a75db96..62067e58 100644
--- a/src/components/pages/AddItemPage/AddItemPage.tsx
+++ b/src/components/pages/AddItemPage/AddItemPage.tsx
@@ -7,7 +7,7 @@ import { useNavigate } from "react-router-dom";
 import { isValidAddItem } from "../../../utils/addValidate";
 
 export interface AddItem {
-  images: string | null;
+  images: File | null;
   name: string;
   description: string;
   price: number;

From d9eb65fd6c60a0fe10a7ae646e2e16e6b01ec7d2 Mon Sep 17 00:00:00 2001
From: heejin <heejin0857@naver.com>
Date: Tue, 25 Feb 2025 21:58:36 +0900
Subject: [PATCH 15/20] Feat : pagination component type

---
 package-lock.json                                 | 10 ++++++++++
 package.json                                      |  1 +
 .../{Paging.styles.jsx => Paging.styles.tsx}      |  0
 src/components/Paging/{Paging.jsx => Paging.tsx}  | 15 ++++++++++++++-
 .../{FreeBoardPage.jsx => FreeBoardPage.tsx}      |  0
 src/types/svg.d.ts                                |  7 +++++--
 6 files changed, 30 insertions(+), 3 deletions(-)
 rename src/components/Paging/{Paging.styles.jsx => Paging.styles.tsx} (100%)
 rename src/components/Paging/{Paging.jsx => Paging.tsx} (66%)
 rename src/components/pages/FreeBoardPage/{FreeBoardPage.jsx => FreeBoardPage.tsx} (100%)

diff --git a/package-lock.json b/package-lock.json
index 46e192e8..117bd551 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
       },
       "devDependencies": {
         "@types/lodash.debounce": "^4.0.9",
+        "@types/react-js-pagination": "^3.0.7",
         "typescript": "^4.9.5"
       }
     },
@@ -4423,6 +4424,15 @@
         "@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": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
diff --git a/package.json b/package.json
index 2fec4dd9..9fcddae1 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
   },
   "devDependencies": {
     "@types/lodash.debounce": "^4.0.9",
+    "@types/react-js-pagination": "^3.0.7",
     "typescript": "^4.9.5"
   }
 }
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/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/types/svg.d.ts b/src/types/svg.d.ts
index 5e52f805..6382d3cd 100644
--- a/src/types/svg.d.ts
+++ b/src/types/svg.d.ts
@@ -1,4 +1,7 @@
 declare module "*.svg" {
-  const content: string;
-  export default content;
+  import React = require("react");
+
+  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
 }

From 9a4c9ee801b4c77666513fd99a68c82c46f42059 Mon Sep 17 00:00:00 2001
From: heejin <heejin0857@naver.com>
Date: Tue, 25 Feb 2025 22:00:44 +0900
Subject: [PATCH 16/20] Feat : search component type

---
 src/components/Search/Search.jsx              | 20 -------------
 .../{Search.styles.jsx => Search.styles.tsx}  |  0
 src/components/Search/Search.tsx              | 28 +++++++++++++++++++
 3 files changed, 28 insertions(+), 20 deletions(-)
 delete mode 100644 src/components/Search/Search.jsx
 rename src/components/Search/{Search.styles.jsx => Search.styles.tsx} (100%)
 create mode 100644 src/components/Search/Search.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>
+  );
+}

From a278c7bb685d4ce67e091fbef53d52ce0f63a8b6 Mon Sep 17 00:00:00 2001
From: heejin <heejin0857@naver.com>
Date: Tue, 25 Feb 2025 22:01:36 +0900
Subject: [PATCH 17/20] Feat : api & validate type

---
 src/api/comment.js              |  9 ---------
 src/api/comment.tsx             | 26 ++++++++++++++++++++++++++
 src/api/{index.js => index.tsx} |  0
 src/api/products.js             | 16 ----------------
 src/api/products.tsx            | 31 +++++++++++++++++++++++++++++++
 src/utils/addValidate.js        |  5 -----
 src/utils/addValidate.tsx       | 11 +++++++++++
 7 files changed, 68 insertions(+), 30 deletions(-)
 delete mode 100644 src/api/comment.js
 create mode 100644 src/api/comment.tsx
 rename src/api/{index.js => index.tsx} (100%)
 delete mode 100644 src/api/products.js
 create mode 100644 src/api/products.tsx
 delete mode 100644 src/utils/addValidate.js
 create mode 100644 src/utils/addValidate.tsx

diff --git a/src/api/comment.js b/src/api/comment.js
deleted file mode 100644
index adfdaab1..00000000
--- a/src/api/comment.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import api from "./index";
-
-export async function getComments(productId, limit = 3) {
-  const response = await api.get(
-    `/products/${productId}/comments?limit=${limit}`
-  );
-
-  return response.data.list;
-}
diff --git a/src/api/comment.tsx b/src/api/comment.tsx
new file mode 100644
index 00000000..fbf63952
--- /dev/null
+++ b/src/api/comment.tsx
@@ -0,0 +1,26 @@
+import api from "./index";
+
+export interface Comment {
+  id: number;
+  content: string;
+  createdAt: string;
+  updatedAt: string;
+  writer: Writer;
+}
+
+interface 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.js b/src/api/index.tsx
similarity index 100%
rename from src/api/index.js
rename to src/api/index.tsx
diff --git a/src/api/products.js b/src/api/products.js
deleted file mode 100644
index 294559de..00000000
--- a/src/api/products.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import api from "./index";
-
-export async function getProducts(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) {
-  const response = await api.get(`/products/${productId}`);
-
-  return response.data;
-}
diff --git a/src/api/products.tsx b/src/api/products.tsx
new file mode 100644
index 00000000..06a450e4
--- /dev/null
+++ b/src/api/products.tsx
@@ -0,0 +1,31 @@
+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 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) {
+  const response = await api.get(`/products/${productId}`);
+
+  return response.data;
+}
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;
+};

From 05d1ef298212bc9f989c5c1453ec21e4858f7caa Mon Sep 17 00:00:00 2001
From: heejin <heejin0857@naver.com>
Date: Tue, 25 Feb 2025 22:04:17 +0900
Subject: [PATCH 18/20] Chore : add item card cursor pointer

---
 src/components/Items/ItemCard/ItemCard.styles.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Items/ItemCard/ItemCard.styles.tsx b/src/components/Items/ItemCard/ItemCard.styles.tsx
index bd094831..5d1ad714 100644
--- a/src/components/Items/ItemCard/ItemCard.styles.tsx
+++ b/src/components/Items/ItemCard/ItemCard.styles.tsx
@@ -51,6 +51,7 @@ export const ItemContainer = styled.div<List>`
   display: flex;
   flex-direction: column;
   gap: 16px;
+  cursor: pointer;
 
   @media (max-width: 767px) {
     width: ${({ list }) => getImgSize(list, "Mobile")};

From a672e6cd89c68ac1e94340834fe993041a584703 Mon Sep 17 00:00:00 2001
From: heejin <heejin0857@naver.com>
Date: Tue, 25 Feb 2025 22:09:36 +0900
Subject: [PATCH 19/20] Feat : getProductInfo promise type

---
 src/api/comment.tsx              | 12 +++++-------
 src/api/products.tsx             | 11 ++++++++++-
 src/components/Detail/Detail.tsx | 11 +----------
 3 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/api/comment.tsx b/src/api/comment.tsx
index fbf63952..b5311cba 100644
--- a/src/api/comment.tsx
+++ b/src/api/comment.tsx
@@ -5,13 +5,11 @@ export interface Comment {
   content: string;
   createdAt: string;
   updatedAt: string;
-  writer: Writer;
-}
-
-interface Writer {
-  id: number;
-  image: string | null;
-  nickname: string;
+  writer: {
+    id: number;
+    image: string | null;
+    nickname: string;
+  };
 }
 
 export async function getComments(
diff --git a/src/api/products.tsx b/src/api/products.tsx
index 06a450e4..42c1f452 100644
--- a/src/api/products.tsx
+++ b/src/api/products.tsx
@@ -1,3 +1,4 @@
+import { AddItem } from "../components/pages/AddItemPage/AddItemPage";
 import api from "./index";
 
 export interface Items {
@@ -15,6 +16,14 @@ interface Params {
   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`, {
@@ -24,7 +33,7 @@ export async function getProducts(params: Params) {
   return response.data;
 }
 
-export async function getProductInfo(productId: string) {
+export async function getProductInfo(productId: string): Promise<DetailItem> {
   const response = await api.get(`/products/${productId}`);
 
   return response.data;
diff --git a/src/components/Detail/Detail.tsx b/src/components/Detail/Detail.tsx
index 7dcbd2f6..eddbe27c 100644
--- a/src/components/Detail/Detail.tsx
+++ b/src/components/Detail/Detail.tsx
@@ -1,8 +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 { AddItem } from "../pages/AddItemPage/AddItemPage";
+import { DetailItem, getProductInfo } from "../../api/products";
 import Tag from "../Tag/Tag";
 import User from "../User/User";
 import emptyHeart from "../../assets/icons/emptyHeart.svg";
@@ -10,14 +9,6 @@ import fullHeart from "../../assets/icons/fullHeart.svg";
 import dots from "../../assets/icons/dots.svg";
 import noneImg from "../../assets/icons/image.svg";
 
-interface DetailItem extends Omit<AddItem, "images"> {
-  images: string | null;
-  favoriteCount: number;
-  createdAt: string;
-  updatedAt: string;
-  ownerNickname: string;
-}
-
 export interface ProductParams extends Record<string, string | undefined> {
   productId: string;
 }

From fe89ba4eff527d96f020874e275fe854b0543d88 Mon Sep 17 00:00:00 2001
From: heejin <heejin0857@naver.com>
Date: Tue, 25 Feb 2025 22:13:17 +0900
Subject: [PATCH 20/20] Chore : install type styled components

---
 package-lock.json | 33 +++++++++++++++++++++++++++++++++
 package.json      |  1 +
 2 files changed, 34 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 117bd551..6c4e8dba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@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",
@@ -4064,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",
@@ -4491,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",
@@ -9066,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",
diff --git a/package.json b/package.json
index 9fcddae1..691455b6 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "@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",