[FE] SISC1-197 [FEAT] : 사이드바에 게시판 리스트 추가#109
Conversation
Walkthrough사이드바의 정적 링크들이 선택형 드롭다운으로 대체되고 React Router의 programmatic navigation(useNavigate/useLocation)과 컴포넌트 상태(selectedBoard, boardList)가 도입되었습니다. 라우트는 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 사용자
participant SB as Sidebar (select)
participant NAV as React Router (navigate)
participant APP as App Router
participant B as Board
participant P as PostDetail
U->>SB: 드롭다운에서 보드 선택
SB->>NAV: navigate("/board/:team") 또는 navigate("/board/:team/:postId")
NAV->>APP: 라우트 매칭 요청
alt /board/:team/:postId 매칭
APP->>P: PostDetail 렌더
note right of P `#DFF2E1`: 상세 게시물 표시
else /board/:team 매칭
APP->>B: Board 렌더
note right of B `#E8F0FF`: 게시판 목록/내용 표시
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
🐰 변경을 축하하는 토끼의 시
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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 (3)
frontend/src/components/Sidebar.module.css (1)
120-135: 접근성 개선을 위한 포커스 상태 추가를 권장합니다.드롭다운에 테두리가 없고 투명한 배경을 사용하여 대화형 요소로 식별하기 어려울 수 있습니다. 키보드 내비게이션을 위한 포커스 상태와 마우스 호버 시 시각적 피드백을 추가하는 것을 고려해보세요.
다음과 같이 포커스 및 호버 상태를 추가할 수 있습니다:
.boardSelect { width: 100%; background: transparent; color: #ffffff; border: none; padding: 3px; border-radius: 6px; margin-top: 6px; text-decoration: none; font-weight: 500; font-size: 16px; + cursor: pointer; + transition: background-color 0.2s ease; } +.boardSelect:hover { + background: rgba(217, 217, 217, 0.05); +} + +.boardSelect:focus { + outline: 2px solid rgba(255, 255, 255, 0.3); + outline-offset: 2px; + background: rgba(217, 217, 217, 0.05); +} + .boardSelect option { color: black; }frontend/src/components/Sidebar.jsx (2)
9-18: 게시판 목록을 별도 설정 파일로 분리하는 것을 고려하세요.현재 게시판 목록이 컴포넌트 내부에 하드코딩되어 있습니다. 목록이 자주 변경되거나 다른 컴포넌트에서도 사용될 가능성이 있다면, 별도의 설정 파일이나 상수 파일로 분리하는 것이 유지보수에 유리합니다.
예를 들어
src/constants/boardConfig.js와 같은 파일을 생성할 수 있습니다:// src/constants/boardConfig.js export const BOARD_LIST = [ { name: '전체 게시판', path: '/board' }, { name: '증권1팀 게시판', path: '/board/securities-1' }, // ... 나머지 게시판 ];
30-51: 접근성을 위해 레이블과 select 요소를 연결하세요.현재 "게시판" 텍스트와 select 요소가 프로그래밍 방식으로 연결되어 있지 않아 스크린 리더 사용자에게 불편할 수 있습니다.
다음과 같이 개선할 수 있습니다:
<div className={styles['menu-section']}> - <span className={styles['menu-title']}>게시판</span> + <label htmlFor="board-select" className={styles['menu-title']}> + 게시판 + </label> <select + id="board-select" className={styles.boardSelect} value={selectedBoard} onChange={(e) => {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
frontend/src/components/Sidebar.jsx(2 hunks)frontend/src/components/Sidebar.module.css(1 hunks)
🔇 Additional comments (1)
frontend/src/components/Sidebar.jsx (1)
1-3: LGTM!필요한 훅들을 올바르게 임포트했습니다.
frontend/src/components/Sidebar.jsx
Outdated
| const [selectedBoard, setSelectedBoard] = useState('전체 게시판'); | ||
| const navigate = useNavigate(); |
There was a problem hiding this comment.
현재 URL과 선택 상태의 동기화를 고려하세요.
초기 상태가 '전체 게시판'으로 하드코딩되어 있어, 사용자가 특정 팀 게시판 URL로 직접 접근하거나 브라우저의 뒤로 가기를 사용할 경우 선택된 드롭다운 값이 실제 페이지와 일치하지 않습니다.
현재 경로를 기반으로 초기 상태를 설정하도록 개선할 수 있습니다:
+import { NavLink, useNavigate, useLocation } from 'react-router-dom';
import styles from './Sidebar.module.css';
import { useState } from 'react';
const Sidebar = ({ isOpen, isRoot }) => {
- const [selectedBoard, setSelectedBoard] = useState('전체 게시판');
const navigate = useNavigate();
+ const location = useLocation();
const boardList = [
{ name: '전체 게시판', path: '/board' },
{ name: '증권1팀 게시판', path: '/board/securities-1' },
{ name: '증권2팀 게시판', path: '/board/securities-2' },
{ name: '증권3팀 게시판', path: '/board/securities-3' },
{ name: '자산운용팀 게시판', path: '/board/asset-management' },
{ name: '금융IT팀 게시판', path: '/board/finance-it' },
{ name: '매크로팀 게시판', path: '/board/macro' },
{ name: '트레이딩팀 게시판', path: '/board/trading' },
];
+
+ const currentBoard = boardList.find(item => item.path === location.pathname);
+ const [selectedBoard, setSelectedBoard] = useState(
+ currentBoard?.name || '전체 게시판'
+ );Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In frontend/src/components/Sidebar.jsx around lines 6-7, the selectedBoard state
is hardcoded to '전체 게시판' which desynchronizes the dropdown from the current URL;
derive the initial selectedBoard from the current location (useLocation or parse
window.location) instead of a hardcoded string and replace useState('전체 게시판')
with a computed initial value, then add a useEffect that listens to location
changes and updates setSelectedBoard accordingly so direct URL access and
browser navigation keep the dropdown in sync with the displayed board.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/src/App.jsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
frontend/src/App.jsx (1)
frontend/src/pages/PostDetail.jsx (1)
PostDetail(14-365)
| <Route path="/board/:team" element={<Board />} /> | ||
| <Route path="/board/:team/:postId" element={<PostDetail />} /> |
There was a problem hiding this comment.
🧩 Analysis chain
라우트 파라미터 이름 불일치로 인한 치명적 버그
PostDetail 컴포넌트는 useParams()에서 id를 읽지만(const { id } = useParams()), 새 라우트는 :postId로 정의되어 있습니다. 이로 인해 PostDetail이 게시물 ID를 받지 못해 게시물 로드에 실패합니다.
다음 중 하나를 선택하여 수정하세요:
해결책 1 (권장): 라우트 파라미터를 id로 변경
- <Route path="/board/:team/:postId" element={<PostDetail />} />
+ <Route path="/board/:team/:id" element={<PostDetail />} />해결책 2: PostDetail 컴포넌트를 postId 사용하도록 수정
PostDetail.jsx를 수정:
-const { id } = useParams();
+const { postId } = useParams();그리고 파일 전체에서 id 사용을 postId로 변경
또한 다음 사항들을 확인하세요:
-
Board 컴포넌트가
:team파라미터를 처리하는지 검증: -
모든 navigate 호출이 새 라우트 구조를 사용하는지 검증:
-
Sidebar의 navigation이 새 라우트와 일치하는지 확인:
🏁 Script executed:
#!/bin/bash
# Board 컴포넌트가 team 파라미터를 사용하는지 확인
rg -n "useParams" frontend/src/pages/Board.jsx -A 3 -B 1Length of output: 0
🏁 Script executed:
#!/bin/bash
# 이전 /board/:postId 패턴을 사용하는 navigate 호출 찾기
rg -n "navigate.*['\"`]/board/" frontend/src --type tsx --type jsx -C 2
# PostDetail로 이동하는 모든 navigate 호출 확인
ast-grep --pattern 'navigate($$$)'Length of output: 68
🏁 Script executed:
#!/bin/bash
# Sidebar에서 /board 관련 navigation 확인
rg -n "/board" frontend/src/components/Sidebar.jsx -C 3Length of output: 539
[/run_scripts]
🏁 Script executed:
#!/bin/bash
# 1. Find PostDetail.jsx and check what parameter it uses
fd -name "PostDetail.jsx" frontend/src --exec rg -n "useParams\|const.*=\s*useParams" {} -A 2
# 2. Find all files that might navigate to board routes
rg -n "navigate\s*\(" frontend/src --type jsx --type tsx -C 2Length of output: 258
🏁 Script executed:
#!/bin/bash
# 3. Check if Board.jsx exists and examine its implementation
fd -name "Board.jsx" frontend/src -exec cat {}
# 4. Search for any hardcoded routes to /board in the codebase
rg -n "'/board|\" /board|`/board" frontend/src --type jsx --type tsx -C 2Length of output: 299
[/run_scripts]
🏁 Script executed:
#!/bin/bash
# Find PostDetail file and check its useParams usage
find frontend/src -name "*PostDetail*" -type f
rg "useParams" frontend/src --type ts --type js -A 3 -B 1Length of output: 810
🏁 Script executed:
#!/bin/bash
# Find Board file
find frontend/src -name "*Board*" -type f
# Check navigate patterns in the codebase
rg "navigate\(" frontend/src --type ts --type js -C 2Length of output: 1075
🏁 Script executed:
#!/bin/bash
# Check all board-related routes and paths
rg "board" frontend/src/App.jsx -C 2
rg "board" frontend/src -i --type ts --type js | head -50Length of output: 4620
[/run_scripts]
🏁 Script executed:
#!/bin/bash
# Check Board.jsx implementation for team parameter handling
cat frontend/src/pages/Board.jsx | head -50Length of output: 1335
🏁 Script executed:
#!/bin/bash
# Check PostItem.jsx navigate call in detail
rg "navigate" frontend/src/components/Board/PostItem.jsx -B 5 -A 5Length of output: 431
🏁 Script executed:
#!/bin/bash
# Check if Board.jsx uses useParams
rg "useParams" frontend/src/pages/Board.jsx -C 3Length of output: 0
라우트 구조 변경에 따른 여러 치명적 버그 발견
새 라우트 구조 /board/:team/:postId로 변경되면서 다음 3가지 치명적 문제가 발생합니다:
문제 1: PostDetail 파라미터 이름 불일치
- 라우트 정의:
:postId - PostDetail 기대값:
id(line 13) - 결과: PostDetail이 게시물 ID를 받지 못해 로드 실패
문제 2: PostItem.jsx 네비게이션 경로 오류
- 현재 코드:
navigate('/board/${post.id}') - 필요한 경로:
/board/:team/:postId - 결과:
:team파라미터 누락으로 라우트 매칭 실패 (frontend/src/components/Board/PostItem.jsx)
문제 3: Board.jsx가 :team 파라미터를 처리하지 않음
- Board.jsx에서
useParams미사용 확인됨 - 결과: 팀 선택 기능이 작동하지 않고 모든 게시물이 표시됨
필수 수정 사항:
- PostDetail.jsx 라우트 파라미터 일치시키기 (권장)
- <Route path="/board/:team/:postId" element={<PostDetail />} />
+ <Route path="/board/:team/:id" element={<PostDetail />} />-
PostItem.jsx 네비게이션 업데이트 (frontend/src/components/Board/PostItem.jsx)
:team파라미터 추가 필요- 현재 team 정보를 어디서 가져올지 확인 필요
-
Board.jsx에 팀 필터링 로직 추가
useParams()사용하여:team파라미터 읽기- 파라미터에 따라 게시물 필터링
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Route path="/board/:team" element={<Board />} /> | |
| <Route path="/board/:team/:postId" element={<PostDetail />} /> | |
| <Route path="/board/:team" element={<Board />} /> | |
| <Route path="/board/:team/:id" element={<PostDetail />} /> |
🤖 Prompt for AI Agents
frontend/src/App.jsx lines 30-31: the new route /board/:team/:postId exposes
three issues—update PostDetail.jsx to read the same param name used in the route
(change its prop/param usage from id to postId or map postId to id at component
entry), modify frontend/src/components/Board/PostItem.jsx to build navigation
URLs including the current team (e.g., navigate(`/board/${team}/${post.id}`) —
obtain team from props, context, or useParams where appropriate), and update
frontend/src/components/Board/Board.jsx to call useParams() to read :team and
apply filtering logic so only posts for that team are shown; make sure all
references consistently use the same param name (:postId) across routing and
components.
1 participant
1) 작업한 이슈번호
SISC1-197
2) 변경 요약 (What & Why)
3) 스크린샷/동영상 (UI 변경 시)
4) 상세 변경사항 (전부 다)
5) 참고사항
Summary by CodeRabbit
릴리스 노트
기능 개선
스타일