Merge pull request #112 from FAST-gamsungcoding/refactor/reservation

[Refactor] 예약하기, 예약확인하기 반응형 수정
FAST-gamsungcoding · Dec 15, 2023 · 59dde7d · 59dde7d
2 parents 287edfc + e2de3e7
commit 59dde7d
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 19 deletions.
diff --git a/src/app/(header)/(narrow-view)/reservation-check/page.tsx b/src/app/(header)/(narrow-view)/reservation-check/page.tsx
@@ -32,7 +32,7 @@ function ReservationCheck() {
   const date = new Date();
   const order_date = date.toLocaleDateString();
   return (
-    <>
+    <div className={styles.container}>
       <main className={styles.mainContent}>
         <Image src={checkmark} alt="Checkmark" width={100} height={100} />
         <Text fontSize="xl" fontWeight="semibold" color="primary">
@@ -61,7 +61,7 @@ function ReservationCheck() {
           </Text>
         </Button>
       </main>
-    </>
+    </div>
   );
 }
 

diff --git a/src/app/(header)/(narrow-view)/reservation-check/reservationCheck.module.scss b/src/app/(header)/(narrow-view)/reservation-check/reservationCheck.module.scss
@@ -1,4 +1,15 @@
+@use '@styles/_variables.scss' as vars;
+@import '@/styles/_common.scss';
+
+.container {
+  @include mobileM {
+    width: auto;
+    margin: 1.5rem;
+  }
+}
+
 .mainContent {
+  width: auto;
   display: flex;
   flex-direction: column;
   justify-content: center;

diff --git a/src/app/(header)/(narrow-view)/reservation/page.tsx b/src/app/(header)/(narrow-view)/reservation/page.tsx
@@ -258,15 +258,17 @@ function Reservation() {
             </div>
           </div>
           <div className={styles.parts}>
-            <Button
-              variant="default"
-              size="xl"
-              type="submit"
-              disabled={!isCheckedMandatory || !isNameValid || !isEmailValid}>
-              <Text fontSize="xs" fontWeight="normal" color="white">
-                결제하기
-              </Text>
-            </Button>
+            <div className={styles.button}>
+              <Button
+                variant="default"
+                size="xl"
+                type="submit"
+                disabled={!isCheckedMandatory || !isNameValid || !isEmailValid}>
+                <Text fontSize="xs" fontWeight="normal" color="white">
+                  결제하기
+                </Text>
+              </Button>
+            </div>
           </div>
         </div>
       </form>

diff --git a/src/app/(header)/(narrow-view)/reservation/reservation.module.scss b/src/app/(header)/(narrow-view)/reservation/reservation.module.scss
@@ -1,9 +1,5 @@
 @use '@styles/_variables.scss' as vars;
-
-.frame {
-  max-width: 770px;
-  margin: 0 auto;
-}
+@import '@/styles/_common.scss';
 
 .right {
   display: flex;
@@ -13,7 +9,16 @@
 
 .content {
   width: 100%;
-  max-width: 48.125rem;
+
+  @include mobileM {
+    width: auto;
+    padding: 0.8rem;
+  }
+
+  @include mobileS {
+    overflow-x: hidden;
+    padding: 0.8rem;
+  }
 }
 
 .container {
@@ -54,6 +59,12 @@
   margin-bottom: 2rem;
 }
 
+.button {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
 .terms {
   margin-top: 1rem;
   display: flex;

diff --git a/src/components/atoms/button/button.scss b/src/components/atoms/button/button.scss
@@ -15,12 +15,19 @@
   &.xl {
     width: 48.125rem;
     height: 3.125rem;
+
     @include tablet {
       width: 15rem;
       height: 3rem;
     }
+
     @include mobileM {
-      width: 24.5rem;
+      width: 24rem;
+      height: 2.5rem;
+    }
+
+    @include mobileS {
+      width: 18rem;
       height: 2.5rem;
     }
   }

diff --git a/src/components/atoms/input/input.scss b/src/components/atoms/input/input.scss
@@ -65,9 +65,15 @@
       height: 1rem;
     }
     @include mobileM {
-      width: 15rem;
+      width: 12rem;
       height: 1rem;
     }
+
+    @include mobileS {
+      width: 6rem;
+      height: 1rem;
+      background-color: midnightblue;
+    }
   }
 
   &.invalid {