Merge pull request #369 from softeerbootcamp-2nd/feat/footer

[FEAT] #368: footer 아래에 고정
softeerbootcamp-2nd · Aug 21, 2023 · 5241785 · 5241785
2 parents f53f5cf + 420b604
commit 5241785
Show file tree

Hide file tree

Showing 9 changed files with 116 additions and 42 deletions.
diff --git a/frontend/src/containers/InnerColorPage/InnerColorFooterContainer.tsx 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 (
+    <Wrapper>
+      <Footer>
+        <PriceSummary nextPagePath={PATH.option} />
+      </Footer>
+    </Wrapper>
+  );
+}
+
+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
@@ -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 (
     <Wrapper>
       <CardSlider title="내장 색상을 선택해주세요." cardList={cardPageList} maxPage={maxPage} />
-      <Footer>
-        <PriceSummary nextPagePath={PATH.option} />
-      </Footer>
     </Wrapper>
   );
 }
@@ -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
@@ -6,9 +6,9 @@ import { PATH } from '../../utils/constants';
 export default function OptionFooterContainer() {
   return (
     <Wrapper>
-      <FooterWrapper>
+      <Footer>
         <PriceSummary nextPagePath={PATH.result} />
-      </FooterWrapper>
+      </Footer>
     </Wrapper>
   );
 }
@@ -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
@@ -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 (
+    <Wrapper>
+      <Footer>
+        <PriceSummary nextPagePath={PATH.innerColor} />
+      </Footer>
+    </Wrapper>
+  );
+}
+
+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
@@ -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 (
     <Wrapper>
       <CardSlider title="외장 색상을 선택해주세요." cardList={cardPageList} maxPage={maxPage} />
-      <Footer>
-        <PriceSummary nextPagePath={PATH.innerColor} />
-      </Footer>
     </Wrapper>
   );
 }
@@ -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
@@ -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
@@ -4,6 +4,7 @@ import { BodyKrRegular3, HeadingKrMedium2 } from '../../styles/typefaces';
 import RectButton from '../../components/common/buttons/RectButton';
 import { HTMLAttributes, useContext } from 'react';
 import { ItemContext } from '../../context/ItemProvider';
+import { flexCenterCss } from '../../utils/commonStyle';
 
 interface IResultFooterContainer extends HTMLAttributes<HTMLDivElement> {
   handlePrint: () => void;
@@ -13,24 +14,35 @@ export default function ResultFooterContainer({ handlePrint }: IResultFooterCont
 
   return (
     <Wrapper>
-      <PriceSection>
-        <PriceCaption>최종 견적 가격</PriceCaption>
-        <Price>{totalPrice.toLocaleString()} 원</Price>
-      </PriceSection>
-      <ButtonSection>
-        <GrayButton type={'price'}>공유하기</GrayButton>
-        <GrayButton type={'price'} onClick={handlePrint}>
-          PDF 다운로드
-        </GrayButton>
-        <Button type={'price'}>상담신청</Button>
-      </ButtonSection>
+      <Footer>
+        <PriceSection>
+          <PriceCaption>최종 견적 가격</PriceCaption>
+          <Price>{totalPrice.toLocaleString()} 원</Price>
+        </PriceSection>
+        <ButtonSection>
+          <GrayButton type={'price'}>공유하기</GrayButton>
+          <GrayButton type={'price'} onClick={handlePrint}>
+            PDF 다운로드
+          </GrayButton>
+          <Button type={'price'}>상담신청</Button>
+        </ButtonSection>
+      </Footer>
     </Wrapper>
   );
 }
 
-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
@@ -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<IInnerColor[]>(`${INNER_COLOR_API}?carid=${1}`);
@@ -20,8 +22,16 @@ export default function InnerColorPage() {
 
   return (
     <>
-      <InnerColorBannerContainer />
-      <InnerColorSelectContainer />
+      <Wrapper>
+        <InnerColorBannerContainer />
+        <InnerColorSelectContainer />
+      </Wrapper>
+      <InnerColorFooterContainer />
     </>
   );
 }
+
+const Wrapper = styled.div`
+  height: 100%;
+  padding-bottom: 120px;
+`;
diff --git 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 (
     <>
-      <OuterColorBannerContainer />
-      <OuterColorSelectContainer />
+      <Wrapper>
+        <OuterColorBannerContainer />
+        <OuterColorSelectContainer />
+      </Wrapper>
+      <OuterColorFooterContainer />
     </>
   );
 }
+
+const Wrapper = styled.div`
+  height: 100%;
+  padding-bottom: 120px;
+`;