diff --git a/package-lock.json b/package-lock.json
index 1809cd010..eeda26a56 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,11 +11,19 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "react-router-dom": "^6.22.3",
+        "@types/jest": "^27.5.2",
+        "@types/node": "^16.18.104",
+        "@types/react": "^18.3.3",
+        "@types/react-dom": "^18.3.0",
+        "@types/react-router-dom": "^5.3.3",
+        "date-fns": "^3.6.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.26.0",
         "react-scripts": "5.0.1",
-        "styled-components": "^6.1.8",
+        "react-spinners": "^0.14.1",
+        "styled-components": "^6.1.12",
+        "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
       }
     },
@@ -2302,9 +2310,10 @@
       }
     },
     "node_modules/@emotion/is-prop-valid": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
-      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+      "license": "MIT",
       "dependencies": {
         "@emotion/memoize": "^0.8.1"
       }
@@ -2312,12 +2321,14 @@
     "node_modules/@emotion/memoize": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
-      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
+      "license": "MIT"
     },
     "node_modules/@emotion/unitless": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
-      "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
+      "license": "MIT"
     },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
@@ -2809,25 +2820,6 @@
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
       }
     },
-    "node_modules/@jest/expect-utils": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-29.7.0.tgz",
-      "integrity": "sha512-GlsNBWiFQFCVi9QVSx7f5AgMeLxe9YCCs5PuP2O2LdjDAA8Jh9eX7lA1Jq/xdXw3Wb3hyvlFNfZIfcRetSzYcA==",
-      "dependencies": {
-        "jest-get-type": "^29.6.3"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/expect-utils/node_modules/jest-get-type": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.6.3.tgz",
-      "integrity": "sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==",
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
     "node_modules/@jest/fake-timers": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-27.5.1.tgz",
@@ -3389,9 +3381,10 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
-      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.0.tgz",
+      "integrity": "sha512-zDICCLKEwbVYTS6TjYaWtHXxkdoUvD/QXvyVZjGCsWz5vyH7aFeONlPffPdW+Y/t6KT0MgXb2Mfjun9YpWN1dA==",
+      "license": "MIT",
       "engines": {
         "node": ">=14.0.0"
       }
@@ -3715,9 +3708,10 @@
       }
     },
     "node_modules/@testing-library/dom": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.0.0.tgz",
-      "integrity": "sha512-PmJPnogldqoVFf+EwbHvbBJ98MmqASV8kLrBYgsDNxQcFMeIS7JFL48sfyXvuMtgmWO/wMhh25odr+8VhDmn4g==",
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
+      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
@@ -3737,6 +3731,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -3752,6 +3747,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
@@ -3768,6 +3764,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "color-name": "~1.1.4"
@@ -3780,12 +3777,14 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT",
       "peer": true
     },
     "node_modules/@testing-library/dom/node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "license": "MIT",
       "peer": true,
       "engines": {
         "node": ">=8"
@@ -3795,6 +3794,7 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "has-flag": "^4.0.0"
@@ -4152,6 +4152,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
+      "license": "MIT"
+    },
     "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",
@@ -4192,239 +4198,13 @@
       }
     },
     "node_modules/@types/jest": {
-      "version": "29.5.12",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.12.tgz",
-      "integrity": "sha512-eDC8bTvT/QhYdxJAulQikueigY5AsdBRH2yDKW3yveW7svY3+DzN84/2NUgkw10RTiJbWqZrTtoGVdYlvFJdLw==",
-      "dependencies": {
-        "expect": "^29.0.0",
-        "pretty-format": "^29.0.0"
-      }
-    },
-    "node_modules/@types/jest/node_modules/@jest/schemas": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
-      "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
-      "dependencies": {
-        "@sinclair/typebox": "^0.27.8"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@types/jest/node_modules/@jest/types": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.3.tgz",
-      "integrity": "sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==",
-      "dependencies": {
-        "@jest/schemas": "^29.6.3",
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^17.0.8",
-        "chalk": "^4.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@types/jest/node_modules/@sinclair/typebox": {
-      "version": "0.27.8",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
-      "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA=="
-    },
-    "node_modules/@types/jest/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "27.5.2",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-27.5.2.tgz",
+      "integrity": "sha512-mpT8LJJ4CMeeahobofYWIjFo0xonRS/HfxnVEPMPFSQdGUt1uHCnoPT7Zhb+sjDU2wz0oKV0OLUR0WzrHNgfeA==",
+      "license": "MIT",
       "dependencies": {
-        "@types/yargs-parser": "*"
-      }
-    },
-    "node_modules/@types/jest/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@types/jest/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/@types/jest/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/@types/jest/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-    },
-    "node_modules/@types/jest/node_modules/diff-sequences": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
-      "integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==",
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@types/jest/node_modules/expect": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/expect/-/expect-29.7.0.tgz",
-      "integrity": "sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw==",
-      "dependencies": {
-        "@jest/expect-utils": "^29.7.0",
-        "jest-get-type": "^29.6.3",
-        "jest-matcher-utils": "^29.7.0",
-        "jest-message-util": "^29.7.0",
-        "jest-util": "^29.7.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@types/jest/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@types/jest/node_modules/jest-diff": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.7.0.tgz",
-      "integrity": "sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==",
-      "dependencies": {
-        "chalk": "^4.0.0",
-        "diff-sequences": "^29.6.3",
-        "jest-get-type": "^29.6.3",
-        "pretty-format": "^29.7.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@types/jest/node_modules/jest-get-type": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.6.3.tgz",
-      "integrity": "sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==",
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@types/jest/node_modules/jest-matcher-utils": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.7.0.tgz",
-      "integrity": "sha512-sBkD+Xi9DtcChsI3L3u0+N0opgPYnCRPtGcQYrgXmR+hmt/fYfWAL0xRXYU8eWOdfuLgBe0YCW3AFtnRLagq/g==",
-      "dependencies": {
-        "chalk": "^4.0.0",
-        "jest-diff": "^29.7.0",
-        "jest-get-type": "^29.6.3",
-        "pretty-format": "^29.7.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@types/jest/node_modules/jest-message-util": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-29.7.0.tgz",
-      "integrity": "sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==",
-      "dependencies": {
-        "@babel/code-frame": "^7.12.13",
-        "@jest/types": "^29.6.3",
-        "@types/stack-utils": "^2.0.0",
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.9",
-        "micromatch": "^4.0.4",
-        "pretty-format": "^29.7.0",
-        "slash": "^3.0.0",
-        "stack-utils": "^2.0.3"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@types/jest/node_modules/jest-util": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz",
-      "integrity": "sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==",
-      "dependencies": {
-        "@jest/types": "^29.6.3",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "ci-info": "^3.2.0",
-        "graceful-fs": "^4.2.9",
-        "picomatch": "^2.2.3"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@types/jest/node_modules/pretty-format": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
-      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
-      "dependencies": {
-        "@jest/schemas": "^29.6.3",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^18.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@types/jest/node_modules/pretty-format/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@types/jest/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
-    },
-    "node_modules/@types/jest/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
+        "jest-matcher-utils": "^27.0.0",
+        "pretty-format": "^27.0.0"
       }
     },
     "node_modules/@types/json-schema": {
@@ -4443,12 +4223,10 @@
       "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w=="
     },
     "node_modules/@types/node": {
-      "version": "20.12.7",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.7.tgz",
-      "integrity": "sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==",
-      "dependencies": {
-        "undici-types": "~5.26.4"
-      }
+      "version": "16.18.104",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.104.tgz",
+      "integrity": "sha512-OF3keVCbfPlkzxnnDBUZJn1RiCJzKeadjiW0xTEb0G1SUJ5gDVb3qnzZr2T4uIFvsbKJbXy1v2DN7e2zaEY7jQ==",
+      "license": "MIT"
     },
     "node_modules/@types/node-forge": {
       "version": "1.3.11",
@@ -4489,22 +4267,45 @@
       "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="
     },
     "node_modules/@types/react": {
-      "version": "18.2.78",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.78.tgz",
-      "integrity": "sha512-qOwdPnnitQY4xKlKayt42q5W5UQrSHjgoXNVEtxeqdITJ99k4VXJOP3vt8Rkm9HmgJpH50UNU+rlqfkfWOqp0A==",
+      "version": "18.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
+      "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
+      "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.2.25",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.25.tgz",
-      "integrity": "sha512-o/V48vf4MQh7juIKZU2QGDfli6p1+OOi5oXx36Hffpc9adsHeXjVp8rHuPkjd8VT8sOJ2Zp05HR7CdpGTIUFUA==",
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
+      "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
+      "license": "MIT",
       "dependencies": {
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -4564,9 +4365,10 @@
       "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw=="
     },
     "node_modules/@types/stylis": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz",
-      "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw=="
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
+      "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==",
+      "license": "MIT"
     },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.9",
@@ -6032,6 +5834,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
       "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -6472,6 +6275,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
       "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "license": "ISC",
       "engines": {
         "node": ">=4"
       }
@@ -6670,6 +6474,7 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
       "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "license": "MIT",
       "dependencies": {
         "camelize": "^1.0.0",
         "css-color-keywords": "^1.0.0",
@@ -6939,6 +6744,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -14990,9 +14805,10 @@
       }
     },
     "node_modules/react": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -15139,15 +14955,16 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
+        "scheduler": "^0.23.2"
       },
       "peerDependencies": {
-        "react": "^18.2.0"
+        "react": "^18.3.1"
       }
     },
     "node_modules/react-error-overlay": {
@@ -15169,11 +14986,12 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.22.3",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
-      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.0.tgz",
+      "integrity": "sha512-wVQq0/iFYd3iZ9H2l3N3k4PL8EEHcb0XlU2Na8nEwmiXgIUElEH6gaJDtUQxJ+JFzmIXaQjfdpcGWaM6IoQGxg==",
+      "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.15.3"
+        "@remix-run/router": "1.19.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -15183,12 +15001,13 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.22.3",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
-      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.0.tgz",
+      "integrity": "sha512-RRGUIiDtLrkX3uYcFiCIxKFWMcWQGMojpYZfcstc63A1+sSnVgILGIm9gNUA6na3Fm1QuPGSBQH2EMbAZOnMsQ==",
+      "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.15.3",
-        "react-router": "6.22.3"
+        "@remix-run/router": "1.19.0",
+        "react-router": "6.26.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -15202,6 +15021,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
       "integrity": "sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==",
+      "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.16.0",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
@@ -15270,6 +15090,16 @@
         }
       }
     },
+    "node_modules/react-spinners": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.14.1.tgz",
+      "integrity": "sha512-2Izq+qgQ08HTofCVEdcAQCXFEYfqTDdfeDQJeo/HHQiQJD4imOicNLhkfN2eh1NYEWVOX4D9ok2lhuDB0z3Aag==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -15814,9 +15644,10 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
@@ -16056,7 +15887,8 @@
     "node_modules/shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
+      "license": "MIT"
     },
     "node_modules/shebang-command": {
       "version": "2.0.0",
@@ -16600,19 +16432,20 @@
       }
     },
     "node_modules/styled-components": {
-      "version": "6.1.8",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.8.tgz",
-      "integrity": "sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==",
-      "dependencies": {
-        "@emotion/is-prop-valid": "1.2.1",
-        "@emotion/unitless": "0.8.0",
-        "@types/stylis": "4.2.0",
+      "version": "6.1.12",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.12.tgz",
+      "integrity": "sha512-n/O4PzRPhbYI0k1vKKayfti3C/IGcPf+DqcrOB7O/ab9x4u/zjqraneT5N45+sIe87cxrCApXM8Bna7NYxwoTA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/is-prop-valid": "1.2.2",
+        "@emotion/unitless": "0.8.1",
+        "@types/stylis": "4.2.5",
         "css-to-react-native": "3.2.0",
-        "csstype": "3.1.2",
-        "postcss": "8.4.31",
+        "csstype": "3.1.3",
+        "postcss": "8.4.38",
         "shallowequal": "1.1.0",
-        "stylis": "4.3.1",
-        "tslib": "2.5.0"
+        "stylis": "4.3.2",
+        "tslib": "2.6.2"
       },
       "engines": {
         "node": ">= 16"
@@ -16626,43 +16459,6 @@
         "react-dom": ">= 16.8.0"
       }
     },
-    "node_modules/styled-components/node_modules/csstype": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
-    },
-    "node_modules/styled-components/node_modules/postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "nanoid": "^3.3.6",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
-    "node_modules/styled-components/node_modules/tslib": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
-      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
-    },
     "node_modules/stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -16679,9 +16475,10 @@
       }
     },
     "node_modules/stylis": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz",
-      "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ=="
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
+      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==",
+      "license": "MIT"
     },
     "node_modules/sucrase": {
       "version": "3.35.0",
@@ -17347,7 +17144,7 @@
       "version": "4.9.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
       "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
-      "peer": true,
+      "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -17375,11 +17172,6 @@
       "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz",
       "integrity": "sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw=="
     },
-    "node_modules/undici-types": {
-      "version": "5.26.5",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
-    },
     "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",
@@ -20051,9 +19843,9 @@
       "requires": {}
     },
     "@emotion/is-prop-valid": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
-      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
       "requires": {
         "@emotion/memoize": "^0.8.1"
       }
@@ -20064,9 +19856,9 @@
       "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
     },
     "@emotion/unitless": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
-      "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
     },
     "@eslint-community/eslint-utils": {
       "version": "4.4.0",
@@ -20409,21 +20201,6 @@
         "jest-mock": "^27.5.1"
       }
     },
-    "@jest/expect-utils": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-29.7.0.tgz",
-      "integrity": "sha512-GlsNBWiFQFCVi9QVSx7f5AgMeLxe9YCCs5PuP2O2LdjDAA8Jh9eX7lA1Jq/xdXw3Wb3hyvlFNfZIfcRetSzYcA==",
-      "requires": {
-        "jest-get-type": "^29.6.3"
-      },
-      "dependencies": {
-        "jest-get-type": {
-          "version": "29.6.3",
-          "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.6.3.tgz",
-          "integrity": "sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw=="
-        }
-      }
-    },
     "@jest/fake-timers": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-27.5.1.tgz",
@@ -20828,9 +20605,9 @@
       }
     },
     "@remix-run/router": {
-      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
-      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w=="
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.0.tgz",
+      "integrity": "sha512-zDICCLKEwbVYTS6TjYaWtHXxkdoUvD/QXvyVZjGCsWz5vyH7aFeONlPffPdW+Y/t6KT0MgXb2Mfjun9YpWN1dA=="
     },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
@@ -21027,9 +20804,9 @@
       }
     },
     "@testing-library/dom": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.0.0.tgz",
