From e1bbaa4b0383ab2206b88f096497927dbbf38857 Mon Sep 17 00:00:00 2001
From: KIMGEONHWI <dirnrlarjsgn@naver.com>
Date: Sat, 25 Jan 2025 03:08:06 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=86=A0=EC=8A=A4=20=EA=B2=B0=EC=A0=9C?=
 =?UTF-8?q?=EC=9A=94=EC=B2=AD=20=ED=99=94=EB=A9=B4=20css=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20(#224)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TossPayments/Success/Success.tsx     | 10 +++++++---
 .../components/TossPayments/index.css.ts            | 13 +++++++++++++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/pages/reservation/components/TossPayments/Success/Success.tsx b/src/pages/reservation/components/TossPayments/Success/Success.tsx
index f480cfe6..2f4c100c 100644
--- a/src/pages/reservation/components/TossPayments/Success/Success.tsx
+++ b/src/pages/reservation/components/TossPayments/Success/Success.tsx
@@ -53,12 +53,16 @@ export const SuccessPage = () => {
     navigate(ROUTES_CONFIG.mypageReservation.path);
   };
 
+  const handleHomeNavigate = () => {
+    navigate(ROUTES_CONFIG.home.path);
+  };
+
   return (
-    <div className={`${styles.wrapper}`}>
+    <div className={`${styles.flexCustomStyle}`}>
       {isConfirmed ? (
         <Flex direction="column" width="100%">
           <Header.Root>
-            <Header.CloseIcon />
+            <Header.CloseIcon onClick={handleHomeNavigate} />
           </Header.Root>
           <Flex direction="column" paddingTop="5.2rem" paddingLeft="2rem" paddingRight="2rem" width="100%" gap="2.8rem">
             <Completion
@@ -77,7 +81,7 @@ export const SuccessPage = () => {
             <h2 className={`${styles.title} ${styles.textCenter}`}>결제 요청까지 성공했어요.</h2>
             <h4 className={`${styles.textCenter} ${styles.description}`}>결제 승인하고 완료해보세요.</h4>
           </Flex>
-          <div className={styles.w100}>
+          <div className={styles.buttonCustomStyle}>
             <button className={`${styles.btn} ${styles.btnPrimary} ${styles.w100}`} onClick={confirmPayment}>
               결제 승인하기
             </button>
diff --git a/src/pages/reservation/components/TossPayments/index.css.ts b/src/pages/reservation/components/TossPayments/index.css.ts
index 1dfd5bc4..90e00a04 100644
--- a/src/pages/reservation/components/TossPayments/index.css.ts
+++ b/src/pages/reservation/components/TossPayments/index.css.ts
@@ -10,6 +10,11 @@ export const w100 = style({
   width: '100%',
 });
 
+export const buttonCustomStyle = style({
+  width: '100%',
+  padding: '0 3rem',
+});
+
 export const h100 = style({
   height: '100%',
 });
@@ -69,6 +74,14 @@ export const confirmLoading = style({
   justifyContent: 'space-between',
 });
 
+export const flexCustomStyle = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '100%',
+  height: '100vh',
+});
+
 export const confirmSuccess = style({
   display: 'none',
   marginTop: '7.2rem',