Merge pull request #47 from Help-M-Ssaem/design/#46

[Design] 다크모드 관련 색상 설정
Help-M-Ssaem · Aug 21, 2024 · 1d6ef87 · 1d6ef87
2 parents cda179d + 03315f4
commit 1d6ef87
Show file tree

Hide file tree

Showing 19 changed files with 89 additions and 81 deletions.
diff --git a/src/app/board/[id]/page.tsx b/src/app/board/[id]/page.tsx
@@ -91,7 +91,7 @@ const BoardDetail = () => {
                 <div className="flex justify-end gap-2.5 mb-5">
                   <Button
                     text="수정"
-                    color="PURPLE"
+                    color="LIGHTPURPLE"
                     size="small"
                     onClick={() => {
                       router.push(`/board/${id}/update`)
@@ -117,9 +117,11 @@ const BoardDetail = () => {
             </div>
 
             <div className="flex flex-col gap-1">
-              <p className="text-title3 font-bold">{boardDetail.title}</p>
+              <p className="text-title3 font-bold text-maindark">
+                {boardDetail.title}
+              </p>
               <div
-                className="text-body text-mainblack"
+                className="text-body text-maindark"
                 dangerouslySetInnerHTML={{ __html: boardDetail.content }}
               />
             </div>

diff --git a/src/app/worry/[id]/page.tsx b/src/app/worry/[id]/page.tsx
@@ -46,7 +46,7 @@ const WorryDetail = () => {
           <div className="flex justify-end gap-2.5">
             <Button
               text="수정"
-              color="PURPLE"
+              color="LIGHTPURPLE"
               size="small"
               onClick={() => {
                 router.push(`/worry/${id}/update`)
@@ -79,9 +79,11 @@ const WorryDetail = () => {
             </div>
 
             <div className="flex flex-col gap-1">
-              <p className="text-title3 font-bold">{worryDetail.title}</p>
+              <p className="text-title3 font-bold text-maindark">
+                {worryDetail.title}
+              </p>
               <div
-                className="text-body text-mainblack"
+                className="text-body text-maindark"
                 dangerouslySetInnerHTML={{ __html: worryDetail.content }}
               />
             </div>

diff --git a/src/components/board/Board.tsx b/src/components/board/Board.tsx
@@ -42,9 +42,9 @@ const Board = ({ board }: BoardProps) => {
       <div className="flex flex-col justify-between gap-5">
         <Profile user={memberSimpleInfo} />
         <div className="flex flex-col gap-1">
-          <p className="text-title3 font-bold">{title}</p>
+          <p className="text-title3 font-bold text-maindark">{title}</p>
           <div
-            className="text-body text-mainblack"
+            className="text-body text-maindark"
             dangerouslySetInnerHTML={{ __html: truncatedContent }}
           />
         </div>

diff --git a/src/components/board/BoardCreatePage.tsx b/src/components/board/BoardCreatePage.tsx
@@ -127,7 +127,7 @@ const BoardCreatePage = () => {
           type="text"
           value={title}
           onChange={(e) => setTitle(e.target.value)}
-          className="w-full h-10 border border-gray-300 rounded-md p-2 mb-4"
+          className="w-full h-10 border border-gray-300 rounded-md p-2 mb-4 text-maindark"
         />
         <div className="text-headline font-normal text-gray2 mb-5">
           내용을 입력해주세요.
@@ -146,11 +146,12 @@ const BoardCreatePage = () => {
               callback(imgUrl, 'image')
             },
           }}
+          className="text-maindark"
         />
         <div className="flex gap-2.5 justify-end mt-4">
           <Button
             text="취소하기"
-            color="PURPLE"
+            color="LIGHTPURPLE"
             size="small"
             onClick={() => router.back()}
           />

diff --git a/src/components/board/BoardUpdatePage.tsx b/src/components/board/BoardUpdatePage.tsx
@@ -146,7 +146,7 @@ const BoardUpdatePage = () => {
           type="text"
           value={title}
           onChange={(e) => setTitle(e.target.value)}
-          className="w-full h-10 border border-gray-300 rounded-md p-2 mb-4"
+          className="w-full h-10 border border-gray-300 rounded-md p-2 mb-4 text-maindark"
         />
         <div className="text-headline font-normal text-gray2 mb-5">
           내용을 입력해주세요.
@@ -165,11 +165,12 @@ const BoardUpdatePage = () => {
               callback(imgUrl, 'image')
             },
           }}
+          className="text-maindark"
         />
         <div className="flex gap-2.5 justify-end mt-4">
           <Button
             text="취소하기"
-            color="PURPLE"
+            color="LIGHTPURPLE"
             size="small"
             onClick={() => router.back()}
           />

diff --git a/src/components/board/MbtiCategories.tsx b/src/components/board/MbtiCategories.tsx
@@ -43,7 +43,7 @@ const MbtiCategories = ({ selectedMbti }: MbtiCategoriesProps) => {
       <div className="overflow-x-auto scrollbar-hide py-9">
         <div className="min-w-max grid grid-cols-5 gap-4">
           <div
-            className={`col-span-1 flex items-start justify-center cursor-pointer ${selectedMbti === 'all' ? 'underline' : ''}`}
+            className={`col-span-1 flex items-start justify-center cursor-pointer text-maindark ${selectedMbti === 'all' ? 'underline' : ''}`}
             onClick={() => handleMbtiChange('all')}
           >
             전체 ({totalBoardCount})

diff --git a/src/components/chatting/ChattingProfile.tsx b/src/components/chatting/ChattingProfile.tsx
@@ -29,7 +29,9 @@ const ChattingProfile = ({
       </div>
       <div className="flex flex-col gap-1">
         <div className="flex items-center gap-2.5">
-          <div className="text-headline font-semibold">{nickName} 님</div>
+          <div className="text-headline font-semibold text-maindark">
+            {nickName} 님
+          </div>
           <div className="flex gap-2.5">
             <Button text={mbti} color={mbti} size="badge" />
             {badge && <Button text={badge} size="badge" />}

diff --git a/src/components/common/Category.tsx b/src/components/common/Category.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
-import React, { Suspense, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import Image from 'next/image'
 import { useUserInfo } from '@/service/user/useUserService'
 import { useToast } from '@/hooks/useToast'
@@ -52,60 +52,58 @@ const Category = () => {
     if (categoryPath === '/') {
       return selected === '/'
         ? 'text-main1 font-bold after:content-[""] after:absolute after:bottom-[-8px] after:left-0 after:w-full after:h-[3px] after:bg-main1 after:opacity-100'
-        : ''
+        : 'text-maindark'
     } else if (selected?.startsWith(categoryPath.split('?')[0])) {
       return 'text-main1 font-bold after:content-[""] after:absolute after:bottom-[-8px] after:left-0 after:w-full after:h-[3px] after:bg-main1 after:opacity-100'
     } else {
-      return ''
+      return 'text-maindark'
     }
   }
 
   return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <div className="h-12 border-t border-t-gray5 whitespace-nowrap flex justify-between items-center overflow-x-scroll scrollbar-hide">
-        <ul className="flex items-center text-title3 font-normal">
-          {categories.map((category) => (
-            <li key={category.path} className="list-none">
-              <button
-                type="button"
-                onClick={() => handleClick(category.path)}
-                className={`mr-7 cursor-pointer relative hover:text-main1 transition-all ${getButtonClass(category.path)}`}
-              >
-                {category.label}
-              </button>
-            </li>
-          ))}
-        </ul>
+    <div className="h-12 border-t border-t-gray5 whitespace-nowrap flex justify-between items-center overflow-x-scroll scrollbar-hide">
+      <ul className="flex items-center text-title3 font-normal">
+        {categories.map((category) => (
+          <li key={category.path} className="list-none">
+            <button
+              type="button"
+              onClick={() => handleClick(category.path)}
+              className={`mr-7 cursor-pointer relative hover:text-main1 transition-all ${getButtonClass(category.path)}`}
+            >
+              {category.label}
+            </button>
+          </li>
+        ))}
+      </ul>
 
-        <ul className="hidden sm:flex items-center justify-center whitespace-nowrap text-title3 font-normal list-none">
-          {extraCategories.map((category) => (
-            <li key={category.path} className="list-none">
-              <button
-                type="button"
-                onClick={() => handleProtectedClick(category.path)}
-                className={`ml-7 cursor-pointer relative hover:text-main1 transition-all ${getButtonClass(category.path)}`}
-              >
-                {category.label}
-              </button>
-            </li>
-          ))}
-          <li className="list-none">
+      <ul className="hidden sm:flex items-center justify-center whitespace-nowrap text-title3 font-normal list-none">
+        {extraCategories.map((category) => (
+          <li key={category.path} className="list-none">
             <button
               type="button"
-              onClick={() => router.push('/search')}
-              className="flex items-center ml-7 w-8 h-8 cursor-pointer relative hover:text-main1 transition-all"
+              onClick={() => handleProtectedClick(category.path)}
+              className={`ml-7 cursor-pointer relative hover:text-main1 transition-all ${getButtonClass(category.path)}`}
             >
-              <Image
-                src="/images/common/search.svg"
-                alt="search"
-                width={35}
-                height={35}
-              />
+              {category.label}
             </button>
           </li>
-        </ul>
-      </div>
-    </Suspense>
+        ))}
+        <li className="list-none">
+          <button
+            type="button"
+            onClick={() => router.push('/search')}
+            className="flex items-center ml-7 w-8 h-8 cursor-pointer relative hover:text-main1 transition-all"
+          >
+            <Image
+              src="/images/common/search.svg"
+              alt="search"
+              width={35}
+              height={35}
+            />
+          </button>
+        </li>
+      </ul>
+    </div>
   )
 }
 

diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
@@ -82,7 +82,7 @@ const Header = () => {
                 <button
                   type="button"
                   onClick={() => handleCategoryClick(category.path)}
-                  className={`cursor-pointer relative hover:text-main1 transition-all ${
+                  className={`cursor-pointer relative hover:text-main1 transition-all text-maindark ${
                     selected === category.path
                       ? 'text-main1 font-bold after:content-[""] after:absolute after:bottom-[-10px] after:left-0 after:w-full after:h-[2px] after:bg-main1 after:opacity-100'
                       : ''

diff --git a/src/components/common/Profile.tsx b/src/components/common/Profile.tsx
@@ -32,7 +32,9 @@ const Profile = ({ user, createdAt }: ProfileProps) => {
       </div>
       <div className="flex flex-col gap-1">
         <div className="flex items-center gap-2">
-          <div className="text-headline font-semibold">{user.nickName} 님</div>
+          <div className="text-headline font-semibold text-maindark">
+            {user.nickName} 님
+          </div>
           {createdAt && (
             <div className="text-gray2 text-caption">{createdAt}</div>
           )}

diff --git a/src/components/discussion/DiscussionBoard.tsx b/src/components/discussion/DiscussionBoard.tsx
@@ -31,8 +31,8 @@ const DiscussionBoard = ({ discussionBoard }: DiscussionBoardProps) => {
           <div className="text-caption text-gray2">{formattedCreatedAt}</div>
         </div>
         <div className="flex flex-col gap-1">
-          <p className="text-title3 font-bold">{title}</p>
-          <p className="text-body text-mainblack">{content}</p>
+          <p className="text-title3 font-bold text-maindark">{title}</p>
+          <p className="text-body text-maindark">{content}</p>
         </div>
       </div>
 

diff --git a/src/components/home/HotBoard.tsx b/src/components/home/HotBoard.tsx
@@ -34,9 +34,9 @@ const HotBoard = ({ hotBoard }: HotBoardProps) => {
         <div className="flex flex-col justify-between gap-5">
           <Profile user={memberSimpleInfo} />
           <div className="flex flex-col gap-1">
-            <p className="text-title3 font-bold">{title}</p>
+            <p className="text-title3 font-bold text-maindark">{title}</p>
             <p
-              className="text-body text-mainblack"
+              className="text-body text-maindark"
               dangerouslySetInnerHTML={{ __html: truncatedContent }}
             />
           </div>

diff --git a/src/components/home/HotDiscussion.tsx b/src/components/home/HotDiscussion.tsx
@@ -32,8 +32,8 @@ const HotDiscussion = ({ hotDiscussion }: HotDiscussionProps) => {
             <div className="text-caption text-gray2">{createdAt}</div>
           </div>
           <div className="flex flex-col gap-1">
-            <p className="text-title3 font-bold">{title}</p>
-            <p className="text-body text-mainblack">{content}</p>
+            <p className="text-title3 font-bold text-maindark">{title}</p>
+            <p className="text-body text-maindark">{content}</p>
           </div>
         </div>
 

diff --git a/src/components/worry/WorryBoard.tsx b/src/components/worry/WorryBoard.tsx
@@ -42,9 +42,9 @@ const WorryBoard = ({ worryBoard }: WorryBoardProps) => {
           <p className="text-gray2 text-caption">{createdDate}</p>
         </div>
         <div className="flex flex-col gap-1.75">
-          <div className="text-title3 font-semibold">{title}</div>
+          <div className="text-title3 font-semibold text-maindark">{title}</div>
           <div
-            className="text-body font-regular"
+            className="text-body font-regular text-maindark"
             dangerouslySetInnerHTML={{ __html: truncatedContent }}
           />
         </div>

diff --git a/src/components/worry/WorryCreatePage.tsx b/src/components/worry/WorryCreatePage.tsx
@@ -146,7 +146,7 @@ const WorryCreatePage = () => {
           type="text"
           value={title}
           onChange={(e) => setTitle(e.target.value)}
-          className="w-full h-10 border border-gray-300 rounded-md p-2 mb-4"
+          className="w-full h-10 border border-gray-300 rounded-md p-2 mb-4 text-maindark"
         />
 
         <div className="text-headline font-normal text-gray2 mb-2">
@@ -166,6 +166,7 @@ const WorryCreatePage = () => {
               callback(imgUrl, 'image')
             },
           }}
+          className="text-maindark"
         />
 
         <div className="flex gap-2.5 justify-end mt-4">

diff --git a/src/components/worry/WorryPage.tsx b/src/components/worry/WorryPage.tsx
@@ -116,12 +116,14 @@ const WorryPage = () => {
           해결 완료된 고민
         </div>
         <Container color="purple">
-          <MbtiSelect
-            strFromMbti={solvedStrFromMbti}
-            strToMbti={solvedStrToMbti}
-            setStrFromMbti={setSolvedStrFromMbti}
-            setStrToMbti={setSolvedStrToMbti}
-          />
+          <div className="mb-4">
+            <MbtiSelect
+              strFromMbti={solvedStrFromMbti}
+              strToMbti={solvedStrToMbti}
+              setStrFromMbti={setSolvedStrFromMbti}
+              setStrToMbti={setSolvedStrToMbti}
+            />
+          </div>
           <div className="h-[1px] bg-main mb-7.5" />
           {solvedWorryList &&
             solvedWorryList.result.map((worry: WorryI) => (

diff --git a/src/components/worry/WorryProfile.tsx b/src/components/worry/WorryProfile.tsx
@@ -41,7 +41,9 @@ const WorryProfile = ({
       </div>
 
       <div className="flex flex-col gap-1">
-        <div className="text-headline font-semibold">{nickName} 님</div>
+        <div className="text-headline font-semibold text-maindark">
+          {nickName} 님
+        </div>
         <div className="flex gap-2.5">
           <Button text={strFromMbti} color={strFromMbti} size="badge" />
           <Image

diff --git a/src/components/worry/WorryUpdatePage.tsx b/src/components/worry/WorryUpdatePage.tsx
@@ -169,7 +169,7 @@ const WorryUpdatePage = () => {
           type="text"
           value={title}
           onChange={(e) => setTitle(e.target.value)}
-          className="w-full h-10 border border-gray-300 rounded-md p-2 mb-4"
+          className="w-full h-10 border border-gray-300 rounded-md p-2 mb-4 text-maindark"
         />
 
         <div className="text-headline font-normal text-gray2 mb-2">

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -32,12 +32,7 @@ body {
   margin: 0;
   overflow-x: hidden;
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  background: white;
 }
 
 @layer utilities {