Merge pull request #69 from KERT-core/feat/dynamic-nav

Feat/DynamicNav - 반응형 내비바 + Chore/Console - 모든 콘솔 코드 비활성화 + Perf/ReactQuery - API 요청 횟수 제한 추가 + Chore/API - /api/ 추가
KERT-core · Nov 5, 2024 · 021e86e · 021e86e
2 parents fa4a64b + 7aa0dab
commit 021e86e
Show file tree

Hide file tree

Showing 35 changed files with 341 additions and 171 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -5,7 +5,6 @@
 
 import { Routes, Route, useLocation } from 'react-router-dom';
 import { CookiesProvider } from 'react-cookie';
-import { QueryClient, QueryClientProvider } from 'react-query';
 
 import { GlobalStyle } from './styles/global';
 import { MainLayout } from './components/layouts/MainLayout';
@@ -30,54 +29,50 @@ import MyPage from './pages/MyPage';
 
 import History from './pages/History';
 
-const queryClient = new QueryClient();
-
 export default function App() {
   // location.key을 통해 화면 전환 시 컴포넌트 충돌/중복 방지 용으로 사용됩니다.
   const location = useLocation();
 
   return (
     <>
-      <QueryClientProvider client={queryClient}>
-        <CookiesProvider>
-          <AuthProvider>
-            <GlobalStyle />
-            <Navigator />
-            <Routes>
-              <Route path="/" element={<MainLayout />}>
-                <Route index path="/" element={<MainPage />} />
-                <Route path="/history" element={<History />} />
-                <Route path="/developer" element={<DevDocument />} />
-                <Route path="/board">
-                  <Route index path="/board" element={<Board />} />
-                  <Route path="/board/new" element={<NewArticleEditor />} />
-                </Route>
-                <Route path="/articles/:id" element={<Article />} />
-                <Route path="/login" element={<Login />} />
-                <Route path="/signup" element={<SignUp />} />
-                <Route path="/mypage" element={<MyPage />} />
-                <Route path="*" element={<NotFound />} />
+      <CookiesProvider>
+        <AuthProvider>
+          <GlobalStyle />
+          <Navigator />
+          <Routes>
+            <Route path="/" element={<MainLayout />}>
+              <Route index path="/" element={<MainPage />} />
+              <Route path="/history" element={<History />} />
+              {/* <Route path="/developer" element={<DevDocument />} /> */}
+              <Route path="/board">
+                <Route index path="/board" element={<Board />} />
+                <Route path="/board/new" element={<NewArticleEditor />} />
+              </Route>
+              <Route path="/articles/:id" element={<Article />} />
+              <Route path="/login" element={<Login />} />
+              <Route path="/signup" element={<SignUp />} />
+              <Route path="/mypage" element={<MyPage />} />
+              <Route path="*" element={<NotFound />} />
 
-                {/* 대시보드 페이지 */}
-                <Route element={<DashboardLayout location={location} />}>
-                  <Route index path="/dashboard" element={<Dashboard.Home />} />
-                  <Route
-                    path="/dashboard/history"
-                    element={<Dashboard.History />}
-                  />
-                  <Route
-                    path="/dashboard/executive"
-                    element={<Dashboard.Executive />}
-                  />
-                  <Route path="/dashboard/admin" element={<Dashboard.Admin />} />
-                  <Route path="/dashboard/users" element={<Dashboard.Users />} />
-                  <Route path="/dashboard/*" element={<NotFound />} />
-                </Route>
+              {/* 대시보드 페이지 */}
+              <Route element={<DashboardLayout location={location} />}>
+                <Route index path="/dashboard" element={<Dashboard.Home />} />
+                <Route
+                  path="/dashboard/history"
+                  element={<Dashboard.History />}
+                />
+                <Route
+                  path="/dashboard/executive"
+                  element={<Dashboard.Executive />}
+                />
+                <Route path="/dashboard/admin" element={<Dashboard.Admin />} />
+                <Route path="/dashboard/users" element={<Dashboard.Users />} />
+                <Route path="/dashboard/*" element={<NotFound />} />
               </Route>
-            </Routes>
-          </AuthProvider>
-        </CookiesProvider>
-      </QueryClientProvider>
+            </Route>
+          </Routes>
+        </AuthProvider>
+      </CookiesProvider>
     </>
   );
 }
