diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index 28b667cd..df6f2375 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -40,6 +40,9 @@ module.exports = {
     'react/jsx-props-no-spreading': 'off',
     'react/no-unused-prop-types': 'off',
     'no-underscore-dangle': 'off',
+    'default-case': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'no-dupe-keys': 'off',
   },
   settings: {
     'import/resolver': {
diff --git a/frontend/.prettierrc.js b/frontend/.prettierrc.js
index e340799c..409c297e 100644
--- a/frontend/.prettierrc.js
+++ b/frontend/.prettierrc.js
@@ -1,3 +1,4 @@
 module.exports = {
+  printWidth: 100,
   singleQuote: true,
 };
diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
index d64ca478..5577e5d1 100644
--- a/frontend/.vscode/settings.json
+++ b/frontend/.vscode/settings.json
@@ -11,8 +11,8 @@
     }
   ],
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true, // eslint
-    "source.fixAll.stylelint": true // Stylelint
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
   },
   // formatter
   "editor.defaultFormatter": "esbenp.prettier-vscode",
diff --git a/frontend/cypress/e2e/mapbefine.cy.ts b/frontend/cypress/e2e/mapbefine.cy.ts
index cbb675fe..9481be85 100644
--- a/frontend/cypress/e2e/mapbefine.cy.ts
+++ b/frontend/cypress/e2e/mapbefine.cy.ts
@@ -4,9 +4,7 @@ describe('메인 페이지', () => {
   });
 
   it('로고와 다양한 지도 소개 글이 보인다.', () => {
-    cy.get('div[aria-label="괜찮을지도 로고 및 홈으로 이동 버튼"]').should(
-      'be.visible',
-    );
+    cy.get('[data-cy="logo"]').should('be.visible');
 
     cy.contains('인기 급상승할 지도').should('be.visible');
   });
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e3a437bb..62e18b73 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,9 +9,11 @@
       "version": "0.8.0",
       "license": "ISC",
       "dependencies": {
+        "@tanstack/react-query": "^5.17.9",
+        "@tanstack/react-query-devtools": "^5.17.9",
+        "axios": "^1.5.1",
         "history": "^5.3.0",
-        "map-befine-swiper": "^0.8.3",
-        "msw-storybook-addon": "^1.8.0",
+        "map-befine-swiper": "^0.9.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-ga4": "^2.1.0",
@@ -48,6 +50,7 @@
         "babel-plugin-styled-components": "^2.1.4",
         "browser-image-compression": "^2.0.2",
         "chromatic": "^6.19.9",
+        "compression-webpack-plugin": "^11.0.0",
         "cypress": "^12.17.4",
         "dotenv-webpack": "^8.0.1",
         "eslint": "^8.44.0",
@@ -60,6 +63,7 @@
         "jest": "^29.6.2",
         "jest-environment-jsdom": "^29.6.2",
         "msw": "^1.2.2",
+        "msw-storybook-addon": "^1.8.0",
         "prettier": "^3.0.0",
         "process": "^0.11.10",
         "react-refresh": "^0.14.0",
@@ -3870,6 +3874,7 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/@mswjs/cookies/-/cookies-0.2.2.tgz",
       "integrity": "sha512-mlN83YSrcFgk7Dm1Mys40DLssI1KdJji2CMKN8eOlBqsTADYzj2+jWzsANsUTFbxDMWPD5e9bfA1RGqBpS3O1g==",
+      "dev": true,
       "dependencies": {
         "@types/set-cookie-parser": "^2.4.0",
         "set-cookie-parser": "^2.4.6"
@@ -3882,6 +3887,7 @@
       "version": "0.17.10",
       "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.17.10.tgz",
       "integrity": "sha512-N8x7eSLGcmUFNWZRxT1vsHvypzIRgQYdG0rJey/rZCy6zT/30qDt8Joj7FxzGNLSwXbeZqJOMqDurp7ra4hgbw==",
+      "dev": true,
       "dependencies": {
         "@open-draft/until": "^1.0.3",
         "@types/debug": "^4.1.7",
@@ -3900,6 +3906,7 @@
       "version": "0.2.8",
       "resolved": "https://registry.npmjs.org/strict-event-emitter/-/strict-event-emitter-0.2.8.tgz",
       "integrity": "sha512-KDf/ujU8Zud3YaLtMCcTI4xkZlZVIYxTLr+XIULexP+77EEVWixeXroLUXQXiVtH4XH2W7jr/3PT1v3zBuvc3A==",
+      "dev": true,
       "dependencies": {
         "events": "^3.3.0"
       }
@@ -3959,7 +3966,8 @@
     "node_modules/@open-draft/until": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@open-draft/until/-/until-1.0.3.tgz",
-      "integrity": "sha512-Aq58f5HiWdyDlFffbbSjAlv596h/cOnt2DO1w3DOC7OJ5EHs0hd/nycJfiu9RJbT6Yk6F1knnRRXNSpxoIVZ9Q=="
+      "integrity": "sha512-Aq58f5HiWdyDlFffbbSjAlv596h/cOnt2DO1w3DOC7OJ5EHs0hd/nycJfiu9RJbT6Yk6F1knnRRXNSpxoIVZ9Q==",
+      "dev": true
     },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
@@ -6972,6 +6980,55 @@
       "integrity": "sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==",
       "dev": true
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.17.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.17.9.tgz",
+      "integrity": "sha512-8xcvpWIPaRMDNLMvG9ugcUJMgFK316ZsqkPPbsI+TMZsb10N9jk0B6XgPk4/kgWC2ziHyWR7n7wUhxmD0pChQw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-devtools": {
+      "version": "5.17.7",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.17.7.tgz",
+      "integrity": "sha512-TfgvOqza5K7Sk6slxqkRIvXlEJoUoPSsGGwpuYSrpqgSwLSSvPPpZhq7hv7hcY5IvRoTNGoq6+MT01C/jILqoQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.17.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.17.9.tgz",
+      "integrity": "sha512-M5E9gwUq1Stby/pdlYjBlL24euIVuGbWKIFCbtnQxSdXI4PgzjTSdXdV3QE6fc+itF+TUvX/JPTKIwq8yuBXcg==",
+      "dependencies": {
+        "@tanstack/query-core": "5.17.9"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
+    "node_modules/@tanstack/react-query-devtools": {
+      "version": "5.17.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.17.9.tgz",
+      "integrity": "sha512-1viWP/jlO0LaeCdtTFqtF1k2RfM3KVpvwVffWv+PMNkS2u4s8YGUM17r3p82udbF9BY1mE7aHqQ3MM1errF5lQ==",
+      "dependencies": {
+        "@tanstack/query-devtools": "5.17.7"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/react-query": "^5.17.9",
+        "react": "^18.0.0"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "8.20.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.1.tgz",
@@ -7325,7 +7382,8 @@
     "node_modules/@types/cookie": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
-      "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q=="
+      "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==",
+      "dev": true
     },
     "node_modules/@types/cross-spawn": {
       "version": "6.0.3",
@@ -7340,6 +7398,7 @@
       "version": "4.1.9",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.9.tgz",
       "integrity": "sha512-8Hz50m2eoS56ldRlepxSBa6PWEVCtzUo/92HgLc2qTMnotJNIm7xP+UZhyWoYsyOdd5dxZ+NZLb24rsKyFs2ow==",
+      "dev": true,
       "dependencies": {
         "@types/ms": "*"
       }
@@ -7545,7 +7604,8 @@
     "node_modules/@types/js-levenshtein": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/js-levenshtein/-/js-levenshtein-1.1.1.tgz",
-      "integrity": "sha512-qC4bCqYGy1y/NP7dDVr7KJarn+PbX1nSpwA7JXdu0HxT3QYjO8MJ+cntENtHFVy2dRAyBV23OZ6MxsW1AM1L8g=="
+      "integrity": "sha512-qC4bCqYGy1y/NP7dDVr7KJarn+PbX1nSpwA7JXdu0HxT3QYjO8MJ+cntENtHFVy2dRAyBV23OZ6MxsW1AM1L8g==",
+      "dev": true
     },
     "node_modules/@types/jsdom": {
       "version": "20.0.1",
@@ -7603,12 +7663,14 @@
     "node_modules/@types/ms": {
       "version": "0.7.31",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.31.tgz",
-      "integrity": "sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA=="
+      "integrity": "sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==",
+      "dev": true
     },
     "node_modules/@types/node": {
       "version": "20.7.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.7.0.tgz",
-      "integrity": "sha512-zI22/pJW2wUZOVyguFaUL1HABdmSVxpXrzIqkjsHmyUjNhPoWM1CKfvVuXfetHhIok4RY573cqS0mZ1SJEnoTg=="
+      "integrity": "sha512-zI22/pJW2wUZOVyguFaUL1HABdmSVxpXrzIqkjsHmyUjNhPoWM1CKfvVuXfetHhIok4RY573cqS0mZ1SJEnoTg==",
+      "dev": true
     },
     "node_modules/@types/node-fetch": {
       "version": "2.6.6",
@@ -7749,6 +7811,7 @@
       "version": "2.4.4",
       "resolved": "https://registry.npmjs.org/@types/set-cookie-parser/-/set-cookie-parser-2.4.4.tgz",
       "integrity": "sha512-xCfTC/eL/GmvMC24b42qJpYSTdCIBwWcfskDF80ztXtnU6pKXyvuZP2EConb2K9ps0s7gMhCa0P1foy7wiItMA==",
+      "dev": true,
       "dependencies": {
         "@types/node": "*"
       }
@@ -8368,6 +8431,7 @@
       "version": "0.8.10",
       "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
       "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
+      "dev": true,
       "engines": {
         "node": ">=10.0.0"
       }
@@ -8441,6 +8505,7 @@
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/@zxing/text-encoding/-/text-encoding-0.9.0.tgz",
       "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==",
+      "dev": true,
       "optional": true
     },
     "node_modules/abab": {
@@ -8634,6 +8699,7 @@
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
       "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+      "dev": true,
       "dependencies": {
         "type-fest": "^0.21.3"
       },
@@ -8648,6 +8714,7 @@
       "version": "0.21.3",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
       "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -8671,6 +8738,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -8703,6 +8771,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "devOptional": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -8997,8 +9066,7 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/at-least-node": {
       "version": "1.0.0",
@@ -9013,6 +9081,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
       "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -9045,6 +9114,21 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.5.tgz",
+      "integrity": "sha512-Ii012v05KEVuUoFWmMW/UQv9aRIc3ZwkWDcM+h5Il8izZCtRVpDUfwpoFf7eOtajT3QiGR4yDUx7lPqHJULgbg==",
+      "dependencies": {
+        "follow-redirects": "^1.15.4",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -9474,6 +9558,7 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
       "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -9538,6 +9623,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "devOptional": true,
       "engines": {
         "node": ">=8"
       }
@@ -9546,6 +9632,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
       "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "dev": true,
       "dependencies": {
         "buffer": "^5.5.0",
         "inherits": "^2.0.4",
@@ -9667,6 +9754,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "devOptional": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -9754,6 +9842,7 @@
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
       "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -9910,6 +9999,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -10046,7 +10136,8 @@
     "node_modules/chardet": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
-      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
+      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
+      "dev": true
     },
     "node_modules/check-more-types": {
       "version": "2.24.0",
@@ -10061,6 +10152,7 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "devOptional": true,
       "funding": [
         {
           "type": "individual",
@@ -10087,6 +10179,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "devOptional": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -10178,6 +10271,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
       "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "dev": true,
       "dependencies": {
         "restore-cursor": "^3.1.0"
       },
@@ -10189,6 +10283,7 @@
       "version": "2.9.1",
       "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.1.tgz",
       "integrity": "sha512-jHgecW0pxkonBJdrKsqxgRX9AcG+u/5k0Q7WPDfi8AogLAdwxEkyYYNWwZ5GvVFoFx2uiY1eNcSK00fh+1+FyQ==",
+      "dev": true,
       "engines": {
         "node": ">=6"
       },
@@ -10231,6 +10326,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz",
       "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
+      "dev": true,
       "engines": {
         "node": ">= 10"
       }
@@ -10239,6 +10335,7 @@
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
       "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
       "dependencies": {
         "string-width": "^4.2.0",
         "strip-ansi": "^6.0.1",
@@ -10252,6 +10349,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -10266,6 +10364,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -10282,6 +10381,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
       "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
+      "dev": true,
       "engines": {
         "node": ">=0.8"
       }
@@ -10332,6 +10432,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==",
+      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -10342,7 +10443,8 @@
     "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=="
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
     },
     "node_modules/colord": {
       "version": "2.9.3",
@@ -10360,7 +10462,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -10428,6 +10529,79 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/compression-webpack-plugin": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/compression-webpack-plugin/-/compression-webpack-plugin-11.0.0.tgz",
+      "integrity": "sha512-Nz9dMiu0sag+mgJ5QTkRx0+vwrDZPU/gps7IdrkFE+oRSkgyoX4wbMol7QnXjI5/TEWx8yEwew9MiMjZgdLtjg==",
+      "dev": true,
+      "dependencies": {
+        "schema-utils": "^4.2.0",
+        "serialize-javascript": "^6.0.2"
+      },
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      }
+    },
+    "node_modules/compression-webpack-plugin/node_modules/ajv": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/compression-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/compression-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
+    "node_modules/compression-webpack-plugin/node_modules/schema-utils": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
+      "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/compression/node_modules/bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
@@ -11364,6 +11538,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
       "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==",
+      "dev": true,
       "dependencies": {
         "clone": "^1.0.2"
       },
@@ -11443,7 +11618,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -12839,6 +13013,7 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "dev": true,
       "engines": {
         "node": ">=0.8.x"
       }
@@ -12985,6 +13160,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
       "integrity": "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==",
+      "dev": true,
       "dependencies": {
         "chardet": "^0.7.0",
         "iconv-lite": "^0.4.24",
@@ -12998,6 +13174,7 @@
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
       "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
+      "dev": true,
       "dependencies": {
         "os-tmpdir": "~1.0.2"
       },
@@ -13144,6 +13321,7 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
       "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
+      "dev": true,
       "dependencies": {
         "escape-string-regexp": "^1.0.5"
       },
@@ -13210,6 +13388,7 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "devOptional": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -13377,10 +13556,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
-      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
-      "dev": true,
+      "version": "1.15.4",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
+      "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
       "funding": [
         {
           "type": "individual",
@@ -13400,6 +13578,7 @@
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
       "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dev": true,
       "dependencies": {
         "is-callable": "^1.1.3"
       }
@@ -13588,7 +13767,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
       "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-      "dev": true,
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -13686,6 +13864,7 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -13739,6 +13918,7 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
       "engines": {
         "node": "6.* || 8.* || >= 10.*"
       }
@@ -13747,6 +13927,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
       "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
+      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -14045,6 +14226,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
       "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.3"
       },
@@ -14068,6 +14250,7 @@
       "version": "16.8.1",
       "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.8.1.tgz",
       "integrity": "sha512-59LZHPdGZVh695Ud9lRzPBVTtlX9ZCV150Er2W43ro37wVof0ctenSaskPPjN7lVTIN8mSZt8PHUNKZuNQUuxw==",
+      "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
       }
@@ -14178,6 +14361,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
       "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -14189,6 +14373,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -14200,6 +14385,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
       "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
       "dependencies": {
         "has-symbols": "^1.0.2"
       },
@@ -14222,7 +14408,8 @@
     "node_modules/headers-polyfill": {
       "version": "3.2.5",
       "resolved": "https://registry.npmjs.org/headers-polyfill/-/headers-polyfill-3.2.5.tgz",
-      "integrity": "sha512-tUCGvt191vNSQgttSyJoibR+VO+I6+iCHIUdhzEMJKE+EAL8BwCN7fUOZlY4ofOelNHsK+gEjxB/B+9N3EWtdA=="
+      "integrity": "sha512-tUCGvt191vNSQgttSyJoibR+VO+I6+iCHIUdhzEMJKE+EAL8BwCN7fUOZlY4ofOelNHsK+gEjxB/B+9N3EWtdA==",
+      "dev": true
     },
     "node_modules/history": {
       "version": "5.3.0",
@@ -14554,6 +14741,7 @@
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
       "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3"
       },
@@ -14577,6 +14765,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
       "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -14763,6 +14952,7 @@
       "version": "8.2.6",
       "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.6.tgz",
       "integrity": "sha512-M1WuAmb7pn9zdFRtQYk26ZBoY043Sse0wVDdk4Bppr+JOXyQYybdtvK+l9wUibhtjdjvtoiNy8tk+EgsYIUqKg==",
+      "dev": true,
       "dependencies": {
         "ansi-escapes": "^4.2.1",
         "chalk": "^4.1.1",
@@ -14788,6 +14978,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -14802,6 +14993,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -14817,6 +15009,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -14825,6 +15018,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==",
+      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -14836,6 +15030,7 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
       "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -14905,6 +15100,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
       "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -14968,6 +15164,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "devOptional": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -14995,6 +15192,7 @@
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
       "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -15065,6 +15263,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -15086,6 +15285,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -15103,6 +15303,7 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
       "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
+      "dev": true,
       "dependencies": {
         "has-tostringtag": "^1.0.0"
       },
@@ -15117,6 +15318,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "devOptional": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -15153,6 +15355,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
       "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -15197,12 +15400,14 @@
     "node_modules/is-node-process": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/is-node-process/-/is-node-process-1.2.0.tgz",
-      "integrity": "sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw=="
+      "integrity": "sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==",
+      "dev": true
     },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "devOptional": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -15347,6 +15552,7 @@
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.12.tgz",
       "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==",
+      "dev": true,
       "dependencies": {
         "which-typed-array": "^1.1.11"
       },
@@ -15367,6 +15573,7 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
       "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -17541,6 +17748,7 @@
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
       "integrity": "sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -18082,7 +18290,8 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "devOptional": true
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
@@ -18117,6 +18326,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
       "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "dev": true,
       "dependencies": {
         "chalk": "^4.1.0",
         "is-unicode-supported": "^0.1.0"
@@ -18132,6 +18342,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -18146,6 +18357,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -18161,6 +18373,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -18169,6 +18382,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==",
+      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -18308,9 +18522,9 @@
       }
     },
     "node_modules/map-befine-swiper": {
-      "version": "0.8.3",
-      "resolved": "https://registry.npmjs.org/map-befine-swiper/-/map-befine-swiper-0.8.3.tgz",
-      "integrity": "sha512-yWUTckvw6hX/Qu+KwLV26UFKVfZyjje8EbMh6aN16DS4KNttO2vTQXUSTWbI8YarOpGyax1rwK0ImNTIaITdgw==",
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/map-befine-swiper/-/map-befine-swiper-0.9.4.tgz",
+      "integrity": "sha512-oXG038LTTEzM/aQM7Yg+nOa3yUqDDhI5pz0MJ6nxeaZY00l8JfUvz12gDBwDJXhJCx9iBOnPxn4YHi9bul8mQQ==",
       "dependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -18651,7 +18865,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -18660,7 +18873,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -18672,6 +18884,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -18801,6 +19014,7 @@
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/msw/-/msw-1.3.1.tgz",
       "integrity": "sha512-GhP5lHSTXNlZb9EaKgPRJ01YAnVXwzkvnTzRn4W8fxU2DXuJrRO+Nb6OHdYqB4fCkwSNpIJH9JkON5Y6rHqJMQ==",
+      "dev": true,
       "hasInstallScript": true,
       "dependencies": {
         "@mswjs/cookies": "^0.2.2",
@@ -18846,6 +19060,7 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/msw-storybook-addon/-/msw-storybook-addon-1.8.0.tgz",
       "integrity": "sha512-dw3vZwqjixmiur0vouRSOax7wPSu9Og2Hspy9JZFHf49bZRjwDiLF0Pfn2NXEkGviYJOJiGxS1ejoTiUwoSg4A==",
+      "dev": true,
       "dependencies": {
         "is-node-process": "^1.0.1"
       },
@@ -18857,6 +19072,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -18871,6 +19087,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -18886,6 +19103,7 @@
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
       "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
+      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -18894,6 +19112,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -18901,12 +19120,14 @@
     "node_modules/msw/node_modules/path-to-regexp": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
-      "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw=="
+      "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==",
+      "dev": true
     },
     "node_modules/msw/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==",
+      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -18930,7 +19151,8 @@
     "node_modules/mute-stream": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
-      "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
+      "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
+      "dev": true
     },
     "node_modules/nanoid": {
       "version": "3.3.6",
@@ -19002,6 +19224,7 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
       "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "dev": true,
       "dependencies": {
         "whatwg-url": "^5.0.0"
       },
@@ -19026,17 +19249,20 @@
     "node_modules/node-fetch/node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "dev": true
     },
     "node_modules/node-fetch/node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "dev": true
     },
     "node_modules/node-fetch/node_modules/whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
       "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dev": true,
       "dependencies": {
         "tr46": "~0.0.3",
         "webidl-conversions": "^3.0.0"
@@ -19087,6 +19313,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -19301,6 +19528,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
       "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dev": true,
       "dependencies": {
         "mimic-fn": "^2.1.0"
       },
@@ -19349,6 +19577,7 @@
       "version": "5.4.1",
       "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
       "integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
+      "dev": true,
       "dependencies": {
         "bl": "^4.1.0",
         "chalk": "^4.1.0",
@@ -19371,6 +19600,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -19385,6 +19615,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -19400,6 +19631,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -19408,6 +19640,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==",
+      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -19419,6 +19652,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
       "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -19432,7 +19666,8 @@
     "node_modules/outvariant": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/outvariant/-/outvariant-1.4.0.tgz",
-      "integrity": "sha512-AlWY719RF02ujitly7Kk/0QlV+pXGFDHrHf9O2OKqyqgBieaPOIeuSkL8sRK6j2WK+/ZAURq2kZsY0d8JapUiw=="
+      "integrity": "sha512-AlWY719RF02ujitly7Kk/0QlV+pXGFDHrHf9O2OKqyqgBieaPOIeuSkL8sRK6j2WK+/ZAURq2kZsY0d8JapUiw==",
+      "dev": true
     },
     "node_modules/p-limit": {
       "version": "3.1.0",
@@ -19693,6 +19928,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "devOptional": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -20656,6 +20892,7 @@
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
       "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dev": true,
       "dependencies": {
         "inherits": "^2.0.3",
         "string_decoder": "^1.1.1",
@@ -20669,6 +20906,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "devOptional": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -20907,6 +21145,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
       "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -20985,6 +21224,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
       "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "dev": true,
       "dependencies": {
         "onetime": "^5.1.0",
         "signal-exit": "^3.0.2"
@@ -21057,6 +21297,7 @@
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
       "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==",
+      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -21088,6 +21329,7 @@
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
       "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "dev": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -21114,6 +21356,7 @@
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -21146,7 +21389,8 @@
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
     },
     "node_modules/saxes": {
       "version": "6.0.0",
@@ -21258,9 +21502,9 @@
       "dev": true
     },
     "node_modules/serialize-javascript": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
-      "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
       "dev": true,
       "dependencies": {
         "randombytes": "^2.1.0"
@@ -21390,7 +21634,8 @@
     "node_modules/set-cookie-parser": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz",
-      "integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ=="
+      "integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==",
+      "dev": true
     },
     "node_modules/set-function-name": {
       "version": "2.0.1",
@@ -21476,7 +21721,8 @@
     "node_modules/signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "dev": true
     },
     "node_modules/simple-update-notifier": {
       "version": "2.0.0",
@@ -21816,12 +22062,14 @@
     "node_modules/strict-event-emitter": {
       "version": "0.4.6",
       "resolved": "https://registry.npmjs.org/strict-event-emitter/-/strict-event-emitter-0.4.6.tgz",
-      "integrity": "sha512-12KWeb+wixJohmnwNFerbyiBrAlq5qJLwIt38etRtKtmmHyDSoGlIqFE9wx+4IwG0aDjI7GV8tc8ZccjWZZtTg=="
+      "integrity": "sha512-12KWeb+wixJohmnwNFerbyiBrAlq5qJLwIt38etRtKtmmHyDSoGlIqFE9wx+4IwG0aDjI7GV8tc8ZccjWZZtTg==",
+      "dev": true
     },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
       "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dev": true,
       "dependencies": {
         "safe-buffer": "~5.2.0"
       }
@@ -21843,6 +22091,7 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -21876,7 +22125,8 @@
     "node_modules/string-width/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
     },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.10",
@@ -21948,6 +22198,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -22842,7 +23093,8 @@
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
+      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
+      "dev": true
     },
     "node_modules/through2": {
       "version": "2.0.5",
@@ -22932,6 +23184,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "devOptional": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -23210,6 +23463,7 @@
       "version": "2.19.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
       "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "dev": true,
       "engines": {
         "node": ">=12.20"
       },
@@ -23305,7 +23559,7 @@
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
       "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
-      "devOptional": true,
+      "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -23612,6 +23866,7 @@
       "version": "0.12.5",
       "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
       "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+      "dev": true,
       "dependencies": {
         "inherits": "^2.0.3",
         "is-arguments": "^1.0.4",
@@ -23623,7 +23878,8 @@
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true
     },
     "node_modules/utila": {
       "version": "0.4.0",
@@ -23759,6 +24015,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
       "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
+      "dev": true,
       "dependencies": {
         "defaults": "^1.0.3"
       }
@@ -23767,6 +24024,7 @@
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/web-encoding/-/web-encoding-1.1.5.tgz",
       "integrity": "sha512-HYLeVCdJ0+lBYV2FvNZmv3HJ2Nt0QYXqZojk3d9FJOLkwnuhzM9tmamh8d7HPM8QqjKH8DeHkFTx+CFlWpZZDA==",
+      "dev": true,
       "dependencies": {
         "util": "^0.12.3"
       },
@@ -24343,6 +24601,7 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.11.tgz",
       "integrity": "sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==",
+      "dev": true,
       "dependencies": {
         "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
@@ -24542,6 +24801,7 @@
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
       "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -24564,6 +24824,7 @@
       "version": "17.7.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
       "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
       "dependencies": {
         "cliui": "^8.0.1",
         "escalade": "^3.1.1",
@@ -24590,6 +24851,7 @@
       "version": "21.1.1",
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
       "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       }
diff --git a/frontend/package.json b/frontend/package.json
index 1c883032..1de20651 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,9 +16,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@tanstack/react-query": "^5.17.9",
+    "@tanstack/react-query-devtools": "^5.17.9",
+    "axios": "^1.5.1",
     "history": "^5.3.0",
-    "map-befine-swiper": "^0.8.3",
-    "msw-storybook-addon": "^1.8.0",
+    "map-befine-swiper": "^0.9.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-ga4": "^2.1.0",
@@ -55,6 +57,7 @@
     "babel-plugin-styled-components": "^2.1.4",
     "browser-image-compression": "^2.0.2",
     "chromatic": "^6.19.9",
+    "compression-webpack-plugin": "^11.0.0",
     "cypress": "^12.17.4",
     "dotenv-webpack": "^8.0.1",
     "eslint": "^8.44.0",
@@ -67,6 +70,7 @@
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2",
     "msw": "^1.2.2",
+    "msw-storybook-addon": "^1.8.0",
     "prettier": "^3.0.0",
     "process": "^0.11.10",
     "react-refresh": "^0.14.0",
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 8a529c1d..35d3ea8f 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -2,19 +2,41 @@
 <html lang="ko">
   <head>
     <base href="/" />
-    <link
-      rel="icon"
-      href="https://dr702blqc4x5d.cloudfront.net/2023-map-be-fine/icon/favicon.svg"
-    />
+    <link rel="icon" href="./mapbefine_favicon.svg" />
     <meta charset="utf-8" />
     <meta name="theme-color" content="#000000" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta http-equiv="cache-control" content="max-age=31536000, no-cache" />
+
+    <title>괜찮을지도</title>
+    <meta
+      name="keyword"
+      content="지도, 붕어빵, 카페, 관심사, 맛집, 명소, 기록, 모아보기, 공유"
+    />
+    <meta
+      name="description"
+      content="내 관심사로 지도를 만들어보세요. 여러 지도를 한 번에 모아볼 수도 있고, 공개된 다른 지도에서 마음에 드는 장소만 뽑아서 내 지도에 추가할 수도 있어요."
+    />
+
+    <meta property="og:title" content="괜찮을지도" />
+    <meta
+      property="og:description"
+      content="내 관심사로 지도를 만들어보세요."
+    />
+    <meta property="og:locale" content="ko_KR" />
+    <meta property="og:url" content="https://mapbefine.com/" />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="괜찮을지도" />
+    <meta property="og:image" content="./mapbefine_og_image.png" />
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <!-- T Map -->
     <script
       script
       src="https://apis.openapi.sk.com/tmap/vectorjs?version=1&&appKey=P2MX6F1aaf428AbAyahIl9L8GsIlES04aXS9hgxo"
     ></script>
-    <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
 
     <!-- Google tag (gtag.js) -->
     <script
@@ -30,10 +52,5 @@
 
       gtag('config', 'G-5BQ0F8QB8B');
     </script>
-
-    <title>괜찮을지도</title>
-  </head>
-  <body>
-    <div id="root"></div>
   </body>
 </html>
diff --git a/frontend/public/mapbefine_favicon.svg b/frontend/public/mapbefine_favicon.svg
new file mode 100644
index 00000000..d9cefd8a
--- /dev/null
+++ b/frontend/public/mapbefine_favicon.svg
@@ -0,0 +1,11 @@
+<svg width="40" height="38" viewBox="0 0 40 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.2983 7.00189L39.3663 10.2059C39.746 10.34 40 10.6994 40 11.1025V37.0483C40 37.7113 39.3392 38.1708 38.7185 37.9393L29.6506 34.5573C29.2788 34.4187 29.0323 34.0634 29.0323 33.6663V7.89857C29.0323 7.2425 29.6803 6.78354 30.2983 7.00189Z" fill="#454545"/>
+<path d="M1.26598 6.7866L10.334 9.99058C10.7137 10.1248 10.9677 10.4841 10.9677 10.8873V36.833C10.9677 37.496 10.3069 37.9555 9.68624 37.724L0.618248 34.3421C0.24652 34.2034 0 33.8481 0 33.451V7.68328C0 7.02721 0.647988 6.56825 1.26598 6.7866Z" fill="#454545"/>
+<path d="M24.3254 6.7866L15.2575 9.99058C14.8777 10.1248 14.6237 10.4841 14.6237 10.8873V36.833C14.6237 37.496 15.2845 37.9555 15.9052 37.724L24.9732 34.3421C25.3449 34.2034 25.5914 33.8481 25.5914 33.451V7.68328C25.5914 7.02721 24.9434 6.56825 24.3254 6.7866Z" fill="#454545"/>
+<path d="M18.2794 30.7379C17.6303 31.5717 16.3105 30.8818 16.6229 29.872L20.6515 16.8508C20.827 16.2837 21.4728 16.0145 21.9985 16.2892L26.3401 18.5586C26.8658 18.8333 27.0142 19.5178 26.6497 19.986L18.2794 30.7379Z" fill="#BCBCBC"/>
+<path d="M36.7275 10.1428C36.7275 15.7446 32.1914 20.2857 26.5958 20.2857C21.0002 20.2857 16.4641 15.7446 16.4641 10.1428C16.4641 4.5411 21.0002 0 26.5958 0C32.1914 0 36.7275 4.5411 36.7275 10.1428Z" fill="#E1325C"/>
+<path d="M24.9072 5.63491C24.9072 6.87973 23.8992 7.88887 22.6557 7.88887C21.4122 7.88887 20.4042 6.87973 20.4042 5.63491C20.4042 4.39008 21.4122 3.38094 22.6557 3.38094C23.8992 3.38094 24.9072 4.39008 24.9072 5.63491Z" fill="white" fill-opacity="0.6"/>
+<path d="M32.7874 8.17061C32.7874 8.63743 32.4094 9.01585 31.9431 9.01585C31.4768 9.01585 31.0988 8.63743 31.0988 8.17061C31.0988 7.7038 31.4768 7.32538 31.9431 7.32538C32.4094 7.32538 32.7874 7.7038 32.7874 8.17061Z" fill="black"/>
+<path d="M29.4102 10.9881C29.4102 11.4549 29.0322 11.8333 28.5659 11.8333C28.0996 11.8333 27.7216 11.4549 27.7216 10.9881C27.7216 10.5213 28.0996 10.1428 28.5659 10.1428C29.0322 10.1428 29.4102 10.5213 29.4102 10.9881Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.7126 13.4643C33.9482 13.6733 33.97 14.0338 33.7613 14.2697C32.5052 15.6892 30.7564 16.172 29.1728 15.4465C28.8866 15.3154 28.7607 14.9768 28.8917 14.6903C29.0227 14.4037 29.3609 14.2778 29.6471 14.4089C30.6976 14.8901 31.9247 14.6244 32.9081 13.5131C33.1168 13.2772 33.477 13.2554 33.7126 13.4643Z" fill="black"/>
+</svg>
diff --git a/frontend/public/mapbefine_og_image.png b/frontend/public/mapbefine_og_image.png
new file mode 100644
index 00000000..e3915fcc
Binary files /dev/null and b/frontend/public/mapbefine_og_image.png differ
diff --git a/frontend/src/GlobalStyle.ts b/frontend/src/GlobalStyle.ts
index e8176c04..6e15108b 100644
--- a/frontend/src/GlobalStyle.ts
+++ b/frontend/src/GlobalStyle.ts
@@ -3,6 +3,8 @@ import { createGlobalStyle } from 'styled-components';
 const GlobalStyle = createGlobalStyle`
   html,
   body,
+  h2,
+  h3,
   textarea{
     padding:0;
     margin:0;
diff --git a/frontend/src/api/http.ts b/frontend/src/api/http.ts
new file mode 100644
index 00000000..da667bda
--- /dev/null
+++ b/frontend/src/api/http.ts
@@ -0,0 +1,35 @@
+import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';
+
+const API_POSTFIX = 'api';
+const BASE_URL = process.env.APP_URL || `https://mapbefine.com/${API_POSTFIX}`;
+
+const token = localStorage.getItem('userToken');
+
+const axiosInstance = axios.create({
+  baseURL: BASE_URL,
+  headers: token ? { Authorization: `Bearer ${token}` } : {},
+});
+
+export interface HttpClient extends AxiosInstance {
+  get<T = unknown>(url: string, config?: AxiosRequestConfig): Promise<T>;
+  post<T = unknown>(
+    url: string,
+    data?: any,
+    config?: AxiosRequestConfig,
+  ): Promise<T>;
+  patch<T = unknown>(
+    url: string,
+    data?: any,
+    config?: AxiosRequestConfig,
+  ): Promise<T>;
+  put<T = unknown>(
+    url: string,
+    data?: any,
+    config?: AxiosRequestConfig,
+  ): Promise<T>;
+  delete<T = unknown>(url: string, config?: AxiosRequestConfig): Promise<T>;
+}
+
+export const http: HttpClient = axiosInstance;
+
+http.interceptors.response.use((res) => res.data);
diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
new file mode 100644
index 00000000..0f795191
--- /dev/null
+++ b/frontend/src/api/index.ts
@@ -0,0 +1,4 @@
+import { TopicCardProps } from '../types/Topic';
+import { http } from './http';
+
+export const getTopics = (url: string) => http.get<TopicCardProps[]>(url);
diff --git a/frontend/src/apiHooks/new/useGetTopics.ts b/frontend/src/apiHooks/new/useGetTopics.ts
new file mode 100644
index 00000000..ffb65693
--- /dev/null
+++ b/frontend/src/apiHooks/new/useGetTopics.ts
@@ -0,0 +1,14 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { getTopics } from '../../apis/new';
+
+const useGetTopics = (url: string) => {
+  const { data: topics, refetch } = useSuspenseQuery({
+    queryKey: ['topics', url],
+    queryFn: () => getTopics(url),
+  });
+
+  return { topics, refetch };
+};
+
+export default useGetTopics;
diff --git a/frontend/src/apis/new/http.ts b/frontend/src/apis/new/http.ts
new file mode 100644
index 00000000..3c39ecd1
--- /dev/null
+++ b/frontend/src/apis/new/http.ts
@@ -0,0 +1,101 @@
+import axios, {
+  AxiosInstance,
+  AxiosRequestConfig,
+  AxiosRequestHeaders,
+} from 'axios';
+
+const API_POSTFIX = 'api';
+const BASE_URL = process.env.APP_URL || `https://mapbefine.com/${API_POSTFIX}`;
+const token = localStorage.getItem('userToken');
+
+const axiosInstance = axios.create({
+  baseURL: BASE_URL,
+  headers: token ? { Authorization: `Bearer ${token}` } : {},
+  // withCredentials: true,
+});
+
+let refreshResponse: Promise<Response> | null = null;
+
+export interface HttpClient extends AxiosInstance {
+  get<T = unknown>(url: string, config?: AxiosRequestConfig): Promise<T>;
+  post<T = unknown>(
+    url: string,
+    data?: any,
+    config?: AxiosRequestConfig,
+  ): Promise<T>;
+  patch<T = unknown>(
+    url: string,
+    data?: any,
+    config?: AxiosRequestConfig,
+  ): Promise<T>;
+  put<T = unknown>(
+    url: string,
+    data?: any,
+    config?: AxiosRequestConfig,
+  ): Promise<T>;
+  delete<T = unknown>(url: string, config?: AxiosRequestConfig): Promise<T>;
+}
+
+export const http: HttpClient = axiosInstance;
+
+http.interceptors.response.use((res) => res.data);
+http.interceptors.request.use(
+  async (config) => {
+    const userToken = localStorage.getItem('userToken');
+
+    if (userToken && isTokenExpired(userToken)) {
+      await updateToken(config.headers);
+    }
+    return config;
+  },
+  (error) => Promise.reject(error),
+);
+
+const isTokenExpired = (token: string) => {
+  const decodedPayloadObject = decodeToken(token);
+  return decodedPayloadObject.exp * 1000 < Date.now();
+};
+
+const decodeToken = (token: string) => {
+  const tokenParts = token.split('.');
+
+  if (tokenParts.length !== 3) {
+    throw new Error('토큰이 잘못되었습니다.');
+  }
+
+  const decodedPayloadString = atob(tokenParts[1]);
+
+  return JSON.parse(decodedPayloadString);
+};
+
+async function updateToken(headers: AxiosRequestHeaders) {
+  const response = await refreshToken(headers);
+  const responseCloned = response.clone();
+  const newToken = await responseCloned.json();
+
+  localStorage.setItem('userToken', newToken.accessToken);
+}
+
+async function refreshToken(headers: AxiosRequestHeaders): Promise<Response> {
+  if (refreshResponse !== null) {
+    return refreshResponse;
+  }
+
+  const accessToken = localStorage.getItem('userToken');
+  refreshResponse = fetch(`${BASE_URL}/refresh-token`, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({
+      accessToken,
+    }),
+  });
+
+  const responseData = await refreshResponse;
+  refreshResponse = null;
+
+  if (!responseData.ok) {
+    throw new Error('Failed to refresh access token.');
+  }
+
+  return responseData;
+}
diff --git a/frontend/src/apis/new/index.ts b/frontend/src/apis/new/index.ts
new file mode 100644
index 00000000..c3a8a0d8
--- /dev/null
+++ b/frontend/src/apis/new/index.ts
@@ -0,0 +1,19 @@
+import { ClusteredCoordinates } from '../../pages/SelectedTopic/types';
+import { TopicCardProps, TopicDetailProps } from '../../types/Topic';
+import { http } from './http';
+
+export const getTopics = (url: string) => http.get<TopicCardProps[]>(url);
+
+export const getProfile = () =>
+  http.get<TopicCardProps[] | null>('/members/my/topics');
+
+export const getTopicDetail = (topicId: string) =>
+  http.get<TopicDetailProps[]>(`/topics/ids?ids=${topicId}`);
+
+export const getClusteredCoordinates = (
+  topicId: string,
+  distanceOfPinSize: number,
+) =>
+  http.get<ClusteredCoordinates[]>(
+    `/topics/clusters?ids=${topicId}&image-diameter=${distanceOfPinSize}`,
+  );
diff --git a/frontend/src/components/AddFavorite/index.tsx b/frontend/src/components/AddFavorite/index.tsx
index 7acc3c34..42f50734 100644
--- a/frontend/src/components/AddFavorite/index.tsx
+++ b/frontend/src/components/AddFavorite/index.tsx
@@ -2,6 +2,7 @@ import { styled } from 'styled-components';
 
 import { deleteApi } from '../../apis/deleteApi';
 import { postApi } from '../../apis/postApi';
+import { ARIA_FOCUS } from '../../constants';
 import useToast from '../../hooks/useToast';
 
 interface AddFavoriteProps {
@@ -48,7 +49,12 @@ function AddFavorite({
   };
 
   return (
-    <Wrapper onClick={isBookmarked ? deleteFavoriteList : addFavoriteList}>
+    <Wrapper
+      tabIndex={ARIA_FOCUS}
+      role="button"
+      aria-label="즐겨찾기 추가 버튼"
+      onClick={isBookmarked ? deleteFavoriteList : addFavoriteList}
+    >
       {children}
     </Wrapper>
   );
diff --git a/frontend/src/components/AddSeeTogether/index.tsx b/frontend/src/components/AddSeeTogether/index.tsx
index 9d2604b9..6d108e5b 100644
--- a/frontend/src/components/AddSeeTogether/index.tsx
+++ b/frontend/src/components/AddSeeTogether/index.tsx
@@ -4,6 +4,7 @@ import { styled } from 'styled-components';
 import { deleteApi } from '../../apis/deleteApi';
 import { getApi } from '../../apis/getApi';
 import { postApi } from '../../apis/postApi';
+import { ARIA_FOCUS } from '../../constants';
 import { SeeTogetherContext } from '../../context/SeeTogetherContext';
 import useNavigator from '../../hooks/useNavigator';
 import useToast from '../../hooks/useToast';
@@ -108,7 +109,12 @@ function AddSeeTogether({
   }
 
   return (
-    <Wrapper onClick={isInAtlas ? deleteSeeTogether : addSeeTogetherList}>
+    <Wrapper
+      tabIndex={ARIA_FOCUS}
+      role="button"
+      aria-label="모아보기 추가 버튼"
+      onClick={isInAtlas ? deleteSeeTogether : addSeeTogetherList}
+    >
       {children}
     </Wrapper>
   );
diff --git a/frontend/src/components/AuthorityRadioContainer/index.tsx b/frontend/src/components/AuthorityRadioContainer/index.tsx
index 1c5dd0b4..7a0c1b94 100644
--- a/frontend/src/components/AuthorityRadioContainer/index.tsx
+++ b/frontend/src/components/AuthorityRadioContainer/index.tsx
@@ -3,6 +3,7 @@ import { useContext, useState } from 'react';
 import styled from 'styled-components';
 
 import useGet from '../../apiHooks/useGet';
+import { ARIA_FOCUS } from '../../constants';
 import { ModalContext } from '../../context/ModalContext';
 import {
   TopicAuthorMember,
@@ -80,7 +81,7 @@ function AuthorityRadioContainer({
             id="publicity-public"
             checked={!isPrivate}
             onChange={() => setIsPrivate(false)}
-            tabIndex={4}
+            tabIndex={ARIA_FOCUS}
           />
           <Space size={1} />
           <label htmlFor="publicity-public">공개 지도</label>
@@ -93,7 +94,7 @@ function AuthorityRadioContainer({
           id="publicity-private"
           checked={isPrivate}
           onChange={() => setIsPrivate(true)}
-          tabIndex={4}
+          tabIndex={ARIA_FOCUS}
         />
         <Space size={1} />
         <label htmlFor="publicity-private">비공개 지도</label>
@@ -115,7 +116,7 @@ function AuthorityRadioContainer({
             id="permission-all"
             checked={isAllPermissioned}
             onChange={onChangeInitAuthMembersWithSetIsAllPermissioned}
-            tabIndex={5}
+            tabIndex={ARIA_FOCUS}
           />
           <Space size={1} />
           {isPrivate ? (
@@ -135,7 +136,7 @@ function AuthorityRadioContainer({
           onClick={() => {
             isAllPermissioned === false && openModal('newTopic');
           }}
-          tabIndex={5}
+          tabIndex={ARIA_FOCUS}
         />
         <Space size={1} />
         <label htmlFor="permission-group">친구들에게</label>
@@ -237,7 +238,7 @@ function AuthorityRadioContainer({
 
           <Flex $justifyContent="end" padding="12px" bottom="0px">
             <Button
-              tabIndex={6}
+              tabIndex={ARIA_FOCUS}
               type="button"
               variant="secondary"
               onClick={() => {
@@ -252,7 +253,7 @@ function AuthorityRadioContainer({
             <Space size={3} />
 
             <Button
-              tabIndex={6}
+              tabIndex={ARIA_FOCUS}
               variant="primary"
               onClick={() => {
                 closeModal('newTopic');
diff --git a/frontend/src/components/Banner/index.tsx b/frontend/src/components/Banner/index.tsx
index f85549f1..a568a3c0 100644
--- a/frontend/src/components/Banner/index.tsx
+++ b/frontend/src/components/Banner/index.tsx
@@ -22,29 +22,25 @@ export default function Banner() {
   };
 
   return (
-    <Swiper
-      width={1140}
-      height={400}
-      $simpleTab
-      $tabBoxPosition="bottom"
-      $isNotTabBoxShow
-      swipeable
-      swiper
-      autoplay
-    >
+    <Swiper tag="section" width={1140} height="auto" $tabBoxPosition="bottom" autoplay>
       <Tab label="붕어빵 지도">
         <Box cursor="pointer" onClick={goToBoongABbangTopic}>
           <BannerImage
             width="100%"
             src={BannerItemBoongWEBP}
             alt="붕어빵 배너"
+            aria-label="대동붕어빵여지도로 이동"
           />
         </Box>
       </Tab>
       <Tab label="사용법">
         <Box cursor="pointer">
           <a href={USAGE_URL} target="blank">
-            <BannerImage src={BannerItemUsageWEBP} alt="사용법 배너" />
+            <BannerImage
+              src={BannerItemUsageWEBP}
+              alt="사용법 배너"
+              aria-label="새 창을 띄워 사용법 페이지로 이동"
+            />
           </a>
         </Box>
       </Tab>
diff --git a/frontend/src/components/InputContainer/index.tsx b/frontend/src/components/InputContainer/index.tsx
index d5645be7..6bc8284f 100644
--- a/frontend/src/components/InputContainer/index.tsx
+++ b/frontend/src/components/InputContainer/index.tsx
@@ -52,7 +52,7 @@ function InputContainer({
   };
 
   return (
-    <>
+    <section>
       <Flex>
         <Text color="black" $fontSize="default" $fontWeight="normal">
           {containerTitle}
@@ -106,7 +106,7 @@ function InputContainer({
       )}
       <Space size={0} />
       <ErrorText>{errorMessage}</ErrorText>
-    </>
+    </section>
   );
 }
 const ErrorText = styled.span`
diff --git a/frontend/src/components/Layout/Logo.tsx b/frontend/src/components/Layout/Logo.tsx
index 2cadb2e8..c27a5e61 100644
--- a/frontend/src/components/Layout/Logo.tsx
+++ b/frontend/src/components/Layout/Logo.tsx
@@ -17,8 +17,9 @@ function Logo() {
       onKeyDown={onElementKeyDown}
       ref={elementRef}
       onClick={goToHome}
-      aria-label="괜찮을지도 로고 및 홈으로 이동 버튼"
       tabIndex={0}
+      aria-label="괜찮을지도 로고 및 홈으로 이동하기"
+      data-cy="logo"
     >
       <LogoImage />
     </Box>
diff --git a/frontend/src/components/Layout/index.tsx b/frontend/src/components/Layout/index.tsx
index 7f68df24..040d4109 100644
--- a/frontend/src/components/Layout/index.tsx
+++ b/frontend/src/components/Layout/index.tsx
@@ -67,6 +67,7 @@ function Layout({ children }: LayoutProps) {
                         </Box>
                       </LogoWrapper>
                       <Flex
+                        as="main"
                         $flexDirection="column"
                         height="inherit"
                         overflow="auto"
@@ -88,7 +89,7 @@ function Layout({ children }: LayoutProps) {
   );
 }
 
-const LogoWrapper = styled.section<{
+const LogoWrapper = styled.header<{
   $layoutWidth: '372px' | '100vw';
 }>`
   width: 372px;
@@ -107,7 +108,7 @@ const LogoWrapper = styled.section<{
   }
 `;
 
-const MediaWrapper = styled.section<{
+const MediaWrapper = styled.div<{
   $isAddPage: boolean;
   $layoutWidth: '372px' | '100vw';
 }>`
diff --git a/frontend/src/components/Map/index.tsx b/frontend/src/components/Map/index.tsx
index aa347ac3..aaae84b5 100644
--- a/frontend/src/components/Map/index.tsx
+++ b/frontend/src/components/Map/index.tsx
@@ -81,7 +81,7 @@ function Map() {
   );
 }
 
-const MapContainer = styled.div`
+const MapContainer = styled.section`
   width: 100%;
   height: 100%;
   position: relative;
diff --git a/frontend/src/components/MyInfo/UpdateMyInfo.tsx b/frontend/src/components/MyInfo/UpdateMyInfo.tsx
index 96a0da4b..2f07b7aa 100644
--- a/frontend/src/components/MyInfo/UpdateMyInfo.tsx
+++ b/frontend/src/components/MyInfo/UpdateMyInfo.tsx
@@ -51,7 +51,7 @@ function UpdateMyInfo({
       $justifyContent="center"
       $alignItems="center"
     >
-      <MyInfoImg src={myInfo.imageUrl} />
+      <MyInfoImg src={myInfo.imageUrl} alt="내 프로필 이미지" />
       <Space size={5} />
       <Box>
         <MyInfoInput value={myInfo.nickName} onChange={onChangeMyInfoName} />
diff --git a/frontend/src/components/MyInfo/index.tsx b/frontend/src/components/MyInfo/index.tsx
index 6f280f80..2ccfb4b5 100644
--- a/frontend/src/components/MyInfo/index.tsx
+++ b/frontend/src/components/MyInfo/index.tsx
@@ -2,7 +2,11 @@ import { SyntheticEvent, useState } from 'react';
 import { styled } from 'styled-components';
 
 import Setting from '../../assets/updateBtn.svg';
-import { DEFAULT_PROD_URL, DEFAULT_PROFILE_IMAGE } from '../../constants';
+import {
+  ARIA_FOCUS,
+  DEFAULT_PROD_URL,
+  DEFAULT_PROFILE_IMAGE,
+} from '../../constants';
 import useToast from '../../hooks/useToast';
 import { ProfileProps } from '../../types/Profile';
 import Box from '../common/Box';
@@ -69,8 +73,15 @@ function MyInfo() {
       $borderRadius="medium"
       $justifyContent="center"
       $alignItems="center"
+      tabIndex={ARIA_FOCUS}
+      aria-label={`내 정보 영역입니다. 나의 닉네임은 ${user.nickName}이고 이메일은 ${user.email} 입니다.`}
     >
-      <SettingContainer onClick={onClickSetting}>
+      <SettingContainer
+        onClick={onClickSetting}
+        tabIndex={ARIA_FOCUS}
+        role="button"
+        aria-label="내 닉네임 수정하기"
+      >
         <Setting />
       </SettingContainer>
       <Image
@@ -104,13 +115,6 @@ const MyInfoContainer = styled(Flex)`
   border: 1px solid ${({ theme }) => theme.color.lightGray};
 `;
 
-const MyInfoImg = styled.img`
-  width: 80px;
-  height: 80px;
-
-  border-radius: 50%;
-`;
-
 const SettingContainer = styled.div`
   position: absolute;
   top: 10px;
diff --git a/frontend/src/components/PinImageContainer/index.tsx b/frontend/src/components/PinImageContainer/index.tsx
index e5018a60..1584ff6d 100644
--- a/frontend/src/components/PinImageContainer/index.tsx
+++ b/frontend/src/components/PinImageContainer/index.tsx
@@ -59,9 +59,7 @@ function PinImageContainer({ images, getPinData }: PinImageContainerProps) {
                   $errorDefaultSrc={NOT_FOUND_IMAGE}
                 />
               </div>
-              <RemoveImageIconWrapper
-                onClick={() => onRemovePinImage(image.id)}
-              >
+              <RemoveImageIconWrapper onClick={() => onRemovePinImage(image.id)}>
                 <RemoveImageButton />
               </RemoveImageIconWrapper>
             </ImageWrapper>
@@ -84,15 +82,7 @@ function PinImageContainer({ images, getPinData }: PinImageContainerProps) {
 
   return (
     <Wrapper>
-      <Swiper
-        as="ul"
-        width={330}
-        height={100}
-        $elementsOneTab={3}
-        swiper
-        swipeable
-        $isNotTabBoxShow
-      >
+      <Swiper tag="ul" width={330} height={100} $slidePerTab={3}>
         {images.map((image, index) => (
           <Tab label={`${index}`} key={image.id}>
             <ImageWrapper key={`image-${index}`}>
@@ -105,9 +95,7 @@ function PinImageContainer({ images, getPinData }: PinImageContainerProps) {
                   $errorDefaultSrc={NOT_FOUND_IMAGE}
                 />
               </div>
-              <RemoveImageIconWrapper
-                onClick={() => onRemovePinImage(image.id)}
-              >
+              <RemoveImageIconWrapper onClick={() => onRemovePinImage(image.id)}>
                 <RemoveImageButton />
               </RemoveImageIconWrapper>
             </ImageWrapper>
@@ -116,7 +104,7 @@ function PinImageContainer({ images, getPinData }: PinImageContainerProps) {
         {isModalOpen && (
           <ImageModal closeModalHandler={closeModal}>
             <ModalImageWrapper>
-              <ModalImage src={modalImage} />
+              <ModalImage src={modalImage} alt="선택한 장소 이미지" />
               <Space size={3} />
               <Button variant="custom" onClick={closeModal}>
                 닫기
diff --git a/frontend/src/components/PinPreview/index.tsx b/frontend/src/components/PinPreview/index.tsx
index 8b02e467..60afa0fb 100644
--- a/frontend/src/components/PinPreview/index.tsx
+++ b/frontend/src/components/PinPreview/index.tsx
@@ -3,6 +3,7 @@ import { useLocation } from 'react-router-dom';
 import { styled } from 'styled-components';
 
 import { TagContext } from '../../context/TagContext';
+import useAriaLive from '../../hooks/useAriaLive';
 import useNavigator from '../../hooks/useNavigator';
 import theme from '../../themes';
 import Box from '../common/Box';
@@ -36,8 +37,32 @@ function PinPreview({
   const { pathname } = useLocation();
   const { routePage } = useNavigator();
   const { tags, setTags } = useContext(TagContext);
-  const [announceText, setAnnounceText] = useState<string>('지도 핀 선택');
   const inputRef = useRef<HTMLInputElement | null>(null);
+  const { setAriaLiveTagInnerText } = useAriaLive({
+    liveTagId: 'live-region',
+    defaultAnnounceText: '지도 핀 선택',
+  });
+
+  const addTagsAnnounceText = () => {
+    if (tags.length === 0) {
+      setAriaLiveTagInnerText(
+        `핀 ${pinTitle}이 뽑아오기 목록에 추가됨. 뽑아오기 기능을 활성화 합니다.`,
+      );
+      return;
+    }
+
+    setAriaLiveTagInnerText(`핀 ${pinTitle}이 뽑아오기 목록에 추가됨`);
+  };
+
+  const deleteTagsAnnounceText = () => {
+    if (tags.length === 1) {
+      setAriaLiveTagInnerText(
+        `핀 ${pinTitle}이 뽑아오기 목록에서 삭제됨. 뽑아오기 기능을 비활성화 합니다.`,
+      );
+      return;
+    }
+    setAriaLiveTagInnerText(`핀 ${pinTitle}이 뽑아오기 목록에서 삭제됨`);
+  };
 
   const onAddTagOfTopic = (e: React.ChangeEvent<HTMLInputElement>) => {
     e.stopPropagation();
@@ -45,21 +70,11 @@ function PinPreview({
     if (e.target.checked) {
       setTags((prevTags) => [...prevTags, { id: pinId, title: pinTitle }]);
 
-      if (tags.length === 0) {
-        setAnnounceText(`핀 ${pinTitle}이 태그에 추가됨. 뽑아오기 기능 활성화`);
-        return;
-      }
-      setAnnounceText(`핀 ${pinTitle}이 태그에 추가됨`);
+      addTagsAnnounceText();
     } else {
       setTags(tags.filter((tag) => tag.id !== pinId));
 
-      if (tags.length === 1) {
-        setAnnounceText(
-          `핀 ${pinTitle}이 태그에서 삭제됨. 뽑아오기 기능 비활성화`,
-        );
-        return;
-      }
-      setAnnounceText(`핀 ${pinTitle}이 태그에서 삭제됨`);
+      deleteTagsAnnounceText();
     }
   };
 
@@ -82,15 +97,6 @@ function PinPreview({
     }
   };
 
-  useEffect(() => {
-    if (announceText) {
-      const liveRegion = document.getElementById('live-region');
-      if (liveRegion) {
-        liveRegion.innerText = announceText;
-      }
-    }
-  }, [announceText]);
-
   return (
     <Flex
       height="152px"
@@ -110,11 +116,21 @@ function PinPreview({
         role="button"
       >
         <Space size={1} />
-        <EllipsisTitle color="black" $fontSize="default" $fontWeight="bold">
+        <EllipsisTitle
+          color="black"
+          $fontSize="default"
+          $fontWeight="bold"
+          aria-label={`장소 이름은 ${pinTitle} 이고`}
+        >
           {pinTitle}
         </EllipsisTitle>
         <Space size={0} />
-        <Text color="gray" $fontSize="small" $fontWeight="normal">
+        <Text
+          color="gray"
+          $fontSize="small"
+          $fontWeight="normal"
+          aria-label={`장소의 위치는 ${pinLocation} 입니다.`}
+        >
           {pinLocation}
         </Text>
         <Space size={3} />
@@ -122,6 +138,7 @@ function PinPreview({
           color="black"
           $fontSize="small"
           $fontWeight="normal"
+          aria-label={`이 장소에 대한 미리보기 설명은 다음과 같습니다. ${pinInformation}`}
         >
           {pinInformation}
         </EllipsisDescription>
@@ -133,7 +150,7 @@ function PinPreview({
           onChange={onAddTagOfTopic}
           onKeyDown={onInputKeyDown}
           checked={Boolean(tags.map((tag) => tag.id).includes(pinId))}
-          aria-label={`${pinTitle} 핀 선택`}
+          aria-label={`${pinTitle} 장소 뽑아오기 선택`}
           ref={inputRef}
         />
       </Box>
@@ -150,6 +167,23 @@ const MultiSelectButton = styled.input`
   width: 24px;
   height: 24px;
   cursor: pointer;
+
+  -webkit-appearance: none;
+  appearance: none;
+  border-radius: 0.15em;
+  margin-right: 0.5em;
+  border: 0.1em solid ${({ theme }) => theme.color.black};
+  background-color: ${({ theme }) => theme.color.white};
+  outline: none;
+
+  &:checked {
+    border-color: transparent;
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
+    background-size: 100% 100%;
+    background-position: 50%;
+    background-repeat: no-repeat;
+    background-color: ${({ theme }) => theme.color.checked};
+  }
 `;
 
 const EllipsisTitle = styled(Text)`
diff --git a/frontend/src/components/Skeletons/TopicCardSkeleton.tsx b/frontend/src/components/Skeletons/TopicCardSkeleton.tsx
index 1592b62e..f0d73cc0 100644
--- a/frontend/src/components/Skeletons/TopicCardSkeleton.tsx
+++ b/frontend/src/components/Skeletons/TopicCardSkeleton.tsx
@@ -1,53 +1,21 @@
 import { keyframes, styled } from 'styled-components';
 
-import Flex from '../common/Flex';
+import Box from '../common/Box';
 import Space from '../common/Space';
+import SkeletonBox from './common/SkeletonBox';
 
 function TopicCardSkeleton() {
   return (
-    <Flex $flexDirection="row">
-      <SkeletonImg />
-      <Space size={2} />
-      <Flex $flexDirection="column">
-        <SkeletonTitle />
-        <Space size={5} />
-        <SkeletonDescription />
-      </Flex>
-    </Flex>
+    <Box>
+      <SkeletonBox width="100%" $maxWidth={212} ratio="1.6 / 1" />
+      <Space size={1} />
+      <SkeletonBox width={212} height={25} />
+      <Space size={5} />
+      <SkeletonBox width={100} height={25} />
+      <Space size={1} />
+      <SkeletonBox width={212} height={46} />
+    </Box>
   );
 }
 
-const skeletonAnimation = keyframes`
-    from {
-    opacity: 0.1;
-    }
-    to {
-    opacity: 1;
-    }
-`;
-
-const SkeletonImg = styled.div`
-  width: 138px;
-  height: 138px;
-
-  border-radius: 8px;
-
-  background: ${({ theme }) => theme.color.lightGray};
-  animation: ${skeletonAnimation} 1s infinite;
-`;
-
-const SkeletonTitle = styled.div`
-  width: 172px;
-  height: 32px;
-
-  border-radius: 8px;
-
-  background: ${({ theme }) => theme.color.lightGray};
-  animation: ${skeletonAnimation} 1s infinite;
-`;
-
-const SkeletonDescription = styled(SkeletonTitle)`
-  height: 80px;
-`;
-
 export default TopicCardSkeleton;
diff --git a/frontend/src/components/Skeletons/TopicListSkeleton.tsx b/frontend/src/components/Skeletons/TopicListSkeleton.tsx
index 79deb153..e5ba5620 100644
--- a/frontend/src/components/Skeletons/TopicListSkeleton.tsx
+++ b/frontend/src/components/Skeletons/TopicListSkeleton.tsx
@@ -1,26 +1,40 @@
 import { styled } from 'styled-components';
 
+import Space from '../common/Space';
+import SkeletonBox from './common/SkeletonBox';
 import TopicCardSkeleton from './TopicCardSkeleton';
 
-function TopicCardContainerSkeleton() {
+function TopicListSkeleton() {
   return (
-    <Wrapper>
-      <TopicCardSkeleton />
-      <TopicCardSkeleton />
-      <TopicCardSkeleton />
-      <TopicCardSkeleton />
-      <TopicCardSkeleton />
-      <TopicCardSkeleton />
-    </Wrapper>
+    <>
+      <Space size={5} />
+      <SkeletonBox width={160} height={32} />
+      <Space size={4} />
+      <Space size={5} />
+      <TopicCardWrapper>
+        <TopicCardSkeleton />
+        <TopicCardSkeleton />
+        <TopicCardSkeleton />
+        <TopicCardSkeleton />
+        <TopicCardSkeleton />
+      </TopicCardWrapper>
+      <Space size={4} />
+      <TopicCardWrapper>
+        <TopicCardSkeleton />
+        <TopicCardSkeleton />
+        <TopicCardSkeleton />
+        <TopicCardSkeleton />
+        <TopicCardSkeleton />
+      </TopicCardWrapper>
+    </>
   );
 }
 
-const Wrapper = styled.section`
+const TopicCardWrapper = styled.section`
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
-  width: 1036px;
-  height: 300px;
+  width: 1140px;
 `;
 
-export default TopicCardContainerSkeleton;
+export default TopicListSkeleton;
diff --git a/frontend/src/components/Skeletons/common/SkeletonBox.ts b/frontend/src/components/Skeletons/common/SkeletonBox.ts
new file mode 100644
index 00000000..da8d1559
--- /dev/null
+++ b/frontend/src/components/Skeletons/common/SkeletonBox.ts
@@ -0,0 +1,38 @@
+import styled, { keyframes } from 'styled-components';
+
+import { convertCSS } from '../../../utils/convertCSS';
+
+interface Props {
+  width?: number | string;
+  height?: number | string;
+  $maxWidth?: number | string;
+  $maxHeight?: number | string;
+  ratio?: string;
+  radius?: number | string;
+}
+
+const skeletonAnimation = keyframes`
+  from {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const SkeletonBox = styled.div<Props>`
+  width: ${({ width }) => width && convertCSS(width)};
+  height: ${({ height }) => height && convertCSS(height)};
+  max-width: ${({ $maxWidth }) => $maxWidth && convertCSS($maxWidth)};
+  max-height: ${({ $maxHeight }) => $maxHeight && convertCSS($maxHeight)};
+  aspect-ratio: ${({ ratio }) => ratio};
+  border-radius: ${({ radius, theme }) =>
+    (radius && convertCSS(radius)) || theme.radius.small};
+  background: ${({ theme }) => theme.color.lightGray};
+  animation: ${skeletonAnimation} 1s infinite;
+`;
+
+export default SkeletonBox;
diff --git a/frontend/src/components/TopicCard/index.tsx b/frontend/src/components/TopicCard/index.tsx
index 41fc3503..9d50213f 100644
--- a/frontend/src/components/TopicCard/index.tsx
+++ b/frontend/src/components/TopicCard/index.tsx
@@ -1,4 +1,5 @@
-import { SyntheticEvent, useContext, useState } from 'react';
+import { QueryObserverResult, RefetchOptions } from '@tanstack/react-query';
+import { useContext, useState } from 'react';
 import { styled } from 'styled-components';
 
 import SeeTogetherSVG from '../../assets/seeTogetherBtn_filled.svg';
@@ -26,7 +27,9 @@ interface OnClickDesignatedProps {
 interface TopicCardExtendedProps extends TopicCardProps {
   cardType: 'default' | 'modal';
   onClickDesignated?: ({ topicId, topicName }: OnClickDesignatedProps) => void;
-  getTopicsFromServer?: () => void;
+  getTopicsFromServer?: (
+    options?: RefetchOptions | undefined,
+  ) => Promise<QueryObserverResult<TopicCardProps[], Error>>;
 }
 
 function TopicCard({
@@ -39,7 +42,6 @@ function TopicCard({
   pinCount,
   bookmarkCount,
   isInAtlas,
-  isBookmarked,
   onClickDesignated,
   getTopicsFromServer,
 }: TopicCardExtendedProps) {
@@ -79,6 +81,7 @@ function TopicCard({
       onKeyDown={onElementKeyDown}
     >
       <Flex
+        as="article"
         $flexDirection="column"
         position="relative"
         tabIndex={0}
@@ -93,6 +96,7 @@ function TopicCard({
           $errorDefaultSrc={DEFAULT_TOPIC_IMAGE}
           radius="small"
           ratio="1.6 / 1"
+          isAriaHidden
         />
 
         <Box width="100%" $maxWidth="212px" padding={1}>
@@ -101,7 +105,7 @@ function TopicCard({
               color="black"
               $fontSize="default"
               $fontWeight="bold"
-              aria-label={`지도 이름 ${name}`}
+              aria-label={`지도 이름은 ${name} 입니다.`}
             >
               {name}
             </MediaText>
@@ -111,14 +115,21 @@ function TopicCard({
             color="black"
             $fontSize="small"
             $fontWeight="normal"
-            aria-label={`작성자 ${creator}`}
+            aria-label={`작성자는 ${creator} 이며`}
           >
             {creator}
           </MediaText>
 
           <Space size={0} />
 
-          <MediaText color="gray" $fontSize="small" $fontWeight="normal">
+          <MediaText
+            color="gray"
+            $fontSize="small"
+            $fontWeight="normal"
+            aria-label={`${updatedAt
+              .split('T')[0]
+              .replaceAll('-', '.')}에 마지막으로 업데이트 되었습니다.`}
+          >
             {updatedAt.split('T')[0].replaceAll('-', '.')} 업데이트
           </MediaText>
 
@@ -132,7 +143,7 @@ function TopicCard({
                 color="black"
                 $fontSize="extraSmall"
                 $fontWeight="normal"
-                aria-label={`핀 갯수 ${pinCount}개`}
+                aria-label={`핀 갯수는 ${pinCount}개 이며`}
               >
                 {pinCount > 999 ? '+999' : pinCount}개
               </MediaText>
@@ -144,7 +155,7 @@ function TopicCard({
                 color="black"
                 $fontSize="extraSmall"
                 $fontWeight="normal"
-                aria-label={`즐겨찾기 ${bookmarkCount}명`}
+                aria-label={`즐겨찾기는 ${bookmarkCount}명 입니다.`}
               >
                 {bookmarkCount > 999 ? '+999' : bookmarkCount}명
               </MediaText>
diff --git a/frontend/src/components/TopicCardContainer/index.tsx b/frontend/src/components/TopicCardContainer/index.tsx
index b7d7272d..0099d681 100644
--- a/frontend/src/components/TopicCardContainer/index.tsx
+++ b/frontend/src/components/TopicCardContainer/index.tsx
@@ -1,10 +1,8 @@
 import { Swiper, Tab } from 'map-befine-swiper';
-import { useEffect, useState } from 'react';
 import { styled } from 'styled-components';
 
-import useGet from '../../apiHooks/useGet';
+import useTopicsQuery from '../../hooks/api/useTopicsQuery';
 import useKeyDown from '../../hooks/useKeyDown';
-import { TopicCardProps } from '../../types/Topic';
 import Box from '../common/Box';
 import Flex from '../common/Flex';
 import Space from '../common/Space';
@@ -25,43 +23,18 @@ function TopicCardContainer({
   containerDescription,
   routeWhenSeeAll,
 }: TopicCardContainerProps) {
-  const [topics, setTopics] = useState<TopicCardProps[] | null>(null);
+  const { topics, refetchTopics } = useTopicsQuery(url);
   const { elementRef, onElementKeyDown } = useKeyDown<HTMLSpanElement>();
-  const { fetchGet } = useGet();
-
-  const setTopicsFromServer = async () => {
-    await fetchGet<TopicCardProps[]>(
-      url,
-      '지도를 가져오는데 실패했습니다. 잠시 후 다시 시도해주세요.',
-      (response) => {
-        setTopics(response);
-      },
-    );
-  };
-
-  useEffect(() => {
-    setTopicsFromServer();
-  }, []);
 
   return (
     <section>
       <Flex $justifyContent="space-between" $alignItems="flex-end">
         <Box>
-          <MediaText
-            color="black"
-            $fontSize="extraLarge"
-            $fontWeight="bold"
-            tabIndex={0}
-          >
+          <MediaText as="h2" color="black" $fontSize="extraLarge" $fontWeight="bold" tabIndex={0}>
             {containerTitle}
           </MediaText>
           <Space size={0} />
-          <MediaText
-            color="gray"
-            $fontSize="default"
-            $fontWeight="normal"
-            tabIndex={0}
-          >
+          <MediaText color="gray" $fontSize="default" $fontWeight="normal" tabIndex={0}>
             {containerDescription}
           </MediaText>
         </Box>
@@ -72,7 +45,8 @@ function TopicCardContainer({
           $fontWeight="normal"
           tabIndex={0}
           onClick={routeWhenSeeAll}
-          aria-label={`${containerTitle} 전체보기 버튼`}
+          role="button"
+          aria-label={`${containerTitle} 전체보기`}
           ref={elementRef}
           onKeyDown={onElementKeyDown}
         >
@@ -83,14 +57,16 @@ function TopicCardContainer({
       <Space size={4} />
 
       <Swiper
-        as="ul"
+        tag="ul"
         width={1140}
-        height={300}
-        $elementsOneTab={5}
-        $elementsMediaQueries={[1180, 900, 660, 320]}
-        swiper
-        swipeable
-        $isNotTabBoxShow
+        height="auto"
+        $slidePerTab={5}
+        $breakPoints={{
+          1100: 4,
+          900: 3,
+          660: 2,
+          320: 1,
+        }}
       >
         {topics &&
           topics.map(
@@ -110,7 +86,7 @@ function TopicCardContainer({
                       bookmarkCount={topic.bookmarkCount}
                       isInAtlas={topic.isInAtlas}
                       isBookmarked={topic.isBookmarked}
-                      getTopicsFromServer={setTopicsFromServer}
+                      getTopicsFromServer={refetchTopics}
                     />
                     <CustomSpace />
                   </Flex>
diff --git a/frontend/src/components/TopicCardList/index.tsx b/frontend/src/components/TopicCardList/index.tsx
index fb0931b1..7e21b22a 100644
--- a/frontend/src/components/TopicCardList/index.tsx
+++ b/frontend/src/components/TopicCardList/index.tsx
@@ -1,8 +1,6 @@
-import { Fragment, useEffect, useState } from 'react';
-import { styled } from 'styled-components';
+import { ReactNode } from 'react';
 
-import useGet from '../../apiHooks/useGet';
-import { TopicCardProps } from '../../types/Topic';
+import useGetTopics from '../../apiHooks/new/useGetTopics';
 import Button from '../common/Button';
 import Flex from '../common/Flex';
 import Grid from '../common/Grid';
@@ -12,41 +10,26 @@ import TopicCard from '../TopicCard';
 
 interface TopicCardListProps {
   url: string;
-  errorMessage: string;
   commentWhenEmpty: string;
-  pageCommentWhenEmpty: string;
+  routePageName: string;
   routePage: () => void;
-  children?: React.ReactNode;
+  svgElementWhenEmpty?: ReactNode;
 }
 
 function TopicCardList({
   url,
-  errorMessage,
   commentWhenEmpty,
-  pageCommentWhenEmpty,
+  routePageName,
   routePage,
-  children,
+  svgElementWhenEmpty,
 }: TopicCardListProps) {
-  const [topics, setTopics] = useState<TopicCardProps[] | null>(null);
-  const { fetchGet } = useGet();
-
-  const getTopicsFromServer = async () => {
-    fetchGet<TopicCardProps[]>(url, errorMessage, (response) => {
-      setTopics(response);
-    });
-  };
-
-  useEffect(() => {
-    getTopicsFromServer();
-  }, []);
-
-  if (!topics) return null;
+  const { topics, refetch } = useGetTopics(url);
 
   if (topics.length === 0) {
     return (
-      <EmptyWrapper>
+      <Flex height="240px" $flexDirection="column" $alignItems="center">
         <Flex $alignItems="center">
-          {children}
+          {svgElementWhenEmpty}
           <Space size={1} />
           <Text color="black" $fontSize="default" $fontWeight="normal">
             {commentWhenEmpty}
@@ -55,14 +38,14 @@ function TopicCardList({
         </Flex>
         <Space size={5} />
         <Button variant="primary" onClick={routePage}>
-          {pageCommentWhenEmpty}
+          {routePageName}
         </Button>
-      </EmptyWrapper>
+      </Flex>
     );
   }
 
   return (
-    <Wrapper>
+    <Flex $flexWrap="wrap" $gap="20px">
       <Grid
         rows="auto"
         columns={5}
@@ -76,7 +59,7 @@ function TopicCardList({
         ]}
       >
         {topics.map((topic) => (
-          <Fragment key={topic.id}>
+          <ul key={topic.id}>
             <TopicCard
               cardType="default"
               id={topic.id}
@@ -88,26 +71,13 @@ function TopicCardList({
               bookmarkCount={topic.bookmarkCount}
               isInAtlas={topic.isInAtlas}
               isBookmarked={topic.isBookmarked}
-              getTopicsFromServer={getTopicsFromServer}
+              getTopicsFromServer={refetch}
             />
-          </Fragment>
+          </ul>
         ))}
       </Grid>
-    </Wrapper>
+    </Flex>
   );
 }
 
-const EmptyWrapper = styled.section`
-  height: 240px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-const Wrapper = styled.ul`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-`;
-
 export default TopicCardList;
diff --git a/frontend/src/components/TopicInfo/index.tsx b/frontend/src/components/TopicInfo/index.tsx
index 58be537a..54f33b5f 100644
--- a/frontend/src/components/TopicInfo/index.tsx
+++ b/frontend/src/components/TopicInfo/index.tsx
@@ -9,7 +9,7 @@ import SeeTogetherSVG from '../../assets/topicInfo_seeTogetherBtn_filled.svg';
 import SeeTogetherNotFilledSVG from '../../assets/topicInfo_seeTogetherBtn_notFilled.svg';
 import TopicShareUrlSVG from '../../assets/topicInfo_shareUrl.svg';
 import UpdateBtnSVG from '../../assets/updateBtn.svg';
-import { DEFAULT_TOPIC_IMAGE } from '../../constants';
+import { ARIA_FOCUS, DEFAULT_TOPIC_IMAGE } from '../../constants';
 import useToast from '../../hooks/useToast';
 import AddFavorite from '../AddFavorite';
 import AddSeeTogether from '../AddSeeTogether';
@@ -90,6 +90,7 @@ function TopicInfo({
 
   return (
     <Flex
+      as="article"
       position="relative"
       $flexDirection="column"
       $backgroundColor="white"
@@ -105,6 +106,7 @@ function TopicInfo({
         $objectFit="cover"
         radius="medium"
         $errorDefaultSrc={DEFAULT_TOPIC_IMAGE}
+        isAriaHidden
       />
 
       <Space size={1} />
@@ -114,20 +116,36 @@ function TopicInfo({
           <Flex $alignItems="center" width="72px">
             <SmallTopicPin />
             <Space size={0} />
-            <Text color="black" $fontSize="small" $fontWeight="normal">
+            <Text
+              color="black"
+              $fontSize="small"
+              $fontWeight="normal"
+              aria-hidden
+            >
               {topicPinCount > 999 ? '+999' : topicPinCount}개
             </Text>
           </Flex>
           <Flex $alignItems="center" width="72px">
             <SmallTopicStar />
             <Space size={0} />
-            <Text color="black" $fontSize="small" $fontWeight="normal">
+            <Text
+              color="black"
+              $fontSize="small"
+              $fontWeight="normal"
+              aria-hidden
+            >
               {topicBookmarkCount > 999 ? '+999' : topicBookmarkCount}명
             </Text>
           </Flex>
         </Flex>
         {canUpdate && (
-          <Box cursor="pointer" onClick={updateTopicInfo}>
+          <Box
+            cursor="pointer"
+            onClick={updateTopicInfo}
+            tabIndex={ARIA_FOCUS}
+            role="button"
+            aria-label="지도 정보 수정하기"
+          >
             <UpdateBtnSVG />
           </Box>
         )}
@@ -135,19 +153,41 @@ function TopicInfo({
 
       <Space size={0} />
 
-      <Text color="black" $fontSize="extraLarge" $fontWeight="bold">
+      <Text
+        color="black"
+        $fontSize="extraLarge"
+        $fontWeight="bold"
+        aria-label={`지도 이름은 ${topicTitle} 이며`}
+      >
         {topicTitle}
       </Text>
       <Space size={1} />
-      <Text color="black" $fontSize="small" $fontWeight="normal">
+      <Text
+        color="black"
+        $fontSize="small"
+        $fontWeight="normal"
+        aria-label={`지도 작성자는 ${topicCreator} 입니다.`}
+      >
         {topicCreator}
       </Text>
       <Space size={1} />
-      <Text color="black" $fontSize="small" $fontWeight="normal">
+      <Text
+        color="black"
+        $fontSize="small"
+        $fontWeight="normal"
+        aria-label={`다음은 이 지도의 설명입니다. ${topicDescription}`}
+      >
         {topicDescription}
       </Text>
       <Space size={3} />
-      <Text color="gray" $fontSize="small" $fontWeight="normal">
+      <Text
+        color="gray"
+        $fontSize="small"
+        $fontWeight="normal"
+        aria-label={`이 지도의 마지막 업데이트는 ${topicUpdatedAt
+          .split('T')[0]
+          .replaceAll('-', '.')} 입니다.`}
+      >
         {topicUpdatedAt.split('T')[0].replaceAll('-', '.')} 업데이트
       </Text>
 
@@ -176,7 +216,13 @@ function TopicInfo({
           {isBookmarked ? <FavoriteSVG /> : <FavoriteNotFilledSVG />}
         </AddFavorite>
         <Space size={5} />
-        <TopicShareUrlSVG cursor="pointer" onClick={copyContent} />
+        <TopicShareUrlSVG
+          cursor="pointer"
+          onClick={copyContent}
+          tabIndex={ARIA_FOCUS}
+          role="button"
+          aria-label="URL 주소 공유하기 버튼"
+        />
       </ButtonsWrapper>
 
       <Space size={3} />
diff --git a/frontend/src/components/common/CheckBox/index.tsx b/frontend/src/components/common/CheckBox/index.tsx
index 0c635fd1..f5dbfdd5 100644
--- a/frontend/src/components/common/CheckBox/index.tsx
+++ b/frontend/src/components/common/CheckBox/index.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import styled from 'styled-components';
 
+import { ARIA_FOCUS } from '../../../constants';
 import useKeyDown from '../../../hooks/useKeyDown';
 import Flex from '../Flex';
 
@@ -31,7 +32,7 @@ function Checkbox({ id, isAlreadyChecked, label, onChecked }: CheckboxProps) {
             id={label}
             checked={isChecked}
             onChange={updateCheckedMembers}
-            tabIndex={6}
+            tabIndex={ARIA_FOCUS}
             ref={elementRef}
             onKeyDown={onElementKeyDown}
           />
@@ -65,7 +66,7 @@ const CheckboxInput = styled.input`
   height: 1.6em;
   border-radius: 0.15em;
   margin-right: 0.5em;
-  border: 0.15em solid ${({ theme }) => theme.color.primary};
+  border: 0.1em solid ${({ theme }) => theme.color.black};
   background-color: ${({ theme }) => theme.color.white};
   outline: none;
   cursor: pointer;
@@ -76,7 +77,7 @@ const CheckboxInput = styled.input`
     background-size: 100% 100%;
     background-position: 50%;
     background-repeat: no-repeat;
-    background-color: ${({ theme }) => theme.color.primary};
+    background-color: ${({ theme }) => theme.color.checked};
   }
 `;
 
diff --git a/frontend/src/components/common/Image/index.tsx b/frontend/src/components/common/Image/index.tsx
index 54d1b394..bdf3f586 100644
--- a/frontend/src/components/common/Image/index.tsx
+++ b/frontend/src/components/common/Image/index.tsx
@@ -8,6 +8,7 @@ interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
   $objectFit?: string;
   radius?: 'small' | 'medium' | '50%';
   ratio?: string;
+  isAriaHidden?: boolean;
 }
 
 export default function Image({
@@ -19,6 +20,7 @@ export default function Image({
   $errorDefaultSrc,
   radius,
   ratio,
+  isAriaHidden,
 }: ImageProps) {
   return (
     <StyledImage
@@ -32,6 +34,7 @@ export default function Image({
       onError={(e: SyntheticEvent<HTMLImageElement, Event>) => {
         if ($errorDefaultSrc) e.currentTarget.src = $errorDefaultSrc;
       }}
+      aria-hidden={isAriaHidden}
     />
   );
 }
diff --git a/frontend/src/components/common/Input/SingleComment.tsx b/frontend/src/components/common/Input/SingleComment.tsx
index c8fb143f..22b1ba65 100644
--- a/frontend/src/components/common/Input/SingleComment.tsx
+++ b/frontend/src/components/common/Input/SingleComment.tsx
@@ -6,6 +6,7 @@ import styled from 'styled-components';
 import { deleteApi } from '../../../apis/deleteApi';
 import { postApi } from '../../../apis/postApi';
 import { putApi } from '../../../apis/putApi';
+import { ARIA_FOCUS } from '../../../constants';
 import useToast from '../../../hooks/useToast';
 import { ConfirmCommentButton, CustomInput } from '../../../pages/PinDetail';
 import Flex from '../Flex';
@@ -76,7 +77,6 @@ function SingleComment({
       await refetch(Number(pinDetail));
       showToast('info', '댓글이 삭제되었습니다.');
     } catch (e) {
-      console.error(e);
       showToast('error', '댓글을 다시 작성해주세요');
     }
   };
@@ -98,7 +98,6 @@ function SingleComment({
       setIsEditing(false);
       showToast('info', '댓글이 수정되었습니다.');
     } catch (e) {
-      console.error(e);
       showToast('error', '댓글을 다시 작성해주세요');
     }
   };
@@ -112,6 +111,7 @@ function SingleComment({
       <Flex $gap="12px">
         <ProfileImage
           src={comment.creatorImageUrl}
+          alt="프로필 이미지"
           width="40px"
           height="40px"
         />
@@ -119,7 +119,13 @@ function SingleComment({
           <Flex $justifyContent="space-between">
             <div>
               <Writer>
-                <Text $fontSize="default" $fontWeight="bold" color="black">
+                <Text
+                  $fontSize="default"
+                  $fontWeight="bold"
+                  color="black"
+                  tabIndex={ARIA_FOCUS}
+                  aria-label={`댓글 작성자는 ${comment.creator} 이고 댓글 내용은 ${comment.content}입니다.`}
+                >
                   @{comment.creator}
                 </Text>
               </Writer>
@@ -131,6 +137,9 @@ function SingleComment({
                   color="gray"
                   $fontWeight="bold"
                   onClick={onClickModifyBtn}
+                  tabIndex={ARIA_FOCUS}
+                  role="button"
+                  aria-label="댓글 수정"
                 >
                   수정
                 </Text>
@@ -139,6 +148,9 @@ function SingleComment({
                   color="primary"
                   $fontWeight="bold"
                   onClick={onClickDeleteBtn}
+                  tabIndex={ARIA_FOCUS}
+                  role="button"
+                  aria-label="댓글 삭제"
                 >
                   삭제
                 </Text>
@@ -176,7 +188,13 @@ function SingleComment({
                 onClick={toggleReplyOpen}
                 style={{ cursor: 'pointer', marginBottom: '8px' }}
               >
-                <Text color="black" $fontSize="small" $fontWeight="bold">
+                <Text
+                  color="black"
+                  $fontSize="small"
+                  $fontWeight="bold"
+                  role="button"
+                  tabIndex={ARIA_FOCUS}
+                >
                   답글 작성
                 </Text>
               </div>
@@ -185,6 +203,7 @@ function SingleComment({
               <div style={{ display: 'flex', gap: '12px' }}>
                 <ProfileImage
                   src={user?.imageUrl || ''}
+                  alt="프로필 이미지"
                   width="40px"
                   height="40px"
                 />
@@ -211,10 +230,14 @@ function SingleComment({
             <Flex>
               <ProfileImage
                 src={replyList[0].creatorImageUrl || ''}
+                alt="프로필 이미지"
                 width="28px"
                 height="28px"
               />
-              <MoreReplyButton onClick={toggleSeeMore}>
+              <MoreReplyButton
+                onClick={toggleSeeMore}
+                aria-label={seeMore ? '답글 숨기기' : '답글 보기'}
+              >
                 {seeMore ? '\u25B2' : '\u25BC'} 답글 {replyCount}개
               </MoreReplyButton>
             </Flex>
diff --git a/frontend/src/constants/index.ts b/frontend/src/constants/index.ts
index e99ff3a6..a705dba3 100644
--- a/frontend/src/constants/index.ts
+++ b/frontend/src/constants/index.ts
@@ -5,11 +5,13 @@ export const SIDEBAR = '372px';
 export const LAYOUT_PADDING = '40px';
 
 export const DEFAULT_TOPIC_IMAGE =
-  'https://dr702blqc4x5d.cloudfront.net/2023-map-be-fine/icon/topic_defaultImage.svg';
+  'https://velog.velcdn.com/images/semnil5202/post/37f3bcb9-0b07-4100-85f6-f1d5ad037c14/image.svg';
 export const DEFAULT_PROFILE_IMAGE =
-  'https://dr702blqc4x5d.cloudfront.net/2023-map-be-fine/icon/profile_defaultImage.svg';
+  'https://avatars.githubusercontent.com/u/103165859?v=4';
 
 export const DEFAULT_PROD_URL =
-  process.env.APP_URL || 'https://mapbefine.kro.kr/api';
+  process.env.APP_URL || 'https://mapbefine.com/api';
 
 export const PIN_SIZE = 60;
+
+export const ARIA_FOCUS = 0;
diff --git a/frontend/src/hooks/api/useTopicsQuery.ts b/frontend/src/hooks/api/useTopicsQuery.ts
new file mode 100644
index 00000000..bd871a28
--- /dev/null
+++ b/frontend/src/hooks/api/useTopicsQuery.ts
@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getTopics } from '../../api';
+
+const useTopicsQuery = (url: string) => {
+  const { data: topics, refetch: refetchTopics } = useQuery({
+    queryKey: ['topics', url],
+    queryFn: () => getTopics(url),
+  });
+  return { topics, refetchTopics };
+};
+
+export default useTopicsQuery;
diff --git a/frontend/src/hooks/queries/useProfileList.ts b/frontend/src/hooks/queries/useProfileList.ts
new file mode 100644
index 00000000..b7cf4e62
--- /dev/null
+++ b/frontend/src/hooks/queries/useProfileList.ts
@@ -0,0 +1,14 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { getProfile } from '../../apis/new';
+
+const useProfileList = () => {
+  const { data, refetch } = useSuspenseQuery({
+    queryKey: ['profileList'],
+    queryFn: getProfile,
+  });
+
+  return { data, refetch };
+};
+
+export default useProfileList;
diff --git a/frontend/src/hooks/useAriaLive.ts b/frontend/src/hooks/useAriaLive.ts
new file mode 100644
index 00000000..bd7d1753
--- /dev/null
+++ b/frontend/src/hooks/useAriaLive.ts
@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+
+interface Props {
+  liveTagId: string;
+  defaultAnnounceText: string;
+}
+
+const useAriaLive = ({ liveTagId = '', defaultAnnounceText = '' }: Props) => {
+  const [announceText, setAnnounceText] = useState(defaultAnnounceText);
+
+  const setAriaLiveTagInnerText = (text: string) => {
+    setAnnounceText(text);
+  };
+
+  useEffect(() => {
+    if (announceText) {
+      const ariaLiveTag = document.getElementById(liveTagId);
+
+      if (ariaLiveTag) {
+        ariaLiveTag.innerText = announceText;
+      }
+    }
+  }, [announceText]);
+
+  return { setAriaLiveTagInnerText };
+};
+
+export default useAriaLive;
diff --git a/frontend/src/hooks/useTags.ts b/frontend/src/hooks/useTags.ts
index fa3e2ad6..7a1e4bf1 100644
--- a/frontend/src/hooks/useTags.ts
+++ b/frontend/src/hooks/useTags.ts
@@ -1,9 +1,13 @@
-import { useContext } from 'react';
+import { useContext, useEffect } from 'react';
 
 import { TagContext } from '../context/TagContext';
 import useNavigator from './useNavigator';
 
-const useTags = () => {
+interface Props {
+  isInitTags: boolean;
+}
+
+const useTags = ({ isInitTags }: Props) => {
   const { tags, setTags } = useContext(TagContext);
   const { routePage } = useNavigator();
 
@@ -15,7 +19,11 @@ const useTags = () => {
     setTags([]);
   };
 
-  return { tags, setTags, onClickInitTags, onClickCreateTopicWithTags };
+  useEffect(() => {
+    if (isInitTags) setTags([]);
+  }, []);
+
+  return { tags, onClickInitTags, onClickCreateTopicWithTags };
 };
 
 export default useTags;
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index d2999a20..5b6a37c9 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,3 +1,4 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import ReactDOM from 'react-dom/client';
 import ReactGA from 'react-ga4';
 import { ThemeProvider } from 'styled-components';
@@ -8,6 +9,17 @@ import GlobalStyle from './GlobalStyle';
 import NotFound from './pages/NotFound';
 import theme from './themes';
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      refetchInterval: false,
+      refetchOnReconnect: false,
+    },
+  },
+});
+
 const rootElement = document.getElementById('root');
 if (!rootElement) throw new Error('Failed to find the root element');
 const root = ReactDOM.createRoot(rootElement);
@@ -22,10 +34,12 @@ if (process.env.REACT_APP_GOOGLE_ANALYTICS) {
 }
 
 root.render(
-  <ThemeProvider theme={theme}>
-    <GlobalStyle />
-    <ErrorBoundary fallback={NotFound}>
-      <App />
-    </ErrorBoundary>
-  </ThemeProvider>,
+  <QueryClientProvider client={queryClient}>
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <ErrorBoundary fallback={NotFound}>
+        <App />
+      </ErrorBoundary>
+    </ThemeProvider>
+  </QueryClientProvider>,
 );
diff --git a/frontend/src/pages/AskLogin.tsx b/frontend/src/pages/AskLogin.tsx
index 559a18b5..02dd7c8e 100644
--- a/frontend/src/pages/AskLogin.tsx
+++ b/frontend/src/pages/AskLogin.tsx
@@ -19,6 +19,7 @@ function AskLogin() {
 
   return (
     <Flex
+      as="section"
       $flexDirection="column"
       $justifyContent="center"
       $alignItems="center"
diff --git a/frontend/src/pages/Bookmark.tsx b/frontend/src/pages/Bookmark.tsx
index 1e84cdac..7efd8d30 100644
--- a/frontend/src/pages/Bookmark.tsx
+++ b/frontend/src/pages/Bookmark.tsx
@@ -1,4 +1,4 @@
-import { lazy, Suspense } from 'react';
+import { Suspense } from 'react';
 import { styled } from 'styled-components';
 
 import FavoriteNotFilledSVG from '../assets/favoriteBtn_notFilled.svg';
@@ -7,22 +7,18 @@ import Flex from '../components/common/Flex';
 import Space from '../components/common/Space';
 import MediaSpace from '../components/common/Space/MediaSpace';
 import MediaText from '../components/common/Text/MediaText';
-import TopicCardContainerSkeleton from '../components/Skeletons/TopicListSkeleton';
-import { FULLSCREEN } from '../constants';
+import TopicListSkeleton from '../components/Skeletons/TopicListSkeleton';
+import TopicCardList from '../components/TopicCardList';
+import { ARIA_FOCUS, FULLSCREEN } from '../constants';
 import useNavigator from '../hooks/useNavigator';
 import useSetLayoutWidth from '../hooks/useSetLayoutWidth';
 import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight';
 
-const TopicCardList = lazy(() => import('../components/TopicCardList'));
-
 function Bookmark() {
-  const { routePage } = useNavigator();
   useSetLayoutWidth(FULLSCREEN);
   useSetNavbarHighlight('favorite');
 
-  const goToHome = () => {
-    routePage('/');
-  };
+  const { routingHandlers } = useNavigator();
 
   return (
     <Wrapper>
@@ -30,20 +26,17 @@ function Bookmark() {
       <Flex $justifyContent="space-between" $alignItems="flex-end">
         <Box>
           <MediaText
+            as="h2"
             color="black"
             $fontSize="extraLarge"
             $fontWeight="bold"
-            tabIndex={0}
+            tabIndex={ARIA_FOCUS}
+            aria-label="즐겨찾기 페이지 입니다. 즐겨찾기한 지도들을 확인할 수 있습니다."
           >
             즐겨찾기
           </MediaText>
           <Space size={0} />
-          <MediaText
-            color="gray"
-            $fontSize="default"
-            $fontWeight="normal"
-            tabIndex={1}
-          >
+          <MediaText color="gray" $fontSize="default" $fontWeight="normal">
             즐겨찾기한 지도들을 한 눈에 보세요.
           </MediaText>
         </Box>
@@ -51,16 +44,14 @@ function Bookmark() {
 
       <MediaSpace size={6} />
 
-      <Suspense fallback={<TopicCardContainerSkeleton />}>
+      <Suspense fallback={<TopicListSkeleton />}>
         <TopicCardList
           url="/members/my/bookmarks"
-          errorMessage="로그인 후 이용해주세요."
           commentWhenEmpty="버튼으로 지도를 즐겨찾기에 담아보세요."
-          pageCommentWhenEmpty="메인페이지로 가기"
-          routePage={goToHome}
-        >
-          <FavoriteNotFilledSVG />
-        </TopicCardList>
+          routePageName="메인 페이지로 가기"
+          routePage={routingHandlers.home}
+          svgElementWhenEmpty={<FavoriteNotFilledSVG />}
+        />
       </Suspense>
 
       <Space size={8} />
@@ -68,7 +59,7 @@ function Bookmark() {
   );
 }
 
-const Wrapper = styled.article`
+const Wrapper = styled.section`
   width: 1140px;
   margin: 0 auto;
   position: relative;
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 4aa859ea..d2276cf0 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -5,7 +5,7 @@ import Banner from '../components/Banner';
 import Space from '../components/common/Space';
 import MediaSpace from '../components/common/Space/MediaSpace';
 import SearchBar from '../components/SearchBar/SearchBar';
-import TopicCardContainerSkeleton from '../components/Skeletons/TopicListSkeleton';
+import TopicListSkeleton from '../components/Skeletons/TopicListSkeleton';
 import { FULLSCREEN } from '../constants';
 import { MarkerContext } from '../context/MarkerContext';
 import { SeeTogetherContext } from '../context/SeeTogetherContext';
@@ -54,7 +54,7 @@ function Home() {
       <Banner />
       <Space size={6} />
 
-      <Suspense fallback={<TopicCardContainerSkeleton />}>
+      <Suspense fallback={<TopicListSkeleton />}>
         <TopicListContainer
           url="/topics/bests"
           containerTitle="인기 급상승할 지도?"
@@ -65,7 +65,7 @@ function Home() {
 
       <MediaSpace size={9} />
 
-      <Suspense fallback={<TopicCardContainerSkeleton />}>
+      <Suspense fallback={<TopicListSkeleton />}>
         <TopicListContainer
           url="/topics/newest"
           containerTitle="새로울 지도?"
@@ -76,7 +76,7 @@ function Home() {
 
       <MediaSpace size={9} />
 
-      <Suspense fallback={<TopicCardContainerSkeleton />}>
+      <Suspense fallback={<TopicListSkeleton />}>
         <TopicListContainer
           url="/topics"
           containerTitle="모두일 지도?"
@@ -90,7 +90,7 @@ function Home() {
   );
 }
 
-const Wrapper = styled.article`
+const Wrapper = styled.div`
   width: 1140px;
   margin: 0 auto;
   position: relative;
diff --git a/frontend/src/pages/NewPin.tsx b/frontend/src/pages/NewPin.tsx
index 18a7110a..d5eb8c04 100644
--- a/frontend/src/pages/NewPin.tsx
+++ b/frontend/src/pages/NewPin.tsx
@@ -13,7 +13,7 @@ import Text from '../components/common/Text';
 import InputContainer from '../components/InputContainer';
 import Modal from '../components/Modal';
 import ModalMyTopicList from '../components/ModalMyTopicList';
-import { LAYOUT_PADDING, SIDEBAR } from '../constants';
+import { ARIA_FOCUS, LAYOUT_PADDING, SIDEBAR } from '../constants';
 import { CoordinatesContext } from '../context/CoordinatesContext';
 import { MarkerContext } from '../context/MarkerContext';
 import { ModalContext } from '../context/ModalContext';
@@ -223,7 +223,14 @@ function NewPin() {
           width={`calc(${width} - ${LAYOUT_PADDING})`}
           $flexDirection="column"
         >
-          <Text color="black" $fontSize="large" $fontWeight="bold">
+          <Text
+            as="h3"
+            color="black"
+            $fontSize="large"
+            $fontWeight="bold"
+            tabIndex={ARIA_FOCUS}
+            aria-label="장소 생성 페이지입니다. 아래 항목을 입력하세요."
+          >
             핀 생성
           </Text>
 
@@ -260,7 +267,13 @@ function NewPin() {
           </Text>
           <Space size={0} />
           <Flex>
-            <ImageInputLabel htmlFor="file">파일 찾기</ImageInputLabel>
+            <ImageInputLabel
+              htmlFor="file"
+              tabIndex={ARIA_FOCUS}
+              aria-label="장소에 해당하는 사진을 선택해주세요."
+            >
+              파일 찾기
+            </ImageInputLabel>
             <ImageInputButton
               id="file"
               type="file"
@@ -289,7 +302,7 @@ function NewPin() {
             value={formValues.name}
             placeholder="50글자 이내로 장소의 이름을 입력해주세요."
             onChangeInput={onChangeInput}
-            tabIndex={1}
+            tabIndex={ARIA_FOCUS}
             errorMessage={errorMessages.name}
             maxLength={50}
           />
@@ -321,7 +334,7 @@ function NewPin() {
             value={formValues.description}
             placeholder="1000자 이내로 장소에 대한 의견을 남겨주세요."
             onChangeInput={onChangeInput}
-            tabIndex={3}
+            tabIndex={ARIA_FOCUS}
             errorMessage={errorMessages.description}
             maxLength={1000}
           />
@@ -330,7 +343,8 @@ function NewPin() {
 
           <Flex $justifyContent="end">
             <Button
-              tabIndex={5}
+              tabIndex={ARIA_FOCUS}
+              aria-label="장소 생성 취소하기"
               type="button"
               variant="secondary"
               onClick={goToBack}
@@ -338,7 +352,11 @@ function NewPin() {
               취소하기
             </Button>
             <Space size={3} />
-            <Button tabIndex={4} variant="primary">
+            <Button
+              tabIndex={ARIA_FOCUS}
+              aria-label="장소 생성하기"
+              variant="primary"
+            >
               추가하기
             </Button>
           </Flex>
diff --git a/frontend/src/pages/NewTopic.tsx b/frontend/src/pages/NewTopic.tsx
index 7d1a75b2..4cbcc8c8 100644
--- a/frontend/src/pages/NewTopic.tsx
+++ b/frontend/src/pages/NewTopic.tsx
@@ -9,7 +9,7 @@ import Flex from '../components/common/Flex';
 import Space from '../components/common/Space';
 import Text from '../components/common/Text';
 import InputContainer from '../components/InputContainer';
-import { LAYOUT_PADDING, SIDEBAR } from '../constants';
+import { ARIA_FOCUS, LAYOUT_PADDING, SIDEBAR } from '../constants';
 import { MarkerContext } from '../context/MarkerContext';
 import { TagContext } from '../context/TagContext';
 import useCompressImage from '../hooks/useCompressImage';
@@ -167,7 +167,14 @@ function NewTopic() {
         width={`calc(${width} - ${LAYOUT_PADDING})`}
         $flexDirection="column"
       >
-        <Text color="black" $fontSize="large" $fontWeight="bold">
+        <Text
+          as="h3"
+          color="black"
+          $fontSize="large"
+          $fontWeight="bold"
+          tabIndex={ARIA_FOCUS}
+          aria-label="지도 생성 페이지입니다. 아래 항목을 입력하세요."
+        >
           지도 생성
         </Text>
 
@@ -183,11 +190,18 @@ function NewTopic() {
         <Flex>
           {showImage && (
             <>
-              <ShowImage src={showImage} alt="사진 이미지" /> <Space size={2} />{' '}
+              <ShowImage src={showImage} alt="지도 이미지" /> <Space size={2} />{' '}
             </>
           )}
 
-          <ImageInputLabel htmlFor="file">파일 찾기</ImageInputLabel>
+          <ImageInputLabel
+            htmlFor="file"
+            role="button"
+            tabIndex={ARIA_FOCUS}
+            aria-label="지도를 대표하는 사진을 선택해주세요."
+          >
+            파일 찾기
+          </ImageInputLabel>
           <ImageInputButton
             id="file"
             type="file"
@@ -206,7 +220,7 @@ function NewTopic() {
           value={formValues.name}
           placeholder="20자 이내로 지도의 이름을 입력해주세요."
           onChangeInput={onChangeInput}
-          tabIndex={2}
+          tabIndex={ARIA_FOCUS}
           errorMessage={errorMessages.name}
           maxLength={20}
         />
@@ -221,7 +235,7 @@ function NewTopic() {
           value={formValues.description}
           placeholder="100글자 이내로 지도에 대해서 설명해주세요."
           onChangeInput={onChangeInput}
-          tabIndex={3}
+          tabIndex={ARIA_FOCUS}
           errorMessage={errorMessages.description}
           maxLength={100}
         />
@@ -241,7 +255,8 @@ function NewTopic() {
 
         <Flex $justifyContent="end">
           <Button
-            tabIndex={7}
+            tabIndex={ARIA_FOCUS}
+            aria-label="지도 생성 취소하기"
             type="button"
             variant="secondary"
             onClick={goToBack}
@@ -250,7 +265,8 @@ function NewTopic() {
           </Button>
           <Space size={3} />
           <Button
-            tabIndex={7}
+            tabIndex={ARIA_FOCUS}
+            aria-label="지도 생성하기"
             variant="primary"
             onClick={() => {
               setTags([]);
diff --git a/frontend/src/pages/NotFound.tsx b/frontend/src/pages/NotFound.tsx
index 72096ed6..ab5c46fa 100644
--- a/frontend/src/pages/NotFound.tsx
+++ b/frontend/src/pages/NotFound.tsx
@@ -14,7 +14,8 @@ function NotFound() {
   useSetLayoutWidth(FULLSCREEN);
 
   return (
-    <NotFoundContainer
+    <Wrapper
+      as="section"
       $justifyContent="center"
       $alignItems="center"
       width="100vw"
@@ -38,11 +39,11 @@ function NotFound() {
           메인페이지로 가기
         </NotFoundButton>
       </Flex>
-    </NotFoundContainer>
+    </Wrapper>
   );
 }
 
-const NotFoundContainer = styled(Flex)`
+const Wrapper = styled(Flex)`
   flex-direction: row;
   @media screen and (max-width: 700px) {
     flex-direction: column;
diff --git a/frontend/src/pages/PinDetail.tsx b/frontend/src/pages/PinDetail.tsx
index 3ee8866a..cc8bccbb 100644
--- a/frontend/src/pages/PinDetail.tsx
+++ b/frontend/src/pages/PinDetail.tsx
@@ -16,6 +16,7 @@ import Text from '../components/common/Text';
 import Modal from '../components/Modal';
 import AddToMyTopicList from '../components/ModalMyTopicList/addToMyTopicList';
 import PinImageContainer from '../components/PinImageContainer';
+import { ARIA_FOCUS } from '../constants';
 import { ModalContext } from '../context/ModalContext';
 import useCompressImage from '../hooks/useCompressImage';
 import useFormValues from '../hooks/useFormValues';
@@ -183,24 +184,51 @@ function PinDetail({
   return (
     <Wrapper $layoutWidth={width} $selectedPinId={pinId} data-cy="pin-detail">
       <Flex $justifyContent="space-between" $alignItems="baseline" width="100%">
-        <Text color="black" $fontSize="extraLarge" $fontWeight="bold">
+        <Text
+          as="h2"
+          color="black"
+          $fontSize="extraLarge"
+          $fontWeight="bold"
+          tabIndex={ARIA_FOCUS}
+          aria-label={`장소 이름은 ${pin.name} 입니다.`}
+        >
           {pin.name}
         </Text>
       </Flex>
       <Space size={1} />
       <Flex $justifyContent="space-between" $alignItems="flex-end" width="100%">
-        <Text color="black" $fontSize="small" $fontWeight="normal">
+        <Text
+          color="black"
+          $fontSize="small"
+          $fontWeight="normal"
+          tabIndex={ARIA_FOCUS}
+          aria-label={`장소 작성자는 ${pin.creator} 입니다.`}
+        >
           {pin.creator}
         </Text>
         <Flex $flexDirection="column" $alignItems="flex-end">
           {pin.canUpdate ? (
-            <Box cursor="pointer">
+            <Box
+              cursor="pointer"
+              tabIndex={ARIA_FOCUS}
+              role="button"
+              aria-label="장소 정보 수정하기"
+            >
               <UpdateBtnSVG onClick={onClickEditPin} />
             </Box>
           ) : (
             <Space size={5} />
           )}
-          <Text color="black" $fontSize="small" $fontWeight="normal">
+          <Text
+            color="black"
+            $fontSize="small"
+            $fontWeight="normal"
+            tabIndex={ARIA_FOCUS}
+            aria-label={`마지막 수정일자는 ${pin.updatedAt
+              .split('T')[0]
+              .split('-')
+              .join('.')} 입니다.`}
+          >
             {pin.updatedAt.split('T')[0].split('-').join('.')}
           </Text>
         </Flex>
@@ -218,21 +246,33 @@ function PinDetail({
       <PinImageContainer images={pin.images} getPinData={getPinData} />
       <Space size={6} />
       <Flex $flexDirection="column">
-        <Text color="black" $fontSize="large" $fontWeight="bold">
+        <Text as="h3" color="black" $fontSize="large" $fontWeight="bold">
           어디에 있나요?
         </Text>
         <Space size={1} />
-        <Text color="black" $fontSize="default" $fontWeight="normal">
+        <Text
+          color="black"
+          $fontSize="default"
+          $fontWeight="normal"
+          tabIndex={ARIA_FOCUS}
+          aria-label={`장소의 위치는 ${pin.address} 입니다.`}
+        >
           {pin.address}
         </Text>
       </Flex>
       <Space size={6} />
-      <Flex $flexDirection="column">
+      <Flex as="h3" $flexDirection="column">
         <Text color="black" $fontSize="large" $fontWeight="bold">
           어떤 곳인가요?
         </Text>
         <Space size={1} />
-        <Text color="black" $fontSize="default" $fontWeight="normal">
+        <Text
+          color="black"
+          $fontSize="default"
+          $fontWeight="normal"
+          tabIndex={ARIA_FOCUS}
+          aria-label={`장소에 대한 설명은 다음과 같습니다. ${pin.description}`}
+        >
           {pin.description}
         </Text>
       </Flex>
@@ -243,7 +283,11 @@ function PinDetail({
           내 지도에 저장하기
         </SaveToMyMapButton>
         <Space size={3} />
-        <ShareButton variant="secondary" onClick={copyContent}>
+        <ShareButton
+          variant="secondary"
+          onClick={copyContent}
+          aria-label="URL 공유하기 "
+        >
           공유하기
         </ShareButton>
       </ButtonsWrapper>
@@ -252,8 +296,8 @@ function PinDetail({
 
       {/*  Comment Section */}
 
-      <Text color="black" $fontSize="large" $fontWeight="bold">
-        어떻게 생각하나요?{' '}
+      <Text as="h3" color="black" $fontSize="large" $fontWeight="bold">
+        어떻게 생각하나요?
       </Text>
       <Space size={1} />
       {userToken && (
@@ -265,11 +309,13 @@ function PinDetail({
               onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                 setNewComment(e.target.value)
               }
+              aria-label="댓글을 추가하려면 텍스트를 입력하세요."
               placeholder="댓글 추가"
             />
             <ConfirmCommentButton
               variant="secondary"
               onClick={onClickCommentBtn}
+              aria-label="댓글 등록"
             >
               등록
             </ConfirmCommentButton>
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 33345e3d..d4868f5e 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -7,8 +7,8 @@ import Space from '../components/common/Space';
 import MediaSpace from '../components/common/Space/MediaSpace';
 import MediaText from '../components/common/Text/MediaText';
 import MyInfo from '../components/MyInfo';
-import TopicCardContainerSkeleton from '../components/Skeletons/TopicListSkeleton';
-import { FULLSCREEN } from '../constants';
+import TopicListSkeleton from '../components/Skeletons/TopicListSkeleton';
+import { ARIA_FOCUS, FULLSCREEN } from '../constants';
 import useNavigator from '../hooks/useNavigator';
 import useSetLayoutWidth from '../hooks/useSetLayoutWidth';
 import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight';
@@ -16,14 +16,10 @@ import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight';
 const TopicCardList = lazy(() => import('../components/TopicCardList'));
 
 function Profile() {
-  const { routePage } = useNavigator();
+  const { routingHandlers } = useNavigator();
   useSetLayoutWidth(FULLSCREEN);
   useSetNavbarHighlight('profile');
 
-  const goToNewTopic = () => {
-    routePage('/new-topic');
-  };
-
   return (
     <Wrapper>
       <MyInfoWrapper $justifyContent="center" $alignItems="center">
@@ -35,20 +31,17 @@ function Profile() {
       <Flex $justifyContent="space-between" $alignItems="flex-end">
         <Box>
           <MediaText
+            as="h2"
             color="black"
             $fontSize="extraLarge"
             $fontWeight="bold"
-            tabIndex={0}
+            tabIndex={ARIA_FOCUS}
+            aria-label="나의 지도 영역입니다. 내가 만든 지도들을 확인할 수 있습니다."
           >
             나의 지도
           </MediaText>
           <Space size={0} />
-          <MediaText
-            color="gray"
-            $fontSize="default"
-            $fontWeight="normal"
-            tabIndex={1}
-          >
+          <MediaText color="gray" $fontSize="default" $fontWeight="normal">
             내가 만든 지도를 확인해보세요.
           </MediaText>
         </Box>
@@ -56,13 +49,12 @@ function Profile() {
 
       <MediaSpace size={6} />
 
-      <Suspense fallback={<TopicCardContainerSkeleton />}>
+      <Suspense fallback={<TopicListSkeleton />}>
         <TopicCardList
           url="/members/my/topics"
-          errorMessage="로그인 후 이용해주세요."
           commentWhenEmpty="추가하기 버튼을 눌러 지도를 추가해보세요."
-          pageCommentWhenEmpty="지도 만들러 가기"
-          routePage={goToNewTopic}
+          routePageName="메인 페이지로 가기"
+          routePage={routingHandlers.home}
         />
       </Suspense>
 
diff --git a/frontend/src/pages/Search.tsx b/frontend/src/pages/Search.tsx
index ff5a00fb..7a82a8fd 100644
--- a/frontend/src/pages/Search.tsx
+++ b/frontend/src/pages/Search.tsx
@@ -10,10 +10,15 @@ import Space from '../components/common/Space';
 import MediaText from '../components/common/Text/MediaText';
 import SearchBar from '../components/SearchBar/SearchBar';
 import TopicCard from '../components/TopicCard';
+import { FULLSCREEN } from '../constants';
+import useSetLayoutWidth from '../hooks/useSetLayoutWidth';
+import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight';
 import { TopicCardProps } from '../types/Topic';
 
 function Search() {
   const { fetchGet } = useGet();
+  useSetLayoutWidth(FULLSCREEN);
+  useSetNavbarHighlight('none');
 
   const [originalTopics, setOriginalTopics] = useState<TopicCardProps[] | null>(
     null,
@@ -58,6 +63,7 @@ function Search() {
       <Flex $justifyContent="space-between" $alignItems="flex-end">
         <Box>
           <MediaText
+            as="h2"
             color="black"
             $fontSize="extraLarge"
             $fontWeight="bold"
@@ -128,7 +134,7 @@ function Search() {
 
 export default Search;
 
-const Wrapper = styled.article`
+const Wrapper = styled.section`
   width: 1140px;
   margin: 0 auto;
   position: relative;
diff --git a/frontend/src/pages/SeeAllNearTopics.tsx b/frontend/src/pages/SeeAllAllTopics.tsx
similarity index 51%
rename from frontend/src/pages/SeeAllNearTopics.tsx
rename to frontend/src/pages/SeeAllAllTopics.tsx
index 022d2a41..0d2bb398 100644
--- a/frontend/src/pages/SeeAllNearTopics.tsx
+++ b/frontend/src/pages/SeeAllAllTopics.tsx
@@ -1,43 +1,45 @@
-import { lazy, Suspense } from 'react';
+import { Suspense } from 'react';
 import { styled } from 'styled-components';
 
 import Box from '../components/common/Box';
 import Space from '../components/common/Space';
 import MediaSpace from '../components/common/Space/MediaSpace';
 import MediaText from '../components/common/Text/MediaText';
-import TopicCardContainerSkeleton from '../components/Skeletons/TopicListSkeleton';
-import { FULLSCREEN } from '../constants';
+import TopicListSkeleton from '../components/Skeletons/TopicListSkeleton';
+import TopicCardList from '../components/TopicCardList';
+import { ARIA_FOCUS, FULLSCREEN } from '../constants';
 import useNavigator from '../hooks/useNavigator';
 import useSetLayoutWidth from '../hooks/useSetLayoutWidth';
 import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight';
 
-const TopicCardList = lazy(() => import('../components/TopicCardList'));
-
-function SeeAllNearTopics() {
-  const { routePage } = useNavigator();
+function SeeAllAllTopics() {
   useSetLayoutWidth(FULLSCREEN);
   useSetNavbarHighlight('home');
 
-  const goToHome = () => {
-    routePage('/new-topic');
-  };
+  const { routingHandlers } = useNavigator();
 
   return (
     <Wrapper>
       <Space size={5} />
-      <MediaText color="black" $fontSize="extraLarge" $fontWeight="bold">
-        내 주변일 지도?
+      <MediaText
+        as="h2"
+        color="black"
+        $fontSize="extraLarge"
+        $fontWeight="bold"
+        tabIndex={ARIA_FOCUS}
+        aria-label="모두일 지도 전체보기 페이지 입니다."
+      >
+        모두일 지도?
       </MediaText>
 
       <MediaSpace size={6} />
 
-      <Suspense fallback={<TopicCardContainerSkeleton />}>
+      <Suspense fallback={<TopicListSkeleton />}>
         <TopicCardList
           url="/topics"
-          errorMessage="로그인 후 이용해주세요."
-          commentWhenEmpty="지도가 없습니다. 추가하기 버튼을 눌러 지도를 추가해보세요."
-          pageCommentWhenEmpty="지도 만들러 가기"
-          routePage={goToHome}
+          commentWhenEmpty="생성된 지도가 없습니다. 지도를 만들어보세요."
+          routePageName="지도 만들러 가기"
+          routePage={routingHandlers.newTopic}
         />
       </Suspense>
 
@@ -56,4 +58,4 @@ const Wrapper = styled(Box)`
   }
 `;
 
-export default SeeAllNearTopics;
+export default SeeAllAllTopics;
diff --git a/frontend/src/pages/SeeAllLatestTopics.tsx b/frontend/src/pages/SeeAllBestTopics.tsx
similarity index 51%
rename from frontend/src/pages/SeeAllLatestTopics.tsx
rename to frontend/src/pages/SeeAllBestTopics.tsx
index 93cff787..0412968d 100644
--- a/frontend/src/pages/SeeAllLatestTopics.tsx
+++ b/frontend/src/pages/SeeAllBestTopics.tsx
@@ -1,43 +1,45 @@
-import { lazy, Suspense } from 'react';
+import { Suspense } from 'react';
 import { styled } from 'styled-components';
 
 import Box from '../components/common/Box';
 import Space from '../components/common/Space';
 import MediaSpace from '../components/common/Space/MediaSpace';
 import MediaText from '../components/common/Text/MediaText';
-import TopicCardContainerSkeleton from '../components/Skeletons/TopicListSkeleton';
-import { FULLSCREEN } from '../constants';
+import TopicListSkeleton from '../components/Skeletons/TopicListSkeleton';
+import TopicCardList from '../components/TopicCardList';
+import { ARIA_FOCUS, FULLSCREEN } from '../constants';
 import useNavigator from '../hooks/useNavigator';
 import useSetLayoutWidth from '../hooks/useSetLayoutWidth';
 import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight';
 
-const TopicCardList = lazy(() => import('../components/TopicCardList'));
-
-function SeeAllLatestTopics() {
-  const { routePage } = useNavigator();
+function SeeAllAllTopics() {
   useSetLayoutWidth(FULLSCREEN);
   useSetNavbarHighlight('home');
 
-  const goToHome = () => {
-    routePage('/');
-  };
+  const { routingHandlers } = useNavigator();
 
   return (
     <Wrapper>
       <Space size={5} />
-      <MediaText color="black" $fontSize="extraLarge" $fontWeight="bold">
+      <MediaText
+        as="h2"
+        color="black"
+        $fontSize="extraLarge"
+        $fontWeight="bold"
+        tabIndex={ARIA_FOCUS}
+        aria-label="모두일 지도 전체보기 페이지 입니다."
+      >
         새로울 지도?
       </MediaText>
 
       <MediaSpace size={6} />
 
-      <Suspense fallback={<TopicCardContainerSkeleton />}>
+      <Suspense fallback={<TopicListSkeleton />}>
         <TopicCardList
-          url="/topics/newest"
-          errorMessage="로그인 후 이용해주세요."
-          commentWhenEmpty="최근에 핀이 찍힌 지도가 없습니다."
-          pageCommentWhenEmpty="메인페이지로 가기"
-          routePage={goToHome}
+          url="/topics/bests"
+          commentWhenEmpty="생성된 지도가 없습니다. 지도를 만들어보세요."
+          routePageName="지도 만들러 가기"
+          routePage={routingHandlers.newTopic}
         />
       </Suspense>
 
@@ -56,4 +58,4 @@ const Wrapper = styled(Box)`
   }
 `;
 
-export default SeeAllLatestTopics;
+export default SeeAllAllTopics;
diff --git a/frontend/src/pages/SeeAllPopularTopics.tsx b/frontend/src/pages/SeeAllNewestTopics.tsx
similarity index 51%
rename from frontend/src/pages/SeeAllPopularTopics.tsx
rename to frontend/src/pages/SeeAllNewestTopics.tsx
index 275a402b..afe2c0ef 100644
--- a/frontend/src/pages/SeeAllPopularTopics.tsx
+++ b/frontend/src/pages/SeeAllNewestTopics.tsx
@@ -1,43 +1,45 @@
-import { lazy, Suspense } from 'react';
+import { Suspense } from 'react';
 import { styled } from 'styled-components';
 
 import Box from '../components/common/Box';
 import Space from '../components/common/Space';
 import MediaSpace from '../components/common/Space/MediaSpace';
 import MediaText from '../components/common/Text/MediaText';
-import TopicCardContainerSkeleton from '../components/Skeletons/TopicListSkeleton';
-import { FULLSCREEN } from '../constants';
+import TopicListSkeleton from '../components/Skeletons/TopicListSkeleton';
+import TopicCardList from '../components/TopicCardList';
+import { ARIA_FOCUS, FULLSCREEN } from '../constants';
 import useNavigator from '../hooks/useNavigator';
 import useSetLayoutWidth from '../hooks/useSetLayoutWidth';
 import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight';
 
-const TopicCardList = lazy(() => import('../components/TopicCardList'));
-
-function SeeAllTopics() {
-  const { routePage } = useNavigator();
+function SeeAllAllTopics() {
   useSetLayoutWidth(FULLSCREEN);
   useSetNavbarHighlight('home');
 
-  const goToHome = () => {
-    routePage('/');
-  };
+  const { routingHandlers } = useNavigator();
 
   return (
     <Wrapper>
       <Space size={5} />
-      <MediaText color="black" $fontSize="extraLarge" $fontWeight="bold">
+      <MediaText
+        as="h2"
+        color="black"
+        $fontSize="extraLarge"
+        $fontWeight="bold"
+        tabIndex={ARIA_FOCUS}
+        aria-label="모두일 지도 전체보기 페이지 입니다."
+      >
         인기 급상승할 지도?
       </MediaText>
 
       <MediaSpace size={6} />
 
-      <Suspense fallback={<TopicCardContainerSkeleton />}>
+      <Suspense fallback={<TopicListSkeleton />}>
         <TopicCardList
-          url="/topics/bests"
-          errorMessage="로그인 후 이용해주세요."
-          commentWhenEmpty="즐겨찾기가 많이 된 지도가 없습니다."
-          pageCommentWhenEmpty="메인페이지로 가기"
-          routePage={goToHome}
+          url="/topics/newest"
+          commentWhenEmpty="생성된 지도가 없습니다. 지도를 만들어보세요."
+          routePageName="지도 만들러 가기"
+          routePage={routingHandlers.newTopic}
         />
       </Suspense>
 
@@ -56,4 +58,4 @@ const Wrapper = styled(Box)`
   }
 `;
 
-export default SeeAllTopics;
+export default SeeAllAllTopics;
diff --git a/frontend/src/pages/SelectedTopic.tsx b/frontend/src/pages/SelectedTopic.tsx
deleted file mode 100644
index 4f19a6ef..00000000
--- a/frontend/src/pages/SelectedTopic.tsx
+++ /dev/null
@@ -1,248 +0,0 @@
-import { lazy, Suspense, useContext, useEffect, useRef, useState } from 'react';
-import { useParams, useSearchParams } from 'react-router-dom';
-import { styled } from 'styled-components';
-
-import { getApi } from '../apis/getApi';
-import Space from '../components/common/Space';
-import PullPin from '../components/PullPin';
-import PinsOfTopicSkeleton from '../components/Skeletons/PinsOfTopicSkeleton';
-import { LAYOUT_PADDING, PIN_SIZE, SIDEBAR } from '../constants';
-import { CoordinatesContext } from '../context/CoordinatesContext';
-import useRealDistanceOfPin from '../hooks/useRealDistanceOfPin';
-import useResizeMap from '../hooks/useResizeMap';
-import useSetLayoutWidth from '../hooks/useSetLayoutWidth';
-import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight';
-import useTags from '../hooks/useTags';
-import useMapStore from '../store/mapInstance';
-import { TopicDetailProps } from '../types/Topic';
-import PinDetail from './PinDetail';
-
-const PinsOfTopic = lazy(() => import('../components/PinsOfTopic'));
-
-function SelectedTopic() {
-  const { Tmapv3 } = window;
-  const { topicId } = useParams();
-  const [searchParams, _] = useSearchParams();
-  const [topicDetail, setTopicDetail] = useState<TopicDetailProps | null>(null);
-  const [selectedPinId, setSelectedPinId] = useState<number | null>(null);
-  const [isOpen, setIsOpen] = useState(true);
-  const [isEditPinDetail, setIsEditPinDetail] = useState<boolean>(false);
-  const { coordinates, setCoordinates } = useContext(CoordinatesContext);
-  const { width } = useSetLayoutWidth(SIDEBAR);
-  const zoomTimerIdRef = useRef<NodeJS.Timeout | null>(null);
-  const dragTimerIdRef = useRef<NodeJS.Timeout | null>(null);
-  const { mapInstance } = useMapStore((state) => state);
-  const { getDistanceOfPin } = useRealDistanceOfPin();
-
-  const { tags, setTags, onClickInitTags, onClickCreateTopicWithTags } =
-    useTags();
-  useSetNavbarHighlight('none');
-  useResizeMap();
-
-  const getAndSetDataFromServer = async () => {
-    const topicInArray = await getApi<TopicDetailProps[]>(
-      `/topics/ids?ids=${topicId}`,
-    );
-    const topic = topicInArray[0];
-
-    setTopicDetail(topic);
-  };
-
-  const setClusteredCoordinates = async () => {
-    if (!topicDetail || !mapInstance) return;
-
-    const newCoordinates: any = [];
-    const distanceOfPinSize = getDistanceOfPin(mapInstance);
-
-    const diameterPins = await getApi<any>(
-      `/topics/clusters?ids=${topicId}&image-diameter=${distanceOfPinSize}`,
-    );
-
-    diameterPins.forEach((clusterOrPin: any, idx: number) => {
-      newCoordinates.push({
-        topicId,
-        id: clusterOrPin.pins[0].id || `cluster ${idx}`,
-        pinName: clusterOrPin.pins[0].name,
-        latitude: clusterOrPin.latitude,
-        longitude: clusterOrPin.longitude,
-        pins: clusterOrPin.pins,
-      });
-    });
-
-    setCoordinates(newCoordinates);
-  };
-
-  const setPrevCoordinates = () => {
-    setCoordinates((prev) => [...prev]);
-  };
-
-  const adjustMapDirection = () => {
-    if (!mapInstance) return;
-
-    mapInstance.setBearing(0);
-    mapInstance.setPitch(0);
-  };
-
-  useEffect(() => {
-    getAndSetDataFromServer();
-    setTags([]);
-  }, []);
-
-  useEffect(() => {
-    setClusteredCoordinates();
-
-    const onDragEnd = (evt: evt) => {
-      if (dragTimerIdRef.current) {
-        clearTimeout(dragTimerIdRef.current);
-      }
-
-      dragTimerIdRef.current = setTimeout(() => {
-        setPrevCoordinates();
-        adjustMapDirection();
-      }, 100);
-    };
-    const onZoomEnd = (evt: evt) => {
-      if (zoomTimerIdRef.current) {
-        clearTimeout(zoomTimerIdRef.current);
-      }
-
-      zoomTimerIdRef.current = setTimeout(() => {
-        setClusteredCoordinates();
-        adjustMapDirection();
-      }, 100);
-    };
-
-    if (!mapInstance) return;
-
-    mapInstance.on('DragEnd', onDragEnd);
-    mapInstance.on('ZoomEnd', onZoomEnd);
-
-    return () => {
-      mapInstance.off('DragEnd', onDragEnd);
-      mapInstance.off('ZoomEnd', onZoomEnd);
-    };
-  }, [topicDetail]);
-
-  useEffect(() => {
-    const queryParams = new URLSearchParams(location.search);
-
-    if (queryParams.has('pinDetail')) {
-      setSelectedPinId(Number(queryParams.get('pinDetail')));
-      setIsOpen(true);
-      return;
-    }
-
-    setSelectedPinId(null);
-  }, [searchParams]);
-
-  if (!topicId || !topicDetail) return <></>;
-
-  return (
-    <Wrapper
-      width={`calc(${width} - ${LAYOUT_PADDING})`}
-      $selectedPinId={selectedPinId}
-    >
-      <Space size={3} />
-      {tags.length > 0 && (
-        <PullPin
-          tags={tags}
-          confirmButton="뽑아오기"
-          onClickConfirm={onClickCreateTopicWithTags}
-          onClickClose={onClickInitTags}
-        />
-      )}
-      <Suspense fallback={<PinsOfTopicSkeleton />}>
-        <PinsOfTopic
-          topicId={topicId}
-          topicDetail={topicDetail}
-          setSelectedPinId={setSelectedPinId}
-          setIsEditPinDetail={setIsEditPinDetail}
-          setTopicsFromServer={getAndSetDataFromServer}
-        />
-      </Suspense>
-
-      <Space size={8} />
-
-      {selectedPinId && (
-        <>
-          <ToggleButton
-            $isCollapsed={!isOpen}
-            onClick={() => {
-              setIsOpen(!isOpen);
-            }}
-          >
-            ◀
-          </ToggleButton>
-          <PinDetailWrapper className={isOpen ? '' : 'collapsedPinDetail'}>
-            <PinDetail
-              width={width}
-              pinId={selectedPinId}
-              isEditPinDetail={isEditPinDetail}
-              setIsEditPinDetail={setIsEditPinDetail}
-            />
-          </PinDetailWrapper>
-        </>
-      )}
-    </Wrapper>
-  );
-}
-
-const Wrapper = styled.section<{
-  width: 'calc(100vw - 40px)' | 'calc(372px - 40px)';
-  $selectedPinId: number | null;
-}>`
-  display: flex;
-  flex-direction: column;
-  width: ${({ width }) => width};
-  margin: 0 auto;
-
-  @media (max-width: 1076px) {
-    width: ${({ $selectedPinId }) => ($selectedPinId ? '49vw' : '50vw')};
-    margin: ${({ $selectedPinId }) => $selectedPinId && '0'};
-  }
-
-  @media (max-width: 744px) {
-    width: 100%;
-  }
-`;
-
-const PinDetailWrapper = styled.div`
-  &.collapsedPinDetail {
-    z-index: -1;
-  }
-`;
-
-const ToggleButton = styled.button<{
-  $isCollapsed: boolean;
-}>`
-  position: absolute;
-  top: 50%;
-  left: 744px;
-  transform: translateY(-50%);
-  z-index: 1;
-  height: 80px;
-  background-color: #fff;
-  padding: 12px;
-  border-radius: 4px;
-  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
-  cursor: pointer;
-
-  ${(props) =>
-    props.$isCollapsed &&
-    `
-    transform: rotate(180deg);
-    top: 45%;
-    left: 372px;
-    z-index: 1;
-    `}
-
-  &:hover {
-    background-color: #f5f5f5;
-  }
-
-  @media (max-width: 1076px) {
-    display: none;
-  }
-`;
-
-export default SelectedTopic;
diff --git a/frontend/src/pages/SelectedTopic/SelectedTopic.page.tsx b/frontend/src/pages/SelectedTopic/SelectedTopic.page.tsx
new file mode 100644
index 00000000..c243f253
--- /dev/null
+++ b/frontend/src/pages/SelectedTopic/SelectedTopic.page.tsx
@@ -0,0 +1,145 @@
+import { lazy, Suspense, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { styled } from 'styled-components';
+
+import Space from '../../components/common/Space';
+import PullPin from '../../components/PullPin';
+import PinsOfTopicSkeleton from '../../components/Skeletons/PinsOfTopicSkeleton';
+import { LAYOUT_PADDING, SIDEBAR } from '../../constants';
+import useResizeMap from '../../hooks/useResizeMap';
+import useSetLayoutWidth from '../../hooks/useSetLayoutWidth';
+import useSetNavbarHighlight from '../../hooks/useSetNavbarHighlight';
+import useTags from '../../hooks/useTags';
+import PinDetail from '../PinDetail';
+import useClusterCoordinates from './hooks/useClusterCoordinates';
+import useHandleMapInteraction from './hooks/useHandleMapInteraction';
+import useSetSelectedPinId from './hooks/useSetSelectedPinId';
+import useTopicDetailQuery from './hooks/useTopicDetailQuery';
+
+const PinsOfTopic = lazy(() => import('../../components/PinsOfTopic'));
+
+function SelectedTopic() {
+  const { topicId } = useParams() as { topicId: string };
+  const [isEditPinDetail, setIsEditPinDetail] = useState<boolean>(false);
+  const { width } = useSetLayoutWidth(SIDEBAR);
+  const { tags, onClickInitTags, onClickCreateTopicWithTags } = useTags({ isInitTags: true });
+  const { isDoubleSidebarOpen, selectedPinId, setIsDoubleSidebarOpen, setSelectedPinId } = useSetSelectedPinId();
+  const { data: topicDetail, refetch: getTopicDetail } = useTopicDetailQuery(topicId);
+  const setClusteredCoordinates = useClusterCoordinates(topicId);
+
+  useHandleMapInteraction({
+    topicId,
+    onAfterInteraction: setClusteredCoordinates,
+  });
+  useSetNavbarHighlight('none');
+  useResizeMap();
+
+  if (!topicId || !topicDetail) return <></>;
+
+  return (
+    <Wrapper width={`calc(${width} - ${LAYOUT_PADDING})`} $selectedPinId={selectedPinId}>
+      <Space size={3} />
+      {tags.length > 0 && (
+        <PullPin
+          tags={tags}
+          confirmButton="뽑아오기"
+          onClickConfirm={onClickCreateTopicWithTags}
+          onClickClose={onClickInitTags}
+        />
+      )}
+      <Suspense fallback={<PinsOfTopicSkeleton />}>
+        <PinsOfTopic
+          topicId={topicId}
+          topicDetail={topicDetail}
+          setSelectedPinId={setSelectedPinId}
+          setIsEditPinDetail={setIsEditPinDetail}
+          setTopicsFromServer={getTopicDetail}
+        />
+      </Suspense>
+
+      <Space size={8} />
+
+      {selectedPinId && (
+        <>
+          <ToggleButton
+            $isCollapsed={!isDoubleSidebarOpen}
+            onClick={() => {
+              setIsDoubleSidebarOpen(!isDoubleSidebarOpen);
+            }}
+            aria-label={`장소 상세 설명 버튼 ${isDoubleSidebarOpen ? '닫기' : '열기'}`}
+          >
+            ◀
+          </ToggleButton>
+          <PinDetailWrapper className={isDoubleSidebarOpen ? '' : 'collapsedPinDetail'}>
+            <PinDetail
+              width={width}
+              pinId={selectedPinId}
+              isEditPinDetail={isEditPinDetail}
+              setIsEditPinDetail={setIsEditPinDetail}
+            />
+          </PinDetailWrapper>
+        </>
+      )}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.section<{
+  width: 'calc(100vw - 40px)' | 'calc(372px - 40px)';
+  $selectedPinId: number | null;
+}>`
+  display: flex;
+  flex-direction: column;
+  width: ${({ width }) => width};
+  margin: 0 auto;
+
+  @media (max-width: 1076px) {
+    width: ${({ $selectedPinId }) => ($selectedPinId ? '49vw' : '50vw')};
+    margin: ${({ $selectedPinId }) => $selectedPinId && '0'};
+  }
+
+  @media (max-width: 744px) {
+    width: 100%;
+  }
+`;
+
+const PinDetailWrapper = styled.div`
+  &.collapsedPinDetail {
+    z-index: -1;
+  }
+`;
+
+const ToggleButton = styled.button<{
+  $isCollapsed: boolean;
+}>`
+  position: absolute;
+  top: 50%;
+  left: 744px;
+  transform: translateY(-50%);
+  z-index: 1;
+  height: 80px;
+  background-color: #fff;
+  padding: 12px;
+  border-radius: 4px;
+  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+
+  ${(props) =>
+    props.$isCollapsed &&
+    `
+    transform: rotate(180deg);
+    top: 45%;
+    left: 372px;
+    z-index: 1;
+    `}
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
+
+  @media (max-width: 1076px) {
+    display: none;
+  }
+`;
+
+export default SelectedTopic;
diff --git a/frontend/src/pages/SelectedTopic/hooks/useClusterCoordinates.ts b/frontend/src/pages/SelectedTopic/hooks/useClusterCoordinates.ts
new file mode 100644
index 00000000..77b1361b
--- /dev/null
+++ b/frontend/src/pages/SelectedTopic/hooks/useClusterCoordinates.ts
@@ -0,0 +1,48 @@
+import { useContext } from 'react';
+
+import { getClusteredCoordinates } from '../../../apis/new';
+import { CoordinatesContext } from '../../../context/CoordinatesContext';
+import useRealDistanceOfPin from '../../../hooks/useRealDistanceOfPin';
+import useMapStore from '../../../store/mapInstance';
+import { ClusteredCoordinates } from '../types';
+
+interface ClusteredCoordinatesWithTopicId extends ClusteredCoordinates {
+  topicId: string;
+  id: string;
+  pinName: string;
+}
+
+const useClusterCoordinates = (topicId: string) => {
+  const { mapInstance } = useMapStore((state) => state);
+  const { getDistanceOfPin } = useRealDistanceOfPin();
+  const { setCoordinates } = useContext(CoordinatesContext);
+
+  const setClusteredCoordinates = async () => {
+    if (!mapInstance) return;
+
+    const newCoordinates: ClusteredCoordinatesWithTopicId[] = [];
+    const diameterOfPinSize = getDistanceOfPin(mapInstance);
+
+    const responseData = await getClusteredCoordinates(
+      topicId,
+      diameterOfPinSize,
+    );
+
+    responseData.forEach((clusterOrPin: any, idx: number) => {
+      newCoordinates.push({
+        topicId,
+        id: clusterOrPin.pins[0].id || `cluster ${idx}`,
+        pinName: clusterOrPin.pins[0].name,
+        latitude: clusterOrPin.latitude,
+        longitude: clusterOrPin.longitude,
+        pins: clusterOrPin.pins,
+      });
+    });
+
+    setCoordinates(newCoordinates);
+  };
+
+  return setClusteredCoordinates;
+};
+
+export default useClusterCoordinates;
diff --git a/frontend/src/pages/SelectedTopic/hooks/useHandleMapInteraction.ts b/frontend/src/pages/SelectedTopic/hooks/useHandleMapInteraction.ts
new file mode 100644
index 00000000..562b1226
--- /dev/null
+++ b/frontend/src/pages/SelectedTopic/hooks/useHandleMapInteraction.ts
@@ -0,0 +1,65 @@
+import { useContext, useEffect, useRef } from 'react';
+
+import { CoordinatesContext } from '../../../context/CoordinatesContext';
+import useMapStore from '../../../store/mapInstance';
+
+interface Props {
+  topicId: string;
+  onAfterInteraction: () => void;
+}
+
+const useHandleMapInteraction = ({ topicId, onAfterInteraction }: Props) => {
+  const { mapInstance } = useMapStore((state) => state);
+
+  const zoomTimerIdRef = useRef<NodeJS.Timeout | null>(null);
+  const dragTimerIdRef = useRef<NodeJS.Timeout | null>(null);
+  const { setCoordinates } = useContext(CoordinatesContext);
+
+  const setPrevCoordinates = () => {
+    setCoordinates((prev) => [...prev]);
+  };
+
+  const adjustMapDirection = () => {
+    if (!mapInstance) return;
+
+    mapInstance.setBearing(0);
+    mapInstance.setPitch(0);
+  };
+
+  useEffect(() => {
+    onAfterInteraction();
+
+    const onDragEnd = (evt: evt) => {
+      if (dragTimerIdRef.current) {
+        clearTimeout(dragTimerIdRef.current);
+      }
+
+      dragTimerIdRef.current = setTimeout(() => {
+        setPrevCoordinates();
+        adjustMapDirection();
+      }, 100);
+    };
+    const onZoomEnd = (evt: evt) => {
+      if (zoomTimerIdRef.current) {
+        clearTimeout(zoomTimerIdRef.current);
+      }
+
+      zoomTimerIdRef.current = setTimeout(() => {
+        onAfterInteraction();
+        adjustMapDirection();
+      }, 100);
+    };
+
+    if (!mapInstance) return;
+
+    mapInstance.on('DragEnd', onDragEnd);
+    mapInstance.on('ZoomEnd', onZoomEnd);
+
+    return () => {
+      mapInstance.off('DragEnd', onDragEnd);
+      mapInstance.off('ZoomEnd', onZoomEnd);
+    };
+  }, [topicId, mapInstance]);
+};
+
+export default useHandleMapInteraction;
diff --git a/frontend/src/pages/SelectedTopic/hooks/useSetSelectedPinId.ts b/frontend/src/pages/SelectedTopic/hooks/useSetSelectedPinId.ts
new file mode 100644
index 00000000..6f325ec0
--- /dev/null
+++ b/frontend/src/pages/SelectedTopic/hooks/useSetSelectedPinId.ts
@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+const useSetSelectedPinId = () => {
+  const [searchParams, _] = useSearchParams();
+  const [isDoubleSidebarOpen, setIsDoubleSidebarOpen] = useState(true);
+  const [selectedPinId, setSelectedPinId] = useState<number | null>(null);
+
+  useEffect(() => {
+    const queryParams = new URLSearchParams(location.search);
+
+    if (queryParams.has('pinDetail')) {
+      setSelectedPinId(Number(queryParams.get('pinDetail')));
+      setIsDoubleSidebarOpen(true);
+      return;
+    }
+
+    setSelectedPinId(null);
+  }, [searchParams]);
+
+  return { isDoubleSidebarOpen, selectedPinId, setIsDoubleSidebarOpen, setSelectedPinId };
+};
+
+export default useSetSelectedPinId;
diff --git a/frontend/src/pages/SelectedTopic/hooks/useTopicDetailQuery.ts b/frontend/src/pages/SelectedTopic/hooks/useTopicDetailQuery.ts
new file mode 100644
index 00000000..a6ab0a71
--- /dev/null
+++ b/frontend/src/pages/SelectedTopic/hooks/useTopicDetailQuery.ts
@@ -0,0 +1,15 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { getTopicDetail } from '../../../apis/new';
+
+const useTopicDetailQuery = (topicId: string) => {
+  const { data, refetch, ...rest } = useSuspenseQuery({
+    queryKey: ['topicDetail', topicId],
+    queryFn: () => getTopicDetail(topicId),
+    select: (response) => response[0],
+  });
+
+  return { data, refetch, ...rest };
+};
+
+export default useTopicDetailQuery;
diff --git a/frontend/src/pages/SelectedTopic/types/index.ts b/frontend/src/pages/SelectedTopic/types/index.ts
new file mode 100644
index 00000000..ff3f72be
--- /dev/null
+++ b/frontend/src/pages/SelectedTopic/types/index.ts
@@ -0,0 +1,11 @@
+export interface ClusteredCoordinates {
+  latitude: number;
+  longitude: number;
+  pins: ClusteredPin[];
+}
+
+interface ClusteredPin {
+  id: number;
+  name: string;
+  topicId: number;
+}
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index dd9b8268..a722e54d 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -2,17 +2,20 @@ import { lazy, ReactNode, Suspense } from 'react';
 import { createBrowserRouter } from 'react-router-dom';
 
 import AuthLayout from './components/Layout/AuthLayout';
+import TopicListSkeleton from './components/Skeletons/TopicListSkeleton';
 import Home from './pages/Home';
 import NotFound from './pages/NotFound';
 import RootPage from './pages/RootPage';
 import Search from './pages/Search';
 
-const SelectedTopic = lazy(() => import('./pages/SelectedTopic'));
+const SelectedTopic = lazy(
+  () => import('./pages/SelectedTopic/SelectedTopic.page'),
+);
 const NewPin = lazy(() => import('./pages/NewPin'));
 const NewTopic = lazy(() => import('./pages/NewTopic'));
-const SeeAllPopularTopics = lazy(() => import('./pages/SeeAllPopularTopics'));
-const SeeAllNearTopics = lazy(() => import('./pages/SeeAllNearTopics'));
-const SeeAllLatestTopics = lazy(() => import('./pages/SeeAllLatestTopics'));
+const SeeAllBestTopics = lazy(() => import('./pages/SeeAllBestTopics'));
+const SeeAllAllTopics = lazy(() => import('./pages/SeeAllAllTopics'));
+const SeeAllNewestTopics = lazy(() => import('./pages/SeeAllNewestTopics'));
 const KakaoRedirect = lazy(() => import('./pages/KakaoRedirect'));
 const Profile = lazy(() => import('./pages/Profile'));
 const AskLogin = lazy(() => import('./pages/AskLogin'));
@@ -79,45 +82,45 @@ const routes: routeElement[] = [
       {
         path: 'see-all/popularity',
         element: (
-          <SuspenseComp>
-            <SeeAllPopularTopics />
-          </SuspenseComp>
+          <Suspense fallback={<TopicListSkeleton />}>
+            <SeeAllBestTopics />
+          </Suspense>
         ),
         withAuth: false,
       },
       {
         path: 'see-all/near',
         element: (
-          <SuspenseComp>
-            <SeeAllNearTopics />
-          </SuspenseComp>
+          <Suspense fallback={<TopicListSkeleton />}>
+            <SeeAllAllTopics />
+          </Suspense>
         ),
         withAuth: false,
       },
       {
         path: 'see-all/latest',
         element: (
-          <SuspenseComp>
-            <SeeAllLatestTopics />
-          </SuspenseComp>
+          <Suspense fallback={<TopicListSkeleton />}>
+            <SeeAllNewestTopics />
+          </Suspense>
         ),
         withAuth: false,
       },
       {
         path: 'favorite',
         element: (
-          <SuspenseComp>
+          <Suspense fallback={<TopicListSkeleton />}>
             <Bookmark />
-          </SuspenseComp>
+          </Suspense>
         ),
         withAuth: true,
       },
       {
         path: 'my-page',
         element: (
-          <SuspenseComp>
+          <Suspense fallback={<TopicListSkeleton />}>
             <Profile />
-          </SuspenseComp>
+          </Suspense>
         ),
         withAuth: true,
       },
diff --git a/frontend/src/themes/color.ts b/frontend/src/themes/color.ts
index fc7397a8..979bf9f4 100644
--- a/frontend/src/themes/color.ts
+++ b/frontend/src/themes/color.ts
@@ -2,11 +2,11 @@ const color = {
   primary: '#E1325C',
   black: '#454545',
   white: '#FFFFFF',
-
   darkGray: '#767676',
   gray: '#969696',
   lightGray: '#E7E7E7',
   whiteGray: '#F9F9F9',
+  checked: '#287EFF',
 } as const;
 
 export type colorThemeKey = keyof typeof color;
diff --git a/frontend/src/utils/convertCSS.ts b/frontend/src/utils/convertCSS.ts
new file mode 100644
index 00000000..add6bd75
--- /dev/null
+++ b/frontend/src/utils/convertCSS.ts
@@ -0,0 +1,5 @@
+export const convertCSS = (property: number | string) => {
+  if (typeof property === 'number') return `${property}px`;
+
+  return property;
+};
diff --git a/frontend/webpack.common.js b/frontend/webpack.common.js
index d9286c09..83c60894 100644
--- a/frontend/webpack.common.js
+++ b/frontend/webpack.common.js
@@ -2,6 +2,7 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { ProvidePlugin, DefinePlugin } = require('webpack');
 const DotenvWebpackPlugin = require('dotenv-webpack');
+const CompressionPlugin = require('compression-webpack-plugin');
 
 module.exports = {
   entry: {
@@ -27,6 +28,13 @@ module.exports = {
     new DotenvWebpackPlugin({
       systemvars: true,
     }),
+    new CompressionPlugin({
+      filename: '[path][base].gz',
+      algorithm: 'gzip',
+      test: /\.js$|\.css$|\.html$/,
+      threshold: 10240,
+      minRatio: 0.8,
+    }),
   ],
   resolve: {
     extensions: ['.tsx', '.ts', '.jsx', '.js'],