Merge pull request #72 from KERT-core/fix/apply-theme

Fix/ApplyTheme - 올바른 테마 적용 및 Null 에러 수정 외 9가지 수정사항
KERT-core · Nov 5, 2024 · 43e8928 · 43e8928
2 parents 9a1a070 + 92cab04
commit 43e8928
Show file tree

Hide file tree

Showing 24 changed files with 498 additions and 436 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -10,6 +10,8 @@ import { GlobalStyle } from './styles/global';
 import { MainLayout } from './components/layouts/MainLayout';
 import './styles/font.css';
 
+import useTheme from './hooks/theme/useTheme';
+
 import { AuthProvider } from './components/navigation/AuthContext';
 import Navigator from './components/navigation/Navigation';
 
@@ -18,21 +20,23 @@ import NotFound from './pages/NotFound';
 
 import { DashboardLayout } from './components/layouts/DashboardLayout';
 import { Dashboard } from './pages/dashboard';
-import DevDocument from './pages/DevDocument';
+// import DevDocument from './pages/DevDocument';
 import Board from './pages/Board';
 import Article from './pages/Article';
 import NewArticleEditor from './pages/NewArticleEditor';
 
 import Login from './pages/Login';
 import SignUp from './pages/SignUp';
 import MyPage from './pages/MyPage';
