Fixes background bug

Author: velopert

src/App.tsx

@@ -13,6 +13,7 @@ import NotFoundPage from './pages/NotFoundPage';
 import { Helmet } from 'react-helmet-async';
 import HomePage from './pages/home/HomePage';
 import MainPageTemplate from './components/main/MainPageTemplate';
+import ConditionalBackground from './components/base/ConditionalBackground';
 
 const loadableConfig = {
   fallback: <PageTemplate />,
@@ -62,6 +63,7 @@ const App: React.FC<AppProps> = (props) => {
         <meta property="fb:app_id" content="203040656938507" />
         <meta property="og:image" content="https://images.velog.io/velog.png" />
       </Helmet>
+      <ConditionalBackground />
       <ErrorBoundary>
         <Switch>
           <Route path="/" component={HomePage} exact />

src/GlobalStyles.ts

@@ -10,7 +10,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   color: ${themedPalette.text1};
   box-sizing: border-box;
-  background: ${themedPalette.bg_page2};
+
 }
 
 * {
@@ -31,7 +31,6 @@ html, body, #root {
 }
 
 body {
-  background: ${themedPalette.bg_page2};
   ${themes.light}
 }
 

src/components/base/ConditionalBackground.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useMemo } from 'react';
+import { matchPath, useLocation } from 'react-router-dom';
+import { createGlobalStyle } from 'styled-components';
+import { themedPalette } from '../../lib/styles/themes';
+
+interface Props {}
+
+const GrayBackground = createGlobalStyle`
+  body {
+    background: ${themedPalette.bg_page1};
+  }
+`;
+
+const WhiteBackground = createGlobalStyle`
+  body {
+    background: ${themedPalette.bg_page2};
+  }
+`;
+
+/**
+ * Bacgkround should be gray on following paths
+ * - /
+ * - /recent
+ * - /lists
+ */
+function ConditionalBackground(props: Props) {
+  const location = useLocation();
+
+  const isGray = useMemo(
+    () =>
+      [{ path: '/', exact: true }, '/recent', '/lists'].some((path) =>
+        matchPath(location.pathname, path),
+      ),
+    [location],
+  );
+
+  return isGray ? <GrayBackground /> : <WhiteBackground />;
+}
+
+export default ConditionalBackground;

src/components/main/MainTemplate.tsx

@@ -1,12 +1,5 @@
 import React from 'react';
-import styled, { createGlobalStyle } from 'styled-components';
-import { themedPalette } from '../../lib/styles/themes';
-
-const BackgroundStyle = createGlobalStyle`
-  body {
-    background: ${themedPalette.bg_page1}!important;
-  }
-`;
+import styled from 'styled-components';
 
 export type MainTemplateProps = {
   children: React.ReactNode;
@@ -15,7 +8,6 @@ export type MainTemplateProps = {
 function MainTemplate({ children }: MainTemplateProps) {
   return (
     <>
-      <BackgroundStyle />
       <Block>{children}</Block>
     </>
   );