[어바웃페이지] 변경된 디자인 반영 (#26)

* refactor: useIsMobile 훅 수정

* �feat: 모바일 사이즈 Nav 구현

* style: ScrollToTopButton 스타일 변경

* style: backgroun color 변경 (black -> #121212)

* feat: implement designers components

* refactor: reflect mobile size and the changed designs

* chore: update designers list

src/components/Layout/Layout.tsx

@@ -1,30 +1,69 @@
-// src/components/Layout/Layout.tsx
 import styled from 'styled-components';
 import { NAVIGATION_ITEMS } from '../../constants/constants';
 import { Link, useLocation } from 'react-router-dom';
 import { useIsMobile } from '../../hooks/useIsMobile';
+import { useEffect, useState } from 'react';
 
 function Layout({ children }: { children: React.ReactNode }) {
   const location = useLocation();
-  /* TO DO : 임시 설정 */
   const isMobile = useIsMobile();
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
+  const toggleDrawer = () => setIsDrawerOpen(!isDrawerOpen);
+
+  useEffect(() => {
+    if (isDrawerOpen === true) {
+      document.body.style.overflow = 'hidden';
+      document.body.style.position = 'fixed';
+      document.body.style.width = '100%';
+    } else {
+      document.body.style.overflow = '';
+      document.body.style.position = '';
+      document.body.style.width = '';
+    }
+
+    return () => {
+      document.body.style.overflow = '';
+      document.body.style.position = '';
+      document.body.style.width = '';
+    };
+  }, [isDrawerOpen]);
 
   return (
     <LayoutWrapper>
-      <Header
-        style={{
-          backgroundColor: location.pathname === '/' ? '#4E1006' : 'black',
-        }}
-      >
-        <Nav isMobile={isMobile}>
-          {NAVIGATION_ITEMS.map((item) => (
-            <NavLink key={item.name} to={item.path} isActive={location.pathname === item.path}>
-              {item.name}
-            </NavLink>
-          ))}
-        </Nav>
-      </Header>
-      <Main>{children}</Main>
+      <Nav isMobile={isMobile}>
+        {isMobile ? (
+          <>
+            <HamburgerButton onClick={toggleDrawer} src="/svg/hamburger.svg" />
+            <Drawer isOpen={isDrawerOpen}>
+              <DrawerContent>
+                <DrawerButton onClick={toggleDrawer} src="/svg/left-arrow.svg" />
+                <NavLinkContainer isMobile={isMobile}>
+                  {NAVIGATION_ITEMS.map((item) => (
+                    <NavLink
+                      key={item.name}
+                      to={item.path}
+                      isActive={location.pathname === item.path}
+                      onClick={toggleDrawer}
+                    >
+                      {item.name}
+                    </NavLink>
+                  ))}
+                </NavLinkContainer>
+              </DrawerContent>
+            </Drawer>
+          </>
+        ) : (
+          <NavLinkContainer isMobile={isMobile}>
+            {NAVIGATION_ITEMS.map((item) => (
+              <NavLink key={item.name} to={item.path} isActive={location.pathname === item.path}>
+                {item.name}
+              </NavLink>
+            ))}
+          </NavLinkContainer>
+        )}
+      </Nav>
+      {children}
     </LayoutWrapper>
   );
 }
@@ -36,38 +75,66 @@ const LayoutWrapper = styled.div`
   flex-direction: column;
 `;
 
-const Header = styled.header`
-  padding: ${(props) => props.theme.spacing.medium};
+interface NavProps {
+  isMobile: boolean;
+}
+
+const Nav = styled.nav<NavProps>`
   display: flex;
-  justify-content: center;
+  height: ${({ isMobile }) => (isMobile ? '44px' : '64px')};
+  justify-content: ${({ isMobile }) => (isMobile ? 'flex-start' : 'center')};
+  align-items: center;
+  padding-left: 16px;
 `;
 
-interface NavProps {
+interface NavLinkContainerProps {
   isMobile: boolean;
 }
 
-const Nav = styled.nav<NavProps>`
+const NavLinkContainer = styled.div<NavLinkContainerProps>`
   display: flex;
-  /* TO DO : 임시 설정 */
-  gap: ${({ isMobile }) => (isMobile ? '20px' : '200px')};
-  font-size: ${({ isMobile }) => (isMobile ? '20px' : '32px')};
-  font-weight: 900;
-  line-height: 120%;
-  letter-spacing: -0.736px;
+  flex-direction: ${({ isMobile }) => (isMobile ? 'column' : 'row')};
+  gap: ${({ isMobile }) => (isMobile ? '60px' : '200px')};
 `;
 
-export interface NavLinkProps {
+interface NavLinkProps {
   isActive: boolean;
 }
-
 const NavLink = styled(Link)<NavLinkProps>`
+  font-size: 20px;
+  font-weight: 900;
+  line-height: 120%;
   transition: opacity 0.3s ease, color 0.3s ease;
-  color: ${({ isActive }) => (isActive ? '#FFFFFF' : '#966B6B')};
-  &:hover {
-    opacity: 1;
-  }
+  color: ${({ isActive }) => (isActive ? '#FFFFFF' : '#7CA2B0')};
+`;
+
+const HamburgerButton = styled.img`
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+`;
+
+const Drawer = styled.div<{ isOpen: boolean }>`
+  position: fixed;
+  top: 0;
+  left: ${({ isOpen }) => (isOpen ? '0' : '-250px')};
+  width: 150px;
+  height: 100%;
+  background-color: #000000;
+  transition: left 0.3s ease-in-out;
+  z-index: 10000000;
+`;
+
+const DrawerContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 20px;
 `;
 
-const Main = styled.main`
-  flex: 1;
+const DrawerButton = styled.img`
+  cursor: pointer;
+  margin: 50px 0px;
+  width: 24px;
+  height: 24px;
 `;

src/constants/constants.ts

@@ -9,7 +9,7 @@ export const MOBILE_BREAKPOINT = 768;
 // ABOUT PAGE
 
 // MainTitle.tsx
-export const EXHIBITION_TITLE = '2025 Gachon University College of Design';
+export const EXHIBITION_TITLE = '2024 Gachon University College of Design';
 export const EXHIBITION_DEPARTMENT = 'Department of Visual communication Design,';
 export const EXHIBITION_SUBTITLE = 'Graduation Exhibition';
 

src/hooks/useIsMobile.ts

@@ -1,20 +1,26 @@
-  /* TO DO : 임시 설정 */
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { MOBILE_BREAKPOINT } from '../constants/constants';
 
-export const useIsMobile = () => {
-  const [isMobile, setIsMobile] = useState(false);
+export const useIsMobile = (): boolean => {
+  const [isMobile, setIsMobile] = useState<boolean>(() => {
+    if (typeof window !== 'undefined') {
+      return window.innerWidth < MOBILE_BREAKPOINT;
+    }
+    return false;
+  });
 
-  useEffect(() => {
-    const checkIsMobile = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
+  const checkIsMobile = useCallback(() => {
+    if (typeof window !== 'undefined') {
+      const width = window.innerWidth;
+      setIsMobile(width < MOBILE_BREAKPOINT);
+    }
+  }, []);
 
+  useEffect(() => {
     checkIsMobile();
     window.addEventListener('resize', checkIsMobile);
-
     return () => window.removeEventListener('resize', checkIsMobile);
-  }, []);
+  }, [checkIsMobile]);
 
   return isMobile;
 };

src/pages/About/About.tsx

@@ -12,8 +12,11 @@ import ConceptReflecting from './components/ConceptReflecting/ConceptReflecting'
 import { useScroll } from '../../hooks/useScroll';
 import ScrollIndicator from './components/ScrollIndicator/ScrollIndicator';
 import ScrollToTopButton from './components/ScrollToTopButton/ScrollToTopButton';
+import { useIsMobile } from '../../hooks/useIsMobile';
+import Designers from './components/Designers/Designers';
 
 function About() {
+  const isMobile = useIsMobile();
   const { scrollProgress } = useScroll();
   const scrollPercentage = Math.round(scrollProgress);
 
@@ -27,18 +30,18 @@ function About() {
           onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
           text="Going Up!"
         />
-        <ScrollIndicator scrollPercentage={scrollPercentage} />
-        <MainTitle scrollPercentage={scrollProgress} />
+        {isMobile ? <></> : <ScrollIndicator scrollPercentage={scrollPercentage} />}
+        <MainTitle />
         <ExhibitionInfo />
         <ExhibitionIntroduction />
         <ExhibitionMeaning />
         <GraduationCommittee />
-        <section>
-          <ConceptSavoring />
-          <ConceptExperiencing />
-          <ConceptImmersing />
-          <ConceptReflecting />
-        </section>
+
+        <ConceptSavoring />
+        <ConceptExperiencing />
+        <ConceptImmersing />
+        <ConceptReflecting />
+        <Designers />
       </AboutPage>
     </>
   );