-
 import History from './pages/History';
 
 export default function App() {
   // location.key을 통해 화면 전환 시 컴포넌트 충돌/중복 방지 용으로 사용됩니다.
   const location = useLocation();
 
+  // 테마 적용
+  useTheme();
+
   return (
     <>
       <CookiesProvider>

diff --git a/src/components/display/HistoryPreview.jsx b/src/components/display/HistoryPreview.jsx
@@ -206,13 +206,6 @@ export const HistoryPreview = () => {
 
       return data;
     },
-    {
-      retry: false,
-      refetchOnWindowFocus: false,
-      refetchOnMount: false,
-      refetchOnReconnect: false,
-      refetchInterval: false,
-    },
   );
 
   useEffect(() => {

diff --git a/src/components/display/ShapeBackground.jsx b/src/components/display/ShapeBackground.jsx
@@ -30,7 +30,7 @@ const Shape = styled.div`
   border-radius: ${({ radius }) => radius || '20px'};
   background-color: ${({ color }) => color || '#213EA6'};
 
-  opacity: 0.03;
+  opacity: 0.1;
   overflow: hidden;
 
   animation: ${({ $startAngle, $direction }) => rotate($startAngle, $direction)}

diff --git a/src/components/display/dashboard/home/board/Admin.jsx b/src/components/display/dashboard/home/board/Admin.jsx
@@ -13,14 +13,10 @@ import { API } from '@/utils/api';
 
 export const Admin = () => {
   const navigate = useNavigate();
-  const { data, isLoading } = useQuery(
-    'admin',
-    async () => {
-      const res = await API.GET('/admin');
-      return res.data;
-    },
-    { retry: 2 },
-  );
+  const { data, isLoading } = useQuery('admin', async () => {
+    const res = await API.GET('/admin');
+    return res.data;
+  });
 
   if (isLoading) {
     return <SkeletonBoardContainer width="360px" height="240px" />;

diff --git a/src/components/display/dashboard/home/board/History.jsx b/src/components/display/dashboard/home/board/History.jsx
@@ -15,14 +15,10 @@ import { refineHistories } from '@/utils/refineHistory';
 export const History = () => {
   const navigate = useNavigate();
 
-  const { data, isLoading } = useQuery(
-    'history',
-    async () => {
-      const res = await API.GET('/histories');
-      return res.data;
-    },
-    { retry: 2 },
-  );
+  const { data, isLoading } = useQuery('history', async () => {
+    const res = await API.GET('/histories');
+    return res.data;
+  });
 
   if (isLoading) {
     return <SkeletonBoardContainer width="360px" height="240px" />;

diff --git a/src/components/display/dashboard/home/board/User.jsx b/src/components/display/dashboard/home/board/User.jsx
@@ -12,14 +12,10 @@ import { API } from '@/utils/api';
 
 export const User = () => {
   const navigate = useNavigate();
-  const { data, isLoading } = useQuery(
-    'user',
-    async () => {
-      const res = await API.GET('/users');
-      return res.data;
-    },
-    { retry: 2 },
-  );
+  const { data, isLoading } = useQuery('user', async () => {
+    const res = await API.GET('/users');
+    return res.data;
+  });
 
   if (isLoading) {
     return <SkeletonBoardContainer width="360px" height="240px" />;

diff --git a/src/components/layouts/MainLayout.jsx b/src/components/layouts/MainLayout.jsx
@@ -7,6 +7,8 @@ export const Main = styled.main`
   width: 100%;
   height: 100%;
   margin: 0px auto;
+
+  overflow-x: hidden;
 `;
 
 export const MainLayout = () => {

diff --git a/src/components/navigation/DashboardNav.jsx b/src/components/navigation/DashboardNav.jsx
@@ -37,7 +37,7 @@ const Logo = styled.div.attrs({
     height 0.4s ${cubicBezier};
   width: 82px;
   height: 82px;
-  background-image: var(--sqaure-logo-url);
+  background-image: var(--square-logo-url);
   background-size: contain;
   background-repeat: no-repeat;
 

diff --git a/src/components/navigation/Navigation.jsx b/src/components/navigation/Navigation.jsx
@@ -96,9 +96,10 @@ const MobileMenuDisplay = styled.div`
 const NavMenus = styled.div`
   position: fixed;
   top: 0;
-  left: 0;
+  left: 50%;
+  transform: translateX(-50%);
 
-  width: 100vw;
+  width: fit-content;
   height: 80px;
 
   display: flex;
@@ -111,6 +112,7 @@ const NavMenus = styled.div`
     position: static;
     flex-direction: column;
     gap: 30px;
+    transform: translateX(0%);
   }
 `;
 
@@ -136,7 +138,7 @@ export const Navigation = () => {
       <MenuWrapper $active={menu_spread_active}>
         <NavMenus>
           <Link
-            to="/"
+            to="/#history"
             style={menu_style}
             onClick={() => {
               setMenuSpreadActive(false);
@@ -146,7 +148,7 @@ export const Navigation = () => {
             연혁
           </Link>
           <Link
-            to="/"
+            to="/#executives"
             style={menu_style}
             onClick={() => {
               setMenuSpreadActive(false);
@@ -156,7 +158,7 @@ export const Navigation = () => {
             임원진
           </Link>
           <Link
-            to="/"
+            to="/#education"
             style={menu_style}
             onClick={() => {
               setMenuSpreadActive(false);
@@ -165,7 +167,13 @@ export const Navigation = () => {
           >
             활동
           </Link>
-          <Link to="/board" style={menu_style}>
+          <Link
+            to="/board"
+            style={menu_style}
+            onClick={() => {
+              setMenuSpreadActive(false);
+            }}
+          >
             소식지
           </Link>
         </NavMenus>
@@ -176,10 +184,22 @@ export const Navigation = () => {
             </>
           ) : (
             <>
-              <Link to="/login" style={menu_style}>
+              <Link
+                to="/login"
+                style={menu_style}
+                onClick={() => {
+                  setMenuSpreadActive(false);
+                }}
+              >
                 로그인
               </Link>
-              <Link to="/signup" style={menu_style}>
+              <Link
+                to="/signup"
+                style={menu_style}
+                onClick={() => {
+                  setMenuSpreadActive(false);
+                }}
+              >
                 회원가입
               </Link>
             </>

diff --git a/src/components/navigation/footer/Footer.jsx b/src/components/navigation/footer/Footer.jsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import VerticalLogoSVG from '@/assets/kert_logos/Vertical.svg';
 import { SNSButton } from './SNSButton';
-import { ThemeSwitcher } from '../ThemeSwitcher';
+import { ThemeSwitcher } from './ThemeSwitcher';
 
 const FooterWrapper = styled.footer`
   width: 100%;

diff --git a/src/components/navigation/ThemeSwitcher.jsx → ...nents/navigation/footer/ThemeSwitcher.jsx b/src/components/navigation/ThemeSwitcher.jsx → ...nents/navigation/footer/ThemeSwitcher.jsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 import useTheme from '@/hooks/theme/useTheme';
-import { Toggle } from '../forms/Toggle';
+import { Toggle } from '@components/forms/Toggle';
 
 import MoonSVG from '@/assets/icons/themeswitcher/moon.svg';
 import SunSVG from '@/assets/icons/themeswitcher/sun.svg';
@@ -22,9 +22,9 @@ export const ThemeSwitcher = () => {
 
   return (
     <ThemeSwitcherWrapper>
-      <SunSVG width="30px" height="30px" stroke="gray" />
-      <Toggle checked={theme === 'dark'} onChange={toggleTheme} />
-      <MoonSVG width="26px" height="26px" fill="gray" />
+      <SunSVG width="26px" height="26px" stroke="gray" />
+      <Toggle size="m" checked={theme === 'dark'} onChange={toggleTheme} />
+      <MoonSVG width="23px" height="23px" fill="gray" />
     </ThemeSwitcherWrapper>
   );
 };
diff --git a/src/hooks/histories/query.js b/src/hooks/histories/query.js
@@ -1,6 +1,7 @@
 import { useQuery } from 'react-query';
 import { API } from '@/utils/api';
-import { refineHistories } from '../../utils/refineHistory';
+import { refineHistories } from '@/utils/refineHistory';
+import SAMPLE_HISTORIES from '@/utils/sampleHistories';
 
 export function useHistoriesQuery() {
   return useQuery({
@@ -11,7 +12,7 @@ export function useHistoriesQuery() {
         return refineHistories(res.data);
       } catch {
         // console.warn(`History API 요청에 실패했습니다.`);
-        return {};
+        return refineHistories(SAMPLE_HISTORIES);
       }
     },
   });

diff --git a/src/hooks/theme/useTheme.js b/src/hooks/theme/useTheme.js
@@ -21,11 +21,11 @@ const useTheme = () => {
     const darkThemeLink = document.getElementById('dark-theme');
 
     if (theme === 'dark') {
-      darkThemeLink.disabled = false;
-      lightThemeLink.disabled = true;
+      if (darkThemeLink) darkThemeLink.disabled = false;
+      if (lightThemeLink) lightThemeLink.disabled = true;
     } else {
-      darkThemeLink.disabled = true;
-      lightThemeLink.disabled = false;
+      if (darkThemeLink) darkThemeLink.disabled = true;
+      if (lightThemeLink) lightThemeLink.disabled = false;
     }
   };
 

diff --git a/src/pages/Board.jsx b/src/pages/Board.jsx
@@ -150,14 +150,10 @@ export default function Board() {
   const [search, setSearch] = useState('');
   const debouncedSearch = useDebounce(search, 500);
 
-  const { data: adminData } = useQuery(
-    'admin',
-    async () => {
-      const res = await API.GET('/admin');
-      return res.data;
-    },
-    { retry: 2 },
-  );
+  const { data: adminData } = useQuery('admin', async () => {
+    const res = await API.GET('/admin');
+    return res.data;
+  });
 
   const { data, isLoading } = useQuery(
     ['posts-tag-search', tag, debouncedSearch],