Merge pull request #234 from urinaner/refactor/228

[FE] [REFACTOR] [FEAT] 헤더 디자인 및 기능 개선

frontend/package.json

@@ -13,6 +13,7 @@
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@types/react-window": "^1.8.8",
+    "@types/styled-components": "^5.1.34",
     "axios": "^1.7.7",
     "dompurify": "^3.1.7",
     "framer-motion": "^11.15.0",
@@ -63,7 +64,6 @@
   "devDependencies": {
     "@types/dompurify": "^3.0.5",
     "@types/node": "^22.7.0",
-    "@types/styled-components": "^5.1.34",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.36.1",

frontend/src/App.tsx

@@ -1,18 +1,24 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
+import { ThemeProvider } from 'styled-components';
+import theme from './styles/theme';
+import { GlobalStyle } from './styles/GlobalStyle';
 import AppContent from './AppContent';
 import { ModalProvider } from './components/Modal/context/ModalContext';
 import { AuthProvider } from './context/AuthContext';
 
 function App() {
   return (
-    <BrowserRouter>
-      <ModalProvider>
-        <AuthProvider>
-          <AppContent />
-        </AuthProvider>
-      </ModalProvider>
-    </BrowserRouter>
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <BrowserRouter>
+        <ModalProvider>
+          <AuthProvider>
+            <AppContent />
+          </AuthProvider>
+        </ModalProvider>
+      </BrowserRouter>
+    </ThemeProvider>
   );
 }
 

frontend/src/AppContent.tsx

@@ -135,10 +135,26 @@ function AppContent() {
   }, [location.pathname]);
 
   const getCurrentPageContent = () => {
-    const path = location.pathname.split('/')[1];
-    return Object.values(PAGE_CONTENTS).find((content) =>
-      content.path.startsWith(`/${path}`),
+    const pathSegments = location.pathname.split('/').filter(Boolean);
+
+    if (pathSegments.length === 0) return null;
+
+    const mainCategory = Object.values(PAGE_CONTENTS).find(
+      (content) => content.path === `/${pathSegments[0]}`,
     );
+
+    if (!mainCategory) return null;
+
+    // If we're at the main category page, return the main category content
+    if (pathSegments.length === 1) return mainCategory;
+
+    // If we're at a sub-page, find the matching sub-page content
+    const subPath = `/${pathSegments.join('/')}`;
+    const subPage = Object.values(mainCategory.subPages || {}).find(
+      (content) => content.path === subPath,
+    );
+
+    return subPage || mainCategory;
   };
 
   const pageContent = getCurrentPageContent();

frontend/src/components/Banner/MainBanner/MainBanner.tsx

@@ -6,26 +6,10 @@ import { MainBannerProps } from '../../../types/banner';
 const VideoContainer = styled.div`
   position: relative;
   width: 100%;
-  height: 100vh;
+  height: 95vh;
   overflow: hidden;
   background-color: #000;
 
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(
-      180deg,
-      rgba(0, 0, 0, 0.65) 0%,
-      rgba(0, 0, 0, 0.4) 50%,
-      rgba(0, 0, 0, 0.65) 100%
-    );
-    z-index: 1;
-  }
-
   @media (max-width: 768px) {
     height: 60vh;
   }
@@ -35,26 +19,26 @@ const Video = styled.video`
   width: 100%;
   height: 100%;
   object-fit: cover;
-  filter: contrast(1.1) brightness(0.6);
 `;
 
 const Content = styled(motion.div)`
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  text-align: left;
+  text-align: right;
   z-index: 2;
   width: 90%;
   max-width: 1200px;
-  padding-left: 5%;
+  padding-right: 5%;
 `;
 
 const TitleContainer = styled(motion.div)`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   max-width: 600px;
+  margin-left: auto;
 `;
 
 const Title = styled.h1`

frontend/src/components/Footer/Footer.tsx

@@ -1,12 +1,8 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
-import { AuthContext } from '../../context/AuthContext';
 import * as S from './FooterStyle';
-import { ReactComponent as AdminIcon } from '../../assets/images/user-icon.svg';
 
 function Footer() {
-  const auth = useContext(AuthContext);
-
   return (
     <S.Footer>
       <S.FooterInner>
@@ -24,23 +20,8 @@ function Footer() {
         </S.FooterContainer>
         <S.Copyright>
           <span>
-            Copyright©2024 . 세종대학교 바이오융합공학전공 All rights reserved
+            Copyright©2025 . 세종대학교 바이오융합공학전공 All rights reserved
           </span>
-          {auth?.isAuthenticated ? (
-            <S.AdminSection>
-              <span>관리자: {auth.user}</span>
-              <S.AdminButton onClick={auth.signout}>
-                <AdminIcon />
-                로그아웃
-              </S.AdminButton>
-            </S.AdminSection>
-          ) : (
-            <Link to="/signin">
-              <S.AdminButton>
-                <img src="/adminLoginBtn.svg" alt="관리자 로그인" />
-              </S.AdminButton>
-            </Link>
-          )}
         </S.Copyright>
       </S.FooterInner>
     </S.Footer>

frontend/src/components/Footer/FooterStyle.ts

@@ -1,3 +1,4 @@
+// FooterStyle.ts
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 import * as token from '../../constants/colors';
@@ -28,6 +29,7 @@ export const FooterInner = styled.div`
     padding: 24px 20px;
   }
 `;
+
 export const FooterContainer = styled.div`
   display: flex;
   justify-content: space-between;
@@ -53,7 +55,7 @@ export const Address = styled.div`
   ${media.mobile} {
     text-align: center;
     font-size: 14px;
-    line-height: 1.5; /* 텍스트 줄 간격 조정 */
+    line-height: 1.5;
   }
 `;
 
@@ -69,10 +71,10 @@ export const SightMap = styled.div`
   gap: 20px;
 
   ${media.tablet} {
-    display: grid; /* grid 레이아웃 사용 */
-    grid-template-columns: repeat(2, 1fr); /* 2열 레이아웃 */
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
     gap: 20px;
-    justify-items: center; /* 중앙 정렬 */
+    justify-items: center;
   }
 
   ${media.mobile} {
@@ -114,99 +116,30 @@ export const SightMapContent = styled.div`
   }
 
   ${media.mobile} {
-    display: none; /* 모바일에서 숨기기 */
+    display: none;
   }
 `;
 
 export const Copyright = styled.div`
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   margin-top: 36px;
   padding-top: 36px;
   font-weight: 600;
   text-align: center;
 
   span {
-    flex: 1; /* 왼쪽 영역을 채우도록 설정 */
-    text-align: left; /* 카피라이트 왼쪽 정렬 */
-    align-content: center;
     font-size: 14px;
+    text-align: center;
 
     ${media.mobile} {
       font-size: 12px;
-      text-align: center;
       line-height: 1.4;
     }
   }
-
-  ${media.tablet} {
-    flex-direction: column; /* 태블릿에서 세로 정렬 */
-    align-items: center;
-    text-align: center;
-  }
-
-  ${media.mobile} {
-    flex-direction: column; /* 모바일에서 세로 정렬 */
-    align-items: center;
-    text-align: center;
-  }
 `;
 
 export const StyledLink = styled(Link)`
   text-decoration: none;
   color: inherit;
 `;
-
-export const AdminSection = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #333;
-
-  span {
-    font-size: 0.9rem;
-    display: inline-block; /* 내용이 부모 안에 포함되도록 설정 */
-    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
-    padding: 8px;
-
-    ${media.mobile} {
-      max-width: 70%;
-    }
-  }
-`;
-
-export const AdminButton = styled.button`
-  background: none;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem;
-  color: inherit;
-  white-space: nowrap;
-  width: auto; /* 버튼 크기를 텍스트에 맞게 조정 */
-
-  img {
-    width: 108px;
-    height: auto;
-
-    ${media.tablet} {
-      margin-top: 8px;
-    }
-
-    ${media.mobile} {
-      width: 92px;
-      margin-top: 8px;
-    }
-  }
-
-  svg {
-    width: 24px;
-    height: 24px;
-  }
-
-  &:hover {
-    opacity: 0.8;
-  }
-`;