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 @@ - + { 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/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}
 ); 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/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 9e7b492..89ee94a 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 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: (

{data?.errand.detail}

- - ) : ( -
- )} - - {isOpen && modalInfo && innerMode && ( - + + {isOpen && modalInfo && innerMode && ( + + )} + + + + + ) : ( + )} - - - ); } @@ -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
{detailStatus}
; }; + +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 index b571e6e..8e9eff0 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -73,7 +73,8 @@ export default function Home() { horizontalTail="right" /> )} - + + @@ -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 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/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 = () => { ` 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; 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,