[FEAT]: 환경에 따라 다크모드 진입

Author: Seol-JY

client/.pnp.cjs

@@ -6,6 +6,7 @@
   "dependencies": {
     "@reduxjs/toolkit": "^1.8.6",
     "react": "18.2.0",
+    "react-cookie": "^7.1.4",
     "react-dom": "18.2.0",
     "react-draggable": "4.4.5",
     "react-intersection-observer": "9.4.0",

client/.yarn/cache/@types-cookie-npm-0.6.0-1f4c3f48f0-5edce79957.zip

@@ -1,16 +1,30 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 export default function SidebarButton(props) {
   const [daynightico, setdaynightico] = useState("dark_mode");
   const [menustate, setmenustate] = useState("1");
 
+  useEffect(() => {
+    checker();
+  }, []);
+
   function checker() {
-    if (props.daynight % 2 === 1) {
-      document.documentElement.setAttribute("data-theme", "dark");
-      setdaynightico("light_mode");
+    if (props.daynight === 1) {
+      if (
+        window.matchMedia &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+      ) {
+        document.documentElement.setAttribute("data-theme", "dark");
+        setdaynightico("light_mode");
+      }
     } else {
-      document.documentElement.setAttribute("data-theme", "light");
-      setdaynightico("dark_mode");
+      if (props.daynight % 2 === 1) {
+        document.documentElement.setAttribute("data-theme", "dark");
+        setdaynightico("light_mode");
+      } else {
+        document.documentElement.setAttribute("data-theme", "light");
+        setdaynightico("dark_mode");
+      }
     }
   }
 

client/.yarn/cache/@types-hoist-non-react-statics-npm-3.3.5-98b8d8e47b-b645b062a2.zip

@@ -2472,6 +2472,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/cookie@npm:^0.6.0":
+  version: 0.6.0
+  resolution: "@types/cookie@npm:0.6.0"
+  checksum: 5edce7995775b0b196b142883e4d4f71fd93c294eaec973670f1fa2540b70ea7390408ed513ddefef5fcb12a578100c76596e8f2a714b0c2ae9f70ee773f4510
+  languageName: node
+  linkType: hard
+
 "@types/eslint-scope@npm:^3.7.3":
   version: 3.7.4
   resolution: "@types/eslint-scope@npm:3.7.4"
@@ -2555,6 +2562,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/hoist-non-react-statics@npm:^3.3.5":
+  version: 3.3.5
+  resolution: "@types/hoist-non-react-statics@npm:3.3.5"
+  dependencies:
+    "@types/react": "*"
+    hoist-non-react-statics: ^3.3.0
+  checksum: b645b062a20cce6ab1245ada8274051d8e2e0b2ee5c6bd58215281d0ec6dae2f26631af4e2e7c8abe238cdcee73fcaededc429eef569e70908f82d0cc0ea31d7
+  languageName: node
+  linkType: hard
+
 "@types/html-minifier-terser@npm:^6.0.0":
   version: 6.1.0
   resolution: "@types/html-minifier-terser@npm:6.1.0"
@@ -4329,6 +4346,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cookie@npm:^0.6.0":
+  version: 0.6.0
+  resolution: "cookie@npm:0.6.0"
+  checksum: f56a7d32a07db5458e79c726b77e3c2eff655c36792f2b6c58d351fb5f61531e5b1ab7f46987150136e366c65213cbe31729e02a3eaed630c3bf7334635fb410
+  languageName: node
+  linkType: hard
+
 "core-js-compat@npm:^3.21.0, core-js-compat@npm:^3.22.1":
   version: 3.24.0
   resolution: "core-js-compat@npm:3.24.0"
@@ -9994,6 +10018,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-cookie@npm:^7.1.4":
+  version: 7.1.4
+  resolution: "react-cookie@npm:7.1.4"
+  dependencies:
+    "@types/hoist-non-react-statics": ^3.3.5
+    hoist-non-react-statics: ^3.3.2
+    universal-cookie: ^7.0.0
+  peerDependencies:
+    react: ">= 16.3.0"
+  checksum: 274cb7ced460c17510a2b5236f0cb03717b533652c954027c5bf559588e85cabcb82b33845e720eccd3002cf46f132975fd05d0eff5bdea7c6fb9eb334635d7a
+  languageName: node
+  linkType: hard
+
 "react-dev-utils@npm:^12.0.1":
   version: 12.0.1
   resolution: "react-dev-utils@npm:12.0.1"
@@ -11042,6 +11079,7 @@ __metadata:
     eslint-plugin-react: latest
     eslint-plugin-react-hooks: latest
     react: 18.2.0
+    react-cookie: ^7.1.4
     react-dom: 18.2.0
     react-draggable: 4.4.5
     react-intersection-observer: 9.4.0
@@ -11779,6 +11817,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"universal-cookie@npm:^7.0.0":
+  version: 7.1.4
+  resolution: "universal-cookie@npm:7.1.4"
+  dependencies:
+    "@types/cookie": ^0.6.0
+    cookie: ^0.6.0
+  checksum: 2b3459dcac8b0062b6a1853a826d67314bb2311e16d803b521be72ff554a9b6cfeb36499241949995910f87587722d928e6801b39c80b621dccfd62d5b3022d8
+  languageName: node
+  linkType: hard
+
 "universalify@npm:^0.1.2":
   version: 0.1.2
   resolution: "universalify@npm:0.1.2"