From 592740f0ce7cfc8e352e8c243251364466acb313 Mon Sep 17 00:00:00 2001 From: kimdaye77 <63107805+kimdaye77@users.noreply.github.com> Date: Mon, 21 Aug 2023 15:32:03 +0900 Subject: [PATCH] =?UTF-8?q?[FEAT]=20#368:=20footer=20=EC=95=84=EB=9E=98?= =?UTF-8?q?=EC=97=90=20=EA=B3=A0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../InnerColorFooterContainer.tsx | 30 ++++++++++++++++ .../InnerColorSelectContainer.tsx | 11 +----- .../OptionPage/OptionFooterContainer.tsx | 6 ++-- .../OuterColorFooterContainer.tsx | 30 ++++++++++++++++ .../OuterColorSelectContainer.tsx | 11 +----- .../ResultPage/ResultBannerContainer.tsx | 2 +- .../ResultPage/ResultFooterContainer.tsx | 36 ++++++++++++------- frontend/src/pages/InnerColorPage.tsx | 14 ++++++-- frontend/src/pages/OuterColorPage.tsx | 14 ++++++-- 9 files changed, 114 insertions(+), 40 deletions(-) create mode 100644 frontend/src/containers/InnerColorPage/InnerColorFooterContainer.tsx create mode 100644 frontend/src/containers/OuterColorPage/OuterColorFooterContainer.tsx diff --git a/frontend/src/containers/InnerColorPage/InnerColorFooterContainer.tsx b/frontend/src/containers/InnerColorPage/InnerColorFooterContainer.tsx new file mode 100644 index 0000000..dab74d2 --- /dev/null +++ b/frontend/src/containers/InnerColorPage/InnerColorFooterContainer.tsx @@ -0,0 +1,30 @@ +import { styled } from 'styled-components'; +import PriceSummary from '../../components/summary/PriceSummary'; +import { PATH } from '../../utils/constants'; +import CenterWrapper from '../../components/layout/CenterWrapper'; + +export default function InnerColorFooterContainer() { + return ( + + + + ); +} + +const Wrapper = styled.div` + z-index: 999; + position: sticky; + bottom: 0; + left: 0; + width: 100%; + height: 120px; + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(6px); +`; + +const Footer = styled(CenterWrapper)` + display: flex; + justify-content: flex-end; +`; diff --git a/frontend/src/containers/InnerColorPage/InnerColorSelectContainer.tsx b/frontend/src/containers/InnerColorPage/InnerColorSelectContainer.tsx index b26ebf3..cb4b6a4 100644 --- a/frontend/src/containers/InnerColorPage/InnerColorSelectContainer.tsx +++ b/frontend/src/containers/InnerColorPage/InnerColorSelectContainer.tsx @@ -1,10 +1,9 @@ import { ReactNode, useCallback, useContext, useEffect, useState } from 'react'; import { styled } from 'styled-components'; import CenterWrapper from '../../components/layout/CenterWrapper'; -import PriceSummary from '../../components/summary/PriceSummary'; import InnerColorCard from '../../components/cards/InnerColorCard'; import CardSlider from '../../components/cardSlider/CardSlider'; -import { NUM_IN_A_PAGE, PATH } from '../../utils/constants'; +import { NUM_IN_A_PAGE } from '../../utils/constants'; import { IInnerColor, InnerColorContext } from '../../context/InnerColorProvider'; import { IMG_URL } from '../../utils/apis'; import { ItemContext } from '../../context/ItemProvider'; @@ -76,9 +75,6 @@ export default function InnerColorSelectContainer() { return ( - ); } @@ -93,8 +89,3 @@ const CardPage = styled.div` margin-top: 12px; transition: all 1s; `; -const Footer = styled.div` - margin-top: 36px; - display: flex; - justify-content: flex-end; -`; diff --git a/frontend/src/containers/OptionPage/OptionFooterContainer.tsx b/frontend/src/containers/OptionPage/OptionFooterContainer.tsx index 83777ba..b515790 100644 --- a/frontend/src/containers/OptionPage/OptionFooterContainer.tsx +++ b/frontend/src/containers/OptionPage/OptionFooterContainer.tsx @@ -6,9 +6,9 @@ import { PATH } from '../../utils/constants'; export default function OptionFooterContainer() { return ( - + ); } @@ -24,7 +24,7 @@ const Wrapper = styled.div` backdrop-filter: blur(6px); `; -const FooterWrapper = styled(CenterWrapper)` +const Footer = styled(CenterWrapper)` display: flex; justify-content: flex-end; `; diff --git a/frontend/src/containers/OuterColorPage/OuterColorFooterContainer.tsx b/frontend/src/containers/OuterColorPage/OuterColorFooterContainer.tsx new file mode 100644 index 0000000..e7b2a16 --- /dev/null +++ b/frontend/src/containers/OuterColorPage/OuterColorFooterContainer.tsx @@ -0,0 +1,30 @@ +import { styled } from 'styled-components'; +import PriceSummary from '../../components/summary/PriceSummary'; +import { PATH } from '../../utils/constants'; +import CenterWrapper from '../../components/layout/CenterWrapper'; + +export default function OuterColorFooterContainer() { + return ( + + + + ); +} + +const Wrapper = styled.div` + z-index: 999; + position: sticky; + bottom: 0; + left: 0; + width: 100%; + height: 120px; + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(6px); +`; + +const Footer = styled(CenterWrapper)` + display: flex; + justify-content: flex-end; +`; diff --git a/frontend/src/containers/OuterColorPage/OuterColorSelectContainer.tsx b/frontend/src/containers/OuterColorPage/OuterColorSelectContainer.tsx index 09fca68..04968c4 100644 --- a/frontend/src/containers/OuterColorPage/OuterColorSelectContainer.tsx +++ b/frontend/src/containers/OuterColorPage/OuterColorSelectContainer.tsx @@ -1,10 +1,9 @@ import { ReactNode, useCallback, useContext, useEffect, useState } from 'react'; import { styled } from 'styled-components'; import CenterWrapper from '../../components/layout/CenterWrapper'; -import PriceSummary from '../../components/summary/PriceSummary'; import OuterColorCard from '../../components/cards/OuterColorCard'; import CardSlider from '../../components/cardSlider/CardSlider'; -import { NUM_IN_A_PAGE, PATH } from '../../utils/constants'; +import { NUM_IN_A_PAGE } from '../../utils/constants'; import { IOuterColor, OuterColorContext } from '../../context/OuterColorProvider'; import { ItemContext } from '../../context/ItemProvider'; @@ -73,9 +72,6 @@ export default function OuterColorSelectContainer() { return ( - ); } @@ -90,8 +86,3 @@ const CardPage = styled.div` gap: 16px; margin-top: 12px; `; -const Footer = styled.div` - margin-top: 36px; - display: flex; - justify-content: flex-end; -`; diff --git a/frontend/src/containers/ResultPage/ResultBannerContainer.tsx b/frontend/src/containers/ResultPage/ResultBannerContainer.tsx index 26477fb..d8923dd 100644 --- a/frontend/src/containers/ResultPage/ResultBannerContainer.tsx +++ b/frontend/src/containers/ResultPage/ResultBannerContainer.tsx @@ -40,7 +40,7 @@ const ResultBanner = styled(Banner)` const Title = styled.div` ${HeadingKrBold1} font-size: 146px; - padding-top: 72px; + padding-top: 120px; color: white; text-align: center; position: relative; diff --git a/frontend/src/containers/ResultPage/ResultFooterContainer.tsx b/frontend/src/containers/ResultPage/ResultFooterContainer.tsx index 82a841a..99703b1 100644 --- a/frontend/src/containers/ResultPage/ResultFooterContainer.tsx +++ b/frontend/src/containers/ResultPage/ResultFooterContainer.tsx @@ -4,28 +4,40 @@ import { BodyKrRegular3, HeadingKrMedium2 } from '../../styles/typefaces'; import RectButton from '../../components/common/buttons/RectButton'; import { useContext } from 'react'; import { ItemContext } from '../../context/ItemProvider'; +import { flexCenterCss } from '../../utils/commonStyle'; export default function ResultFooterContainer() { const { totalPrice } = useContext(ItemContext); return ( - - 최종 견적 가격 - {totalPrice.toLocaleString()} 원 - - - 공유하기 - PDF 다운로드 - - + ); } -const Wrapper = styled(CenterWrapper)` - margin-top: 165px; - margin-bottom: 16px; +const Wrapper = styled.div` + z-index: 999; + position: sticky; + bottom: 0; + left: 0; + width: 100%; + height: 120px; + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(6px); + ${flexCenterCss} +`; +const Footer = styled(CenterWrapper)` gap: 13px; display: flex; flex-direction: column; diff --git a/frontend/src/pages/InnerColorPage.tsx b/frontend/src/pages/InnerColorPage.tsx index 075a125..691880a 100644 --- a/frontend/src/pages/InnerColorPage.tsx +++ b/frontend/src/pages/InnerColorPage.tsx @@ -5,6 +5,8 @@ import { useFetch } from '../hooks/useFetch'; import { INNER_COLOR_API } from '../utils/apis'; import { IInnerColor, InnerColorContext } from '../context/InnerColorProvider'; import ErrorModal from '../components/modal/ErrorModal'; +import InnerColorFooterContainer from '../containers/InnerColorPage/InnerColorFooterContainer'; +import { styled } from 'styled-components'; export default function InnerColorPage() { const { data: innerColorData, error } = useFetch(`${INNER_COLOR_API}?carid=${1}`); @@ -20,8 +22,16 @@ export default function InnerColorPage() { return ( <> - - + + + + + ); } + +const Wrapper = styled.div` + height: 100%; + padding-bottom: 120px; +`; diff --git a/frontend/src/pages/OuterColorPage.tsx b/frontend/src/pages/OuterColorPage.tsx index 7e4fc9b..128df36 100644 --- a/frontend/src/pages/OuterColorPage.tsx +++ b/frontend/src/pages/OuterColorPage.tsx @@ -6,6 +6,8 @@ import { useFetch } from '../hooks/useFetch'; import { OUTER_COLOR_API, OUTER_IMG_API } from '../utils/apis'; import ErrorModal from '../components/modal/ErrorModal'; import { ItemContext } from '../context/ItemProvider'; +import OuterColorFooterContainer from '../containers/OuterColorPage/OuterColorFooterContainer'; +import { styled } from 'styled-components'; export default function OuterColorPage() { const { selectedItem } = useContext(ItemContext); @@ -31,8 +33,16 @@ export default function OuterColorPage() { } return ( <> - - + + + + + ); } + +const Wrapper = styled.div` + height: 100%; + padding-bottom: 120px; +`;