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;