Merge pull request #91 from karrotmvp/feature/#84

사파리 대응, 각종 조정
karrotmvp · Dec 3, 2021 · 9ebbbf4 · 9ebbbf4
2 parents ab2027f + ab26f18
commit 9ebbbf4
Show file tree

Hide file tree

Showing 15 changed files with 125 additions and 123 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,10 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+    />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"

diff --git a/src/components/CustomScreenHelmet/index.tsx b/src/components/CustomScreenHelmet/index.tsx
@@ -27,12 +27,13 @@ const leftButtonStyle = {
   marginLeft: "2rem",
   display: "flex",
   alignItems: "center",
+  padding: "1rem",
 };
 
 const rightButtonStyle = {
-  marginRight: "2rem",
   display: "flex",
   alignItems: "center",
+  // transform: "translateX(-1rem)",
 };
 
 const CustomBack = () => {

diff --git a/src/components/Loader/index.tsx b/src/components/Loader/index.tsx
diff --git a/src/components/LoaderScreen/index.tsx b/src/components/LoaderScreen/index.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { Loader } from "@assets/icon";
+
+export default function LoaderScreen() {
+  return (
+    <LoaderScreenWrapper>
+      <Loader width={70} height={70} fill="#FF7E36" />
+    </LoaderScreenWrapper>
+  );
+}
+
+const LoaderScreenWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
diff --git a/src/components/Modal/ModalInnerBox/index.tsx b/src/components/Modal/ModalInnerBox/index.tsx
@@ -14,7 +14,14 @@ export default function ModalInnerBox({
   closeModal,
 }: ModalInnerBoxProps) {
   return (
-    <ModalInnerBoxWrapper innerMode={innerMode}>
+    <ModalInnerBoxWrapper
+      innerMode={innerMode}
+      onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        if (e.currentTarget === e.target) {
+          closeModal();
+        }
+      }}
+    >
       <div className="modal-inner">{children}</div>
     </ModalInnerBoxWrapper>
   );

