Fix: 헤더 반응형 / 토글메뉴 로직 수정 및 컴포넌트 분리

public/data/header/toggle.json

@@ -0,0 +1,28 @@
+{
+  "toggle": [
+    {
+      "name": "내 벨로그",
+      "path": "/id"
+    },
+    {
+      "name": "새 글 작성",
+      "path": "/write"
+    },
+    {
+      "name": "임시 글",
+      "path": "/saves"
+    },
+    {
+      "name": "읽기 목록",
+      "path": "/lists/liked"
+    },
+    {
+      "name": "설정",
+      "path": "/setting"
+    },
+    {
+      "name": "로그아웃",
+      "path": "/"
+    }
+  ]
+}

src/GlobalStyle.js

@@ -1,20 +1,17 @@
 import { createGlobalStyle } from 'styled-components';
 import reset from 'styled-reset';
 import {
-  darkModeBackgroundColor,
-  darkModeFontColor,
   lightModeBackgroundColor,
   lightModeFontColor,
-  darkModeNewPostBtnColor,
   lightModeNewPostBtnColor,
-  darkModeToggle,
   lightModeToggle,
-  darkModeToggleBackgound,
   lightModeToggleBackgound,
-  darkModeATagHoverText,
   lightModeATagHoverText,
-  darkModeATagHoverBackground,
   lightModeATagHoverBackground,
+  backgroundPage,
+  text1,
+  backgroundElement1,
+  primary1,
 } from './styles/color';
 
 const GlobalStyle = createGlobalStyle`
@@ -27,26 +24,26 @@ const GlobalStyle = createGlobalStyle`
 
   body {
     margin-top: 4rem;
-    background: ${props => (props.isDarkMode ? darkModeBackgroundColor : lightModeBackgroundColor)};
-    color: ${props => (props.isDarkMode ? darkModeFontColor : lightModeFontColor)};
+    background: ${props => (props.isDarkMode ? backgroundPage : lightModeBackgroundColor)};
+    color: ${props => (props.isDarkMode ? text1 : lightModeFontColor)};
   }
 
   :root {
-    --text: ${props => (props.isDarkMode ? darkModeFontColor : lightModeFontColor)};
-    --new-post-btn-background: ${props => (props.isDarkMode ? darkModeNewPostBtnColor : lightModeNewPostBtnColor)};
-    --new-post-btn-hover-text: ${props => (props.isDarkMode ? lightModeFontColor : darkModeFontColor)};
-    --new-post-btn-hover-background: ${props => (props.isDarkMode ? lightModeNewPostBtnColor : darkModeNewPostBtnColor)};
-    --toggle-hover: ${props => (props.isDarkMode ? darkModeToggle : lightModeToggle)};
-    --toggle-background: ${props => (props.isDarkMode ? darkModeToggleBackgound : lightModeToggleBackgound)};
-    --a-tag-hover-text: ${props => (props.isDarkMode ? darkModeATagHoverText : lightModeATagHoverText)};
-    --a-tag-hover-background: ${props => (props.isDarkMode ? darkModeATagHoverBackground : lightModeATagHoverBackground)};
+    --text: ${props => (props.isDarkMode ? text1 : lightModeFontColor)};
+    --new-post-btn-background: ${props => (props.isDarkMode ? backgroundElement1 : lightModeNewPostBtnColor)};
+    --new-post-btn-hover-text: ${props => (props.isDarkMode ? lightModeFontColor : text1)};
+    --new-post-btn-hover-background: ${props => (props.isDarkMode ? lightModeNewPostBtnColor : backgroundElement1)};
+    --toggle-hover: ${props => (props.isDarkMode ? text1 : lightModeToggle)};
+    --toggle-background: ${props => (props.isDarkMode ? backgroundElement1 : lightModeToggleBackgound)};
+    --a-tag-hover-text: ${props => (props.isDarkMode ? primary1 : lightModeATagHoverText)};
+    --a-tag-hover-background: ${props => (props.isDarkMode ? backgroundElement1 : lightModeATagHoverBackground)};
   }
 
   a {
     text-decoration: none;
 
     :visited {
-      color: ${props => (props.isDarkMode ? darkModeFontColor : lightModeFontColor)};
+      color: ${props => (props.isDarkMode ? text1 : lightModeFontColor)};
   }
   }
 

src/components/PostList/Post/PostInfo/index.jsx

