[FE] SISC1-188 [FEAT] : 랜딩페이지 구현 #67
Conversation
|
Note Currently processing new changes in this PR. This may take a few minutes, please wait... ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (3)
Tip CodeRabbit can generate a title for your PR based on the changes with custom instructions.Add the Walkthrough루트 경로인지 감지하여 레이아웃과 사이드바 렌더링 분기를 추가하고, 홈 전용 슬라이드 사이드바 및 새로운 Home 페이지와 스타일(CSS 모듈)을 도입했습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Router
participant Layout
participant Sidebar
User->>Router: 요청 (예: / 또는 다른 경로)
Router->>Layout: Layout 렌더
Layout->>Layout: useLocation -> isRoot 결정
alt isRoot == true
Layout->>Sidebar: render as home header + slide menu
Sidebar->>Sidebar: show brand + menuButton
User->>Sidebar: 클릭(menuButton)
Sidebar->>Sidebar: toggle isOpen -> apply .open/.closed (transform)
Sidebar->>Sidebar: render menuSections inside sliding panel
else isRoot == false
Layout->>Sidebar: render traditional sidebar (항상 열림)
Sidebar->>Sidebar: render menuSections directly
end
User->>Sidebar: 메뉴 클릭 (NavLink)
Sidebar->>Router: navigate -> 페이지 변경
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20-25 minutes 주의 깊은 검토 대상:
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
frontend/src/pages/Home.jsx (1)
13-18: 회원가입 버튼 경로를 절대 경로로 통일해주세요.
현재nav('signup')은 상대 경로라서 이 컴포넌트가 루트가 아닌 다른 라우트 안에서 재사용될 경우 잘못된 경로(/현재경로/signup)로 이동할 수 있습니다. 로그인 버튼과 동일하게 절대 경로를 지정해 두면 이런 잠재 오류를 예방할 수 있습니다.- <button className={styles.signUp} onClick={() => nav('signup')}> + <button className={styles.signUp} onClick={() => nav('/signup')}>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
frontend/src/assets/coin3.pngis excluded by!**/*.pngfrontend/src/assets/coin5.pngis excluded by!**/*.pngfrontend/src/assets/logo.pngis excluded by!**/*.png
📒 Files selected for processing (5)
frontend/src/components/Layout.jsx(1 hunks)frontend/src/components/Sidebar.jsx(3 hunks)frontend/src/components/Sidebar.module.css(2 hunks)frontend/src/pages/Home.jsx(1 hunks)frontend/src/pages/Home.module.css(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (3)
frontend/src/components/Layout.jsx (1)
frontend/src/components/Sidebar.jsx (3)
location(7-7)isRoot(8-8)Sidebar(6-174)
frontend/src/pages/Home.jsx (1)
frontend/src/pages/Attendance.jsx (1)
nav(15-15)
frontend/src/components/Sidebar.jsx (1)
frontend/src/components/Layout.jsx (2)
location(5-5)isRoot(6-6)
gxuoo
left a comment
gxuoo
left a comment
There was a problem hiding this comment.
크게 수정할 것은 없어보입니다~! 고생하셨습니다!
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (2)
frontend/src/components/Sidebar.module.css (1)
22-29: 닫힌 사이드바가 접근성 트리에서 완전히 제거되지 않습니다.
.closed상태에pointer-events: none만 설정되어 있어 키보드 포커스는 여전히 숨겨진 링크로 이동할 수 있습니다. 완전한 접근성을 위해visibility속성도 함께 사용해야 합니다.Based on learnings
다음과 같이 수정하세요:
.open { transform: translateX(0); + visibility: visible; + pointer-events: auto; } .closed { transform: translateX(-100%); + visibility: hidden; pointer-events: none; }frontend/src/components/Sidebar.jsx (1)
134-136: 햄버거 버튼 내부의 장식용 요소를 스크린 리더에서 숨기세요.버튼 안의 빈
<span>요소들은 시각적 장식용이므로aria-hidden="true"를 추가하여 스크린 리더에서 무시되도록 해야 합니다.다음과 같이 수정하세요:
<button className={styles.menuButton} onClick={toggleSidebar} aria-label={isOpen ? '메뉴 닫기' : '메뉴 열기'} aria-expanded={isOpen} > - <span></span> - <span></span> - <span></span> + <span aria-hidden="true"></span> + <span aria-hidden="true"></span> + <span aria-hidden="true"></span> </button>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
frontend/src/components/Sidebar.jsx(3 hunks)frontend/src/components/Sidebar.module.css(2 hunks)frontend/src/pages/Home.module.css(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
frontend/src/components/Sidebar.jsx (3)
frontend/src/components/Layout.jsx (2)
location(5-5)isRoot(6-6)frontend/src/pages/Home.jsx (1)
nav(8-8)frontend/src/pages/Attendance.jsx (1)
nav(15-15)
🔇 Additional comments (5)
frontend/src/components/Sidebar.jsx (3)
7-11: LGTM! 상태 관리와 라우팅 로직이 잘 구현되었습니다.
useLocation,useState,useNavigate를 활용한 루트 경로 감지 및 사이드바 토글 로직이 적절하게 구현되었습니다.
13-121: LGTM! 메뉴 섹션 추출로 코드 중복이 제거되었습니다.네비게이션 구조를
menuSections변수로 추출하여 루트/비루트 경로에서 재사용하도록 리팩토링한 점이 훌륭합니다. 코드 유지보수성이 크게 향상되었습니다.
43-43: 제목 요소의 의미론적 레벨 확인이 필요합니다."출석체크"를
<h3>에서<span>으로 변경했습니다. 만약 이것이 섹션 제목의 역할을 한다면 의미론적으로 후퇴한 것일 수 있습니다. 실제로 제목의 역할을 하지 않는다면 현재 구현이 적절합니다.제목 역할을 해야 한다면 적절한 heading 레벨을 사용하세요:
- <span className={styles['menu-title']}>출석체크</span> + <h3 className={styles['menu-title']}>출석체크</h3>frontend/src/components/Sidebar.module.css (2)
8-20: LGTM! 홈 사이드바 메뉴의 레이아웃과 애니메이션이 적절합니다.고정 위치 지정과 transform 기반 슬라이드 애니메이션이 잘 구현되었습니다.
z-index와overflow설정도 적절합니다.
114-161: LGTM! 홈페이지 헤더 영역의 스타일이 잘 정의되었습니다.
.left,.brand,.menuButton,.logo클래스들이 햄버거 메뉴와 브랜드 영역을 구성하는 데 적절하게 정의되었습니다.
2 participants
1) 작업한 이슈번호
SISC1-188
2) 변경 요약 (What & Why)
3) 스크린샷/동영상 (UI 변경 시)
햄버거바 클릭 시
4) 상세 변경사항 (전부 다)
5) 참고사항
position: absolute; 같은 속성을 쓰다보니 반응형이 전혀 고려가 안되어있어서 차후에 반응형으로 CSS 스타일 수정 예정입니다.
Summary by CodeRabbit
릴리스 노트
새로운 기능
UI/스타일