diff --git a/src/components/ToolTip/index.tsx b/src/components/ToolTip/index.tsx
@@ -55,7 +55,7 @@ const ToolTipWrapper = styled.div<{
     .tooltip__box {
       background: ${({ theme }) => theme.color.primary};
       color: white;
-      padding: 1.2rem 1.4rem;
+      padding: 1rem 1.4rem;
       border-radius: 0.8rem;
 
       display: flex;

diff --git a/src/pages/ApplyForm/index.tsx b/src/pages/ApplyForm/index.tsx
@@ -105,6 +105,7 @@ export default function ApplyForm({ errandId }: WithParamsProps) {
               <div className="section__content">
                 <input
                   type="number"
+                  inputMode="decimal"
                   placeholder="숫자만 입력해 주세요."
                   onClick={() => {
                     CustomMixPanel.track(CustomMixPanel.eventName.clickInput, {

diff --git a/src/pages/ErrandDetail/index.tsx b/src/pages/ErrandDetail/index.tsx
@@ -28,6 +28,7 @@ import Slider from "react-slick";
 import CustomMixPanel from "@utils/mixpanel";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { toast } from "@components/Toast/Index";
+import LoaderScreen from "@components/LoaderScreen";
 
 export default function ErrandDetail({ errandId }: WithParamsProps) {
   const { isOpen, openModal, closeModal, innerMode } = useModal();
@@ -209,6 +210,7 @@ export default function ErrandDetail({ errandId }: WithParamsProps) {
       {
         text: (
           <button
+            style={{ width: "100%" }}
             onClick={() => {
               closeModal();
               moveToResume();
@@ -295,19 +297,26 @@ export default function ErrandDetail({ errandId }: WithParamsProps) {
         title="상세페이지"
         appendRight={
           modalInfo ? (
-            <Meatballs
-              onClick={() => {
-                openModal("list");
+            <div
+              style={{
+                padding: "1rem 1.6rem 1rem 1rem",
               }}
-            />
+            >
+              <Meatballs
+                onClick={() => {
+                  openModal("list");
+                }}
+              />
+            </div>
           ) : (
             ""
           )
         }
       />
-      <ErrandDetailWrapper>
-        {status !== "loading" && data ? (
-          <>
+
+      {status !== "loading" && data ? (
+        <>
+          <ErrandDetailWrapper>
             <div style={{ overflow: "hidden" }}>
               <Slider
                 {...{
@@ -318,9 +327,7 @@ export default function ErrandDetail({ errandId }: WithParamsProps) {
                 }}
               >
                 {data?.errand.images?.map((image) => (
-                  <div className="errand-detail__image" key={image.id}>
-                    <img src={image.url} alt="" />
-                  </div>
+                  <ImageItem key={image.id} imgUrl={image.url} />
                 ))}
               </Slider>
             </div>
@@ -359,29 +366,29 @@ export default function ErrandDetail({ errandId }: WithParamsProps) {
               </div>
               <p>{data?.errand.detail}</p>
             </div>
-          </>
-        ) : (
-          <div></div>
-        )}
-      </ErrandDetailWrapper>
-      {isOpen && modalInfo && innerMode && (
-        <Modal {...{ closeModal, modalInfo, innerMode }} />
+          </ErrandDetailWrapper>
+          {isOpen && modalInfo && innerMode && (
+            <Modal {...{ closeModal, modalInfo, innerMode }} />
+          )}
+          <StickyFooter>
+            <Button
+              buttonType="contained"
+              size="small"
+              color="primary"
+              fullWidth
+              rounded
+              onClick={() => {
+                handleClickButton();
+              }}
+              disabled={buttonDisabled}
+            >
+              {buttonText}
+            </Button>
+          </StickyFooter>
+        </>
+      ) : (
+        <LoaderScreen />
       )}
-      <StickyFooter>
-        <Button
-          buttonType="contained"
-          size="small"
-          color="primary"
-          fullWidth
-          rounded
-          onClick={() => {
-            handleClickButton();
-          }}
-          disabled={buttonDisabled}
-        >
-          {buttonText}
-        </Button>
-      </StickyFooter>
     </StickyPageWrpper>
   );
 }
@@ -458,9 +465,7 @@ const ErrandDetailWrapper = styled.div`
 
     &__image {
       width: 100%;
-      height: 0;
       padding-bottom: 90%;
-      /* height: 30rem; */
       overflow: hidden;
 
       & > img {
@@ -477,9 +482,8 @@ const ErrandDetailWrapper = styled.div`
     }
     &__contents {
       background: white;
-      padding: 2.2rem 0;
+      padding-bottom: 2.2rem;
       ${({ theme }) => theme.container}
-      transform: translateY(-2rem);
       z-index: 10;
       h2 {
         ${({ theme }) => theme.font("large", "bold")}
@@ -488,7 +492,8 @@ const ErrandDetailWrapper = styled.div`
         display: flex;
         align-items: center;
         ${({ theme }) => theme.font("large", "regular")}
-        margin: 2rem 0;
+        margin: 1rem 0;
+
         & > div {
           width: 3rem;
           height: 3rem;
@@ -589,3 +594,10 @@ const renderPrivateData = (
 const renderStatus = (color: string, detailStatus: string) => {
   return <div className={`errand-detail__status ${color}`}>{detailStatus}</div>;
 };
+
+const ImageItem = styled.div<{ imgUrl: string }>`
+  width: 100%;
+  padding-bottom: 90%;
+  background: ${({ imgUrl }) => `url(${imgUrl})`};
+  background-size: cover;
+`;
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -73,7 +73,8 @@ export default function Home() {
               horizontalTail="right"
             />
           )}
-          <button
+          <div
+            className="home__fixed__fab"
             onClick={() => {
               moveToErrandRequestForm();
               CustomMixPanel.track(CustomMixPanel.eventName.clickETC, {
@@ -82,8 +83,10 @@ export default function Home() {
               });
             }}
           >
-            <Plus stroke="white" />
-          </button>
+            <button>
+              <Plus stroke="white" />
+            </button>
+          </div>
         </div>
       </HomeWrapper>
     </>
@@ -108,7 +111,7 @@ const HomeWrapper = styled.main`
   .home {
     &__top {
       margin-top: 2rem;
-
+      margin-bottom: 1rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -156,24 +159,27 @@ const HomeWrapper = styled.main`
 
     &__list-wrapper {
       position: relative;
-      height: 100%;
-      overflow: hidden;
+      /* height: 100%; */
+      /* overflow: hidden; */
     }
     &__fixed {
       position: absolute;
-      bottom: 4rem;
-      right: 3rem;
+      bottom: 0;
+      right: 0;
       z-index: 9999;
 
-      & > button {
-        width: 5.7rem;
-        height: 5.7rem;
-        background: ${({ theme }) => theme.color.primary};
-        border-radius: 3rem;
-
-        display: flex;
-        justify-content: center;
-        align-items: center;
+      &__fab {
+        padding: 1rem 3rem 3rem 1rem;
+        & > button {
+          width: 5.7rem;
+          height: 5.7rem;
+          background: ${({ theme }) => theme.color.primary};
+          border-radius: 3rem;
+
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
       }
     }
   }
@@ -214,8 +220,9 @@ export const AppenderWrapper = styled.div`
   & > div {
     display: flex;
     align-items: center;
+    padding: 1rem;
   }
   & > div + div {
-    margin-left: 1.8rem;
+    margin-left: 0rem;
   }
 `;
diff --git a/src/pages/RequestForm/ImageAppender/index.tsx b/src/pages/RequestForm/ImageAppender/index.tsx
@@ -61,7 +61,7 @@ export default function ImageAppender({
 }
 
 const ImageAppenderWrapper = styled(BoxWrapper)`
-  border: 0.1rem solid ${({ theme }) => theme.color.grey6};
+  border: 0.12rem solid ${({ theme }) => theme.color.grey6};
   width: 7rem;
   height: 7rem;
   & > label {

diff --git a/src/pages/RequestForm/index.tsx b/src/pages/RequestForm/index.tsx
@@ -181,6 +181,7 @@ export default function RequestForm({
                 className="price"
                 placeholder="심부름 금액을 입력해 주세요."
                 type="number"
+                inputMode="decimal"
                 onClick={() => {
                   CustomMixPanel.track(CustomMixPanel.eventName.clickInput, {
                     page: "요청하기",
@@ -267,6 +268,7 @@ export default function RequestForm({
             <input
               placeholder="전화번호를 입력하세요."
               type="number"
+              inputMode="decimal"
               onClick={() => {
                 CustomMixPanel.track(CustomMixPanel.eventName.clickInput, {
                   page: "요청하기",