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;
+`;