✨ feat: 다크 모드 구현

grass-diary/src/App.tsx

@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+import { RouterProvider } from 'react-router-dom';
+
+import router from './router';
+import { GlobalStyle } from './styles/GlobalStyle';
+import useTheme from '@hooks/useTheme';
+
+const App = () => {
+  const { isDarkMode } = useTheme();
+
+  useEffect(() => {
+    const root = document.body;
+
+    if (isDarkMode) root.setAttribute('data-theme', 'dark');
+    else root.removeAttribute('data-theme');
+  }, [isDarkMode]);
+
+  return (
+    <>
+      <GlobalStyle isDarkMode={isDarkMode} />
+      <RouterProvider router={router} />
+    </>
+  );
+};
+
+export default App;

grass-diary/src/components/Button/BackButton.tsx

@@ -8,15 +8,15 @@ interface IBackButtonProps {
 const BackButton = ({ goBackTo }: IBackButtonProps) => {
   const navigate = useNavigate();
   const location = useLocation();
+
   const goBack = () => {
-    if (goBackTo) {
-      return navigate(goBackTo);
-    }
-    if (location.state === 'editcomplete') {
-      return navigate(-2);
-    }
+    if (goBackTo) return navigate(goBackTo);
+
+    if (location.state === 'editcomplete') return navigate(-2);
+
     navigate(-1);
   };
+
   return (
     <S.ArrowButton onClick={goBack}>
       <S.ArrowIcon width={24} height={24} />

grass-diary/src/components/Comment/CommentDisplay.tsx

@@ -7,19 +7,24 @@ import CommentSetting from './CommentSetting';
 import { useTodayDate } from '@hooks/api/useTodayDate';
 import { useUser } from '@state/user/useUser';
 import { COMMENT } from '@constants/message';
+import useTheme from '@hooks/useTheme';
 
 const CommentDisplay = ({ comment, parentId }: CommentDisplayProps) => {
-  const { data: writer } = useWriterProfile(comment.memberId);
   const memberId = useUser();
+  const setting = useRef<HTMLDivElement>(null);
+
   const { setReplyId } = useCommentActions();
   const { date } = useTodayDate();
-  const setting = useRef<HTMLDivElement>(null);
+  const { isDarkMode } = useTheme();
+  const { data: writer } = useWriterProfile(comment.memberId);
+
   const [isToday, setIsToday] = useState(false);
 
   const reply = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
     if (setting.current) {
       if (setting.current.contains(e.target as HTMLElement)) return;
     }
+
     setReplyId(parentId);
   };
 
@@ -38,15 +43,19 @@ const CommentDisplay = ({ comment, parentId }: CommentDisplayProps) => {
   return comment.deleted ? (
     <S.CommentItem $isMe={memberId === comment.memberId}>
       <S.WriterBox>
-        {comment.depth ? <ReplyIcon /> : null}
+        {comment.depth ? (
+          <ReplyIcon fill={isDarkMode ? '#D4D4D4' : '#474747'} />
+        ) : null}
         <S.DeletedText>{COMMENT.deleted}</S.DeletedText>
       </S.WriterBox>
     </S.CommentItem>
   ) : (
     <S.CommentItem onClick={reply} $isMe={memberId === comment.memberId}>
       <S.TopBox>
         <S.WriterBox>
-          {comment.depth ? <ReplyIcon /> : null}
+          {comment.depth ? (
+            <ReplyIcon fill={isDarkMode ? '#D4D4D4' : '#474747'} />
+          ) : null}
           <S.ProfileImage src={writer?.profileImageURL} />
           <S.NameText $isMe={memberId === comment.memberId}>
             {writer?.nickname}

grass-diary/src/components/Comment/Input.tsx

@@ -9,6 +9,7 @@ import { usePostComment } from '@hooks/api/comment/usePostComment';
 import { usePatchComment } from '@hooks/api/comment/usePatchComment';
 import { ReactComponent as ReplyIcon } from '@svg/subdirectory_arrow_right.svg';
 import { COMMENT } from '@constants/message';
+import useTheme from '@hooks/useTheme';
 
 const CommentInput = ({
   submit,
@@ -18,6 +19,7 @@ const CommentInput = ({
   isCancelBtn,
   isPatch,
 }: CommentInputProps) => {
+  const { isDarkMode } = useTheme();
   const { profileImageURL, nickname } = useProfile();
   const { resetEditId, resetReplyId } = useCommentActions();
   const [focus, setFocus] = useState(false);
@@ -54,7 +56,7 @@ const CommentInput = ({
     <S.InputContainer $focus={focus} $isReply={isReply}>
       <S.TopBox>
         <S.WriterBox>
-          {isReply && <ReplyIcon />}
+          {isReply && <ReplyIcon fill={isDarkMode ? '#D4D4D4' : '#474747'} />}
           <S.ProfileImage src={profileImageURL} />
           <S.NameText>{nickname}</S.NameText>
         </S.WriterBox>

grass-diary/src/components/Container.tsx

@@ -1,17 +1,15 @@
-import stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-
-    gap: '10px',
-  },
-});
+import styled from 'styled-components';
 
 const Container = ({ children }: IContainer) => {
-  return <div {...stylex.props(styles.container)}>{children}</div>;
+  return <SContainer>{children}</SContainer>;
 };
 
 export default Container;
+
+const SContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  background: ${({ theme }) => theme.bg.solid.subtler};
+`;

grass-diary/src/components/Divider.tsx

@@ -1,4 +1,3 @@
-import { semantic } from '@styles/semantic';
 import styled from 'styled-components';
 
 interface IDividerProps {
@@ -19,8 +18,6 @@ const DividerLine = styled.div<{
   width: ${({ $dividerWidth }) => $dividerWidth || '20rem'};
   height: 0.0625rem;
 
-  background: ${({ $dividerColor }) =>
-    $dividerColor
-      ? $dividerColor
-      : `${semantic.light.border.transparent.neutral}`};
+  background: ${({ $dividerColor, theme }) =>
+    $dividerColor ? $dividerColor : `${theme.border.transparent.neutral}`};
 `;

grass-diary/src/components/Feed/Feed.tsx

@@ -10,6 +10,7 @@ import { useModal } from '@state/modal/useModal';
 import { INTERACTION } from '@styles/interaction';
 import { MODAL } from '@constants/message';
 import { useUser } from '@state/user/useUser';
+import { API_URI } from '@services/index';
 
 interface IFeedProps {
   feed: Feed;
@@ -38,7 +39,7 @@ const Feed = ({ feed, isTop }: IFeedProps) => {
   };
 
   const handleGoogleLogin: TGoogleLogin = () => {
-    window.open(`http://localhost:8080/api/auth/google`, '_self');
+    window.open(`${API_URI}/api/auth/google`, '_self');
   };
 
   const FeedClickHandler = () => {

grass-diary/src/components/Feed/PopularFeed.tsx

@@ -11,32 +11,46 @@ import { Callout, Feed } from '@components/index';
 import { usePopularDiaries } from '@hooks/api/usePopularDiaries';
 import { Link, useLocation } from 'react-router-dom';
 import { useEffect, useState } from 'react';
+import useTheme from '@hooks/useTheme';
 
 const PrevArrow = (props: CustomArrowProps) => {
+  const { isDarkMode } = useTheme();
+
   return (
     <S.ArrowBox onClick={props.onClick}>
       <LeftArrow
         width={20}
         height={20}
-        fill={semantic.light.object.transparent.neutral}
+        fill={
+          isDarkMode
+            ? semantic.dark.object.transparent.neutral
+            : semantic.light.object.transparent.neutral
+        }
       />
     </S.ArrowBox>
   );
 };
 
 const NextArrow = (props: CustomArrowProps) => {
+  const { isDarkMode } = useTheme();
+
   return (
     <S.ArrowBox onClick={props.onClick}>
       <RightArrow
         width={20}
         height={20}
-        fill={semantic.light.object.transparent.neutral}
+        fill={
+          isDarkMode
+            ? semantic.dark.object.transparent.neutral
+            : semantic.light.object.transparent.neutral
+        }
       />
     </S.ArrowBox>
   );
 };
 
 const PopularFeed = () => {
+  const { isDarkMode } = useTheme();
   const { data: top10 } = usePopularDiaries();
   const location = useLocation();
   const [mobileSize, setMobileSize] = useState(false);
@@ -83,7 +97,11 @@ const PopularFeed = () => {
               <RightArrow
                 width={18}
                 height={18}
-                fill={semantic.light.object.transparent.alternative}
+                fill={
+                  isDarkMode
+                    ? semantic.dark.object.transparent.alternative
+                    : semantic.light.object.transparent.alternative
+                }
               />
             </S.SeeMoreContainer>
           </Link>

grass-diary/src/components/Layout/Header.tsx

@@ -1,15 +1,18 @@
-import * as S from '@styles/component/Layout/Header.style';
-import sampleLogo from '@image/sampleLogo.png';
+import { useNavigate } from 'react-router-dom';
+
 import MenuBar from './MenuBar';
+import sampleLogo from '@image/sampleLogo.png';
+import * as S from '@styles/component/Layout/Header.style';
 import { Profile } from '@components/index';
-import { useNavigate } from 'react-router-dom';
 import { useUser } from '@state/user/useUser';
+import { API_URI } from '@services/index';
 
 const Header = () => {
   const memberId = useUser();
   const navigate = useNavigate();
+
   const handleGoogleLogin: TGoogleLogin = () => {
-    window.open(`http://localhost:8080/api/auth/google`, '_self');
+    window.open(`${API_URI}/api/auth/google`, '_self');
   };
 
   return (