Feat: 다크 테마 추가

OZ-Coding-School · Sep 9, 2024 · c73936a · c73936a
1 parent 75d9906
commit c73936a
Show file tree

Hide file tree

Showing 23 changed files with 104 additions and 83 deletions.
diff --git a/src/api/axios.ts b/src/api/axios.ts
@@ -2,7 +2,7 @@ import axios from "axios";
 
 export const axiosInstance = axios.create({
     //? LOCAL
-     //baseURL: "/api",
+    // baseURL: "/api",
     //? SERVER
     baseURL: "https://api.hunsuking.yoyobar.xyz/api",
     headers: {

diff --git a/src/common/badge/BadgeDesc.tsx b/src/common/badge/BadgeDesc.tsx
@@ -15,7 +15,7 @@ const Badge = ({ icon, text }: BadgeProps) => {
             {icon}
             <div
                 className={tw(
-                    "bg-primary-second bg-opacity-50 rounded-full text-literal-normal h-[30px] flex items-center px-4"
+                    "bg-primary-second dark:bg-slate-600 bg-opacity-50 rounded-full dark:text-gray-100 text-literal-normal h-[30px] flex items-center px-4"
                 )}
             >
                 {text}
@@ -29,22 +29,22 @@ const BadgeDesc = () => {
         <motion.div
             animate={{ translateX: [10, 0], opacity: [0, 1] }}
             transition={{ delay: 0.3, duration: 0.5 }}
-            className="space-y-[22px] font-default"
+            className="space-y-[22px] font-default "
         >
             <Badge
-                icon={<RiGroupLine className="text-primary-second-dark size-6" />}
+                icon={<RiGroupLine className="text-primary-second-dark dark:text-gray-100 size-6" />}
                 text="전문가와 조언을 나누고 싶어요."
             />
             <Badge
-                icon={<RiEmotionHappyLine className="text-primary-second-dark size-6" />}
+                icon={<RiEmotionHappyLine className="text-primary-second-dark dark:text-gray-100 size-6" />}
                 text="유머와 창의성으로 피드백을 받고 싶어요."
             />
             <Badge
-                icon={<RiLightbulbLine className="text-primary-second-dark size-6" />}
+                icon={<RiLightbulbLine className="text-primary-second-dark dark:text-gray-100 size-6" />}
                 text="훈수와 아이디어로 영감을 얻고 싶어요."
             />
             <Badge
-                icon={<HiOutlineMegaphone className="text-primary-second-dark size-6" />}
+                icon={<HiOutlineMegaphone className="text-primary-second-dark dark:text-gray-100 size-6" />}
                 text="내 조언을 널리 알리고 싶어요."
             />
         </motion.div>

diff --git a/src/common/comment/CommentDetail.tsx b/src/common/comment/CommentDetail.tsx
@@ -146,8 +146,8 @@ const CommentDetail = ({
             <div
                 className={tw(
                     "relative h-full rounded-2xl p-4 flex flex-col justify-between mb-4 shadow-inner text-literal-normal",
-                    color === "default" && "bg-gray-100 sm:w-[90%] w-full",
-                    color === "writer" && "bg-primary-second bg-opacity-60 sm:w-[90%] w-full",
+                    color === "default" && "bg-gray-100 dark:bg-stone-300 sm:w-[90%] w-full",
+                    color === "writer" && "bg-primary-second dark:bg-slate-300 bg-opacity-60 sm:w-[90%] w-full",
                     color === "ai" && "bg-slate-800 text-white w-full mt-3",
                     className
                 )}

diff --git a/src/common/content/Content.tsx b/src/common/content/Content.tsx
@@ -52,7 +52,7 @@ const Content = ({ thumbnail_image, title, content, onClick, id }: ContentProps)
                         dangerouslySetInnerHTML={{
                             __html: sanitizeAndRemoveImages(truncateText(content, 300)),
                         }}
-                        className="tiptap prose ProseMirror text-[16px] text-black break-words dark:text-white"
+                        className="tiptap prose ProseMirror text-[16px] text-black break-words dark:text-white dark:prose-strong:text-gray-200 dark:prose-headings:text-gray-200"
                     />
                 </div>
             </div>

diff --git a/src/common/content/ContentFooter.tsx b/src/common/content/ContentFooter.tsx
@@ -74,7 +74,9 @@ const ContentFooter = ({
                             <Icon
                                 className={tw(
                                     "transition-colors duration-200",
-                                    hoverIndex === index ? "text-primary-second-dark" : "text-primary-second"
+                                    hoverIndex === index
+                                        ? "text-primary-second-dark dark:text-rose-600"
+                                        : "text-primary-second dark:text-rose-300"
                                 )}
                             />
                             <p className="text-sm min-w-[80px] text-left dark:text-white">{item.count}</p>

diff --git a/src/common/content/ContentMyPage.tsx b/src/common/content/ContentMyPage.tsx
@@ -87,10 +87,10 @@ const ContentMyPage = ({ activeTab, article, comment }: ContentMyPageProps) => {
                     </div>
                 </div>
                 <div
-                    className="bg-white px-6 py-4 w-full rounded-2xl cursor-pointer duration-200 hover:shadow-md hover:-translate-y-1"
+                    className="bg-white dark:bg-gray-800 px-6 py-4 w-full rounded-2xl cursor-pointer duration-200 hover:shadow-md hover:-translate-y-1"
                     onClick={() => openDetailModal(article.article_id)}
                 >
-                    <p className="text-base sm:text-lg font-default text-literal-normal pb-3 border-b border-b-gray-100">
+                    <p className="text-base sm:text-lg font-default text-literal-normal pb-3 border-b border-b-gray-100 dark:text-gray-100">
                         {article.title}
                     </p>
                     <div
@@ -105,7 +105,7 @@ const ContentMyPage = ({ activeTab, article, comment }: ContentMyPageProps) => {
                         )}
                     </div>
                     <div
-                        className="my-3 text-literal-normal font-normal text-sm overflow-hidden custom-code-block tiptab prose ProseMirror"
+                        className="my-3 text-literal-normal font-normal text-sm overflow-hidden custom-code-block tiptap prose ProseMirror dark:text-white dark:prose-strong:text-gray-200 dark:prose-headings:text-gray-200"
                         dangerouslySetInnerHTML={{
                             __html: sanitizeAndRemoveImages(truncateText(article.content, 300)),
                         }}
@@ -134,7 +134,9 @@ const ContentMyPage = ({ activeTab, article, comment }: ContentMyPageProps) => {
         return (
             <div className="max-w-[780px] min-w-[300px] my-5">
                 <div className="sm:flex gap-2 mb-3 ml-2">
-                    <p className="text-sm font-medium mr-4 text-literal-normal">{comment.article_user_nickname}</p>
+                    <p className="text-sm font-medium mr-4 dark:text-gray-100 text-literal-normal">
+                        {comment.article_user_nickname}
+                    </p>
 
                     <div className="flex gap-2 sm:mt-0 mt-2">
                         <p className="text-sm text-gray-600 mr-2 font-default">{formattedDate}</p>
@@ -146,10 +148,10 @@ const ContentMyPage = ({ activeTab, article, comment }: ContentMyPageProps) => {
                     </div>
                 </div>
                 <div
-                    className="bg-white px-6 py-4 w-full rounded-2xl cursor-pointer duration-200 hover:shadow-md hover:-translate-y-1"
+                    className="bg-white dark:bg-gray-800 px-6 py-4 w-full rounded-2xl cursor-pointer duration-200 hover:shadow-md hover:-translate-y-1"
                     onClick={() => openDetailModal(Number(comment.article_id))}
                 >
-                    <p className="text-base sm:text-lg font-default text-literal-normal pb-3 border-b border-b-gray-100">
+                    <p className="text-base sm:text-lg font-default dark:text-gray-100 text-literal-normal pb-3 border-b border-b-gray-100">
                         {comment.article_title}
                     </p>
                     <p className="font-default text-sm text-gray-600 font-normal p-2">

diff --git a/src/common/editor/Editor.tsx b/src/common/editor/Editor.tsx
@@ -87,7 +87,7 @@ const TipTapEditor: React.FC<EditorProps> = ({
         content: initialContent,
         editorProps: {
             attributes: {
-                class: "font-default text-[18px] text-black",
+                class: "font-default text-[18px] text-black dark:text-gray-100",
             },
         },
         onUpdate: ({ editor }) => {
@@ -120,7 +120,7 @@ const TipTapEditor: React.FC<EditorProps> = ({
     return (
         <div className="w-full h-full flex flex-col font-default">
             <input
-                className="outline-none mb-4 font-default text-lg w-full placeholder:text-[#999]"
+                className="dark:bg-gray-900 dark:text-gray-100 outline-none mb-4 font-default text-lg w-full placeholder:text-[#999]"
                 required
                 maxLength={30}
                 placeholder="제목"

diff --git a/src/common/header/Header.tsx b/src/common/header/Header.tsx
@@ -7,9 +7,7 @@ import { articleApi, authApi } from "../../api";
 import { useArticleStore, useAuthStore } from "../../config/store";
 import { motion } from "framer-motion";
 import useDarkMode from "../../hooks/useDarkmode";
-import { AiOutlineSun } from "react-icons/ai";
-import { AiOutlineMoon } from "react-icons/ai";
-
+import { MdDarkMode, MdLightMode } from "react-icons/md";
 const Header = () => {
     const nav = useNavigate();
     const { setStatus, status } = useAuthStore();
@@ -44,9 +42,13 @@ const Header = () => {
                         <HeaderSearch />
                         <button
                             onClick={switchDarkMode}
-                            className="px-3 py-1 text-gray-100 border-none rounded-md bg-primary dark:bg-primary dark:text-white"
+                            className=" text-gray-100 border-none rounded-md bg-primary dark:bg-primary dark:text-white"
                         >
-                            {isDarkMode ? <AiOutlineSun /> : <AiOutlineMoon />}
+                            {isDarkMode ? (
+                                <MdLightMode className="size-6 text-gray-200" />
+                            ) : (
+                                <MdDarkMode className="size-6 text-gray-200" />
+                            )}
                         </button>
                         {status === true && <HeaderInfoLogged />}
                         {status === false && <HeaderInfo />}

diff --git a/src/common/modal/ModalConfirm.tsx b/src/common/modal/ModalConfirm.tsx
@@ -65,10 +65,12 @@ const ModalConfirm = ({ onClose, parentOnClose, isOpen }: ModalConfirmProps) =>
                     animate={{ opacity: [1], translateY: 0 }}
                     exit={{ opacity: 0 }}
                     onClick={(e) => e.stopPropagation()}
-                    className="outline-none w-full h-full md:w-[570px] md:h-[240px] md:rounded-3xl bg-white relative flex justify-center items-center"
+                    className="dark:bg-gray-900 outline-none w-full h-full md:w-[570px] md:h-[240px] md:rounded-3xl bg-white relative flex justify-center items-center"
                 >
                     <div className="px-12 md:px-[110px] flex flex-col w-full h-full justify-center items-center">
-                        <div className="w-full font-bold text-lg font-point text-center ">글 작성 취소</div>
+                        <div className="w-full font-bold text-lg font-point text-center dark:text-gray-100">
+                            글 작성 취소
+                        </div>
                         <div className="text-literal-error mt-5 w-full text-center font-semibold">
                             작성을 취소하시겠습니까? 내용은 저장되지 않습니다.
                         </div>
@@ -85,7 +87,7 @@ const ModalConfirm = ({ onClose, parentOnClose, isOpen }: ModalConfirmProps) =>
                     <IoClose
                         onClick={onClose}
                         title="닫기"
-                        className="absolute text-gray-400 hover:text-gray-800 transition cursor-pointer w-[28px] h-[28px] top-2 right-2"
+                        className="absolute text-gray-400 dark:hover:text-gray-100 hover:text-gray-800 transition cursor-pointer w-[28px] h-[28px] top-2 right-2"
                     />
                 </motion.nav>
             </div>

diff --git a/src/common/modal/ModalDelete.tsx b/src/common/modal/ModalDelete.tsx
@@ -56,10 +56,12 @@ const ModalDelete = ({ onClose, parentOnClose, isOpen, id }: ModalDeleteProps) =
                     animate={{ opacity: [1], translateY: 0 }}
                     exit={{ opacity: 0 }}
                     onClick={(e) => e.stopPropagation()}
-                    className="outline-none w-full h-full md:w-[570px] md:h-[240px] md:rounded-3xl bg-white relative flex justify-center items-center"
+                    className="dark:bg-gray-900 outline-none w-full h-full md:w-[570px] md:h-[240px] md:rounded-3xl bg-white relative flex justify-center items-center"
                 >
                     <div className="px-12 md:px-[110px] flex flex-col w-full h-full justify-center items-center">
-                        <div className="w-full font-bold text-lg font-point text-center ">훈수 삭제</div>
+                        <div className="w-full font-bold text-lg font-point text-center dark:text-gray-100">
+                            훈수 삭제
+                        </div>
                         <div className="text-literal-error mt-5 w-full text-center font-semibold">
                             정말 게시글을 삭제하시겠습니까?
                         </div>
@@ -76,7 +78,7 @@ const ModalDelete = ({ onClose, parentOnClose, isOpen, id }: ModalDeleteProps) =
                     <IoClose
                         onClick={onClose}
                         title="닫기"
-                        className="absolute text-gray-400 hover:text-gray-800 transition cursor-pointer w-[28px] h-[28px] top-2 right-2"
+                        className="absolute dark:hover:text-gray-100 text-gray-400 hover:text-gray-800 transition cursor-pointer w-[28px] h-[28px] top-2 right-2"
                     />
                 </motion.nav>
             </div>

diff --git a/src/common/modal/ModalDetail.tsx b/src/common/modal/ModalDetail.tsx
@@ -159,7 +159,7 @@ const ModalDetail = ({ onClose, isOpen, parent, articleId, onSelect }: DetailMod
                     animate={{ opacity: [1], translateY: 0 }}
                     exit={{ opacity: 0 }}
                     onClick={(e) => e.stopPropagation()}
-                    className="outline-none w-full h-full md:w-[870px] md:max-h-[95vh] md:rounded-md bg-white relative py-10 px-5 md:px-14 overflow-auto"
+                    className="dark:bg-gray-900 outline-none w-full h-full md:w-[870px] md:max-h-[95vh] md:rounded-md bg-white relative py-10 px-5 md:px-14 overflow-auto"
                 >
                     {isLoading ? (
                         <div className="flex justify-center items-center h-full"></div>
@@ -180,14 +180,14 @@ const ModalDetail = ({ onClose, isOpen, parent, articleId, onSelect }: DetailMod
                                             <>
                                                 <span
                                                     onClick={() => handleReArticle(String(articleData.article_id))}
-                                                    className="cursor-pointer duration-150 hover:text-literal-normal"
+                                                    className="cursor-pointer duration-150 hover:text-literal-normal dark:hover:text-gray-100"
                                                 >
                                                     수정
                                                 </span>
                                                 /
                                                 <span
                                                     onClick={() => setModalDeleteStatus(true)}
-                                                    className="cursor-pointer duration-150 hover:text-literal-normal"
+                                                    className="cursor-pointer duration-150 hover:text-literal-normal dark:hover:text-gray-100"
                                                 >
                                                     삭제
                                                 </span>
@@ -198,8 +198,10 @@ const ModalDetail = ({ onClose, isOpen, parent, articleId, onSelect }: DetailMod
                             </div>
                             <div className="text-sm flex pb-3 flex-wrap justify-between gap-1">
                                 <div className="flex gap-3">
-                                    <p className="font-semibold">{articleData && articleData.user.nickname}</p>
-                                    <p className="text-gray-500 font-normal">{formattedDate}</p>
+                                    <p className="font-semibold dark:text-gray-100">
+                                        {articleData && articleData.user.nickname}
+                                    </p>
+                                    <p className="text-gray-500 font-normal dark:text-gray-400">{formattedDate}</p>
                                 </div>
                                 {articleData && user.user_id !== articleData.user.user_id && (
                                     <div className="flex items-center gap-1 cursor-pointer duration-200 rounded-md px-1">
@@ -213,12 +215,12 @@ const ModalDetail = ({ onClose, isOpen, parent, articleId, onSelect }: DetailMod
                                     </div>
                                 )}
                             </div>
-                            <div className="text-xl my-2">{articleData && articleData.title}</div>
+                            <div className="text-xl my-2 dark:text-gray-100">{articleData && articleData.title}</div>
                             <div
                                 dangerouslySetInnerHTML={{
                                     __html: sanitizer((articleData && articleData.content) as string),
                                 }}
-                                className="pt-3 text-[16px] pb-20 mb-3 border-b border-gray-100 tiptap prose ProseMirror"
+                                className="pt-3 text-[16px] pb-20 mb-3 border-b border-gray-100 tiptap prose ProseMirror dark:text-white dark:prose-strong:text-gray-200 dark:prose-headings:text-gray-200"
                             />
 
                             {articleData &&
@@ -287,7 +289,7 @@ const ModalDetail = ({ onClose, isOpen, parent, articleId, onSelect }: DetailMod
                     <IoClose
                         onClick={onClose}
                         title="닫기"
-                        className="absolute text-gray-400 hover:text-gray-800 transition cursor-pointer w-[28px] h-[28px] top-2 right-2"
+                        className="dark:hover:text-gray-100 absolute text-gray-400 hover:text-gray-800 transition cursor-pointer w-[28px] h-[28px] top-2 right-2"
                     />
                 </motion.nav>
 

diff --git a/src/common/modal/ModalEditor.tsx b/src/common/modal/ModalEditor.tsx
@@ -163,9 +163,9 @@ const ModalEditor = ({ onClose, isOpen, parent }: ModalProps) => {
                     animate={{ opacity: 1, scale: 1 }}
                     exit={{ opacity: 0, scale: 0.95 }}
                     onClick={(e) => e.stopPropagation()}
-                    className="relative outline-none w-full xl:max-w-4xl h-full xl:max-h-[90vh] bg-white xl:rounded-lg shadow-xl flex flex-col"
+                    className="dark:bg-gray-900 relative outline-none w-full xl:max-w-4xl h-full xl:max-h-[90vh] bg-white xl:rounded-lg shadow-xl flex flex-col"
                 >
-                    <div className="flex-grow overflow-hidden p-4">
+                    <div className=" flex-grow overflow-hidden p-4">
                         <TipTapEditor
                             initialTitle={title}
                             initialContent={content}
@@ -184,7 +184,7 @@ const ModalEditor = ({ onClose, isOpen, parent }: ModalProps) => {
                     <IoClose
                         onClick={handleArticleCancel}
                         title="닫기"
-                        className="absolute text-gray-400 hover:text-gray-800 transition cursor-pointer w-[28px] h-[28px] top-2 right-2"
+                        className="absolute dark:hover:text-gray-100 text-gray-400 hover:text-gray-800 transition cursor-pointer w-[28px] h-[28px] top-2 right-2"
                     />
                 </motion.nav>
                 <AnimatePresence>