diff --git a/src/App.css b/src/App.css
index 9343f52..e9638b2 100644
--- a/src/App.css
+++ b/src/App.css
@@ -56,9 +56,10 @@
 @media (min-width: 800px) {
   .App {
     width: 600px;
-    height: 94vh;
+    height: 100%;
     background-color: white;
     padding-top: 3.5rem;
+    box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 36px;
   }
   .bottom_navbar {
     left: calc(50% - 300px); /* Center the navbar */
diff --git a/src/App.js b/src/App.js
index 66c303d..83df053 100644
--- a/src/App.js
+++ b/src/App.js
@@ -19,6 +19,8 @@ import OrderStorage from "./pages/OrderStorage/OrderStorage";
 import PackagingStatusPage from "./pages/PackagingStatusPage/PackagingStatusPage";
 import PaymentPage from "./pages/PaymentPage/PaymentPage";
 import ReadyPage from "./pages/ReadyPage/ReadyPage";
+import PaymentSuccessPage from "./pages/PaymentPage/Redirect/PaymentSuccessPage";
+import PaymentFailPage from "./pages/PaymentPage/Redirect/PaymentFailPage";
 
 function App() {
   return (
@@ -62,6 +64,10 @@ function App() {
         <Route path="/cart" element={<CartPage />} />
         {/* 결제 페이지 */}
         <Route path="/payment" element={<PaymentPage />} />
+        {/* 결제 성공 리다이렉트 페이지 */}
+        <Route path="/payment/success" element={<PaymentSuccessPage />} />
+        {/* 결제 실패 리다이렉트 페이지 */}
+        <Route path="/payment/fail" element={<PaymentFailPage />} />
       </Routes>
     </div>
   );
diff --git a/src/pages/CartPage/style.css b/src/pages/CartPage/CartPage.css
similarity index 100%
rename from src/pages/CartPage/style.css
rename to src/pages/CartPage/CartPage.css
diff --git a/src/pages/CartPage/CartPage.jsx b/src/pages/CartPage/CartPage.jsx
index 8fbea41..9a42427 100644
--- a/src/pages/CartPage/CartPage.jsx
+++ b/src/pages/CartPage/CartPage.jsx
@@ -1,6 +1,6 @@
 import { Link, useLocation } from "react-router-dom";
 import Header from "../../components/views/Header/Header";
-import "./style.css";
+import "./CartPage.css";
 
 const CartPage = () => {
   const location = useLocation();
diff --git a/src/pages/OrderProcessPage/style.css b/src/pages/OrderProcessPage/OrderProcess.css
similarity index 100%
rename from src/pages/OrderProcessPage/style.css
rename to src/pages/OrderProcessPage/OrderProcess.css
diff --git a/src/pages/OrderProcessPage/OrderProcessPage.jsx b/src/pages/OrderProcessPage/OrderProcessPage.jsx
index 005a414..db963f3 100644
--- a/src/pages/OrderProcessPage/OrderProcessPage.jsx
+++ b/src/pages/OrderProcessPage/OrderProcessPage.jsx
@@ -1,11 +1,11 @@
 import axios from "axios";
 import React, { useEffect, useState } from "react";
-import { Link, useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import noImageMenu from "../../assets/images/no_image_menu.svg";
 import toggleDown from "../../assets/images/toggle_down.svg";
 import toggleUp from "../../assets/images/toggle_up.svg";
 import Header from "../../components/views/Header/Header";
-import "./style.css";
+import "./OrderProcess.css";
 
 const OrderProcessPage = () => {
   let navigate = useNavigate();
@@ -13,7 +13,7 @@ const OrderProcessPage = () => {
   const params = new URLSearchParams(location.search);
   const storeId = params.get("storeId");
   const inout = params.get("inout");
-  const foodie_id = params.get("foodie_id");
+  const foodieId = params.get("foodie_id");
   const [optionOpen, setOptionOpen] = useState(false);
   const [foodOptionInfo, setFoodOptionInfo] = useState({});
 
@@ -21,8 +21,8 @@ const OrderProcessPage = () => {
     const fetchData = async () => {
       try {
         const response = await axios.get(
-          `${process.env.REACT_APP_API_ROOT}/api/v1/order/${storeId}?foody_id=${foodie_id}&inout=${inout}`,
-          {withCredentials: true}
+          `${process.env.REACT_APP_API_ROOT}/api/v1/order/${storeId}?foody_id=${foodieId}&inout=${inout}`,
+          { withCredentials: true }
         );
         console.log(response.data);
         setFoodOptionInfo(response.data);
@@ -37,11 +37,10 @@ const OrderProcessPage = () => {
   const handleCartReset = () => {
     let body = {
       storeId: storeId,
-      foodieId: foodie_id,
+      foodieId: foodieId,
       options: optionIdx,
       count: 1,
     };
-    console.log(body);
     const apiUrl = `${process.env.REACT_APP_API_ROOT}/api/v1/order/cart/reset`;
 
     // Axios를 사용한 DELETE 요청
@@ -72,7 +71,9 @@ const OrderProcessPage = () => {
   );
   const [selectedRadioTexts, setSelectedRadioTexts] = useState(
     foodOptionInfo &&
-      foodOptionInfo.category?.filter((el) => el?.essential).map((e) => `${e.options[0]?.name}`)
+      foodOptionInfo.category
+        ?.filter((el) => el?.essential)
+        .map((e) => `${e.options[0]?.name}`)
   );
   const [totalAmount, setTotalAmount] = useState(
     foodOptionInfo && foodOptionInfo.price && foodOptionInfo?.price
@@ -82,11 +83,33 @@ const OrderProcessPage = () => {
   );
   const [optionIdx, setOptionIdx] = useState([]);
   useEffect(() => {
-    setActiveToggles(foodOptionInfo?.category?.filter((e) => e?.essential).map(() => false));
-    setSelectedRadioTexts(foodOptionInfo.category?.filter((el) => el?.essential).map((e) => `${e.options[0]?.name}`));
-    setTotalAmount(foodOptionInfo?.price + parseInt(foodOptionInfo?.category?.filter((el) => el?.essential).map((e) => parseInt(e?.options[0]?.price)).reduce((prev, curr) => prev + curr, 0)));
-    setPrevRadioPrice(foodOptionInfo?.category?.filter((el) => el?.essential).map((e) => e?.options[0]?.price));
-    setOptionIdx(foodOptionInfo?.category?.filter((el) => el?.essential).map((e) => e?.options[0]?.idx))
+    setActiveToggles(
+      foodOptionInfo?.category?.filter((e) => e?.essential).map(() => false)
+    );
+    setSelectedRadioTexts(
+      foodOptionInfo.category
+        ?.filter((el) => el?.essential)
+        .map((e) => `${e.options[0]?.name}`)
+    );
+    setTotalAmount(
+      foodOptionInfo?.price +
+        parseInt(
+          foodOptionInfo?.category
+            ?.filter((el) => el?.essential)
+            .map((e) => parseInt(e?.options[0]?.price))
+            .reduce((prev, curr) => prev + curr, 0)
+        )
+    );
+    setPrevRadioPrice(
+      foodOptionInfo?.category
+        ?.filter((el) => el?.essential)
+        .map((e) => e?.options[0]?.price)
+    );
+    setOptionIdx(
+      foodOptionInfo?.category
+        ?.filter((el) => el?.essential)
+        .map((e) => e?.options[0]?.idx)
+    );
   }, [foodOptionInfo]);
 
   const handleToggle = (index) => {
@@ -108,10 +131,7 @@ const OrderProcessPage = () => {
       return texts;
     });
 
-    setTotalAmount(
-      (prevAmount) =>
-        prevAmount - prevRadioPrice[index] + price
-    );
+    setTotalAmount((prevAmount) => prevAmount - prevRadioPrice[index] + price);
 
     setPrevRadioPrice((prevPrices) => {
       const prices = [...prevPrices];
@@ -121,9 +141,13 @@ const OrderProcessPage = () => {
   };
 
   const handleOptionChange = (idx, price, e) => {
-    e.target.checked ? setTotalAmount((prevAmount) => prevAmount + price) : setTotalAmount((prevAmount) => prevAmount - price);
-    e.target.checked ? setOptionIdx((prev) => [...prev, idx]) : setOptionIdx((prev) => prev.filter((e) => e !== idx));
-  }
+    e.target.checked
+      ? setTotalAmount((prevAmount) => prevAmount + price)
+      : setTotalAmount((prevAmount) => prevAmount - price);
+    e.target.checked
+      ? setOptionIdx((prev) => [...prev, idx])
+      : setOptionIdx((prev) => prev.filter((e) => e !== idx));
+  };
 
   // const submitOrder = () => {
   //   console.log(optionIdx);
@@ -148,134 +172,150 @@ const OrderProcessPage = () => {
       </div>
 
       <div className="order-process-page__toggle">
-        {foodOptionInfo && foodOptionInfo.category && foodOptionInfo.category
-          .filter((c, i) => c?.essential)
-          .map((category, index) => (
-          <div className="order-process-page__toggle__container" key={index}>
-            <div
-              className={`order-process-page__toggle__header ${activeToggles?.length && activeToggles[index] && "open"}`}
-              onClick={() => handleToggle(index)}
-            >
-              <span className="order-process-page__toggle__name">
-                {category.name}
-              </span>
-              <span className="order-process-page__toggle__btn">
-                {selectedRadioTexts?.length && selectedRadioTexts[index] && (
-                  <span className="order-process-page__selected-radio">
-                    {selectedRadioTexts[index]}
-                  </span>
-                )}
-                <img
-                  className="order-process-page__toggle__header__img"
-                  src={
-                    activeToggles?.length && activeToggles[index]
-                      ? toggleUp
-                      : toggleDown
-                  }
-                  alt={
-                    activeToggles?.length && activeToggles[index]
-                      ? "Toggle Up"
-                      : "Toggle Down"
-                  }
-                />
-              </span>
-            </div>
-
-            {activeToggles?.length && activeToggles[index] && (
+        {foodOptionInfo &&
+          foodOptionInfo.category &&
+          foodOptionInfo.category
+            .filter((c, i) => c?.essential)
+            .map((category, index) => (
               <div
                 className="order-process-page__toggle__container"
                 key={index}
               >
-                {category?.options?.map((option, optionIndex) => (
+                <div
+                  className={`order-process-page__toggle__header ${
+                    activeToggles?.length && activeToggles[index] && "open"
+                  }`}
+                  onClick={() => handleToggle(index)}
+                >
+                  <span className="order-process-page__toggle__name">
+                    {category.name}
+                  </span>
+                  <span className="order-process-page__toggle__btn">
+                    {selectedRadioTexts?.length &&
+                      selectedRadioTexts[index] && (
+                        <span className="order-process-page__selected-radio">
+                          {selectedRadioTexts[index]}
+                        </span>
+                      )}
+                    <img
+                      className="order-process-page__toggle__header__img"
+                      src={
+                        activeToggles?.length && activeToggles[index]
+                          ? toggleUp
+                          : toggleDown
+                      }
+                      alt={
+                        activeToggles?.length && activeToggles[index]
+                          ? "Toggle Up"
+                          : "Toggle Down"
+                      }
+                    />
+                  </span>
+                </div>
+
+                {activeToggles?.length && activeToggles[index] && (
                   <div
-                    className="order-process-page__toggle__body__radio"
-                    key={optionIndex}
+                    className="order-process-page__toggle__container"
+                    key={index}
                   >
-                    <label htmlFor={`radio_${index}_${optionIndex}`}>
-                      <input
-                        type="radio"
-                        id={`radio_${index}_${optionIndex}`}
-                        name={`radio_${index}_${optionIndex}`}
-                        value={optionIndex}
-                        checked={
-                          selectedRadioTexts?.length &&
-                          selectedRadioTexts[index] === option.name
-                        }
-                        onChange={() =>
-                          handleRadioChange(index, option.name, option.price)
-                        }
-                      />
-                      <span>
-                        {option.name}
-                      </span>
-                    </label>
+                    {category?.options?.map((option, optionIndex) => (
+                      <div
+                        className="order-process-page__toggle__body__radio"
+                        key={optionIndex}
+                      >
+                        <label htmlFor={`radio_${index}_${optionIndex}`}>
+                          <input
+                            type="radio"
+                            id={`radio_${index}_${optionIndex}`}
+                            name={`radio_${index}_${optionIndex}`}
+                            value={optionIndex}
+                            checked={
+                              selectedRadioTexts?.length &&
+                              selectedRadioTexts[index] === option.name
+                            }
+                            onChange={() =>
+                              handleRadioChange(
+                                index,
+                                option.name,
+                                option.price
+                              )
+                            }
+                          />
+                          <span>{option.name}</span>
+                        </label>
+                      </div>
+                    ))}
                   </div>
-                ))}
+                )}
               </div>
-            )}
-          </div>
-          
-        ))}
-        {foodOptionInfo?.category?.filter((e) => !e?.essential).length ?
-          (<div className="order-process-page__toggle__container">
+            ))}
+        {foodOptionInfo?.category?.filter((e) => !e?.essential).length ? (
+          <div className="order-process-page__toggle__container">
             <div
-              className={`order-process-page__toggle__header ${optionOpen && "open"}`}
+              className={`order-process-page__toggle__header ${
+                optionOpen && "open"
+              }`}
               onClick={() => setOptionOpen((prev) => !prev)}
             >
-              <span className="order-process-page__toggle__name">
-                추가옵션
-              </span>
+              <span className="order-process-page__toggle__name">추가옵션</span>
               <img
-                  className="order-process-page__toggle__header__img"
-                  src={optionOpen ? toggleUp : toggleDown}
-                  alt={optionOpen ? "Toggle Up" : "Toggle Down"}
-                />
+                className="order-process-page__toggle__header__img"
+                src={optionOpen ? toggleUp : toggleDown}
+                alt={optionOpen ? "Toggle Up" : "Toggle Down"}
+              />
             </div>
-            
-            <div 
-                className={`order-process-page__toggle__body ${optionOpen && "open"}`}
-                style={{
-                  maxHeight: "100%",
-                  paddingTop: "1.56rem",
-                  paddingBottom: "1.91rem",
-                }}
-              >
-            {optionOpen && foodOptionInfo && foodOptionInfo.category && foodOptionInfo.category
-                .filter((c, i) => !c.essential)
-                .map((category, index) => (
-                  <React.Fragment key={index}>
-                  {index !== 0 && <div className="option__line"></div>}
-                  <span className="order-process-page__option__title__wrapper">
-                    <span className="order-process-page__option__title">
-                      {category.name}
-                    </span>
-                  </span>
-                  {category?.options?.map((option, i) => (
-                    <React.Fragment key={option.idx}>
-                      <div className="option__checkbox__wrapper">
-                        <label htmlFor={`option_${option.idx}`}>
-                          <input 
-                          type="checkbox" 
-                          id={`option_${option.idx}`}
-                          name={`option_${option.idx}`}
-                          onChange={(e) =>
-                            handleOptionChange(option.idx, option.price, e)
-                          }
-                          />
-                          <span>{option.name}</span>
-                        </label>
-                      </div>
+
+            <div
+              className={`order-process-page__toggle__body ${
+                optionOpen && "open"
+              }`}
+              style={{
+                maxHeight: "100%",
+                paddingTop: "1.56rem",
+                paddingBottom: "1.91rem",
+              }}
+            >
+              {optionOpen &&
+                foodOptionInfo &&
+                foodOptionInfo.category &&
+                foodOptionInfo.category
+                  .filter((c, i) => !c.essential)
+                  .map((category, index) => (
+                    <React.Fragment key={index}>
+                      {index !== 0 && <div className="option__line"></div>}
+                      <span className="order-process-page__option__title__wrapper">
+                        <span className="order-process-page__option__title">
+                          {category.name}
+                        </span>
+                      </span>
+                      {category?.options?.map((option, i) => (
+                        <React.Fragment key={option.idx}>
+                          <div className="option__checkbox__wrapper">
+                            <label htmlFor={`option_${option.idx}`}>
+                              <input
+                                type="checkbox"
+                                id={`option_${option.idx}`}
+                                name={`option_${option.idx}`}
+                                onChange={(e) =>
+                                  handleOptionChange(
+                                    option.idx,
+                                    option.price,
+                                    e
+                                  )
+                                }
+                              />
+                              <span>{option.name}</span>
+                            </label>
+                          </div>
+                        </React.Fragment>
+                      ))}
                     </React.Fragment>
                   ))}
-                  
-              </React.Fragment>
-              ))}
             </div>
           </div>
-          ) : (
-            <div></div>
-          )
-        }
+        ) : (
+          <div></div>
+        )}
       </div>
 
       <div className="order-process-page__total-amount">
@@ -285,12 +325,22 @@ const OrderProcessPage = () => {
         </text>
       </div>
 
-      <Link
+      {/* <Link
         to={`/payment?storeId=${storeId}&inout=${inout}`}
-        style={{ display: "flex", textDecoration: "none", marginBottom: '2rem' }}
+        style={{
+          display: "flex",
+          textDecoration: "none",
+          marginBottom: "2rem",
+        }}
       >
-        <div className="order-btn" onClick={handleCartReset}>주문하기</div>
-      </Link>
+        <div className="order-btn" onClick={handleCartReset}>
+          주문하기
+        </div>
+      </Link> */}
+
+      <div className="order-process-page__cart__btn" onClick={handleCartReset}>
+        주문하기
+      </div>
     </div>
   );
 };
diff --git a/src/pages/PaymentPage/style.css b/src/pages/PaymentPage/PaymentPage.css
similarity index 100%
rename from src/pages/PaymentPage/style.css
rename to src/pages/PaymentPage/PaymentPage.css
diff --git a/src/pages/PaymentPage/PaymentPage.jsx b/src/pages/PaymentPage/PaymentPage.jsx
index 46d5447..a5b16f8 100644
--- a/src/pages/PaymentPage/PaymentPage.jsx
+++ b/src/pages/PaymentPage/PaymentPage.jsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
 import noImageMenu from "../../assets/images/no_image_menu.svg";
 import Header from "../../components/views/Header/Header";
-import "./style.css";
+import "./PaymentPage.css";
 // import menuDelete from "../../assets/images/menu_delete.svg";
 // import takeIn from "../../assets/images/take_in.svg";
 // import takeOut from "../../assets/images/take_out.svg";
diff --git a/src/pages/PaymentPage/Redirect/PaymentFailPage.jsx b/src/pages/PaymentPage/Redirect/PaymentFailPage.jsx
new file mode 100644
index 0000000..d5e005d
--- /dev/null
+++ b/src/pages/PaymentPage/Redirect/PaymentFailPage.jsx
@@ -0,0 +1,8 @@
+const PaymentFailPage = () => {
+  return (
+    <div>
+      <h1>Payment Fail</h1>
+    </div>
+  );
+};
+export default PaymentFailPage;
diff --git a/src/pages/PaymentPage/Redirect/PaymentSuccessPage.jsx b/src/pages/PaymentPage/Redirect/PaymentSuccessPage.jsx
new file mode 100644
index 0000000..bdaa789
--- /dev/null
+++ b/src/pages/PaymentPage/Redirect/PaymentSuccessPage.jsx
@@ -0,0 +1,37 @@
+import { Navigate, useLocation } from "react-router-dom";
+import axios from "axios";
+import { useEffect } from "react";
+
+const PaymentSuccessPage = () => {
+  const location = useLocation();
+  const params = new URLSearchParams(location.search);
+  const paymentType = params.get("paymentType");
+  const orderId = params.get("orderId");
+  const paymentKey = params.get("paymentKey");
+  const amount = params.get("amount");
+  const apiRoot = process.env.REACT_APP_API_ROOT;
+
+  useEffect(() => {
+    const successUrl = `${apiRoot}/api/v1/order/toss/success?paymentType=${paymentType}&orderId=${orderId}&paymentKey=${paymentKey}&amount=${amount}`;
+
+    if (orderId) {
+      axios
+        .get(successUrl)
+        .then((response) => {
+          console.log(response.data);
+        })
+        .catch((error) => {
+          console.error("Error sending success URL request:", error);
+        });
+    } else {
+      Navigate("/");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return (
+    <div>
+      <h1>Payment Success</h1>
+    </div>
+  );
+};
+export default PaymentSuccessPage;
diff --git a/src/pages/StoreDetailPage/style.css b/src/pages/StoreDetailPage/StoreDetailPage.css
similarity index 100%
rename from src/pages/StoreDetailPage/style.css
rename to src/pages/StoreDetailPage/StoreDetailPage.css
diff --git a/src/pages/StoreDetailPage/StoreDetailPage.jsx b/src/pages/StoreDetailPage/StoreDetailPage.jsx
index d86f49c..89a01fc 100644
--- a/src/pages/StoreDetailPage/StoreDetailPage.jsx
+++ b/src/pages/StoreDetailPage/StoreDetailPage.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Header from "../../components/views/Header/Header";
-import "./style.css";
+import "./StoreDetailPage.css";
 import { Link, useLocation } from "react-router-dom";
 import axios from "axios";