feat: everything's max-width 768px

a4c7fbf9 · Minseo Lee · eac70125 · a4c7fbf9 · a4c7fbf9 · a4c7fbf9
Commit a4c7fbf9 authored 1 year ago by Minseo Lee
--- a/public/index.html
+++ b/public/index.html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="margin: 0 auto">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

--- a/src/components/bottom-sheet/BottomSheet.module.css
+++ b/src/components/bottom-sheet/BottomSheet.module.css
@@ -3,6 +3,7 @@
    bottom: 0;
    z-index: 10;
    width: 100vw;
+    max-width: 768px;
    height: 50vh;
    border-top: 2px solid var(--brand-color);
    background-color: white;

--- a/src/components/header/Header.module.css
+++ b/src/components/header/Header.module.css
 .container {
    height: var(--header-height);
-    width: 100%;
+    width: 100vw;
+    max-width: 768px;
    padding: 15px;
    font-weight: bold;

--- a/src/components/toast/Toast.module.css
+++ b/src/components/toast/Toast.module.css
@@ -3,6 +3,7 @@
    top: 75px;
    margin: 0 auto;
    width: 80%;
+    max-width: calc(768px * 0.8);
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;

--- a/src/index.css
+++ b/src/index.css
@@ -11,11 +11,18 @@ body {
  -moz-osx-font-smoothing: grayscale;
 }
+#root {
+  max-width: 768px;
+}
 html {
  height: 100vh;
  width: 100vw;
+  max-width: 768px;
+  margin: 0 auto;
 }
 a {
  text-decoration: none;
  color: black;

--- a/src/pages/cart-page/CartPage.module.css
+++ b/src/pages/cart-page/CartPage.module.css
@@ -36,8 +36,9 @@
 }
 .item-remove {
-    position: absolute;
+    position: relative;
    right: 20px;
+    font-size: 36px;
    float: right;
    cursor: pointer;
 }
@@ -50,11 +51,10 @@
 }
 .item-text {
-    width: calc(100% - 88px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
+    width: 100%;
 }
 .item-name {
@@ -71,10 +71,11 @@
 .nav {
    position: fixed;
    bottom: 0;
-    width: 100%;
    height: 56px;
    background-color: white;
    padding: 8px;
+    max-width: calc(768px - 8px);
+    width: 100%;
 }
 .nav-btn {

--- a/src/pages/cart-page/CartPage.tsx
+++ b/src/pages/cart-page/CartPage.tsx
@@ -85,7 +85,6 @@ const CartPage: GFC = ({ connector }) => {
                    cartItem?.menus.map((d, i) => {
                        return (
                            <div className={S['item']} key={`item-${i}`}>
-                                <div onClick={() => handleRemoveItem(i)} className={S['item-remove']}>x</div>
                                <img className={S['item-image']} src={d.image}
                                    alt={`item-${d.name}`}
                                />
@@ -94,6 +93,7 @@ const CartPage: GFC = ({ connector }) => {
                                    <span className={S['item-price']}>{moneyFormatter(d.price * quantities[i])}</span>
                                    <QuantityController quantity={quantities[i]} setQuantity={setQuantities} index={i} />
                                </div>
+                                <div onClick={() => handleRemoveItem(i)} className={S['item-remove']}>x</div>
                            </div>
                        );
                    })

--- a/src/pages/history-page/modules/order-box/OrderBox.module.css
+++ b/src/pages/history-page/modules/order-box/OrderBox.module.css
@@ -24,9 +24,10 @@
 }
 .price {
-    position: absolute;
+    position: relative;
    float: right;
    right: 16px;
+    bottom: 16px;
    font-size: 20px;
 }

--- a/src/pages/login-page/LoginPage.module.css
+++ b/src/pages/login-page/LoginPage.module.css
 .container {
    width: 100vw;
+    max-width: 768px;
    height: 100vh;
    margin-top: calc(-1*var(--header-height));

--- a/src/pages/menu-page/modules/menu-box/MenuBox.module.css
+++ b/src/pages/menu-page/modules/menu-box/MenuBox.module.css
@@ -59,6 +59,7 @@
    bottom: 0;
    padding-bottom: 24px;
    width: calc(100% - 48px);
+    max-width: calc(768px - 48px);
 }
 .bs-bottom button {

--- a/src/pages/order-page/module/ExitButton.module.css
+++ b/src/pages/order-page/module/ExitButton.module.css
 .container {
    width: 100vw;
+    max-width: 768px;
    height: 100vh;
    margin-top: calc(-1*var(--header-height));

--- a/src/pages/signup-page/SignupPage.module.css
+++ b/src/pages/signup-page/SignupPage.module.css
 .container {
    width: 100vw;
+    max-width: 768px;
    height: 100vh;
    margin-top: -48px;