@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
-import { darkModeFontColor, darkModeTextColor } from '../../../../styles/color';
+import { text1 } from '../../../../styles/color';
 
 const PostInfo = () => {
   return (
@@ -29,7 +29,7 @@ const PostInfoContainer = styled.div`
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    color: ${darkModeFontColor};
+    color: ${text1};
   }
 
   .main-text {
@@ -43,13 +43,13 @@ const PostInfoContainer = styled.div`
     line-height: 1.5;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: ${darkModeTextColor};
+    color: #d9d9d9;
   }
 
   .sub-info {
     font-size: 0.75rem;
     line-height: 1.5;
-    color: ${darkModeTextColor};
+    color: #d9d9d9;
   }
 `;
 

src/components/PostList/Post/UserInfo/index.jsx

@@ -1,7 +1,7 @@
 import { Link } from 'react-router-dom';
 import { AiFillHeart } from 'react-icons/ai';
 import styled from 'styled-components';
-import { darkModeFontColor, darkModeTextColor } from '../../../../styles/color';
+import { text1 } from '../../../../styles/color';
 
 const UserInfo = () => {
   return (
@@ -41,10 +41,10 @@ const UserInfoContainer = styled.div`
     }
 
     .user-by {
-      color: ${darkModeTextColor};
+      color: #d9d9d9;
 
       .user-name {
-        color: ${darkModeFontColor};
+        color: ${text1};
         font-weight: bold;
       }
     }

src/components/PostList/index.jsx

@@ -1,7 +1,7 @@
 import Post from './Post';
 import PostListNavBar from '../PostListNavBar';
 import styled from 'styled-components';
-import { postListMaxWidth1056px, postListMaxWidth1440px, postListMaxWidth1920px } from '../../styles/media';
+import { maxWidth1056px, maxWidth1440px, maxWidth1920px, minWidth250px } from '../../styles/media';
 
 const PostList = () => {
   const arr = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
@@ -32,9 +32,10 @@ const PostListContainer = styled.div`
     }
   }
 
-  ${postListMaxWidth1920px}
-  ${postListMaxWidth1440px}
-  ${postListMaxWidth1056px}
+  ${maxWidth1920px}
+  ${maxWidth1440px}
+  ${maxWidth1056px}
+  ${minWidth250px}
 `;
 
 export default PostList;

src/components/PostListNavBar/index.jsx

@@ -4,7 +4,6 @@ import { AiOutlineClockCircle } from 'react-icons/ai';
 import { FiMoreVertical } from 'react-icons/fi';
 import PeriodFilter from './PeriodFilter';
 import styled from 'styled-components';
-import { darkModeFontColor, darkModeTextColor } from '../../styles/color';
 
 const PostListNavBar = () => {
   const navBar = [
@@ -75,7 +74,7 @@ const PostListNavBarContainer = styled.div`
       }
 
       .active {
-        color: ${darkModeFontColor};
+        color: var(--text);
       }
     }
   }

src/layout/Header/ThemeMode/index.jsx

@@ -0,0 +1,43 @@
+import { useSelector, useDispatch } from 'react-redux';
+import { darkMode, lightMode } from '../../../store/modules/header';
+import { HiMoon } from 'react-icons/hi';
+import { BsFillSunFill } from 'react-icons/bs';
+import styled from 'styled-components';
+
+const ThemeMode = () => {
+  const isDarkMode = useSelector(state => state.darkMode.isDarkMode);
+  const dispatch = useDispatch();
+
+  const changeTheme = e => {
+    e.target.className = 'theme-mode-change setting-hover';
+    isDarkMode ? dispatch(lightMode()) : dispatch(darkMode());
+  };
+
+  return (
+    <ThemeModeContainer onClick={changeTheme}>
+      <div className='setting-hover'>{isDarkMode ? <HiMoon /> : <BsFillSunFill />}</div>
+    </ThemeModeContainer>
+  );
+};
+
+const ThemeModeContainer = styled.div`
+  @keyframes themeChange {
+    from {
+      width: 10px;
+      height: 10px;
+      transform: rotate(180deg);
+    }
+    to {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .theme-mode-change {
+    svg {
+      animation: themeChange 0.1s linear;
+    }
+  }
+`;
+
+export default ThemeMode;

src/layout/Header/ToggleMenuList/index.jsx

@@ -0,0 +1,44 @@
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+const ToggleMenuList = ({ toggleMenuRef, toggleMenuList, setIsToggleOpen }) => {
+  return (
+    <ToggleMenuListContainer ref={toggleMenuRef}>
+      {toggleMenuList.map(menu => {
+        return (
+          <Link key={menu.name} className='link-tag' to={menu.path} onClick={() => setIsToggleOpen(false)}>
+            {menu.name}
+          </Link>
+        );
+      })}
+    </ToggleMenuListContainer>
+  );
+};
+
+export default ToggleMenuList;
+
+const ToggleMenuListContainer = styled.div`
+  width: 12rem;
+  margin-top: 0.3rem;
+  margin-left: auto;
+  background-color: var(--toggle-background);
+  box-shadow: rgb(0 0 0 / 10%) 0px 0px 8px;
+
+  .link-tag {
+    display: block;
+    padding: 1.25rem;
+    font-size: 0.9rem;
+    cursor: pointer;
+
+    :nth-child(2) {
+      @media only screen and (min-width: 1024px) {
+        display: none;
+      }
+    }
+
+    :hover {
+      color: var(--a-tag-hover-text);
+      background-color: var(--a-tag-hover-background);
+    }
+  }
+`;