-      "integrity": "sha512-PmJPnogldqoVFf+EwbHvbBJ98MmqASV8kLrBYgsDNxQcFMeIS7JFL48sfyXvuMtgmWO/wMhh25odr+8VhDmn4g==",
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
+      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
       "peer": true,
       "requires": {
         "@babel/code-frame": "^7.10.4",
@@ -21379,6 +21156,11 @@
         "@types/node": "*"
       }
     },
+    "@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
+    },
     "@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -21419,186 +21201,12 @@
       }
     },
     "@types/jest": {
-      "version": "29.5.12",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.12.tgz",
-      "integrity": "sha512-eDC8bTvT/QhYdxJAulQikueigY5AsdBRH2yDKW3yveW7svY3+DzN84/2NUgkw10RTiJbWqZrTtoGVdYlvFJdLw==",
+      "version": "27.5.2",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-27.5.2.tgz",
+      "integrity": "sha512-mpT8LJJ4CMeeahobofYWIjFo0xonRS/HfxnVEPMPFSQdGUt1uHCnoPT7Zhb+sjDU2wz0oKV0OLUR0WzrHNgfeA==",
       "requires": {
-        "expect": "^29.0.0",
-        "pretty-format": "^29.0.0"
-      },
-      "dependencies": {
-        "@jest/schemas": {
-          "version": "29.6.3",
-          "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
-          "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
-          "requires": {
-            "@sinclair/typebox": "^0.27.8"
-          }
-        },
-        "@jest/types": {
-          "version": "29.6.3",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.3.tgz",
-          "integrity": "sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==",
-          "requires": {
-            "@jest/schemas": "^29.6.3",
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^17.0.8",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@sinclair/typebox": {
-          "version": "0.27.8",
-          "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
-          "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA=="
-        },
-        "@types/yargs": {
-          "version": "17.0.32",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-          "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
-          "requires": {
-            "@types/yargs-parser": "*"
-          }
-        },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-        },
-        "diff-sequences": {
-          "version": "29.6.3",
-          "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
-          "integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q=="
-        },
-        "expect": {
-          "version": "29.7.0",
-          "resolved": "https://registry.npmjs.org/expect/-/expect-29.7.0.tgz",
-          "integrity": "sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw==",
-          "requires": {
-            "@jest/expect-utils": "^29.7.0",
-            "jest-get-type": "^29.6.3",
-            "jest-matcher-utils": "^29.7.0",
-            "jest-message-util": "^29.7.0",
-            "jest-util": "^29.7.0"
-          }
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
-        },
-        "jest-diff": {
-          "version": "29.7.0",
-          "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.7.0.tgz",
-          "integrity": "sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==",
-          "requires": {
-            "chalk": "^4.0.0",
-            "diff-sequences": "^29.6.3",
-            "jest-get-type": "^29.6.3",
-            "pretty-format": "^29.7.0"
-          }
-        },
-        "jest-get-type": {
-          "version": "29.6.3",
-          "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.6.3.tgz",
-          "integrity": "sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw=="
-        },
-        "jest-matcher-utils": {
-          "version": "29.7.0",
-          "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.7.0.tgz",
-          "integrity": "sha512-sBkD+Xi9DtcChsI3L3u0+N0opgPYnCRPtGcQYrgXmR+hmt/fYfWAL0xRXYU8eWOdfuLgBe0YCW3AFtnRLagq/g==",
-          "requires": {
-            "chalk": "^4.0.0",
-            "jest-diff": "^29.7.0",
-            "jest-get-type": "^29.6.3",
-            "pretty-format": "^29.7.0"
-          }
-        },
-        "jest-message-util": {
-          "version": "29.7.0",
-          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-29.7.0.tgz",
-          "integrity": "sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==",
-          "requires": {
-            "@babel/code-frame": "^7.12.13",
-            "@jest/types": "^29.6.3",
-            "@types/stack-utils": "^2.0.0",
-            "chalk": "^4.0.0",
-            "graceful-fs": "^4.2.9",
-            "micromatch": "^4.0.4",
-            "pretty-format": "^29.7.0",
-            "slash": "^3.0.0",
-            "stack-utils": "^2.0.3"
-          }
-        },
-        "jest-util": {
-          "version": "29.7.0",
-          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz",
-          "integrity": "sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==",
-          "requires": {
-            "@jest/types": "^29.6.3",
-            "@types/node": "*",
-            "chalk": "^4.0.0",
-            "ci-info": "^3.2.0",
-            "graceful-fs": "^4.2.9",
-            "picomatch": "^2.2.3"
-          }
-        },
-        "pretty-format": {
-          "version": "29.7.0",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
-          "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
-          "requires": {
-            "@jest/schemas": "^29.6.3",
-            "ansi-styles": "^5.0.0",
-            "react-is": "^18.0.0"
-          },
-          "dependencies": {
-            "ansi-styles": {
-              "version": "5.2.0",
-              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-              "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="
-            }
-          }
-        },
-        "react-is": {
-          "version": "18.2.0",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
+        "jest-matcher-utils": "^27.0.0",
+        "pretty-format": "^27.0.0"
       }
     },
     "@types/json-schema": {
@@ -21617,12 +21225,9 @@
       "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w=="
     },
     "@types/node": {
-      "version": "20.12.7",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.7.tgz",
-      "integrity": "sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==",
-      "requires": {
-        "undici-types": "~5.26.4"
-      }
+      "version": "16.18.104",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.104.tgz",
+      "integrity": "sha512-OF3keVCbfPlkzxnnDBUZJn1RiCJzKeadjiW0xTEb0G1SUJ5gDVb3qnzZr2T4uIFvsbKJbXy1v2DN7e2zaEY7jQ=="
     },
     "@types/node-forge": {
       "version": "1.3.11",
@@ -21663,22 +21268,41 @@
       "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="
     },
     "@types/react": {
-      "version": "18.2.78",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.78.tgz",
-      "integrity": "sha512-qOwdPnnitQY4xKlKayt42q5W5UQrSHjgoXNVEtxeqdITJ99k4VXJOP3vt8Rkm9HmgJpH50UNU+rlqfkfWOqp0A==",
+      "version": "18.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
+      "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
       "requires": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
       }
     },
     "@types/react-dom": {
-      "version": "18.2.25",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.25.tgz",
-      "integrity": "sha512-o/V48vf4MQh7juIKZU2QGDfli6p1+OOi5oXx36Hffpc9adsHeXjVp8rHuPkjd8VT8sOJ2Zp05HR7CdpGTIUFUA==",
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
+      "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
       "requires": {
+        "@types/history": "^4.7.11",
         "@types/react": "*"
       }
     },
+    "@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "requires": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -21738,9 +21362,9 @@
       "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw=="
     },
     "@types/stylis": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz",
-      "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw=="
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
+      "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw=="
     },
     "@types/testing-library__jest-dom": {
       "version": "5.14.9",
@@ -23442,6 +23066,11 @@
         "is-data-view": "^1.0.1"
       }
     },
+    "date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww=="
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -29031,9 +28660,9 @@
       }
     },
     "react": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "requires": {
         "loose-envify": "^1.1.0"
       }
@@ -29145,12 +28774,12 @@
       }
     },
     "react-dom": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "requires": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
+        "scheduler": "^0.23.2"
       }
     },
     "react-error-overlay": {
@@ -29169,20 +28798,20 @@
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
     "react-router": {
-      "version": "6.22.3",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
-      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.0.tgz",
+      "integrity": "sha512-wVQq0/iFYd3iZ9H2l3N3k4PL8EEHcb0XlU2Na8nEwmiXgIUElEH6gaJDtUQxJ+JFzmIXaQjfdpcGWaM6IoQGxg==",
       "requires": {
-        "@remix-run/router": "1.15.3"
+        "@remix-run/router": "1.19.0"
       }
     },
     "react-router-dom": {
-      "version": "6.22.3",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
-      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.0.tgz",
+      "integrity": "sha512-RRGUIiDtLrkX3uYcFiCIxKFWMcWQGMojpYZfcstc63A1+sSnVgILGIm9gNUA6na3Fm1QuPGSBQH2EMbAZOnMsQ==",
       "requires": {
-        "@remix-run/router": "1.15.3",
-        "react-router": "6.22.3"
+        "@remix-run/router": "1.19.0",
+        "react-router": "6.26.0"
       }
     },
     "react-scripts": {
@@ -29240,6 +28869,12 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-spinners": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.14.1.tgz",
+      "integrity": "sha512-2Izq+qgQ08HTofCVEdcAQCXFEYfqTDdfeDQJeo/HHQiQJD4imOicNLhkfN2eh1NYEWVOX4D9ok2lhuDB0z3Aag==",
+      "requires": {}
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -29602,9 +29237,9 @@
       }
     },
     "scheduler": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
       "requires": {
         "loose-envify": "^1.1.0"
       }
@@ -30214,41 +29849,19 @@
       "requires": {}
     },
     "styled-components": {
-      "version": "6.1.8",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.8.tgz",
-      "integrity": "sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==",
+      "version": "6.1.12",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.12.tgz",
+      "integrity": "sha512-n/O4PzRPhbYI0k1vKKayfti3C/IGcPf+DqcrOB7O/ab9x4u/zjqraneT5N45+sIe87cxrCApXM8Bna7NYxwoTA==",
       "requires": {
-        "@emotion/is-prop-valid": "1.2.1",
-        "@emotion/unitless": "0.8.0",
-        "@types/stylis": "4.2.0",
+        "@emotion/is-prop-valid": "1.2.2",
+        "@emotion/unitless": "0.8.1",
+        "@types/stylis": "4.2.5",
         "css-to-react-native": "3.2.0",
-        "csstype": "3.1.2",
-        "postcss": "8.4.31",
+        "csstype": "3.1.3",
+        "postcss": "8.4.38",
         "shallowequal": "1.1.0",
-        "stylis": "4.3.1",
-        "tslib": "2.5.0"
-      },
-      "dependencies": {
-        "csstype": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-          "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
-        },
-        "postcss": {
-          "version": "8.4.31",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-          "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
-          "requires": {
-            "nanoid": "^3.3.6",
-            "picocolors": "^1.0.0",
-            "source-map-js": "^1.0.2"
-          }
-        },
-        "tslib": {
-          "version": "2.5.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
-          "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
-        }
+        "stylis": "4.3.2",
+        "tslib": "2.6.2"
       }
     },
     "stylehacks": {
@@ -30261,9 +29874,9 @@
       }
     },
     "stylis": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz",
