[Feat] 메인페이지 UI/UX #24
Description
✨ Feature Request
🚀 새로운 기능 제안
SE LAB 메인페이지 UI 1.0 제작
데스크톱/모바일 환경 모두 지원하는 반응형 레이아웃을 적용하고, 로고·네비게이션 메뉴·햄버거 메뉴 구조를 설계합니다.
추가로, 로그인 여부를 확인해 헤더 상태를 동적으로 변경하는 기능을 포함합니다.
💡 어떤 문제를 해결하나요?
- 현재 프로젝트에는 메인페이지가 없어 첫 화면에서 서비스 흐름을 보여주거나 주요 메뉴로 연결하는 역할을 하지 못합니다.
- 모바일 환경을 고려한 네비게이션 구조가 필요합니다.
- 로그인 상태를 직관적으로 표시할 방법이 없어, 사용자가 로그인했는지 바로 알 수 없습니다.
🎯 제안하는 기능
-
기본 레이아웃 구성
- 상단: 로고, 사이트명, 메인 네비게이션 메뉴
- 본문: 메인 콘텐츠 영역(추후 최근 게시물·공지 표시 예정)
- 하단: 푸터( 추후 개발진행에 따라 삭제 고려)
-
반응형 네비게이션
- 모바일 화면에서 햄버거 메뉴 버튼 제공
- 햄버거 메뉴 클릭 시 오버레이 활성화 및 메뉴 표시
- ESC 또는 오버레이 클릭 시 닫힘
-
로그인 상태 반영
- localStorage에 저장된 JWT 토큰 존재 여부로 로그인 여부 판단
- 로그인 시: [글쓰기] / [내 정보] / [로그아웃] 메뉴 표시
- 비로그인 시: [로그인] / [회원가입] 메뉴 표시
📝 상세 기능 설명 (선택 사항)
UI/UX 변경 사항
- 데스크톱: 로고+메뉴 가로 배치, 호버 시 색상 변경
- 모바일: 햄버거 메뉴 슬라이드 애니메이션
- 오버레이 클릭 및 ESC 키로 메뉴 닫기
- 로그인 상태에 따라 헤더 메뉴 실시간 변경
기술적인 고려사항
- CSS Flexbox 기반 레이아웃
- mainpage-1.0.css / mainpage-1.0.js 분리 관리
- 메뉴 토글 및 오버레이 제어 이벤트 리스너
- JWT 토큰 존재 여부(localStorage)로 UI 분기
대안
- 서버 렌더링 시 초기 HTML에 상태를 반영할 수도 있으나, 현재 정적 페이지 구조에서는 JS 기반 구현이 효율적
✅ 예상 결과
- 메인페이지에서 서비스의 첫 인상을 제공
- 모바일/데스크톱 환경 모두에서 직관적인 메뉴 탐색 가능
- 로그인 여부를 한눈에 파악 가능하며, 해당 상태에 맞는 메뉴 제공
➕ 추가 정보 (선택 사항)
- mainpage-1.0.html: 기본 구조 설계
- mainpage-1.0.css: 반응형 스타일 적용
- mainpage-1.0.js: 메뉴 토글, 오버레이 제어, 로그인 상태 분기 기능