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

[Kosw6]

PR Description

📱 외부 페이지 모바일 반응형 구현

1. 외부 메인 페이지 (Main.jsx)

• 햄버거 메뉴 + 사이드바 네비게이션 추가
• 모바일 중심 반응형 레이아웃 구현
• 브레이크포인트: 모바일(<768px), 태블릿(768-1023px), 데스크톱(≥1024px)

2. 외부 상세 페이지 (Intro, Leaders, Portfolio, MonthlyReport)

• 모든 페이지에 통일된 햄버거 메뉴 적용
• 헤더 로고 클릭 시 외부 메인으로 이동 기능 추가
• 사이드바 헤더 클릭 시 외부 메인으로 이동 기능 추가
• 각 컴포넌트별 모바일 최적화:
  • Filter: 모바일에서 가로 버튼 그리드로 변경, active 상태 남색 배경 + 흰색 텍스트
  • Info: 폰트 크기 및 간격 조정
  • MemberCard: 1열 배치
  • PortfolioItem: 간격 및 이미지 크기 조정
  • Report: 반응형 그리드 적용

🏠 내부 페이지 개선

1. 내부 랜딩 페이지 (Home.jsx)

• 기존 레이아웃 유지하며 헤더 투명화
• 텍스트와 코인 이미지 Y축 중앙 정렬
• 모바일 중심 반응형 디자인

2. 공통 헤더 (Header.jsx)

• "로그인 | 회원가입" 링크 추가
• 모바일(<768px)에서만 표시, 태블릿/데스크톱에서는 사이드바 사용
• 루트 페이지에서 헤더 배경 투명 처리

3. 로그인 페이지

• "유저 정보 확인" 디버그 버튼 제거

👤 마이페이지 개선

사용자 정보 동적 로딩 (ProfileCard.jsx)

• /api/user/details API 연동
• 실제 사용자 이름(name) 및 포인트(point) 표시
• OAuth 로그인 사용자 이름 정상 표시
• 로딩 상태 및 에러 처리 추가

🔐 OAuth2 로그인 개선

OAuth 성공 처리 (OAuthSuccess.jsx)

문제: 백엔드가 토큰을 HttpOnly 쿠키로 전달하지만, 프론트엔드가 URL 파라미터에서 토큰을 찾으려고 시도

해결:

• 쿠키에서 access, refresh 토큰 읽기
• localStorage에 accessToken, refreshToken 저장
• 자동 홈 페이지 리다이렉트
• 로딩 UI 및 에러 처리 개선

📐 CSS 모듈화 및 반응형 디자인

공통 스타일 패턴

/* 모바일 우선 */
.element { ... }

/* 태블릿 */
@media (min-width: 768px) and (max-width: 1023px) { ... }

/* 데스크톱 */
@media (min-width: 1024px) { ... }

주요 컴포넌트 스타일

• 햄버거 메뉴: 투명 배경 + blur 효과
• 사이드바: 슬라이드 애니메이션, 오버레이 클릭 닫기
• 헤더 로고: 클릭 가능, 호버 효과

🎨 디자인 개선

