From 6e49238e09470d48b0d8923cf658d491a644c9b7 Mon Sep 17 00:00:00 2001 From: jjunyjjuny Date: Fri, 3 Dec 2021 16:10:08 +0900 Subject: [PATCH 01/10] =?UTF-8?q?feat:=20tooltip=20=EC=A1=B0=EC=A0=95,=20h?= =?UTF-8?q?ome=20=EB=AF=B8=EC=84=B8=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ToolTip/index.tsx | 2 +- src/pages/Home/index.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/ToolTip/index.tsx b/src/components/ToolTip/index.tsx index 4360d9d..0bb4e25 100644 --- 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/Home/index.tsx b/src/pages/Home/index.tsx index b571e6e..8f93cfb 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -108,7 +108,7 @@ const HomeWrapper = styled.main` .home { &__top { margin-top: 2rem; - + margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; @@ -156,8 +156,8 @@ const HomeWrapper = styled.main` &__list-wrapper { position: relative; - height: 100%; - overflow: hidden; + /* height: 100%; */ + /* overflow: hidden; */ } &__fixed { position: absolute; From 1925d43700e149fe9dbb17b03688734e6de44e9a Mon Sep 17 00:00:00 2001 From: jjunyjjuny Date: Fri, 3 Dec 2021 16:19:51 +0900 Subject: [PATCH 02/10] =?UTF-8?q?feat:=20=EC=82=AC=ED=8C=8C=EB=A6=AC=20?= =?UTF-8?q?=EC=A4=8C=EC=9D=B8=20=EB=B0=A9=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index 96f3895..aeea272 100644 --- a/public/index.html +++ b/public/index.html @@ -3,7 +3,10 @@ - + Date: Fri, 3 Dec 2021 16:24:37 +0900 Subject: [PATCH 03/10] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20bac?= =?UTF-8?q?kground=20cover=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/ErrandDetail/index.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/pages/ErrandDetail/index.tsx b/src/pages/ErrandDetail/index.tsx index 9e7b492..1c79914 100644 --- 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 { url } from "inspector"; export default function ErrandDetail({ errandId }: WithParamsProps) { const { isOpen, openModal, closeModal, innerMode } = useModal(); @@ -318,9 +319,7 @@ export default function ErrandDetail({ errandId }: WithParamsProps) { }} > {data?.errand.images?.map((image) => ( -
- -
+ ))} @@ -458,9 +457,7 @@ const ErrandDetailWrapper = styled.div` &__image { width: 100%; - height: 0; padding-bottom: 90%; - /* height: 30rem; */ overflow: hidden; & > img { @@ -589,3 +586,10 @@ const renderPrivateData = ( const renderStatus = (color: string, detailStatus: string) => { return
{detailStatus}
; }; + +const ImageItem = styled.div<{ imgUrl: string }>` + width: 100%; + padding-bottom: 90%; + background: ${({ imgUrl }) => `url(${imgUrl})`}; + background-size: cover; +`; From aeb8e09e946ea7d1aa308d9fec62b9f05cfc1df1 Mon Sep 17 00:00:00 2001 From: jjunyjjuny Date: Fri, 3 Dec 2021 16:28:11 +0900 Subject: [PATCH 04/10] =?UTF-8?q?chore:=20textarea=20iOS=20=ED=8C=A8?= =?UTF-8?q?=EB=94=A9=20=EC=B4=88=EA=B8=B0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/reset.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/reset.ts b/src/styles/reset.ts index 7f57d14..3ab35e1 100644 --- a/src/styles/reset.ts +++ b/src/styles/reset.ts @@ -190,6 +190,7 @@ export const reset = css` button, select, textarea { + padding: 0; &:focus { outline: none; } From a86b3fbf676b70b5005d4e7dbacf2c105fc379a3 Mon Sep 17 00:00:00 2001 From: jjunyjjuny Date: Fri, 3 Dec 2021 16:52:36 +0900 Subject: [PATCH 05/10] =?UTF-8?q?chore:=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EB=AF=B8=EC=84=B8=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/ApplyForm/index.tsx | 1 + src/pages/ErrandDetail/index.tsx | 6 +++--- src/pages/RequestForm/ImageAppender/index.tsx | 2 +- src/pages/RequestForm/index.tsx | 2 ++ src/styles/shared.tsx | 6 +++--- 5 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/pages/ApplyForm/index.tsx b/src/pages/ApplyForm/index.tsx index c9f9ded..4aaa004 100644 --- a/src/pages/ApplyForm/index.tsx +++ b/src/pages/ApplyForm/index.tsx @@ -105,6 +105,7 @@ export default function ApplyForm({ errandId }: WithParamsProps) {
{ CustomMixPanel.track(CustomMixPanel.eventName.clickInput, { diff --git a/src/pages/ErrandDetail/index.tsx b/src/pages/ErrandDetail/index.tsx index 1c79914..7faf31f 100644 --- a/src/pages/ErrandDetail/index.tsx +++ b/src/pages/ErrandDetail/index.tsx @@ -474,9 +474,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")} @@ -485,7 +484,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; diff --git a/src/pages/RequestForm/ImageAppender/index.tsx b/src/pages/RequestForm/ImageAppender/index.tsx index dfbf31e..c586364 100644 --- 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 index 3bbf8b0..effa0f0 100644 --- 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({ { CustomMixPanel.track(CustomMixPanel.eventName.clickInput, { page: "요청하기", diff --git a/src/styles/shared.tsx b/src/styles/shared.tsx index 9ead1b7..5004122 100644 --- a/src/styles/shared.tsx +++ b/src/styles/shared.tsx @@ -42,7 +42,7 @@ export const SectionWrapper = styled.div<{ isError?: boolean }>` input:not(.price), select { - border: 0.15rem solid + border: 0.12rem solid ${({ theme, isError }) => isError ? theme.color.fail : theme.color.grey6}; ${({ theme }) => css` @@ -154,7 +154,7 @@ export const Container = styled.div` `; export const PriceInput = styled.div<{ isError?: boolean }>` - border: 0.15rem solid + border: 0.12rem solid ${({ theme, isError }) => (isError ? theme.color.fail : theme.color.grey6)}; ${({ theme }) => css` @@ -191,7 +191,7 @@ export const TextAreaWrapper = styled.div<{ isError: boolean; textLength: number; }>` - border: 0.15rem solid + border: 0.12rem solid ${({ theme, isError }) => (isError ? theme.color.fail : theme.color.grey6)}; ${({ theme }) => theme.font("medium")} border-radius: 1rem; From d50df436622555c6cfc36af3459b93e7ead3a842 Mon Sep 17 00:00:00 2001 From: jjunyjjuny Date: Fri, 3 Dec 2021 17:03:26 +0900 Subject: [PATCH 06/10] =?UTF-8?q?fix:=20Modal=20=EB=92=B7=EB=B0=B0?= =?UTF-8?q?=EA=B2=BD=20=ED=81=B4=EB=A6=AD=20=EB=8B=AB=EA=B8=B0=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Modal/ModalInnerBox/index.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/Modal/ModalInnerBox/index.tsx b/src/components/Modal/ModalInnerBox/index.tsx index f9db409..162a044 100644 --- 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 ( - + ) => { + if (e.currentTarget === e.target) { + closeModal(); + } + }} + >
{children}
 ); From 4304a382d838c7dbb3766e9fdba7a484240de0b7 Mon Sep 17 00:00:00 2001 From: jjunyjjuny Date: Fri, 3 Dec 2021 17:42:45 +0900 Subject: [PATCH 07/10] =?UTF-8?q?feat:=20loaderScreen=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Loader/index.tsx | 54 -------------------------- src/components/LoaderScreen/index.tsx | 19 +++++++++ src/pages/ErrandDetail/index.tsx | 56 ++++++++++++++------------- 3 files changed, 48 insertions(+), 81 deletions(-) delete mode 100644 src/components/Loader/index.tsx create mode 100644 src/components/LoaderScreen/index.tsx diff --git a/src/components/Loader/index.tsx b/src/components/Loader/index.tsx deleted file mode 100644 index e787ada..0000000 --- a/src/components/Loader/index.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from "react"; -import styled from "@emotion/styled"; -import { keyframes } from "@emotion/react"; - -type LoaderProps = { - children: React.ReactNode; -}; - -export default function Loader({ children }: LoaderProps) { - return ( - - - - ); -} - -const rotate = keyframes` - 0% { - transform: rotate(0deg) - } - 100% { - transform: rotate(360deg) - } -`; - -const LoaderWrapper = styled.div` - position: relative; - display: flex; - justify-content: center; - align-items: center; - width: 7rem; - height: 7rem; - - &::after { - content: ""; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: transparent; - border: 0.5rem solid transparent; - border-top: 0.5rem solid ${({ theme }) => theme.color.primary}; - border-radius: 7rem; - animation: ${rotate} 1.5s infinite linear; - } -`; - -const Temp = styled.div` - width: 80%; - height: 80%; - background: ${({ theme }) => theme.color.primary}; - border-radius: 7rem; -`; diff --git a/src/components/LoaderScreen/index.tsx b/src/components/LoaderScreen/index.tsx new file mode 100644 index 0000000..3c2e068 --- /dev/null +++ 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 ( + + + + ); +} + +const LoaderScreenWrapper = styled.div` + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +`; diff --git a/src/pages/ErrandDetail/index.tsx b/src/pages/ErrandDetail/index.tsx index 7faf31f..4a0b34b 100644 --- a/src/pages/ErrandDetail/index.tsx +++ b/src/pages/ErrandDetail/index.tsx @@ -8,7 +8,7 @@ import { useErrandDetail, } from "@api/errands"; import CustomScreenHelmet from "@components/CustomScreenHelmet"; -import { Copy, Meatballs } from "@assets/icon"; +import { Copy, Loader, Meatballs } from "@assets/icon"; import { convertToKRW } from "@utils/convert"; import Modal, { ModalInfoType } from "@components/Modal"; import useModal from "@hooks/useModal"; @@ -28,7 +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 { url } from "inspector"; +import LoaderScreen from "@components/LoaderScreen"; export default function ErrandDetail({ errandId }: WithParamsProps) { const { isOpen, openModal, closeModal, innerMode } = useModal(); @@ -210,6 +210,7 @@ export default function ErrandDetail({ errandId }: WithParamsProps) { { text: ( + + + ) : ( + )} - - - ); } From 261c625dbb905cc97b5664c66f09547ce37dc556 Mon Sep 17 00:00:00 2001 From: jjunyjjuny Date: Fri, 3 Dec 2021 17:43:08 +0900 Subject: [PATCH 08/10] =?UTF-8?q?chore:=20=EC=8B=AC=EB=B6=80=EB=A6=84=20?= =?UTF-8?q?=EC=BC=80=EC=9D=B4=EC=8A=A4=20=EC=A0=84=EB=B6=80=20=ED=9A=8C?= =?UTF-8?q?=EC=83=89=EC=9C=BC=EB=A1=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/getRefinedFromData.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/utils/getRefinedFromData.ts b/src/utils/getRefinedFromData.ts index 3412d97..d1cf646 100644 --- a/src/utils/getRefinedFromData.ts +++ b/src/utils/getRefinedFromData.ts @@ -27,7 +27,7 @@ type RefinedData = { }; const DEFAULT_REFINED_DATA = { - color: "", + color: "GREY", statusText: "있을 수 없는 경우!", buttonText: "있을 수 없는 경우!", buttonDisabled: true, @@ -45,7 +45,7 @@ export const getRefinedFromData = ( switch (data.errand.status) { case "WAIT": return { - color: "", + color: "GREY", statusText: `지원 ${data.errand.helpCount}`, buttonText: data.errand.helpCount > 0 @@ -57,7 +57,7 @@ export const getRefinedFromData = ( }; case "PROCEED": return { - color: "", + color: "GREY", statusText: "심부름 진행중", buttonText: "지원자 정보 보기", buttonDisabled: false, @@ -82,7 +82,7 @@ export const getRefinedFromData = ( switch (data.errand.status) { case "WAIT": return { - color: data.errand.helpCount === 5 ? "GREY" : "", + color: "GREY", statusText: data.errand.helpCount >= 5 ? "지원마감" @@ -151,7 +151,7 @@ export const getRefinedFromData = ( return DEFAULT_REFINED_DATA; case "PROCEED": return { - color: "", + color: "GREY", statusText: "심부름 진행중", buttonText: "심부름을 완료했어요", buttonDisabled: false, From d25659ffde949efb4378f588d613f80e762dbbd7 Mon Sep 17 00:00:00 2001 From: jjunyjjuny Date: Fri, 3 Dec 2021 18:20:56 +0900 Subject: [PATCH 09/10] =?UTF-8?q?chore:=20=EC=82=AC=ED=8C=8C=EB=A6=AC=20?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=EC=8B=9C=20=EB=B0=B1=EA=B7=B8=EB=9D=BC?= =?UTF-8?q?=EC=9A=B4=EB=93=9C=20=EA=B9=9C=EB=B9=A1=EC=9E=84=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/global-style.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/styles/global-style.tsx b/src/styles/global-style.tsx index f79ec27..3d56767 100644 --- a/src/styles/global-style.tsx +++ b/src/styles/global-style.tsx @@ -8,10 +8,13 @@ export const GlobalStyle = () => { Date: Fri, 3 Dec 2021 18:21:24 +0900 Subject: [PATCH 10/10] =?UTF-8?q?feat:=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=EB=B2=94=EC=9C=84=20=ED=99=95=EC=9E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CustomScreenHelmet/index.tsx | 3 +- src/pages/ErrandDetail/index.tsx | 16 ++++++--- src/pages/Home/index.tsx | 37 ++++++++++++--------- 3 files changed, 35 insertions(+), 21 deletions(-) diff --git a/src/components/CustomScreenHelmet/index.tsx b/src/components/CustomScreenHelmet/index.tsx index 66ba387..fbe4a2e 100644 --- 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/pages/ErrandDetail/index.tsx b/src/pages/ErrandDetail/index.tsx index 4a0b34b..89ee94a 100644 --- a/src/pages/ErrandDetail/index.tsx +++ b/src/pages/ErrandDetail/index.tsx @@ -8,7 +8,7 @@ import { useErrandDetail, } from "@api/errands"; import CustomScreenHelmet from "@components/CustomScreenHelmet"; -import { Copy, Loader, Meatballs } from "@assets/icon"; +import { Copy, Meatballs } from "@assets/icon"; import { convertToKRW } from "@utils/convert"; import Modal, { ModalInfoType } from "@components/Modal"; import useModal from "@hooks/useModal"; @@ -297,11 +297,17 @@ export default function ErrandDetail({ errandId }: WithParamsProps) { title="상세페이지" appendRight={ modalInfo ? ( - { - openModal("list"); +
+ > + { + openModal("list"); + }} + /> +
) : ( "" ) diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 8f93cfb..8e9eff0 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -73,7 +73,8 @@ export default function Home() { horizontalTail="right" /> )} - + +
@@ -161,19 +164,22 @@ const HomeWrapper = styled.main` } &__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; } `;