Merge pull request #42 from NohWookJin/feature/#40

 Feature(#40): Add Dark Mode

src/Components/Profile/Profile.tsx

@@ -89,7 +89,7 @@ const Profile = () => {
         </div>
         <div className="flex flex-col gap-[5px]">
           <span className="text-[18px] font-semibold">SPRINTER</span>
-          <div className="bg-[#3A7CE1] cursor-pointer font-bold max-w-[60px] flex items-center justify-center rounded-[12px] py-[3px] shadow-lg border border-gray-300 transform transition-all duration-300 ease-in-out hover:scale-105">
+          <div className="border-none bg-[#3A7CE1] cursor-pointer font-bold max-w-[60px] flex items-center justify-center rounded-[12px] py-[3px] shadow-lg border border-gray-300 transform transition-all duration-300 ease-in-out hover:scale-105">
             <span className="text-[13px] text-[white]">
               <span className="pr-[2px] font-semibold">
                 {calculateDaysSinceCreated(profile?.createdAt as string)}
@@ -105,7 +105,7 @@ const Profile = () => {
               <>
                 {profile.badges.map((item, index) => (
                   <div
-                    className={`text-[13px] cursor-pointer font-bold w-fit flex items-center justify-center rounded-[12px] py-[3px] px-[10px]  ${onChangeBadge(
+                    className={`border-none text-[13px] cursor-pointer font-bold w-fit flex items-center justify-center rounded-[12px] py-[3px] px-[10px]  ${onChangeBadge(
                       item
                     )} shadow-lg border border-gray-300 transform transition-all duration-300 ease-in-out hover:scale-105`}
                     key={index}

src/Components/RoutineBlogDetail/QuillStlye.css

@@ -17,3 +17,12 @@
   background-color: rgb(255, 255, 255);
   width: 100%;
 }
+.dark .ql-container {
+  color: white;
+}
+
+.dark .ql-toolbar.ql-snow {
+  border: none !important;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+}

src/Components/RoutineBlogDetail/RoutineBlogDetailEditor.tsx

@@ -15,6 +15,8 @@ import "react-quill/dist/quill.snow.css";
 import "./QuillStlye.css";
 import { postBlog } from "../../API/routinesBlog";
 import { formatDateToISO } from "../../lib/timeFormatChange";
+import { useRecoilValue } from "recoil";
+import { themeState } from "../../Store/themeState";
 
 Quill.register("modules/imageActions", ImageActions);
 Quill.register("modules/imageFormats", ImageFormats);
@@ -26,6 +28,8 @@ interface BlogForm {
 }
 
 const RoutineBlogDetailEditor = () => {
+  const darkMode = useRecoilValue(themeState);
+
   const location = useLocation();
   const navigate = useNavigate();
 
@@ -183,14 +187,18 @@ const RoutineBlogDetailEditor = () => {
   return (
     <form
       onSubmit={onSubmit}
-      className="flex flex-col shadow-lg pt-[20px] relative"
+      className={`flex flex-col shadow-lg pt-[20px] relative ${
+        darkMode ? "dark: bg-[#23272f]" : ""
+      }`}
     >
       <div className="flex justify-center gap-[30px] mb-[20px]">
         <input
           onChange={onChangeTitle}
           placeholder="제목을 입력하세요."
           type="text"
-          className="px-[3px] py-[20px] w-[95%] text-[30px] border-b border-[#d9d9d9] focus:outline-none"
+          className={`px-[3px] pl-[20px] py-[20px] w-[100%] text-[30px] border-b border-[#d9d9d9] focus:outline-none ${
+            darkMode ? "dark: text-white bg-[#23272f]" : ""
+          }`}
         />
       </div>
       <ReactQuill
@@ -202,7 +210,13 @@ const RoutineBlogDetailEditor = () => {
         onChange={onChangeContent}
         placeholder="루틴을 시작해보세요..."
       />
-      <div className="absolute bg-white bottom-0 z-50 sticky shadow-2xl flex justify-between px-[15px] py-[15px]">
+      <div
+        className={`absolute bottom-0 z-50 sticky shadow-2xl flex justify-between px-[15px] py-[15px] ${
+          darkMode
+            ? "border-t dark: bg-[#23272f] text-white"
+            : "bg-white text-black"
+        }`}
+      >
         <button onClick={onClickBackArrow} className="font-semibold">
           &larr; 나가기
         </button>

src/Components/RoutineBlogDetail/RoutineBlogDetailEditorEdit.tsx

@@ -16,6 +16,8 @@ import "./QuillStlye.css";
 import { patchBlog } from "../../API/routinesBlog";
 import { useSetRecoilState } from "recoil";
 import { editState } from "../../Store/editState";
+import { useRecoilValue } from "recoil";
+import { themeState } from "../../Store/themeState";
 
 Quill.register("modules/imageActions", ImageActions);
 Quill.register("modules/imageFormats", ImageFormats);
@@ -41,6 +43,8 @@ const RoutineBlogDetailEditorEdit = ({
   content,
   date,
 }: EditProps) => {
+  const darkMode = useRecoilValue(themeState);
+
   const setIsEdit = useSetRecoilState(editState);
   const navigate = useNavigate();
 
@@ -156,15 +160,19 @@ const RoutineBlogDetailEditorEdit = ({
   return (
     <form
       onSubmit={onSubmit}
-      className="flex flex-col shadow-lg pt-[20px] relative"
+      className={`flex flex-col shadow-lg pt-[20px] relative ${
+        darkMode ? "dark: bg-[#23272f]" : ""
+      }`}
     >
       <div className="flex justify-center gap-[30px] mb-[20px]">
         <input
           onChange={onChangeTitle}
           placeholder="제목을 입력하세요."
           value={formDataBlog.title}
           type="text"
-          className="px-[3px] py-[20px] w-[95%] text-[30px] border-b border-[#d9d9d9] focus:outline-none"
+          className={`px-[3px] pl-[20px] py-[20px] w-[100%] text-[30px] border-b border-[#d9d9d9] focus:outline-none ${
+            darkMode ? "dark: text-white bg-[#23272f]" : ""
+          }`}
         />
       </div>
       <ReactQuill
@@ -176,7 +184,13 @@ const RoutineBlogDetailEditorEdit = ({
         onChange={onChangeContent}
         placeholder="루틴을 시작해보세요..."
       />
-      <div className="absolute bg-white bottom-0 z-50 sticky shadow-2xl flex justify-between px-[15px] py-[15px]">
+      <div
+        className={`absolute bottom-0 z-50 sticky shadow-2xl flex justify-between px-[15px] py-[15px] ${
+          darkMode
+            ? "border-t dark: bg-[#23272f] text-white"
+            : "bg-white text-black"
+        }`}
+      >
         <button onClick={onClickBackArrow} className="font-semibold">
           &larr; 취소하기
         </button>

src/Components/RoutineSetting/RoutineSettingItem.tsx

@@ -1,4 +1,6 @@
 import { FormEvent, useEffect, useRef, useState } from "react";
+import { useRecoilValue } from "recoil";
+import { themeState } from "../../Store/themeState";
 
 interface RoutineSettingItemProps {
   item: RoutineSettingItemDetail;
@@ -24,6 +26,7 @@ const RoutineSettingItem = ({
   const { name, colorSelection, id } = item;
   const [isEdit, setIsEdit] = useState<boolean>(false);
   const [newRoutineName, setNewRoutineName] = useState<string>(name);
+  const darkMode = useRecoilValue(themeState);
 
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -66,7 +69,9 @@ const RoutineSettingItem = ({
               ref={inputRef}
               value={newRoutineName}
               onChange={(e) => setNewRoutineName(e.target.value)}
-              className="focus:outline-none"
+              className={`focus:outline-none ${
+                darkMode ? "dark: bg-[#23272f] text-white" : ""
+              }`}
             />
           </form>
         ) : (