Skip to content

[FE] SISC1-197 [FEAT] : 사이드바에 게시판 리스트 추가 #109

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DongEun02 merged 3 commits into from
Nov 15, 2025
Merged

[FE] SISC1-197 [FEAT] : 사이드바에 게시판 리스트 추가 #109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d7b6016
[FE] SISC1-197 [FEAT] : 사이드바에 게시판 리스트 추가
DongEun02 Nov 14, 2025
cd754a8
[FE] SISC1-197 [FEAT] : 팀별 게시판 라우팅 추가
DongEun02 Nov 14, 2025
d248bb4
[FE] SISC1-197 [FIX] : 현재 경로를 기반으로 초기 상태 설정
DongEun02 Nov 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion frontend/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ function App() {
<Route path="/attendance" element={<Attendance />} />
<Route path="/attendance-manage" element={<AttendanceManage />} />
<Route path="/board" element={<Board />} />
<Route path="/board/:postId" element={<PostDetail />} />
<Route path="/board/:team" element={<Board />} />
<Route path="/board/:team/:postId" element={<PostDetail />} />
Comment on lines +30 to +31
Copy link

@coderabbitai coderabbitai bot Nov 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 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로 변경

또한 다음 사항들을 확인하세요:

  1. Board 컴포넌트가 :team 파라미터를 처리하는지 검증:

  2. 모든 navigate 호출이 새 라우트 구조를 사용하는지 검증:

  3. Sidebar의 navigation이 새 라우트와 일치하는지 확인:

🏁 Script executed:

#!/bin/bash
# Board 컴포넌트가 team 파라미터를 사용하는지 확인
rg -n "useParams" frontend/src/pages/Board.jsx -A 3 -B 1

Length 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 3

Length 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 2

Length 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 2

Length 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 1

Length 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 2

Length 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 -50

Length of output: 4620

[/run_scripts]

🏁 Script executed:

#!/bin/bash
# Check Board.jsx implementation for team parameter handling
cat frontend/src/pages/Board.jsx | head -50

Length 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 5

Length of output: 431

🏁 Script executed:

#!/bin/bash
# Check if Board.jsx uses useParams
rg "useParams" frontend/src/pages/Board.jsx -C 3

Length 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 미사용 확인됨
  • 결과: 팀 선택 기능이 작동하지 않고 모든 게시물이 표시됨

필수 수정 사항:

  1. PostDetail.jsx 라우트 파라미터 일치시키기 (권장)
-          <Route path="/board/:team/:postId" element={<PostDetail />} />
+          <Route path="/board/:team/:id" element={<PostDetail />} />

  1. PostItem.jsx 네비게이션 업데이트 (frontend/src/components/Board/PostItem.jsx)

    • :team 파라미터 추가 필요
    • 현재 team 정보를 어디서 가져올지 확인 필요

  2. 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.

Suggested change
<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.

<Route path="/quant-bot" element={<QuantBot />} />
<Route path="/stock-game" element={<StockGame />} />
<Route path="/back-test" element={<BackTest />} />
Expand Down
67 changes: 44 additions & 23 deletions frontend/src/components/Sidebar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,29 @@
import { NavLink } from 'react-router-dom';
import { NavLink, useNavigate, useLocation } from 'react-router-dom';
import styles from './Sidebar.module.css';
import { useState } from 'react';

const Sidebar = ({ isOpen, isRoot }) => {
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 || '전체 게시판'
);

return (
<div>
{/* 클릭 시 사이드바 슬라이드 */}
Expand All @@ -14,28 +36,27 @@ const Sidebar = ({ isOpen, isRoot }) => {
<nav aria-label="사이드바">
<div className={styles['menu-section']}>
<span className={styles['menu-title']}>게시판</span>
<ul>
{/* <li>
<NavLink
to="/"
className={({ isActive }) =>
isActive ? styles['active-link'] : styles['inactive-link']
}
>
홈
</NavLink>
</li> */}
<li>
<NavLink
to="/board"
className={({ isActive }) =>
isActive ? styles['active-link'] : styles['inactive-link']
}
>
게시판
</NavLink>
</li>
</ul>

<select
className={styles.boardSelect}
value={selectedBoard}
onChange={(e) => {
const newBoard = e.target.value;
const selected = boardList.find(
(item) => item.name === newBoard
);
if (selected) {
setSelectedBoard(newBoard);
navigate(selected.path);
}
}}
>
{boardList.map((item) => (
<option key={item.name} value={item.name}>
{item.name}
</option>
))}
</select>
</div>

<div className={styles['menu-section']}>
Expand Down
17 changes: 17 additions & 0 deletions frontend/src/components/Sidebar.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,3 +116,20 @@
width: 19px;
height: 19px;
}

.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;
}

.boardSelect option {
color: black;
}