diff --git a/src/assets/icons/themeswitcher/moon.svg b/src/assets/icons/themeswitcher/moon.svg
diff --git a/src/assets/icons/themeswitcher/sun.svg b/src/assets/icons/themeswitcher/sun.svg
diff --git a/src/components/display/HistoryPreview.jsx b/src/components/display/HistoryPreview.jsx
@@ -195,7 +195,7 @@ export const HistoryPreview = () => {
     'mainpage_history',
     async () => {
       let data = await API.GET('/histories');
-      console.log(data);
+      // console.log(data);
 
       // 만약 서버에 저장된 연혁이 없으면 기본 데이터 반환
       if (data.length > 0) {

diff --git a/src/components/display/dashboard/admin/AdminElement.jsx b/src/components/display/dashboard/admin/AdminElement.jsx
@@ -93,7 +93,7 @@ export const AdminElement = ({ admin }) => {
 
   // 만약 admin이 없다면 </> 반환
   if (!admin) {
-    console.warn('admin 객체를 받지 못했습니다.');
+    // console.warn('admin 객체를 받지 못했습니다.');
     return <></>;
   }
 

diff --git a/src/components/display/dashboard/admin/EditAdmin.jsx b/src/components/display/dashboard/admin/EditAdmin.jsx
@@ -61,7 +61,7 @@ export const EditAdmin = forwardRef(({ admin, ...props }, ref) => {
   const { openConfirm, closeConfirm } = useConfirm();
 
   if (!admin) {
-    console.error('admin 객체가 없습니다.');
+    // console.error('admin 객체가 없습니다.');
     return;
   }
 

diff --git a/src/components/display/dashboard/history/EditHistory.jsx b/src/components/display/dashboard/history/EditHistory.jsx
@@ -45,7 +45,7 @@ const Date = styled(Span).attrs({
 export const EditHistory = forwardRef(
   ({ history, onDelete, ...props }, ref) => {
     if (!history) {
-      console.error('history 객체가 없습니다.');
+      // console.error('history 객체가 없습니다.');
       return;
     }
 

diff --git a/src/components/display/dashboard/user/DetailUser.jsx b/src/components/display/dashboard/user/DetailUser.jsx
@@ -66,7 +66,7 @@ export const DetailUser = ({ user }) => {
   };
 
   if (!user) {
-    console.error('user 객체가 없습니다.');
+    // console.error('user 객체가 없습니다.');
     return;
   }
 

diff --git a/src/components/display/dashboard/user/UserElement.jsx b/src/components/display/dashboard/user/UserElement.jsx
@@ -71,7 +71,7 @@ export const UserElement = ({ user }) => {
 
   // 만약 user이 없다면 </> 반환
   if (!user) {
-    console.warn('user 객체를 받지 못했습니다.');
+    // console.warn('user 객체를 받지 못했습니다.');
     return <></>;
   }
 

diff --git a/src/components/display/section/ExecutiveProfile.jsx b/src/components/display/section/ExecutiveProfile.jsx
@@ -98,7 +98,7 @@ export const ExecutiveProfile = ({ profile, isReversed }) => {
       <ProfileDescription $reverse={isReversed}>
         <TitleWrapper>
           <NameInfo $reverse={isReversed}>
-            <Name $size="l" $weight="extrabold">
+            <Name $size="l" $weight="extrabold" $color="white">
               {profile.name}
             </Name>
             <GradientText $color={profile.color}>{profile.role}</GradientText>

diff --git a/src/components/display/section/GroupCard.jsx b/src/components/display/section/GroupCard.jsx
@@ -37,6 +37,7 @@ const CardImage = styled(GroupCardImage)`
 const TabName = styled(Span).attrs({
   $size: 's',
   $weight: 'light',
+  $color: 'white',
 })`
   position: absolute;
   top: 13px;
@@ -83,7 +84,7 @@ export const GroupCard = ({ name, logo_url, hashTags }) => {
       <Content>
         <img width={90} height={90} src={logo_url} alt={name} />
         <TitleWrapper>
-          <Text size="xl" weight="bold">
+          <Text size="xl" weight="bold" color="white">
             {name}
           </Text>
           <HashtagWrapper>

diff --git a/src/components/forms/Button.jsx b/src/components/forms/Button.jsx
@@ -200,7 +200,7 @@ export const Button = ({
         </TranslucentButton>
       );
     default:
-      console.warn('[Button.jsx] 알 수 없는 버튼 타입입니다.');
+      // console.warn('[Button.jsx] 알 수 없는 버튼 타입입니다.');
       return <FlatButton>{children}</FlatButton>;
   }
 };
diff --git a/src/components/forms/Toggle.jsx b/src/components/forms/Toggle.jsx
@@ -24,9 +24,9 @@ const IToggle = styled.label`
       case 'l':
         return 'width: 56px; height: 28px;';
       default:
-        console.warn(
-          '[Toggle.jsx] 정의되지 않은 사이즈입니다. 기본값으로 적용됩니다.',
-        );
+        // console.warn(
+        //   '[Toggle.jsx] 정의되지 않은 사이즈입니다. 기본값으로 적용됩니다.',
+        // );
         return `width: 48px; height: 24px;`;
     }
   }}

diff --git a/src/components/navigation/AuthContext.jsx b/src/components/navigation/AuthContext.jsx
@@ -13,7 +13,7 @@ export const AuthProvider = ({ children }) => {
     try {
       return storedUser ? JSON.parse(storedUser) : null; // user가 존재하면 파싱, 없으면 null
     } catch (error) {
-      console.error('Error parsing user data:', error); // 파싱 실패 시 오류 처리
+      // console.error('Error parsing user data:', error); // 파싱 실패 시 오류 처리
       return null;
     }
   });
@@ -30,7 +30,7 @@ export const AuthProvider = ({ children }) => {
     try {
       await API.POST('/logout');
     } catch (error) {
-      console.error('Error during logout:', error);
+      // console.error('Error during logout:', error);
     } finally {
       localStorage.removeItem('accessToken');
       localStorage.removeItem('refreshToken');

diff --git a/src/components/navigation/HamburgerButton.jsx b/src/components/navigation/HamburgerButton.jsx
@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+
+const HamburgerWrapper = styled.div`
+  width: 30px;
+  height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  cursor: pointer;
+`;
+
+const Bar = styled.div`
+  height: 2px;
+  width: 100%;
+  background-color: var(--primary-text-color);
+  transition: 0.3s ease;
+  transform-origin: left;
+
+  /* 애니메이션을 위한 조건부 스타일 */
+  ${({ $active, $position }) => {
+    if ($active && $position === 'top')
+      return `transform: rotate(45deg) translate(0px, -2px);`;
+    if ($active && $position === 'middle') return `opacity: 0;`;
+    if ($active && $position === 'bottom')
+      return `transform: rotate(-45deg) translate(0px, 2px);`;
+    return '';
+  }}
+`;
+
+export default function HamburgerButton({ active, onToggle }) {
+  const handleToggle = () => {
+    if (onToggle) {
+      onToggle(!active);
+    }
+  };
+
+  return (
+    <HamburgerWrapper onClick={handleToggle}>
+      <Bar $active={active} $position="top" />
+      <Bar $active={active} $position="middle" />
+      <Bar $active={active} $position="bottom" />
+    </HamburgerWrapper>
+  );
+}