merge : 댓글,og 태그,모바일 반응형 구현

sheepdog13 · Feb 29, 2024 · 643ff9b · 643ff9b
2 parents cf2c843 + 535ea8a
commit 643ff9b
Show file tree

Hide file tree

Showing 14 changed files with 385 additions and 17 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@giscus/react": "^3.0.0",
     "@mui/icons-material": "^5.15.6",
     "@reduxjs/toolkit": "^2.0.1",
     "@testing-library/jest-dom": "^5.17.0",
@@ -16,6 +17,7 @@
     "http-proxy-middleware": "^2.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet-async": "^2.0.4",
     "react-hook-form": "^7.49.2",
     "react-markdown": "^9.0.1",
     "react-query": "^3.39.3",

diff --git a/client/public/icon.png b/client/public/icon.png
diff --git a/client/public/index.html b/client/public/index.html
@@ -2,14 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

diff --git a/client/src/App.js b/client/src/App.js
@@ -3,16 +3,20 @@ import { Route, Routes } from "react-router-dom";
 import LaindingPage from "./components/views/LandingPage/LandingPage";
 import LoginPage from "./components/views/LoginPage/LoginPage";
 import RegisterPage from "./components/views/RegisterPage/RegisterPage";
-import { ThemeProvider } from "styled-components";
+import styled, { ThemeProvider } from "styled-components";
 import { dark, light } from "./styles/theme";
 import { useSelector } from "react-redux";
 import PostPage from "./components/views/PostPage/PostPage";
+const Wrapper = styled.div`
+  background-color: ${(props) => props.theme.bgColor};
+  color: ${(props) => props.theme.textColor};
+`;
 
 function App() {
   const isDark = useSelector((state) => state.darkmode.isDark);
   const theme = isDark ? dark : light;
   return (
-    <>
+    <Wrapper>
       <ThemeProvider theme={theme}>
         <GlobalStyles />
         <Routes>
@@ -22,7 +26,7 @@ function App() {
           <Route path="/post/:failename" element={<PostPage />} />
         </Routes>
       </ThemeProvider>
-    </>
+    </Wrapper>
   );
 }
 

diff --git a/client/src/components/common/Comment.js b/client/src/components/common/Comment.js
@@ -0,0 +1,29 @@
+import React from "react";
+import Giscus from "@giscus/react";
+import { useSelector } from "react-redux";
+
+function Comment() {
+  const isDark = useSelector((state) => state.darkmode.isDark);
+  const theme = isDark ? "dark" : "light";
+  return (
+    <>
+      <Giscus
+        id="comments"
+        repo="sheepdog13/blogcomment"
+        repoId="R_kgDOLZClrw"
+        category="Announcements"
+        categoryId="DIC_kwDOLZClr84CdlHA"
+        mapping="title"
+        term="Welcome to @giscus/react component!"
+        reactionsEnabled="1"
+        emitMetadata="0"
+        inputPosition="bottom"
+        theme={theme}
+        lang="ko"
+        loading="lazy"
+      />
+    </>
+  );
+}
+
+export default Comment;