Merge pull request #81 from hanseulhee/feat/desktopEnv

[#80] apply desktopEnv
hanseulhee · Oct 30, 2022 · b6c8c69 · b6c8c69 · vercel · Oct 30, 2022
2 parents b2c0706 + ede2d87
commit b6c8c69
Show file tree

Hide file tree

Showing 20 changed files with 102 additions and 29 deletions.
diff --git 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
@@ -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
@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+
+interface Size {
+  width: number | undefined;
+  height: number | undefined;
+}
+
+function useWindowSize(): Size {
+  const [windowSize, setWindowSize] = useState<Size>({
+    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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,14 +15,18 @@ 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 {
     Kakao: any;
   }
 }
 
+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) {
         <RecoilRoot>
           <ThemeProvider theme={Theme}>
             <GlobalStyle />
-            {isWeb ? <WebWarning /> : ""}
+            {/* {isWeb ? <WebWarning /> : ""} */}
             <NextUIProvider>
               <Script
                 defer
                 crossOrigin="anonymous"
                 src="https://developers.kakao.com/sdk/js/kakao.js"
               />
-              <Nav searchField={searchField} setSearchField={setSearchField} />
-              <Component {...pageProps} searchField={searchField} />
-              <BottomLink />
+              <Layout>
+                <Nav
+                  searchField={searchField}
+                  setSearchField={setSearchField}
+                />
+                <Component {...pageProps} searchField={searchField} />
+                <BottomLink />
+              </Layout>
             </NextUIProvider>
           </ThemeProvider>
         </RecoilRoot>
@@ -82,3 +92,50 @@ function MyApp({ Component, pageProps }: AppProps) {
 }
 
 export default MyApp;
+
+function Layout({ children }: PropsWithChildren<{}>) {
+  const windowSize = useWindowSize();
+
+  useEffect(() => {
+    vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty("--vh", `${vh}px`);
+  }, [windowSize.height]);
+
+  return <div css={layoutCss}>{children}</div>;
+}
+
+const layoutCss = css`
+  min-height: calc(var(--var, 1vh) * 100);
+  max-width: 480px;
+  width: 100%;
+  margin: 0 auto;
+  height: 100vh;
+`;
+
+function useASCIICode() {
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      console.log(` 
+----------------------------------
+----------------------------------    
+-----##-----------------(#--------
+-----##-----------------#$--------
+-----@@-----------------@##~###---
+-----@;-----------------##--------
+-----!#-----------------=@--------
+-----##-----------------&#~;###---
+-----##@#@:##;=@#-------@#--------     
+------------------------##--------  
+----------------------------------
+-------##:$###+####;@@#$##-------- 
+-------##---------------##--------
+-------;#---------------##--------
+-------##---------------:#--------
+-------##---------------##--------
+-------#=~##*@@###@@@@##=@--------
+----------------------------------
+----------------------------------
+`);
+    }
+  });
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -41,7 +41,6 @@ const wrapper = css`
   min-height: 100%;
   position: relative;
   width: 100%;
-  padding-bottom: 3.85rem;
   overflow-x: hidden;
 `;