-      "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ=="
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
+      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg=="
     },
     "sucrase": {
       "version": "3.35.0",
@@ -30760,8 +30373,7 @@
     "typescript": {
       "version": "4.9.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
-      "peer": true
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g=="
     },
     "unbox-primitive": {
       "version": "1.0.2",
@@ -30779,11 +30391,6 @@
       "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz",
       "integrity": "sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw=="
     },
-    "undici-types": {
-      "version": "5.26.5",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
-    },
     "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 2424a353d..00a955ff4 100644
--- a/package.json
+++ b/package.json
@@ -6,11 +6,19 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.3",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.104",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-router-dom": "^5.3.3",
+    "date-fns": "^3.6.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.0",
     "react-scripts": "5.0.1",
-    "styled-components": "^6.1.8",
+    "react-spinners": "^0.14.1",
+    "styled-components": "^6.1.12",
+    "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/src/App.js b/src/App.tsx
similarity index 66%
rename from src/App.js
rename to src/App.tsx
index 2cd3d61f3..5d66b0589 100644
--- a/src/App.js
+++ b/src/App.tsx
@@ -2,10 +2,10 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
 import HomePage from "./pages/HomePage/HomePage";
 import LoginPage from "./pages/LoginPage/LoginPage";
 import MarketPage from "./pages/MarketPage/MarketPage";
-import MarketDetailPage from "./pages/MarketPage/MarketDetailPage";
 import AddItemPage from "./pages/AddItemPage/AddItemPage";
 import CommunityFeedPage from "./pages/CommunityFeedPage/CommunityFeedPage";
 import Header from "./components/Layout/Header";
+import ItemPage from "./pages/ItemPage/ItemPage";
 
 function App() {
   return (
@@ -15,11 +15,15 @@ function App() {
 
       <div className="withHeader">
         <Routes>
-          {/* React Router v6부터는 path="/" 대신 간단하게 `index`라고 표기하면 돼요 */}
           <Route index element={<HomePage />} />
           <Route path="login" element={<LoginPage />} />
           <Route path="items" element={<MarketPage />} />
-          <Route path="items/:id" element={<MarketDetailPage />} />
+          {/* 
+            동적 라우팅 (Dynamic Routing)
+            - `:` 뒤에 상품 아이디를 `path parameter`로 추가해주어 각 상품의 상세 페이지를 생성할 수 있어요.
+            - 해당 페이지의 컴포넌트 내에서 useParams 훅을 이용하면 path parameter의 값을 사용할 수 있어요
+          */}
+          <Route path="items/:productId" element={<ItemPage />} />
           <Route path="additem" element={<AddItemPage />} />
           <Route path="community" element={<CommunityFeedPage />} />
         </Routes>
diff --git a/src/api/itemApi.js b/src/api/itemApi.js
deleted file mode 100644
index 582ce6199..000000000
--- a/src/api/itemApi.js
+++ /dev/null
@@ -1,50 +0,0 @@
-export async function getProducts(params = {}) {
-  // URLSearchParams을 이용하면 파라미터 값을 자동으로 쉽게 인코딩할 수 있어요.
-  const query = new URLSearchParams(params).toString();
-
-  try {
-    const response = await fetch(
-      `https://panda-market-api.vercel.app/products?${query}`
-    );
-    if (!response.ok) {
-      throw new Error(`HTTP error: ${response.status}`);
-    }
-    const body = await response.json();
-    return body;
-  } catch (error) {
-    console.error("Failed to fetch products:", error);
-    throw error;
-  }
-}
-
-export const getProduct = async (productId) => {
-  try {
-    const response = await fetch(
-      `https://panda-market-api.vercel.app/products/${productId}`
-    );
-    if (!response.ok) {
-      throw new Error(`HTTP error: ${response.status}`);
-    }
-    const data = await response.json();
-    return data;
-  } catch (error) {
-    console.error("Failed to fetch products:", error);
-    throw error;
-  }
-};
-
-export const getComments = async (productId) => {
-  try {
-    const response = await fetch(
-      `https://panda-market-api.vercel.app/products/${productId}/comments?limit=10`
-    );
-    if (!response.ok) {
-      throw new Error(`HTTP error: ${response.status}`);
-    }
-    const data = await response.json();
-    return data;
-  } catch (error) {
-    console.error("Failed to fetch products:", error);
-    throw error;
-  }
-};
diff --git a/src/api/itemApi.ts b/src/api/itemApi.ts
new file mode 100644
index 000000000..24b0515f4
--- /dev/null
+++ b/src/api/itemApi.ts
@@ -0,0 +1,74 @@
+import { IItem } from "../types";
+
+export async function getProducts(
+  params = {}
+): Promise<{ list: IItem[]; totalCount: number }> {
+  // URLSearchParams을 이용하면 파라미터 값을 자동으로 쉽게 인코딩할 수 있어요.
+  const query = new URLSearchParams(params).toString();
+
+  try {
+    const response = await fetch(
+      `https://panda-market-api.vercel.app/products?${query}`
+    );
+    if (!response.ok) {
+      throw new Error(`HTTP error: ${response.status}`);
+    }
+    const body = await response.json();
+    return body;
+  } catch (error) {
+    console.error("Failed to fetch products:", error);
+    throw error;
+  }
+}
+
+export async function getProductDetail(productId: string) {
+  // Parameter로 넣어줄 상품 아이디가 존재하는지 또는 정상적인지 확인 후에 호출하면 더 안전해요
+  if (!productId) {
+    throw new Error("Invalid product ID");
+  }
+
+  try {
+    const response = await fetch(
+      `https://panda-market-api.vercel.app/products/${productId}`
+    );
+    if (!response.ok) {
+      throw new Error(`HTTP error: ${response.status}`);
+    }
+    const body = await response.json();
+    return body;
+  } catch (error) {
+    console.error("Failed to fetch product detail:", error);
+    throw error;
+  }
+}
+
+// 상품 댓글 목록 조회 API에는 path parameter 'productId'와 함께 페이지당 보여줄 댓글 개수를 나타내는 'limit'을 query parameter로 보내주고 있어요.
+export async function getProductComments({
+  productId,
+  params,
+}: {
+  productId: string;
+  params: {
+    limit: string;
+  };
+}) {
+  // Parameter로 넣어줄 상품 아이디가 존재하는지 또는 정상적인지 확인 후에 호출하면 더 안전해요
+  if (!productId) {
+    throw new Error("Invalid product ID");
+  }
+
+  try {
+    const query = new URLSearchParams(params).toString();
+    const response = await fetch(
+      `https://panda-market-api.vercel.app/products/${productId}/comments?${query}`
+    );
+    if (!response.ok) {
+      throw new Error(`HTTP error: ${response.status}`);
+    }
+    const body = await response.json();
+    return body;
+  } catch (error) {
+    console.error("Failed to fetch product comments:", error);
+    throw error;
+  }
+}
diff --git a/src/assets/images/icons/ic_back.svg b/src/assets/images/icons/ic_back.svg
new file mode 100644
index 000000000..f8d47f89d
--- /dev/null
+++ b/src/assets/images/icons/ic_back.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.53333 3.6C6.03627 3.6 5.63333 4.00294 5.63333 4.5C5.63333 4.99706 6.03627 5.4 6.53333 5.4V3.6ZM6.53333 5.4H16.6667V3.6H6.53333V5.4ZM21.1 9.83333V10.9H22.9V9.83333H21.1ZM16.6667 15.3333H6.53333V17.1333H16.6667V15.3333ZM21.1 10.9C21.1 13.3485 19.1151 15.3333 16.6667 15.3333V17.1333C20.1092 17.1333 22.9 14.3426 22.9 10.9H21.1ZM16.6667 5.4C19.1151 5.4 21.1 7.38487 21.1 9.83333H22.9C22.9 6.39076 20.1092 3.6 16.6667 3.6V5.4Z" fill="white"/>
+<path d="M3 16.2333L10.2 12.5383L10.2 19.9284L3 16.2333Z" fill="white"/>
+</svg>
diff --git a/src/assets/images/icons/ic_kebab.svg b/src/assets/images/icons/ic_kebab.svg
new file mode 100644
index 000000000..dd7ed7f5e
--- /dev/null
+++ b/src/assets/images/icons/ic_kebab.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12.5" cy="6.5" r="1.5" fill="#9CA3AF"/>
+<circle cx="12.5" cy="11.5" r="1.5" fill="#9CA3AF"/>
+<circle cx="12.5" cy="16.5" r="1.5" fill="#9CA3AF"/>
+</svg>
diff --git a/src/assets/images/ui/empty-comments.svg b/src/assets/images/ui/empty-comments.svg
new file mode 100644
index 000000000..d9d2d590e
--- /dev/null
+++ b/src/assets/images/ui/empty-comments.svg
@@ -0,0 +1,17 @@
+<svg width="188" height="152" viewBox="0 0 188 152" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M75.9355 31.6912C79.4547 40.7827 73.188 51.6828 65.1874 54.7797C57.1869 57.8765 45.5438 53.909 42.0246 44.8175C38.5054 35.726 43.0666 22.3085 51.0671 19.2116C61.7353 15.0821 72.4163 22.5997 75.9355 31.6912Z" fill="#D1D5DB"/>
+<path d="M80.4463 31.2996C78.5493 40.862 86.6035 50.5168 95.0184 52.1862C103.433 53.8555 114.217 47.9377 116.114 38.3753C118.011 28.8128 111.202 16.384 102.787 14.7146C91.5663 12.4887 82.3432 21.7371 80.4463 31.2996Z" fill="#D1D5DB"/>
+<path d="M163.164 101.017C163.164 133.188 131.953 145.146 89.3797 145.146C46.806 145.146 16.3011 133.188 16.3011 101.017C16.3011 63.5947 46.806 30.4093 89.3797 30.4093C131.953 30.4093 163.164 60.7704 163.164 101.017Z" fill="#F3F4F6"/>
+<path d="M143.13 100.646C143.13 124.23 121.263 132.996 91.4359 132.996C61.6085 132.996 40.2366 124.23 40.2366 100.646C40.2366 73.2128 61.6085 48.8853 91.4359 48.8853C121.263 48.8853 143.13 71.1424 143.13 100.646Z" fill="#F9FAFB"/>
+<path d="M88.6195 97.356C88.6195 105.155 83.8638 113.711 77.2179 113.711C70.5721 113.711 59.8364 107.356 59.8364 95.706C59.8364 84.7618 71.4341 80.8696 83.4184 82.8681C90.7637 84.093 88.6195 89.557 88.6195 97.356Z" fill="#D1D5DB"/>
+<path d="M83.0604 96.568C83.0604 97.7379 82.7262 98.6863 81.0549 98.6863C79.3836 98.6863 79.0493 97.7379 79.0493 96.568C79.0493 95.3982 79.7178 94.4498 81.0549 94.4498C82.3919 94.4498 83.0604 95.3982 83.0604 96.568Z" fill="#F3F4F6"/>
+<path d="M108.287 97.356C108.287 105.155 112.695 113.711 118.854 113.711C125.014 113.711 134.965 107.356 134.965 95.706C134.965 84.7618 124.215 80.8696 113.107 82.8681C106.299 84.093 108.287 89.557 108.287 97.356Z" fill="#D1D5DB"/>
+<path d="M113.44 96.568C113.44 97.7379 113.749 98.6863 115.298 98.6863C116.848 98.6863 117.157 97.7379 117.157 96.568C117.157 95.3982 116.538 94.4498 115.298 94.4498C114.059 94.4498 113.44 95.3982 113.44 96.568Z" fill="#F3F4F6"/>
+<path d="M91.0611 108.715C90.6779 108.158 89.9153 108.017 89.3578 108.4C88.8003 108.783 88.6591 109.546 89.0424 110.103L91.0611 108.715ZM99.0345 106.96L100.193 106.561C100.023 106.067 99.5575 105.735 99.0345 105.735C98.5115 105.735 98.0461 106.067 97.8761 106.561L99.0345 106.96ZM109.027 110.103C109.41 109.546 109.269 108.783 108.711 108.4C108.154 108.017 107.391 108.158 107.008 108.715L109.027 110.103ZM89.0424 110.103C89.4107 110.639 90.0847 111.364 90.9903 111.962C91.9035 112.566 93.1178 113.084 94.5431 113.084V110.634C93.7228 110.634 92.9721 110.336 92.3414 109.919C91.7031 109.497 91.2543 108.996 91.0611 108.715L89.0424 110.103ZM94.5431 113.084C96.2694 113.084 97.5701 111.855 98.3974 110.761C99.2659 109.612 99.8814 108.264 100.193 107.358L97.8761 106.561C97.6262 107.288 97.1188 108.39 96.4434 109.283C95.7268 110.231 95.0626 110.634 94.5431 110.634V113.084ZM97.8761 107.358C98.1877 108.264 98.8031 109.612 99.6716 110.761C100.499 111.855 101.8 113.084 103.526 113.084V110.634C103.006 110.634 102.342 110.231 101.626 109.283C100.95 108.39 100.443 107.288 100.193 106.561L97.8761 107.358ZM103.526 113.084C104.951 113.084 106.166 112.566 107.079 111.962C107.984 111.364 108.658 110.639 109.027 110.103L107.008 108.715C106.815 108.996 106.366 109.497 105.728 109.919C105.097 110.336 104.346 110.634 103.526 110.634V113.084Z" fill="#D1D5DB"/>
+<path d="M106.513 105.701C106.513 106.849 101.265 108.314 99.5997 108.75C99.2705 108.837 98.9274 108.837 98.5982 108.75C96.9329 108.314 91.6852 106.849 91.6852 105.701C91.6852 104.336 95.7843 102.877 99.0989 102.877C102.414 102.877 106.513 104.336 106.513 105.701Z" fill="#D1D5DB"/>
+<path d="M100.187 68.2276C68.6752 70.2088 60.9894 60.1499 59.8365 55.9056L77.5138 46.048L97.4968 42.3514L125.166 56.7271C123.5 60.1499 119.565 67.0093 100.187 68.2276Z" fill="#D1D5DB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M93.201 145.248C133.571 145.248 163.166 133.29 163.166 101.118C163.166 60.8722 133.571 30.5111 93.201 30.5111C52.8311 30.5111 23.9053 63.6965 23.9053 101.118C23.9053 133.29 52.8311 145.248 93.201 145.248ZM91.6154 132.892C121.311 132.892 143.08 124.135 143.08 100.576C143.08 71.1032 121.311 48.8695 91.6154 48.8695C61.9202 48.8695 40.6431 73.1715 40.6431 100.576C40.6431 124.135 61.9202 132.892 91.6154 132.892Z" fill="#F3F4F6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.38824 74.671C11.8652 69.6581 19.9342 70.4896 23.2947 76.3102L28.2163 84.8346C31.5768 90.6552 28.2624 98.0589 21.6827 99.4296L19.5427 99.8754C19.4201 99.9009 19.2975 99.9241 19.1749 99.9448C19.1287 100.072 19.0701 100.196 19.0013 100.314C17.0527 103.664 16.125 111.381 25.726 120.312C35.0809 129.014 43.1679 129.647 46.8905 128.718C47.1544 128.652 47.4285 128.633 47.693 128.666L48.1802 127.7C51.2071 121.7 59.2164 120.414 63.9689 125.167L70.9291 132.127C75.6815 136.88 74.3963 144.889 68.3956 147.916L67.9461 148.143C67.8228 148.338 67.6469 148.508 67.4182 148.632C55.5661 155.064 28.9229 151.955 14.3493 131.689C-3.89153 106.323 -2.05391 84.755 5.13824 77.0594C5.26092 76.9282 5.40062 76.8274 5.5501 76.7558C5.6723 76.6013 5.79968 76.4497 5.93221 76.3013L7.38824 74.671Z" fill="#D1D5DB"/>
+<path d="M148.291 28.9947C150.266 24.6076 152.008 23.7117 154.641 23.3425C156.739 22.9629 158.428 22.493 159.123 20.9122C159.835 19.2938 159.057 17.6936 157.455 16.9441C155.895 16.303 153.985 16.7654 153.119 18.6307L147.248 16.0482C149.745 10.678 154.81 9.98637 159.649 12.1596C164.973 14.4562 167.686 18.7041 165.654 23.4254C164.259 26.4951 161.813 27.6652 158.667 28.0781C156.175 28.3298 154.738 29.0451 153.711 31.3786L153.479 31.9055L148.06 29.5216L148.291 28.9947ZM145.323 34.517C146.097 32.6562 148.248 31.8505 150.092 32.6617C151.861 33.4398 152.759 35.5864 151.948 37.4306C151.153 39.2373 148.948 40.064 147.179 39.2859C145.334 38.4748 144.491 36.3071 145.323 34.517Z" fill="#D1D5DB"/>
+<path d="M165.903 41.6951C168.484 39.0764 169.97 38.8974 171.955 39.3328C173.56 39.6187 174.895 39.731 175.814 38.7831C176.754 37.8126 176.622 36.459 175.673 35.4961C174.726 34.622 173.234 34.4455 172.118 35.5521L168.597 32.1406C171.814 28.9562 175.628 29.8073 178.517 32.651C181.721 35.7119 182.536 39.4772 179.825 42.3202C178.009 44.149 175.946 44.3371 173.581 43.7966C171.729 43.3146 170.509 43.4449 169.153 44.8442L168.847 45.1602L165.597 42.0111L165.903 41.6951ZM162.308 44.8632C163.357 43.7354 165.113 43.73 166.219 44.8016C167.279 45.8294 167.352 47.6062 166.28 48.7121C165.23 49.7954 163.43 49.8016 162.37 48.7737C161.264 47.7022 161.236 45.9246 162.308 44.8632Z" fill="#D1D5DB"/>
+</svg>
diff --git a/src/assets/images/ui/ic_profile.svg b/src/assets/images/ui/ic_profile.svg
new file mode 100644
index 000000000..7445a45cf
--- /dev/null
+++ b/src/assets/images/ui/ic_profile.svg
@@ -0,0 +1,24 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_82_1708)">
+<circle cx="20" cy="20" r="20" fill="#D1D5DB"/>
+<path d="M19.374 8.72955C19.8844 10.4933 18.535 12.4367 16.9881 12.8874C15.4413 13.338 13.328 12.4034 12.8176 10.6396C12.3073 8.87592 13.3787 6.43217 14.9255 5.98153C16.9881 5.38063 18.8637 6.96583 19.374 8.72955Z" fill="white"/>
+<path d="M20.2247 8.72955C19.7143 10.4933 21.0638 12.4367 22.6106 12.8874C24.1575 13.338 26.2708 12.4034 26.7811 10.6396C27.2915 8.87592 26.2201 6.43217 24.6732 5.98153C22.6106 5.38063 20.7351 6.96583 20.2247 8.72955Z" fill="white"/>
+<path d="M29.8015 21.6147C29.8015 26.1007 25.4028 27.7683 19.4026 27.7683C13.4024 27.7683 9.10321 26.1007 9.10321 21.6147C9.10321 16.3964 13.4024 11.7689 19.4026 11.7689C25.4028 11.7689 29.8015 16.0026 29.8015 21.6147Z" fill="white"/>
+<path d="M17.4167 20.7285C17.4167 22.1978 16.4736 23.8096 15.1558 23.8096C13.8379 23.8096 11.709 22.6124 11.709 20.4177C11.709 18.3559 14.0089 17.6227 16.3853 17.9992C17.8419 18.2299 17.4167 19.2593 17.4167 20.7285Z" fill="#D1D5DB"/>
+<path d="M16.3158 20.5796C16.3158 20.8 16.2495 20.9786 15.9181 20.9786C15.5867 20.9786 15.5204 20.8 15.5204 20.5796C15.5204 20.3592 15.653 20.1805 15.9181 20.1805C16.1832 20.1805 16.3158 20.3592 16.3158 20.5796Z" fill="white"/>
+<path d="M21.4257 20.7284C21.4257 22.1976 22.3688 23.8094 23.6867 23.8094C25.0045 23.8094 27.1334 22.6123 27.1334 20.4175C27.1334 18.3558 24.8336 17.6226 22.4571 17.9991C21.0006 18.2298 21.4257 19.2592 21.4257 20.7284Z" fill="#D1D5DB"/>
+<path d="M22.5283 20.5796C22.5283 20.8 22.5946 20.9786 22.926 20.9786C23.2574 20.9786 23.3237 20.8 23.3237 20.5796C23.3237 20.3592 23.1911 20.1805 22.926 20.1805C22.6609 20.1805 22.5283 20.3592 22.5283 20.5796Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.7574 30.0001C27.7508 30.0001 33.6107 27.7473 33.6107 21.6867C33.6107 14.1048 27.7508 8.38513 19.7574 8.38513C11.7641 8.38513 6.0368 14.6369 6.0368 21.6867C6.0368 27.7473 11.7641 30.0001 19.7574 30.0001ZM19.4429 27.6725C25.3226 27.6725 29.633 26.0228 29.633 21.5845C29.633 16.0322 25.3226 11.8437 19.4429 11.8437C13.5632 11.8437 9.35028 16.4219 9.35028 21.5845C9.35028 26.0228 13.5632 27.6725 19.4429 27.6725Z" fill="white"/>
+<mask id="mask0_82_1708" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="40">
+<circle cx="20" cy="20" r="20" fill="#9CA3AF"/>
+</mask>
+<g mask="url(#mask0_82_1708)">
+<ellipse cx="19.5833" cy="37.5" rx="11.25" ry="12.5" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_82_1708">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/Layout/Header.css b/src/components/Layout/Header.css
index 1bc2b02c5..e65c9199a 100644
--- a/src/components/Layout/Header.css
+++ b/src/components/Layout/Header.css
@@ -13,7 +13,7 @@
   gap: 8px;
   font-weight: bold;
   font-size: 16px;
-  color: #4b5563;
+  color: var(--gray-600);
 }
 
 .globalHeader nav ul li a:hover {
diff --git a/src/components/Layout/Header.jsx b/src/components/Layout/Header.tsx
similarity index 96%
rename from src/components/Layout/Header.jsx
rename to src/components/Layout/Header.tsx
index 46cd493bf..2da33a7f1 100644
--- a/src/components/Layout/Header.jsx
+++ b/src/components/Layout/Header.tsx
@@ -4,7 +4,7 @@ import { Link, NavLink, useLocation } from "react-router-dom";
 import "./Header.css";
 
 // react-router-dom의 NavLink를 이용하면 활성화된 네비게이션 항목을 하이라이트해줄 수 있어요!
-function getLinkStyle({ isActive }) {
+function getLinkStyle({ isActive }: { isActive: boolean }) {
   return { color: isActive ? "var(--blue)" : undefined };
 }
 
diff --git a/src/components/UI/DeleteButton.jsx b/src/components/UI/DeleteButton.tsx
similarity index 56%
rename from src/components/UI/DeleteButton.jsx
rename to src/components/UI/DeleteButton.tsx
index 825c567eb..6409dc9ea 100644
--- a/src/components/UI/DeleteButton.jsx
+++ b/src/components/UI/DeleteButton.tsx
@@ -1,9 +1,9 @@
-import React from "react";
+import React, { MouseEvent } from "react";
 import styled from "styled-components";
 import { ReactComponent as CloseIcon } from "../../assets/images/icons/ic_x.svg";
 
 const Button = styled.button`
-  background-color: ${({ theme }) => theme.colors.gray[0]};
+  background-color: ${({ theme }) => theme.colors.gray[400]};
   width: 20px;
   height: 20px;
   border-radius: 50%;
@@ -12,11 +12,16 @@ const Button = styled.button`
   align-items: center;
 
   &:hover {
-    background-color: ${({ theme }) => theme.colors.blue[0]};
+    background-color: ${({ theme }) => theme.colors.blue.primary};
   }
 `;
 
-function DeleteButton({ onClick, label }) {
+interface DeleteButtonProps {
+  onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+  label: string;
+}
+
+function DeleteButton({ onClick, label }: DeleteButtonProps) {
   return (
     <Button aria-label={`${label} 삭제`} onClick={onClick}>
       <CloseIcon />
diff --git a/src/components/UI/DropdownMenu.css b/src/components/UI/DropdownMenu.css
index da51c7900..1eeae960e 100644
--- a/src/components/UI/DropdownMenu.css
+++ b/src/components/UI/DropdownMenu.css
@@ -3,7 +3,7 @@
 }
 
 .sortDropdownTriggerButton {
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--gray-200);
   border-radius: 12px;
   padding: 9px;
   margin-left: 8px;
@@ -15,16 +15,16 @@
   right: 0;
   background: #fff;
   border-radius: 8px;
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--gray-200);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   z-index: 99;
 }
 
 .dropdownItem {
   padding: 12px 44px;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--gray-200);
   font-size: 16px;
-  color: #1f2937;
+  color: var(--gray-800);
   cursor: pointer;
 }
 
diff --git a/src/components/UI/DropdownMenu.jsx b/src/components/UI/DropdownMenu.tsx
similarity index 88%
rename from src/components/UI/DropdownMenu.jsx
rename to src/components/UI/DropdownMenu.tsx
index 9a883fece..7acdaa802 100644
--- a/src/components/UI/DropdownMenu.jsx
+++ b/src/components/UI/DropdownMenu.tsx
@@ -2,7 +2,11 @@ import React, { useState } from "react";
 import "./DropdownMenu.css";
 import { ReactComponent as SortIcon } from "../../assets/images/icons/ic_sort.svg";
 
-function DropdownMenu({ onSortSelection }) {
+interface DropdownMenuProps {
+  onSortSelection: (v: string) => void;
+}
+
+function DropdownMenu({ onSortSelection }: DropdownMenuProps) {
   const [isDropdownVisible, setIsDropdownVisible] = useState(false);
 
   const toggleDropdown = () => {
diff --git a/src/components/UI/Icon.tsx b/src/components/UI/Icon.tsx
new file mode 100644
index 000000000..601dc5c81
--- /dev/null
+++ b/src/components/UI/Icon.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import styled from "styled-components";
+
+interface IIconWrapper {
+  $size?: number;
+  $fillColor?: string;
+  $outlineColor?: string;
+}
+
+const IconWrapper = styled.div<IIconWrapper>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    fill: ${({ $fillColor }) => $fillColor || "current"}; // 색 채움
+    width: ${({ $size }) => ($size ? `${$size}px` : "auto")};
+    height: ${({ $size }) => ($size ? `${$size}px` : "auto")};
+  }
+
+  svg path {
+    stroke: ${({ $fillColor, $outlineColor }) =>
+      $fillColor || $outlineColor || "currentColor"};
+  }
+`;
+
+interface IconProps {
+  IconComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  size?: number;
+  fillColor?: string;
+  outlineColor?: string;
+}
+
+const Icon = ({ IconComponent, size, fillColor, outlineColor }: IconProps) => (
+  <IconWrapper $size={size} $fillColor={fillColor} $outlineColor={outlineColor}>
+    <IconComponent />
+  </IconWrapper>
+);
+
+export default Icon;
diff --git a/src/components/UI/ImageUpload.jsx b/src/components/UI/ImageUpload.tsx
similarity index 86%
rename from src/components/UI/ImageUpload.jsx
rename to src/components/UI/ImageUpload.tsx
index 4bf12e1c8..8a9620bae 100644
--- a/src/components/UI/ImageUpload.jsx
+++ b/src/components/UI/ImageUpload.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { ChangeEvent, useState } from "react";
 import { Label } from "./InputItem";
 import styled, { css } from "styled-components";
 import { ReactComponent as PlusIcon } from "../../assets/images/icons/ic_plus.svg";
@@ -35,8 +35,8 @@ const squareStyles = css`
 
 // file input과 연관 짓기 위해 버튼이 대신 label로 설정
 const UploadButton = styled.label`
-  background-color: ${({ theme }) => theme.colors.gray[1]};
-  color: ${({ theme }) => theme.colors.gray[0]};
+  background-color: ${({ theme }) => theme.colors.gray[100]};
+  color: ${({ theme }) => theme.colors.gray[400]};
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -46,13 +46,13 @@ const UploadButton = styled.label`
   cursor: pointer; // 버튼이 아닌 label을 사용한 경우 별도로 추가해 주세요
 
   &:hover {
-    background-color: ${({ theme }) => theme.colors.gray[2]};
+    background-color: ${({ theme }) => theme.colors.gray[50]};
   }
 
   ${squareStyles}
 `;
 
-const ImagePreview = styled.div`
+const ImagePreview = styled.div<{ src: string }>`
   background-image: url(${({ src }) => src});
   background-size: cover;
   background-position: center;
@@ -72,11 +72,11 @@ const HiddenFileInput = styled.input`
   display: none;
 `;
 
-function ImageUpload({ title }) {
+function ImageUpload({ title }: { title: string }) {
   const [imagePreviewUrl, setImagePreviewUrl] = useState("");
 
-  const handleImageChange = (event) => {
-    const file = event.target.files[0];
+  const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
     if (file) {
       // 미리보기 주소 값(Object URL) 생성
       const imageUrl = URL.createObjectURL(file);
diff --git a/src/components/UI/InputItem.jsx b/src/components/UI/InputItem.tsx
similarity index 71%
rename from src/components/UI/InputItem.jsx
rename to src/components/UI/InputItem.tsx
index 5b62734b4..4d8cd8ae0 100644
--- a/src/components/UI/InputItem.jsx
+++ b/src/components/UI/InputItem.tsx
@@ -1,12 +1,12 @@
-import React from "react";
+import React, { ChangeEvent, KeyboardEvent } from "react";
 import styled, { css } from "styled-components";
 
 // input과 textarea의 스타일이 대부분 중복되기 때문에 styled-components의 css 헬퍼 함수를 사용해 공통 스타일을 정의했어요.
 // `${}`로 정의된 스타일을 삽입하면 여러 styled component 내에서 코드를 재사용할 수 있어요.
 const inputStyle = css`
   padding: 16px 24px;
-  background-color: ${({ theme }) => theme.colors.gray[1]};
-  color: ${({ theme }) => theme.colors.black};
+  background-color: ${({ theme }) => theme.colors.gray[100]};
+  color: ${({ theme }) => theme.colors.gray[800]};
   border: none;
   border-radius: 12px;
   font-size: 16px;
@@ -14,11 +14,11 @@ const inputStyle = css`
   width: 100%;
 
   &::placeholder {
-    color: ${({ theme }) => theme.colors.gray[0]};
+    color: ${({ theme }) => theme.colors.gray[400]};
   }
 
   &:focus {
-    outline-color: ${({ theme }) => theme.colors.blue[0]};
+    outline-color: ${({ theme }) => theme.colors.blue.primary};
   }
 `;
 
@@ -43,6 +43,21 @@ const TextArea = styled.textarea`
   resize: none; // 우측 하단 코너의 textarea 영역 크기 조절 기능을 없애줍니다
 `;
 
+interface InputItemProps {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => void;
+  placeholder: string;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+
+  //   e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>
+  // ) => void;
+  isTextArea?: boolean;
+}
+
 function InputItem({
   id,
   label,
@@ -51,7 +66,7 @@ function InputItem({
   placeholder,
   onKeyDown,
   isTextArea,
-}) {
+}: InputItemProps) {
   return (
     <div>
       {label && <Label htmlFor={id}>{label}</Label>}
diff --git a/src/components/UI/LoadingSpinner.tsx b/src/components/UI/LoadingSpinner.tsx
new file mode 100644
index 000000000..6a1e26636
--- /dev/null
+++ b/src/components/UI/LoadingSpinner.tsx
@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+import { PulseLoader } from "react-spinners";
+
+// 렌더링 중인 컴포넌트들을 가리기 위해 불투명한 흰색 바탕 위에 반투명한 검정 바탕의 overlay를 씌웠어요
+const MaskedBackground = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  z-index: 9998;
+`;
+
+const SpinnerOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.2);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+`;
+
+// 데이터 로딩 중임을 사용자에게 알려주는 UI
+// - 대표적으로 로딩 스피너가 많이 사용되고, 라이브러리 또는 이미지(gif, lottie animation) 등으로 구현할 수 있어요.
+// - 요소가 렌더링되기 전까지 비슷한 형태의 placeholder 레이아웃를 띄워주는 `skeleton` 로딩도 선호되는 방식이에요.
+// - 이번 미션에서는 `react-spinners`라는 라이브러리를 이용해 간단한 로딩 스피너를 적용해 볼게요.
+
+const LoadingSpinner = ({
+  size = 20,
+  color = "var(--blue)",
+  minLoadTime = 500,
+  isLoading = false,
+}) => {
+  const [isVisible, setIsVisible] = useState(isLoading);
+
+  // 로딩이 너무 빨라서 로딩 스피너가 순간적으로 나타났다 사라지는 것을 방지하기 위해 설정된 최소시간 동안은 스피너가 떠있도록 했어요.
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsVisible(false);
+    }, minLoadTime);
+
+    return () => clearTimeout(timer);
+  }, [minLoadTime]);
+
+  return isVisible ? (
+    <MaskedBackground>
+      <SpinnerOverlay>
+        <PulseLoader size={size} color={color} />
+      </SpinnerOverlay>
+    </MaskedBackground>
+  ) : null;
+};
+
+export default LoadingSpinner;
diff --git a/src/components/UI/PaginationBar.css b/src/components/UI/PaginationBar.css
index 1841297a9..f9f394f77 100644
--- a/src/components/UI/PaginationBar.css
+++ b/src/components/UI/PaginationBar.css
@@ -6,11 +6,11 @@
 }
 
 .paginationButton {
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--gray-200);
   border-radius: 50%;
   width: 40px;
   height: 40px;
-  color: #6b7280;
+  color: var(--gray-500);
   font-weight: 600;
   font-size: 16px;
   display: flex;
diff --git a/src/components/UI/PaginationBar.jsx b/src/components/UI/PaginationBar.tsx
similarity index 87%
rename from src/components/UI/PaginationBar.jsx
rename to src/components/UI/PaginationBar.tsx
index 4116ebb40..b170d434f 100644
--- a/src/components/UI/PaginationBar.jsx
+++ b/src/components/UI/PaginationBar.tsx
@@ -3,9 +3,17 @@ import "./PaginationBar.css";
 import { ReactComponent as LeftArrow } from "../../assets/images/icons/arrow_left.svg";
 import { ReactComponent as RightArrow } from "../../assets/images/icons/arrow_right.svg";
 
-const PaginationBar = ({ totalPageNum, activePageNum, onPageChange }) => {
+const PaginationBar = ({
+  totalPageNum,
+  activePageNum,
+  onPageChange,
+}: {
+  totalPageNum: number;
+  activePageNum: number;
+  onPageChange: (v: number) => void;
+}) => {
   const maxVisiblePages = 5;
-  let startPage;
+  let startPage: number;
 
   if (totalPageNum <= maxVisiblePages) {
     startPage = 1;
diff --git a/src/components/UI/TagInput.jsx b/src/components/UI/TagInput.tsx
similarity index 85%
rename from src/components/UI/TagInput.jsx
rename to src/components/UI/TagInput.tsx
index 09fea6eaa..ac11933f1 100644
--- a/src/components/UI/TagInput.jsx
+++ b/src/components/UI/TagInput.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { KeyboardEvent, useState } from "react";
 import styled from "styled-components";
 import InputItem from "./InputItem";
 import { FlexContainer } from "../../styles/CommonStyles";
@@ -12,8 +12,8 @@ const TagButtonsSection = styled.div`
 `;
 
 const Tag = styled(FlexContainer)`
-  background-color: ${({ theme }) => theme.colors.gray[2]};
-  color: ${({ theme }) => theme.colors.black};
+  background-color: ${({ theme }) => theme.colors.gray[50]};
+  color: ${({ theme }) => theme.colors.gray[800]};
   padding: 14px 14px 14px 16px;
   border-radius: 999px;
   min-width: 100px;
@@ -30,11 +30,17 @@ const TagText = styled.span`
   white-space: nowrap;
 `;
 
-function TagInput({ tags, onAddTag, onRemoveTag }) {
-  const [input, setInput] = useState("");
+interface TagInputProps {
+  tags: string[];
+  onAddTag: (tag: string) => void;
+  onRemoveTag: (tag: string) => void;
+}
+
+function TagInput({ tags, onAddTag, onRemoveTag }: TagInputProps) {
+  const [input, setInput] = useState<string>("");
 
   // 엔터 키 누르면 tags 배열에 input 값을 추가
-  const onPressEnter = (event) => {
+  const onPressEnter = (event: KeyboardEvent<HTMLInputElement>) => {
     // 여러 자모를 결합해 하나의 글자를 만드는 아시아 언어권에서는 IME(입력 메소드 에디터)를 통해 브라우저에 글자를 입력해요.
     // 사용자가 글자를 완전히 조합하기 전에는 isComposing의 값이 true로 설정됩니다.
     // 한글 입력 시에 마지막 글자가 하이라이트되는 현상을 보신 적 있을 거예요. 이게 바로 isComposing이 true인 상태로, 아직 입력이 확정되지 않았음을 시각적으로 나타내는 거예요.
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index 0652386c4..000000000
--- a/src/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
-import "./styles/global.css"; // index.js에서 global stylesheet을 import하면 전역적으로 스타일이 적용돼요
-import { ThemeProvider } from "styled-components";
-import theme from "./styles/theme";
-import GlobalStyle from "./styles/GlobalStyle";
-
-const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(
-  <React.StrictMode>
-    {/* 전역 스타일 관련 코드들은 컴포넌트가 렌더링되기 전에 최상위 수준에서 처리되도록 index.js에서 로드하는 것이 좋아요 */}
-    {/* ThemeProvider를 사용하면 styled-components 내에서 props.theme을 통해 저장된 스타일 정보를 넘겨 받아 간단하게 일관된 스타일을 적용할 수 있어요 */}
-    <ThemeProvider theme={theme}>
-      {/* Styled-components에서는 createGlobalStyle 함수로 생성된 GlobalStyle 컴포넌트를 통해 전역적으로 CSS를 적용할 수 있어요 */}
-      <GlobalStyle />
-      <App />
-    </ThemeProvider>
-  </React.StrictMode>
-);
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 000000000..b92b8940d
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./styles/global.css"; // index.js에서 global stylesheet을 import하면 전역적으로 스타일이 적용돼요
+import { ThemeProvider } from "styled-components";
+import theme from "./styles/theme";
+import GlobalStyle from "./styles/GlobalStyle";
+
+const rootElement = document.getElementById("root") as HTMLElement;
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <App />
+    </ThemeProvider>
+  </React.StrictMode>
+);
diff --git a/src/pages/AddItemPage/AddItemPage.jsx b/src/pages/AddItemPage/AddItemPage.tsx
similarity index 94%
rename from src/pages/AddItemPage/AddItemPage.jsx
rename to src/pages/AddItemPage/AddItemPage.tsx
index d6699aaf2..b302d38c2 100644
--- a/src/pages/AddItemPage/AddItemPage.jsx
+++ b/src/pages/AddItemPage/AddItemPage.tsx
@@ -23,21 +23,22 @@ const InputSection = styled.div`
     gap: 24px;
   }
 `;
+type Tag = string;
 
 function AddItemPage() {
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [price, setPrice] = useState("");
-  const [tags, setTags] = useState([]);
+  const [tags, setTags] = useState<Tag[]>([]);
 
   // 중복 등록 막기 위해 tags 배열에 없는 것 확인하고 삽입
-  const addTag = (tag) => {
+  const addTag = (tag: Tag) => {
     if (!tags.includes(tag)) {
       setTags([...tags, tag]);
     }
   };
 
-  const removeTag = (tagToRemove) => {
+  const removeTag = (tagToRemove: Tag) => {
     setTags(tags.filter((tag) => tag !== tagToRemove));
   };
 
diff --git a/src/pages/CommunityFeedPage/CommunityFeedPage.jsx b/src/pages/CommunityFeedPage/CommunityFeedPage.tsx
similarity index 100%
rename from src/pages/CommunityFeedPage/CommunityFeedPage.jsx
rename to src/pages/CommunityFeedPage/CommunityFeedPage.tsx
diff --git a/src/pages/HomePage/HomePage.jsx b/src/pages/HomePage/HomePage.tsx
similarity index 100%
rename from src/pages/HomePage/HomePage.jsx
rename to src/pages/HomePage/HomePage.tsx
diff --git a/src/pages/ItemPage/ItemPage.tsx b/src/pages/ItemPage/ItemPage.tsx
new file mode 100644
index 000000000..159df6eea
--- /dev/null
+++ b/src/pages/ItemPage/ItemPage.tsx
@@ -0,0 +1,87 @@
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import styled from "styled-components";
+import { Container, LineDivider, StyledLink } from "../../styles/CommonStyles";
+import { getProductDetail } from "../../api/itemApi";
+import ItemProfileSection from "./components/ItemProfileSection";
+import ItemCommentSection from "./components/ItemCommentSection";
+import { ReactComponent as BackIcon } from "../../assets/images/icons/ic_back.svg";
+import LoadingSpinner from "../../components/UI/LoadingSpinner";
+
+const BackToMarketPageLink = styled(StyledLink)`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0 auto;
+`;
+
+function ItemPage() {
+  const [product, setProduct] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // react-router-dom의 useParams 훅을 사용해 URL의 path parameter(상품 아이디)를 가져오세요.
+  // Route에서 정의한 path parameter의 이름과 useParams 훅에서 사용하는 변수명이 일치해야 정상적으로 추출돼요.
+  const { productId } = useParams();
+
+  useEffect(() => {
+    async function fetchProduct() {
+      if (!productId) {
+        setError("상품 아이디가 제공되지 않았어요.");
+        setIsLoading(false);
+        return;
+      }
+
+      setIsLoading(true);
+      try {
+        const data = await getProductDetail(productId);
+        if (!data) {
+          throw new Error("해당 상품의 데이터를 찾을 수 없습니다.");
+        }
+        setProduct(data);
+      } catch (error: any) {
+        setError(error.message);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    fetchProduct();
+  }, [productId]);
+
+  // 데이터 fetching 오류 발생 시 UI
+  // - 만약 서버에서 사용자 친화적으로 작성된 오류 메세지를 보내주지 않는다면 호출된 오류 메세지를 그대로 노출하는 것보다는 프론트단에서 별도의 내용을 넣어주는 것이 사용성에 좋아요
+  if (error) {
+    alert(`오류: ${error}`);
+  }
+
+  if (!productId || !product) return null;
+
+  return (
+    <>
+      {/* 데이터를 불러올 동안 로딩 스피너 표시 */}
+      <LoadingSpinner isLoading={isLoading} />
+
+      <Container>
+        <ItemProfileSection product={product} />
+
+        <LineDivider />
+
+        <ItemCommentSection productId={productId} />
+
+        {/* Styled-components에 사용자 정의 prop을 전달해 스타일링 시 참고사항:
+        - 요소에 해당 HTML 태그의 기본 속성이 아닌 것이 추가되면 콘솔창에 "unknown prop"이 전달되고 있다는 경고가 뜰 수 있어요.
+        - prop 이름 앞에 `$`를 붙여주면 styled-components가 `transient props`로 인식하고 DOM 요소에 전달되지 않도록 필터링해요.
+      */}
+        <BackToMarketPageLink $pill="true" to="/items">
+          목록으로 돌아가기
+          <BackIcon />
+        </BackToMarketPageLink>
+      </Container>
+    </>
+  );
+}
+
+export default ItemPage;
diff --git a/src/pages/ItemPage/components/CommentThread.tsx b/src/pages/ItemPage/components/CommentThread.tsx
new file mode 100644
index 000000000..17382cfb1
--- /dev/null
+++ b/src/pages/ItemPage/components/CommentThread.tsx
@@ -0,0 +1,165 @@
+import React, { useEffect, useState } from "react";
+import { getProductComments } from "../../../api/itemApi";
+import styled from "styled-components";
+import { ReactComponent as EmptyStateImage } from "../../../assets/images/ui/empty-comments.svg";
+import { ReactComponent as SeeMoreIcon } from "../../../assets/images/icons/ic_kebab.svg";
+// 참고: SVG 이미지 파일을 ReactComponent로 import하는 것을 추천하지만, DefaultProfileImage는 image source로 사용하기 위해 그대로 불러왔어요.
+import DefaultProfileImage from "../../../assets/images/ui/ic_profile.svg";
+import { LineDivider } from "../../../styles/CommonStyles";
+import { formatUpdatedAt } from "../../../utils/dateUtils";
+import { IComment } from "../../../types";
+
+const CommentContainer = styled.div`
+  padding: 24px 0;
+  position: relative;
+`;
+
+// 더보기 버튼을 댓글 아이템 우측 상단에 포지셔닝
+const SeeMoreButton = styled.button`
+  position: absolute;
+  right: 0;
+`;
+
+const CommentContent = styled.p`
+  font-size: 16px;
+  line-height: 140%;
+  margin-bottom: 24px;
+`;
+
+const AuthorProfile = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+// Mock data에서 보내주는 프로필 사진은 이미 원형이지만, 혹시 원이 아닌 이미지를 표시해야 하는 경우를 대비해 border-radius를 적용하고 이미지가 주어진 원 내에서 비율을 유지하면서 삽입되도록 함
+const UserProfileImage = styled.img`
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+`;
+
+const Username = styled.p`
+  color: var(--gray-600);
+  font-size: 14px;
+  margin-bottom: 4px;
+`;
+
+const Timestamp = styled.p`
+  color: ${({ theme }) => theme.colors.gray[400]};
+  font-size: 12px;
+`;
+
+const CommentItem = ({ item }: { item: IComment }) => {
+  const authorInfo = item.writer;
+  // 업데이트 시간 표기를 위한 util function을 만들었으니 dateUtils.js 파일에서 꼭 설명을 확인해 주세요!
+  const formattedTimestamp = formatUpdatedAt(item.updatedAt);
+
+  return (
+    <>
+      <CommentContainer>
+        {/* 참고: 더보기 버튼 기능은 추후 요구사항에 따라 추가 예정 */}
+        <SeeMoreButton>
+          <SeeMoreIcon />
+        </SeeMoreButton>
+
+        <CommentContent>{item.content}</CommentContent>
+
+        <AuthorProfile>
+          <UserProfileImage
+            src={authorInfo.image || DefaultProfileImage} // 등록된 프로필 사진이 없을 경우 기본 프로필 아이콘 사용
+            alt={`${authorInfo.nickname}님의 프로필 사진`}
+          />
+
+          <div>
+            <Username>{authorInfo.nickname}</Username>
+            <Timestamp>{formattedTimestamp}</Timestamp>
+          </div>
+        </AuthorProfile>
+      </CommentContainer>
+
+      <LineDivider $margin="0" />
+    </>
+  );
+};
+
+const EmptyStateContainer = styled.div`
+  margin: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center; // flex-direction이 column일 때는 main axis가 세로축이기 때문에 align-items: center; 를 적용해야 자식 요소들이 horizontally 가운데 정렬돼요.
+  gap: 24px;
+`;
+
+const EmptyStateText = styled.p`
+  color: ${({ theme }) => theme.colors.gray[400]};
+  font-size: 16px;
+  line-height: 24px;
+`;
+
+// Empty States: 보여줄 데이터가 없을 때 placeholder 역할을 할 UI를 넣어주세요.
+const EmptyState = () => {
+  return (
+    <EmptyStateContainer>
+      <EmptyStateImage />
+      <EmptyStateText>아직 문의가 없습니다.</EmptyStateText>
+    </EmptyStateContainer>
+  );
+};
+
+const ThreadContainer = styled.div`
+  margin-bottom: 40px;
+`;
+
+function CommentThread({ productId }: { productId: string }) {
+  const [comments, setComments] = useState<IComment[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!productId) return;
+
+    const fetchComments = async () => {
+      setIsLoading(true);
+      const params = {
+        limit: "10", // 페이지당 보여줄 댓글 개수 (참고: 요구사항에 아직 댓글란 pagination 기능이 없기 때문에 임의로 10으로 설정했어요.)
+      };
+
+      try {
+        const data = await getProductComments({ productId, params });
+        setComments(data.list);
+        setError(null);
+      } catch (error) {
+        console.error("Error fetching comments:", error);
+        setError("상품의 댓글을 불러오지 못했어요.");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchComments();
+  }, [productId]);
+
+  if (isLoading) {
+    return <div>상품 댓글 로딩중...</div>;
+  }
+
+  if (error) {
+    return <div>오류: {error}</div>;
+  }
+
+  if (comments && !comments.length) {
+    return <EmptyState />;
+  } else {
+    return (
+      <ThreadContainer>
+        {comments.map((item) => (
+          <CommentItem item={item} key={`comment-${item.id}`} />
+        ))}
+      </ThreadContainer>
+    );
+  }
+}
+
+export default CommentThread;
diff --git a/src/pages/ItemPage/components/ItemCommentSection.tsx b/src/pages/ItemPage/components/ItemCommentSection.tsx
new file mode 100644
index 000000000..c5158c736
--- /dev/null
+++ b/src/pages/ItemPage/components/ItemCommentSection.tsx
@@ -0,0 +1,88 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import { Button } from "../../../styles/CommonStyles";
+import CommentThread from "./CommentThread";
+
+const COMMENT_PLACEHOLDER =
+  "개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다.";
+
+const CommentInputSection = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const SectionTitle = styled.h1`
+  font-size: 16px;
+  font-weight: 600;
+`;
+
+// TODO: InputItem 컴포넌트의 textarea와 겹치므로 common styles에 추가할 것
+const TextArea = styled.textarea`
+  background-color: ${({ theme }) => theme.colors.gray[100]};
+  border: none;
+  border-radius: 12px;
+  padding: 16px 24px;
+  height: 104px; // 디자인에 맞춰 textarea 영역의 기본 높이를 설정해 주세요
+  resize: none; // 우측 하단 코너의 textarea 영역 크기 조절 기능을 없애줍니다
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.gray[400]};
+    font-size: 14px;
+    line-height: 24px;
+
+    @media ${({ theme }) => theme.mediaQuery.tablet} {
+      font-size: 16px;
+    }
+  }
+
+  &:focus {
+    outline-color: ${({ theme }) => theme.colors.blue.primary};
+  }
+`;
+
+const PostCommentButton = styled(Button)`
+  align-self: flex-end;
+  font-weight: 600;
+  font-size: 14px;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: 16px;
+  }
+`;
+
+function ItemCommentSection({ productId }: { productId: string }) {
+  const [comment, setComment] = useState("");
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setComment(e.target.value);
+  };
+
+  const handlePostComment = () => {};
+
+  return (
+    <>
+      <CommentInputSection>
+        <SectionTitle>문의하기</SectionTitle>
+
+        <TextArea
+          placeholder={COMMENT_PLACEHOLDER}
+          value={comment}
+          onChange={handleInputChange}
+        />
+
+        {/* 참고: 요구사항에 따라 추후 댓글 등록 API 추가 예정 */}
+        <PostCommentButton
+          onClick={handlePostComment}
+          disabled={!comment.trim()}
+        >
+          등록
+        </PostCommentButton>
+      </CommentInputSection>
+
+      <CommentThread productId={productId} />
+    </>
+  );
+}
+
+export default ItemCommentSection;
diff --git a/src/pages/ItemPage/components/ItemProfileSection.tsx b/src/pages/ItemPage/components/ItemProfileSection.tsx
new file mode 100644
index 000000000..141804bbd
--- /dev/null
+++ b/src/pages/ItemPage/components/ItemProfileSection.tsx
@@ -0,0 +1,152 @@
+import React from "react";
+import styled from "styled-components";
+import { LineDivider } from "../../../styles/CommonStyles";
+import TagDisplay from "./TagDisplay";
+import LikeButton from "./LikeButton";
+import { ReactComponent as SeeMoreIcon } from "../../../assets/images/icons/ic_kebab.svg";
+import { IProduct } from "../../../types";
+
+const SectionContainer = styled.section`
+  /* 모바일에선 이미지와 상세내용 섹션이 위아래로 배치되어 있다가, 타블렛부터는 같은 줄로 flex */
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    flex-direction: row;
+  }
+
+  @media ${({ theme }) => theme.mediaQuery.desktop} {
+    gap: 24px;
+  }
+`;
+
+const ItemImage = styled.div`
+  width: 100%;
+  height: 100%;
+
+  img {
+    border-radius: 12px; // 방법 1: 이미지에 직접 border-radius 적용 OR 방법 2: 이미지 wrapper div에 border-radius 적용하는 경우엔 overflow: hidden 필요
+    width: 100%;
+    height: auto; // 이미지 사이즈 변경 시 비율 유지
+  }
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    width: 40%;
+    max-width: 486px;
+  }
+`;
+
+const ItemDetailsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1;
+  /* 만약 LikeButton이 가로로 스트레칭되는 이슈가 있었다면?
+    - Flexbox에서 부모 요소에 flex-direction: column;이 설정되어 있고, align-items가 명시적으로 지정되지 않았다면 기본값인 stretch가 적용되어 자식 요소들이 교차축(가로축)을 따라 스트레칭돼요.
+    - 자식 요소에 width가 지정되지 않았다면 자식 요소는 교차축에 맞춰 부모 컨테이너의 전체 너비를 채우려고 하기 때문에 자식 요소에 width 또는 max-width를 명시해주는 방법으로 해결 가능해요. 하지만 우리는 반응형 디자인을 추구하기 때문에 요소의 width를 지정해주는 것 보다는 max-width만 정해주거나 부모 요소에 align-items: flex-start;를 추가하는 방법을 추천해요.
+  */
+  align-items: flex-start;
+`;
+
+const MainDetails = styled.div`
+  width: 100%;
+  position: relative;
+`;
+
+// 더보기 버튼을 MainDetails 우측 상단에 포지셔닝
+const SeeMoreButton = styled.button`
+  position: absolute;
+  right: 0;
+`;
+
+const ItemTitle = styled.h1`
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 8px;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: 20px;
+    margin-bottom: 12px;
+  }
+
+  @media ${({ theme }) => theme.mediaQuery.desktop} {
+    font-size: 24px;
+    margin-bottom: 16px;
+  }
+`;
+
+const ItemPrice = styled.h2`
+  font-size: 24px;
+  font-weight: 600;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: 32px;
+  }
+
+  @media ${({ theme }) => theme.mediaQuery.desktop} {
+    font-size: 40px;
+  }
+`;
+
+const Description = styled.p`
+  font-size: 16px;
+  line-height: 140%;
+`;
+
+const SectionLabel = styled.h3`
+  color: var(--gray-600);
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 8px;
+`;
+
+const TagDisplaySection = styled.div`
+  margin: 24px 0;
+`;
+
+function ItemProfileSection({ product }: { product: IProduct }) {
+  return (
+    <SectionContainer>
+      {/* 참고: 호출된 상품 데이터의 images는 여러 개의 이미지 URL 문자열로 구성된 배열의 형태이지만, 디자인 요구사항에 슬라이더 등 여러 장의 사진을 보여주는 UI가 없기 때문에 가장 첫 번째 이미지만 선택해서 보여줄게요 */}
+      <ItemImage>
+        <img src={product.images[0]} alt={`${product.name} 상품 대표 사진`} />
+      </ItemImage>
+
+      <ItemDetailsContainer>
+        <MainDetails>
+          {/* 참고: 더보기 버튼 기능은 추후 요구사항에 따라 추가 예정 */}
+          <SeeMoreButton>
+            <SeeMoreIcon />
+          </SeeMoreButton>
+
+          <div>
+            <ItemTitle>{product.name}</ItemTitle>
+            {/* 숫자를 표시할 때는 잊지 말고 항상 toLocaleString()을 사용해 thousand separator를 추가해 주세요! */}
+            <ItemPrice>{product.price.toLocaleString()}원</ItemPrice>
+          </div>
+
+          <LineDivider />
+
+          <div>
+            <SectionLabel>상품 소개</SectionLabel>
+            <Description>{product.description}</Description>
+          </div>
+
+          <TagDisplaySection>
+            <SectionLabel>상품 태그</SectionLabel>
+            <TagDisplay tags={product.tags} />
+          </TagDisplaySection>
+        </MainDetails>
+
+        <LikeButton
+          productId={product.id}
+          isFavorite={product.isFavorite}
+          favoriteCount={product.favoriteCount}
+        />
+      </ItemDetailsContainer>
+    </SectionContainer>
+  );
+}
+
+export default ItemProfileSection;
diff --git a/src/pages/ItemPage/components/LikeButton.tsx b/src/pages/ItemPage/components/LikeButton.tsx
new file mode 100644
index 000000000..7a1df8664
--- /dev/null
+++ b/src/pages/ItemPage/components/LikeButton.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import styled from "styled-components";
+import { ReactComponent as HeartSvg } from "../../../assets/images/icons/ic_heart.svg";
+import { FlexContainer } from "../../../styles/CommonStyles";
+import Icon from "../../../components/UI/Icon";
+
+// 참고: 추후 요구사항에 따라 기능 추가 예정
+
+const PillButton = styled.button`
+  color: var(--gray-500);
+  font-size: 16px;
+  padding: 4px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--gray-200);
+
+  /* 버튼 hover 시 아이콘의 아웃라인과 채움색을 변경 */
+  &:hover svg path {
+    fill: var(--red);
+    stroke: var(--red);
+  }
+`;
+
+const ButtonContent = styled(FlexContainer)`
+  gap: 4px;
+`;
+
+interface LikeButtonProps {
+  productId: string;
+  isFavorite: boolean;
+  favoriteCount: number;
+}
+
+function LikeButton({ isFavorite, favoriteCount }: LikeButtonProps) {
+  return (
+    <PillButton>
+      <ButtonContent>
+        {/* SVG의 사이즈 및 색상을 동적으로 변경할 수 있는 컴포넌트를 만들었어요 */}
+        <Icon
+          IconComponent={HeartSvg}
+          size={24}
+          fillColor={isFavorite ? undefined : "var(--red)"}
+        />
+        {favoriteCount.toLocaleString()}
+      </ButtonContent>
+    </PillButton>
+  );
+}
+
+export default LikeButton;
diff --git a/src/pages/ItemPage/components/TagDisplay.tsx b/src/pages/ItemPage/components/TagDisplay.tsx
new file mode 100644
index 000000000..f726b3405
--- /dev/null
+++ b/src/pages/ItemPage/components/TagDisplay.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import styled from "styled-components";
+
+const TagsDisplaySection = styled.div`
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+`;
+
+const Tag = styled.div`
+  background-color: ${({ theme }) => theme.colors.gray[50]};
+  color: ${({ theme }) => theme.colors.gray[800]};
+  padding: 6px 16px;
+  border-radius: 999px;
+  font-size: 16px;
+`;
+
+// 이 컴포넌트는 상품 등록 페이지의 TagInput 컴포넌트에서 구현했던 것과 디자인은 유사하지만, 기능적으로 큰 차이가 있기 때문에 별도의 컴포넌트로 분리했어요 (인터랙티브 기능의 유무).
+// D.R.Y(Don't Repeat Yourself) 원칙에 따라 비슷한 컴포넌트를 재사용하는 것도 중요하지만, 여러 상황에 같은 컴포넌트를 적용하려다 보면 코드가 너무 복잡해지고 유지보수(maintainability)가 어려워지는 역효과가 있기 때문에 기능적 관심사의 명확한 분리가 필요해요.
+// 코드를 컴포넌트화 할 때는 단순히 겉모습을 기준으로 하지 않고 코드의 범용성, 간결성, 가독성, 유지보수성 등을 고려해 적절한 밸런스를 찾는 것이 중요해요. 하나의 컴포넌트에 여러 책임을 지우는 것을 피하고 각 컴포넌트가 하나의 기능에 집중하도록 하는 것도 좋은 가이드라인이 될 수 있어요.
+
+function TagDisplay({ tags }: { tags: string[] }) {
+  if (!tags || tags.length === 0) return null;
+
+  return (
+    <TagsDisplaySection>
+      {tags.map((tag, index) => (
+        <Tag key={`tag-display-${index}`}>#{tag}</Tag>
+      ))}
+    </TagsDisplaySection>
+  );
+}
+
+export default TagDisplay;
diff --git a/src/pages/LoginPage/LoginPage.jsx b/src/pages/LoginPage/LoginPage.tsx
similarity index 100%
rename from src/pages/LoginPage/LoginPage.jsx
rename to src/pages/LoginPage/LoginPage.tsx
diff --git a/src/pages/MarketPage/MarketDetailComment.css b/src/pages/MarketPage/MarketDetailComment.css
deleted file mode 100644
index 0525f5d1e..000000000
--- a/src/pages/MarketPage/MarketDetailComment.css
+++ /dev/null
@@ -1,53 +0,0 @@
-.line2 {
-  border: 1px solid #e5e7eb;
-
-  margin-top: 32px;
-  margin-bottom: 24px;
-
-  /* width: 1200px; */
-}
-
-.p {
-  font-size: 16px;
-  color: #111827;
-}
-
-.question-container {
-  /* justify-content: center; */
-  /* justify-items: center; */
-  /* justify-items: auto; */
-  /* align-items: center; */
-  /* justify-content: space-between; */
-  /* align-content: center; */
-  display: flex;
-  flex-direction: column;
-  padding: 10px;
-  align-items: center;
-  /* justify-content: center; */
-}
-
-.question-box {
-  height: 104px;
-  padding: 16px 24px 16px 24px;
-  border-radius: 12px;
-  background: #f3f4f6;
-
-  margin-top: 16px;
-
-  font-size: 16px;
-  color: #9ca3af;
-  padding: 16px, 24px, 16px, 24px;
-}
-
-.register {
-  padding: 12px 23px 12px 23px;
-  gap: 10px;
-  border-radius: 8px;
-
-  background: #9ca3af;
-
-  font-size: 16px;
-  color: #ffffff;
-
-  margin-top: 10px;
-}
diff --git a/src/pages/MarketPage/MarketDetailComment.jsx b/src/pages/MarketPage/MarketDetailComment.jsx
deleted file mode 100644
index eb371c3be..000000000
--- a/src/pages/MarketPage/MarketDetailComment.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-
-export default function MarketDetailComment({ comments }) {
-  return (
-    <div>
-      <div className="question-container">
-        <div>
-          <hr className="line2" />
-          <p>문의하기</p>
-
-          <div className="question-box">
-            개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보
-            유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은
-            게시자에게 있습니다.
-          </div>
-        </div>
-
-        <button className="register">등록</button>
-
-        <div className="question-list">
-          {comments.length > 0 &&
-            comments.map((q, i) => {
-              return (
-                <div key={i}>
-                  <p>{q.content}</p>
-                  <p>{q.createdAt}</p>
-                  <p>{q.writer.nickname}</p>
-                </div>
-              );
-            })}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/MarketPage/MarketDetailContent.jsx b/src/pages/MarketPage/MarketDetailContent.jsx
deleted file mode 100644
index 504566fe5..000000000
--- a/src/pages/MarketPage/MarketDetailContent.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from "react";
-import { ReactComponent as Heart } from "../../assets/images/icons/ic_heart.svg";
-
-export default function MarketDetailContent({ data }) {
-  return (
-    <div className="MarketDetailItem">
-      <img
-        className="MarketDetailItem-img"
-        src={data.images}
-        alt={data.title}
-      />
-      <div className="MarketDetailContentContainer">
-        <div className="MarketMarketDetailContent">
-          <p className="itemName">{data.name}</p>
-          <p className="itemPrice">{data.price.toLocaleString()}원</p>
-          <hr className="line" />
-          <p className="itemIntroduce">상품소개 </p>
-          <p className="itemDescription">{data.description}</p>
-          <p className="itemTagName">상품 태그</p>
-          <div style={{ display: "flex", gap: "10px" }}>
-            {data.tags &&
-              data.tags.map((v, i) => {
-                return (
-                  <span className="itemTag" key={i}>
-                    # {v}
-                  </span>
-                );
-              })}
-          </div>
-        </div>
-
-        <div className="likeContainer">
-          <span className="like">
-            <Heart /> {data.favoriteCount}
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/MarketPage/MarketDetailPage.css b/src/pages/MarketPage/MarketDetailPage.css
deleted file mode 100644
index a707637bf..000000000
--- a/src/pages/MarketPage/MarketDetailPage.css
+++ /dev/null
@@ -1,90 +0,0 @@
-.MarketDetailItem {
-  display: flex;
-  padding: 10px;
-  align-items: center;
-  justify-content: center;
-}
-
-.MarketDetailItem-img {
-  width: 486px;
-  height: 486px;
-  border-radius: 16px;
-}
-
-.MarketMarketDetailContent {
-  margin-bottom: 124px;
-  margin-left: 24px;
-}
-
-.p {
-  color: #1f2937;
-}
-
-.itemName {
-  font-size: 24px;
-}
-
-.itemPrice {
-  font-size: 40px;
-  padding-top: 16px;
-}
-
-.line {
-  border: 1px solid #e5e7eb;
-  margin-top: 16px;
-  margin-bottom: 16px;
-}
-
-.itemIntroduce {
-  font-size: 14px;
-  color: #4b5563;
-}
-
-.itemDescription {
-  font-size: 16px;
-  margin-top: 25px;
-}
-
-.itemTagName {
-  font-size: 14px;
-  color: #4b5563;
-  margin-top: 24px;
-  margin-bottom: 8px;
-}
-
-.itemTag {
-  padding: 6px 16px 6px 16px;
-  border-radius: 26px;
-  background: #f3f4f6;
-}
-
-.like {
-  padding: 4px 12px 4px 12px;
-  gap: 10px;
-  border-radius: 35px;
-
-  border: 1px solid #e5e7eb;
-
-  margin-left: 24px;
-}
-
-.heart-icon {
-  width: 26.8px;
-  height: 23.3px;
-  top: 4px;
-  left: 2.67px;
-  border: 1.8px;
-
-  /* Icon */
-
-  box-sizing: border-box;
-
-  position: absolute;
-  left: 8.33%;
-  right: 7.92%;
-  top: 12.5%;
-  bottom: 14.69%;
-
-  /* Cool Gray/500 */
-  border: 1.8px solid #6b7280;
-}
diff --git a/src/pages/MarketPage/MarketDetailPage.jsx b/src/pages/MarketPage/MarketDetailPage.jsx
deleted file mode 100644
index f4aa45590..000000000
--- a/src/pages/MarketPage/MarketDetailPage.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { getProduct, getComments } from "../../api/itemApi";
-import { useParams } from "react-router-dom";
-import "./MarketDetailPage.css";
-import "./MarketDetailComment.css";
-import MarketDetailContent from "./MarketDetailContent";
-import MarketDetailComment from "./MarketDetailComment";
-
-function MarketDetailPage() {
-  const parm = useParams();
-  const [data, setData] = useState({});
-  const [comments, setComments] = useState({});
-
-  useEffect(() => {
-    getProduct(parm.id).then((data) => {
-      if (data) {
-        setData(data);
-      }
-    });
-    getComments(parm.id).then((comments) => {
-      if (comments && comments.list.length > 0) {
-        setComments(comments.list);
-      }
-    });
-  }, [parm.id]);
-
-  return (
-    Object.keys(data).length >= 1 && (
-      <div>
-        <MarketDetailContent data={data}></MarketDetailContent>
-        <MarketDetailComment comments={comments}></MarketDetailComment>
-      </div>
-    )
-  );
-}
-
-export default MarketDetailPage;
diff --git a/src/pages/MarketPage/MarketPage.css b/src/pages/MarketPage/MarketPage.css
index 1a1dcbc8d..557553c80 100644
--- a/src/pages/MarketPage/MarketPage.css
+++ b/src/pages/MarketPage/MarketPage.css
@@ -1,12 +1,12 @@
 .sectionTitle {
-  color: #111827;
+  color: var(--gray-900);
   font-weight: bold;
   font-size: 20px;
   line-height: normal;
 }
 
 .itemCard {
-  color: #1f2937;
+  color: var(--gray-800);
   overflow: hidden;
   cursor: pointer;
 }
@@ -46,7 +46,7 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  color: #4b5563;
+  color: var(--gray-600);
   font-size: 12px;
 }
 
@@ -77,7 +77,7 @@
 
 .searchBarWrapper {
   display: flex;
-  background-color: #f3f4f6;
+  background-color: var(--gray-100);
   border-radius: 12px;
   padding: 9px 16px;
   flex: 1;
@@ -92,7 +92,7 @@
 }
 
 .searchBarInput::placeholder {
-  color: #9ca3af;
+  color: var(--gray-400);
   font-size: 16px;
 }
 
diff --git a/src/pages/MarketPage/MarketPage.jsx b/src/pages/MarketPage/MarketPage.tsx
similarity index 100%
rename from src/pages/MarketPage/MarketPage.jsx
rename to src/pages/MarketPage/MarketPage.tsx
diff --git a/src/pages/MarketPage/components/AllItemsSection.jsx b/src/pages/MarketPage/components/AllItemsSection.jsx
deleted file mode 100644
index 995d9acf6..000000000
--- a/src/pages/MarketPage/components/AllItemsSection.jsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { getProducts } from "../../../api/itemApi";
-import ItemCard from "./ItemCard";
-import { ReactComponent as SortIcon } from "../../../assets/images/icons/ic_sort.svg";
-import { ReactComponent as SearchIcon } from "../../../assets/images/icons/ic_search.svg";
-import { Link } from "react-router-dom";
-import DropdownMenu from "../../../components/UI/DropdownMenu";
-import PaginationBar from "../../../components/UI/PaginationBar";
-
-const getPageSize = () => {
-  const width = window.innerWidth;
-  if (width < 768) {
-    // Mobile viewport
-    return 4;
-  } else if (width < 1280) {
-    // Tablet viewport
-    return 6;
-  } else {
-    // Desktop viewport
-    return 10;
-  }
-};
-
-function AllItemsSection() {
-  const [orderBy, setOrderBy] = useState("recent");
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(getPageSize());
-  const [itemList, setItemList] = useState([]);
-  const [totalPageNum, setTotalPageNum] = useState();
-
-  const fetchSortedData = async ({ orderBy, page, pageSize }) => {
-    const products = await getProducts({ orderBy, page, pageSize });
-    setItemList(products.list);
-    setTotalPageNum(Math.ceil(products.totalCount / pageSize));
-  };
-
-  const handleSortSelection = (sortOption) => {
-    setOrderBy(sortOption);
-  };
-
-  useEffect(() => {
-    const handleResize = () => {
-      setPageSize(getPageSize());
-    };
-
-    // 화면 크기 변경할 때마다 pageSize를 다시 계산해 넣음
-    window.addEventListener("resize", handleResize);
-    fetchSortedData({ orderBy, page, pageSize });
-
-    // Cleanup function
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [orderBy, page, pageSize]);
-
-  const onPageChange = (pageNumber) => {
-    setPage(pageNumber);
-  };
-
-  return (
-    <div>
-      <div className="allItemsSectionHeader">
-        <h1 className="sectionTitle">판매 중인 상품</h1>
-        <Link to="/additem" className="loginLink button">
-          상품 등록하기
-        </Link>
-      </div>
-
-      <div className="allItemsSectionHeader">
-        <div className="searchBarWrapper">
-          <SearchIcon />
-          <input
-            className="searchBarInput"
-            placeholder="검색할 상품을 입력해 주세요"
-          />
-        </div>
-        <DropdownMenu onSortSelection={handleSortSelection} />
-      </div>
-
-      <div className="allItemsCardSection">
-        {itemList?.map((item) => (
-          <ItemCard item={item} key={`market-item-${item.id}`} />
-        ))}
-      </div>
-
-      <div className="paginationBarWrapper">
-        <PaginationBar
-          totalPageNum={totalPageNum}
-          activePageNum={page}
-          onPageChange={onPageChange}
-        />
-      </div>
-    </div>
-  );
-}
-
-export default AllItemsSection;
diff --git a/src/pages/MarketPage/components/AllItemsSection.tsx b/src/pages/MarketPage/components/AllItemsSection.tsx
new file mode 100644
index 000000000..b73e3bca9
--- /dev/null
+++ b/src/pages/MarketPage/components/AllItemsSection.tsx
@@ -0,0 +1,118 @@
+import React, { useEffect, useState } from "react";
+import { getProducts } from "../../../api/itemApi";
+import ItemCard from "./ItemCard";
+import { ReactComponent as SearchIcon } from "../../../assets/images/icons/ic_search.svg";
+import { Link } from "react-router-dom";
+import DropdownMenu from "../../../components/UI/DropdownMenu";
+import PaginationBar from "../../../components/UI/PaginationBar";
+import LoadingSpinner from "../../../components/UI/LoadingSpinner";
+import { IItem } from "../../../types";
+
+const getPageSize = () => {
+  const width = window.innerWidth;
+  if (width < 768) {
+    // Mobile viewport
+    return 4;
+  } else if (width < 1280) {
+    // Tablet viewport
+    return 6;
+  } else {
+    // Desktop viewport
+    return 10;
+  }
+};
+
+function AllItemsSection() {
+  const [orderBy, setOrderBy] = useState("recent");
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(getPageSize());
+  const [itemList, setItemList] = useState<IItem[]>([]);
+  const [totalPageNum, setTotalPageNum] = useState<number>(0);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const fetchSortedData = async ({
+    orderBy,
+    page,
+    pageSize,
+  }: {
+    orderBy: string;
+    page: number;
+    pageSize: number;
+  }) => {
+    setIsLoading(true);
+    try {
+      const products = await getProducts({ orderBy, page, pageSize });
+      setItemList(products.list);
+      setTotalPageNum(Math.ceil(products.totalCount / pageSize));
+    } catch (error: any) {
+      console.error("오류: ", error.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSortSelection = (sortOption: string) => {
+    setOrderBy(sortOption);
+  };
+
+  useEffect(() => {
+    const handleResize = () => {
+      setPageSize(getPageSize());
+    };
+
+    // 화면 크기 변경할 때마다 pageSize를 다시 계산해 넣음
+    window.addEventListener("resize", handleResize);
+    fetchSortedData({ orderBy, page, pageSize });
+
+    // Cleanup function
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [orderBy, page, pageSize]);
+
+  const onPageChange = (pageNumber: number) => {
+    setPage(pageNumber);
+  };
+
+  return (
+    <>
+      <LoadingSpinner isLoading={isLoading} />
+
+      <div>
+        <div className="allItemsSectionHeader">
+          <h1 className="sectionTitle">판매 중인 상품</h1>
+          <Link to="/additem" className="loginLink button">
+            상품 등록하기
+          </Link>
+        </div>
+
+        <div className="allItemsSectionHeader">
+          <div className="searchBarWrapper">
+            <SearchIcon />
+            <input
+              className="searchBarInput"
+              placeholder="검색할 상품을 입력해 주세요"
+            />
+          </div>
+          <DropdownMenu onSortSelection={handleSortSelection} />
+        </div>
+
+        <div className="allItemsCardSection">
+          {itemList?.map((item) => (
+            <ItemCard item={item} key={`market-item-${item.id}`} />
+          ))}
+        </div>
+
+        <div className="paginationBarWrapper">
+          <PaginationBar
+            totalPageNum={totalPageNum}
+            activePageNum={page}
+            onPageChange={onPageChange}
+          />
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default AllItemsSection;
diff --git a/src/pages/MarketPage/components/BestItemsSection.jsx b/src/pages/MarketPage/components/BestItemsSection.jsx
deleted file mode 100644
index a2072fbb9..000000000
--- a/src/pages/MarketPage/components/BestItemsSection.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, { useEffect, useState } from "react";
-import ItemCard from "./ItemCard";
-import { getProducts } from "../../../api/itemApi";
-
-const getPageSize = () => {
-  const width = window.innerWidth;
-  if (width < 768) {
-    // Mobile viewport
-    return 1;
-  } else if (width < 1280) {
-    // Tablet viewport
-    return 2;
-  } else {
-    // Desktop viewport
-    return 4;
-  }
-};
-
-function BestItemsSection() {
-  const [itemList, setItemList] = useState([]);
-  const [pageSize, setPageSize] = useState(getPageSize());
-
-  const fetchSortedData = async ({ orderBy, pageSize }) => {
-    const products = await getProducts({ orderBy, pageSize });
-    setItemList(products.list);
-  };
-
-  useEffect(() => {
-    const handleResize = () => {
-      setPageSize(getPageSize());
-    };
-
-    // 화면 크기 변경할 때마다 pageSize를 다시 계산해 넣음
-    window.addEventListener("resize", handleResize);
-    fetchSortedData({ orderBy: "favorite", pageSize });
-
-    // Cleanup function
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [pageSize]);
-
-  return (
-    <div className="bestItemsContainer">
-      <h1 className="sectionTitle">베스트 상품</h1>
-
-      <div className="bestItemsCardSection">
-        {itemList?.map((item) => (
-          <ItemCard item={item} key={`best-item-${item.id}`} />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export default BestItemsSection;
diff --git a/src/pages/MarketPage/components/BestItemsSection.tsx b/src/pages/MarketPage/components/BestItemsSection.tsx
new file mode 100644
index 000000000..f8d04d4c5
--- /dev/null
+++ b/src/pages/MarketPage/components/BestItemsSection.tsx
@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from "react";
+import ItemCard from "./ItemCard";
+import { getProducts } from "../../../api/itemApi";
+import LoadingSpinner from "../../../components/UI/LoadingSpinner";
+
+const getPageSize = () => {
+  const width = window.innerWidth;
+  if (width < 768) {
+    // Mobile viewport
+    return 1;
+  } else if (width < 1280) {
+    // Tablet viewport
+    return 2;
+  } else {
+    // Desktop viewport
+    return 4;
+  }
+};
+interface ItemProps {
+  id: string;
+  name: string;
+  price: number;
+  images: string[];
+  favoriteCount: number;
+}
+
+function BestItemsSection() {
+  const [itemList, setItemList] = useState<ItemProps[]>([]);
+  const [pageSize, setPageSize] = useState(getPageSize());
+  const [isLoading, setIsLoading] = useState(true);
+
+  const fetchSortedData = async ({
+    orderBy,
+    pageSize,
+  }: {
+    orderBy: string;
+    pageSize: number;
+  }) => {
+    setIsLoading(true);
+    try {
+      const products = await getProducts({ orderBy, pageSize });
+      setItemList(products.list);
+    } catch (error: any) {
+      console.error("오류: ", error.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const handleResize = () => {
+      setPageSize(getPageSize());
+    };
+
+    // 화면 크기 변경할 때마다 pageSize를 다시 계산해 넣음
+    window.addEventListener("resize", handleResize);
+    fetchSortedData({ orderBy: "favorite", pageSize });
+
+    // Cleanup function
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [pageSize]);
+
+  return (
+    <>
+      <LoadingSpinner isLoading={isLoading} />
+
+      <div className="bestItemsContainer">
+        <h1 className="sectionTitle">베스트 상품</h1>
+
+        <div className="bestItemsCardSection">
+          {itemList?.map((item) => (
+            <ItemCard item={item} key={`best-item-${item.id}`} />
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default BestItemsSection;
diff --git a/src/pages/MarketPage/components/ItemCard.jsx b/src/pages/MarketPage/components/ItemCard.jsx
deleted file mode 100644
index 42d91ebb2..000000000
--- a/src/pages/MarketPage/components/ItemCard.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-import { useNavigate } from "react-router-dom";
-import { ReactComponent as HeartIcon } from "../../../assets/images/icons/ic_heart.svg";
-
-function ItemCard({ item }) {
-  const navigate = useNavigate();
-
-  const onClickCard = () => {
-    navigate(`/items/${item.id}`);
-  };
-
-  return (
-    <div className="itemCard" onClick={onClickCard}>
-      <img src={item.images[0]} alt={item.name} className="itemCardThumbnail" />
-      <div className="itemSummary">
-        <h2 className="itemName">{item.name}</h2>
-        <p className="itemPrice">{item.price.toLocaleString()}원</p>
-        <div className="favoriteCount">
-          <HeartIcon />
-          {item.favoriteCount}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default ItemCard;
diff --git a/src/pages/MarketPage/components/ItemCard.tsx b/src/pages/MarketPage/components/ItemCard.tsx
new file mode 100644
index 000000000..bd8ed4ee8
--- /dev/null
+++ b/src/pages/MarketPage/components/ItemCard.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { ReactComponent as HeartIcon } from "../../../assets/images/icons/ic_heart.svg";
+import { Link } from "react-router-dom";
+
+interface ItemProps {
+  id: string;
+  name: string;
+  price: number;
+  images: string[];
+  favoriteCount: number;
+}
+
+interface Item {
+  item: ItemProps;
+}
+
+function ItemCard({ item }: Item) {
+  return (
+    // 상품 카드 클릭 시 해당 상품의 상세페이지로 이동
+    <Link to={`/items/${item.id}`} className="itemCard">
+      <img
+        src={item.images[0]}
+        alt={`${item.name} 상품 썸네일`}
+        className="itemCardThumbnail"
+      />
+      <div className="itemSummary">
+        <h2 className="itemName">{item.name}</h2>
+        <p className="itemPrice">{item.price.toLocaleString()}원</p>
+        <div className="favoriteCount">
+          <HeartIcon />
+          {item.favoriteCount}
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+export default ItemCard;
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
new file mode 100644
index 000000000..6431bc5fc
--- /dev/null
+++ b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/src/styles/CommonStyles.js b/src/styles/CommonStyles.js
deleted file mode 100644
index da7807691..000000000
--- a/src/styles/CommonStyles.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  padding: 16px;
-
-  @media ${({ theme }) => theme.mediaQuery.tablet} {
-    padding: 16px 24px;
-  }
-
-  @media ${({ theme }) => theme.mediaQuery.desktop} {
-    max-width: 1200px;
-    padding: 24px 0;
-    margin: 0 auto;
-  }
-`;
-
-export const SectionTitle = styled.h1`
-  font-size: 20px;
-  font-weight: bold;
-  color: ${({ theme }) => theme.colors.black};
-
-  @media ${({ theme }) => theme.mediaQuery.tablet} {
-    font-size: 28px;
-  }
-`;
-
-export const FlexContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-
-export const Button = styled.button`
-  background-color: ${({ theme }) => theme.colors.blue[0]};
-  color: ${({ theme }) => theme.colors.white};
-  padding: 11.5px 23px;
-  border-radius: 8px;
-  font-size: 16px;
-  font-weight: bold;
-  cursor: pointer;
-
-  &:hover {
-    background-color: ${({ theme }) => theme.colors.blue[1]};
-  }
-
-  &:focus {
-    background-color: ${({ theme }) => theme.colors.blue[2]};
-  }
-
-  &:disabled {
-    background-color: ${({ theme }) => theme.colors.gray[0]};
-    cursor: default;
-    pointer-events: none;
-  }
-`;
diff --git a/src/styles/CommonStyles.ts b/src/styles/CommonStyles.ts
new file mode 100644
index 000000000..c6f0fafe1
--- /dev/null
+++ b/src/styles/CommonStyles.ts
@@ -0,0 +1,97 @@
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+
+export const Container = styled.div`
+  /* 참고: 최상단 wrapper div를 flexbox로 만들어줬어요 */
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    padding: 16px 24px;
+  }
+
+  @media ${({ theme }) => theme.mediaQuery.desktop} {
+    max-width: 1200px;
+    padding: 24px 0;
+    margin: 0 auto;
+  }
+`;
+
+export const SectionTitle = styled.h1`
+  font-size: 20px;
+  font-weight: bold;
+  color: ${({ theme }) => theme.colors.gray[800]};
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: 28px;
+  }
+`;
+
+export const FlexContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const Button = styled.button`
+  background-color: ${({ theme }) => theme.colors.blue.primary};
+  color: ${({ theme }) => theme.colors.white};
+  padding: 11.5px 23px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: bold;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.blue.hover};
+  }
+
+  &:focus {
+    background-color: ${({ theme }) => theme.colors.blue.focus};
+  }
+
+  &:disabled {
+    background-color: ${({ theme }) => theme.colors.gray[400]};
+    cursor: default;
+    pointer-events: none;
+  }
+`;
+
+export const StyledLink = styled(Link)<{
+  $pill?: string;
+}>`
+  background-color: ${({ theme }) => theme.colors.blue.primary};
+  color: ${({ theme }) => theme.colors.white};
+  padding: 11.5px 23px;
+  border-radius: ${(props) => (props.$pill ? "999px" : "8px")};
+  font-size: 16px;
+  font-weight: bold;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.blue.hover};
+  }
+
+  &:focus {
+    background-color: ${({ theme }) => theme.colors.blue.focus};
+  }
+
+  &:disabled {
+    background-color: ${({ theme }) => theme.colors.gray[400]};
+    cursor: default;
+    pointer-events: none;
+  }
+`;
+
+// 구분선을 만들 때 <div>를 사용할 수도 있지만 thematic break의 의미를 내포하고 있는 <hr> 태그를 사용하면 보다 semantic하고 접근성을 고려한 코드가 됩니다.
+export const LineDivider = styled.hr<{
+  $margin?: string;
+}>`
+  width: 100%;
+  border: none;
+  height: 1px;
+  background-color: var(--gray-200);
+  margin: ${(props) =>
+    props.$margin || "16px 0"}; // margin을 optional prop으로 받기
+`;
diff --git a/src/styles/GlobalStyle.js b/src/styles/GlobalStyle.ts
similarity index 100%
rename from src/styles/GlobalStyle.js
rename to src/styles/GlobalStyle.ts
diff --git a/src/styles/global.css b/src/styles/global.css
index ee71e72ab..44f5f2ecf 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,19 +1,23 @@
 /* Mobile styles */
 
+/* Updated color palette */
 :root {
   /* Gray scale */
-  --gray-900: #1b1d1f;
-  --gray-800: #26282b;
-  --gray-600: #454c53;
-  --gray-500: #72787f;
-  --gray-400: #9ea4a8;
+  --gray-900: #111827;
+  --gray-800: #1F2937;
+  --gray-700: #374151;
+  --gray-600: #4b5563;
+  --gray-500: #6b7280;
+  --gray-400: #9ca3af;
   --gray-200: #e5e7eb;
-  --gray-100: #e8ebed;
-  --gray-50: #f7f7f8;
+  --gray-100: #f3f4f6;
+  --gray-50: #f9fafb;
 
   /* Primary color */
   --blue: #3692ff;
 
+  --red: #f74747;
+
   /* Layout dimensions */
   --header-height: 70px;
 }
@@ -56,7 +60,7 @@ svg {
 }
 
 body {
-  color: #374151;
+  color: var(--gray-700);
   word-break: keep-all;
   font-family: "Pretendard", sans-serif;
 }
@@ -81,8 +85,8 @@ header {
 }
 
 footer {
-  background-color: #111827;
-  color: #9ca3af;
+  background-color: var(--gray-900);
+  color: var(--gray-400);
   font-size: 16px;
   padding: 32px;
   display: flex;
@@ -130,7 +134,7 @@ footer {
 }
 
 .button:disabled {
-  background-color: #9ca3af;
+  background-color: var(--gray-400);
   cursor: default;
   pointer-events: none;
 }
diff --git a/src/styles/theme.js b/src/styles/theme.js
deleted file mode 100644
index 69d8bd895..000000000
--- a/src/styles/theme.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const colors = {
-  blue: ["#3692FF", "#1967D6", "#1251AA"],
-  white: "#FFF",
-  black: "#1F2937",
-  gray: ["#9CA3AF", "#F3F4F6", "#F9FAFB"],
-};
-
-const mediaQuery = {
-  mobile: "screen and (max-width: 767px)",
-  tablet: "screen and (min-width: 768px)",
-  desktop: "screen and (min-width: 1280px)",
-};
-
-const theme = {
-  colors,
-  mediaQuery,
-};
-
-export default theme;
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
new file mode 100644
index 000000000..36e563d03
--- /dev/null
+++ b/src/styles/theme.ts
@@ -0,0 +1,31 @@
+// Updated color palette
+const colors = {
+  gray: {
+    900: "#111827",
+    800: "#1F2937",
+    700: "#374151",
+    600: "#4b5563",
+    500: "#6b7280",
+    400: "#9ca3af",
+    200: "#e5e7eb",
+    100: "#f3f4f6",
+    50: "#f9fafb",
+  },
+  blue: { primary: "#3692ff", hover: "#1967D6", focus: "#1251AA" },
+  red: "#f74747",
+  white: "#FFF",
+  black: "#000",
+};
+
+const mediaQuery = {
+  mobile: "screen and (max-width: 767px)",
+  tablet: "screen and (min-width: 768px)",
+  desktop: "screen and (min-width: 1280px)",
+};
+
+const theme = {
+  colors,
+  mediaQuery,
+};
+
+export default theme;
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 000000000..1a12c5f4d
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,32 @@
+interface IItem {
+  id: string;
+  name: string;
+  price: number;
+  images: string[];
+  favoriteCount: number;
+}
+
+interface IAuthorInfo {
+  image: string;
+  nickname: string;
+}
+
+interface IComment {
+  id: string;
+  writer: IAuthorInfo;
+  updatedAt: string;
+  content: string;
+}
+
+interface IProduct {
+  id: string;
+  images: string[];
+  name: string;
+  price: number;
+  description: string;
+  tags: string[];
+  isFavorite: boolean;
+  favoriteCount: number;
+}
+
+export { IItem, IAuthorInfo, IComment, IProduct };
diff --git a/src/utils/dateUtils.ts b/src/utils/dateUtils.ts
new file mode 100644
index 000000000..81fce95cb
--- /dev/null
+++ b/src/utils/dateUtils.ts
@@ -0,0 +1,44 @@
+// 날짜 관련 Util Functions
+
+// Javascript에서 날짜를 다룰 때는 library 사용을 추천해요.
+// 이번 프로젝트에서는 가장 많이 사용되면서도 가벼운 "date-fns" 패키지를 사용해 볼게요.
+// 참고 링크: https://date-fns.org/
+
+import {
+  format,
+  differenceInDays,
+  differenceInHours,
+  differenceInMinutes,
+  differenceInSeconds,
+} from "date-fns";
+
+// updatedAt 표시: Date string을 현재 시간과 비교한 형식으로 변환해주는 함수
+// 7일 이내까지는 시간이 얼마나 흘렀는지를 분, 시간, 일 단위로 나타내고, 그보다 오래된 날짜는 포맷팅한 문자열로 리턴함
+export const formatUpdatedAt = (dateString: string) => {
+  const date = new Date(dateString); // 입력된 날짜 문자열을 Date 객체로 변환
+  const now = new Date(); // 현재 기준 Date 객체 생성
+
+  const diffInDays = differenceInDays(now, date); // 현재 시간과 입력된 날짜의 차이를 일(day) 단위로 계산
+  const diffInHours = differenceInHours(now, date); // 현재 시간과 입력된 날짜의 차이를 시간(hour) 단위로 계산
+  const diffInMinutes = differenceInMinutes(now, date); // 현재 시간과 입력된 날짜의 차이를 분(minute) 단위로 계산
+  const diffInSeconds = differenceInSeconds(now, date); // 현재 시간과 입력된 날짜의 차이를 초(second) 단위로 계산
+
+  if (diffInSeconds < 60) {
+    return "방금 전"; // 차이가 1분 미만인 경우 "방금 전" 형식으로 출력
+  } else if (diffInMinutes < 60) {
+    return `${diffInMinutes}분 전`; // 차이가 1시간 미만인 경우 "N분 전" 형식으로 출력
+  } else if (diffInHours < 24) {
+    return `${diffInHours}시간 전`; // 차이가 1일 미만인 경우 "N시간 전" 형식으로 출력
+  } else if (diffInDays < 7) {
+    return `${diffInDays}일 전`; // 차이가 7일 이내인 경우 "N일 전" 형식으로 출력
+  } else {
+    // 차이가 7일 이상인 경우 포맷팅된 날짜 출력
+    return format(date, "yyyy.MM.dd hh:mm a");
+  }
+};
+
+// 날짜 포맷팅 참고:
+// - 대문자 'M'은 month, 소문자 'm'은 minute을 뜻해요.
+// - 'MM'은 month를 두 자리 숫자로 나타낸 것, 'M'은 한자리 숫자로 나타낸 것(예: 5월을 '05'가 아닌 '5'로 출력)
+// - 대문자 'HH'는 24시 체계 (예: 14시), 소문자 'hh'는 12시 체계 (예: 2시)
+// - 소문자 'hh'를 사용해 시간을 나타낼 경우, 'a'를 추가해 AM/PM까지 함께 표기해 주세요. (예: "yyyy.MM.dd hh:mm a")
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 000000000..e7eec3d4f
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": false,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}