feat: 외부/내부 페이지 모바일 반응형 구현 및 OAuth2 로그인 개선

frontend/src/components/Board/CreateSubBoardModal.module.css

@@ -9,31 +9,33 @@
   justify-content: center;
   align-items: center;
   z-index: 1000;
+  padding: 20px;
 }
 
 .modalContent {
   background: white;
   border-radius: 12px;
-  padding: 32px;
-  width: 90%;
+  padding: 24px;
+  width: 100%;
   max-width: 500px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  box-sizing: border-box;
 }
 
 .modalTitle {
-  font-size: 24px;
+  font-size: 20px;
   font-weight: 600;
-  margin-bottom: 24px;
+  margin-bottom: 20px;
   color: #171717;
 }
 
 .input {
   width: 100%;
-  padding: 12px 16px;
-  font-size: 16px;
+  padding: 12px 14px;
+  font-size: 15px;
   border: 1px solid #d4d4d4;
   border-radius: 8px;
-  margin-bottom: 24px;
+  margin-bottom: 20px;
   box-sizing: border-box;
 }
 
@@ -44,18 +46,20 @@
 
 .buttonGroup {
   display: flex;
-  gap: 12px;
+  gap: 10px;
   justify-content: flex-end;
+  flex-wrap: wrap;
 }
 
 .cancelButton,
 .saveButton {
-  padding: 10px 24px;
-  font-size: 16px;
+  padding: 10px 20px;
+  font-size: 15px;
   font-weight: 500;
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s;
+  min-width: 80px;
 }
 
 .cancelButton {
@@ -77,3 +81,59 @@
 .saveButton:hover {
   background: #3a80d2;
 }
+
+/* 태블릿 이상 */
+@media (min-width: 768px) {
+  .modalContent {
+    padding: 28px;
+  }
+
+  .modalTitle {
+    font-size: 22px;
+    margin-bottom: 22px;
+  }
+
+  .input {
+    padding: 12px 15px;
+    font-size: 15.5px;
+    margin-bottom: 22px;
+  }
+
+  .buttonGroup {
+    gap: 11px;
+  }
+
+  .cancelButton,
+  .saveButton {
+    padding: 10px 22px;
+    font-size: 15.5px;
+  }
+}
+
+/* 데스크톱 */
+@media (min-width: 1024px) {
+  .modalContent {
+    padding: 32px;
+  }
+
+  .modalTitle {
+    font-size: 24px;
+    margin-bottom: 24px;
+  }
+
+  .input {
+    padding: 12px 16px;
+    font-size: 16px;
+    margin-bottom: 24px;
+  }
+
+  .buttonGroup {
+    gap: 12px;
+  }
+
+  .cancelButton,
+  .saveButton {
+    padding: 10px 24px;
+    font-size: 16px;
+  }
+}

frontend/src/components/Header.jsx

@@ -1,27 +1,34 @@
 import styles from './Header.module.css';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 import Logo from '../assets/logo.png';
 
 const Header = ({ isRoot, onToggleSidebar, isOpen }) => {
   const nav = useNavigate();
+
   return (
-    <header className={styles.header}>
-      {isRoot && (
-        <button
-          className={styles.menuButton}
-          onClick={onToggleSidebar}
-          aria-label={isOpen ? '메뉴 닫기' : '메뉴 열기'}
-          aria-expanded={isOpen}
-        >
-          <span></span>
-          <span></span>
-          <span></span>
-        </button>
-      )}
+    <header className={`${styles.header} ${isRoot ? styles.transparent : ''}`}>
+      {/* 모바일/태블릿에서는 항상 햄버거 버튼 표시 */}
+      <button
+        className={styles.menuButton}
+        onClick={onToggleSidebar}
+        aria-label={isOpen ? '메뉴 닫기' : '메뉴 열기'}
+        aria-expanded={isOpen}
+      >
+        <span></span>
+        <span></span>
+        <span></span>
+      </button>
+
       <div className={styles.brand} onClick={() => nav('/')}>
         <img className={styles.logo} src={Logo} alt="세종투자연구회 로고" />
         <span className={styles.title}>세종투자연구회</span>
       </div>
+
+      <div className={styles.authLinks}>
+        <Link to="/login">로그인</Link>
+        <span>|</span>
+        <Link to="/signup">회원가입</Link>
+      </div>
     </header>
   );
 };

frontend/src/components/Header.module.css

@@ -1,28 +1,35 @@
 .header {
-  width: 264px;
+  width: 100%;
   height: 90px;
   box-sizing: border-box;
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1000;
+  z-index: 1001;
   display: flex;
   background-color: #000000;
   align-items: center;
-  padding: 0 30px;
-  gap: 30px;
+  justify-content: space-between;
+  padding: 0 20px;
+  gap: 20px;
+}
+
+/* 루트 페이지에서 투명 */
+.transparent {
+  background-color: transparent;
 }
 
 .brand {
   display: flex;
   align-items: center;
   gap: 10px;
   cursor: pointer;
+  flex: 1;
 }
 
 .title {
   font-weight: 600;
-  font-size: 18.53px;
+  font-size: 16px;
   line-height: 120%;
   letter-spacing: -0.03em;
   color: white;
@@ -39,6 +46,11 @@
   cursor: pointer;
   padding: 0;
   flex-shrink: 0;
+  transition: opacity 0.2s;
+}
+
+.menuButton:active {
+  opacity: 0.7;
 }
 
 .menuButton span {
@@ -47,9 +59,62 @@
   height: 2px;
   background: white;
   border-radius: 2px;
+  transition: all 0.3s ease;
 }
 
 .logo {
   width: 19px;
   height: 19px;
 }
+
+.authLinks {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: #ffffff;
+}
+
+.authLinks a {
+  color: #ffffff;
+  text-decoration: none;
+  transition: opacity 0.2s ease;
+  white-space: nowrap;
+}
+
+.authLinks a:hover {
+  opacity: 0.7;
+}
+
+.authLinks span {
+  color: #ffffff;
+  opacity: 0.5;
+}
+
+/* 태블릿 이상 */
+@media (min-width: 768px) {
+  .header {
+    padding: 0 30px;
+    gap: 30px;
+  }
+
+  .title {
+    font-size: 18.53px;
+  }
+
+  /* 태블릿/데스크톱에서 로그인|회원가입 숨김 */
+  .authLinks {
+    display: none;
+  }
+}
+
+/* 데스크톱 - 사이드바가 고정되므로 헤더도 고정 너비, 햄버거 버튼 숨김 */
+@media (min-width: 1024px) {
+  .header {
+    width: 264px;
+  }
+
+  .menuButton {
+    display: none;
+  }
+}

frontend/src/components/Layout.jsx

@@ -1,31 +1,75 @@
 import { Outlet, useLocation } from 'react-router-dom';
 import Header from './Header';
 import Sidebar from './Sidebar';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 function Layout() {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
   const location = useLocation();
   const isRoot = location.pathname === '/';
 
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 1024);
+      // 데스크톱에서는 사이드바 자동 닫기
+      if (window.innerWidth >= 1024) {
+        setIsSidebarOpen(false);
+      }
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  // 페이지 변경 시 모바일에서 사이드바 닫기
+  useEffect(() => {
+    if (isMobile) {
+      setIsSidebarOpen(false);
+    }
+  }, [location.pathname, isMobile]);
+
+  // 모바일에서 사이드바가 열려있을 때 body 스크롤 방지
+  useEffect(() => {
+    if (isMobile && isSidebarOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [isMobile, isSidebarOpen]);
+
   return (
     <div style={{ display: 'flex', position: 'relative', minHeight: '100vh' }}>
       <Header
         isRoot={isRoot}
         onToggleSidebar={() => setIsSidebarOpen(!isSidebarOpen)}
+        isOpen={isSidebarOpen}
         style={{ position: 'fixed' }}
       />
 
+      {/* 사이드바 - 레이아웃 밖에서 독립적으로 렌더링 */}
+      <Sidebar 
+        isOpen={isSidebarOpen} 
+        isRoot={isRoot} 
+        onClose={() => setIsSidebarOpen(false)} 
+      />
+
       <main
         style={{
           display: 'flex',
           flex: 1,
-          marginLeft: !isRoot ? '264px' : '0',
+          marginLeft: !isRoot && !isMobile ? '264px' : '0',
+          marginTop: isRoot ? '0' : '90px',
           transition: 'margin-left 0.3s ease',
+          width: '100%',
         }}
       >
-        <Sidebar isOpen={isSidebarOpen} isRoot={isRoot} />
-        <div style={{ flex: 1 }}>
+        <div style={{ flex: 1, width: '100%', overflow: 'hidden' }}>
           <Outlet />
         </div>
       </main>