관리자 신고 검토 페이지 구현 ( Feat/#327 ) #351
Conversation
|
""" Walkthrough관리자용 신고 관리, 신고 상세, 유저 제재, 공지 미리보기 등 다양한 어드민 기능이 대규모로 추가 및 개선되었습니다. 신규 API, 커스텀 훅, 스타일 컴포넌트, 타입 정의, 페이지 및 프리뷰 컴포넌트 등이 도입되었으며, 기존 일부 데이터 구조와 API 사용 방식도 변경되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant AdminPage as AdminReports
participant useGetAllReports
participant reportApi as getAllReports (API)
participant useHandleUser
participant userApi as postBanUser/postWarningUser (API)
participant useAdminReports
participant reportApi2 as postDeleteReport (API)
participant Modal
AdminPage->>useGetAllReports: 검색/페이지네이션 파라미터 전달
useGetAllReports->>reportApi: getAllReports(params)
reportApi-->>useGetAllReports: 신고 리스트 데이터 반환
useGetAllReports-->>AdminPage: 데이터/로딩 상태 반환
AdminPage->>useHandleUser: 경고/강퇴 버튼 클릭
useHandleUser->>userApi: postBanUser/postWarningUser(userId)
userApi-->>useHandleUser: 성공/실패 응답
useHandleUser->>Modal: 성공 메시지 노출
AdminPage->>useAdminReports: 삭제 버튼 클릭
useAdminReports->>reportApi2: postDeleteReport(reportId)
reportApi2-->>useAdminReports: 성공/실패 응답
useAdminReports->>Modal: 성공 메시지 노출
Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error Exit handler never called! 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (4)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (3)
⏰ Context from checks skipped due to timeout of 90000ms (1)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 18
🧹 Nitpick comments (12)
src/pages/admin/adminReports/AdminReports.styled.ts (1)
93-97: 버튼 스타일링 일관성을 개선하세요.
DeleteButton이 다른 버튼들과 다르게 네이티브button요소를 사용하고 있어 일관성이 부족합니다.WarningButton과BanButton처럼 공통Button컴포넌트를 확장하는 것을 고려해보세요.-export const DeleteButton = styled.button` +export const DeleteButton = styled(Button)` border: 1px solid ${({ theme }) => theme.color.primary}; border-radius: ${({ theme }) => theme.borderRadius.large}; margin-left: 10px; `;src/pages/admin/adminUser/AdminUserProjectsLayout.tsx (1)
1-10: 새로운 레이아웃 컴포넌트 구현 검토컴포넌트 구현은 깔끔하고 React 패턴을 잘 따르고 있습니다. 하지만 사용자 페이지의
ContentTab컴포넌트를 관리자 페이지에서 재사용하고 있는 점이 아키텍처 관점에서 고려해볼 만합니다.향후 컴포넌트 구조 개선을 위해 고려사항:
ContentTab을 공통 컴포넌트로 이동하거나- 관리자 전용 탭 컴포넌트를 별도로 만드는 것을 검토해보세요
// 예시: 공통 컴포넌트로 이동 import ContentTab from '../../../components/common/contentTab/ContentTab';src/components/common/reportCheckBox/ReportCheckBox.styled.ts (3)
3-14: 중복된 그리드 레이아웃 스타일을 정리해주세요.
Container와CheckRow모두 동일한 3열 그리드 레이아웃을 사용하고 있어 중복됩니다. 하나로 통합하거나 서로 다른 용도로 사용할 계획이라면 명확히 구분해주세요.export const Container = styled.div` display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; `; -export const CheckRow = styled.div` - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1.5rem; -`;
18-22: 브라우저 호환성을 확인해주세요.
accent-color속성은 비교적 최신 CSS 속성으로 일부 구형 브라우저에서 지원되지 않을 수 있습니다. 프로젝트의 브라우저 지원 범위를 확인하고 필요시 폴백을 고려해주세요.
28-31: 테마 일관성을 위해 폰트 사이즈를 테마에서 가져와주세요.에러 메시지의 폰트 사이즈가 하드코딩되어 있습니다. 다른 스타일과의 일관성을 위해 테마에서 정의된 값을 사용하는 것을 고려해주세요.
export const ErrorMessage = styled.p` - font-size: 11px; + font-size: ${({ theme }) => theme.fontSize?.xs || '11px'}; color: ${({ theme }) => theme.color.red}; `;src/hooks/admin/useAdminReports.ts (1)
23-23: 성공 메시지가 적절한지 확인해주세요.신고 삭제 기능에 "banSuccess" (강퇴 성공) 메시지를 사용하고 있습니다. 실제 기능과 메시지가 일치하는지 확인이 필요합니다.
constants 파일에서
writeDeleteSuccess메시지가 더 적절할 수 있습니다:- handleModalOpen(ADMIN_MODAL_MESSAGE.banSuccess); + handleModalOpen(ADMIN_MODAL_MESSAGE.writeDeleteSuccess);src/hooks/admin/useGetUserProjectData.ts (1)
9-26: 훅 구현이 잘 되어있지만 몇 가지 개선 사항이 있습니다.조건부 로직과 React Query 사용이 적절하게 구현되었습니다. 하지만 다음 사항들을 고려해보세요:
useLocation().pathname.includes('admin')방식은 URL이 변경되어도 안정적인지 확인 필요useAuthStore.getState().isLoggedIn대신 훅 내부에서 상태를 구독하는 것이 좋을 수 있음- 쿼리 함수에서 불필요한 async/await 사용 없이 Promise를 직접 반환하는 것이 효율적
다음과 같이 개선할 수 있습니다:
- const isAdmin = useLocation().pathname.includes('admin'); - const isLoggedIn = useAuthStore.getState().isLoggedIn; + const location = useLocation(); + const isAdmin = location.pathname.includes('admin'); + const { isLoggedIn } = useAuthStore(); - queryFn: () => - isAdmin ? getUserProjectData(userId) : getMyAppliedStatusList(), + queryFn: isAdmin + ? () => getUserProjectData(userId) + : () => getMyAppliedStatusList(),src/components/user/mypage/activityLog/commentsActivity/CommentsActivity.tsx (1)
39-39: 타입 어설션 사용을 검토하세요.타입 어설션(
as)을 사용하고 있는데, 더 안전한 타입 가드를 사용하는 것을 고려해보세요.다음과 같이 타입 가드를 사용할 수 있습니다:
- const commentsData = userActivityData as MyComments[] | UserComment[]; + const commentsData = userActivityData;그리고 map 함수에서 타입을 명시적으로 처리:
- {commentsData.map((list: MyComments | UserComment, idx: number) => ( + {commentsData.map((list, idx: number) => (src/api/admin/report.api.ts (1)
37-45: 미리보기 API와 검색 API 간 중복을 검토하세요.
getAllReportsPreview와getAllReports가 동일한 엔드포인트를 사용하는데, 파라미터 없이 호출하는 것과 별도 함수로 분리한 이유를 명확히 하거나 통합을 고려해보세요.다음과 같이 통합할 수 있습니다:
-export const getAllReportsPreview = async () => { - try { - const response = await httpClient.get<ApiAllReports>(`/report`); - return response.data.data; - } catch (e) { - console.error(e); - throw e; - } -}; +export const getAllReportsPreview = () => getAllReports({ keyword: '', page: 1 });또는 파라미터를 선택적으로 만들어 하나의 함수로 처리할 수 있습니다.
src/hooks/admin/useGetAllUserActivity.ts (1)
23-34: queryFn에서 불필요한 async/await 제거를 고려하세요.React Query의 queryFn에서 Promise를 반환하는 함수를 사용할 때는 불필요한 async/await을 피하는 것이 좋습니다. 현재 구현에서 async/await을 제거하면 더 효율적입니다.
다음과 같이 수정할 수 있습니다:
- const getQueryFn = async () => { + const getQueryFn = () => { if (isAdmin) { - const response = await getUserActivityData(userId); - return type === 'comments' - ? response.data.comments - : response.data.inquiries; + return getUserActivityData(userId).then(response => + type === 'comments' ? response.data.comments : response.data.inquiries + ); } - if (type === 'comments') { - return await getMyComments(); - } - return await getMyInquiries(); + return type === 'comments' ? getMyComments() : getMyInquiries(); };src/components/admin/adminUserReport/AdminReportDetail.tsx (1)
43-56: linkUrl 함수의 로직을 개선할 수 있습니다.현재 구현은 동일한 조건을 여러 번 확인하고 있어 비효율적입니다.
const linkUrl = ( id: number, location: 'USER' | 'PROJECT' | 'COMMENT' | 'RECOMMENT' ) => { - if ( - location === 'PROJECT' || - location === 'COMMENT' || - location === 'RECOMMENT' - ) { - return `/project-detail/${id}`; - } else { - return `/user/${id}`; - } + return location === 'USER' ? `/user/${id}` : `/project-detail/${id}`; };src/pages/admin/adminReports/AdminReports.tsx (1)
69-70: 불필요한 주석 제거 권장
//userId,//reportId같은 주석들은 이미 매개변수 이름으로 명확하므로 제거하는 것이 좋습니다.Also applies to: 78-79, 85-86
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (46)
src/api/activityLog.api.ts(0 hunks)src/api/admin/report.api.ts(1 hunks)src/api/admin/user.api.ts(1 hunks)src/api/admin/userActivity.api.ts(1 hunks)src/api/mypage.api.ts(1 hunks)src/api/report.api.ts(1 hunks)src/components/admin/adminUserDetail/AdminUserDetail.tsx(4 hunks)src/components/admin/adminUserReport/AdminReportDetail.styled.ts(1 hunks)src/components/admin/adminUserReport/AdminReportDetail.tsx(1 hunks)src/components/admin/previewComponent/reportsPreview/ReportsPreview.tsx(2 hunks)src/components/common/reportCheckBox/ReportCheckBox.styled.ts(1 hunks)src/components/common/reportCheckBox/ReportCheckBox.tsx(1 hunks)src/components/common/sidebar/Sidebar.styled.ts(1 hunks)src/components/common/sidebar/Sidebar.tsx(1 hunks)src/components/user/mypage/ContentTab.tsx(4 hunks)src/components/user/mypage/activityLog/ActivityLog.tsx(1 hunks)src/components/user/mypage/activityLog/commentsActivity/CommentsActivity.tsx(2 hunks)src/components/user/mypage/activityLog/inquiries/Inquiries.tsx(2 hunks)src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx(1 hunks)src/components/user/mypage/notifications/appliedProjects/AppliedProjects.tsx(3 hunks)src/components/user/reportComponent/ReportModal.tsx(2 hunks)src/components/user/userPage/userProjectList/UserProjectList.tsx(1 hunks)src/constants/admin/adminModal.ts(1 hunks)src/constants/admin/userDetailContentHeader.ts(1 hunks)src/constants/routes.ts(1 hunks)src/hooks/admin/useAdminReportDetail.ts(1 hunks)src/hooks/admin/useAdminReports.ts(1 hunks)src/hooks/admin/useGetAllReports.ts(1 hunks)src/hooks/admin/useGetAllReportsPreview.ts(1 hunks)src/hooks/admin/useGetAllUserActivity.ts(1 hunks)src/hooks/admin/useGetUserProjectData.ts(1 hunks)src/hooks/admin/useHandleUser.ts(1 hunks)src/hooks/admin/useHandleUserApi.ts(1 hunks)src/hooks/queries/keys.ts(1 hunks)src/models/admin/userDetail/reportDetail.ts(1 hunks)src/models/admin/userDetail/routing.ts(1 hunks)src/models/admin/userDetail/userActivity.ts(1 hunks)src/models/admin/userDetail/userDetail.applicants.ts(1 hunks)src/models/admin/userDetail/userProjectData.ts(1 hunks)src/models/report.ts(2 hunks)src/models/userProject.ts(1 hunks)src/pages/admin/adminReports/AdminReports.styled.ts(1 hunks)src/pages/admin/adminReports/AdminReports.tsx(1 hunks)src/pages/admin/adminUser/AdminUser.tsx(1 hunks)src/pages/admin/adminUser/AdminUserProjectsLayout.tsx(1 hunks)src/routes/AdminRoutes.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- src/api/activityLog.api.ts
🧰 Additional context used
🧠 Learnings (9)
📓 Common learnings
Learnt from: YouD0313
PR: devpalsPlus/frontend#334
File: src/components/common/admin/title/AdminTitle.styled.ts:4-10
Timestamp: 2025-06-05T15:59:56.230Z
Learning: YouD0313 prefers using position: fixed for admin headers due to layout requirements, even if it requires viewport-relative width calculations like calc(100vw - 20rem).
src/hooks/admin/useAdminReportDetail.ts (2)
Learnt from: layout-SY
PR: devpalsPlus/frontend#246
File: src/hooks/useAlarmList.ts:1-21
Timestamp: 2025-04-23T13:39:08.960Z
Learning: React Query의 useQuery 훅에서 queryFn으로 Promise를 반환하는 함수를 사용할 때는 불필요한 async/await을 사용하지 않는 것이 좋습니다. 예를 들어 `queryFn: async () => await getAlarmList()` 대신에 `queryFn: () => getAlarmList()`와 같이 직접 Promise를 반환하는 형태로 작성하는 것이 더 효율적입니다.
Learnt from: layout-SY
PR: devpalsPlus/frontend#246
File: src/hooks/useAlarmList.ts:1-21
Timestamp: 2025-04-23T13:39:08.960Z
Learning: React Query의 useQuery 훅에서 queryFn으로 Promise를 반환하는 함수를 사용할 때는 불필요한 async/await을 사용하지 않는 것이 좋습니다. 예를 들어 `queryFn: async () => await getAlarmList()` 대신에 `queryFn: () => getAlarmList()`와 같이 직접 Promise를 반환하는 형태로 작성하는 것이 더 효율적입니다.
src/components/admin/adminUserReport/AdminReportDetail.tsx (2)
Learnt from: YouD0313
PR: devpalsPlus/frontend#278
File: src/pages/login/LoginSuccess.tsx:13-24
Timestamp: 2025-05-11T09:39:02.041Z
Learning: 사용자 알림은 브라우저의 기본 alert() 대신 애플리케이션의 Modal 컴포넌트(src/components/common/modal/Modal.tsx)를 사용하는 것이 선호됩니다.
Learnt from: YouD0313
PR: devpalsPlus/frontend#278
File: src/pages/login/LoginSuccess.tsx:13-24
Timestamp: 2025-05-11T09:39:02.041Z
Learning: 사용자 알림은 브라우저의 기본 alert() 대신 애플리케이션의 Modal 컴포넌트(src/components/common/modal/Modal.tsx)를 사용하는 것이 선호됩니다.
src/hooks/admin/useGetAllReportsPreview.ts (2)
Learnt from: layout-SY
PR: devpalsPlus/frontend#246
File: src/hooks/useAlarmList.ts:1-21
Timestamp: 2025-04-23T13:39:08.960Z
Learning: React Query의 useQuery 훅에서 queryFn으로 Promise를 반환하는 함수를 사용할 때는 불필요한 async/await을 사용하지 않는 것이 좋습니다. 예를 들어 `queryFn: async () => await getAlarmList()` 대신에 `queryFn: () => getAlarmList()`와 같이 직접 Promise를 반환하는 형태로 작성하는 것이 더 효율적입니다.
Learnt from: layout-SY
PR: devpalsPlus/frontend#246
File: src/hooks/useAlarmList.ts:1-21
Timestamp: 2025-04-23T13:39:08.960Z
Learning: React Query의 useQuery 훅에서 queryFn으로 Promise를 반환하는 함수를 사용할 때는 불필요한 async/await을 사용하지 않는 것이 좋습니다. 예를 들어 `queryFn: async () => await getAlarmList()` 대신에 `queryFn: () => getAlarmList()`와 같이 직접 Promise를 반환하는 형태로 작성하는 것이 더 효율적입니다.
src/hooks/admin/useGetUserProjectData.ts (2)
Learnt from: layout-SY
PR: devpalsPlus/frontend#246
File: src/hooks/useAlarmList.ts:1-21
Timestamp: 2025-04-23T13:39:08.960Z
Learning: React Query의 useQuery 훅에서 queryFn으로 Promise를 반환하는 함수를 사용할 때는 불필요한 async/await을 사용하지 않는 것이 좋습니다. 예를 들어 `queryFn: async () => await getAlarmList()` 대신에 `queryFn: () => getAlarmList()`와 같이 직접 Promise를 반환하는 형태로 작성하는 것이 더 효율적입니다.
Learnt from: layout-SY
PR: devpalsPlus/frontend#246
File: src/hooks/useAlarmList.ts:1-21
Timestamp: 2025-04-23T13:39:08.960Z
Learning: React Query의 useQuery 훅에서 queryFn으로 Promise를 반환하는 함수를 사용할 때는 불필요한 async/await을 사용하지 않는 것이 좋습니다. 예를 들어 `queryFn: async () => await getAlarmList()` 대신에 `queryFn: () => getAlarmList()`와 같이 직접 Promise를 반환하는 형태로 작성하는 것이 더 효율적입니다.
src/hooks/admin/useGetAllReports.ts (2)
Learnt from: layout-SY
PR: devpalsPlus/frontend#246
File: src/hooks/useAlarmList.ts:1-21
Timestamp: 2025-04-23T13:39:08.960Z
Learning: React Query의 useQuery 훅에서 queryFn으로 Promise를 반환하는 함수를 사용할 때는 불필요한 async/await을 사용하지 않는 것이 좋습니다. 예를 들어 `queryFn: async () => await getAlarmList()` 대신에 `queryFn: () => getAlarmList()`와 같이 직접 Promise를 반환하는 형태로 작성하는 것이 더 효율적입니다.
Learnt from: layout-SY
PR: devpalsPlus/frontend#246
File: src/hooks/useAlarmList.ts:1-21
Timestamp: 2025-04-23T13:39:08.960Z
Learning: React Query의 useQuery 훅에서 queryFn으로 Promise를 반환하는 함수를 사용할 때는 불필요한 async/await을 사용하지 않는 것이 좋습니다. 예를 들어 `queryFn: async () => await getAlarmList()` 대신에 `queryFn: () => getAlarmList()`와 같이 직접 Promise를 반환하는 형태로 작성하는 것이 더 효율적입니다.
src/components/user/mypage/ContentTab.tsx (4)
Learnt from: YouD0313
PR: devpalsPlus/frontend#278
File: src/pages/login/LoginSuccess.tsx:13-24
Timestamp: 2025-05-11T09:39:02.041Z
Learning: useEffect 내에서 사용하는 모든 외부 변수(예: searchParams, storeLogin, navigate)는 의존성 배열에 포함되어야 합니다.
Learnt from: YouD0313
PR: devpalsPlus/frontend#278
File: src/pages/login/LoginSuccess.tsx:13-24
Timestamp: 2025-05-11T09:39:02.041Z
Learning: useEffect 내에서 사용하는 모든 외부 변수(예: searchParams, storeLogin, navigate)는 의존성 배열에 포함되어야 합니다.
Learnt from: YouD0313
PR: devpalsPlus/frontend#278
File: src/pages/login/LoginSuccess.tsx:13-24
Timestamp: 2025-05-11T09:39:02.041Z
Learning: useEffect 내에서 사용하는 모든 외부 변수(예: searchParams, storeLogin, navigate)는 의존성 배열에 포함되어야 합니다.
Learnt from: YouD0313
PR: devpalsPlus/frontend#278
File: src/pages/login/LoginSuccess.tsx:13-24
Timestamp: 2025-05-11T09:39:02.041Z
Learning: useEffect 내에서 사용하는 모든 외부 변수(예: searchParams, storeLogin, navigate)는 의존성 배열에 포함되어야 합니다.
src/hooks/admin/useGetAllUserActivity.ts (1)
Learnt from: layout-SY
PR: devpalsPlus/frontend#246
File: src/hooks/useAlarmList.ts:1-21
Timestamp: 2025-04-23T13:39:08.960Z
Learning: React Query의 useQuery 훅에서 queryFn으로 Promise를 반환하는 함수를 사용할 때는 불필요한 async/await을 사용하지 않는 것이 좋습니다. 예를 들어 `queryFn: async () => await getAlarmList()` 대신에 `queryFn: () => getAlarmList()`와 같이 직접 Promise를 반환하는 형태로 작성하는 것이 더 효율적입니다.
src/pages/admin/adminReports/AdminReports.styled.ts (1)
Learnt from: YouD0313
PR: devpalsPlus/frontend#255
File: src/components/common/customerService/CustomerServiceHeader.styled.ts:45-62
Timestamp: 2025-04-26T17:24:42.853Z
Learning: Interactive elements like buttons should not be nested inside other interactive elements like links (a tags). When creating a clickable UI inside a Link component, using a div instead of a button is more semantically correct.
🧬 Code Graph Analysis (19)
src/constants/admin/userDetailContentHeader.ts (1)
src/constants/routes.ts (1)
ADMIN_ROUTE(35-58)
src/pages/admin/adminUser/AdminUserProjectsLayout.tsx (2)
src/components/user/mypage/ContentTab.tsx (1)
ContentTab(21-88)src/constants/admin/userDetailContentHeader.ts (1)
PROJECT_TABS(3-19)
src/hooks/admin/useAdminReportDetail.ts (2)
src/hooks/queries/keys.ts (1)
ReportData(64-68)src/api/admin/report.api.ts (1)
getReportDetail(15-25)
src/hooks/admin/useAdminReports.ts (3)
src/api/admin/report.api.ts (1)
postDeleteReport(6-13)src/hooks/queries/keys.ts (1)
ReportData(64-68)src/constants/admin/adminModal.ts (1)
ADMIN_MODAL_MESSAGE(1-9)
src/components/user/mypage/activityLog/commentsActivity/CommentsActivity.tsx (3)
src/hooks/admin/useGetAllUserActivity.ts (1)
useGetUserActivity(8-50)src/models/activityLog.ts (1)
MyComments(20-26)src/models/admin/userDetail/userActivity.ts (1)
UserComment(4-10)
src/hooks/admin/useGetAllReportsPreview.ts (2)
src/hooks/queries/keys.ts (1)
ReportData(64-68)src/api/admin/report.api.ts (1)
getAllReportsPreview(37-45)
src/components/admin/adminUserDetail/AdminUserDetail.tsx (1)
src/constants/routes.ts (1)
ADMIN_ROUTE(35-58)
src/hooks/admin/useHandleUserApi.ts (4)
src/api/admin/user.api.ts (2)
postBanUser(5-12)postWarningUser(14-21)src/models/admin/userDetail/reportDetail.ts (1)
UserData(3-7)src/hooks/queries/keys.ts (2)
UserData(70-76)ReportData(64-68)src/constants/admin/adminModal.ts (1)
ADMIN_MODAL_MESSAGE(1-9)
src/hooks/admin/useGetUserProjectData.ts (4)
src/models/userProject.ts (1)
AppliedProject(20-24)src/hooks/queries/keys.ts (2)
UserData(70-76)ProjectListKey(22-25)src/api/admin/user.api.ts (1)
getUserProjectData(38-48)src/api/mypage.api.ts (1)
getMyAppliedStatusList(69-80)
src/hooks/admin/useGetAllReports.ts (3)
src/models/search.ts (1)
SearchType(1-4)src/hooks/queries/keys.ts (1)
ReportData(64-68)src/api/admin/report.api.ts (1)
getAllReports(27-35)
src/models/admin/userDetail/userDetail.applicants.ts (1)
src/models/apiCommon.ts (1)
ApiCommonType(1-4)
src/components/user/mypage/ContentTab.tsx (1)
src/constants/routes.ts (2)
ROUTES(1-33)ADMIN_ROUTE(35-58)
src/models/admin/userDetail/userActivity.ts (2)
src/models/activityLog.ts (1)
MyInquiries(3-14)src/models/apiCommon.ts (1)
ApiCommonType(1-4)
src/models/admin/userDetail/reportDetail.ts (1)
src/models/apiCommon.ts (1)
ApiCommonType(1-4)
src/api/admin/report.api.ts (4)
src/api/http.api.ts (1)
httpClient(80-80)src/models/admin/userDetail/reportDetail.ts (1)
ApiReportDetail(20-22)src/models/search.ts (1)
SearchType(1-4)src/models/report.ts (1)
ApiAllReports(10-12)
src/models/admin/userDetail/userProjectData.ts (3)
src/models/tags.ts (1)
MethodTag(16-20)src/models/userProject.ts (2)
JoinedProject(4-14)AppliedProject(20-24)src/models/apiCommon.ts (1)
ApiCommonType(1-4)
src/api/admin/user.api.ts (3)
src/api/http.api.ts (1)
httpClient(80-80)src/models/admin/userDetail/userDetail.applicants.ts (1)
ApiUserApplicantsData(38-40)src/models/admin/userDetail/userProjectData.ts (1)
ApiUserProjectDataResponse(38-40)
src/pages/admin/adminReports/AdminReports.styled.ts (2)
src/components/admin/adminUserReport/AdminReportDetail.styled.ts (7)
Container(7-11)NickName(37-40)Category(42-42)Content(114-116)ButtonArea(131-136)WarningButton(138-140)BanButton(142-142)src/components/common/reportCheckBox/ReportCheckBox.styled.ts (1)
Container(3-8)
src/hooks/admin/useHandleUser.ts (2)
src/hooks/admin/useHandleUserApi.ts (1)
useHandleUserApi(12-56)src/hooks/admin/useAdminReports.ts (1)
useAdminReports(11-29)
🪛 Biome (1.9.4)
src/components/admin/adminUserReport/AdminReportDetail.styled.ts
[error] 80-80: Do not shadow the global "Date" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: accessibility-test
🔇 Additional comments (54)
src/constants/routes.ts (1)
51-51: 라우트 구조 개선이 올바르게 적용되었습니다.프로젝트 관련 탭들을 통합하는 새로운 라우트 구조에 맞게 상수가 적절히 업데이트되었습니다.
src/api/mypage.api.ts (1)
75-75: API 응답 구조에 맞게 올바르게 수정되었습니다.중첩된 데이터 속성에 접근하도록 수정하여 실제 API 응답 구조와 일치시켰습니다.
src/components/common/sidebar/Sidebar.styled.ts (1)
3-3: 타입 안전성이 개선되었습니다.사용자 데이터 로딩 상태를 고려하여 undefined를 허용하도록 타입을 수정한 것이 적절합니다.
src/models/admin/userDetail/userProjectData.ts (1)
1-41: 타입 정의가 체계적으로 잘 구성되었습니다.인터페이스 계층 구조가 명확하고, 기존 타입들과 일관성을 유지하며, TypeScript 모범 사례를 잘 따르고 있습니다.
src/constants/admin/userDetailContentHeader.ts (1)
1-20: 탭 구성이 체계적으로 정의되었습니다.라우트 상수를 활용한 URL 구성, 고유 ID 할당, 그리고
as const를 통한 타입 안전성 확보가 잘 이루어졌습니다.src/pages/admin/adminReports/AdminReports.styled.ts (2)
22-40: 고정 높이 사용에 대한 검토를 권장합니다.
List컴포넌트에 600px 고정 높이가 설정되어 있습니다. 반응형 디자인과 접근성을 고려하여min-height나max-height사용을 검토해보세요.다양한 화면 크기에서 레이아웃이 적절히 동작하는지 확인하시기 바랍니다.
1-98: 전반적인 구조와 테마 통합이 우수합니다.스타일드 컴포넌트의 구조가 체계적이고 테마 시스템과 잘 통합되어 있습니다. 커스텀 스크롤바 스타일링과 React Router Link 사용도 적절합니다.
src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx (1)
1-1: React import 최적화가 적절합니다.React 네임스페이스 대신 필요한 훅만 명시적으로 import하는 것은 번들 크기 최적화와 코드 명확성에 도움이 됩니다.
src/constants/admin/adminModal.ts (1)
8-8: 메시지 상수 추가가 적절합니다.
banSuccess메시지가 기존 패턴과 일관성 있게 추가되었으며, 관리자 기능의 사용자 피드백을 위해 적절합니다.src/models/admin/userDetail/routing.ts (1)
1-1: 타입 정의가 잘 구조화되어 있습니다.
TabKey타입이 관리자 사용자 상세 페이지의 탭 키를 중앙화하여 타입 안전성과 일관성을 제공합니다.src/api/report.api.ts (1)
1-16: API 모듈 정리가 적절합니다.사용하지 않는
getAllReports함수와 import를 제거하여 코드를 정리했습니다. 관리자 전용 기능이 별도 모듈로 분리된 것은 좋은 구조 개선입니다.src/models/userProject.ts (1)
27-27:ApiAppliedProject.data의 null 제거 검증 필요rg를 통해 사용처를 조사한 결과, 모델 레벨에서
data: AppliedProject[]로 null이 삭제된 이후 별도의 null 체크(=== null,?.,&&) 로직은 발견되지 않았습니다.
아래 사항을 확인해 주세요:
- 실제 API 스펙에서
data필드를 null 대신 빈 배열([])로 항상 반환하는지- API 계약 변경이 클라이언트의 타입 정의(
ApiAppliedProject)와 일치하는지위 두 가지를 확인하신 후, null 제거가 안전한지 검증 부탁드립니다.
src/components/user/mypage/activityLog/ActivityLog.tsx (1)
6-6: 관리자 상태 감지 로직 개선 승인URL 기반에서 인증 스토어 기반으로 관리자 상태를 감지하도록 변경한 것은 일관성과 안정성을 향상시키는 좋은 개선입니다.
userData?.admin을 사용하여 안전하게 관리자 상태를 확인하고 있습니다.Also applies to: 9-9
src/components/common/sidebar/Sidebar.tsx (1)
25-25: 일관된 관리자 상태 감지 패턴 적용 승인다른 컴포넌트들과 마찬가지로 URL 기반에서 인증 스토어 기반으로 관리자 상태 감지를 변경한 것이 좋습니다. 이는 애플리케이션 전반에 걸친 일관성을 향상시킵니다.
src/pages/admin/adminUser/AdminUser.tsx (2)
40-40: SearchBarcanWrite기본값/라우팅 경로 검증 요청SearchBarProps에서
canWrite?: boolean에 기본값으로canWrite = true가 설정되어 있어,canWrite={false}를 제거하면 “작성하기” 버튼이 기본적으로 노출됩니다.
AdminUser 컴포넌트의 의도한 동작인지 확인해주세요.또한 Link 컴포넌트 경로를
${userData.id}/${ADMIN_ROUTE.basic}→${userData.id}
로 단순화한 것이 새 라우팅 구조(/:id)와 일치하는지 라우터 설정에서 검증이 필요합니다.
- SearchBar.tsx
interface SearchBarProps { canWrite?: boolean; }export default function SearchBar({…, canWrite = true }:…)- src/pages/admin/adminUser/AdminUser.tsx
<SearchBar onGetKeyword={…} value={…} /><Link to={${userData.id}}>…</Link>
46-46: 라우팅 경로 단순화 검증 완료
ADMIN_ROUTE.basic잔여 참조가 코드베이스에 더 이상 존재하지 않음을 확인했습니다.<Link to={\${userData.id}`}>가 상대 경로로/admin/users/:userId`에 정상 연결됩니다.추가 검증 없이 변경 사항을 승인합니다.
src/hooks/admin/useGetAllReportsPreview.ts (1)
5-17: LGTM! 효율적인 React Query 훅 구현학습된 가이드라인에 따라 queryFn에서 불필요한 async/await을 사용하지 않고 Promise를 직접 반환하고 있어 좋습니다. select 옵션을 활용한 데이터 슬라이싱도 효율적입니다.
src/components/user/reportComponent/ReportModal.tsx (2)
5-5: 새로운 ReportCheckBox 컴포넌트 import 추가체크박스 로직을 별도 컴포넌트로 분리한 것은 재사용성과 모듈화 측면에서 좋은 개선입니다.
83-83: 체크박스 로직의 성공적인 모듈화인라인으로 작성되었던 체크박스 렌더링 로직을 ReportCheckBox 컴포넌트로 분리하여 코드의 가독성과 재사용성이 향상되었습니다.
src/hooks/admin/useAdminReportDetail.ts (1)
12-12: queryFn 구현 승인학습된 가이드라인에 따라 불필요한 async/await 없이 Promise를 직접 반환하고 있어 효율적입니다.
src/components/user/userPage/userProjectList/UserProjectList.tsx (2)
1-1: import 구조 개선useLocation을 제거하고 useAuthStore를 추가한 것은 적절한 변경입니다.
Also applies to: 9-9
12-12: isAdmin 로직 개선URL 기반 체크에서 auth store의 사용자 데이터 기반으로 변경한 것은 더 신뢰할 수 있고 일관된 접근 방식입니다. 다른 컴포넌트들과의 일관성도 향상됩니다.
src/api/admin/userActivity.api.ts (1)
4-14: 잘 구조화된 API 함수적절한 타입 지정, 에러 핸들링, 그리고 명확한 REST API 패턴을 따르고 있어 좋습니다. HTTP 클라이언트 사용법도 올바릅니다.
src/hooks/admin/useGetAllReports.ts (1)
12-13: React Query 사용법이 개선되었습니다.쿼리 키에 검색 파라미터를 포함시켜 올바른 캐싱을 구현했고, 불필요한 async/await를 사용하지 않는 모범 사례를 따르고 있습니다.
src/hooks/admin/useAdminReports.ts (1)
17-22: 캐시 무효화 전략이 적절합니다.관련된 모든 리포트 쿼리 캐시를 무효화하여 데이터 일관성을 보장하고 있습니다.
src/components/admin/previewComponent/reportsPreview/ReportsPreview.tsx (2)
6-9: 훅 변경과 데이터 구조 업데이트가 적절합니다.
useGetAllReportsPreview로의 전환과 새로운 데이터 모델에 맞춘 필드 접근 방식이 일관성 있게 구현되었습니다.
22-33: 새로운 리포트 데이터 모델과의 통합이 올바릅니다.
reportId,profileImg,warning,reportedAt,imposed등 새로운 데이터 구조의 필드들을 정확하게 사용하고 있습니다.src/components/common/reportCheckBox/ReportCheckBox.tsx (2)
4-14: 재사용 가능한 컴포넌트 설계가 우수합니다.선택적 props를 통해 관리자 모드, 에러 표시, 제어된 상태를 지원하는 유연한 인터페이스를 제공하고 있습니다.
30-32: 조건부 에러 메시지 표시가 적절합니다.
isNotExistprop을 통한 에러 메시지 조건부 렌더링이 사용자 경험을 개선합니다.src/components/user/mypage/notifications/appliedProjects/AppliedProjects.tsx (1)
1-7: 훅 전환이 올바르게 수행되었습니다.
useMyAppliedStatusList에서useGetUserProjectData로의 전환이 적절하며, 관리자와 사용자 컨텍스트를 모두 지원하는 새로운 아키텍처에 잘 맞습니다.src/models/report.ts (2)
14-23: 모델 구조 변경이 적절하게 수행되었습니다.
AllReports인터페이스의 구조 변경이 관리자 기능 요구사항에 잘 맞습니다:
- 중첩된 구조에서 플랫 구조로의 변경으로 사용성 개선
reportId,userId등 명확한 식별자 사용imposed,warning등 관리자 기능에 필요한 필드 추가
15-22: report 모델 필드 호환성 확인 완료
- ReportsPreview.tsx 및 전역 검색 결과,
user.img,reportedCount,createdAt가 더 이상 report 모델에서 참조되지 않음- 새 필드인
report.profileImg,report.nickname,report.imposed,report.reportedAt등이 정상적으로 사용되고 있음- 전역에 남아 있는
user.img호출은 report 모델이 아닌 순수 사용자(User) 컴포넌트에서만 사용 중임위 확인 결과, report 모델 구조 변경에 따른 추가 수정은 필요하지 않습니다.
src/hooks/queries/keys.ts (1)
59-59: 새로운 쿼리 키들이 적절하게 추가되었습니다.새로운 관리자 기능들을 위한 쿼리 키들이 일관성 있게 추가되었습니다:
ReportData에 신고 관련 키들 추가UserData에 사용자 활동 관련 키들 추가CustomerService에 공지사항 미리보기 키 추가네이밍 컨벤션도 기존 패턴을 잘 따르고 있습니다.
Also applies to: 66-67, 74-75
src/components/admin/adminUserDetail/AdminUserDetail.tsx (5)
15-16: 새로운 훅과 타입 임포트가 적절합니다.useGetUserProjectData 훅과 TabKey 타입이 올바르게 임포트되어 프로젝트 데이터 통합을 지원합니다.
21-25: 프로젝트 데이터 페칭 로직이 잘 구현되었습니다.새로운 useGetUserProjectData 훅을 사용하여 프로젝트 관련 데이터를 가져오는 로직이 적절하게 추가되었습니다.
27-27: 로딩 조건 통합이 적절합니다.사용자 정보와 프로젝트 데이터 로딩 상태를 모두 고려한 조건부 렌더링이 올바르게 구현되었습니다.
84-84: 아웃렛 컨텍스트에 프로젝트 데이터 전달이 적절합니다.자식 컴포넌트에서 프로젝트 데이터에 접근할 수 있도록 아웃렛 컨텍스트에 projectData를 추가한 것이 좋은 구현입니다.
42-58: 탭 구조 변경 검증 완료라우팅 파일(src/routes/AdminRoutes.tsx)와 TabKey 타입 정의(src/models/admin/userDetail/routing.ts) 모두 ‘profile’, ‘log’, ‘projects’를 사용하도록 일치함을 확인했습니다. 추가 수정이 필요 없습니다.
src/models/admin/userDetail/userActivity.ts (1)
1-19: 타입 정의가 명확하고 잘 구조화되어 있습니다.인터페이스들이 명확하게 정의되어 있고, 기존 타입들과의 통합도 적절합니다. API 응답 구조도 일관된 패턴을 따르고 있습니다.
src/components/user/mypage/activityLog/commentsActivity/CommentsActivity.tsx (2)
6-17: 새로운 훅 사용과 파라미터 처리가 적절합니다.useGetUserActivity 훅을 사용하여 userId 기반으로 댓글 데이터를 가져오는 로직이 잘 구현되었습니다.
27-37: 향상된 빈 상태 검사가 좋습니다.배열 존재 여부와 길이를 모두 확인하는 더 견고한 빈 상태 검사 로직이 구현되었습니다.
src/api/admin/report.api.ts (3)
6-13: 삭제 API 함수가 적절하게 구현되었습니다.HTTP DELETE 요청과 에러 처리가 올바르게 구현되어 있습니다.
15-25: 신고 상세 조회 API가 잘 구현되었습니다.타입 안전성과 응답 데이터 추출이 적절하게 처리되었습니다.
27-35: 검색 파라미터를 사용한 신고 목록 조회가 적절합니다.쿼리 파라미터를 통한 검색 기능이 올바르게 구현되었습니다.
src/hooks/admin/useGetAllUserActivity.ts (1)
12-12: getState() 사용으로 인한 반응성 문제를 확인하세요.
useAuthStore.getState().userData?.id는 Zustand 스토어의 상태 변경에 반응하지 않습니다. 사용자가 로그인/로그아웃할 때 훅이 다시 실행되지 않을 수 있습니다.다음과 같이 수정하는 것을 고려하세요:
- const userLoginId = useAuthStore.getState().userData?.id; + const userLoginId = useAuthStore((state) => state.userData?.id);src/components/user/mypage/ContentTab.tsx (3)
26-46: useEffect 의존성 배열이 올바르게 구성되었습니다.useEffect에서 사용하는 모든 외부 변수(
setFilterId,pathname)가 의존성 배열에 포함되어 있어 올바른 구현입니다.
48-50: handleChangeId 함수 추가가 적절합니다.filterId 상태 업데이트를 위한 핸들러 함수가 적절히 구현되었습니다. 코드의 가독성과 유지보수성을 향상시킵니다.
75-75: Outlet context를 통한 filterId 전달이 좋은 설계입니다.중첩된 라우트에서 filterId 상태에 접근할 수 있도록 context로 전달하는 방식이 적절합니다.
src/components/admin/adminUserReport/AdminReportDetail.tsx (1)
31-41: 로딩 및 에러 상태 처리가 적절합니다.데이터가 없는 경우와 로딩 상태를 명확히 구분하여 처리하고 있어 사용자 경험이 좋습니다.
src/models/admin/userDetail/userDetail.applicants.ts (1)
1-41: 타입 정의가 잘 구조화되어 있습니다.인터페이스들이 논리적으로 구성되어 있고, 적절한 타입 임포트와 확장을 사용하고 있습니다. 명명 규칙도 일관성 있게 적용되었습니다.
src/api/admin/user.api.ts (2)
5-21: 일관된 에러 처리 패턴이 좋습니다.모든 API 함수에서 try-catch를 사용하여 에러를 로깅하고 다시 throw하는 일관된 패턴을 사용하고 있어 좋습니다.
38-48: getUserProjectData 함수의 반환값 일관성을 확인하세요.다른 함수들은 전체 response.data를 반환하는데, 이 함수만 response.data.data.appliedProjects를 반환합니다. 의도적인 것인지 확인이 필요합니다.
다른 API 함수들과의 일관성을 위해 다음과 같이 수정하는 것을 고려하세요:
- return response.data.data.appliedProjects; + return response.data;또는 함수명을 더 구체적으로 변경하는 것을 고려하세요:
-export const getUserProjectData = async (userId: number) => { +export const getUserAppliedProjects = async (userId: number) => {src/models/admin/userDetail/reportDetail.ts (1)
1-22: 타입 정의가 잘 구성되어 있습니다!카테고리와 위치에 대한 string literal union 타입 사용이 적절하며, API 응답 구조도 일관성 있게 정의되어 있습니다.
src/routes/AdminRoutes.tsx (1)
201-231: 라우팅 구조 변경이 적절합니다!프로젝트 관련 라우트를
AdminUserProjectsLayout아래로 통합하고 신고 상세 페이지 라우트를 추가한 것이 잘 구성되어 있습니다.
src/hooks/admin/useGetAllReports.ts
Outdated
| queryFn: () => getAllReports(), | ||
| queryKey: [ReportData.allReports, searchUnit.keyword, searchUnit.page], | ||
| queryFn: () => getAllReports(searchUnit), | ||
| select: (allReports) => allReports.slice(0, 5), |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
select 로직이 관리자 페이지에 적합한지 확인해주세요.
모든 신고를 5개로 제한하는 select 로직이 관리자 신고 검토 페이지의 요구사항에 맞는지 확인이 필요합니다. 관리자는 검색 결과에 따른 모든 신고를 볼 수 있어야 하는 것이 일반적입니다.
🏁 Script executed:
#!/bin/bash
# 관련 컴포넌트에서 이 훅의 사용법을 확인
ast-grep --pattern 'useGetAllReports($_)'Length of output: 126
🏁 Script executed:
#!/bin/bash
# AdminReports.tsx에서 useGetAllReports 사용 맥락 확인
sed -n '1,200p' src/pages/admin/adminReports/AdminReports.tsxLength of output: 3519
🏁 Script executed:
#!/bin/bash
# useGetAllReports 훅 전체 내용 확인
sed -n '1,200p' src/hooks/admin/useGetAllReports.tsLength of output: 640
관리자 신고 페이징 로직 수정 필요
현재 useGetAllReports 훅의 select: (allReports) => allReports.slice(0, 5)가 searchUnit.page를 고려하지 않고 항상 첫 5건만 반환하여, 페이지를 변경해도 같은 신고 목록만 노출됩니다. 관리자는 검색 결과에 따른 전체 신고를 페이지별로 확인해야 하므로 아래 위치를 수정해주세요.
• src/hooks/admin/useGetAllReports.ts
- select 로직에서 페이지 오프셋을 반영하거나, API 응답에 페이지네이션 필드를 추가하여 클라이언트에서 올바르게 처리
• src/pages/admin/adminReports/AdminReports.tsx - Pagination 컴포넌트의
getLastPage에 전체 페이지 수(totalCount / PAGE_SIZE)를 전달
예시 수정안:
-export const useGetAllReports = (searchUnit: SearchType) => {
- const {
- data: allReportsData,
- isLoading,
- isFetching,
- } = useQuery({
- queryKey: [ReportData.allReports, searchUnit.keyword, searchUnit.page],
- queryFn: () => getAllReports(searchUnit),
- select: (allReports) => allReports.slice(0, 5),
- });
-
- return { allReportsData, isLoading, isFetching };
-};
+export const useGetAllReports = (searchUnit: SearchType) => {
+ const PAGE_SIZE = 5;
+ const { data: response, isLoading, isFetching } = useQuery({
+ queryKey: [ReportData.allReports, searchUnit.keyword, searchUnit.page],
+ queryFn: () => getAllReports(searchUnit),
+ });
+
+ // API에서 { items: Report[], totalCount: number } 형태로 반환된다고 가정
+ const allReports = response?.items ?? [];
+ const totalCount = response?.totalCount ?? 0;
+ const paginated = allReports.slice(
+ (searchUnit.page - 1) * PAGE_SIZE,
+ searchUnit.page * PAGE_SIZE
+ );
+
+ return { allReportsData: paginated, totalCount, isLoading, isFetching };
+};Pagination 컴포넌트 호출부도 아래처럼 변경해주세요:
-<Pagination
- page={searchUnit.page}
- getLastPage={5}
- onChangePagination={handleChangePagination}
/>
+<Pagination
+ page={searchUnit.page}
+ getLastPage={Math.ceil(totalCount / PAGE_SIZE)}
+ onChangePagination={handleChangePagination}
/>Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/hooks/admin/useGetAllReports.ts at line 14, the select function currently
returns only the first 5 reports without considering the current page, causing
the same reports to show regardless of pagination. Modify the select logic to
calculate the correct slice based on the current page and page size, or adjust
the API to include pagination metadata so the client can handle it properly.
Additionally, in src/pages/admin/adminReports/AdminReports.tsx, update the
Pagination component's getLastPage prop to use the total number of pages
calculated from totalCount divided by PAGE_SIZE to enable correct page
navigation.
src/hooks/admin/useAdminReports.ts
Outdated
| }); | ||
| handleModalOpen(ADMIN_MODAL_MESSAGE.banSuccess); | ||
| }, | ||
| onError: () => {}, |
There was a problem hiding this comment.
에러 처리를 구현해주세요.
onError 핸들러가 비어있어 삭제 실패 시 사용자에게 피드백이 제공되지 않습니다. 사용자 경험을 위해 에러 메시지를 표시해주세요.
- onError: () => {},
+ onError: () => {
+ handleModalOpen(ADMIN_MODAL_MESSAGE.writeDeleteFail);
+ },🤖 Prompt for AI Agents
In src/hooks/admin/useAdminReports.ts at line 25, the onError handler is
currently empty, so users receive no feedback when a deletion fails. Implement
the onError function to capture the error and display an appropriate error
message to the user, ensuring they are informed about the failure.
| <Pagination | ||
| page={searchUnit.page} | ||
| getLastPage={5} | ||
| onChangePagination={handleChangePagination} | ||
| /> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
페이지네이션의 마지막 페이지를 동적으로 계산해야 합니다
현재 getLastPage={5}로 하드코딩되어 있습니다. 실제 데이터의 총 개수에 따라 동적으로 계산되어야 합니다.
🏁 Script executed:
#!/bin/bash
# useGetAllReports 훅에서 페이지 정보를 반환하는지 확인
ast-grep --pattern 'export const useGetAllReports = ($_) => {
$$$
return {
$$$
}
}'Length of output: 980
Pagination 마지막 페이지 동적 계산 적용 필요
현재 getLastPage={5}로 고정되어 있으며, useGetAllReports 훅에서도 슬라이스(slice(0, 5))만 적용되어 총 페이지 수 정보를 반환하지 않습니다. 실제 API 응답의 전체 아이템 수(totalCount)와 페이지당 항목 수(pageSize)를 이용해 마지막 페이지를 계산하도록 수정해야 합니다.
수정 포인트:
- src/hooks/admin/useGetAllReports.ts
select: (allReports) => allReports.slice(0, 5)제거- API 응답에 포함된
totalCount와pageSize를 이용해totalPages를 계산해 반환하도록 변경
- src/pages/admin/adminReports/AdminReports.tsx (94–98)
- getLastPage 하드코딩(
5) 대신 훅에서 반환받은totalPages로 변경
- getLastPage 하드코딩(
예시 diff:
--- a/src/pages/admin/adminReports/AdminReports.tsx
+++ b/src/pages/admin/adminReports/AdminReports.tsx
@@ -95,7 +95,7 @@
<Pagination
page={searchUnit.page}
- getLastPage={5}
+ getLastPage={totalPages}
onChangePagination={handleChangePagination}
/>📝 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.
| <Pagination | |
| page={searchUnit.page} | |
| getLastPage={5} | |
| onChangePagination={handleChangePagination} | |
| /> | |
| <Pagination | |
| page={searchUnit.page} | |
| getLastPage={totalPages} | |
| onChangePagination={handleChangePagination} | |
| /> |
🤖 Prompt for AI Agents
In src/pages/admin/adminReports/AdminReports.tsx lines 94 to 98, replace the
hardcoded getLastPage={5} with a dynamic value derived from the totalPages
returned by the useGetAllReports hook. To fix this, first update
src/hooks/admin/useGetAllReports.ts by removing the slice(0, 5) in the select
option and modify the hook to calculate totalPages using the API response's
totalCount and pageSize, then return totalPages along with the reports data.
Finally, in AdminReports.tsx, use the returned totalPages value to set
getLastPage dynamically instead of the fixed 5.
| export const Date = styled.p` | ||
| opacity: 60%; | ||
| `; |
There was a problem hiding this comment.
전역 Date 객체와 이름 충돌
Date라는 이름이 JavaScript의 전역 Date 객체와 충돌합니다. 다른 이름으로 변경해야 합니다.
-export const Date = styled.p`
+export const DateText = styled.p`
opacity: 60%;
`;📝 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.
| export const Date = styled.p` | |
| opacity: 60%; | |
| `; | |
| export const DateText = styled.p` | |
| opacity: 60%; | |
| `; |
🧰 Tools
🪛 Biome (1.9.4)
[error] 80-80: Do not shadow the global "Date" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
🤖 Prompt for AI Agents
In src/components/admin/adminUserReport/AdminReportDetail.styled.ts around lines
80 to 82, the styled component is named Date, which conflicts with the global
JavaScript Date object. Rename this styled component to a different,
non-conflicting name such as StyledDate or DateText to avoid naming collisions.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/pages/admin/adminReports/AdminReports.tsx (2)
77-78: 불필요한 주석 제거 권장
//userId와//reportId주석들은 코드에서 이미 명확하게 확인할 수 있는 정보이므로 제거하는 것이 좋겠습니다.- //userId onClick={(e) => handleClickWarningButton(e, data.userId)}- //userId onClick={(e) => handleClickBanButton(e, data.userId)}- //reportId onClick={(e) => handleClickDeleteButton(e, data.reportId)}Also applies to: 86-87, 93-94
60-60: 불필요한 옵셔널 체이닝 제거 권장36-38줄에서 이미
allReportsData의 존재를 확인했으므로, 이후 사용에서는 옵셔널 체이닝이 불필요합니다.- {allReportsData?.data.map((data) => ( + {allReportsData.data.map((data) => (- getLastPage={allReportsData?.totalPage} + getLastPage={allReportsData.totalPage}Also applies to: 104-104
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
src/api/admin/report.api.ts(1 hunks)src/components/user/mypage/activityLog/inquiries/Inquiries.tsx(2 hunks)src/constants/admin/adminModal.ts(1 hunks)src/hooks/admin/useAdminReportDetail.ts(1 hunks)src/hooks/admin/useAdminReports.ts(1 hunks)src/hooks/admin/useGetAllReports.ts(1 hunks)src/hooks/admin/useHandleUserApi.ts(1 hunks)src/models/report.ts(2 hunks)src/pages/admin/adminReports/AdminReports.styled.ts(1 hunks)src/pages/admin/adminReports/AdminReports.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (9)
- src/hooks/admin/useAdminReportDetail.ts
- src/constants/admin/adminModal.ts
- src/hooks/admin/useAdminReports.ts
- src/hooks/admin/useGetAllReports.ts
- src/hooks/admin/useHandleUserApi.ts
- src/api/admin/report.api.ts
- src/models/report.ts
- src/components/user/mypage/activityLog/inquiries/Inquiries.tsx
- src/pages/admin/adminReports/AdminReports.styled.ts
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: YouD0313
PR: devpalsPlus/frontend#334
File: src/components/common/admin/title/AdminTitle.styled.ts:4-10
Timestamp: 2025-06-05T15:59:56.230Z
Learning: YouD0313 prefers using position: fixed for admin headers due to layout requirements, even if it requires viewport-relative width calculations like calc(100vw - 20rem).
🧬 Code Graph Analysis (1)
src/pages/admin/adminReports/AdminReports.tsx (5)
src/hooks/useModal.ts (1)
useModal(3-36)src/hooks/admin/useGetAllReports.ts (1)
useGetAllReports(6-17)src/hooks/admin/useHandleUser.ts (1)
useHandleUser(9-56)src/constants/admin/adminModal.ts (1)
ADMIN_MODAL_MESSAGE(1-10)src/components/common/admin/title/AdminTitle.tsx (1)
AdminTitle(8-17)
🔇 Additional comments (3)
src/pages/admin/adminReports/AdminReports.tsx (3)
1-17: Import 구조가 잘 정리되어 있습니다필요한 모든 컴포넌트와 훅들이 적절히 임포트되어 있고, 논리적으로 그룹화되어 있습니다.
18-34: 훅 사용과 관심사 분리가 잘 되어 있습니다각 기능별로 적절한 커스텀 훅을 사용하여 코드의 가독성과 재사용성이 향상되었습니다.
36-46: 로딩 상태 처리가 적절합니다데이터 없음과 로딩 상태에 대한 적절한 UI 피드백을 제공하고 있습니다.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/pages/admin/adminReports/AdminReports.tsx (1)
80-81: 이벤트 핸들러의 주석 정리 필요버튼의 onClick 핸들러 위에 있는
//userId,//reportId주석들이 개발 과정에서 남겨진 것으로 보입니다. 코드 정리를 위해 제거하는 것을 권장합니다.- //userId onClick={(e) => handleClickWarningButton(e, data.userId)} - //userId onClick={(e) => handleClickBanButton(e, data.userId)} - //reportId onClick={(e) => handleClickDeleteButton(e, data.reportId)}Also applies to: 89-90, 96-97
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/components/admin/adminUserReport/AdminReportDetail.tsx(1 hunks)src/constants/admin/adminReportCategoryList.ts(1 hunks)src/models/admin/userDetail/reportDetail.ts(1 hunks)src/models/report.ts(2 hunks)src/pages/admin/adminReports/AdminReports.styled.ts(1 hunks)src/pages/admin/adminReports/AdminReports.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/constants/admin/adminReportCategoryList.ts
🚧 Files skipped from review as they are similar to previous changes (4)
- src/components/admin/adminUserReport/AdminReportDetail.tsx
- src/models/admin/userDetail/reportDetail.ts
- src/models/report.ts
- src/pages/admin/adminReports/AdminReports.styled.ts
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: YouD0313
PR: devpalsPlus/frontend#334
File: src/components/common/admin/title/AdminTitle.styled.ts:4-10
Timestamp: 2025-06-05T15:59:56.230Z
Learning: YouD0313 prefers using position: fixed for admin headers due to layout requirements, even if it requires viewport-relative width calculations like calc(100vw - 20rem).
🪛 Biome (1.9.4)
src/pages/admin/adminReports/AdminReports.tsx
[error] 70-71: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: accessibility-test
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/api/customerService.api.ts (1)
32-41: 코드 중복 가능성 검토 필요새로 추가된
getNoticePreview함수가 기존getNotice함수와 매우 유사합니다. 두 함수 모두 같은 엔드포인트를 사용하고 동일한 반환 타입을 가지고 있습니다.기존
getNotice함수의 파라미터를 선택적으로 만들어 하나의 함수로 통합하는 것을 고려해보세요.-export const getNoticePreview = async () => { - try { - const response = await httpClient.get<ApiNotice>(`/notice`); - - return response.data.data; - } catch (e) { - console.error(e); - throw e; - } -}; -export const getNotice = async (params: NoticeSearch) => { +export const getNotice = async (params?: NoticeSearch) => { try { - const response = await httpClient.get<ApiNotice>(`/notice`, { params }); + const response = await httpClient.get<ApiNotice>(`/notice`, params ? { params } : {}); return response.data.data; } catch (e) { console.error(e); throw e; } };src/hooks/admin/useGetAllNoticePreview.ts (1)
14-15: 무한 캐시 설정 검토
staleTime과gcTime을 모두Infinity로 설정하면 데이터가 절대 만료되지 않고 가비지 컬렉션되지 않습니다. 공지사항 미리보기 데이터가 실시간으로 업데이트되어야 하는 경우 적절한 캐시 무효화 전략이 필요할 수 있습니다.src/components/admin/previewComponent/noticePreview/NoticePreview.tsx (1)
18-18: 오타 수정 필요"공지사힝이"를 "공지사항이"로 수정해주세요.
- return <S.Container>공지사힝이 없습니다.</S.Container>; + return <S.Container>공지사항이 없습니다.</S.Container>;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
src/api/admin/report.api.ts(1 hunks)src/api/admin/user.api.ts(2 hunks)src/api/customerService.api.ts(1 hunks)src/components/admin/previewComponent/noticePreview/NoticePreview.tsx(2 hunks)src/components/user/mypage/activityLog/inquiries/Inquiries.tsx(1 hunks)src/hooks/admin/useGetAllNoticePreview.ts(1 hunks)src/models/admin/userDetail/reportDetail.ts(1 hunks)src/models/alarm.ts(1 hunks)src/models/applicant.ts(1 hunks)src/models/comment.ts(1 hunks)src/models/customerService.ts(1 hunks)src/models/manageMyProject.ts(1 hunks)src/models/projectDetail.ts(1 hunks)
✅ Files skipped from review due to trivial changes (4)
- src/models/manageMyProject.ts
- src/models/customerService.ts
- src/models/comment.ts
- src/models/alarm.ts
🚧 Files skipped from review as they are similar to previous changes (4)
- src/components/user/mypage/activityLog/inquiries/Inquiries.tsx
- src/api/admin/user.api.ts
- src/api/admin/report.api.ts
- src/models/admin/userDetail/reportDetail.ts
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: YouD0313
PR: devpalsPlus/frontend#334
File: src/components/common/admin/title/AdminTitle.styled.ts:4-10
Timestamp: 2025-06-05T15:59:56.230Z
Learning: YouD0313 prefers using position: fixed for admin headers due to layout requirements, even if it requires viewport-relative width calculations like calc(100vw - 20rem).
src/components/admin/previewComponent/noticePreview/NoticePreview.tsx (2)
Learnt from: YouD0313
PR: devpalsPlus/frontend#278
File: src/pages/login/LoginSuccess.tsx:13-24
Timestamp: 2025-05-11T09:39:02.041Z
Learning: 사용자 알림은 브라우저의 기본 alert() 대신 애플리케이션의 Modal 컴포넌트(src/components/common/modal/Modal.tsx)를 사용하는 것이 선호됩니다.
Learnt from: YouD0313
PR: devpalsPlus/frontend#278
File: src/pages/login/LoginSuccess.tsx:13-24
Timestamp: 2025-05-11T09:39:02.041Z
Learning: 사용자 알림은 브라우저의 기본 alert() 대신 애플리케이션의 Modal 컴포넌트(src/components/common/modal/Modal.tsx)를 사용하는 것이 선호됩니다.
src/hooks/admin/useGetAllNoticePreview.ts (2)
Learnt from: layout-SY
PR: devpalsPlus/frontend#246
File: src/hooks/useAlarmList.ts:1-21
Timestamp: 2025-04-23T13:39:08.960Z
Learning: React Query의 useQuery 훅에서 queryFn으로 Promise를 반환하는 함수를 사용할 때는 불필요한 async/await을 사용하지 않는 것이 좋습니다. 예를 들어 `queryFn: async () => await getAlarmList()` 대신에 `queryFn: () => getAlarmList()`와 같이 직접 Promise를 반환하는 형태로 작성하는 것이 더 효율적입니다.
Learnt from: layout-SY
PR: devpalsPlus/frontend#246
File: src/hooks/useAlarmList.ts:1-21
Timestamp: 2025-04-23T13:39:08.960Z
Learning: React Query의 useQuery 훅에서 queryFn으로 Promise를 반환하는 함수를 사용할 때는 불필요한 async/await을 사용하지 않는 것이 좋습니다. 예를 들어 `queryFn: async () => await getAlarmList()` 대신에 `queryFn: () => getAlarmList()`와 같이 직접 Promise를 반환하는 형태로 작성하는 것이 더 효율적입니다.
🧬 Code Graph Analysis (3)
src/api/customerService.api.ts (3)
public/mockServiceWorker.js (1)
response(125-125)src/api/http.api.ts (1)
httpClient(80-80)src/models/customerService.ts (1)
ApiNotice(30-32)
src/components/admin/previewComponent/noticePreview/NoticePreview.tsx (1)
src/hooks/admin/useGetAllNoticePreview.ts (1)
useGetNoticePreview(5-19)
src/hooks/admin/useGetAllNoticePreview.ts (2)
src/hooks/queries/keys.ts (1)
CustomerService(56-62)src/api/customerService.api.ts (1)
getNoticePreview(32-41)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: accessibility-test
🔇 Additional comments (4)
src/models/projectDetail.ts (1)
1-1: 타입 전용 import 최적화 적용 완료
ApiCommonType와User를 타입 전용 import로 변경한 것은 좋은 개선입니다. 이 변경으로 런타임 코드에서 불필요한 import가 제거되어 번들 크기 최적화에 도움이 됩니다.src/models/applicant.ts (1)
1-2: 타입 전용 import 최적화 일관성 있게 적용
ApiCommonType과SkillTag를 타입 전용 import로 변경한 것이 적절합니다. 다른 모델 파일들과 일관성 있게 타입 최적화가 적용되어 코드베이스 전반의 품질 향상에 기여하고 있습니다.src/hooks/admin/useGetAllNoticePreview.ts (1)
13-13: 데이터 구조 일치 확인됨검증 결과
getNoticePreview가 반환하는response.data.data는Notice타입이며, 해당 타입에notices: NoticeList[]가 정의되어 있습니다. 따라서select: (notice) => notice.notices.slice(0, 5)구문은 올바르게 작동하며, 추가 수정이 필요 없습니다.
src/components/admin/previewComponent/noticePreview/NoticePreview.tsx (1)
23-23: 데이터 구조 검증 필요
noticeData.map()을 호출하고 있는데,useGetNoticePreview훅의 데이터 구조 불일치 가능성으로 인해noticeData가 배열이 아닐 수 있습니다. 런타임 에러를 방지하기 위해 안전한 처리가 필요합니다.- {noticeData.map((notice) => ( + {noticeData?.map?.((notice) => (또는 배열 타입 가드를 추가:
+ if (!Array.isArray(noticeData)) { + return <S.Container>데이터 형식 오류</S.Container>; + } + {noticeData.map((notice) => (
src/api/admin/report.api.ts
Outdated
| @@ -0,0 +1,45 @@ | |||
| import { ApiReportDetail } from '../../models/admin/userDetail/reportDetail'; | |||
| import { ApiAllReports } from '../../models/report'; | |||
| import { SearchType } from '../../models/search'; | |||
src/api/admin/user.api.ts
Outdated
| @@ -0,0 +1,48 @@ | |||
| import { ApiUserApplicantsData } from '../../models/admin/userDetail/userDetail.applicants'; | |||
| import { ApiUserProjectDataResponse } from '../../models/admin/userDetail/userProjectData'; | |||
src/api/admin/userActivity.api.ts
Outdated
| @@ -0,0 +1,14 @@ | |||
| import { httpClient } from '../http.api'; | |||
| import { ApiUserActivityResponse } from '../../models/admin/userDetail/userActivity'; | |||
|
|
||
| type TabKey = 'basic' | 'log' | 'inquiry' | 'joined' | 'created' | 'applied'; | ||
| import useGetUserProjectData from '../../../hooks/admin/useGetUserProjectData'; | ||
| import { TabKey } from '../../../models/admin/userDetail/routing'; |
| @@ -0,0 +1,37 @@ | |||
| import * as S from './ReportCheckBox.styled'; | |||
| import { reasons } from '../../../constants/user/reportConstants'; | |||
src/hooks/admin/useGetAllReports.ts
Outdated
| import { ReportData } from '../queries/keys'; | ||
| import { getAllReports } from '../../api/report.api'; | ||
| import { getAllReports } from '../../api/admin/report.api'; | ||
| import { SearchType } from '../../models/search'; |
구현내용
연관이슈
관련이슈 번호를 close해주세요.
예시 close #1
Summary by CodeRabbit
신규 기능
버그 수정
개선 및 변경
문서 및 스타일