diff --git a/README.md b/README.md
index 77fa0b13..52cde81a 100644
--- a/README.md
+++ b/README.md
@@ -14,5 +14,5 @@
 - Docs : 내부 문서 추가/수정
 - Test : 테스트 추가/수정
 - Chore : 빌드 관련 코드 수정
-- Rename : 파일 및 폴더명 수정
+- Rename : 파일 및 폴더명 수정.
 - Remove : 파일 삭제.
diff --git a/index.html b/index.html
index 6a7807f4..df4b0b24 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,4 @@
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
-  <script
-    type="text/javascript"
-    src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_KAKAO_API_KEY%"></script>
 </html>
diff --git a/package-lock.json b/package-lock.json
index 8dbc2df4..ee1cecd4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,8 @@
       "dependencies": {
         "@pnpm-monorepo/shared": "^1.0.0",
         "@radix-ui/react-collapsible": "^1.0.3",
+        "@radix-ui/react-radio-group": "^1.1.3",
+        "@radix-ui/react-toggle-group": "^1.0.4",
         "@svgr/rollup": "^8.1.0",
         "@tanstack/react-query": "^5.14.6",
         "@tanstack/react-query-devtools": "^5.14.6",
@@ -20,6 +22,7 @@
         "react-dom": "^18.2.0",
         "react-infinite-scroller": "^1.2.6",
         "react-kakao-maps-sdk": "^1.1.24",
+        "react-modal": "^3.16.1",
         "react-router-dom": "^6.21.1",
         "recoil": "^0.7.7",
         "styled-components": "^6.1.3",
@@ -29,6 +32,7 @@
         "@types/react": "^18.2.43",
         "@types/react-dom": "^18.2.17",
         "@types/react-infinite-scroller": "^1.2.5",
+        "@types/react-modal": "^3.16.3",
         "@types/uuid": "^9.0.7",
         "@typescript-eslint/eslint-plugin": "^6.14.0",
         "@typescript-eslint/parser": "^6.14.0",
@@ -41,6 +45,7 @@
         "prettier": "^3.1.1",
         "prettier-plugin-tailwindcss": "^0.5.9",
         "tailwindcss": "^3.4.0",
+        "terser": "^5.26.0",
         "typescript": "^5.2.2",
         "vite": "^5.0.8"
       }
@@ -2484,6 +2489,16 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz",
+      "integrity": "sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
@@ -2613,6 +2628,32 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
+      "integrity": "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
@@ -2647,6 +2688,23 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
+      "integrity": "sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
@@ -2712,6 +2770,69 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.1.3.tgz",
+      "integrity": "sha512-x+yELayyefNeKeTx4fjK6j99Fs6c4qKm3aY38G3swQVTN6xMpsrbigC0uHs2L//g8q4qR7qOcww8430jJmi2ag==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz",
+      "integrity": "sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
@@ -2730,6 +2851,60 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.0.3.tgz",
+      "integrity": "sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.0.4.tgz",
+      "integrity": "sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-toggle": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
@@ -2782,6 +2957,41 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz",
+      "integrity": "sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz",
+      "integrity": "sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.1.tgz",
@@ -3395,6 +3605,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-modal": {
+      "version": "3.16.3",
+      "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.16.3.tgz",
+      "integrity": "sha512-xXuGavyEGaFQDgBv4UVm8/ZsG+qxeQ7f77yNrW3n+1J6XAstUy5rYHeIHPh1KzsGc6IkCIdu6lQ2xWzu1jBTLg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.8",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
@@ -4085,6 +4304,12 @@
         "ieee754": "^1.1.13"
       }
     },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -5038,6 +5263,11 @@
         "node": ">=0.8.x"
       }
     },
+    "node_modules/exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
     "node_modules/external-editor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
@@ -6913,6 +7143,29 @@
         "react-dom": "^16.8 || ^17 || ^18"
       }
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "node_modules/react-modal": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
+      "dependencies": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
+        "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -7299,6 +7552,15 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -7307,6 +7569,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -7605,6 +7877,30 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/terser": {
+      "version": "5.26.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.26.0.tgz",
+      "integrity": "sha512-dytTGoE2oHgbNV9nTzgBEPaqAWvcJNl66VZ0BkJqlvp71IjO8CxdBx/ykCNb47cLnCmCvRZ6ZR0tLkqvZCdVBQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.8.2",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -7895,6 +8191,14 @@
         }
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
@@ -9643,6 +9947,16 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
       "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw=="
     },
+    "@jridgewell/source-map": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz",
+      "integrity": "sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
     "@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
@@ -9746,6 +10060,18 @@
         "@radix-ui/react-use-layout-effect": "1.0.1"
       }
     },
+    "@radix-ui/react-collection": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
+      "integrity": "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2"
+      }
+    },
     "@radix-ui/react-compose-refs": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
@@ -9762,6 +10088,14 @@
         "@babel/runtime": "^7.13.10"
       }
     },
+    "@radix-ui/react-direction": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
+      "integrity": "sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
     "@radix-ui/react-id": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
@@ -9790,6 +10124,41 @@
         "@radix-ui/react-slot": "1.0.2"
       }
     },
+    "@radix-ui/react-radio-group": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.1.3.tgz",
+      "integrity": "sha512-x+yELayyefNeKeTx4fjK6j99Fs6c4qKm3aY38G3swQVTN6xMpsrbigC0uHs2L//g8q4qR7qOcww8430jJmi2ag==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1"
+      }
+    },
+    "@radix-ui/react-roving-focus": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz",
+      "integrity": "sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      }
+    },
     "@radix-ui/react-slot": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
@@ -9799,6 +10168,32 @@
         "@radix-ui/react-compose-refs": "1.0.1"
       }
     },
+    "@radix-ui/react-toggle": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.0.3.tgz",
+      "integrity": "sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      }
+    },
+    "@radix-ui/react-toggle-group": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.0.4.tgz",
+      "integrity": "sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-toggle": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      }
+    },
     "@radix-ui/react-use-callback-ref": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
@@ -9824,6 +10219,23 @@
         "@babel/runtime": "^7.13.10"
       }
     },
+    "@radix-ui/react-use-previous": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz",
+      "integrity": "sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==",
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "@radix-ui/react-use-size": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz",
+      "integrity": "sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      }
+    },
     "@remix-run/router": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.1.tgz",
@@ -10196,6 +10608,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-modal": {
+      "version": "3.16.3",
+      "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.16.3.tgz",
+      "integrity": "sha512-xXuGavyEGaFQDgBv4UVm8/ZsG+qxeQ7f77yNrW3n+1J6XAstUy5rYHeIHPh1KzsGc6IkCIdu6lQ2xWzu1jBTLg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/scheduler": {
       "version": "0.16.8",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
@@ -10647,6 +11068,12 @@
         "ieee754": "^1.1.13"
       }
     },
+    "buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true
+    },
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -11319,6 +11746,11 @@
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
     },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
     "external-editor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
@@ -12581,6 +13013,22 @@
         "kakao.maps.d.ts": "^0.1.39"
       }
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-modal": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
+      "requires": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -12849,11 +13297,27 @@
         "tslib": "^2.0.3"
       }
     },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true
+    },
     "source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
     },
+    "source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
     "statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -13060,6 +13524,26 @@
         "sucrase": "^3.32.0"
       }
     },
+    "terser": {
+      "version": "5.26.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.26.0.tgz",
+      "integrity": "sha512-dytTGoE2oHgbNV9nTzgBEPaqAWvcJNl66VZ0BkJqlvp71IjO8CxdBx/ykCNb47cLnCmCvRZ6ZR0tLkqvZCdVBQ==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.8.2",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true
+        }
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -13237,6 +13721,14 @@
         "rollup": "^4.2.0"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
diff --git a/package.json b/package.json
index 8439277e..d2479fde 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,8 @@
   "dependencies": {
     "@pnpm-monorepo/shared": "^1.0.0",
     "@radix-ui/react-collapsible": "^1.0.3",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-toggle-group": "^1.0.4",
     "@svgr/rollup": "^8.1.0",
     "@tanstack/react-query": "^5.14.6",
     "@tanstack/react-query-devtools": "^5.14.6",
@@ -22,6 +24,7 @@
     "react-dom": "^18.2.0",
     "react-infinite-scroller": "^1.2.6",
     "react-kakao-maps-sdk": "^1.1.24",
+    "react-modal": "^3.16.1",
     "react-router-dom": "^6.21.1",
     "recoil": "^0.7.7",
     "styled-components": "^6.1.3",
@@ -32,6 +35,7 @@
     "@types/react-dom": "^18.2.17",
     "@types/react-infinite-scroller": "^1.2.5",
     "@types/uuid": "^9.0.7",
+    "@types/react-modal": "^3.16.3",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-react": "^4.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3163368e..091dfc27 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,12 @@ dependencies:
   '@radix-ui/react-collapsible':
     specifier: ^1.0.3
     version: 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+  '@radix-ui/react-radio-group':
+    specifier: ^1.1.3
+    version: 1.1.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+  '@radix-ui/react-toggle-group':
+    specifier: ^1.0.4
+    version: 1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
   '@svgr/rollup':
     specifier: ^8.1.0
     version: 8.1.0(typescript@5.3.3)
@@ -41,6 +47,9 @@ dependencies:
   react-kakao-maps-sdk:
     specifier: ^1.1.24
     version: 1.1.24(react-dom@18.2.0)(react@18.2.0)
+  react-modal:
+    specifier: ^3.16.1
+    version: 3.16.1(react-dom@18.2.0)(react@18.2.0)
   react-router-dom:
     specifier: ^6.21.1
     version: 6.21.1(react-dom@18.2.0)(react@18.2.0)
@@ -64,6 +73,9 @@ devDependencies:
   '@types/react-infinite-scroller':
     specifier: ^1.2.5
     version: 1.2.5
+  '@types/react-modal':
+    specifier: ^3.16.3
+    version: 3.16.3
   '@types/uuid':
     specifier: ^9.0.7
     version: 9.0.7
@@ -1822,6 +1834,30 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.6
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.45)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.45)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.45)(react@18.2.0)
+      '@types/react': 18.2.45
+      '@types/react-dom': 18.2.18
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.45)(react@18.2.0):
     resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
     peerDependencies:
@@ -1850,6 +1886,20 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-direction@1.0.1(@types/react@18.2.45)(react@18.2.0):
+    resolution: {integrity: sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.6
+      '@types/react': 18.2.45
+      react: 18.2.0
+    dev: false
+
   /@radix-ui/react-id@1.0.1(@types/react@18.2.45)(react@18.2.0):
     resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
     peerDependencies:
@@ -1908,6 +1958,65 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /@radix-ui/react-radio-group@1.1.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-x+yELayyefNeKeTx4fjK6j99Fs6c4qKm3aY38G3swQVTN6xMpsrbigC0uHs2L//g8q4qR7qOcww8430jJmi2ag==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.6
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.45)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.45)(react@18.2.0)
+      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.45)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.45)(react@18.2.0)
+      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.45)(react@18.2.0)
+      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.45)(react@18.2.0)
+      '@types/react': 18.2.45
+      '@types/react-dom': 18.2.18
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.6
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.45)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.45)(react@18.2.0)
+      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.45)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.45)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.45)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.45)(react@18.2.0)
+      '@types/react': 18.2.45
+      '@types/react-dom': 18.2.18
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-slot@1.0.2(@types/react@18.2.45)(react@18.2.0):
     resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
     peerDependencies:
@@ -1923,6 +2032,56 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-toggle-group@1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.6
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.45)(react@18.2.0)
+      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.45)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-toggle': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.45)(react@18.2.0)
+      '@types/react': 18.2.45
+      '@types/react-dom': 18.2.18
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@radix-ui/react-toggle@1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.6
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.45)(react@18.2.0)
+      '@types/react': 18.2.45
+      '@types/react-dom': 18.2.18
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.45)(react@18.2.0):
     resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
     peerDependencies:
@@ -1966,6 +2125,35 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-use-previous@1.0.1(@types/react@18.2.45)(react@18.2.0):
+    resolution: {integrity: sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.6
+      '@types/react': 18.2.45
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-use-size@1.0.1(@types/react@18.2.45)(react@18.2.0):
+    resolution: {integrity: sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.6
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.45)(react@18.2.0)
+      '@types/react': 18.2.45
+      react: 18.2.0
+    dev: false
+
   /@remix-run/router@1.14.1:
     resolution: {integrity: sha512-Qg4DMQsfPNAs88rb2xkdk03N3bjK4jgX5fR24eHCTR9q6PrhZQZ4UJBPzCHJkIpTRN1UKxx2DzjZmnC+7Lj0Ow==}
     engines: {node: '>=14.0.0'}
@@ -2353,6 +2541,12 @@ packages:
       '@types/react': 18.2.45
     dev: true
 
+  /@types/react-modal@3.16.3:
+    resolution: {integrity: sha512-xXuGavyEGaFQDgBv4UVm8/ZsG+qxeQ7f77yNrW3n+1J6XAstUy5rYHeIHPh1KzsGc6IkCIdu6lQ2xWzu1jBTLg==}
+    dependencies:
+      '@types/react': 18.2.45
+    dev: true
+
   /@types/react@18.2.45:
     resolution: {integrity: sha512-TtAxCNrlrBp8GoeEp1npd5g+d/OejJHFxS3OWmrPBMFaVQMSN0OFySozJio5BHxTuTeug00AVXVAjfDSfk+lUg==}
     dependencies:
@@ -3265,6 +3459,10 @@ packages:
     engines: {node: '>=0.8.x'}
     dev: false
 
+  /exenv@1.2.2:
+    resolution: {integrity: sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==}
+    dev: false
+
   /external-editor@3.1.0:
     resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
     engines: {node: '>=4'}
@@ -4249,6 +4447,25 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /react-lifecycles-compat@3.0.4:
+    resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==}
+    dev: false
+
+  /react-modal@3.16.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==}
+    engines: {node: '>=8'}
+    peerDependencies:
+      react: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18
+      react-dom: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18
+    dependencies:
+      exenv: 1.2.2
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-lifecycles-compat: 3.0.4
+      warning: 4.0.3
+    dev: false
+
   /react-refresh@0.14.0:
     resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
     engines: {node: '>=0.10.0'}
@@ -4869,6 +5086,12 @@ packages:
       fsevents: 2.3.3
     dev: true
 
+  /warning@4.0.3:
+    resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
+
   /wcwidth@1.0.1:
     resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
     dependencies:
diff --git a/src/@types/tours.types.ts b/src/@types/tours.types.ts
index f3789a88..c819462e 100644
--- a/src/@types/tours.types.ts
+++ b/src/@types/tours.types.ts
@@ -32,4 +32,7 @@ export interface TourType {
   ratingAverage: number;
   reviewCount: number;
   smallThumbnailUrl: string;
+  tourAddress?: string;
+  longitude?: string;
+  latitude?: string;
 }
diff --git a/src/api/client.ts b/src/api/client.ts
index 930438d1..4e7b5bb2 100644
--- a/src/api/client.ts
+++ b/src/api/client.ts
@@ -1,9 +1,16 @@
 import axios from 'axios';
 
+let accessToken;
+if (window.localStorage.getItem('accessToken')) {
+  accessToken = window.localStorage.getItem('accessToken');
+}
+
+// axios 인스턴스를 생성합니다.
 const client = axios.create({
   baseURL: import.meta.env.VITE_SERVER_URL,
   headers: {
     'Content-Type': 'application/json',
+    ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
   },
   withCredentials: true,
 });
diff --git a/src/api/comments.ts b/src/api/comments.ts
index 16540bc0..72114584 100644
--- a/src/api/comments.ts
+++ b/src/api/comments.ts
@@ -3,7 +3,7 @@ import client from './client';
 // 댓글 관련 API
 
 // 댓글수정
