Theme Color를 Layout에서 동적으로 수정 (#210)

* chore: add react-helmet * feat: change theme color in layout
team-offonoff · Feb 15, 2024 · ca79bec · ca79bec
1 parent 03d663e
commit ca79bec
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -8,7 +8,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
     <meta name="description" content="My Awesome App description" />
-    <meta name="theme-color" content="#242036" />
     <title>AB - 세상의 모든 질문, AB로 답하다</title>
     <style>
       @font-face {

diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "framer-motion": "^10.16.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "react-hook-form": "^7.49.2",
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.16.0",
@@ -42,6 +43,7 @@
     "@tanstack/eslint-plugin-query": "^5.0.5",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "@types/react-helmet": "^6.1.11",
     "@types/react-modal": "^3.16.3",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",

diff --git a/src/components/commons/Layout/Layout.tsx b/src/components/commons/Layout/Layout.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import BottomNavigation from '../BottomNavigation/BottomNavigation';
-import { Row } from '../Flex/Flex';
 
 import {
   ChildrenContainer,
@@ -16,6 +16,7 @@ interface LayoutProps {
   HeaderCenter?: React.ReactNode;
   HeaderRight?: React.ReactNode;
   hasBottomNavigation?: boolean;
+  ThemeColor?: string;
   children: React.ReactNode;
 }
 
@@ -24,6 +25,9 @@ const Layout = (props: LayoutProps) => {
 
   return (
     <Main>
+      <Helmet>
+        <meta name="theme-color" content={props.ThemeColor || '#242036'} />
+      </Helmet>
       <Header>
         <HeaderSection style={{ justifySelf: 'start' }}>{HeaderLeft}</HeaderSection>
         <HeaderSection style={{ justifySelf: 'center' }}>{HeaderCenter}</HeaderSection>

diff --git a/src/routes/B/BTopics.tsx b/src/routes/B/BTopics.tsx
@@ -1,4 +1,5 @@
 import React, { ChangeEvent, useLayoutEffect, useState } from 'react';
+import { Helmet } from 'react-helmet';
 
 import useTopics from '@apis/topic/useTopics';
 import BTopicCard from '@components/B/BTopicCard';
@@ -39,6 +40,7 @@ const BTopics = () => {
 
   return (
     <Layout
+      ThemeColor="#0e0d16"
       hasBottomNavigation
       HeaderLeft={<BFillLogoIcon width={30} height={30} fill={colors.white} />}
       HeaderCenter={

diff --git a/yarn.lock b/yarn.lock
@@ -3799,6 +3799,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-helmet@^6.1.11":
+  version "6.1.11"
+  resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.11.tgz#8cafcafff38f75361f451563ba7b406b0c5d3907"
+  integrity sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-modal@^3.16.3":
   version "3.16.3"
   resolved "https://registry.yarnpkg.com/@types/react-modal/-/react-modal-3.16.3.tgz#250f32c07f1de28e2bcf9c3e84b56adaa6897013"
@@ -8042,6 +8049,21 @@ react-element-to-jsx-string@^15.0.0:
     is-plain-object "5.0.0"
     react-is "18.1.0"
 
+react-fast-compare@^3.1.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
+react-helmet@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
+  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.1.1"
+    react-side-effect "^2.1.0"
+
 react-hook-form@^7.49.2:
   version "7.49.2"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.49.2.tgz#6fb2742e1308020f26cb1915c7012b6c07b11ade"
@@ -8121,6 +8143,11 @@ react-router@6.16.0:
   dependencies:
     "@remix-run/router" "1.9.0"
 
+react-side-effect@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.2.tgz#dc6345b9e8f9906dc2eeb68700b615e0b4fe752a"
+  integrity sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==
+
 react-style-singleton@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"