diff --git a/src/components/common/Category/BottomLink.tsx b/src/components/common/Category/BottomLink.tsx index 2586c3e..b8cb615 100644 --- a/src/components/common/Category/BottomLink.tsx +++ b/src/components/common/Category/BottomLink.tsx @@ -31,7 +31,7 @@ function BottomLink() { export default BottomLink; const wrapper = (theme: Theme) => css` - position: fixed; + position: sticky; left: 0; bottom: 0; width: 100%; @@ -40,7 +40,7 @@ const wrapper = (theme: Theme) => css` display: flex; flex-direction: row; align-items: center; - justify-content: center; + justify-content: flex-end; border-top: 1px solid ${theme.color.border}; background-color: ${theme.color.fullWhite}; diff --git a/src/components/common/Main/Carousel.tsx b/src/components/common/Main/Carousel.tsx index 5e0fe99..00dcaa3 100644 --- a/src/components/common/Main/Carousel.tsx +++ b/src/components/common/Main/Carousel.tsx @@ -59,7 +59,7 @@ export default Carousel; const slider = css` .slick-list { - width: 100vw; + width: 100%; margin: 0 auto; } .slick-slide div { @@ -69,7 +69,7 @@ const slider = css` const wrapper = css` position: relative; - width: 100vw; + width: 100%; height: auto; padding: 20px 0; top: 0; diff --git a/src/hooks/useWindowSize.ts b/src/hooks/useWindowSize.ts new file mode 100644 index 0000000..8c8258d --- /dev/null +++ b/src/hooks/useWindowSize.ts @@ -0,0 +1,30 @@ +import { useEffect, useState } from "react"; + +interface Size { + width: number | undefined; + height: number | undefined; +} + +function useWindowSize(): Size { + const [windowSize, setWindowSize] = useState({ + width: undefined, + height: undefined, + }); + + useEffect(() => { + const handleResize = () => { + setWindowSize({ + width: window.innerWidth, + height: window.innerHeight, + }); + }; + + window.addEventListener("resize", handleResize); + handleResize(); + return () => window.removeEventListener("resize", handleResize); + }, []); + + return windowSize; +} + +export default useWindowSize; diff --git a/src/pages/Category/Alone/index.tsx b/src/pages/Category/Alone/index.tsx index aa42f11..7525805 100644 --- a/src/pages/Category/Alone/index.tsx +++ b/src/pages/Category/Alone/index.tsx @@ -66,7 +66,6 @@ const fullSizeWrapper = (theme: Theme) => css` position: relative; width: 100%; min-height: 100%; - padding-bottom: 3.85rem; background-color: ${theme.color.fullWhite}; `; @@ -89,7 +88,7 @@ const inWrapper = css` const keywordMenu = (theme: Theme) => css` width: 100%; - padding: 0.75rem 0.6rem; + padding: 0.35rem 0.6rem 0.75rem 0.6rem; background-color: ${theme.color.fullWhite}; `; diff --git a/src/pages/Category/CostEffect/Rank.tsx b/src/pages/Category/CostEffect/Rank.tsx index 92088be..26c9b2d 100644 --- a/src/pages/Category/CostEffect/Rank.tsx +++ b/src/pages/Category/CostEffect/Rank.tsx @@ -52,7 +52,7 @@ const fullSizeWrapper = css` flex-direction: column; width: 100%; min-height: 100%; - padding: 1.25rem 1rem 3.85rem 1rem; + padding: 1.25rem 1rem 0rem 1rem; `; const title = (theme: Theme) => css` diff --git a/src/pages/Category/CostEffect/index.tsx b/src/pages/Category/CostEffect/index.tsx index 7a84f4c..10c21f0 100644 --- a/src/pages/Category/CostEffect/index.tsx +++ b/src/pages/Category/CostEffect/index.tsx @@ -68,7 +68,6 @@ const fullSizeWrapper = (theme: Theme) => css` position: relative; width: 100%; min-height: 100%; - padding-bottom: 3.85rem; background-color: ${theme.color.fullWhite}; `; diff --git a/src/pages/Category/Dining/index.tsx b/src/pages/Category/Dining/index.tsx index 37ad787..646c9f9 100644 --- a/src/pages/Category/Dining/index.tsx +++ b/src/pages/Category/Dining/index.tsx @@ -66,7 +66,6 @@ const fullSizeWrapper = (theme: Theme) => css` position: relative; width: 100%; min-height: 100%; - padding-bottom: 3.85rem; background-color: ${theme.color.fullWhite}; `; diff --git a/src/pages/Category/Hangover/index.tsx b/src/pages/Category/Hangover/index.tsx index d7084ae..dc33c6d 100644 --- a/src/pages/Category/Hangover/index.tsx +++ b/src/pages/Category/Hangover/index.tsx @@ -66,7 +66,6 @@ const fullSizeWrapper = (theme: Theme) => css` position: relative; width: 100%; min-height: 100%; - padding-bottom: 3.85rem; background-color: ${theme.color.fullWhite}; `; diff --git a/src/pages/Category/Ricefull/index.tsx b/src/pages/Category/Ricefull/index.tsx index 7c8c169..adf390e 100644 --- a/src/pages/Category/Ricefull/index.tsx +++ b/src/pages/Category/Ricefull/index.tsx @@ -63,8 +63,8 @@ export default Ricefull; const fullSizeWrapper = (theme: Theme) => css` position: relative; width: 100%; - min-height: 100%; - padding-bottom: 3.85rem; + /* min-height: 100%; */ + min-height: auto; background-color: ${theme.color.fullWhite}; `; diff --git a/src/pages/Category/Ricefull/introduce.tsx b/src/pages/Category/Ricefull/introduce.tsx index f1e1646..180822d 100644 --- a/src/pages/Category/Ricefull/introduce.tsx +++ b/src/pages/Category/Ricefull/introduce.tsx @@ -98,7 +98,6 @@ const mainSizeWrapper = css` position: relative; min-height: 100%; width: 100%; - padding-bottom: 3.85rem; `; const introSizeWrapper = css` @@ -143,7 +142,7 @@ const cardWrapper = css` const cardInWrapper = css` display: flex; flex-direction: row; - width: 100vw; + width: 100%; cursor: grab; `; diff --git a/src/pages/Detail/[detailId].tsx b/src/pages/Detail/[detailId].tsx index 0820092..f3fab0f 100644 --- a/src/pages/Detail/[detailId].tsx +++ b/src/pages/Detail/[detailId].tsx @@ -84,7 +84,6 @@ const fullSizeWrapper = css` position: relative; width: 100%; min-height: 100%; - padding-bottom: 3.85rem; margin-top: 0.9rem; `; diff --git a/src/pages/Inquiry/index.tsx b/src/pages/Inquiry/index.tsx index 2b10ff7..1e92638 100644 --- a/src/pages/Inquiry/index.tsx +++ b/src/pages/Inquiry/index.tsx @@ -29,7 +29,6 @@ const mainSizeWrapper = css` position: relative; min-height: 100%; width: 100%; - padding-bottom: 3.85rem; `; const itemSizeWrapper = css` diff --git a/src/pages/Introduce/index.tsx b/src/pages/Introduce/index.tsx index 1261384..de7d0ee 100644 --- a/src/pages/Introduce/index.tsx +++ b/src/pages/Introduce/index.tsx @@ -67,7 +67,6 @@ const mainSizeWrapper = css` position: relative; min-height: 100%; width: 100%; - padding-bottom: 3.85rem; `; const itemSizeWrapper = css` diff --git a/src/pages/Notice/Report.tsx b/src/pages/Notice/Report.tsx index cbc71f5..c2e9afe 100644 --- a/src/pages/Notice/Report.tsx +++ b/src/pages/Notice/Report.tsx @@ -66,7 +66,6 @@ const mainSizeWrapper = css` position: relative; min-height: 100%; width: 100%; - padding-bottom: 3.85rem; `; const itemWrapper = (theme: Theme) => css` diff --git a/src/pages/Review/Introduce.tsx b/src/pages/Review/Introduce.tsx index f8772f8..3dd5f60 100644 --- a/src/pages/Review/Introduce.tsx +++ b/src/pages/Review/Introduce.tsx @@ -26,7 +26,6 @@ const mainSizeWrapper = css` position: relative; min-height: 100%; width: 100%; - padding-bottom: 3.85rem; `; const itemSizeWrapper = css` diff --git a/src/pages/Review/[slug].tsx b/src/pages/Review/[slug].tsx index 8f351f2..13925e1 100644 --- a/src/pages/Review/[slug].tsx +++ b/src/pages/Review/[slug].tsx @@ -86,7 +86,6 @@ const itemSize = css` display: flex; flex-direction: column; position: relative; - padding-bottom: 3.85rem; `; const itemPadding = css` diff --git a/src/pages/Review/index.tsx b/src/pages/Review/index.tsx index d786c29..bb47240 100644 --- a/src/pages/Review/index.tsx +++ b/src/pages/Review/index.tsx @@ -41,7 +41,6 @@ const itemSize = css` position: relative; min-height: 100%; width: 100%; - padding-bottom: 3.85rem; `; const itemPadding = css` diff --git a/src/pages/Search/index.tsx b/src/pages/Search/index.tsx index ef08727..560b6df 100644 --- a/src/pages/Search/index.tsx +++ b/src/pages/Search/index.tsx @@ -41,7 +41,6 @@ const wrapper = css` min-height: 100%; position: relative; width: 100%; - padding-bottom: 3.85rem; `; const textWrapper = css` @@ -57,7 +56,7 @@ const cardWrapper = css` flex-direction: row; justify-content: center; width: 100%; - height: auto; + min-height: 100vh; flex-wrap: wrap; `; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index ef31ef9..4d0f0c8 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,10 +1,11 @@ import type { AppProps } from "next/app"; +import { css } from "@emotion/react"; import Head from "next/head"; import { NextUIProvider } from "@nextui-org/react"; import { ThemeProvider } from "@emotion/react"; import Theme from "styles/Theme"; import GlobalStyle from "styles/GlobalStyle"; -import { useEffect, useState } from "react"; +import { PropsWithChildren, useEffect, useState } from "react"; import BottomLink from "components/common/Category/BottomLink"; import Nav from "components/Nav"; import WebWarning from "components/common/Main/WebWarning"; @@ -14,6 +15,7 @@ import { useRouter } from "next/router"; import * as gtag from "libs/gtag"; import Script from "next/script"; import { RecoilRoot } from "recoil"; +import useWindowSize from "hooks/useWindowSize"; declare global { interface Window { @@ -21,7 +23,10 @@ declare global { } } +let vh = 0; + function MyApp({ Component, pageProps }: AppProps) { + useASCIICode(); useEffect(() => { const id = "kakao-sdk"; if (document.getElementById(id) == null) { @@ -63,16 +68,21 @@ function MyApp({ Component, pageProps }: AppProps) { - {isWeb ? : ""} + {/* {isWeb ? : ""} */}