diff --git a/components/Cakes/CakesForm.tsx b/components/Cakes/CakesForm.tsx index 40aa8a9e..e091c0ef 100644 --- a/components/Cakes/CakesForm.tsx +++ b/components/Cakes/CakesForm.tsx @@ -60,7 +60,7 @@ export default function CakesForm(props: CakesFormProps) { }, [methods.watch()]); return ( - <> + {`D-${publicWishesData?.dayCount}`} @@ -103,11 +103,16 @@ export default function CakesForm(props: CakesFormProps) { {'케이크 주문하기'} - + ); } 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 index e19b36f8..4ae20d46 100644 --- 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 index 6a9f4305..f35ab53c 100644 --- 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 ( - <> + 닫기 @@ -21,11 +21,14 @@ export default function GuideModal(props: GuideModalProps) { 서비스 가이드 설명 - + ); } 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 index 164ae6cb..dfc8a5a7 100644 --- 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 index 447a5597..8869570f 100644 --- a/components/Mypage/Links/[id].tsx +++ b/components/Mypage/Links/[id].tsx @@ -25,7 +25,7 @@ export default function LinksContainer() { }; return ( - <> + {wishData?.title} {`${convertDateFormat(wishData?.startAt)} ~ ${convertDateFormat( wishData?.endAt, @@ -42,11 +42,15 @@ export default function LinksContainer() { - + ); } 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 index 3f8b4218..483e1a7b 100644 --- a/components/Mypage/Links/index.tsx +++ b/components/Mypage/Links/index.tsx @@ -34,7 +34,7 @@ export default function LinksMainContainer() { }; return ( - <> + {isOpen && ( 지난 소원 링크 모음 - + {noWishes ? ( ) : ( @@ -62,12 +62,16 @@ export default function LinksMainContainer() { handleCheckbox={handleCheckbox} /> )} - - + + ); } const Styled = { + Container: styled.div` + width: 100%; + height: 100vh; + `, Hedaer: styled.header` display: flex; justify-content: space-between; @@ -75,7 +79,7 @@ const Styled = { 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 index 020731e1..d9e74314 100644 --- 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 index a6b2cb3b..25206930 100644 --- 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 index 7bb3e75f..8179408f 100644 --- 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 index 05f32bd9..54f03aba 100644 --- 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;