-export const putComments = async (content: string, commentId: string) => {
+export const putComments = async (content: string, commentId: number) => {
   const res = await client.put(`comments/${commentId}`, {
     content,
   });
@@ -11,14 +11,14 @@ export const putComments = async (content: string, commentId: string) => {
 };
 
 // 댓글삭제
-export const deleteComments = async (commentId: string) => {
+export const deleteComments = async (commentId: number) => {
   const res = await client.delete(`comments/${commentId}`);
   return res;
 };
 
 // 댓글작성
 export const postComments = async (content: string, reviewId: number) => {
-  const res = await client.post(`comments/`, {
+  const res = await client.post(`comments`, {
     content: content,
     reviewId: reviewId,
   });
diff --git a/src/api/member.ts b/src/api/member.ts
index b4c6b4ae..5bcd784c 100644
--- a/src/api/member.ts
+++ b/src/api/member.ts
@@ -39,7 +39,7 @@ export const getMemberReviews = async () => {
 };
 
 // 나의 관심 여행지 삭제
-export const deleteMemberTours = async (tourId: number) => {
-  const res = await client.delete(`member/tours/${tourId}`);
+export const deleteMemberTours = async (tourItemId: number) => {
+  const res = await client.delete(`member/tours/${tourItemId}`);
   return res;
 };
diff --git a/src/api/review.ts b/src/api/review.ts
index a914f451..be1721d1 100644
--- a/src/api/review.ts
+++ b/src/api/review.ts
@@ -31,7 +31,7 @@ export const getReviewComments = async (reviewId: number) => {
 };
 
 // 리뷰키워드조회
-export const getReviewKeywords = async (code: number) => {
-  const res = await client.get(`reviews/keywords?code=${code}`);
+export const getReviewKeywords = async (keywordType: string) => {
+  const res = await client.get(`reviews/keywords?keywordType=${keywordType}`);
   return res;
 };
diff --git a/src/api/tours.ts b/src/api/tours.ts
index a7baee6c..87ed8604 100644
--- a/src/api/tours.ts
+++ b/src/api/tours.ts
@@ -35,21 +35,33 @@ export const getDetailTours = async (tourItemId: number) => {
 // 여행 상품 리뷰 조회
 export const getToursReviews = async (tourItemId: number) => {
   const res = await client.get(`tours/${tourItemId}/reviews`);
-  console.log('res', res);
-  console.log('res.data.data.reviewInfos', res.data.data.reviewInfos);
   return res;
 };
 
 // 여행지 검색
-export const getToursSearch = async (
-  region: number,
-  category: number,
-  searchWord: string,
-  page: number,
-  size: number,
-) => {
-  const res = await client.get(
-    `tours/search?region=${region}&category=${category}&searchWord=${searchWord}&page=${page}&size=${size}}`,
-  );
+export const getToursSearch = async (options: {
+  region?: string;
+  searchWord: string;
+  category?: string;
+  page?: number;
+  size?: number;
+}) => {
+  const { region, searchWord, category, page = 0, size } = options;
+
+  let query = `tours/search?searchWord=${searchWord}`;
+
+  if (region) {
+    query += `&region=${region}`;
+  }
+
+  if (category) {
+    query += `&category=${category}`;
+  }
+  query += `&page=${page}`;
+
+  if (size) {
+    query += `&size=${size}`;
+  }
+  const res = await client.get(query);
   return res;
 };
diff --git a/src/assets/images/Calendar.svg b/src/assets/images/Calendar.svg
deleted file mode 100644
index 6e8a7da8..00000000
--- a/src/assets/images/Calendar.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Group 36682">
-<g id="Group 36681">
-<rect id="Rectangle 2" x="2.91553" y="3.45215" width="15" height="15" rx="4.16667" stroke="#1E1E1E" stroke-width="1.25"/>
-<path id="Line" d="M2.91553 7.61882H17.9155" stroke="#1E1E1E" stroke-width="1.25" stroke-linejoin="round"/>
-<path id="Line_2" d="M14.1656 2.20215L14.1656 4.70215" stroke="#1E1E1E" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Line_3" d="M6.66557 2.20215L6.66557 4.70215" stroke="#1E1E1E" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Line_4" d="M5.83215 10.9515H6.66549" stroke="#1E1E1E" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Line_5" d="M9.99878 10.9515H10.8321" stroke="#1E1E1E" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Line_6" d="M14.1655 10.9515H14.9989" stroke="#1E1E1E" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Line_7" d="M5.83215 14.2855H6.66549" stroke="#1E1E1E" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Line_8" d="M9.99878 14.2855H10.8321" stroke="#1E1E1E" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Line_9" d="M14.1655 14.2855H14.9989" stroke="#1E1E1E" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-</g>
-</svg>
diff --git a/src/assets/images/Check.svg b/src/assets/images/Check.svg
deleted file mode 100644
index 1343696b..00000000
--- a/src/assets/images/Check.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Group 36659">
-<path id="Vector 734" d="M3.12079 5.40039L8.41553 10.6951L13.7103 5.40039" stroke="black" stroke-linecap="round"/>
-</g>
-</svg>
diff --git a/src/assets/images/DeleteInput.svg b/src/assets/images/DeleteInput.svg
new file mode 100644
index 00000000..b1020d4f
--- /dev/null
+++ b/src/assets/images/DeleteInput.svg
@@ -0,0 +1,5 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8.59119" cy="8" r="8" fill="#888888"/>
+<path d="M5.6248 5.03398L11.5576 10.9668" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.5576 5.03398L5.62476 10.9668" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/images/Heart.svg b/src/assets/images/Heart.svg
deleted file mode 100644
index 52d4d386..00000000
--- a/src/assets/images/Heart.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg
-  width="25px"
-  height="25px"
-  viewBox="0 0 25 25"
-  fill="current"
-  xmlns="http://www.w3.org/2000/svg"
->
-    <!-- fill="#D7D7D7" -->
-    <g id="&#236;&#176;&#156;">
-        <path id="Heart" d="M4.07828 13.1744L10.2393 19.6674C11.4223 20.9142 13.4088 20.9142 14.5918 19.6674L20.7528 13.1744C22.9698 10.8379 22.9698 7.04976 20.7528 4.71329C18.5358 2.37682 14.9413 2.37682 12.7243 4.71329C12.5565 4.89019 12.2746 4.89019 12.1067 4.71329C9.88974 2.37682 6.29528 2.37682 4.07828 4.71329C1.86128 7.04976 1.86128 10.8379 4.07828 13.1744Z" fill="current" stroke="white" stroke-width="1.5"/>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/src/assets/images/Left.svg b/src/assets/images/Left.svg
deleted file mode 100644
index 36ba334f..00000000
--- a/src/assets/images/Left.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="17" height="10" viewBox="0 0 17 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Left">
-<path id="Vector" d="M4.74112 1.18604L1.44823 4.47893C1.0577 4.86945 1.0577 5.50262 1.44823 5.89314L4.74112 9.18604M1.74112 5.18604L15.7411 5.18604" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
-</g>
-</svg>
diff --git a/src/assets/images/Map.svg b/src/assets/images/Map.svg
deleted file mode 100644
index bd149bac..00000000
--- a/src/assets/images/Map.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Group 36689">
-<g id="Group">
-<path id="Exclude" fill-rule="evenodd" clip-rule="evenodd" d="M7.63905 13.4649C8.02061 14.0124 8.81045 14.0124 9.192 13.4649C10.4794 11.6176 12.9155 7.87993 12.9155 6.04785C12.9155 4.85438 12.4414 3.70978 11.5975 2.86587C10.7536 2.02196 9.609 1.54785 8.41553 1.54785C7.22205 1.54785 6.07746 2.02196 5.23355 2.86587C4.38963 3.70978 3.91553 4.85438 3.91553 6.04785C3.91553 7.87993 6.35168 11.6176 7.63905 13.4649ZM9.91553 6.04785C9.91553 6.87628 9.24395 7.54785 8.41553 7.54785C7.5871 7.54785 6.91553 6.87628 6.91553 6.04785C6.91553 5.21942 7.5871 4.54785 8.41553 4.54785C9.24395 4.54785 9.91553 5.21942 9.91553 6.04785Z" fill="#888888"/>
-</g>
-</g>
-</svg>
diff --git a/src/assets/images/Pen.svg b/src/assets/images/Pen.svg
deleted file mode 100644
index 257e6bac..00000000
--- a/src/assets/images/Pen.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Group 36684">
-<g id="Group 36683">
-<path id="Rectangle 74" d="M12.9793 3.21944C13.6297 2.56808 14.6846 2.56768 15.3354 3.21855L17.412 5.29509C18.0573 5.94042 18.064 6.98512 17.427 7.63868L9.73273 15.5331C9.26238 16.0156 8.61727 16.2878 7.94365 16.2877L5.65019 16.2876C4.9395 16.2876 4.37194 15.6952 4.40183 14.9846L4.50029 12.6437C4.52662 12.0177 4.78681 11.4244 5.22936 10.9811L12.9793 3.21944Z" stroke="#1E1E1E" stroke-width="1.25"/>
-<path id="Line" d="M11.2227 5.12033L15.3475 9.24512" stroke="#1E1E1E" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Line_2" d="M13.2701 16.2266H18.3715" stroke="#1E1E1E" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-</g>
-</svg>
diff --git a/src/assets/images/Phone.svg b/src/assets/images/Phone.svg
deleted file mode 100644
index 123ea8fb..00000000
--- a/src/assets/images/Phone.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Group 36690">
-<path id="Vector" d="M10.4971 14.3215C11.1129 14.7188 11.8468 14.8919 12.5752 14.8118C13.3037 14.7316 13.9823 14.4031 14.4971 13.8815L14.9471 13.4415C15.1444 13.2397 15.2548 12.9687 15.2548 12.6865C15.2548 12.4043 15.1444 12.1333 14.9471 11.9315L13.0371 10.0415C12.837 9.84482 12.5676 9.73463 12.2871 9.73463C12.0065 9.73463 11.7372 9.84482 11.5371 10.0415C11.3353 10.2388 11.0643 10.3492 10.7821 10.3492C10.4999 10.3492 10.2289 10.2388 10.0271 10.0415L7.02709 7.04148C6.92701 6.94285 6.84754 6.82532 6.79329 6.6957C6.73905 6.56609 6.71112 6.42698 6.71112 6.28648C6.71112 6.14597 6.73905 6.00687 6.79329 5.87725C6.84754 5.74764 6.92701 5.6301 7.02709 5.53148C7.22374 5.33137 7.33394 5.06204 7.33394 4.78148C7.33394 4.50092 7.22374 4.23158 7.02709 4.03148L5.12709 2.13148C4.9253 1.93419 4.6543 1.82373 4.37209 1.82373C4.08988 1.82373 3.81888 1.93419 3.61709 2.13148L3.17709 2.58148C2.65544 3.09622 2.32692 3.77488 2.24679 4.50334C2.16666 5.23181 2.3398 5.96565 2.73709 6.58148C4.80713 9.63221 7.44103 12.2593 10.4971 14.3215Z" fill="#888888"/>
-</g>
-</svg>
diff --git a/src/assets/images/Search.svg b/src/assets/images/Search.svg
new file mode 100644
index 00000000..d8e513bb
--- /dev/null
+++ b/src/assets/images/Search.svg
@@ -0,0 +1,6 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Search">
+<ellipse id="Ellipse" cx="6.92367" cy="6.60726" rx="5.33333" ry="5.33333" stroke="#2A2A2A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Line" d="M10.5903 10.5793L13.9237 13.9127" stroke="#2A2A2A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/src/assets/images/Star.svg b/src/assets/images/Star.svg
deleted file mode 100644
index 5c27ea56..00000000
--- a/src/assets/images/Star.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg 
-    width="16" 
-    height="15" 
-    viewBox="0 0 16 15" 
-    fill="current" 
-    xmlns="http://www.w3.org/2000/svg">
-    <path id="Star 5" d="M7.46447 0.974901C7.76382 0.0535908 9.06723 0.0535913 9.36658 0.974902L10.4362 4.2667C10.57 4.67872 10.954 4.95768 11.3872 4.95768H14.8484C15.8171 4.95768 16.2199 6.1973 15.4362 6.7667L12.636 8.80114C12.2855 9.05578 12.1389 9.50715 12.2728 9.91917L13.3423 13.211C13.6417 14.1323 12.5872 14.8984 11.8035 14.329L9.00331 12.2946C8.65283 12.0399 8.17823 12.0399 7.82774 12.2946L5.02757 14.329C4.24386 14.8984 3.18938 14.1323 3.48873 13.211L4.5583 9.91917C4.69217 9.50715 4.54552 9.05578 4.19503 8.80114L1.39486 6.7667C0.611146 6.1973 1.01392 4.95768 1.98265 4.95768H5.44385C5.87707 4.95768 6.26103 4.67872 6.3949 4.2667L7.46447 0.974901Z" fill="current"/>
-</svg>
\ No newline at end of file
diff --git a/src/components/DetailSectionBottom/DetailReview.tsx b/src/components/DetailSectionBottom/DetailReview.tsx
deleted file mode 100644
index b68f9377..00000000
--- a/src/components/DetailSectionBottom/DetailReview.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-// import { getToursReviews } from '@api/tours';
-// import { useEffect, useState } from 'react';
-// import InfiniteScroll from 'react-infinite-scroller';
-// import { useInfiniteQuery } from '@tanstack/react-query';
-// import ReviewItem from './ReviewItem';
-// import { StarIcon } from '@components/common/icons/Icons';
-
-// export default function DetailReview() {
-//   const [reviewDataLength, setReviewDataLength] = useState<number>(0);
-//   const tourItemId = 1;
-
-//   const {
-//     data: toursReviews,
-//     fetchNextPage,
-//     hasNextPage,
-//   } = useInfiniteQuery({
-//     queryKey: ['toursReviews'],
-//     queryFn: ({ pageParam }) => getToursReviews(tourItemId),
-//     initialPageParam: 0,
-//     getNextPageParam: (lastPage, allPages, lastPageParam) => {
-//       const lastData = lastPage?.data?.data?.reviewInfos;
-//       return lastData && lastData.length === 4 ? lastPageParam + 1 : undefined;
-//     },
-//   });
-
-//   useEffect(() => {
-//     if (toursReviews) {
-//       const totalCount = toursReviews.pages.reduce(
-//         (accumulator, page) =>
-//           accumulator + (page?.data?.data?.reviewInfos?.length || 0),
-//         0,
-//       );
-//       setReviewDataLength(totalCount);
-//     }
-//   }, [toursReviews]);
-
-//   return (
-//     <>
-//       <div className="mb-4 mt-2 text-lg font-bold">
-//         리뷰 <span className="text-gray3">{reviewDataLength}</span>
-//       </div>
-//       {reviewDataLength > 0 && (
-//         <InfiniteScroll
-//           hasMore={hasNextPage}
-//           loadMore={() => fetchNextPage()}
-//           initialLoad={false}>
-//           {toursReviews?.pages?.map((page, pageIndex) => (
-//             <div key={pageIndex}>
-//               {page?.data?.data?.reviewInfos?.map(
-//                 (item: any, index: number) => (
-//                   <ReviewItem
-//                     key={item.reviewId}
-//                     authorNickname={item.authorNickname}
-//                     authorProfileImageUrl={item.authorProfileImageUrl}
-//                     rating={item.rating}
-//                     createdTime={item.createdTime}
-//                     content={item.content}
-//                     keywords={item.keywords} // keywordId, content, type
-//                     commentCount={2} //commentCount가 swagger에는 있는데 response에는 없음
-//                   />
-//                 ),
-//               )}
-//             </div>
-//           ))}
-//         </InfiniteScroll>
-//       )}
-//       {reviewDataLength == 0 && (
-//         <div className="flex flex-col items-center justify-center">
-//           <div className="mb-2 flex">
-//             {Array.from({ length: 5 }, (_, index) => (
-//               <StarIcon
-//                 key={index}
-//                 size={30}
-//                 color="none"
-//                 fill={'#EDEDED'}
-//                 className="cursor-pointer"
-//               />
-//             ))}
-//           </div>
-//           <div className="text-sm text-gray3">첫번째 리뷰를 남겨주세요!</div>
-//         </div>
-//       )}
-//     </>
-//   );
-// }
diff --git a/src/components/DetailSectionBottom/DetailReviews.tsx b/src/components/DetailSectionBottom/DetailReviews.tsx
new file mode 100644
index 00000000..87893173
--- /dev/null
+++ b/src/components/DetailSectionBottom/DetailReviews.tsx
@@ -0,0 +1,116 @@
+import { getToursReviews } from '@api/tours';
+import { useEffect, useState } from 'react';
+// import InfiniteScroll from 'react-infinite-scroller';
+import { useQuery } from '@tanstack/react-query';
+import ReviewItem from './ReviewItem';
+import { StarIcon } from '@components/common/icons/Icons';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useSetRecoilState, useRecoilState } from 'recoil';
+import { isModalOpenState, titleState } from '@recoil/modal';
+import {
+  ratingState,
+  keywordsState,
+  contentState,
+  targetReviewIdState,
+  tourItemIdState,
+  contentTypeIdState,
+  isModifyingReviewState,
+} from '@recoil/review';
+import { Modal } from '@components/common/modal';
+
+interface reviewProps {
+  reviewData: any;
+}
+
+export default function DetailReviews({ reviewData }: reviewProps) {
+  const [reviewDataLength, setReviewDataLength] = useState<number>(0);
+  const { title, contentTypeId } = reviewData;
+  const params = useParams();
+  const tourItemId = Number(params.id);
+  const navigate = useNavigate();
+  const setRating = useSetRecoilState(ratingState);
+  const setKeywords = useSetRecoilState(keywordsState);
+  const setContent = useSetRecoilState(contentState);
+  const setTitle = useSetRecoilState(titleState);
+  const setTourItemId = useSetRecoilState(tourItemIdState);
+  const setContentTypeId = useSetRecoilState(contentTypeIdState);
+  const setTargetReviewId = useSetRecoilState(targetReviewIdState);
+  const setIsModifyingReview = useSetRecoilState(isModifyingReviewState);
+
+  const { data: toursReviews } = useQuery({
+    queryKey: ['toursReviews'],
+    queryFn: () => getToursReviews(tourItemId),
+  });
+
+  const handleReviewClick = (item: any) => {
+    const reviewId = item.reviewId;
+    navigate(`/reviewComment/${reviewId}`, { state: { item, tourItemId } });
+  };
+
+  const handlePostingReivew = () => {
+    navigate(`/reviewPosting/${tourItemId}`, {
+      state: { title, contentTypeId },
+    });
+  };
+
+  const [isModalOpen, setIsModalOpen] = useRecoilState(isModalOpenState);
+
+  const closeModal = () => {
+    setTitle('');
+    setTourItemId(0);
+    if (contentTypeId) {
+      setContentTypeId(0);
+    }
+    setRating(0);
+    setKeywords([]);
+    setContent('');
+    setTargetReviewId(0);
+    setIsModifyingReview(false);
+    setIsModalOpen(false);
+  };
+
+  useEffect(() => {
+    setReviewDataLength(toursReviews?.data?.data?.reviewTotalCount);
+  }, [toursReviews]);
+
+  return (
+    <>
+      <div className="mb-4 mt-2 text-lg font-bold">
+        리뷰<span className="pl-1 text-gray4">{reviewDataLength}</span>
+      </div>
+      {reviewDataLength > 0 && (
+        <div>
+          {toursReviews?.data?.data?.reviewInfos?.content?.map((item: any) => (
+            <ReviewItem
+              key={item.reviewId}
+              reviewId={item.reviewId}
+              authorNickname={item.authorNickname}
+              authorProfileImageUrl={item.authorProfileImageUrl}
+              rating={item.rating}
+              createdTime={item.createdTime}
+              content={item.content}
+              keywords={item.keywords} // keywordId, content, type
+              commentCount={item.commentCount}
+              onClick={() => handleReviewClick(item)}
+              tourItemId={tourItemId}
+              contentTypeId={contentTypeId}
+            />
+          ))}
+        </div>
+      )}
+      {reviewDataLength == 0 && (
+        <div
+          className="flex cursor-pointer flex-col items-center justify-center"
+          onClick={handlePostingReivew}>
+          <div className="mb-2 flex">
+            {Array.from({ length: 5 }, (_, index) => (
+              <StarIcon key={index} size={30} color="none" fill={'#EDEDED'} />
+            ))}
+          </div>
+          <div className="text-sm text-gray3">첫번째 리뷰를 남겨주세요!</div>
+        </div>
+      )}
+      <Modal isOpen={isModalOpen} closeModal={closeModal} />
+    </>
+  );
+}
diff --git a/src/components/DetailSectionBottom/DetailSectionBottom.tsx b/src/components/DetailSectionBottom/DetailSectionBottom.tsx
index 9455ba17..354bf93f 100644
--- a/src/components/DetailSectionBottom/DetailSectionBottom.tsx
+++ b/src/components/DetailSectionBottom/DetailSectionBottom.tsx
@@ -1,11 +1,23 @@
-import { DetailReviewStats } from '.';
+import { DetailReviews, DetailReviewStats } from '.';
+import { useParams } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { getDetailTours } from '@api/tours';
 
-// 담당 컴포넌트들 호출하는 컴포넌트(분업 때문에 페이지 느낌으로 나눠봤습니다), API 호출 컴포넌트,
 export default function DetailSectionBottom() {
-  return (
-    <>
-      <DetailReviewStats />
-      {/* <DetailReview /> */}
-    </>
-  );
+  const params = useParams();
+  const tourItemId = Number(params.id);
+  const { isError, data } = useQuery({
+    queryKey: ['details', tourItemId],
+    queryFn: () => getDetailTours(tourItemId),
+  });
+  if (data) {
+    return (
+      <>
+        <DetailReviewStats />
+        <DetailReviews reviewData={data} />
+      </>
+    );
+  }
+
+  if (isError) console.log('error');
 }
diff --git a/src/components/DetailSectionBottom/ReviewItem.tsx b/src/components/DetailSectionBottom/ReviewItem.tsx
index ae09f613..157f284d 100644
--- a/src/components/DetailSectionBottom/ReviewItem.tsx
+++ b/src/components/DetailSectionBottom/ReviewItem.tsx
@@ -1,5 +1,14 @@
-import { useEffect } from 'react';
-import { StarIcon, ChatIcon } from '@components/common/icons/Icons';
+import { StarIcon, ChatIcon, MoreIcon } from '@components/common/icons/Icons';
+import { useSetRecoilState, useRecoilState } from 'recoil';
+import { isModalOpenState, titleState } from '@recoil/modal';
+import {
+  ratingState,
+  keywordsState,
+  contentState,
+  targetReviewIdState,
+  tourItemIdState,
+  contentTypeIdState,
+} from '@recoil/review';
 
 interface Keyword {
   keywordId: number;
@@ -8,6 +17,7 @@ interface Keyword {
 }
 
 interface ItemProps {
+  reviewId: number;
   authorNickname: string;
   authorProfileImageUrl: string;
   rating: number;
@@ -15,10 +25,14 @@ interface ItemProps {
   content: string;
   keywords: Keyword[]; // keywordId, content, type
   commentCount: number;
+  onClick?: () => void;
+  tourItemId: number;
+  contentTypeId?: number;
 }
 
 const Item: React.FC<ItemProps> = (props: ItemProps) => {
   const {
+    reviewId,
     authorNickname,
     // authorProfileImageUrl,
     rating,
@@ -26,7 +40,32 @@ const Item: React.FC<ItemProps> = (props: ItemProps) => {
     content,
     keywords,
     commentCount,
+    onClick,
+    tourItemId,
+    contentTypeId,
   } = props;
+  const [_, setIsModalOpen] = useRecoilState(isModalOpenState);
+
+  const setRating = useSetRecoilState(ratingState);
+  const setKeywords = useSetRecoilState(keywordsState);
+  const setContent = useSetRecoilState(contentState);
+  const setTitle = useSetRecoilState(titleState);
+  const setTourItemId = useSetRecoilState(tourItemIdState);
+  const setContentTypeId = useSetRecoilState(contentTypeIdState);
+  const setTargetReviewId = useSetRecoilState(targetReviewIdState);
+  const openModal = (title: string, reviewId: number, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setTitle(title);
+    setTourItemId(tourItemId);
+    if (contentTypeId) {
+      setContentTypeId(contentTypeId);
+    }
+    setRating(rating);
+    setKeywords(keywords);
+    setContent(content);
+    setTargetReviewId(reviewId);
+    setIsModalOpen(true);
+  };
 
   const formatCreatedTime = (timeString: string): string => {
     const date = new Date(timeString);
@@ -38,58 +77,63 @@ const Item: React.FC<ItemProps> = (props: ItemProps) => {
 
     return formattedDate;
   };
-  useEffect(() => {
-    console.log('commentCount', commentCount);
-  }, []);
+
   return (
-    <div className="mb-4">
-      <div className=" mb-5 flex items-center">
-        {/* {authorProfileImageUrl} */}
-        <div className="mr-2">
-          <img
-            src={
-              'https://img.freepik.com/free-photo/portrait-of-a-cute-little-girl-in-a-blue-hat-3d-rendering_1142-38897.jpg?w=740&t=st=1704099517~exp=1704100117~hmac=49bf38020d3b7a61618f4db96fa5fdfa20a7c263be7f73b9987054b12f9d5027'
-            }
-            alt="유저 프로필"
-            className="w-12 rounded-full"
-          />
-        </div>
-        <div className=" mr-2 flex flex-col gap-1">
-          <div className="font-bold">{authorNickname}</div>
-          <div className="flex">
-            {Array.from({ length: 5 }, (_, index) => (
-              <StarIcon
-                key={index}
-                size={20}
-                color="none"
-                fill={index < rating ? '#FFEC3E' : '#EDEDED'}
-              />
-            ))}
+    <>
+      <div className="mb-8 cursor-pointer" onClick={onClick}>
+        <div className=" mb-5 flex items-center">
+          {/* {authorProfileImageUrl} */}
+          <div className="mr-2">
+            <img
+              src={
+                'https://img.freepik.com/free-photo/portrait-of-a-cute-little-girl-in-a-blue-hat-3d-rendering_1142-38897.jpg?w=740&t=st=1704099517~exp=1704100117~hmac=49bf38020d3b7a61618f4db96fa5fdfa20a7c263be7f73b9987054b12f9d5027'
+              }
+              alt="유저 프로필"
+              className="w-12 rounded-full"
+            />
+          </div>
+          <div className=" mr-2 flex flex-col gap-1">
+            <div className="font-bold">{authorNickname}</div>
+            <div className="flex">
+              {Array.from({ length: 5 }, (_, index) => (
+                <StarIcon
+                  key={index}
+                  size={20}
+                  color="none"
+                  fill={index < rating ? '#FFEC3E' : '#EDEDED'}
+                />
+              ))}
+            </div>
+          </div>
+          <div className="mb-0.5 mt-auto text-sm text-gray4">
+            {formatCreatedTime(createdTime)}
+          </div>
+          <div
+            className="ml-auto cursor-pointer"
+            onClick={(e) => openModal('내 리뷰', reviewId, e)}>
+            <MoreIcon fill="#888888" color="none" />
           </div>
         </div>
-        <div className="mb-0.5 mt-auto text-sm text-gray3">
-          {formatCreatedTime(createdTime)}
-        </div>
-      </div>
-      <div className=" mb-4 text-gray7">{content}</div>
-      <div className="flex">
+        <div className=" mb-4 text-gray7">{content}</div>
         <div className="flex">
-          {keywords.map((keyword, idx) => {
-            return (
-              <div
-                key={idx}
-                className="rounded-md bg-gray-100 px-2 py-1 text-sm">
-                {keyword.content}
-              </div>
-            );
-          })}
-        </div>
-        <div className="ml-auto flex items-center justify-between">
-          <ChatIcon size={20} />
-          <div className="ml-1">{commentCount}</div>
+          <div className="flex gap-2">
+            {keywords.map((keyword, idx) => {
+              return (
+                <div
+                  key={idx}
+                  className="rounded-md bg-gray1 px-2 py-1 text-sm text-gray6">
+                  {keyword.content}
+                </div>
+              );
+            })}
+          </div>
+          <div className="ml-auto flex items-center justify-between">
+            <ChatIcon size={20} color="#5E5E5E" />
+            <div className="ml-1 text-gray5">{commentCount}</div>
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/src/components/DetailSectionBottom/index.tsx b/src/components/DetailSectionBottom/index.tsx
index d1ca1b41..6513d306 100644
--- a/src/components/DetailSectionBottom/index.tsx
+++ b/src/components/DetailSectionBottom/index.tsx
@@ -1,3 +1,4 @@
 import DetailReviewStats from './DetailReviewStats';
+import DetailReviews from './DetailReviews';
 
-export { DetailReviewStats };
+export { DetailReviews, DetailReviewStats };
diff --git a/src/components/DetailSectionTop/DetailSectionTop.tsx b/src/components/DetailSectionTop/DetailSectionTop.tsx
index 34eb2cbf..d4845979 100644
--- a/src/components/DetailSectionTop/DetailSectionTop.tsx
+++ b/src/components/DetailSectionTop/DetailSectionTop.tsx
@@ -13,26 +13,26 @@ import {
 
 export default function DetailSectionTop() {
   const params = useParams();
-  const tourId = Number(params.id);
+  const tourItemId = Number(params.id);
 
   const detailQuery = useQuery({
-    queryKey: ['details', tourId],
-    queryFn: () => getDetailTours(tourId),
+    queryKey: ['details', tourItemId],
+    queryFn: () => getDetailTours(tourItemId),
   });
 
   const reviewQuery = useQuery({
-    queryKey: ['reviews', tourId],
-    queryFn: () => getToursReviews(tourId),
+    queryKey: ['reviews', tourItemId],
+    queryFn: () => getToursReviews(tourItemId),
   });
 
   if (detailQuery.error || reviewQuery.error) console.log('error - 예외 처리');
 
   return detailQuery.data && reviewQuery.data?.data.data ? (
-    <div className="max-h-full">
+    <div className="mb-[20px] max-h-full">
       <DetailToursInfo infoData={detailQuery.data} />
       <DetailToursRating reviewData={reviewQuery.data.data.data} />
       <DetailToursMap mapData={detailQuery.data} />
-      <DetailToursButtons />
+      <DetailToursButtons reviewData={detailQuery.data} />
     </div>
   ) : null;
 }
diff --git a/src/components/DetailSectionTop/DetailToursButtons.tsx b/src/components/DetailSectionTop/DetailToursButtons.tsx
index 05e79202..bc13a706 100644
--- a/src/components/DetailSectionTop/DetailToursButtons.tsx
+++ b/src/components/DetailSectionTop/DetailToursButtons.tsx
@@ -1,7 +1,27 @@
-import { ReactComponent as PenIcon } from '@assets/images/Pen.svg';
-import { ReactComponent as CalendarIcon } from '@assets/images/Calendar.svg';
+import { PenIcon, CalendarIcon } from '@components/common/icons/Icons';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useEffect } from 'react';
 
-export default function DetailTourButtons() {
+interface reviewProps {
+  reviewData: any;
+}
+
+export default function DetailTourButtons({ reviewData }: reviewProps) {
+  const { title, contentTypeId } = reviewData;
+  const params = useParams();
+  const tourItemId = Number(params.id);
+  const navigate = useNavigate();
+
+  const handlePostingReivew = () => {
+    navigate(`/reviewPosting/${tourItemId}`, {
+      state: { title, contentTypeId },
+    });
+  };
+  
+  useEffect(() => {
+    console.log('contentTypeId', contentTypeId);
+  }, [contentTypeId]);
+  
   return (
     <div className="mt-2 flex w-full items-center justify-between gap-3 py-2.5">
       <button className="flex h-[53px] w-1/2 items-center justify-center gap-2 rounded-lg border border-solid border-gray3 p-2">
@@ -10,7 +30,9 @@ export default function DetailTourButtons() {
       </button>
       <button className="flex h-[53px] w-1/2 items-center justify-center gap-2 rounded-lg border border-solid border-gray3 p-2">
         <PenIcon />
-        <span className="text-sm">리뷰 쓰기</span>
+        <span className="text-sm" onClick={handlePostingReivew}>
+          리뷰 쓰기
+        </span>
       </button>
     </div>
   );
diff --git a/src/components/DetailSectionTop/DetailToursInfo.tsx b/src/components/DetailSectionTop/DetailToursInfo.tsx
index 4c906c1a..b48a5343 100644
--- a/src/components/DetailSectionTop/DetailToursInfo.tsx
+++ b/src/components/DetailSectionTop/DetailToursInfo.tsx
@@ -1,4 +1,4 @@
-import { ReactComponent as HeartIcon } from '@assets/images/Heart.svg';
+import { HeartIcon } from '@components/common/icons/Icons';
 
 interface DetailToursInfoProps {
   infoData: tourDetail;
@@ -17,14 +17,16 @@ export default function DetailToursInfo({ infoData }: DetailToursInfoProps) {
         />
       </div>
       <div className="mt-1 flex w-full items-center justify-between py-2">
-        <h1 className="text-2xl font-bold">{title}</h1>
+        <h1 className="font-['Pretendard'] text-2xl font-bold text-black ">
+          {title}
+        </h1>
         {liked ? (
           <div className="top-75 h-[24px] w-[24px] cursor-pointer">
-            <HeartIcon fill="red" />
+            <HeartIcon fill="#FF2167" color="none" />
           </div>
         ) : (
           <div className="top-75 h-[24px] w-[24px] cursor-pointer">
-            <HeartIcon fill="#D7D7D7" />
+            <HeartIcon fill="#D7D7D7" color="none" />
           </div>
         )}
       </div>
diff --git a/src/components/DetailSectionTop/DetailToursMap.tsx b/src/components/DetailSectionTop/DetailToursMap.tsx
index 90719757..2c1de11f 100644
--- a/src/components/DetailSectionTop/DetailToursMap.tsx
+++ b/src/components/DetailSectionTop/DetailToursMap.tsx
@@ -1,9 +1,9 @@
-import { ReactComponent as MapIcon } from '@assets/images/Map.svg';
-import { ReactComponent as CheckIcon } from '@assets/images/Check.svg';
-import { ReactComponent as PhoneIcon } from '@assets/images/Phone.svg';
-
-import { Map, MapMarker } from 'react-kakao-maps-sdk';
 import { useState } from 'react';
+import { Map, MapMarker } from 'react-kakao-maps-sdk';
+import { useKakaoLoader } from 'react-kakao-maps-sdk';
+import { PhoneIcon, MapIcon, CheckIcon } from '@components/common/icons/Icons';
+
+const VITE_KAKAO_MAP_API_KEY = import.meta.env.VITE_KAKAO_MAP_API_KEY;
 
 interface DetailToursMapProps {
   mapData: tourDetail;
@@ -12,6 +12,11 @@ interface DetailToursMapProps {
 export default function DetailToursMap({ mapData }: DetailToursMapProps) {
   const { fullAddress, longitude, latitude, tel } = mapData;
   const [isMapVisible, setIsMapVisible] = useState<boolean>(false);
+  const [isAddressVisible, setIsAddressVisible] = useState<boolean>(false);
+
+  const [_] = useKakaoLoader({
+    appkey: VITE_KAKAO_MAP_API_KEY,
+  });
 
   const MapStyle = {
     width: '100%',
@@ -27,15 +32,27 @@ export default function DetailToursMap({ mapData }: DetailToursMapProps) {
 
   return (
     <div className="mt-4 w-full">
-      <div className="flex items-center justify-between gap-2.5">
-        <div className="flex">
-          <MapIcon />
-          <span className="ml-1 text-sm">{fullAddress}</span>
+      <div className="relative flex w-full items-center justify-between ">
+        <div
+          className="relative flex flex-shrink-0 items-center justify-start "
+          onClick={() => setIsAddressVisible(!isAddressVisible)}>
+          <MapIcon size={20} fill="#888888" color="none" />
+          {!isAddressVisible ? (
+            <p className="max-w-[310px] flex-shrink-0 flex-grow-0 overflow-hidden overflow-ellipsis whitespace-nowrap text-left text-sm text-[#1e1e1e]">
+              {fullAddress}
+            </p>
+          ) : (
+            <p className="max-w-[310px] flex-shrink-0 flex-grow-0 overflow-hidden text-left text-sm text-[#1e1e1e]">
+              {fullAddress}
+            </p>
+          )}
         </div>
-        <CheckIcon className="cursor-pointer" onClick={closeMap} />
+
+        <CheckIcon onClick={closeMap} size={17} className="cursor-pointer" />
       </div>
       <div className="flex justify-center">
         <Map
+          key={VITE_KAKAO_MAP_API_KEY}
           center={{ lat: Number(latitude), lng: Number(longitude) }}
           style={MapStyle}
           level={4}
@@ -60,9 +77,16 @@ export default function DetailToursMap({ mapData }: DetailToursMapProps) {
             }}></MapMarker>
         </Map>
       </div>
-      <div className="flex gap-1">
-        <PhoneIcon />
-        <span className="text-sm">{tel}</span>
+      <div className="relative flex w-full items-center justify-start gap-[5px]">
+        <PhoneIcon size={17} />
+        <div className="relative flex w-[309px] flex-shrink-0 flex-grow-0 items-center justify-between">
+          <p className="flex-shrink-0 flex-grow-0 text-left text-sm text-[#1e1e1e]">
+            {tel ? tel : '전화번호가 없어요'}
+          </p>
+          <div className="h-4 w-4 flex-shrink-0 flex-grow-0">
+            <div className="absolute left-[292.5px] top-0 h-4 w-4"></div>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/Review/CommentItem.tsx b/src/components/Review/CommentItem.tsx
new file mode 100644
index 00000000..43f43686
--- /dev/null
+++ b/src/components/Review/CommentItem.tsx
@@ -0,0 +1,123 @@
+import { MoreIcon } from '@components/common/icons/Icons';
+import { useSetRecoilState, useRecoilState } from 'recoil';
+import { isModalOpenState, titleState } from '@recoil/modal';
+import {
+  commentState,
+  targetCommentIdState,
+  isModifyingCommentState,
+} from '@recoil/review';
+import { ChangeEvent } from 'react';
+import { putComments } from '@api/comments';
+
+interface ItemProps {
+  commentId: number;
+  authorNickname: string;
+  authorProfileImageUrl: string;
+  createdTime: any;
+  content: string;
+  onClick?: () => void;
+}
+
+const CommentItem: React.FC<ItemProps> = (props: ItemProps) => {
+  const {
+    commentId,
+    authorNickname,
+    // authorProfileImageUrl,
+    createdTime,
+    content,
+    // onClick,
+  } = props;
+  const [_, setIsModalOpen] = useRecoilState(isModalOpenState);
+  const setTitle = useSetRecoilState(titleState);
+  const [targetCommentId, setTargetCommentId] =
+    useRecoilState(targetCommentIdState);
+  const [comment, setComment] = useRecoilState(commentState);
+  const [isModifyingComment, setIsModifyingComment] = useRecoilState(
+    isModifyingCommentState,
+  );
+
+  const openModal = (title: string, commentId: number) => {
+    setTitle(title);
+    setTargetCommentId(commentId);
+    setComment(content);
+    setIsModalOpen(true);
+  };
+
+  const formatCreatedTime = (timeString: string): string => {
+    const date = new Date(timeString);
+    const formattedDate = new Intl.DateTimeFormat('ko-KR', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+    }).format(date);
+
+    return formattedDate;
+  };
+
+  const handleTextChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const inputText = event.target.value;
+    setComment(inputText);
+  };
+
+  const cancleCommentEdit = () => {
+    setIsModifyingComment(false);
+  };
+  const handeCommentEdit = () => {
+    putComments(comment, targetCommentId);
+    setIsModifyingComment(false);
+  };
+
+  return (
+    <div className="mb-4 border-t border-solid border-gray-300 pt-4">
+      <div className=" mb-2 flex items-center">
+        {/* {authorProfileImageUrl} */}
+        <div className="mr-2">
+          <img
+            src={
+              'https://img.freepik.com/free-photo/portrait-of-a-cute-little-girl-in-a-blue-hat-3d-rendering_1142-38897.jpg?w=740&t=st=1704099517~exp=1704100117~hmac=49bf38020d3b7a61618f4db96fa5fdfa20a7c263be7f73b9987054b12f9d5027'
+            }
+            alt="유저 프로필"
+            className="w-10 rounded-full"
+          />
+        </div>
+        <div className=" flex flex-col justify-center gap-1">
+          <div className="text-sm font-bold">{authorNickname}</div>
+          <div className="text-xs text-gray4">
+            {formatCreatedTime(createdTime)}
+          </div>
+        </div>
+        <div
+          className="ml-auto cursor-pointer"
+          onClick={() => openModal('내 댓글', commentId)}>
+          <MoreIcon fill="#888888" color="none" />
+        </div>
+      </div>
+      {isModifyingComment && commentId == targetCommentId && (
+        <div className="flex items-center">
+          <input
+            className="ml-11 mr-2 rounded-sm  border border-solid border-[#29ddf6] px-1 py-0.5 text-sm outline-none"
+            onChange={handleTextChange}
+            value={comment}
+          />
+          <div className="ml-auto mr-2 flex items-center gap-2">
+            <button
+              onClick={cancleCommentEdit}
+              className=" rounded-sm border border-solid border-gray4 px-1 py-0.5 text-sm font-bold">
+              취소
+            </button>
+            <button
+              onClick={handeCommentEdit}
+              className="rounded-sm border border-solid border-gray4 bg-[#29ddf6] px-1 py-0.5 text-sm font-bold text-white">
+              완료
+            </button>
+          </div>
+        </div>
+      )}
+      {!isModifyingComment && (
+        <div className="mb-4 ml-11 w-60 text-sm text-gray7">{content}</div>
+      )}
+    </div>
+  );
+};
+
+export default CommentItem;
diff --git a/src/components/Review/DetailReview.tsx b/src/components/Review/DetailReview.tsx
new file mode 100644
index 00000000..f4c32b90
--- /dev/null
+++ b/src/components/Review/DetailReview.tsx
@@ -0,0 +1,26 @@
+import ReviewItem from '@components/DetailSectionBottom/ReviewItem';
+
+import { useLocation } from 'react-router-dom';
+
+export default function DetailReview() {
+  const location = useLocation();
+  const { state } = location;
+  const { item, tourItemId } = state;
+
+  return (
+    <div className="mb-6 ">
+      <ReviewItem
+        key={item.reviewId}
+        reviewId={item.reviewId}
+        authorNickname={item.authorNickname}
+        authorProfileImageUrl={item.authorProfileImageUrl}
+        rating={item.rating}
+        createdTime={item.createdTime}
+        content={item.content}
+        keywords={item.keywords} // keywordId, content, type
+        commentCount={item.commentCount}
+        tourItemId={tourItemId}
+      />
+    </div>
+  );
+}
diff --git a/src/components/Review/InputComment.tsx b/src/components/Review/InputComment.tsx
new file mode 100644
index 00000000..f53a9762
--- /dev/null
+++ b/src/components/Review/InputComment.tsx
@@ -0,0 +1,51 @@
+import { KeyboardEvent, ChangeEvent, useState } from 'react';
+import { postComments } from '@api/comments';
+import { useParams } from 'react-router-dom';
+
+interface InputCommentProps {
+  classNameName?: string;
+}
+
+export const InputComment: React.FC<InputCommentProps> = () => {
+  const [comment, setComment] = useState('');
+  const params = useParams();
+  const reviewId = Number(params.id);
+
+  const handleTextChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const inputText = event.target.value;
+    setComment(inputText);
+  };
+
+  const handleSubmit = () => {
+    postComments(comment, reviewId);
+    setComment('');
+  };
+  const handleKeyPress = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      handleSubmit();
+    }
+  };
+  return (
+    <>
+      <div className="bottom-4 flex rounded-md border border-solid border-[#d7d7d7] px-2 py-1">
+        <div className="mr-0.5 text-sm font-bold text-[#29ddf6]">ㅣ</div>
+        <div className="flex  w-full">
+          <input
+            type="text"
+            placeholder="댓글을 입력하세요"
+            className=" w-full max-w-full text-sm placeholder-[#d7d7d7]  outline-none"
+            onChange={handleTextChange}
+            onKeyPress={handleKeyPress}
+          />
+        </div>
+        <div className="ml-auto min-w-[2rem] ">
+          <button
+            onClick={handleSubmit}
+            className=" text-sm font-bold text-[#29ddf6]">
+            등록
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/src/components/Review/Review.tsx b/src/components/Review/Review.tsx
index 6114bb50..e8f4c3f7 100644
--- a/src/components/Review/Review.tsx
+++ b/src/components/Review/Review.tsx
@@ -2,14 +2,60 @@ import ReviewButton from './ReviewButton';
 import ReviewKeyword from './ReviewKeyword';
 import ReviewPosting from './ReviewPosting';
 import ReviewRating from './ReviewRating';
+import { postReview, putReview } from '@api/review';
+import {
+  ratingState,
+  keywordsState,
+  contentState,
+  isModifyingReviewState,
+  targetReviewIdState,
+} from '@recoil/review';
+import { isModalOpenState } from '@recoil/modal';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { useParams, useNavigate } from 'react-router-dom';
 
 export default function Review() {
+  const params = useParams();
+  const navigate = useNavigate();
+  const tourItemId = Number(params.id);
+  const [rating] = useRecoilState(ratingState);
+  const [keywords] = useRecoilState(keywordsState);
+  const [content] = useRecoilState(contentState);
+  const isModifyingReview = useRecoilValue(isModifyingReviewState);
+  const targetReviewId = useRecoilValue(targetReviewIdState);
+  const [_, setIsModalOpen] = useRecoilState(isModalOpenState);
+
+  const handlePostReview = async () => {
+    try {
+      const reviewData = {
+        tourItemId: tourItemId,
+        rating: rating,
+        keywords: keywords,
+        content: content,
+      };
+      if (isModifyingReview) {
+        const response = await putReview(reviewData, targetReviewId);
+        console.log('리뷰가 성공적으로 수정되었습니다.', response.data);
+      } else {
+        const response = await postReview(reviewData);
+        console.log('리뷰가 성공적으로 등록되었습니다.', response.data);
+      }
+      setIsModalOpen(false);
+      navigate(`/detail/${tourItemId}`);
+    } catch (error) {
+      console.error(
+        `리뷰 ${isModifyingReview ? '수정' : '등록'} 중 오류 발생:`,
+        error,
+      );
+    }
+  };
+
   return (
     <>
       <ReviewRating />
       <ReviewKeyword />
       <ReviewPosting />
-      <ReviewButton />
+      <ReviewButton onClick={handlePostReview} />
     </>
   );
 }
diff --git a/src/components/Review/ReviewButton.tsx b/src/components/Review/ReviewButton.tsx
index eaf9c5a4..3b9cde51 100644
--- a/src/components/Review/ReviewButton.tsx
+++ b/src/components/Review/ReviewButton.tsx
@@ -1,5 +1,50 @@
 import { ButtonPrimary } from '@components/common/button/Button';
+import { useState, useEffect } from 'react';
+import { contentState, keywordsState } from '@recoil/review';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
-export default function ReviewButton() {
-  return <ButtonPrimary onClick={() => {}}>완료</ButtonPrimary>;
+interface ButtonProps {
+  onClick: () => void;
 }
+
+const ReviewButton = (props: ButtonProps) => {
+  const { onClick } = props;
+  const [content] = useRecoilState(contentState);
+  const keywords = useRecoilValue(keywordsState);
+  const [isContentValid, setIsContentValid] = useState(false);
+  const [isKeywordsValid, setIsKeywordsValid] = useState(false);
+
+  useEffect(() => {
+    if (content.length >= 10) {
+      setIsContentValid(true);
+    } else if (content.length < 10) {
+      setIsContentValid(false);
+    }
+  }, [content]);
+
+  useEffect(() => {
+    if (keywords.length > 0) {
+      setIsKeywordsValid(true);
+    } else if (keywords.length <= 0) {
+      setIsKeywordsValid(false);
+    }
+  }, [keywords]);
+
+  return (
+    <>
+      {isContentValid === false && isKeywordsValid === false && (
+        <div className="mb-2 flex items-center justify-center text-xs text-[#FF0F00]">
+          키워드를 선택하거나 텍스트를 10자 이상 입력해주세요
+        </div>
+      )}
+
+      <ButtonPrimary
+        onClick={onClick}
+        disabled={isContentValid === false && isKeywordsValid === false}>
+        완료
+      </ButtonPrimary>
+    </>
+  );
+};
+
+export default ReviewButton;
diff --git a/src/components/Review/ReviewComments.tsx b/src/components/Review/ReviewComments.tsx
new file mode 100644
index 00000000..de67591e
--- /dev/null
+++ b/src/components/Review/ReviewComments.tsx
@@ -0,0 +1,55 @@
+import { getReviewComments } from '@api/review';
+import { useQuery } from '@tanstack/react-query';
+import { useParams } from 'react-router-dom';
+import CommentItem from './CommentItem';
+import { useRecoilState } from 'recoil';
+import { isModalOpenState } from '@recoil/modal';
+import { Modal } from '@components/common/modal';
+// import { targetCommentIdState } from '@recoil/review';
+
+export default function ReviewComments() {
+  const params = useParams();
+  const reviewId = Number(params.id);
+  const [isModalOpen, setIsModalOpen] = useRecoilState(isModalOpenState);
+  // const setTitle = useSetRecoilState(titleState);
+  // const setTargetCommentId = useSetRecoilState(targetCommentIdState);
+
+  const { data: reviewComments } = useQuery({
+    queryKey: ['reviewComments'],
+    queryFn: () => getReviewComments(reviewId),
+  });
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <>
+      <div className="mb-4 text-xs">
+        댓글
+        <span className="pl-0.5 font-bold">
+          {reviewComments?.data?.data?.comments?.totalElements}
+        </span>
+      </div>
+      {reviewComments?.data?.data?.comments?.totalElements == 0 && (
+        <div className="mb-4 flex flex-col items-center justify-center text-sm text-gray4">
+          <div>댓글이 없습니다. </div>
+          <div>첫 댓글을 작성해보세요!</div>
+        </div>
+      )}
+      {reviewComments?.data?.data?.comments?.content?.map((item: any) => {
+        return (
+          <CommentItem
+            key={item.commentId}
+            commentId={item.commentId}
+            authorNickname={item.authorNickname}
+            authorProfileImageUrl={item.authorProfileImageUrl}
+            createdTime={item.createdTime}
+            content={item.content}
+          />
+        );
+      })}
+      <Modal isOpen={isModalOpen} closeModal={closeModal} />
+    </>
+  );
+}
diff --git a/src/components/Review/ReviewKeyword.tsx b/src/components/Review/ReviewKeyword.tsx
index 79bb0f5e..49197347 100644
--- a/src/components/Review/ReviewKeyword.tsx
+++ b/src/components/Review/ReviewKeyword.tsx
@@ -1,47 +1,88 @@
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { getReviewKeywords } from '@api/review';
+import { useQuery } from '@tanstack/react-query';
+import { useRecoilState } from 'recoil';
+import { keywordsState } from '@recoil/review';
+
+interface Keyword {
+  keywordId: number;
+  content: string;
+}
+
 export default function ReviewKeyword() {
+  const location = useLocation();
+  const { state } = location;
+  const { contentTypeId } = state;
+  const [keywordType, setKeywordType] = useState('');
+  const [selectedKeywords, setSelectedKeywords] = useRecoilState(keywordsState);
+
+  useEffect(() => {
+    if (contentTypeId === 12) {
+      setKeywordType('ATTRACTION ');
+    } else if (contentTypeId === 32) {
+      setKeywordType('ACCOMMODATION');
+    } else if (contentTypeId === 39) {
+      setKeywordType('DINING ');
+    }
+  }, [contentTypeId]);
+
+  const { data: reviewKeywords } = useQuery({
+    queryKey: ['reviewKeywords', keywordType],
+    queryFn: () => getReviewKeywords(keywordType),
+  });
+
+  const handleKeywordClick = (keyword: Keyword) => {
+    const isAlreadySelected = selectedKeywords.some(
+      (selectedKeyword) => selectedKeyword.keywordId === keyword.keywordId,
+    );
+    if (isAlreadySelected) {
+      setSelectedKeywords((prevSelectedKeywords) =>
+        prevSelectedKeywords.filter(
+          (selectedKeyword) => selectedKeyword.keywordId !== keyword.keywordId,
+        ),
+      );
+    } else {
+      setSelectedKeywords((prevSelectedKeywords) => [
+        ...prevSelectedKeywords,
+        { keywordId: keyword.keywordId, content: keyword.content },
+      ]);
+    }
+  };
+
+  // 5x2 형태로 배치하기 위해 행(row)과 열(column)을 계산
+  // const rows = 5;
+  const columns = 2;
+
   return (
-    <div className="mb-10">
-      <div className="mb-5 font-bold">어떤 점이 좋았나요?</div>
-      <div className="text-xs">
-        <div className="mb-4 flex">
-          <div className="mr-2 cursor-pointer rounded-md bg-gray-100 px-2 py-1 text-gray5">
-            깨끗해요
-          </div>
-          <div className="mr-2 cursor-pointer rounded-md bg-gray-100 px-2 py-1 text-gray5">
-            친절해요
-          </div>
-          <div className="mr-2 cursor-pointer rounded-md bg-gray-100 px-2 py-1 text-gray5">
-            뷰가 좋아요
-          </div>
-        </div>
-        <div className="mb-4 flex">
-          <div className="mr-2 cursor-pointer rounded-md bg-gray-100 px-2 py-1 text-gray5">
-            침구가 좋아요
-          </div>
-          <div className="mr-2 cursor-pointer rounded-md bg-gray-100 px-2 py-1 text-gray5">
-            주차하기 편해요
-          </div>
-          <div className="mr-2 cursor-pointer rounded-md bg-gray-100 px-2 py-1 text-gray5">
-            냉난방이 잘돼요
-          </div>
-        </div>
-        <div className="mb-4 flex">
-          <div className="mr-2 cursor-pointer rounded-md bg-gray-100 px-2 py-1 text-gray5">
-            대중교통이 편해요
-          </div>
-          <div className="mr-2 cursor-pointer rounded-md bg-gray-100 px-2 py-1 text-gray5">
-            호캉스하기 좋아요
-          </div>
-        </div>
-        <div className="mb-4 flex">
-          <div className="mr-2 cursor-pointer rounded-md bg-gray-100 px-2 py-1 text-gray5">
-            조식이 맛있어요
-          </div>
-          <div className="mr-2 cursor-pointer rounded-md bg-gray-100 px-2 py-1 text-gray5">
-            사진 찍기 좋아요
-          </div>
-        </div>
+    <>
+      <div className="mb-5 text-lg font-bold">어떤 점이 좋았나요? </div>
+      <div className="mb-10 grid grid-cols-2 gap-2 font-bold">
+        {reviewKeywords?.data?.data?.keywords?.map(
+          (keyword: any, index: number) => {
+            const row = Math.floor(index / columns) + 1;
+            const col = (index % columns) + 1;
+
+            const isSelected = selectedKeywords.some(
+              (selectedKeyword) =>
+                selectedKeyword.keywordId === keyword.keywordId,
+            );
+
+            return (
+              <button
+                className={`flex items-center justify-center row-${row} col-${col} h-[40px] cursor-pointer rounded-md ${
+                  isSelected
+                    ? 'bg-main1 text-white'
+                    : 'bg-gray-100 text-gray-500'
+                } px-2 py-1`}
+                key={keyword.keywordId}
+                onClick={() => handleKeywordClick(keyword)}>
+                {keyword.content}
+              </button>
+            );
+          },
+        )}
       </div>
-    </div>
+    </>
   );
 }
diff --git a/src/components/Review/ReviewPosting.tsx b/src/components/Review/ReviewPosting.tsx
index e0a37d4a..5f2ef5fb 100644
--- a/src/components/Review/ReviewPosting.tsx
+++ b/src/components/Review/ReviewPosting.tsx
@@ -1,25 +1,28 @@
-import { useState, ChangeEvent } from 'react';
+import { ChangeEvent } from 'react';
+import { contentState } from '@recoil/review';
+import { useRecoilState } from 'recoil';
 
 export default function ReviewPosting() {
-  const [textLength, setTextLength] = useState(0);
+  const [content, setContent] = useRecoilState(contentState);
 
   const handleTextChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
     const inputText = event.target.value;
-    setTextLength(inputText.length);
+    setContent(inputText);
   };
 
   return (
     <div className="flex flex-col">
-      <div className="mb-5 font-bold">리뷰를 작성해주세요</div>
+      <div className="mb-5 text-lg font-bold">리뷰를 작성해주세요</div>
       <div className="mb-1">
         <textarea
-          className="h-32 w-full rounded-md border p-2 text-sm"
+          className="h-[152px] w-full rounded-md border p-2 text-sm"
           placeholder="직접 경험한 솔직한 리뷰를 남겨주세요"
           onChange={handleTextChange}
+          value={content}
         />
       </div>
-      <div className="mb-3 ml-auto text-sm">
-        {textLength} <span className="text-gray4">/ 400</span>
+      <div className="mb-2 ml-auto text-sm">
+        {content.length} <span className="text-gray4">/ 400</span>
       </div>
     </div>
   );
diff --git a/src/components/Review/ReviewRating.tsx b/src/components/Review/ReviewRating.tsx
index 06da11cf..ec41826b 100644
--- a/src/components/Review/ReviewRating.tsx
+++ b/src/components/Review/ReviewRating.tsx
@@ -1,27 +1,32 @@
 import { useState } from 'react';
 import { StarIcon } from '@components/common/icons/Icons';
+import { useLocation } from 'react-router-dom';
+import { ratingState } from '@recoil/review';
+import { useRecoilState } from 'recoil';
 
 const ReviewRating = () => {
-  const [rating, setRating] = useState(0);
+  const [rating, setRating] = useRecoilState(ratingState);
   const [isHalfClicked, setIsHalfClicked] = useState(false);
+  const location = useLocation();
+  const { state } = location;
+  const { title } = state;
 
   const handleStarClick = (index: number) => {
     const newRating = index + 1;
-    setRating((prevRating) => {
+    setRating((prevRating: any) => {
       const updatedIsHalfClicked =
         prevRating === newRating ? !isHalfClicked : false;
       setIsHalfClicked(updatedIsHalfClicked);
       // set함수가 비동기적이어서 업데이트된 값이 아래의 로직에 바로 반영되지 않기 때문에 updatedIsHalfClicked라는 변수를 통해 직접 계산하도록 설정
       const updatedRating = updatedIsHalfClicked ? prevRating - 0.5 : newRating;
-      console.log('updatedRating', updatedRating);
       return updatedRating;
     });
   };
 
   return (
     <div className="mb-6 flex flex-col items-center justify-center">
-      <div className="mb-4 font-bold">(호텔 이름)</div>
-      <div className="flex">
+      <div className="mb-1 text-xl font-bold">{title}</div>
+      <button className="flex gap-1">
         {Array.from({ length: 5 }, (_, index) => (
           <StarIcon
             key={index}
@@ -33,7 +38,7 @@ const ReviewRating = () => {
             className="cursor-pointer"
           />
         ))}
-      </div>
+      </button>
     </div>
   );
 };
diff --git a/src/components/Review/index.tsx b/src/components/Review/index.tsx
index 6899e623..c79aaf72 100644
--- a/src/components/Review/index.tsx
+++ b/src/components/Review/index.tsx
@@ -2,5 +2,16 @@ import ReviewButton from './ReviewButton';
 import ReviewKeyword from './ReviewKeyword';
 import ReviewPosting from './ReviewPosting';
 import ReviewRating from './ReviewRating';
+import ReviewComments from './ReviewComments';
+import DetailReview from './DetailReview';
+import { InputComment } from './InputComment';
 
-export { ReviewButton, ReviewKeyword, ReviewPosting, ReviewRating };
+export {
+  ReviewButton,
+  ReviewKeyword,
+  ReviewPosting,
+  ReviewRating,
+  ReviewComments,
+  DetailReview,
+  InputComment,
+};
diff --git a/src/components/Tours/CreateTripButton.tsx b/src/components/Tours/CreateTripButton.tsx
new file mode 100644
index 00000000..d00bc9d9
--- /dev/null
+++ b/src/components/Tours/CreateTripButton.tsx
@@ -0,0 +1,11 @@
+import { PlusIcon } from '@components/common/icons/Icons';
+
+const CreateTripButton = () => {
+  return (
+    <div className="sticky bottom-20 z-[100] ml-auto mr-2 h-[51px] w-[51px] cursor-pointer">
+      <PlusIcon size={51} color="white" />
+    </div>
+  );
+};
+
+export default CreateTripButton;
diff --git a/src/components/Tours/ToursItem.tsx b/src/components/Tours/ToursItem.tsx
index bd7b7781..df049fb2 100644
--- a/src/components/Tours/ToursItem.tsx
+++ b/src/components/Tours/ToursItem.tsx
@@ -19,13 +19,13 @@ const ToursItem = ({ tour }: { tour: TourType }) => {
     <div
       className="cursor-pointer flex-col"
       onClick={() => navigate(`detail/${id}`)}>
-      <div>
+      <div className="relative">
         <img
-          className="rounded-1 h-[134px] max-h-[134px] w-[160px] rounded-[16px] object-cover"
+          className="rounded-1 h-[134px] max-h-[134px] w-[178px] rounded-[16px] object-cover"
           src={smallThumbnailUrl}
           alt="여행지 이미지"
         />
-        <div className="relative left-32 top-[-125px] z-10">
+        <div className="absolute right-[8px] top-[8px] z-10 w-[24px]">
           <HeartIcon
             size={24}
             color={liked ? '#ff2167' : '#ffffff'}
@@ -33,20 +33,28 @@ const ToursItem = ({ tour }: { tour: TourType }) => {
           />
         </div>
       </div>
-      <p className="headline1 ml-[1px] mt-[-14px] overflow-hidden text-ellipsis whitespace-nowrap leading-normal">
+      <p className="headline1 mt-2 overflow-hidden text-clip whitespace-nowrap px-[2px] leading-normal">
         {title}
       </p>
-      <div className="caption2 flex items-center leading-normal text-gray4">
+      <div className="caption1 ml-[2px] flex items-start leading-normal text-gray4">
         <div className="mr-[5px] flex items-center">
-          <StarIcon size={16} color="#FFEC3E" fill="#FFEC3E" />
+          <div className="mb-[2px]">
+            <StarIcon size={16} color="#FFEC3E" fill="#FFEC3E" />
+          </div>
           <div className="flex items-center pt-[1.5px]">
-            <span className="ml-1 mr-0.5 font-bold">{ratingAverage}</span>
-            <span>({reviewCount})</span>
+            <span className="ml-1 mr-0.5 font-bold">
+              {(Math.ceil(ratingAverage * 100) / 100).toFixed(1)}
+            </span>
+            <span>({reviewCount.toLocaleString()})</span>
           </div>
         </div>
         <div className="flex items-center">
-          <HeartIcon size={16} color="#FF2167" fill="#FF2167" />
-          <span className="ml-0.5 pt-[1.5px]">{likedCount}</span>
+          <div className="mb-[2px]">
+            <HeartIcon size={16} color="#FF2167" fill="#FF2167" />
+          </div>
+          <span className="ml-0.5 mt-[1.5px]">
+            {likedCount.toLocaleString()}
+          </span>
         </div>
       </div>
     </div>
diff --git a/src/components/Tours/ToursList.tsx b/src/components/Tours/ToursList.tsx
index 543a9a16..10a2f6cc 100644
--- a/src/components/Tours/ToursList.tsx
+++ b/src/components/Tours/ToursList.tsx
@@ -1,24 +1,51 @@
 import { TourType, ToursListProps } from '@/@types/tours.types';
 import ToursItem from './ToursItem';
 import { getTours } from '@api/tours';
-import { useQuery } from '@tanstack/react-query';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import InfiniteScroll from 'react-infinite-scroller';
+import React from 'react';
 
 const ToursList = ({ selectedRegion }: ToursListProps) => {
-  const toursQuery = useQuery({
+  const { fetchNextPage, hasNextPage, data, error } = useInfiniteQuery({
     queryKey: ['tours', selectedRegion],
-    queryFn: () => getTours(selectedRegion, 0, 30),
+    queryFn: ({ pageParam = 0 }) => getTours(selectedRegion, pageParam, 10),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage) => {
+      const currentPage = lastPage?.data.data.pageable.pageNumber;
+      const totalPages = lastPage?.data.data.totalPages;
+
+      if (currentPage < totalPages - 1) {
+        return currentPage + 1;
+      }
+
+      return undefined;
+    },
   });
 
-  if (toursQuery.error) {
-    console.log('error - 예외 처리');
+  if (error) {
+    return <div>데이터를 불러오는 중 오류가 발생했습니다.</div>;
   }
 
   return (
-    <div className="no-scrollbar grid grid-cols-2 gap-[15px] overflow-y-scroll">
-      {toursQuery.data?.data.data.content.map((tour: TourType) => {
-        return <ToursItem key={tour.id} tour={tour} />;
-      })}
-    </div>
+    <InfiniteScroll
+      pageStart={0}
+      loadMore={() => fetchNextPage()}
+      hasMore={hasNextPage}
+      loader={
+        <div className="loader" key={0}>
+          Loading ...
+        </div>
+      }>
+      <div className="no-scrollbar grid grid-cols-2 gap-[15px] overflow-y-scroll">
+        {data?.pages.map((group, index) => (
+          <React.Fragment key={index}>
+            {group?.data.data.content.map((tour: TourType) => (
+              <ToursItem key={tour.id} tour={tour} />
+            ))}
+          </React.Fragment>
+        ))}
+      </div>
+    </InfiniteScroll>
   );
 };
 
diff --git a/src/components/Tours/ToursSectionTop.tsx b/src/components/Tours/ToursSectionTop.tsx
index 0bb500af..52786fbc 100644
--- a/src/components/Tours/ToursSectionTop.tsx
+++ b/src/components/Tours/ToursSectionTop.tsx
@@ -6,7 +6,7 @@ const ToursSectionTop = () => {
   const [selectedRegion, setSelectedRegion] = useState<string>('전체');
 
   return (
-    <>
+    <div>
       <div className="sticky top-0 z-50 bg-white py-0.5">
         <h1 className="title2 pt-3">지금 인기여행지</h1>
         <ToursCategory
@@ -14,9 +14,8 @@ const ToursSectionTop = () => {
           setSelectedRegion={setSelectedRegion}
         />
       </div>
-
       <ToursList selectedRegion={selectedRegion} />
-    </>
+    </div>
   );
 };
 
diff --git a/src/components/common/back/Back.tsx b/src/components/common/back/Back.tsx
new file mode 100644
index 00000000..aea4e544
--- /dev/null
+++ b/src/components/common/back/Back.tsx
@@ -0,0 +1,14 @@
+import { useNavigate } from 'react-router-dom';
+import { LeftIcon } from '../icons/Icons';
+
+const Back = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="flex h-10 items-center" onClick={() => navigate(-1)}>
+      <LeftIcon />
+    </div>
+  );
+};
+
+export default Back;
diff --git a/src/components/common/button/Button.tsx b/src/components/common/button/Button.tsx
index b19d31df..8fcaa43a 100644
--- a/src/components/common/button/Button.tsx
+++ b/src/components/common/button/Button.tsx
@@ -1,25 +1,31 @@
 import { ReactNode } from 'react';
 interface ButtonProps {
-  onClick: () => void;
+  onClick?: () => void;
   children: ReactNode;
   className?: string;
+  disabled?: boolean;
 }
 
 export const ButtonWhite: React.FC<ButtonProps> = ({ onClick, children }) => {
   return (
     <button
       onClick={onClick}
-      className="btn-base border-gray3 rounded-lg border border-solid text-sm">
+      className="btn-base rounded-lg border border-solid border-gray3 text-sm">
       {children}
     </button>
   );
 };
 
-export const ButtonPrimary: React.FC<ButtonProps> = ({ onClick, children }) => {
+export const ButtonPrimary: React.FC<ButtonProps> = ({
+  onClick,
+  children,
+  disabled,
+}) => {
   return (
     <button
       onClick={onClick}
-      className="btn-base disabled:bg-gray3 bg-primary text-lg font-bold text-white disabled:cursor-not-allowed">
+      className="btn-base bg-primary text-lg font-bold text-white disabled:cursor-not-allowed disabled:bg-gray3"
+      disabled={disabled}>
       {children}
     </button>
   );
diff --git a/src/components/common/button/SubmitBtn.tsx b/src/components/common/button/SubmitBtn.tsx
new file mode 100644
index 00000000..e82eef41
--- /dev/null
+++ b/src/components/common/button/SubmitBtn.tsx
@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+
+interface ButtonProps {
+  isActive?: boolean;
+  type?: 'submit' | 'button' | 'reset' | undefined;
+  onClick?: VoidFunction;
+  children: ReactNode;
+  outline?: boolean;
+}
+
+const SubmitBtn = ({
+  isActive = true,
+  type = 'submit',
+  onClick,
+  children,
+  outline = false,
+}: ButtonProps) => {
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={!isActive}
+      className={`btn-base headline1 ${
+        outline
+          ? 'border-[1.5px] border-solid border-main1 bg-white text-main1'
+          : 'bg-main1  text-white'
+      } h-14 p-2 disabled:cursor-not-allowed disabled:bg-gray3`}>
+      {children}
+    </button>
+  );
+};
+
+export default SubmitBtn;
diff --git a/src/components/common/footer/Footer.tsx b/src/components/common/footer/Footer.tsx
new file mode 100644
index 00000000..de056344
--- /dev/null
+++ b/src/components/common/footer/Footer.tsx
@@ -0,0 +1,50 @@
+import { useLocation, useNavigate } from 'react-router-dom';
+import { CalendarIcon, HeartIcon, HomeIcon, UserIcon } from '../icons/Icons';
+
+const Footer = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const isActive = (path: string) => location.pathname === path;
+
+  return (
+    <footer
+      className="
+    bg-lightgray sticky bottom-0 flex h-16 items-center justify-center">
+      <nav className="flex w-[90%] items-center justify-between space-x-4">
+        <div
+          onClick={() => navigate('/')}
+          className="flex-col items-center justify-center hover:cursor-pointer">
+          <div className="flex justify-center">
+            <HomeIcon fill={isActive('/') ? 'currentColor' : 'none'} />
+          </div>
+          <p className="mt-2 text-center text-xs/[11px]">홈</p>
+        </div>
+        <div
+          onClick={() => navigate('/')}
+          className="flex-col items-center justify-center hover:cursor-pointer">
+          <CalendarIcon />
+          <p className="mt-2 text-center text-xs/[11px]">일정</p>
+        </div>
+        <div
+          onClick={() => navigate('/')}
+          className="flex-col items-center justify-center hover:cursor-pointer">
+          <div className="flex justify-center">
+            <HeartIcon />
+          </div>
+          <p className="mt-2 text-center text-xs/[11px]">찜</p>
+        </div>
+        <div
+          onClick={() => navigate('/')}
+          className="flex-col items-center justify-center hover:cursor-pointer">
+          <div className="flex justify-center">
+            <UserIcon />
+          </div>
+          <p className="mt-2 text-center text-xs/[11px]">내정보</p>
+        </div>
+      </nav>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/components/common/footer/index.tsx b/src/components/common/footer/index.tsx
new file mode 100644
index 00000000..18e41ffd
--- /dev/null
+++ b/src/components/common/footer/index.tsx
@@ -0,0 +1,3 @@
+import Footer from './Footer';
+
+export { Footer };
diff --git a/src/components/common/header/DetailHeader.tsx b/src/components/common/header/DetailHeader.tsx
index b7198050..fab1bc3d 100644
--- a/src/components/common/header/DetailHeader.tsx
+++ b/src/components/common/header/DetailHeader.tsx
@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom';
-import { ReactComponent as LeftIcon } from '../../../assets/images/Left.svg';
+import { BackIcon } from '../icons/Icons';
 
 export default function DetailHeader() {
   const navigate = useNavigate();
@@ -9,8 +9,8 @@ export default function DetailHeader() {
   };
 
   return (
-    <header className="flex h-6 h-[48px] w-full items-center pl-1">
-      <LeftIcon className="cursor-pointer" onClick={goBack} />
+    <header className="relative mb-5 flex w-full items-center justify-start gap-2.5 bg-white px-1">
+      <BackIcon onClick={goBack} />
     </header>
   );
 }
diff --git a/src/components/common/header/ReviewHeader.tsx b/src/components/common/header/ReviewHeader.tsx
index d8860921..0785d37b 100644
--- a/src/components/common/header/ReviewHeader.tsx
+++ b/src/components/common/header/ReviewHeader.tsx
@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom';
-import { ReactComponent as LeftIcon } from '@assets/images/Left.svg';
+import { LeftIcon } from '../icons/Icons';
 
 export default function ReviewHeader() {
   const navigate = useNavigate();
diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx
index adf48bb2..61b2cc99 100644
--- a/src/components/common/icons/Icons.tsx
+++ b/src/components/common/icons/Icons.tsx
@@ -5,6 +5,7 @@ interface IconProps {
   onClick?: () => void;
   className?: string;
   isHalf?: boolean;
+  cursor?: string;
 }
 
 export const HomeIcon: React.FC<IconProps> = ({
@@ -169,9 +170,13 @@ export const CheckIcon: React.FC<IconProps> = ({
   size = 25,
   color = 'black',
   fill = 'none',
+  onClick,
+  cursor = 'pointer',
 }) => {
   return (
     <svg
+      onClick={onClick}
+      cursor={cursor}
       width={size}
       height={size}
       viewBox="0 0 17 17"
@@ -193,9 +198,13 @@ export const LeftIcon: React.FC<IconProps> = ({
   size = 25,
   color = 'black',
   fill = 'none',
+  onClick,
+  cursor = 'pointer',
 }) => {
   return (
     <svg
+      onClick={onClick}
+      cursor={cursor}
       width={size}
       height={size}
       viewBox="0 0 17 10"
@@ -223,15 +232,15 @@ export const MapIcon: React.FC<IconProps> = ({
     <svg
       width={size}
       height={size}
-      viewBox="0 0 17 17"
+      viewBox="2 -1.5 20 20"
       fill={fill}
       xmlns="http://www.w3.org/2000/svg">
       <g id="Group 36689">
         <g id="Group">
           <path
             id="Exclude"
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M7.63905 13.4649C8.02061 14.0124 8.81045 14.0124 9.192 13.4649C10.4794 11.6176 12.9155 7.87993 12.9155 6.04785C12.9155 4.85438 12.4414 3.70978 11.5975 2.86587C10.7536 2.02196 9.609 1.54785 8.41553 1.54785C7.22205 1.54785 6.07746 2.02196 5.23355 2.86587C4.38963 3.70978 3.91553 4.85438 3.91553 6.04785C3.91553 7.87993 6.35168 11.6176 7.63905 13.4649ZM9.91553 6.04785C9.91553 6.87628 9.24395 7.54785 8.41553 7.54785C7.5871 7.54785 6.91553 6.87628 6.91553 6.04785C6.91553 5.21942 7.5871 4.54785 8.41553 4.54785C9.24395 4.54785 9.91553 5.21942 9.91553 6.04785Z"
             stroke={color}
           />
@@ -508,8 +517,8 @@ export const ChatIcon: React.FC<IconProps> = ({
 };
 
 export const CloseIcon: React.FC<IconProps> = ({
-  size = 25,
-  color = 'black',
+  size = 16,
+  color = 'white',
   fill = 'none',
 }) => {
   return (
@@ -653,7 +662,7 @@ export const DownIcon: React.FC<IconProps> = ({
 };
 
 export const SearchIcon: React.FC<IconProps> = ({
-  size = 25,
+  size = 16,
   color = 'black',
   fill = 'none',
 }) => {
@@ -703,11 +712,92 @@ export const CameraIcon: React.FC<IconProps> = ({
       xmlns="http://www.w3.org/2000/svg">
       <path
         id="Vector"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M3.14101 1.46934C3.49974 0.877766 4.14214 0.460938 4.87796 0.460938H7.5831C8.31891 0.460938 8.96132 0.877766 9.32005 1.46934C9.42939 1.64966 9.55178 1.839 9.67791 2.01208C9.73825 2.0949 9.85609 2.16106 10.0196 2.16106H10.0871C11.3044 2.16106 12.2911 3.14781 12.2911 4.36491V8.7254C12.2911 9.94256 11.3044 10.9293 10.0873 10.9293H2.37378C1.15662 10.9293 0.169922 9.94256 0.169922 8.7254V4.36491C0.169922 3.14781 1.15643 2.16106 2.37365 2.16106H2.44121C2.6047 2.16106 2.7228 2.0949 2.78315 2.01208C2.90928 1.839 3.03167 1.64966 3.14101 1.46934ZM4.87796 1.56287C4.57032 1.56287 4.26555 1.74005 4.08324 2.0407C3.9634 2.23833 3.82358 2.45537 3.67372 2.66103C3.37133 3.076 2.89391 3.26298 2.44147 3.26298H2.37391C1.76539 3.26298 1.27185 3.75628 1.27185 4.36491V8.7254C1.27185 9.33398 1.7652 9.82733 2.37378 9.82733H10.0873C10.6959 9.82733 11.1892 9.33398 11.1892 8.7254V4.36491C11.1892 3.75628 10.6959 3.26298 10.0874 3.26298H10.0199C9.56741 3.26298 9.08973 3.076 8.78734 2.66103C8.63747 2.45537 8.49766 2.23833 8.37782 2.0407C8.19551 1.74005 7.89073 1.56287 7.5831 1.56287H4.87796ZM6.23053 4.31769C5.31766 4.31769 4.57764 5.05771 4.57764 5.97058C4.57764 6.88345 5.31766 7.62347 6.23053 7.62347C7.1434 7.62347 7.88342 6.88345 7.88342 5.97058C7.88342 5.05771 7.1434 4.31769 6.23053 4.31769ZM3.47571 5.97058C3.47571 4.44913 4.70908 3.21576 6.23053 3.21576C7.75197 3.21576 8.98535 4.44913 8.98535 5.97058C8.98535 7.49203 7.75197 8.7254 6.23053 8.7254C4.70908 8.7254 3.47571 7.49202 3.47571 5.97058Z"
         stroke={color}
       />
     </svg>
   );
 };
+
+interface LogoProps {
+  width?: string;
+  height?: string;
+  fill?: string;
+}
+
+export const LogoIcon: React.FC<LogoProps> = ({
+  width = '71',
+  height = '22',
+  fill = '#29DDF6',
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 71 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <g id="WPP">
+        <path
+          d="M0.888672 2.28455C1.17545 1.71099 1.62611 1.27057 2.24064 0.963305C2.87566 0.635555 3.62334 0.47168 4.48369 0.47168C5.83566 0.47168 6.91109 0.963306 7.70998 1.94656C8.52936 2.90933 8.93905 4.4559 8.93905 6.58628V17.5557L15.9754 1.08621H19.6012L20.4308 16.6339L20.3386 17.525L27.6516 1.08621H31.8611L22.0286 21.3351H15.4838L14.8693 11.9942L10.8134 21.3351H3.40826L2.48646 6.58628C2.425 5.48012 2.24064 4.56856 1.93338 3.85161C1.6466 3.11417 1.29836 2.59182 0.888672 2.28455Z"
+          fill={fill}
+        />
+        <path
+          d="M43.483 0.840398C48.5017 0.840398 51.011 2.6123 51.011 6.15611C51.011 8.10213 50.3862 9.65894 49.1367 10.8266C47.9076 11.9942 46.2177 12.578 44.0668 12.578C43.0631 12.578 42.172 12.2912 41.3936 11.7176C41.0249 11.4718 40.7176 11.185 40.4718 10.8573C41.9671 10.8573 43.104 10.4066 43.8824 9.50531C44.6813 8.58351 45.0808 7.23154 45.0808 5.44939C45.0808 3.66725 44.1999 2.77618 42.4383 2.77618H41.7008C41.5779 2.77618 41.4653 2.78642 41.3628 2.8069L37.8293 21.3351H31.1616L34.941 1.20912C37.1328 1.00427 38.8638 0.89161 40.1338 0.871126C41.4038 0.850641 42.5202 0.840398 43.483 0.840398Z"
+          fill={fill}
+        />
+        <path
+          d="M63.3415 0.840398C68.3602 0.840398 70.8696 2.6123 70.8696 6.15611C70.8696 8.10213 70.2448 9.65894 68.9952 10.8266C67.7662 11.9942 66.0762 12.578 63.9253 12.578C62.9216 12.578 62.0305 12.2912 61.2521 11.7176C60.8834 11.4718 60.5761 11.185 60.3303 10.8573C61.8257 10.8573 62.9626 10.4066 63.741 9.50531C64.5399 8.58351 64.9393 7.23154 64.9393 5.44939C64.9393 3.66725 64.0585 2.77618 62.2968 2.77618H61.5594C61.4365 2.77618 61.3238 2.78642 61.2214 2.8069L57.6878 21.3351H51.0201L54.7995 1.20912C56.9914 1.00427 58.7223 0.89161 59.9923 0.871126C61.2624 0.850641 62.3788 0.840398 63.3415 0.840398Z"
+          fill={fill}
+        />
+      </g>
+    </svg>
+  );
+};
+
+export const KakaoIcon = () => {
+  return (
+    <svg
+      width="17"
+      height="16"
+      viewBox="0 0 17 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        id="Kakao"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M8.60938 12.9979C13.0277 12.9979 16.6094 10.2415 16.6094 6.84126C16.6094 3.44101 13.0277 0.68457 8.60938 0.68457C4.1911 0.68457 0.609375 3.44101 0.609375 6.84126C0.609375 9.02531 2.08711 10.9437 4.31509 12.0367L3.76215 15.1916L6.86492 12.8511C7.42645 12.9473 8.01022 12.9979 8.60938 12.9979Z"
+        fill="#3B1E1E"
+      />
+    </svg>
+  );
+};
+
+export const BackIcon: React.FC<IconProps> = ({
+  size = 9,
+  fill = '#1E1E1E',
+  onClick,
+  cursor = 'pointer',
+}) => {
+  return (
+    <svg
+      onClick={onClick}
+      width={size}
+      height="16"
+      viewBox="0 0 9 16"
+      fill={fill}
+      cursor={cursor}
+      xmlns="http://www.w3.org/2000/svg">
+      <g id="Back">
+        <path
+          d="M8.70308 0.743953C9.0189 1.02827 9.04218 1.51229 8.75507 1.82503L3.04497 8.04492L8.75506 14.2648C9.04218 14.5776 9.0189 15.0616 8.70308 15.3459C8.38725 15.6302 7.89847 15.6072 7.61136 15.2944L0.956054 8.04492L7.61136 0.795433C7.89847 0.482685 8.38725 0.459636 8.70308 0.743953Z"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        />
+      </g>
+    </svg>
+  );
+};
diff --git a/src/components/common/modal/Modal.tsx b/src/components/common/modal/Modal.tsx
new file mode 100644
index 00000000..82def6d5
--- /dev/null
+++ b/src/components/common/modal/Modal.tsx
@@ -0,0 +1,124 @@
+import React from 'react';
+import Modal from 'react-modal';
+import { DeleteIcon, PenIcon } from '@components/common/icons/Icons';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { titleState, isModalOpenState } from '@recoil/modal';
+import { deleteReview } from '@api/review';
+import { deleteComments } from '@api/comments';
+import {
+  ratingState,
+  keywordsState,
+  contentState,
+  // commentState,
+  targetReviewIdState,
+  // reviewDataState,
+  targetCommentIdState,
+  // commentContentState,
+  isModifyingCommentState,
+  isModifyingReviewState,
+  tourItemIdState,
+  contentTypeIdState,
+} from '@recoil/review';
+import { useNavigate } from 'react-router-dom';
+
+interface ModalProps {
+  isOpen: boolean;
+  closeModal: () => void;
+}
+
+const ModalComponent: React.FC<ModalProps> = ({ isOpen, closeModal }) => {
+  const rating = useRecoilValue(ratingState);
+  const keywords = useRecoilValue(keywordsState);
+  const content = useRecoilValue(contentState);
+  // const comment = useRecoilValue(commentState);
+  const title = useRecoilValue(titleState);
+  const targetReviewId = useRecoilValue(targetReviewIdState);
+  // const reviewData = useRecoilValue(reviewDataState);
+  const targetCommentId = useRecoilValue(targetCommentIdState);
+  // const commentContent = useRecoilValue(commentContentState);
+  const tourItemId = useRecoilValue(tourItemIdState);
+  const contentTypeId = useRecoilValue(contentTypeIdState);
+  const setIsModifyingReview = useSetRecoilState(isModifyingReviewState);
+  const setIsModifyingComment = useSetRecoilState(isModifyingCommentState);
+  const navigate = useNavigate();
+  const setIsModalOpen = useSetRecoilState(isModalOpenState);
+
+  const customStyles = {
+    content: {
+      top: 'auto',
+      left: '50%',
+      right: 'auto',
+      bottom: '0',
+      marginRight: '-50%',
+      transform: 'translate(-50%, 0)',
+      width: '375px',
+      height: '186px',
+      borderTopLeftRadius: '2rem',
+      borderTopRightRadius: '2rem',
+    },
+    overlay: {
+      backgroundColor: 'rgba(0, 0, 0, 0.25)',
+    },
+  };
+
+  const handleEdit = () => {
+    if (title == '내 리뷰') {
+      setIsModifyingReview(true);
+      navigate(`/reviewPosting/${tourItemId}`, {
+        state: {
+          title,
+          contentTypeId,
+          targetReviewId,
+          rating,
+          keywords,
+          content,
+        },
+      });
+    } else if (title == '내 댓글') {
+      setIsModifyingComment(true);
+      setIsModalOpen(false);
+
+      // targetCommentId
+      // comment
+      // putComments(commentContent, targetCommentId);
+    }
+  };
+
+  const handleDelete = () => {
+    if (title == '내 리뷰') {
+      deleteReview(targetReviewId);
+      setIsModalOpen(false);
+    } else if (title == '내 댓글') {
+      deleteComments(targetCommentId);
+      setIsModalOpen(false);
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={closeModal}
+      style={customStyles}
+      contentLabel="Example Modal">
+      <div className="mt-2">
+        <div className="text-md mb-4 font-bold">{title}</div>
+        <div>
+          <div className="flex h-[52px] cursor-pointer items-center gap-1">
+            <PenIcon color="#888888" />
+            <p className="text-gray7" onClick={handleEdit}>
+              수정하기
+            </p>
+          </div>
+          <div className="flex h-[52px] cursor-pointer items-center gap-1">
+            <DeleteIcon color="#888888" />
+            <p className="text-gray7" onClick={handleDelete}>
+              삭제하기
+            </p>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default ModalComponent;
diff --git a/src/components/common/modal/index.tsx b/src/components/common/modal/index.tsx
new file mode 100644
index 00000000..e6dc10d9
--- /dev/null
+++ b/src/components/common/modal/index.tsx
@@ -0,0 +1,3 @@
+import Modal from './Modal';
+
+export { Modal };
diff --git a/src/components/common/spinner/Spinner.tsx b/src/components/common/spinner/Spinner.tsx
new file mode 100644
index 00000000..1967d0a3
--- /dev/null
+++ b/src/components/common/spinner/Spinner.tsx
@@ -0,0 +1,11 @@
+export const Spinner = () => (
+  <div className="mt-20 flex h-screen justify-center">
+    <div
+      className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] text-main1 motion-reduce:animate-[spin_1.5s_linear_infinite]"
+      role="status">
+      <span className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">
+        Loading...
+      </span>
+    </div>
+  </div>
+);
diff --git a/src/components/common/toggleGroup/ToggleValue.tsx b/src/components/common/toggleGroup/ToggleValue.tsx
new file mode 100644
index 00000000..fffff6dc
--- /dev/null
+++ b/src/components/common/toggleGroup/ToggleValue.tsx
@@ -0,0 +1,28 @@
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
+
+export const ToggleValue = ({
+  values,
+  onToggle,
+}: {
+  values: string[];
+  onToggle: (value: string) => void;
+}) => {
+  return (
+    <ToggleGroup.Root
+      className="ToggleGroup grid w-full grid-cols-2 gap-4"
+      type="single"
+      // defaultValue={values[0]}
+      aria-label="Toggle values">
+      {values.map((value) => (
+        <ToggleGroup.Item
+          key={value}
+          className="ToggleGroupItem block flex h-10 w-full cursor-pointer items-center justify-center rounded-lg border border-solid border-gray2 bg-white transition-colors data-[state=on]:border-black"
+          value={value}
+          aria-label={value}
+          onClick={() => onToggle(value)}>
+          {value}
+        </ToggleGroup.Item>
+      ))}
+    </ToggleGroup.Root>
+  );
+};
diff --git a/src/components/search/RegionSelect.tsx b/src/components/search/RegionSelect.tsx
new file mode 100644
index 00000000..2e269803
--- /dev/null
+++ b/src/components/search/RegionSelect.tsx
@@ -0,0 +1,24 @@
+import { AREA_CODE } from '@/constants';
+import { ToggleValue } from '@components/common/toggleGroup/ToggleValue';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export const RegionSelect = ({}) => {
+  const navigate = useNavigate();
+  const [selectedRegion, setSelectedRegion] = useState('');
+  // 지역값 쿼리스트링으로 저장
+  const onRegionSelect = (value: string) => {
+    if (value === selectedRegion) {
+      navigate('?');
+      setSelectedRegion('');
+    } else {
+      navigate(`?region=${encodeURIComponent(value)}`);
+      setSelectedRegion(value);
+    }
+  };
+
+  console.log('');
+  return (
+    <ToggleValue values={Object.values(AREA_CODE)} onToggle={onRegionSelect} />
+  );
+};
diff --git a/src/components/search/ResultCategory.tsx b/src/components/search/ResultCategory.tsx
new file mode 100644
index 00000000..d63bdf75
--- /dev/null
+++ b/src/components/search/ResultCategory.tsx
@@ -0,0 +1,38 @@
+import { ButtonWhite } from '@components/common/button/Button';
+
+import { ResultItem } from './ResultItem';
+import { TourType } from '@/@types/tours.types';
+import { InfiniteQueryObserverResult } from '@tanstack/react-query';
+
+interface ResultCategoryProps {
+  data: TourType[];
+  category: string;
+  fetchNextPage: (() => Promise<InfiniteQueryObserverResult<any, any>>) | null;
+  hasNextPage: boolean;
+}
+
+export const ResultCategory = ({
+  data,
+  category,
+  fetchNextPage,
+  hasNextPage,
+}: ResultCategoryProps) => {
+  // console.log('hasNextPage', hasNextPage);
+  return (
+    <>
+      <h2 className="headline2 my-2.5">{category}</h2>
+      {data.map((item) => (
+        <ResultItem key={item.id} result={item} />
+      ))}
+      {hasNextPage ? (
+        <ButtonWhite
+          className="my-2"
+          onClick={() => fetchNextPage && fetchNextPage()}>
+          더보기
+        </ButtonWhite>
+      ) : (
+        <div className="mt-3 text-center text-gray3">검색 결과의 끝입니다.</div>
+      )}
+    </>
+  );
+};
diff --git a/src/components/search/ResultItem.tsx b/src/components/search/ResultItem.tsx
new file mode 100644
index 00000000..47c86ecc
--- /dev/null
+++ b/src/components/search/ResultItem.tsx
@@ -0,0 +1,29 @@
+import { TourType } from '@/@types/tours.types';
+import { useNavigate } from 'react-router-dom';
+
+export const ResultItem = ({ result }: { result: TourType }) => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate(`/detail/${result.id}`); // 클릭 시 해당 경로로 이동
+  };
+  return (
+    <div
+      className="flex h-[52px] w-full cursor-pointer py-1.5"
+      onClick={handleClick}>
+      <div className="imgWrap mr-2.5 flex-shrink-0 overflow-hidden rounded-lg">
+        <img
+          className="h-10 w-10 object-cover"
+          src={result.smallThumbnailUrl}
+          alt={result.title}
+        />
+      </div>
+      <div className="textWrap flex flex-grow flex-col justify-between overflow-hidden py-0.5">
+        <div className="name body3 truncate">{result.title}</div>
+        <span className="address body6 truncate text-gray4">
+          {result.tourAddress}
+        </span>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/search/SearchInput.tsx b/src/components/search/SearchInput.tsx
new file mode 100644
index 00000000..1c52c466
--- /dev/null
+++ b/src/components/search/SearchInput.tsx
@@ -0,0 +1,62 @@
+import { BackIcon, CloseIcon } from '@components/common/icons/Icons';
+import { SearchIcon } from '@components/common/icons/Icons';
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const SearchInput = () => {
+  const [inputValue, setInputValue] = useState('');
+  const navigate = useNavigate();
+
+  const goBack = () => {
+    navigate(-1);
+  };
+
+  const clearInput = () => {
+    setInputValue('');
+  };
+
+  // useEffect(() => {
+  //   setInputValue(selectedRegion);
+  // }, [selectedRegion]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+  };
+
+  // 엔터 누르면 검색키워드 쿼리스트링으로 추가
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      const queryParams = new URLSearchParams(window.location.search);
+      queryParams.set('searchWord', inputValue);
+      navigate(`?${queryParams.toString()}`);
+    }
+  };
+
+  return (
+    <>
+      <div className="relative mb-3 flex items-center">
+        <div className="cursor-pointer" onClick={goBack}>
+          <BackIcon />
+        </div>
+        <div className="absolute left-[36px] top-1/2  -translate-y-1/2 transform">
+          <SearchIcon />
+        </div>
+        <input
+          className="body1 ml-5 h-[40px] w-full items-center rounded-lg bg-gray1 pl-[32px] pr-2.5 focus:outline-none"
+          placeholder="어디로 떠나세요?"
+          value={inputValue}
+          onChange={handleChange}
+          onKeyPress={handleKeyPress}
+        />
+        {inputValue && (
+          <div
+            className="absolute right-2 top-1/2 -translate-y-1/2 transform cursor-pointer"
+            onClick={clearInput}>
+            <CloseIcon />
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+export default React.memo(SearchInput);
diff --git a/src/components/search/SearchResult.tsx b/src/components/search/SearchResult.tsx
new file mode 100644
index 00000000..ada862a3
--- /dev/null
+++ b/src/components/search/SearchResult.tsx
@@ -0,0 +1,97 @@
+import { getToursSearch } from '@api/tours';
+import { ResultCategory } from './ResultCategory';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import ToursCategoryItem from '@components/Tours/ToursCategoryItem';
+import { useEffect, useState } from 'react';
+import { Spinner } from '@components/common/spinner/Spinner';
+
+interface SearchResultProps {
+  selectedRegion: string | null;
+  searchWord: string;
+}
+
+export const SearchResult = ({
+  selectedRegion,
+  searchWord,
+}: SearchResultProps) => {
+  const categories = ['전체', '숙소', '식당', '관광지'];
+  const [selectedCategory, setSelectedCategory] = useState<string>('전체');
+  useEffect(() => {
+    console.log(selectedCategory);
+  }, [selectedCategory]);
+
+  const handleSelectCategory = (category: string) => {
+    setSelectedCategory(category);
+  };
+
+  useEffect(() => {
+    console.log('searchWord: ' + searchWord);
+  }, [searchWord]);
+  console.log();
+
+  const { data, fetchNextPage, hasNextPage, isLoading, isError } =
+    useInfiniteQuery({
+      queryKey: ['searchResults', selectedRegion, searchWord, selectedCategory],
+      queryFn: ({ pageParam = 0 }) =>
+        getToursSearch({
+          region: selectedRegion || '',
+          searchWord: searchWord,
+          category: selectedCategory !== '전체' ? selectedCategory : undefined,
+          page: pageParam,
+          size: 10,
+        }),
+      initialPageParam: 0,
+      getNextPageParam: (lastPage, allPages) => {
+        // 'last' 필드가 false이면, 다음 페이지가 존재함
+        if (!lastPage.data.last) {
+          // 다음 페이지 번호 반환
+          return allPages.length + 1;
+        }
+        // 그렇지 않으면, 더 이상 페이지가 없으므로 undefined 반환
+        return undefined;
+      },
+      enabled: !!searchWord,
+    });
+
+  if (isLoading) {
+    return <Spinner />;
+  }
+  if (isError) {
+    console.log('error fetching search result ');
+  }
+
+  console.log('hasNextPage', hasNextPage);
+
+  const searchResults = data?.pages.flatMap((page) => page.data.data.content);
+  // const searchOptions = data?
+  console.log('searchResults', searchResults);
+
+  return (
+    <>
+      {selectedRegion && (
+        <span className="title3 pt-3">{selectedRegion} 지역의 </span>
+      )}
+      {searchWord && <span className="title3 pt-3">{searchWord} 검색결과</span>}
+      <div className="mt-2 flex">
+        {categories.map((category) => (
+          <ToursCategoryItem
+            key={category}
+            name={category}
+            isSelected={category === selectedCategory}
+            onSelect={handleSelectCategory}
+          />
+        ))}
+      </div>
+      {searchResults ? (
+        <ResultCategory
+          data={searchResults}
+          category={selectedCategory}
+          fetchNextPage={hasNextPage ? fetchNextPage : null}
+          hasNextPage={hasNextPage}
+        />
+      ) : (
+        <div>검색결과가 없습니다.</div>
+      )}
+    </>
+  );
+};
diff --git a/src/components/search/StartSearchBtn.tsx b/src/components/search/StartSearchBtn.tsx
new file mode 100644
index 00000000..a5b9b3ef
--- /dev/null
+++ b/src/components/search/StartSearchBtn.tsx
@@ -0,0 +1,19 @@
+import { useNavigate } from 'react-router-dom';
+import { ReactComponent as SearchIcon } from '@assets/images/Search.svg';
+
+export const StartSearchButton = () => {
+  const navigate = useNavigate();
+
+  const goToSearch = () => {
+    navigate('/search');
+  };
+
+  return (
+    <button
+      className="flex h-[40px] w-full items-center border-b-2 border-solid px-1"
+      onClick={goToSearch}>
+      <SearchIcon className="  mr-2.5" />
+      <span className="body1 text-gray4">어디로 떠나세요?</span>
+    </button>
+  );
+};
diff --git a/src/components/user/index.ts b/src/components/user/index.ts
new file mode 100644
index 00000000..4d720963
--- /dev/null
+++ b/src/components/user/index.ts
@@ -0,0 +1,5 @@
+import UserInputBox from './useInputBox/UserInputBox';
+import UserEmailInputBox from './useInputBox/UserEmailInputBox';
+import UserPwInputBox from './useInputBox/UserPwInputBox';
+
+export { UserInputBox, UserEmailInputBox, UserPwInputBox };
\ No newline at end of file
diff --git a/src/components/user/useInputBox/UserEmailInputBox.tsx b/src/components/user/useInputBox/UserEmailInputBox.tsx
new file mode 100644
index 00000000..d34cd1e3
--- /dev/null
+++ b/src/components/user/useInputBox/UserEmailInputBox.tsx
@@ -0,0 +1,66 @@
+import { CloseIcon } from '@components/common/icons/Icons';
+import { useState } from 'react';
+
+const UserEmailInputBox = () => {
+  const [inputValue, setInputValue] = useState<string>('');
+
+  const [isEmailValidated, setIsEmailValidated] = useState(true);
+  const [isEmailDuplicate, setIsEmailDuplicate] = useState(false);
+
+  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+
+    if (e.target.value !== '') {
+      setIsEmailValidated(
+        /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/.test(inputValue),
+      );
+    } else {
+      setIsEmailDuplicate(false);
+    }
+  };
+
+  const onInputBlur = () => {
+    if (isEmailValidated) {
+      console.log('이메일 중복 확인 요청');
+      // setIsEmailDuplicate(true);
+    }
+  };
+
+  return (
+    <div className="mb-14 flex flex-col gap-2">
+      <div className="flex flex-col gap-[0.4375rem]">
+        <label htmlFor="이메일" className="body3 text-main2">
+          이메일
+        </label>
+        <div className="flex h-10 items-center border-b-[1.25px] border-solid border-gray3 focus-within:border-main1">
+          <input
+            id="이메일"
+            className="w-full text-sm font-normal outline-none placeholder:text-gray3"
+            type="email"
+            placeholder="이메일 입력"
+            required
+            value={inputValue}
+            onChange={onInputChange}
+            onBlur={onInputBlur}
+          />
+          {inputValue && (
+            <button
+              type="button"
+              onClick={() => {
+                setInputValue('');
+              }}>
+              <CloseIcon size={20} color="white" fill="#888888" />
+            </button>
+          )}
+        </div>
+      </div>
+      <span className="body6 text-red">
+        {!isEmailValidated
+          ? '이메일 형식이 올바르지 않습니다.'
+          : isEmailDuplicate && '사용 중인 이메일입니다.'}
+      </span>
+    </div>
+  );
+};
+
+export default UserEmailInputBox;
diff --git a/src/components/user/useInputBox/UserInputBox.tsx b/src/components/user/useInputBox/UserInputBox.tsx
new file mode 100644
index 00000000..edea2f2c
--- /dev/null
+++ b/src/components/user/useInputBox/UserInputBox.tsx
@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import { CloseIcon } from '@components/common/icons/Icons';
+
+interface Props {
+  label: string;
+  type?: string;
+  name: string;
+  placeholder: string;
+  // children: React.ReactNode;
+  validifyCheckList?: string[];
+  // onInputBlur: VoidFunction;
+  marginB?: string;
+}
+
+const UserInputBox = ({
+  label,
+  type = 'password',
+  name,
+  placeholder,
+  // validifyCheckList,
+  marginB = 'mb-6',
+}: Props) => {
+  const [inputValue, setInputValue] = useState('');
+
+  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+  };
+
+  return (
+    <div className={`${marginB} flex flex-col gap-2`}>
+      <div className="flex flex-col gap-2">
+        <label htmlFor={label} className="body3 text-main2">
+          {label}
+        </label>
+        <div className="flex h-10 items-center border-b-[1.25px] border-solid border-gray3 focus-within:border-main1">
+          <input
+            id={label}
+            className="w-full text-sm font-normal outline-none placeholder:text-gray3"
+            type={type}
+            name={name}
+            placeholder={placeholder}
+            required
+            value={inputValue}
+            onChange={onInputChange}
+          />
+          {inputValue && (
+            <div
+              onClick={() => {
+                setInputValue('');
+              }}>
+              <CloseIcon size={20} color="white" fill="#888888" />
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* {type === 'email' && <EmailValidifyCheck inputValue={inputValue} />}
+
+      {validifyCheckList && (
+        <div className="flex h-6 items-center gap-2">
+          {validifyCheckList.map((validifyCheckItem) => (
+            <ValidifyCheck
+              key={validifyCheckItem}
+              checkId={validifyCheckItem}
+              inputValue={inputValue}
+            />
+          ))}
+        </div>
+      )} */}
+    </div>
+  );
+};
+
+export default UserInputBox;
diff --git a/src/components/user/useInputBox/UserPwInputBox.tsx b/src/components/user/useInputBox/UserPwInputBox.tsx
new file mode 100644
index 00000000..0abc5a80
--- /dev/null
+++ b/src/components/user/useInputBox/UserPwInputBox.tsx
@@ -0,0 +1,100 @@
+import { useState } from 'react';
+import { CloseIcon } from '@components/common/icons/Icons';
+import ValidifyCheck from './ValidifyCheck';
+
+const UserPwInputBox = () => {
+  const [inputPwValue, setInputPwValue] = useState('');
+
+  const onPwInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputPwValue(e.target.value);
+  };
+
+  const [inputPwCheckValue, setInputPwCheckValue] = useState('');
+
+  const onPwCheckInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputPwCheckValue(e.target.value);
+  };
+
+  return (
+    <>
+      <div className="mb-6 flex flex-col gap-2">
+        <div className="flex flex-col gap-[0.4375rem]">
+          <label htmlFor="비밀번호" className="body3 text-main2">
+            비밀번호
+          </label>
+          <div className="flex h-10 items-center border-b-[1.25px] border-solid border-gray3 focus-within:border-main1">
+            <input
+              id="비밀번호"
+              className="w-full text-sm font-normal outline-none placeholder:text-gray3"
+              type="password"
+              placeholder="비밀번호를 입력해주세요"
+              required
+              value={inputPwValue}
+              onChange={onPwInputChange}
+            />
+            {inputPwValue && (
+              <button
+                type="button"
+                onClick={() => {
+                  setInputPwValue('');
+                }}>
+                <CloseIcon size={20} color="white" fill="#888888" />
+              </button>
+            )}
+          </div>
+        </div>
+        <div className="flex h-6 items-center gap-2">
+          {['checkPwEng', 'checkPwNum', 'checkPwLength'].map(
+            (validifyCheckItem) => (
+              <ValidifyCheck
+                key={validifyCheckItem}
+                checkId={validifyCheckItem}
+                inputValue={inputPwValue}
+              />
+            ),
+          )}
+        </div>
+      </div>
+
+      <div className="mb-6 flex flex-col gap-2">
+        <div className="flex flex-col gap-[0.4375rem]">
+          <label htmlFor="비밀번호 확인" className="body3 text-main2">
+            비밀번호 확인
+          </label>
+          <div className="flex h-10 items-center border-b-[1.25px] border-solid border-gray3 focus-within:border-main1">
+            <input
+              id="비밀번호 확인"
+              className="w-full text-sm font-normal outline-none placeholder:text-gray3"
+              type="password"
+              placeholder="비밀번호를 재입력해주세요"
+              required
+              value={inputPwCheckValue}
+              onChange={onPwCheckInputChange}
+            />
+            {inputPwCheckValue && (
+              <button
+                type="button"
+                onClick={() => {
+                  setInputPwCheckValue('');
+                }}>
+                <CloseIcon size={20} color="white" fill="#888888" />
+              </button>
+            )}
+          </div>
+        </div>
+        <div className="flex h-6 items-center gap-2">
+          {['checkPwMatch'].map((validifyCheckItem) => (
+            <ValidifyCheck
+              key={validifyCheckItem}
+              checkId={validifyCheckItem}
+              inputValue={inputPwCheckValue}
+              inputValueCheck={inputPwValue}
+            />
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default UserPwInputBox;
diff --git a/src/components/user/useInputBox/ValidifyCheck.tsx b/src/components/user/useInputBox/ValidifyCheck.tsx
new file mode 100644
index 00000000..08957916
--- /dev/null
+++ b/src/components/user/useInputBox/ValidifyCheck.tsx
@@ -0,0 +1,39 @@
+import { CheckIcon } from '@components/common/icons/Icons';
+import validationList from '@utils/user/validationList';
+import { useEffect, useState } from 'react';
+
+interface Props {
+  checkId: string;
+  inputValue: string;
+  inputValueCheck?: string;
+}
+
+const ValidifyCheck = ({ checkId, inputValue, inputValueCheck }: Props) => {
+  const [isValidated, setIsValidated] = useState(false);
+
+  const matchedValidation = validationList.find(
+    (validationItem) => validationItem.id === checkId,
+  );
+
+  useEffect(() => {
+    matchedValidation
+      ? checkId !== 'checkPwMatch'
+        ? setIsValidated(matchedValidation.func(inputValue, ''))
+        : inputValue !== '' &&
+          setIsValidated(
+            matchedValidation.func(inputValue, inputValueCheck || ''),
+          )
+      : setIsValidated(false);
+  }, [inputValue, inputValueCheck]);
+
+  return (
+    <div className="flex items-center gap-px">
+      <span className="text-xs font-normal text-gray4">
+        {matchedValidation?.value}
+      </span>
+      <CheckIcon size={16} color={isValidated ? '#29DDF6' : '#888888'} />
+    </div>
+  );
+};
+
+export default ValidifyCheck;
diff --git a/src/constants.ts b/src/constants.ts
new file mode 100644
index 00000000..37e408d4
--- /dev/null
+++ b/src/constants.ts
@@ -0,0 +1,19 @@
+export const AREA_CODE = {
+  서울: '서울',
+  인천: '인천',
+  부산: '부산',
+  대구: '대구',
+  광주: '광주',
+  대전: '대전',
+  울산: '울산',
+  세종: '세종',
+  제주: '제주',
+  경기: '경기',
+  강원: '강원',
+  충북: '충북',
+  충남: '충남',
+  경북: '경북',
+  경남: '경남',
+  전북: '전북',
+  전남: '전남',
+};
diff --git a/src/hooks/useDebounce.ts b/src/hooks/useDebounce.ts
new file mode 100644
index 00000000..bc05bc0a
--- /dev/null
+++ b/src/hooks/useDebounce.ts
@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+
+const useDebounce = (value: string, delay: number) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+};
+
+export default useDebounce;
diff --git a/src/pages/main/main.page.tsx b/src/pages/main/main.page.tsx
index cc889053..146d7d0a 100644
--- a/src/pages/main/main.page.tsx
+++ b/src/pages/main/main.page.tsx
@@ -1,9 +1,13 @@
+import CreateTripButton from '@components/Tours/CreateTripButton';
 import ToursSectionTop from '@components/Tours/ToursSectionTop';
+import { StartSearchButton } from '@components/search/StartSearchBtn';
 
 const Main = () => {
   return (
     <>
+      <StartSearchButton />
       <ToursSectionTop />
+      <CreateTripButton />
     </>
   );
 };
diff --git a/src/pages/reviewComment/reviewComment.page.tsx b/src/pages/reviewComment/reviewComment.page.tsx
new file mode 100644
index 00000000..b285edf9
--- /dev/null
+++ b/src/pages/reviewComment/reviewComment.page.tsx
@@ -0,0 +1,14 @@
+import { DetailHeader } from '@components/common/header';
+import { DetailReview, ReviewComments, InputComment } from '@components/Review';
+const ReviewComment = () => {
+  return (
+    <>
+      <DetailHeader />
+      <DetailReview />
+      <ReviewComments />
+      <InputComment />
+    </>
+  );
+};
+
+export default ReviewComment;
diff --git a/src/pages/postingReview/postingReview.page.tsx b/src/pages/reviewPosting/reviewPosting.page.tsx
similarity index 75%
rename from src/pages/postingReview/postingReview.page.tsx
rename to src/pages/reviewPosting/reviewPosting.page.tsx
index ab21a77b..f897398d 100644
--- a/src/pages/postingReview/postingReview.page.tsx
+++ b/src/pages/reviewPosting/reviewPosting.page.tsx
@@ -1,7 +1,7 @@
 import Review from '@components/Review/Review';
 import { ReviewHeader } from '@components/common/header';
 
-const PostingReview = () => {
+const ReviewPosting = () => {
   return (
     <>
       <ReviewHeader />
@@ -10,4 +10,4 @@ const PostingReview = () => {
   );
 };
 
-export default PostingReview;
+export default ReviewPosting;
diff --git a/src/pages/search/search.page.tsx b/src/pages/search/search.page.tsx
new file mode 100644
index 00000000..d947991f
--- /dev/null
+++ b/src/pages/search/search.page.tsx
@@ -0,0 +1,38 @@
+import { RegionSelect } from '@components/search/RegionSelect';
+import SearchInput from '@components/search/SearchInput';
+import { SearchResult } from '@components/search/SearchResult';
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+
+export const Search = () => {
+  const location = useLocation();
+
+  const queryParams = new URLSearchParams(location.search);
+  const regionFromQuery = queryParams.get('region');
+  const [selectedRegion, setSelectedRegion] = useState(regionFromQuery);
+  const [searchWord, setSearchWord] = useState('');
+
+  useEffect(() => {
+    if (regionFromQuery) {
+      setSelectedRegion(regionFromQuery);
+    } else {
+      setSelectedRegion('');
+    }
+
+    const searchWordFromQuery = queryParams.get('searchWord');
+    if (searchWordFromQuery) {
+      setSearchWord(searchWordFromQuery);
+    }
+  }, [location]);
+
+  return (
+    <>
+      <SearchInput />
+      {searchWord ? (
+        <SearchResult selectedRegion={selectedRegion} searchWord={searchWord} />
+      ) : (
+        <RegionSelect />
+      )}
+    </>
+  );
+};
diff --git a/src/pages/signin/signin.page.tsx b/src/pages/signin/signin.page.tsx
new file mode 100644
index 00000000..1b465178
--- /dev/null
+++ b/src/pages/signin/signin.page.tsx
@@ -0,0 +1,77 @@
+import { postEmailLogin } from '@api/auth';
+import SubmitBtn from '@components/common/button/SubmitBtn';
+import Back from '@components/common/back/Back';
+import { KakaoIcon, LogoIcon } from '@components/common/icons/Icons';
+import { UserInputBox } from '@components/user';
+import { useNavigate } from 'react-router-dom';
+
+const Signin = () => {
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const emailValue = formData.get('email');
+    const pwValue = formData.get('pw');
+
+    const res = await postEmailLogin({
+      email: emailValue as string,
+      password: pwValue as string,
+    });
+
+    if (res.data.status === 200) {
+      window.localStorage.setItem(
+        'accessToken',
+        res.data.data.tokenInfo.accessToken,
+      );
+      navigate('/');
+    }
+  };
+  return (
+    <div>
+      <Back />
+      <div className="mb-auto">
+        <div className="mb-16 mt-14 flex flex-col items-center">
+          <div className="mb-2">
+            <LogoIcon />
+          </div>
+          <h1 className="body6 text-gray6">
+            위플랜플랜즈에 오신 것을 환영합니다.
+          </h1>
+        </div>
+        <form className="mb-auto" onSubmit={handleSubmit}>
+          <UserInputBox
+            label={'이메일'}
+            type="email"
+            name="email"
+            placeholder={'이메일을 입력하세요'}
+          />
+          <UserInputBox
+            label={'비밀번호'}
+            name="pw"
+            placeholder={'비밀번호를 입력하세요'}
+          />
+          <SubmitBtn>로그인</SubmitBtn>
+        </form>
+      </div>
+
+      <div>
+        <div className="body6 mb-5 flex h-4 items-center gap-4 text-gray4">
+          <hr className="flex-auto" />
+          또는
+          <hr className="flex-auto" />
+        </div>
+        <button className="body3 mb-2 flex h-14 w-full items-center justify-center gap-2 rounded-lg bg-[#fee304] p-2 text-['#3B1E1E']">
+          <KakaoIcon />
+          카카오로 로그인
+        </button>
+
+        <SubmitBtn outline type="button">
+          회원가입
+        </SubmitBtn>
+      </div>
+    </div>
+  );
+};
+
+export default Signin;
diff --git a/src/pages/signup/signup.page.tsx b/src/pages/signup/signup.page.tsx
new file mode 100644
index 00000000..67322569
--- /dev/null
+++ b/src/pages/signup/signup.page.tsx
@@ -0,0 +1,30 @@
+import { UserEmailInputBox, UserPwInputBox } from '@components/user';
+import { useState } from 'react';
+
+const Signup = () => {
+  const [isActive] = useState<boolean>(false);
+
+  return (
+    <div className="relative">
+      <h1 className="title1 my-11">
+        위플플 이용을 위해
+        <br />
+        회원가입을 해주세요
+      </h1>
+      <form>
+        <UserEmailInputBox />
+        <UserPwInputBox />
+
+        {/* TODO 서지수 | 모든 조건이 만족되어야지만 활성화되도록 수정 */}
+        <button
+          className={`bottom-5 h-14 w-full rounded-lg ${
+            isActive ? 'bg-main1' : 'bg-gray3'
+          } headline1 relative text-white`}>
+          다음
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default Signup;
diff --git a/src/recoil/abc.ts b/src/recoil/abc.ts
deleted file mode 100644
index cb0ff5c3..00000000
--- a/src/recoil/abc.ts
+++ /dev/null
@@ -1 +0,0 @@
-export {};
diff --git a/src/recoil/modal.ts b/src/recoil/modal.ts
new file mode 100644
index 00000000..fad2b26a
--- /dev/null
+++ b/src/recoil/modal.ts
@@ -0,0 +1,11 @@
+import { atom } from 'recoil';
+
+export const isModalOpenState = atom({
+  key: 'isModalOpenState',
+  default: false,
+});
+
+export const titleState = atom({
+  key: 'titleState',
+  default: '',
+});
diff --git a/src/recoil/review.ts b/src/recoil/review.ts
new file mode 100644
index 00000000..ef2c7254
--- /dev/null
+++ b/src/recoil/review.ts
@@ -0,0 +1,77 @@
+import { atom } from 'recoil';
+
+interface ReviewRequest {
+  tourItemId: number;
+  rating: number;
+  keywords: Keyword[];
+  content: string;
+}
+
+type Keyword = {
+  keywordId: number;
+  content: string;
+};
+
+export const ratingState = atom({
+  key: 'ratingState',
+  default: 0,
+});
+
+export const keywordsState = atom<Keyword[]>({
+  key: 'keywordsState',
+  default: [],
+});
+
+export const contentState = atom({
+  key: 'contentState',
+  default: '',
+});
+
+export const commentState = atom({
+  key: 'commentState',
+  default: '',
+});
+
+export const targetReviewIdState = atom({
+  key: 'targetReviewIdState',
+  default: 0,
+});
+
+export const reviewDataState = atom<ReviewRequest>({
+  key: 'reviewDataState',
+  default: {
+    tourItemId: 0,
+    rating: 0,
+    keywords: [],
+    content: '',
+  },
+});
+
+export const targetCommentIdState = atom({
+  key: 'targetCommentIdState',
+  default: 0,
+});
+
+export const commentContentState = atom({
+  key: 'commentContentState',
+  default: '',
+});
+
+export const isModifyingReviewState = atom({
+  key: 'isModifyingReviewState',
+  default: false,
+});
+
+export const isModifyingCommentState = atom({
+  key: 'isModifyingCommentState',
+  default: false,
+});
+
+export const tourItemIdState = atom({
+  key: 'tourItemIdState',
+  default: 0,
+});
+export const contentTypeIdState = atom({
+  key: 'contentTypeIdState',
+  default: 0,
+});
diff --git a/src/router/mainRouter.tsx b/src/router/mainRouter.tsx
index 714836f3..0ea543ee 100644
--- a/src/router/mainRouter.tsx
+++ b/src/router/mainRouter.tsx
@@ -2,8 +2,14 @@ import { Outlet, Route, Routes } from 'react-router-dom';
 import { Header } from '@components/common/header';
 import { Nav } from '@components/common/nav';
 import Main from '@pages/main/main.page';
+import { Search } from '@pages/search/search.page';
 import Detail from '@pages/detail/detail.page';
-import PostingReview from '@pages/postingReview/postingReview.page';
+import ReviewPosting from '@pages/reviewPosting/reviewPosting.page';
+import ReviewComment from '@pages/reviewComment/reviewComment.page';
+import { useLocation } from 'react-router-dom';
+import { useEffect } from 'react';
+import Signup from '@pages/signup/signup.page';
+import Signin from '@pages/signin/signin.page';
 
 export function MainLayout() {
   return (
@@ -18,13 +24,23 @@ export function MainLayout() {
 }
 
 const MainRouter = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [location]);
+
   return (
     <>
       <Routes>
         <Route path="/" element={<MainLayout />}>
           <Route index element={<Main />} />
           <Route path="/detail/:id" element={<Detail />} />
-          <Route path="/postingReview/:id" element={<PostingReview />} />
+          <Route path="/search" element={<Search />} />
+          <Route path="/reviewPosting/:id" element={<ReviewPosting />} />
+          <Route path="/reviewComment/:id" element={<ReviewComment />} />
+          <Route path="/signup" element={<Signup />} />
+          <Route path="/signin" element={<Signin />} />
         </Route>
       </Routes>
     </>
diff --git a/src/utils/user/validationList.ts b/src/utils/user/validationList.ts
new file mode 100644
index 00000000..a796b206
--- /dev/null
+++ b/src/utils/user/validationList.ts
@@ -0,0 +1,38 @@
+const validationList = [
+  //   {
+  //     id: 'checkEmailValidity',
+  //     value: '이메일 유효성 검사',
+  //     func: (value: string) =>
+  //       /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/.test(value),
+  //   },
+  //   {
+  //     id: 'checkEmailDuplicate',
+  //     value: '이메일 중복 확인',
+  //     func: () => {
+  //       validationList[0].func;
+  //       return false;
+  //     },
+  //   },
+  {
+    id: 'checkPwEng',
+    value: '영문포함',
+    func: (value: string) => /[a-zA-Z]/.test(value),
+  },
+  {
+    id: 'checkPwNum',
+    value: '숫자포함',
+    func: (value: string) => /[0-9]/.test(value),
+  },
+  {
+    id: 'checkPwLength',
+    value: '8~20자 이내',
+    func: (value: string) => value.length >= 8 && value.length <= 20,
+  },
+  {
+    id: 'checkPwMatch',
+    value: '비밀번호 일치',
+    func: (value: string, checkValue: string) => value === checkValue,
+  },
+];
+
+export default validationList;