feat: 토스 결제요청 화면 css 수정 (#224)

SOPT-all · Jan 24, 2025 · e1bbaa4 · e1bbaa4
1 parent c225235
commit e1bbaa4
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git 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
@@ -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',