• 모든 외부 페이지 로고 통일 (세종투자연구회 로고)
• 필터 active 상태: 남색 배경(#142d56) + 흰색 텍스트
• 일관된 색상 팔레트 및 간격 사용

🐛 버그 픽스

• 외부 페이지 로고 필터 제거 (하얀 네모 현상 해결)
• 데스크톱에서 불필요한 "로그인|회원가입" 중복 표시 제거
• 메인 랜딩 페이지 상단 여백 조정 (투명 헤더로 해결)

📝 파일 변경 목록

Frontend

• src/pages/Home.jsx, Home.module.css - 내부 랜딩 페이지 반응형
• src/pages/external/Main.jsx, Main.module.css - 외부 메인 페이지 햄버거 메뉴
• src/pages/external/Intro.jsx - 동아리 소개 페이지 반응형
• src/pages/external/Leaders.jsx - 임원 소개 페이지 반응형
• src/pages/external/Portfolio.jsx - 운용 포트폴리오 페이지 반응형
• src/pages/external/MonthlyReport.jsx - 월간 세투연 페이지 반응형
• src/pages/external/External.module.css - 외부 페이지 공통 스타일
• src/pages/external/MonthlyReport.module.css - 월간 세투연 스타일
• src/components/Header.jsx, Header.module.css - 공통 헤더 개선
• src/components/Layout.jsx - 레이아웃 마진 조정
• src/components/mypage/ProfileCard.jsx - 마이페이지 API 연동
• src/components/external/Filter.module.css - 필터 모바일 스타일
• src/components/external/Info.module.css - 정보 섹션 반응형
• src/components/external/MemberCard.module.css - 멤버 카드 반응형
• src/components/external/PortfolioItem.module.css - 포트폴리오 아이템 반응형
• src/components/external/Report.module.css - 리포트 카드 반응형
• src/components/login/LoginForm.jsx - 디버그 버튼 제거
• src/pages/OAuthSuccess.jsx - OAuth 쿠키 처리 개선

🧪 테스트 체크리스트

• 모바일(<768px) 레이아웃 정상 작동
• 태블릿(768-1023px) 레이아웃 정상 작동
• 데스크톱(≥1024px) 레이아웃 정상 작동
• 햄버거 메뉴 open/close 동작
• OAuth2 로그인 후 토큰 저장 확인
• 마이페이지 사용자 정보 표시 확인
• 모든 링크 정상 작동

Closes

Summary by CodeRabbit

릴리스 노트

• 새로운 기능

  • 모바일 환경을 위한 반응형 디자인 추가 (태블릿, 데스크톱 지원)
  • 외부 페이지에 모바일 햄버거 메뉴 네비게이션 추가
  • 쿠키 기반 OAuth 인증 흐름 개선

• UI/UX 개선

  • 모든 페이지의 레이아웃과 간격 최적화
  • 다양한 화면 크기에 맞는 반응형 타이포그래피 조정
  • 모바일 환경에서 더 나은 사용성

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

이 PR은 프론트엔드 전체에 걸쳐 반응형 디자인을 도입하고 모바일 네비게이션을 추가하며, 헤더/사이드바 동작을 수정하고, 다양한 컴포넌트의 레이아웃과 타이포그래피를 조정합니다. 또한 인증 흐름을 쿠키 기반으로 변경하고 로그인 폼의 헬퍼 함수를 제거하며, 여러 페이지 및 컴포넌트 스타일을 재구성합니다.

Changes

코호트 / 파일(들)	변경 요약
반응형 모달 및 폼 frontend/src/components/Board/CreateSubBoardModal.module.css	모달 오버레이 패딩 추가, 콘텐츠 패딩 감소(32px → 24px), 너비를 고정에서 유동형(90% → 100%)으로 변경. 제목, 입력, 버튼 폰트 크기 축소. 태블릿/데스크톱 미디어 쿼리로 단계적 크기 조정 추가.
헤더 및 인증 링크 frontend/src/components/Header.jsx, frontend/src/components/Header.module.css	Header에 react-router-dom의 Link 임포트 추가. isRoot 조건부 transparent 클래스 적용. 고정 너비(264px)를 전체 너비(100%)로 변경. 항상 버거 메뉴 렌더링. 로그인/회원가입 인증 링크 그룹 추가. 반응형 미디어 쿼리로 태블릿/데스크톱에서 다른 레이아웃 적용.
레이아웃 및 사이드바 반응형 동작 frontend/src/components/Layout.jsx, frontend/src/components/Sidebar.jsx, frontend/src/components/Sidebar.module.css	Layout에 useEffect 추가하여 isMobile 상태 관리 및 창 크기 변화 추적. 헤더에 isOpen prop 전달. 사이드바를 main 외부로 분리하고 onClose prop 추가. 모바일 오버레이 추가 및 네비게이션 후 자동 닫기 구현. 사이드바 위치(top: 90px → top: 0), 높이, 패딩, z-index 조정. 데스크톱(1024px+)에서 영구 표시.
출석 관리 UI 반응형화 frontend/src/components/attendance/ExcusedTime.module.css, frontend/src/components/attendance/SessionManage.module.css, frontend/src/components/attendance/SessionSelectBox.module.css, frontend/src/pages/Attendance.module.css	고정 크기를 100% 너비 + max-width로 변경. 패딩 감소(40px → 20px). 폰트 크기 축소(16px→14px, 24px→20px). 테이블 레이아웃을 fixed에서 auto로 변경, 수평 스크롤 활성화. 태블릿/데스크톱 미디어 쿼리로 원래 크기 복원.
출석 관리 카드 및 설정 UI frontend/src/components/attendancemanage/AttendanceManagementCard.module.css, frontend/src/components/attendancemanage/SessionManagementCard.jsx, frontend/src/components/attendancemanage/SessionManagementCard.module.css, frontend/src/components/attendancemanage/SessionSettingCard.module.css	컨테이너 패딩 감소, 그림자 및 호버 효과 추가. 테이블 헤더 sticky 처리, border-spacing 0 설정. formatDate/formatTime 헬퍼 추가. 그리드 기반 레이아웃으로 변경(flex → grid). 입력 필드 전체 너비, 포커스 스타일 추가. 4개 미디어 쿼리 블록(768px, 1024px, 1280px, 1536px)으로 단계적 스케일링.
백테스트 컴포넌트 반응형화 frontend/src/components/backtest/common/Field.module.css, frontend/src/components/backtest/common/SectionCard.module.css, frontend/src/pages/BackTest.module.css, frontend/src/pages/BacktestResult.module.css	fieldLabel 폰트 크기 12px로 축소, box-sizing 추가. SectionCard 패딩 20px으로 감소, flex-direction column으로 변경. 태블릿에서 row로 복원, 데스크톱에서 원래 크기 복원. BackTest 패딩 및 gap 감소, 제목 크기 축소. BacktestResult statusBar를 column에서 row로 재배열.
외부 컴포넌트 및 페이지 반응형화 frontend/src/components/external/Filter.module.css, frontend/src/components/external/Info.module.css, frontend/src/components/external/MemberCard.module.css, frontend/src/components/external/PortfolioItem.module.css, frontend/src/components/external/Report.module.css	호버 전환 및 호버 효과 추가(opacity, transform). 이미지 border-radius/object-fit 추가. 고정 너비를 max-width 제약과 함께 100%로 변경. 모바일/태블릿 미디어 쿼리로 카드 높이, 글꼴 크기, 갭 조정.
게시판 UI frontend/src/pages/Board.module.css	패딩/마진/폰트 크기 감소. boardActions를 flex-end에서 space-between으로 변경. 검색/정렬/쓰기 버튼 크기 축소. 태블릿/데스크톱에서 단계적으로 크기 복원.
홈 페이지 반응형 구조화 frontend/src/pages/Home.module.css	position relative 추가, 절대 위치 해킹 제거. 제목 64px→32px, 부제목 36px→18px로 축소. .textBox 중앙 정렬 및 그래디언트 텍스트 스타일. .imgBox 및 코인 요소 추가 및 반응형 위치 조정. 태블릿/데스크톱에서 텍스트 및 코인 크기 확대, .textBox 좌측 정렬.
주식 게임 UI 반응형화 frontend/src/components/stockgame/Betting.module.css, frontend/src/components/stockgame/BettingHistory.module.css, frontend/src/components/stockgame/StockInfoItem.module.css, frontend/src/pages/StockGame.module.css	고정 차원을 100% + max-width로 변경. 레이아웃을 수평에서 수직 스택으로 변경. 버튼/아이콘 크기 감소(70x35 → 60x30). 갭 및 마진 감소. 태블릿/데스크톱 미디어 쿼리로 크기 복원, gap 15px→20px로 증가.
외부 페이지 모바일 네비게이션 frontend/src/pages/external/External.module.css, frontend/src/pages/external/Intro.jsx, frontend/src/pages/external/Leaders.jsx, frontend/src/pages/external/Main.jsx, frontend/src/pages/external/Main.module.css, frontend/src/pages/external/MonthlyReport.jsx, frontend/src/pages/external/MonthlyReport.module.css, frontend/src/pages/external/Portfolio.jsx	isMobileMenuOpen 상태 추가, 창 크기 변화 감시 이벤트. 모바일 헤더(햄버거 버튼), 오버레이, 슬라이드인 사이드바 추가. fadeIn/slideIn 애니메이션 정의. Logo/SejongLogo 임포트 추가. 모바일(<768px)/태블릿(768–1023px)/데스크톱(≥1024px) 미디어 쿼리로 헤더 높이, 타이포그래피, 콘텐츠 레이아웃 조정. 모바일 헤더 hidden on desktop (≥1024px).
게시물 상세 페이지 frontend/src/pages/PostDetail.module.css	고정 콘텐츠 너비를 max-width 제약과 함께 100%로 변경. 기본 폰트 크기/패딩 감소. 태블릿/데스크톱 미디어 쿼리로 제목, 내용, 댓글 섹션 크기 조정. 프로필 아이콘, 저자/날짜, 첨부파일 크기 조정.
글로벌 및 기타 스타일 frontend/src/index.css, frontend/src/pages/AttendanceManage.module.css	전역 box-sizing: border-box 추가, HTML/BODY 초기화. overflow-x: hidden, position: relative 추가. 모바일에서 body.no-scroll 규칙(overflow hidden, position fixed). #root min-height: 100vh 설정. AttendanceManage 컨테이너 패딩 감소, 그리드 기반 레이아웃으로 변경(settings/session/roster 영역), 버튼그룹 및 아이콘버튼 스타일 추가, 4개 미디어 쿼리 블록으로 단계적 스케일링.
인증 및 마이페이지 frontend/src/components/login/LoginForm.jsx, frontend/src/components/mypage/ProfileCard.jsx, frontend/src/pages/OAuthSuccess.jsx	LoginForm에서 getUserDetails 헬퍼 및 관련 버튼 제거. ProfileCard에 useEffect 추가하여 마운트 시 사용자 세부정보 가져오기, 로딩 상태 및 동적 포인트 표시. OAuthSuccess를 URL 매개변수 기반에서 쿠키 기반 흐름으로 전환, 토큰을 localStorage에 저장, 짧은 지연 후 홈으로 리다이렉트 또는 로그인으로 리다이렉트.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~28 minutes

Possibly related PRs

• [FE] SISC1-167 [FEAT]: 마이페이지 스켈레톤 구현 #47: ProfileCard.jsx 파일 변경으로 사용자 세부정보 가져오기 및 동적 포인트 표시 기능 추가
• [FE] SISC1-192 [FIX] 출석관리(관리자) 페이지 수정 #87: 출석 관리 기능의 SessionManagementCard, AttendanceManagementCard, SessionSettingCard 및 CSS 파일 동시 수정
• [FE] SISC1-198 [FEAT] 헤더 적용 및 토글 사이드바 전체 페이지 적용 #81: Header.jsx/Header.module.css, Layout.jsx, Sidebar.jsx/Sidebar.module.css 동시 수정으로 헤더/사이드바 동작 변경

Suggested labels

FE, responsive-design, mobile-navigation, ui-refactor

Suggested reviewers

• DongEun02
• gxuoo

Poem

🐰 모바일, 태블릿, 데스크톱을 넘나들며,
반응형 마법이 화면을 춤추게 하네!
스타일을 다시 엮고, 레이아웃을 재정렬하니,
어느 기기든 완벽한 모습, ✨ 우리의 UI!
햄버거 메뉴부터 쿠키 인증까지,
사용자 경험의 새 시대가 열렸다! 🎉

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8a6fa2d and a07a935.

📒 Files selected for processing (43)

• frontend/src/components/Board/CreateSubBoardModal.module.css
• frontend/src/components/Header.jsx
• frontend/src/components/Header.module.css
• frontend/src/components/Layout.jsx
• frontend/src/components/Sidebar.jsx
• frontend/src/components/Sidebar.module.css
• frontend/src/components/attendance/ExcusedTime.module.css
• frontend/src/components/attendance/SessionManage.module.css
• frontend/src/components/attendance/SessionSelectBox.module.css
• frontend/src/components/attendancemanage/AttendanceManagementCard.module.css
• frontend/src/components/attendancemanage/SessionManagementCard.jsx
• frontend/src/components/attendancemanage/SessionManagementCard.module.css
• frontend/src/components/attendancemanage/SessionSettingCard.module.css
• frontend/src/components/backtest/common/Field.module.css
• frontend/src/components/backtest/common/SectionCard.module.css
• frontend/src/components/external/Filter.module.css
• frontend/src/components/external/Info.module.css
• frontend/src/components/external/MemberCard.module.css
• frontend/src/components/external/PortfolioItem.module.css
• frontend/src/components/external/Report.module.css
• frontend/src/components/login/LoginForm.jsx
• frontend/src/components/mypage/ProfileCard.jsx
• frontend/src/components/stockgame/Betting.module.css
• frontend/src/components/stockgame/BettingHistory.module.css
• frontend/src/components/stockgame/StockInfoItem.module.css
• frontend/src/index.css
• frontend/src/pages/Attendance.module.css
• frontend/src/pages/AttendanceManage.module.css
• frontend/src/pages/BackTest.module.css
• frontend/src/pages/BacktestResult.module.css
• frontend/src/pages/Board.module.css
• frontend/src/pages/Home.module.css
• frontend/src/pages/OAuthSuccess.jsx
• frontend/src/pages/PostDetail.module.css
• frontend/src/pages/StockGame.module.css
• frontend/src/pages/external/External.module.css
• frontend/src/pages/external/Intro.jsx
• frontend/src/pages/external/Leaders.jsx
• frontend/src/pages/external/Main.jsx
• frontend/src/pages/external/Main.module.css
• frontend/src/pages/external/MonthlyReport.jsx
• frontend/src/pages/external/MonthlyReport.module.css
• frontend/src/pages/external/Portfolio.jsx

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}