Merge branch 'feature/196-addFooter' into develop

Make-A-Wish-Sopt · Feb 2, 2024 · a6a2a32 · a6a2a32
2 parents 97d85a3 + 1d1d801
commit a6a2a32
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 14 deletions.
diff --git a/components/Cakes/CakesForm.tsx b/components/Cakes/CakesForm.tsx
@@ -60,7 +60,7 @@ export default function CakesForm(props: CakesFormProps) {
   }, [methods.watch()]);
 
   return (
-    <>
+    <Styled.SectionContainer>
       <Styled.HeaderWrapper>
         <BackBtn />
         <span>{`D-${publicWishesData?.dayCount}`}</span>
@@ -103,11 +103,16 @@ export default function CakesForm(props: CakesFormProps) {
           {'케이크 주문하기'}
         </Button>
       </Styled.ButtonWrapper>
-    </>
+    </Styled.SectionContainer>
   );
 }
 
 const Styled = {
+  SectionContainer: styled.section`
+    width: 100%;
+    height: 100%;
+  `,
+
   HeaderWrapper: styled.div`
     display: flex;
     justify-content: space-between;

diff --git a/components/Cakes/index.tsx b/components/Cakes/index.tsx
@@ -83,7 +83,7 @@ const Styled = {
     flex-direction: column;
     justify-content: space-between;
 
-    height: 100svh;
+    height: 100%;
   `,
 
   Header: styled.header`

diff --git a/components/Common/Modal/GuideModal.tsx b/components/Common/Modal/GuideModal.tsx
@@ -11,7 +11,7 @@ export default function GuideModal(props: GuideModalProps) {
   const { handleToggle } = props;
 
   return (
-    <>
+    <Styled.Container>
       <Styled.ButtonContainer onClick={handleToggle}>
         <Image src={CloseWhiteIc} alt="닫기" />
       </Styled.ButtonContainer>
@@ -21,11 +21,14 @@ export default function GuideModal(props: GuideModalProps) {
           <Image src={GuideContentImg} alt="서비스 가이드 설명" width="300" />
         </Styled.ScrollContent>
       </Styled.Content>
-    </>
+    </Styled.Container>
   );
 }
 
 const Styled = {
+  Container: styled.div`
+    padding-top: 4rem;
+  `,
   Content: styled.div`
     display: flex;
     flex-direction: column;

diff --git a/components/Mypage/Letters/LettersMain.tsx b/components/Mypage/Letters/LettersMain.tsx
@@ -90,6 +90,7 @@ export default function LettersMainContainer() {
 const Styled = {
   Container: styled.div`
     margin: 0 1rem 0;
+    padding-bottom: 3rem;
   `,
 
   Title: styled.h1`

diff --git a/components/Mypage/Links/[id].tsx b/components/Mypage/Links/[id].tsx
@@ -25,7 +25,7 @@ export default function LinksContainer() {
   };
 
   return (
-    <>
+    <Styled.Container>
       <Styled.Title>{wishData?.title}</Styled.Title>
       <Styled.Date>{`${convertDateFormat(wishData?.startAt)} ~ ${convertDateFormat(
         wishData?.endAt,
@@ -42,11 +42,15 @@ export default function LinksContainer() {
 
         <VerticalProgressBar percent={wishData?.percent} />
       </Styled.CenterContainer>
-    </>
+    </Styled.Container>
   );
 }
 
 const Styled = {
+  Container: styled.section`
+    width: 100%;
+    height: 100%;
+  `,
   Title: styled.div`
     ${theme.fonts.headline24_130};
     color: ${theme.colors.gray4};

diff --git a/components/Mypage/Links/index.tsx b/components/Mypage/Links/index.tsx
@@ -34,7 +34,7 @@ export default function LinksMainContainer() {
   };
 
   return (
-    <>
+    <Styled.Container>
       {isOpen && (
         <Modal isOpen={isOpen} handleToggle={handleToggle}>
           <DeleteModal
@@ -52,7 +52,7 @@ export default function LinksMainContainer() {
       </Styled.Hedaer>
 
       <Styled.Title>지난 소원 링크 모음</Styled.Title>
-      <Styled.Container>
+      <Styled.SectionContainer>
         {noWishes ? (
           <NoWishLists />
         ) : (
@@ -62,20 +62,24 @@ export default function LinksMainContainer() {
             handleCheckbox={handleCheckbox}
           />
         )}
-      </Styled.Container>
-    </>
+      </Styled.SectionContainer>
+    </Styled.Container>
   );
 }
 
 const Styled = {
+  Container: styled.div`
+    width: 100%;
+    height: 100vh;
+  `,
   Hedaer: styled.header`
     display: flex;
     justify-content: space-between;
 
     width: 100%;
   `,
 
-  Container: styled.div`
+  SectionContainer: styled.section`
     position: relative;
 
     margin: 0 1rem 0;

diff --git a/components/Mypage/index.tsx b/components/Mypage/index.tsx
@@ -179,6 +179,7 @@ const Styled = {
 
   TextButton: styled.li`
     line-height: 30px;
+    margin-bottom: 3rem;
 
     cursor: pointer;
   `,

diff --git a/components/footer.tsx b/components/footer.tsx
@@ -61,7 +61,7 @@ const Styled = {
 
   Logo: styled.h1`
     color: ${theme.colors.white};
-    color: ${theme.fonts.headline24_130};
+    ${theme.fonts.headline24_130};
   `,
 
   HorizontalLine: styled.hr`

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -9,6 +9,7 @@ import theme from '@/styles/theme';
 import { useEffect } from 'react';
 import Script from 'next/script';
 import Loading from '@/components/Common/Loading/Loading';
+import Footer from '@/components/footer';
 
 declare global {
   interface Window {
@@ -75,9 +76,12 @@ export default function App({ Component, pageProps }: AppProps) {
 }
 
 const RootLayout = styled.div`
+  position: relative;
+
   display: flex;
   flex-direction: column;
   align-items: center;
 
   width: 100%;
+  min-height: 100%;
 `;
diff --git a/styles/GlobalStyle.tsx b/styles/GlobalStyle.tsx
@@ -44,9 +44,12 @@ footer, header, hgroup, menu, nav, section {
     --vh: 100%;
   }
 
+  html, body {
+    height: 100%;
+  }
+
 	html {
     -webkit-touch-callout: none;
-    /* -webkit-user-select:none; */
     -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
 
     scroll-behavior: smooth;