관리자 메인 페이지 구현 ( issue #318 ) #328
Conversation
|
""" Walkthrough관리자 메인 페이지의 카드형 UI(공지사항, 문의, 신고, 그래프, 회원 preview) 구성이 완성되었고, 각 카드별 데이터 미리보기 및 상세 페이지 이동 기능이 구현되었습니다. 관련 API 연동, React Query 기반 데이터 패칭, 스타일 컴포넌트, 타입 정의, 목데이터, mock 핸들러 등이 추가 및 정비되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant AdminMainPage
participant useGetAllUsers
participant useGetAllInquiries
participant useGetAllReports
participant API
participant MockServer
AdminMainPage->>useGetAllUsers: 회원 미리보기 데이터 요청
useGetAllUsers->>API: GET /users
API-->>useGetAllUsers: 사용자 목록 반환
useGetAllUsers-->>AdminMainPage: 사용자 데이터 전달
AdminMainPage->>useGetAllInquiries: 문의 미리보기 데이터 요청
useGetAllInquiries->>API: GET /inquiry
API-->>useGetAllInquiries: 문의 목록 반환
useGetAllInquiries-->>AdminMainPage: 문의 데이터 전달
AdminMainPage->>useGetAllReports: 신고 미리보기 데이터 요청
useGetAllReports->>API: GET /reports
API-->>useGetAllReports: 신고 목록 반환
useGetAllReports-->>AdminMainPage: 신고 데이터 전달
Note over AdminMainPage: 각 카드별 미리보기 및 상세 이동 구현
Assessment against linked issues
Assessment against linked issues: Out-of-scope changes해당 PR 내 변경사항은 모두 관리자 메인 페이지 구현(#318)과 직접적으로 연관된 코드로 판단되며, 명백하게 범위를 벗어나는 기능적 변경사항은 없습니다. Possibly related PRs
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 (8)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (7)
⏰ 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: 24
♻️ Duplicate comments (3)
src/mock/manageProjectList.ts (2)
5-5: 환경 변수 기반 URL 구성 중복 변경사항
위에서 리뷰한 대로 슬래시 처리 및 환경 변수 일관성을 확인해야 합니다.
14-14: 환경 변수 기반 URL 구성 중복 변경사항
위에서 리뷰한 대로 슬래시 처리 및 환경 변수 일관성을 확인해야 합니다.src/mock/mypage.ts (1)
9-9: 환경 변수 기반 URL 구성 중복 변경사항
앞서auth.ts에서 리뷰한 것처럼,VITE_APP_API_BASE_URL에 끝 슬래시 포함 여부 및 템플릿 내 슬래시 삽입을 확인해야 합니다.Also applies to: 18-18, 27-27, 36-36, 45-45, 54-54
🧹 Nitpick comments (40)
src/models/manageMyProject.ts (1)
23-23: 백엔드 응답 확인 및 Optional 처리 고려
isAllEvaluated필드가 실제 API 응답에 항상 포함되는지 검증하고, 일부 응답에 값이 누락될 가능성이 있다면boolean대신boolean?(optional) 처리를 적용하거나 디폴트 값을 설정하는 로직을 추가하는 것을 권장합니다.src/components/common/header/Notification/NotificationItem/NotificationItem.tsx (1)
19-19: 알림 항목에 구분자가 추가되었습니다.컨텐츠 뒤에 구분자 " | "가 추가되어 UI 표시가 개선되었습니다.
하드코딩된 구분자 대신 상수로 관리하는 것을 고려해보세요:
+const SEPARATOR = ' | '; + const NotificationItem = ({ item }: NotificationItemProps) => { const { close } = useContext(DropDownContext); const route = routeSelector(item.routingId, item.alarmFilterId); return ( <Link to={route} onClick={close}> <S.Container> - <S.ItemContent>{item.content} | </S.ItemContent> + <S.ItemContent>{item.content}{SEPARATOR}</S.ItemContent>src/components/admin/mainCard/graphCard/GraphCard.styled.ts (1)
3-5: 그래프 카드용 컨테이너 스타일이 추가되었습니다.고정 높이(350px)로 차트 레이아웃을 제공하는 깔끔한 구현입니다.
반응형 디자인을 고려하여 최소 높이와 최대 높이를 함께 사용하는 것을 검토해보세요:
export const Container = styled.div` - height: 350px; + min-height: 300px; + max-height: 400px; + height: 350px; + + @media (max-width: 768px) { + height: 250px; + } `;src/hooks/admin/useGetAllReports.ts (1)
5-12: 에러 처리 및 쿼리 옵션 개선 제안React Query 훅의 기본 구조는 올바르게 구현되었지만, 다음과 같은 개선사항을 고려해보세요:
- 에러 상태 반환 누락
- 쿼리 옵션 추가 고려
다음과 같이 개선할 수 있습니다:
export const useGetAllReports = () => { - const { data: allReportsData, isLoading } = useQuery({ + const { data: allReportsData, isLoading, error } = useQuery({ queryKey: [ReportData.allReports], queryFn: () => getAllReports(), + staleTime: 5 * 60 * 1000, // 5분 + retry: 3, }); - return { allReportsData, isLoading }; + return { allReportsData, isLoading, error }; };src/components/user/notificationLive/NotificationInitializer.tsx (1)
3-7: 컴포넌트 구조 개선 제안사이드 이펙트만을 위한 컴포넌트 패턴은 이해할 수 있지만, 다음과 같은 개선사항을 고려해보세요:
- 컴포넌트명이 용도를 명확히 표현하는지 검토
- useEffect를 사용한 명시적인 사이드 이펙트 처리
다음과 같이 개선할 수 있습니다:
+import { useEffect } from 'react'; import useNotification from '../../../hooks/user/useNotification'; const NotificationInitializer = () => { - useNotification(); + useEffect(() => { + // 알림 시스템 초기화 + }, []); + + useNotification(); return null; };또는 더 명확한 이름을 고려해보세요:
NotificationSetup또는NotificationSideEffectssrc/pages/user/evaluation/Evaluation.tsx (1)
12-14: 타입 안전성 개선이 필요합니다.현재
location.state의 타입 검사가 런타임에서만 이루어지고 있습니다. TypeScript의 타입 시스템을 활용하여 더 안전한 타입 검사를 구현하는 것이 좋겠습니다.다음과 같이 개선할 수 있습니다:
- const isAllEvaluated = - typeof location.state === 'boolean' ? location.state : false; + const isAllEvaluated = Boolean( + location.state && + typeof location.state === 'object' && + 'isAllEvaluated' in location.state && + typeof (location.state as { isAllEvaluated?: boolean }).isAllEvaluated === 'boolean' + ? (location.state as { isAllEvaluated: boolean }).isAllEvaluated + : false + );또는 인터페이스를 정의하여 더 명확하게 처리할 수 있습니다:
interface EvaluationLocationState { isAllEvaluated: boolean; } const isAllEvaluated = (location.state as EvaluationLocationState)?.isAllEvaluated ?? false;src/components/user/manageProjects/Card.styled.ts (1)
94-94: 조건부 스타일링이 잘 구현되었지만 테마 시스템 활용을 고려해보세요.
$isCompletedprop을 통한 조건부 스타일링이 적절히 구현되었습니다. 하지만 색상 값이 하드코딩되어 있어 테마 시스템과의 일관성을 고려해볼 필요가 있습니다.테마 시스템을 활용하여 색상을 관리하는 것이 좋겠습니다:
background-color: ${({ $isCompleted, theme }) => - $isCompleted ? `#2ADE1D` : `#3e5879`}; + $isCompleted ? theme.color.success || '#2ADE1D' : theme.color.primary};또는 새로운 테마 색상을 정의하여 사용할 수 있습니다:
// theme에 추가 success: '#2ADE1D', completed: '#2ADE1D',Also applies to: 98-99
src/api/report.api.ts (1)
17-25: 전체 신고 조회 API 함수가 적절히 구현되었습니다.함수 로직은 올바르게 구현되었습니다. 다만 에러 메시지의 일관성을 위해 다른 API 함수들처럼 한국어 메시지를 사용하는 것을 고려해보세요.
일관성을 위해 에러 메시지를 한국어로 변경하는 것을 고려해보세요:
- console.error(e); + console.error('전체 신고 조회 에러', e);src/models/auth.ts (1)
23-23: 네이밍 컨벤션 개선 제안
hasRequiredTags보다는hasRequiredTags의 구체적인 의미를 명확히 하는 네이밍을 고려해보세요. 예를 들어hasCompletedProfile,hasValidatedTags등과 같이 더 명확한 의미를 전달하는 이름이 좋겠습니다.src/mock/mockReports.json (1)
62-62: 불필요한 빈 줄 제거JSON 파일에서 불필요한 빈 줄은 제거하는 것이 좋습니다.
Also applies to: 87-87
src/components/admin/mainCard/MainCard.tsx (2)
3-3: 불필요한 React importReact 17+에서는 JSX 변환이 자동으로 처리되므로 명시적인 React import가 필요하지 않습니다. 타입스크립트 설정에서
jsx: "react-jsx"가 설정되어 있다면 이 import를 제거할 수 있습니다.-import React from 'react';
11-29: 접근성 개선 제안컴포넌트의 구조는 좋지만 접근성을 개선할 수 있습니다:
title에 적절한 heading 레벨 설정moreLink에 aria-label 추가하여 스크린 리더 사용자에게 더 명확한 정보 제공예시:
<S.ShowAllArea to={moreLink} aria-label={`${title} 전체 보기로 이동`}> <S.ShowAllButton>전체 보기</S.ShowAllButton> <S.ArrowRight src={arrowRight} alt="" /> </S.ShowAllArea>src/components/admin/previewComponent/allUserPreview/AllUserPreview.tsx (2)
11-15: 슬라이싱 로직을 명확히 해주세요.현재 로직에서 전체 사용자가 6명을 초과하면 4명만 보여주고, 6명 이하면 전부 보여주는 이유가 명확하지 않습니다. 일관성을 위해 항상 최대 4명까지만 보여주거나, 비즈니스 로직에 대한 주석을 추가해주세요.
더 일관된 로직으로 수정하는 것을 고려해보세요:
- const previewList = allUserData - ? allUserData.length > 6 - ? allUserData.slice(0, 4) - : allUserData - : []; + const previewList = allUserData?.slice(0, 4) || [];
22-22: 아바타 이미지 속성 개선 제안현재
Avatar컴포넌트에image={undefined}로 하드코딩되어 있습니다. 사용자 데이터에 프로필 이미지가 있다면 이를 활용하는 것이 좋겠습니다.-<Avatar image={undefined} size='40px' /> +<Avatar image={user.user.profileImage || undefined} size='40px' />src/components/admin/previewComponent/reportsPreview/ReportsPreview.tsx (1)
10-14: 일관성을 위해 슬라이싱 로직을 개선해주세요.AllUserPreview와 동일한 조건부 슬라이싱 로직이 사용되고 있습니다. 두 컴포넌트 모두에서 동일한 패턴이 반복되므로, 공통 유틸리티 함수로 추출하거나 더 명확한 로직으로 개선하는 것을 고려해보세요.
공통 함수로 추출하는 예시:
// utils/previewHelpers.ts export const getPreviewList = <T>(data: T[] | undefined, maxItems = 4): T[] => { return data?.slice(0, maxItems) || []; }; // 컴포넌트에서 사용: const previewList = getPreviewList(allReportsData, 4);src/pages/admin/adminMain/AdminMain.tsx (2)
10-20: 조건부 렌더링 로직을 개선할 수 있습니다.현재 title 문자열 비교로 조건부 렌더링을 하고 있는데, 이는 유지보수성과 타입 안전성 측면에서 개선 여지가 있습니다.
cardList 설정에서 렌더링 방식을 명시적으로 지정하는 방법을 고려해보세요:
// mainItems.ts에서 { key: 'Graph', title: '방문자 현황', Component: GraphCard, wrapInGraphArea: true, // 또는 renderType: 'graph' } // AdminMain.tsx에서 {cardList.map(({ key, title, link, Component, wrapInGraphArea }) => ( <MainCard key={key} title={title} moreLink={link}> {wrapInGraphArea ? ( <S.GraphArea> <Component /> </S.GraphArea> ) : ( <Component /> )} </MainCard> ))}
12-18: 조건부 렌더링 로직 개선 제안현재 제목 문자열로 비교하는 방식보다는 더 명시적인 방법을 고려해볼 수 있습니다.
cardList의 각 항목에isGraph같은 플래그를 추가하거나, 컴포넌트 타입으로 비교하는 방법을 고려해보세요:-{title === '방문자 현황' ? ( +{key === 'Graph' ? (또는
cardList에wrapInGraphArea같은 플래그를 추가하는 방법도 있습니다.src/context/SseContext.tsx (1)
16-16: 커스텀 훅 이름을 더 구체적으로 고려해보세요.
useNotificationContext라는 이름이 적절하지만, SSE 특성을 명시하는useSseContext또는useSseNotification같은 이름도 고려해볼 수 있습니다.-export const useNotificationContext = () => useContext(SseContext); +export const useSseContext = () => useContext(SseContext);src/models/report.ts (1)
1-2: 타입 가져오기시import type사용 고려
런타임 번들 크기를 줄이고 순수 타입만 가져온다는 의도를 명확히 하기 위해import { ApiCommonType, User } from './apiCommon';대신import type { ApiCommonType, User } from './apiCommon';로 선언하는 것을 제안합니다.
src/pages/admin/adminMain/AdminMain.styled.ts (5)
3-6: 테마 간격 단위 활용 제안
padding: 10px;대신theme.spacing(또는 디자인 시스템의 간격 단위)을 사용하는 것이 전체 UI 일관성에 도움이 됩니다.
예:padding: ${({ theme }) => theme.spacing(2)};
8-16: 그리드 레이아웃 설정 적절
grid-template-columns와grid-auto-rows: minmax(350px, auto)조합으로 카드 최소 높이를 보장한 것은 적절합니다.
다만& > * { width: 100%; }대신justify-items: stretch;를 사용하면 좀 더 선언적입니다.
18-22: 중복된width선언 제거 필요& > *:nth-child(4) { grid-column: 1 / 3; width: 300px; width: 100%; }
width: 300px;와width: 100%;이 중복되어 의도를 알기 어렵습니다. 불필요한 한 줄을 제거하거나 명확한 비율 기반 너비 설정으로 정리해주세요.
24-27: 미디어 쿼리 브레이크포인트 테마화 제안
하드코딩된768px대신theme.breakpoints.tablet같은 변수를 사용하면 일관된 반응형 관리가 가능합니다.
29-29: 빈 styled 컴포넌트 검토
export const GraphArea = styled.div\`;`가 실제로 스타일을 추가하지 않으므로, 필요 없다면 제거하거나 추후 스타일이 추가될 때 정의를 옮기는 것도 고려해보세요.src/components/admin/previewComponent/noticePreview/NoticePreview.styled.ts (4)
3-7: 컨테이너 패딩 값 일관성
padding: 20px;대신 전역 테마의 spacing 단위를 활용하면 디자인 일관성을 유지하기 쉽습니다.
9-11: Wrapper에gap적용 검토
display: flex;만 지정되어 있는데, 항목 간 간격이 필요하다면gap: 10px;또는margin을 활용해보세요.
13-15: 이미지 요소 접근성 Alt 검토
Dot가 단순 장식용 이미지라면alt=""처리 또는aria-hidden="true"속성 부여를 고려하세요.
17-22: 텍스트 잘림을 위한 최대 너비 지정 필요
text-overflow: ellipsis;가 동작하려면 부모 요소 또는NoticeTitle에width또는max-width가 필요합니다.
예:flex: 1; width: 0;src/components/admin/mainCard/graphCard/GraphCard.tsx (2)
1-5: React 17+ 환경에서 JSX 자동 변환 사용 시import React불필요
프로젝트가 새로운 JSX 변환 설정을 사용 중이라면 1번 줄의import React from 'react';를 제거할 수 있습니다.
7-13:data와options객체 메모이제이션 제안
매 렌더링마다 새로운 참조가 생성되어 차트가 불필요하게 리렌더될 수 있습니다.const memoizedData = useMemo(() => data, []); const memoizedOptions = useMemo(() => options, []); ... <Line data={memoizedData} options={memoizedOptions} />로 최적화하면 퍼포먼스가 개선됩니다.
src/constants/admin/mainItems.ts (3)
8-13:Component타입 좀 더 일반화 고려
React.FC외에도 props가 없는 컴포넌트를 표현할 때는React.ComponentType또는() => JSX.Element로 타입을 선언하면 불필요한children프로퍼티 주입을 막을 수 있습니다.
19-20: 템플릿 문자열 불필요 사용 제거link: `${ADMIN_ROUTE.allUser}`,와 같은 형태는
link: ADMIN_ROUTE.allUser,로 간결히 줄일 수 있습니다.
Also applies to: 25-26, 42-43
34-38: 카드 키명 일관성 제안
다른 카드의 key는 모두 소문자인데key: 'Graph'만 대문자 G로 시작합니다.key: 'graph',로 변경해 키 관리 일관성을 유지해주세요.
src/components/admin/previewComponent/inquiresPreview/InquiresPreview.tsx (2)
10-14: 미리보기 목록 로직 개선 필요현재 로직에서 전체 항목이 6개를 초과하면 4개만 표시하고, 6개 이하면 전체를 표시하는 것이 일관성이 없습니다. 더 직관적인 로직으로 개선하는 것을 고려해보세요.
const previewList = allInquiriesData - ? allInquiriesData.length > 6 - ? allInquiriesData.slice(0, 4) - : allInquiriesData + ? allInquiriesData.slice(0, 4) // 항상 최대 4개까지만 표시 : [];
21-21: 주석 처리된 코드 제거미완성된 주석 처리된 코드가 남아있습니다. 불필요한 코드는 제거하여 코드 가독성을 향상시키세요.
- {/* <Link to={`${ADMIN_ROUTE.}`} */}src/hooks/user/useNotification.ts (2)
39-42: 개발용 콘솔 로그 제거 필요프로덕션 환경에서 불필요한 콘솔 로그가 남아있습니다. 환경별로 조건부 로깅을 사용하거나 제거해야 합니다.
eventSource.onopen = () => { - console.log('확인'); - console.log(eventSource.readyState); + if (process.env.NODE_ENV === 'development') { + console.log('SSE 연결 성공:', eventSource.readyState); + } };
72-72: 의존성 배열에 setSignal 누락
setSignal이 useEffect 내에서 사용되지만 의존성 배열에 포함되지 않았습니다. Context에서 가져온 함수라면 일반적으로 안정적이지만 명시적으로 포함하는 것이 좋습니다.- }, [queryClient, userId, accessToken]); + }, [queryClient, userId, accessToken, setSignal]);또는 Context에서
setSignal이 안정적임을 보장한다면 주석으로 설명을 추가하세요.src/components/admin/mainCard/MainCard.styled.ts (2)
33-39: 빈 스타일 컴포넌트들 정리 필요여러 스타일 컴포넌트들이 스타일이 정의되지 않은 채로 생성되어 있습니다. 사용되지 않는다면 제거하고, 향후 사용 예정이라면 TODO 주석을 추가하세요.
-export const ArrowRight = styled.img``; - -export const Line = styled.hr``; - -export const Wrapper = styled.div``; - -export const MainContent = styled.div``; +// TODO: 향후 구현 예정인 스타일 컴포넌트들 +// export const ArrowRight = styled.img``; +// export const Line = styled.hr``; +// export const Wrapper = styled.div``; +// export const MainContent = styled.div``;또는 실제로 사용되고 있다면 적절한 스타일을 추가하세요.
22-26: ShowAllArea 스타일 개선 제안
ShowAllArea가 Link 컴포넌트인데 기본 링크 스타일(밑줄, 색상 등)이 제거되지 않았을 수 있습니다. 일관된 UI를 위해 기본 스타일을 재설정하는 것을 고려해보세요.export const ShowAllArea = styled(Link)` display: flex; margin-left: 10px; margin-right: 10px; + text-decoration: none; + color: inherit; + + &:hover { + text-decoration: none; + } `;src/components/user/evaluation/EvaluationContent.tsx (1)
49-55: 제목 조건부 로직을 단순화할 수 있습니다.삼중 조건 연산자가 복잡하여 가독성이 떨어집니다. 더 명확한 로직으로 개선할 수 있습니다.
다음과 같이 리팩토링하는 것을 고려해보세요:
- <S.Title> - {isAllEvaluated - ? '평가가 완료 되었습니다. ' - : completedMember - ? `${completedMember.nickname}님 평가 결과` - : `${notDone[step]?.nickname}님 평가하기`} - </S.Title> + <S.Title> + {(() => { + if (isAllEvaluated) return '평가가 완료 되었습니다.'; + if (completedMember) return `${completedMember.nickname}님 평가 결과`; + return `${notDone[step]?.nickname}님 평가하기`; + })()} + </S.Title>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/assets/line.svgis excluded by!**/*.svg
📒 Files selected for processing (61)
src/api/activityLog.api.ts(2 hunks)src/api/auth.api.ts(2 hunks)src/api/myProjectList.api.ts(1 hunks)src/api/mypage.api.ts(1 hunks)src/api/report.api.ts(2 hunks)src/components/admin/mainCard/MainCard.styled.ts(1 hunks)src/components/admin/mainCard/MainCard.tsx(1 hunks)src/components/admin/mainCard/graphCard/GraphCard.styled.ts(1 hunks)src/components/admin/mainCard/graphCard/GraphCard.tsx(1 hunks)src/components/admin/previewComponent/allUserPreview/AllUserPreview.styled.ts(1 hunks)src/components/admin/previewComponent/allUserPreview/AllUserPreview.tsx(1 hunks)src/components/admin/previewComponent/inquiresPreview/InquiresPreview.styled.ts(1 hunks)src/components/admin/previewComponent/inquiresPreview/InquiresPreview.tsx(1 hunks)src/components/admin/previewComponent/noticePreview/NoticePreview.styled.ts(1 hunks)src/components/admin/previewComponent/noticePreview/NoticePreview.tsx(1 hunks)src/components/admin/previewComponent/reportsPreview/ReportsPreview.styled.ts(1 hunks)src/components/admin/previewComponent/reportsPreview/ReportsPreview.tsx(1 hunks)src/components/common/header/Header.tsx(3 hunks)src/components/common/header/Notification/Notification.styled.ts(1 hunks)src/components/common/header/Notification/Notification.tsx(1 hunks)src/components/common/header/Notification/NotificationItem/NotificationItem.styled.ts(1 hunks)src/components/common/header/Notification/NotificationItem/NotificationItem.tsx(1 hunks)src/components/user/evaluation/EvaluationContent.styled.ts(1 hunks)src/components/user/evaluation/EvaluationContent.tsx(4 hunks)src/components/user/manageProjects/Card.styled.ts(1 hunks)src/components/user/manageProjects/Card.tsx(1 hunks)src/components/user/mypage/joinedProject/Project.styled.ts(1 hunks)src/components/user/mypage/joinedProject/Project.tsx(1 hunks)src/components/user/notificationLive/NotificationInitializer.tsx(1 hunks)src/components/user/notificationLive/NotificationProvider.tsx(1 hunks)src/constants/admin/mainItems.ts(1 hunks)src/context/SseContext.tsx(1 hunks)src/hooks/admin/useGetAllInquiries.ts(1 hunks)src/hooks/admin/useGetAllReports.ts(1 hunks)src/hooks/admin/useGetAllUsers.ts(1 hunks)src/hooks/queries/user/keys.ts(1 hunks)src/hooks/user/evaluationHooks/useEvaluationStep.ts(5 hunks)src/hooks/user/useNotification.ts(2 hunks)src/mock/applicant.ts(5 hunks)src/mock/auth.ts(1 hunks)src/mock/browser.ts(3 hunks)src/mock/createProject.ts(1 hunks)src/mock/manageProjectList.ts(2 hunks)src/mock/mockReports.json(1 hunks)src/mock/mockUsers.json(1 hunks)src/mock/mypage.ts(6 hunks)src/mock/projectDetail.ts(1 hunks)src/mock/projectLists.ts(2 hunks)src/mock/projectSearchFiltering.ts(2 hunks)src/mock/userpage.ts(2 hunks)src/models/activityLog.ts(2 hunks)src/models/auth.ts(2 hunks)src/models/evaluation.ts(1 hunks)src/models/manageMyProject.ts(1 hunks)src/models/report.ts(1 hunks)src/models/userProject.ts(1 hunks)src/pages/admin/adminInquiries/AdminInquiries.tsx(1 hunks)src/pages/admin/adminMain/AdminMain.styled.ts(1 hunks)src/pages/admin/adminMain/AdminMain.tsx(1 hunks)src/pages/user/evaluation/Evaluation.tsx(3 hunks)src/routes/AppRoutes.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (29)
src/api/myProjectList.api.ts (2)
src/api/http.api.ts (1)
httpClient(80-80)src/models/manageMyProject.ts (1)
ApiManagedProjects(42-44)
src/api/mypage.api.ts (2)
src/api/http.api.ts (1)
httpClient(80-80)src/models/userProject.ts (1)
ApiJoinedProject(16-18)
src/components/admin/mainCard/graphCard/GraphCard.styled.ts (2)
src/pages/admin/adminMain/AdminMain.styled.ts (1)
Container(3-6)src/components/admin/mainCard/MainCard.styled.ts (1)
Container(4-9)
src/components/user/manageProjects/Card.styled.ts (1)
src/components/user/mypage/joinedProject/Project.styled.ts (1)
EvaluateButton(147-162)
src/components/user/notificationLive/NotificationProvider.tsx (2)
src/models/alarm.ts (1)
AlarmLive(28-33)src/context/SseContext.tsx (1)
SseContext(10-14)
src/api/auth.api.ts (2)
src/api/http.api.ts (1)
httpClient(80-80)src/models/auth.ts (1)
ApiGetAllUsers(31-33)
src/hooks/admin/useGetAllReports.ts (2)
src/hooks/queries/user/keys.ts (1)
ReportData(59-61)src/api/report.api.ts (1)
getAllReports(17-25)
src/hooks/admin/useGetAllInquiries.ts (2)
src/hooks/queries/user/keys.ts (1)
ActivityLog(47-51)src/api/activityLog.api.ts (1)
getAllInquiries(30-38)
src/components/user/mypage/joinedProject/Project.styled.ts (1)
src/components/user/manageProjects/Card.styled.ts (1)
EvaluateButton(94-108)
src/api/activityLog.api.ts (2)
src/api/http.api.ts (1)
httpClient(80-80)src/models/activityLog.ts (1)
ApiAllInquiries(20-22)
src/mock/browser.ts (2)
src/mock/projectDetail.ts (1)
reportsAll(14-19)src/mock/userpage.ts (1)
userAll(24-29)
src/api/report.api.ts (2)
src/api/http.api.ts (1)
httpClient(80-80)src/models/report.ts (1)
ApiAllReports(10-12)
src/hooks/admin/useGetAllUsers.ts (2)
src/hooks/queries/user/keys.ts (1)
ReportData(59-61)src/api/auth.api.ts (1)
getAllUsers(109-117)
src/constants/admin/mainItems.ts (1)
src/constants/routes.ts (1)
ADMIN_ROUTE(34-44)
src/models/report.ts (1)
src/models/apiCommon.ts (1)
ApiCommonType(1-4)
src/components/admin/previewComponent/noticePreview/NoticePreview.tsx (1)
src/hooks/user/useGetNotice.ts (1)
useGetNotice(6-17)
src/context/SseContext.tsx (1)
src/models/alarm.ts (1)
AlarmLive(28-33)
src/models/auth.ts (1)
src/models/apiCommon.ts (1)
ApiCommonType(1-4)
src/pages/admin/adminMain/AdminMain.styled.ts (2)
src/components/admin/mainCard/graphCard/GraphCard.styled.ts (1)
Container(3-5)src/components/admin/mainCard/MainCard.styled.ts (2)
Container(4-9)Wrapper(37-37)
src/components/admin/previewComponent/allUserPreview/AllUserPreview.tsx (2)
src/hooks/admin/useGetAllUsers.ts (1)
useGetAllUsers(5-12)src/constants/routes.ts (1)
ADMIN_ROUTE(34-44)
src/components/common/header/Header.tsx (3)
src/context/SseContext.tsx (1)
useNotificationContext(16-16)src/util/formatImgPath.ts (1)
formatImgPath(1-4)src/api/alarm.api.ts (1)
testLiveAlarm(38-49)
src/hooks/user/useNotification.ts (4)
src/hooks/useToast.ts (1)
useToast(4-7)src/context/SseContext.tsx (1)
useNotificationContext(16-16)src/models/alarm.ts (1)
AlarmLive(28-33)src/hooks/queries/user/keys.ts (1)
AlarmList(31-33)
src/components/admin/previewComponent/inquiresPreview/InquiresPreview.tsx (2)
src/hooks/admin/useGetAllInquiries.ts (1)
useGetAllInquiries(5-12)src/constants/routes.ts (1)
ADMIN_ROUTE(34-44)
src/models/activityLog.ts (1)
src/models/apiCommon.ts (1)
ApiCommonType(1-4)
src/pages/admin/adminMain/AdminMain.tsx (1)
src/constants/admin/mainItems.ts (1)
cardList(15-45)
src/components/admin/mainCard/MainCard.styled.ts (6)
src/components/admin/previewComponent/allUserPreview/AllUserPreview.styled.ts (2)
Container(4-7)Wrapper(9-13)src/components/admin/previewComponent/reportsPreview/ReportsPreview.styled.ts (2)
Container(4-7)Wrapper(9-14)src/components/admin/previewComponent/inquiresPreview/InquiresPreview.styled.ts (2)
Container(4-7)Wrapper(9-14)src/pages/admin/adminMain/AdminMain.styled.ts (2)
Container(3-6)Wrapper(8-27)src/components/user/evaluation/EvaluationContent.styled.ts (2)
Container(4-8)MainContent(37-42)src/components/common/header/Notification/Notification.styled.ts (2)
Container(3-10)Line(54-57)
src/components/admin/previewComponent/allUserPreview/AllUserPreview.styled.ts (3)
src/components/admin/previewComponent/reportsPreview/ReportsPreview.styled.ts (5)
Container(4-7)Wrapper(9-14)ContentArea(20-22)Text(61-63)Arrow(65-68)src/components/admin/previewComponent/inquiresPreview/InquiresPreview.styled.ts (4)
Container(4-7)Wrapper(9-14)Text(62-64)Arrow(66-69)src/components/admin/mainCard/MainCard.styled.ts (2)
Container(4-9)Wrapper(37-37)
src/components/admin/previewComponent/inquiresPreview/InquiresPreview.styled.ts (3)
src/components/admin/previewComponent/allUserPreview/AllUserPreview.styled.ts (4)
Container(4-7)Wrapper(9-13)Text(37-39)Arrow(41-44)src/components/admin/previewComponent/reportsPreview/ReportsPreview.styled.ts (7)
Container(4-7)Wrapper(9-14)Category(29-34)StateArea(36-38)Divider(45-50)Text(61-63)Arrow(65-68)src/components/admin/mainCard/MainCard.styled.ts (3)
Container(4-9)Wrapper(37-37)Title(18-20)
src/components/admin/previewComponent/reportsPreview/ReportsPreview.styled.ts (3)
src/components/admin/previewComponent/allUserPreview/AllUserPreview.styled.ts (5)
Container(4-7)Wrapper(9-13)ContentArea(19-21)Text(37-39)Arrow(41-44)src/components/admin/previewComponent/inquiresPreview/InquiresPreview.styled.ts (7)
Container(4-7)Wrapper(9-14)Category(24-27)StateArea(36-38)Divider(45-50)Text(62-64)Arrow(66-69)src/components/admin/mainCard/MainCard.styled.ts (2)
Container(4-9)Wrapper(37-37)
🪛 Biome (1.9.4)
src/components/admin/previewComponent/reportsPreview/ReportsPreview.tsx
[error] 19-19: 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)
src/components/admin/previewComponent/inquiresPreview/InquiresPreview.styled.ts
[error] 40-40: 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)
src/components/admin/previewComponent/reportsPreview/ReportsPreview.styled.ts
[error] 40-40: 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)
🔇 Additional comments (73)
src/mock/auth.ts (1)
4-4: 환경 변수 일관성 확인 및 URL 구성 검증 필요
VITE_APP_API_BASE_URL값에 끝 슬래시(/)가 포함되어 있는지 확인하거나, URL 템플릿에 명시적으로 슬래시를 추가해야 합니다. 그렇지 않으면...BASE_URLauth/login형태가 되어 API 호출이 실패할 수 있습니다.src/components/common/header/Notification/NotificationItem/NotificationItem.styled.ts (1)
4-4: 알림 항목의 패딩이 개선되었습니다.Container의 패딩이
8px 0에서10px로 변경되어 더 균등한 여백이 적용되었습니다.src/models/evaluation.ts (1)
15-15:Details
✅ Verification successful
평가 점수 추적을 위한 인터페이스가 확장되었습니다.
MemberList 인터페이스에
scores: number[]프로퍼티가 추가되어 각 멤버의 평가 점수를 저장할 수 있게 되었습니다.기존 MemberList 인터페이스를 사용하는 코드들이 새로운 scores 프로퍼티와 호환되는지 확인해주세요:
🏁 Script executed:
#!/bin/bash # 설명: MemberList 인터페이스 사용처 확인 및 호환성 검증 # MemberList 인터페이스 사용처 검색 echo "=== MemberList 인터페이스 사용처 ===" rg -A 5 -B 2 "MemberList" --type ts # scores 프로퍼티 사용 패턴 확인 echo "=== scores 프로퍼티 사용 현황 ===" rg "\.scores|scores:" --type tsLength of output: 7610
문제 없음:
scores프로퍼티 호환성 확인 완료MemberList 인터페이스에 추가된
scores: number[]가 모든 사용처(모델, 훅, 컴포넌트)에서 정상적으로 처리되고 있으므로 호환성 문제는 없습니다.src/models/userProject.ts (1)
13-13: 평가 완료 상태를 나타내는 새로운 속성이 잘 추가되었습니다.
isAllEvaluated속성이JoinedProject인터페이스에 명확하게 추가되어 프로젝트의 평가 완료 상태를 추적할 수 있게 되었습니다. 속성명이 직관적이고 boolean 타입이 적절합니다.src/routes/AppRoutes.tsx (1)
1-1: 불필요한 import 제거가 잘 수행되었습니다.사용하지 않는
createBrowserRouter,RouterProvider,ADMIN_ROUTE등의 import가 제거되어 코드가 정리되었습니다. 이는 번들 크기 최적화와 코드 가독성 향상에 도움이 됩니다.Also applies to: 8-8
src/mock/projectSearchFiltering.ts (1)
7-7:Details
❓ Verification inconclusive
환경 변수 변경을 확인해 주세요.
모든 mock 핸들러에서 환경 변수가
VITE_API_BASE_URL에서VITE_APP_API_BASE_URL로 변경되었습니다. 새로운 환경 변수가 올바르게 설정되어 있는지 확인이 필요합니다.다음 스크립트를 실행하여 새 환경 변수 사용이 일관되게 적용되었는지 확인하겠습니다:
Also applies to: 15-15, 24-24
🏁 Script executed:
#!/bin/bash # 새로운 환경 변수 사용을 확인하고 기존 변수가 남아있는지 체크 echo "새로운 환경 변수 VITE_APP_API_BASE_URL 사용 확인:" rg "VITE_APP_API_BASE_URL" --type ts --type tsx -A 2 echo -e "\n기존 환경 변수 VITE_API_BASE_URL 사용이 남아있는지 확인:" rg "VITE_API_BASE_URL" --type ts --type tsx -A 2 echo -e "\n환경 설정 파일에서 환경 변수 정의 확인:" fd -e env | xargs cat 2>/dev/null || echo "환경 설정 파일을 찾을 수 없습니다"Length of output: 428
추가 검증을 위해 아래 스크립트를 실행해 주세요. (타입 필터 없이 전 파일에서 검색하고,
.env*파일도 함께 확인합니다.)
🏁 Script executed:
#!/bin/bash echo "=== 새로운 환경 변수 VITE_APP_API_BASE_URL 사용 위치 ===" rg "VITE_APP_API_BASE_URL" -n || echo "발견된 사용 위치가 없습니다." echo -e "\n=== 기존 환경 변수 VITE_API_BASE_URL 잔여 여부 ===" rg "VITE_API_BASE_URL" -n || echo "발견된 잔여 사용 위치가 없습니다." echo -e "\n=== 프로젝트 루트의 .env* 파일 내용 확인 ===" for file in .env*; do if [ -f "$file" ]; then echo "--- $file ---" sed -n '1,50p' "$file" fi done || echo ".env* 파일이 존재하지 않습니다."Length of output: 2996
환경 변수 변경 적용 확인
코드 전반에서VITE_APP_API_BASE_URL로의 변경이 일관되게 적용되었으며,VITE_API_BASE_URL참조는 모두 제거되었습니다.
- 주요 적용 위치:
src/pages/login/Login.tsx,src/mock/**/*.ts등- 기존 키(
VITE_API_BASE_URL) 잔여 사용 없음별도 환경 설정 파일(.env, CI/CD 설정 등)에
VITE_APP_API_BASE_URL이 정의되어 있는지 최종 확인 부탁드립니다.src/mock/createProject.ts (1)
4-4: 환경 변수 변경이 일관되게 적용되었습니다.다른 mock 파일들과 일관되게
VITE_APP_API_BASE_URL환경 변수를 사용하도록 변경되었습니다. URL 구성도 올바르게 되어 있습니다.src/components/common/header/Notification/Notification.tsx (1)
16-18:Details
✅ Verification successful
새로운 스타일 컴포넌트 사용 확인 필요
S.Container에서S.NoAlarmContainer로 변경한 것은 UI 개선을 위한 좋은 변경으로 보입니다. 하지만 새로운NoAlarmContainer스타일 컴포넌트가 올바르게 정의되어 있는지 확인이 필요합니다.다음 스크립트를 실행하여 새로운 스타일 컴포넌트가 정의되어 있는지 확인해주세요:
🏁 Script executed:
#!/bin/bash # NoAlarmContainer 스타일 컴포넌트 정의 확인 ast-grep --pattern 'export const NoAlarmContainer = $$$'Length of output: 512
NoAlarmContainer 스타일 컴포넌트 정의 확인 완료
src/components/common/header/Notification/Notification.styled.ts에서NoAlarmContainer가 올바르게 정의되어 있으므로 추가 검증이나 수정은 필요하지 않습니다.src/api/mypage.api.ts (1)
58-60:Details
❓ Verification inconclusive
API 엔드포인트 변경 확인
엔드포인트가
/user/project에서/user/joinProject로 변경되었습니다. 이 변경사항이 백엔드 API와 일치하는지, 그리고 이 함수를 사용하는 다른 컴포넌트들이 올바르게 작동하는지 확인이 필요합니다.다음 스크립트를 실행하여 이 함수를 사용하는 다른 코드들을 확인해주세요:
🏁 Script executed:
#!/bin/bash # getMyJoinedProjectList 함수 사용처 확인 rg -A 3 "getMyJoinedProjectList"Length of output: 665
API 엔드포인트 변경 확인 및 사용처 검증 필요
- 변경된 엔드포인트(
/user/joinProject)는src/api/mypage.api.ts(58–60행)에 적용되었습니다.- 이 함수는
src/hooks/user/useMyInfo.ts에서만 호출되고 있으며, 코드베이스 내에 더 이상/user/project참조는 없습니다.백엔드 API 스펙 문서와 일치하는지, 실제 서버에서
/user/joinProject경로가 제공되는지, 그리고 관련 테스트가 모두 업데이트되었는지 확인해주세요.src/hooks/admin/useGetAllInquiries.ts (1)
1-12: 훅 구현이 올바르게 되어 있습니다!React Query를 사용한 표준적인 패턴을 잘 따르고 있으며, API 함수와 쿼리 키가 적절히 연결되어 있습니다.
src/mock/projectLists.ts (1)
6-6: 환경변수 표준화가 올바르게 적용되었습니다.
VITE_API_BASE_URL에서VITE_APP_API_BASE_URL로의 변경이 일관되게 적용되어 있습니다.Also applies to: 15-15
src/components/user/mypage/joinedProject/Project.styled.ts (1)
147-152: 평가 완료 상태 표시 기능이 올바르게 구현되었습니다.
$isCompletedprop을 통한 조건부 스타일링이 적절하게 적용되어 있으며, 다른 관련 컴포넌트와 일관된 패턴을 따르고 있습니다.src/pages/user/evaluation/Evaluation.tsx (1)
35-35: prop 전달이 올바르게 구현되었습니다.
isAllEvaluated상태가 EvaluationContent 컴포넌트에 적절히 전달되고 있습니다. 평가 완료 상태에 따른 UI 제어 로직이 잘 구현되었습니다.src/hooks/queries/user/keys.ts (2)
50-50: 쿼리 키 추가가 적절히 구현되었습니다.
allInquiries키가 기존ActivityLog객체의 명명 규칙을 잘 따르고 있습니다. 관리자 기능을 위한 쿼리 키 확장이 일관성 있게 구현되었습니다.
59-61: 새로운 쿼리 키 객체 구조가 일관성 있게 구현되었습니다.
ReportData객체와allReports키가 기존 패턴을 잘 따르고 있습니다. 신고 관련 데이터를 위한 별도 네임스페이스 구성이 적절합니다.src/api/auth.api.ts (2)
1-6: import 구문이 적절히 업데이트되었습니다.
ApiGetAllUsers타입이 올바르게 임포트되었으며, 기존 임포트 구조와 일관성을 유지하고 있습니다.
109-117: API 함수가 일관된 패턴으로 잘 구현되었습니다.
getAllUsers함수가 기존 API 함수들과 동일한 패턴을 따라 구현되었습니다:
- 적절한 타입 지정
- 일관된 에러 핸들링
- 올바른 응답 데이터 반환 (
response.data.data)API 응답 구조 처리도 올바르게 되어 있습니다.
src/mock/browser.ts (1)
10-10: 관리자 기능을 위한 Mock 핸들러 추가가 적절히 구현되었습니다.새로운 mock 엔드포인트들(
reportsAll,userAll)이 올바르게 import되고 handlers 배열에 추가되어 관리자 대시보드 기능을 지원합니다.Also applies to: 19-23, 58-59
src/api/activityLog.api.ts (2)
1-5: 타입 import가 올바르게 추가되었습니다.
ApiAllInquiries타입이 적절히 import되어 새로운 API 함수에서 사용됩니다.
30-38: 전체 문의 조회 API 함수가 적절히 구현되었습니다.기존 함수들과 일관된 패턴을 사용하고 있으며, 적절한 에러 핸들링과 타입 지정이 포함되어 있습니다.
src/api/report.api.ts (1)
1-1: 타입 import가 올바르게 추가되었습니다.
ApiAllReports타입이 적절히 import되어 새로운 API 함수에서 사용됩니다.src/components/user/evaluation/EvaluationContent.styled.ts (1)
180-185: CompletedButton 스타일 변경사항을 확인해주세요.
cursor와hover스타일이 조건부에서 고정값으로 변경되었습니다. 이 변경이 완료된 평가 조회 기능과 관련된 의도된 변경인지 확인이 필요합니다.변경사항:
cursor가 항상pointer로 고정hover배경색이 항상#e0e0e0으로 고정이러한 변경으로 인해 버튼의 활성/비활성 상태에 대한 시각적 피드백이 줄어들 수 있습니다.
src/components/user/notificationLive/NotificationProvider.tsx (1)
1-16: 깔끔한 컨텍스트 프로바이더 구현입니다.React 컨텍스트 패턴을 올바르게 구현했으며, 알림 신호 데이터 상태 관리가 잘 구조화되어 있습니다. TypeScript 타입 지정도 적절하고 함수들이 명확하게 정의되어 있습니다.
src/components/common/header/Notification/Notification.styled.ts (1)
41-45: 레이아웃 개선을 위한 적절한 스타일 컴포넌트 추가입니다.
NoAlarmContainer는 알림이 없는 상태의 UI를 위한 전용 스타일 컴포넌트로, 중앙 정렬이 명확하게 구현되어 있습니다. 기존Container에서 정렬 속성을 제거한 것과 함께 더 유연한 레이아웃 구조를 제공합니다.src/mock/projectDetail.ts (2)
14-19: 새로운 신고 목록 mock 핸들러가 올바르게 구현되었습니다.
reportsAll핸들러가 기존 패턴을 따라 잘 구현되어 있으며, 관리자 대시보드의 신고 프리뷰 기능을 지원하는 데 필요한 mock 데이터를 적절히 제공합니다.
6-6:Details
✅ Verification successful
환경 변수 변경의 일관성을 확인해주세요.
VITE_API_BASE_URL에서VITE_APP_API_BASE_URL로 변경되었는데, 다른 모든 mock 파일들에서도 동일한 환경 변수를 사용하는지 확인이 필요합니다.다음 스크립트로 환경 변수 사용의 일관성을 확인해주세요:
🏁 Script executed:
#!/bin/bash # 설명: 모든 mock 파일에서 환경 변수 사용 확인 # 모든 mock 파일에서 VITE_API_BASE_URL 사용 확인 echo "=== VITE_API_BASE_URL 사용 파일들 ===" rg "VITE_API_BASE_URL" src/mock/ echo -e "\n=== VITE_APP_API_BASE_URL 사용 파일들 ===" rg "VITE_APP_API_BASE_URL" src/mock/Length of output: 2279
환경 변수 사용 일관성 확인 완료
모든src/mock/파일에서VITE_APP_API_BASE_URL이 일관되게 사용되고 있음을 확인했습니다. 추가 수정이 필요 없습니다.src/components/user/manageProjects/Card.tsx (1)
25-28: 평가 완료 상태 처리가 잘 구현되었습니다!평가 버튼의 상태 관리와 조건부 텍스트 렌더링이 일관성 있게 구현되어 있습니다.
stateprop을 통한 네비게이션 상태 전달과$isCompletedprop을 통한 스타일링 조건이 적절합니다.src/components/user/mypage/joinedProject/Project.tsx (1)
46-49: 컴포넌트 간 일관성이 잘 유지되었습니다!Card 컴포넌트와 동일한 패턴으로 평가 완료 상태를 처리하여 전체 애플리케이션에서 일관된 사용자 경험을 제공합니다. 코드 재사용성과 유지보수성 측면에서 우수한 구현입니다.
src/mock/applicant.ts (1)
7-7: 환경 변수 네이밍 표준화가 잘 적용되었습니다!모든 mock 엔드포인트에서
VITE_API_BASE_URL에서VITE_APP_API_BASE_URL로 일관되게 변경되어 프로젝트 전반의 환경 변수 네이밍이 표준화되었습니다. 이러한 체계적인 리팩토링은 코드 일관성을 크게 향상시킵니다.Also applies to: 16-18, 27-29, 38-38, 50-50
src/mock/mockReports.json (1)
12-12: 이미지 URL 검증 필요모든 이미지 URL이
https://example.com도메인을 사용하고 있습니다. 개발 중이라면 문제없지만, 실제 테스트를 위해서는 유효한 이미지 URL이나 플레이스홀더 이미지 서비스 사용을 고려해보세요.Also applies to: 24-24, 36-36, 48-48, 60-60, 73-73, 85-85, 98-98, 110-110, 122-122
src/models/activityLog.ts (3)
4-4: id 필드 추가 승인기존
MyInquiries인터페이스에id필드를 추가한 것은 좋은 변경사항입니다. 데이터 식별과 관리를 위해 필수적인 필드입니다.
15-18: 인터페이스 확장 설계 우수
AllInquiries가MyInquiries를 확장하여user와createdAt필드를 추가한 설계가 매우 적절합니다. 코드 재사용성과 일관성을 잘 유지하고 있습니다.
20-22: API 응답 타입 정의 일관성 우수
ApiAllInquiries인터페이스가 다른 API 응답 타입들과 동일한 패턴을 따르고 있어 일관성이 좋습니다.src/components/admin/mainCard/MainCard.tsx (2)
5-9: 인터페이스 정의 우수
MainCardProps인터페이스가 명확하고 적절하게 정의되어 있습니다.moreLink를 선택적 속성으로 만든 것도 좋은 설계입니다.
16-21: 조건부 렌더링 패턴 우수
moreLink가 있을 때만 전체 보기 링크를 렌더링하는 패턴이 깔끔하고 효율적입니다.src/pages/admin/adminMain/AdminMain.tsx (2)
6-24: 컴포넌트 구조가 잘 설계되었습니다.MainCard 컴포넌트와 cardList 설정을 활용한 동적 렌더링 구조가 좋습니다. 확장성과 재사용성이 뛰어난 설계입니다.
10-20: 우수한 동적 렌더링 패턴
cardList를 활용한 동적 카드 렌더링 접근 방식이 매우 훌륭합니다. 설정을 중앙화하여 유지보수성을 높였고, 특정 카드(방문자 현황)에 대한 조건부 래퍼 적용도 깔끔하게 처리되었습니다.src/context/SseContext.tsx (5)
4-8: 인터페이스 정의가 잘 구성되었습니다.SSE 컨텍스트의 타입 정의가 명확하고 적절합니다. AlarmLive 타입 사용과 함수 시그니처가 일관성 있게 작성되었습니다.
10-14: 컨텍스트 초기화가 적절합니다.기본값 설정이 안전하고 타입 안전성을 보장합니다. null 초기값과 no-op 함수들이 적절하게 설정되었습니다.
4-8: 잘 정의된 컨텍스트 인터페이스
SseContextProps인터페이스가 명확하고 타입 안전하게 정의되었습니다.AlarmLive타입을 활용하여 신호 데이터의 구조를 보장하고, 명확한 함수 시그니처를 제공합니다.
10-14: 표준적인 컨텍스트 초기화기본값으로
null상태와 no-op 함수들을 제공하는 것이 적절합니다. 이는 컨텍스트가 Provider 없이 사용될 때의 안전한 fallback을 제공합니다.
16-16: 유용한 커스텀 훅 제공
useNotificationContext커스텀 훅은 컨텍스트 사용을 간소화하고 타입 안전성을 보장하는 좋은 패턴입니다.src/models/report.ts (1)
10-12: 인터페이스 확장구조 적절함
ApiAllReports가 공통 응답 타입(ApiCommonType)을 확장하고data속성에AllReports[]을 지정한 구조는 명확합니다.src/mock/userpage.ts (2)
24-29:Details
✅ Verification successful
새로운 mock 핸들러 구현 확인
userAllmock 핸들러가 올바르게 구현되었습니다.mockUsers데이터가 예상되는 구조와 일치하는지 확인이 필요합니다.다음 스크립트를 실행하여
mockUsers.json파일의 구조를 확인하세요:
🏁 Script executed:
#!/bin/bash # mockUsers.json 파일 구조 확인 if [ -f "src/mock/mockUsers.json" ]; then echo "=== mockUsers.json 구조 확인 ===" head -20 src/mock/mockUsers.json else echo "mockUsers.json 파일이 존재하지 않습니다." fiLength of output: 512
mockUsers.json 구조 검증 완료
src/mock/mockUsers.json파일이 최상위에success,message,data필드를 포함하며,data내부에 사용자 객체 배열이 올바르게 정의되어 있습니다. 이 구조는userAllmock 핸들러의 응답 형태와 일치합니다.
👍
7-7:Details
✅ Verification successful
환경 변수 변경 확인
환경 변수가
VITE_API_BASE_URL에서VITE_APP_API_BASE_URL로 변경되었습니다. 프로젝트 전체에서 일관되게 변경되었는지 확인이 필요합니다.다음 스크립트를 실행하여 이전 환경 변수가 다른 곳에서 사용되고 있는지 확인하세요:
Also applies to: 16-16
🏁 Script executed:
#!/bin/bash # 기존 환경 변수 사용 여부 확인 echo "=== 기존 VITE_API_BASE_URL 사용 확인 ===" rg "VITE_API_BASE_URL" --type ts --type tsx --type js echo "=== 새로운 VITE_APP_API_BASE_URL 사용 확인 ===" rg "VITE_APP_API_BASE_URL" --type ts --type tsx --type jsLength of output: 335
다음과 같이 파일 확장자 글로브를 지정해 재검색해보세요.
🏁 Script executed:
#!/bin/bash echo "=== 기존 VITE_API_BASE_URL 사용 확인 ===" rg "VITE_API_BASE_URL" -g "*.js" -g "*.ts" -g "*.tsx" || echo "없음" echo "=== 새로운 VITE_APP_API_BASE_URL 사용 확인 ===" rg "VITE_APP_API_BASE_URL" -g "*.js" -g "*.ts" -g "*.tsx" || echo "없음"Length of output: 2765
환경 변수 일관성 검사 완료
프로젝트 전반에서
VITE_API_BASE_URL은 더 이상 사용되지 않으며, 모두VITE_APP_API_BASE_URL로 일관되게 업데이트되었습니다. 추가 조치가 필요하지 않습니다.src/hooks/user/useNotification.ts (1)
44-60: 에러 처리 개선됨JSON 파싱 실패와 SSE 연결 오류에 대한 명시적인 에러 처리가 추가되어 개선되었습니다. 컨텍스트 기반 상태 관리로 변경된 것도 좋은 개선사항입니다.
src/components/admin/mainCard/MainCard.styled.ts (1)
4-9: 일관된 스타일링 구조
Container스타일이 다른 preview 컴포넌트들과 일관된 구조를 가지고 있어 좋습니다. 테마 기반 border-radius 사용도 적절합니다.src/components/common/header/Header.tsx (2)
68-71: 알림 상태 표시 로직이 적절합니다.
signalData의 존재 여부에 따라 알림 점을 표시하고clearSignal을 호출하는 로직이 잘 구현되어 있습니다.
73-73: DropDown 컴포넌트 속성이 명확합니다.
comment={false}속성이 명시적으로 설정되어 있어 의도가 명확합니다.src/components/user/evaluation/EvaluationContent.tsx (2)
56-65: 제출 버튼 조건부 렌더링이 적절합니다.완료된 멤버를 보고 있을 때 제출 버튼을 숨기는 로직이 올바르게 구현되어 있습니다.
110-121: 완료된 멤버 버튼 구현이 잘 되어 있습니다.
handleCompletedMember핸들러에 필요한 모든 매개변수(userId, nickname, scores)를 올바르게 전달하고 있습니다.src/hooks/user/evaluationHooks/useEvaluationStep.ts (4)
20-24: 완료된 멤버 상태 정의가 명확합니다.완료된 멤버의 필수 정보(userId, nickname, scores)를 포함한 타입 정의가 적절합니다.
52-54: 상태 보호 로직이 올바르게 구현되어 있습니다.완료된 멤버를 보고 있을 때 추가 입력이나 진행을 방지하는 early return 로직이 적절합니다.
Also applies to: 72-74
96-102: 핸들러 함수가 간결하고 명확합니다.
handleCompletedMember함수가 필요한 매개변수만 받아서 상태를 설정하는 단순하고 명확한 구현입니다.
104-111: 메모이제이션 로직이 효율적입니다.
completedMember가 있을 때 해당 점수를 반환하고, 없을 때는 현재 진행 상황의 점수를 반환하는 로직이 잘 구현되어 있습니다. 의존성 배열도 정확합니다.src/components/admin/previewComponent/allUserPreview/AllUserPreview.styled.ts (1)
1-44: 스타일 컴포넌트 구현이 전반적으로 좋습니다.컴포넌트 구조와 네이밍이 명확하고, flexbox 레이아웃과 타이포그래피 설정이 적절합니다.
src/components/admin/previewComponent/reportsPreview/ReportsPreview.styled.ts (7)
4-7: Container 및 Wrapper 스타일 일관성 확인
다른 preview 컴포넌트와 동일하게 flex 기반 레이아웃이 적용되어 있으며, 적절히 구성되었습니다.Also applies to: 9-14
16-18: ReportArea 및 ContentArea 구성 적절
링크 영역과 내부 여백(margin-left) 설정이 명확하고 의도에 부합합니다.Also applies to: 20-22
29-34: Category 컴포넌트 스타일 검토 완료
폰트 크기 및 텍스트 줄임표 처리(white-space,overflow,text-overflow)가 요구사항에 부합합니다.
36-38: StateArea 레이아웃 적절
flex 레이아웃으로 상태 표시 요소를 가로로 배치하기에 적합합니다.
52-55: IsImposed 컴포넌트 상태 기반 색상 처리 적절
조건부 색상 분기 로직이 직관적이며 가독성도 좋습니다.
57-59: MoveToReportsArea 및 Text 컴포넌트 검토 완료
링크 래퍼와 텍스트 컴포넌트가 의도대로 잘 정의되어 있습니다.Also applies to: 61-63
65-68: Arrow 아이콘 스타일 일관성 확인
크기가 다른 preview 컴포넌트와 일치하며 적절하게 설정되었습니다.src/components/admin/previewComponent/inquiresPreview/InquiresPreview.styled.ts (7)
4-7: Container 및 Wrapper 스타일 일관성 확인
flex 기반 컬럼 및 행 레이아웃이 명확하고 다른 preview 스타일과 잘 맞습니다.Also applies to: 9-14
16-19: Content 및 Inquiry(Link) 구성 검토 완료
내부 flex 레이아웃과margin-left설정이 적절하며, 클릭 가능한 영역도 명확합니다.Also applies to: 20-23
29-34: Title 컴포넌트 스타일 검토 완료
폰트 크기 및 줄임표 처리(white-space,overflow,text-overflow)가 의도에 맞습니다.
36-38: StateArea 레이아웃 적절
flex 레이아웃으로 상태 요소 배치에 문제가 없습니다.
52-55: InquiryState 컴포넌트 상태 기반 색상 처리 적절
완료 여부에 따른 색상 분기 로직이 명확하며 가독성도 우수합니다.
57-60: MoveToInquiryArea 및 Text 컴포넌트 검토 완료
링크 래퍼와 텍스트 스타일이 의도에 맞게 구성되었습니다.Also applies to: 62-64
66-69: Arrow 아이콘 스타일 일관성 확인
크기 설정이 다른 preview 컴포넌트와 일치하며 적절합니다.src/components/admin/previewComponent/allUserPreview/AllUserPreview.tsx (1)
11-15: 미리보기 목록 로직 승인사용자가 6명을 초과할 때 처음 4명만 표시하고, 그렇지 않으면 전체를 표시하는 로직이 명확하고 적절합니다. 옵셔널 체이닝과 빈 배열 fallback 처리도 잘 되어 있습니다.
src/components/admin/previewComponent/reportsPreview/ReportsPreview.tsx (2)
10-14: 미리보기 목록 로직 승인AllUserPreview와 일관된 미리보기 로직을 사용하고 있어 좋습니다. 6개 초과시 4개만 표시하는 패턴이 통일되어 있고, 안전한 null 체크도 잘 구현되어 있습니다.
28-30: 조건부 상태 표시 로직 승인
IsImposed불린 값에 따라 "검토 완료"/"검토 미완료"를 표시하는 로직이 명확하고 직관적입니다. 스타일드 컴포넌트의$isImposedprop 전달도 적절합니다.
| @@ -1,4 +1,4 @@ | |||
| import * as S from './AdminInquires.styled'; | |||
| import * as S from './AdminInquiries.styled'; | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
컴포넌트 이름 오타 수정 제안
함수명이 AdminInquires로 작성되어 있는데, 파일명 및 Styled 파일(AdminInquiries.styled)과 일치시키려면 함수명도 AdminInquiries로 변경하는 것이 좋습니다.
🤖 Prompt for AI Agents
In src/pages/admin/adminInquiries/AdminInquiries.tsx at line 1, the component
function name is misspelled as AdminInquires. Rename the function to
AdminInquiries to match the file name and the styled components import, ensuring
consistency across the codebase.
|
|
||
| export const getMyProjectLists = async () => { | ||
| const response = await httpClient.get<ApiManagedProjects>(`/project/my`); | ||
| const response = await httpClient.get<ApiManagedProjects>(`/user/project`); |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
API 엔드포인트 변경 사항을 검증해주세요.
엔드포인트가 /project/my에서 /user/project로 변경되었습니다. 이 변경이 기존 기능에 미치는 영향을 확인해주세요.
다음 스크립트를 실행하여 이 함수의 사용처를 확인하고 API 변경으로 인한 영향을 검증해보세요:
🏁 Script executed:
#!/bin/bash
# 설명: getMyProjectLists 함수 사용처 확인 및 API 엔드포인트 변경 영향 검증
# getMyProjectLists 함수 사용처 검색
echo "=== getMyProjectLists 함수 사용처 ==="
rg -A 3 "getMyProjectLists"
# 관련 API 엔드포인트 패턴 확인
echo "=== 유사한 API 엔드포인트 패턴 ==="
rg "/user/project|/project/my" --type tsLength of output: 3567
API 엔드포인트 변경 영향 없음 확인 및 함수명 일관성 제안
src/api/myProjectList.api.ts(8행)의 엔드포인트가/project/my에서/user/project로 변경되었으나,- 코드베이스 전체에서
/project/my호출은 더 이상 존재하지 않습니다. getMyProjectLists함수는src/hooks/user/useManagedProjects.ts에서만 사용되며, API 변경으로 인한 기능적 오류는 없습니다.
- 코드베이스 전체에서
- 의미적 일관성을 위해 함수명을 실제 엔드포인트와 매칭되는
getUserProjects또는getManagedProjects등으로 변경하는 것을 권장드립니다.
🤖 Prompt for AI Agents
In src/api/myProjectList.api.ts at line 8, the API endpoint was changed from
/project/my to /user/project, and this change has no negative impact on
functionality since /project/my is no longer used anywhere in the codebase. To
improve semantic clarity and maintain consistency with the new endpoint, rename
the function from getMyProjectLists to a name like getUserProjects or
getManagedProjects that better reflects the updated API path.
src/hooks/admin/useGetAllUsers.ts
Outdated
|
|
||
| export const useGetAllUsers = () => { | ||
| const { data: allUserData, isLoading } = useQuery({ | ||
| queryKey: [ReportData.allReports], |
There was a problem hiding this comment.
쿼리 키가 잘못되었습니다.
사용자 데이터를 가져오는 훅인데 ReportData.allReports 쿼리 키를 사용하고 있습니다. 이는 데이터 타입과 쿼리 키가 일치하지 않는 문제를 일으킬 수 있습니다.
다음과 같이 수정해주세요:
-import { ReportData } from '../queries/user/keys';
+import { UserData } from '../queries/user/keys';그리고 쿼리 키도 수정해주세요:
- queryKey: [ReportData.allReports],
+ queryKey: [UserData.allUsers], // 또는 적절한 사용자 관련 쿼리 키📝 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.
| queryKey: [ReportData.allReports], | |
| // src/hooks/admin/useGetAllUsers.ts | |
| import { useQuery } from '@tanstack/react-query'; | |
| // - import { ReportData } from '../queries/user/keys'; | |
| import { UserData } from '../queries/user/keys'; | |
| import { getAllUsers } from '../api/user'; | |
| export function useGetAllUsers() { | |
| return useQuery({ | |
| // - queryKey: [ReportData.allReports], | |
| queryKey: [UserData.allUsers], | |
| queryFn: getAllUsers, | |
| }); | |
| } |
🤖 Prompt for AI Agents
In src/hooks/admin/useGetAllUsers.ts at line 7, the queryKey is incorrectly set
to ReportData.allReports, which does not match the user data being fetched.
Change the queryKey to a more appropriate key that reflects user data, such as
UserData.allUsers or a similar identifier that aligns with the data type
returned by this hook.
| const NoticePreview = () => { | ||
| const { noticeData } = useGetNotice({ keyword: '', page: 1 }); | ||
|
|
||
| return ( | ||
| <S.Container> | ||
| {noticeData?.notices.map((notice) => ( | ||
| <S.Wrapper key={notice.id}> | ||
| <S.Dot src={line} /> | ||
| <S.NoticeTitle>{notice.title}</S.NoticeTitle> | ||
| </S.Wrapper> | ||
| ))} | ||
| </S.Container> | ||
| ); |
There was a problem hiding this comment.
에러 처리와 로딩 상태 관리가 필요합니다.
컴포넌트에 다음과 같은 중요한 문제들이 있습니다:
useGetNotice훅의isLoading상태를 사용하지 않음- API 호출 실패에 대한 에러 처리 없음
noticeData와noticeData.notices에 대한 null 체크 없음- 공지사항이 없을 때의 빈 상태 처리 없음
다음 diff를 적용해서 안전한 렌더링과 상태 처리를 추가해주세요:
const NoticePreview = () => {
- const { noticeData } = useGetNotice({ keyword: '', page: 1 });
+ const { noticeData, isLoading } = useGetNotice({ keyword: '', page: 1 });
+
+ if (isLoading) {
+ return <S.Container>로딩 중...</S.Container>;
+ }
+
+ if (!noticeData?.notices || noticeData.notices.length === 0) {
+ return <S.Container>공지사항이 없습니다.</S.Container>;
+ }
return (
<S.Container>
- {noticeData?.notices.map((notice) => (
+ {noticeData.notices.map((notice) => (
<S.Wrapper key={notice.id}>
<S.Dot src={line} />
<S.NoticeTitle>{notice.title}</S.NoticeTitle>
</S.Wrapper>
))}
</S.Container>
);
};📝 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.
| const NoticePreview = () => { | |
| const { noticeData } = useGetNotice({ keyword: '', page: 1 }); | |
| return ( | |
| <S.Container> | |
| {noticeData?.notices.map((notice) => ( | |
| <S.Wrapper key={notice.id}> | |
| <S.Dot src={line} /> | |
| <S.NoticeTitle>{notice.title}</S.NoticeTitle> | |
| </S.Wrapper> | |
| ))} | |
| </S.Container> | |
| ); | |
| const NoticePreview = () => { | |
| const { noticeData, isLoading } = useGetNotice({ keyword: '', page: 1 }); | |
| if (isLoading) { | |
| return <S.Container>로딩 중...</S.Container>; | |
| } | |
| if (!noticeData?.notices || noticeData.notices.length === 0) { | |
| return <S.Container>공지사항이 없습니다.</S.Container>; | |
| } | |
| return ( | |
| <S.Container> | |
| {noticeData.notices.map((notice) => ( | |
| <S.Wrapper key={notice.id}> | |
| <S.Dot src={line} /> | |
| <S.NoticeTitle>{notice.title}</S.NoticeTitle> | |
| </S.Wrapper> | |
| ))} | |
| </S.Container> | |
| ); | |
| }; |
🤖 Prompt for AI Agents
In src/components/admin/previewComponent/noticePreview/NoticePreview.tsx around
lines 6 to 18, the component lacks handling for loading state, error state, and
null checks for noticeData and noticeData.notices, as well as no empty state
rendering. Update the component to use the isLoading and error states from
useGetNotice, add conditional rendering to show a loading indicator when
loading, an error message if there is an error, and a fallback UI when there are
no notices. Also, ensure noticeData and noticeData.notices are safely checked
before mapping to avoid runtime errors.
| "name": "Charlie Park", | ||
| "user": { | ||
| "id": 204, | ||
| "nickname": "daisy", |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Mock 데이터의 일관성 문제를 수정해주세요.
사용자 mock 데이터에서 몇 가지 불일치가 발견되었습니다:
- Charlie Park (line 33): nickname이 "daisy"가 아닌 "charlie"여야 합니다
- Frank Han (line 66): nickname이 "grace"가 아닌 "frank"여야 합니다
- 중복된 nickname: "daisy"와 "grace"가 여러 사용자에게 할당되어 있습니다
다음과 같이 수정하는 것을 권장합니다:
"user": {
"id": 204,
- "nickname": "daisy",
+ "nickname": "charlie",
"img": ""
}, "user": {
"id": 208,
- "nickname": "grace",
+ "nickname": "frank",
"img": ""
},이러한 일관성 있는 데이터는 개발과 테스트 과정에서 혼란을 방지하고 더 나은 사용자 경험을 제공합니다.
Also applies to: 44-44, 66-66, 77-77
🤖 Prompt for AI Agents
In src/mock/mockUsers.json at lines 33, 44, 66, and 77, there are
inconsistencies in user nicknames causing duplicates and mismatches. Update the
nickname for Charlie Park at line 33 to "charlie", for Frank Han at line 66 to
"frank", and ensure that nicknames "daisy" and "grace" are unique across all
users by correcting any duplicates. This will maintain consistent and unique
mock user data.
src/components/admin/previewComponent/reportsPreview/ReportsPreview.styled.ts
Show resolved
Hide resolved
src/components/admin/previewComponent/inquiresPreview/InquiresPreview.styled.ts
Outdated
Show resolved
Hide resolved
src/components/admin/previewComponent/inquiresPreview/InquiresPreview.styled.ts
Show resolved
Hide resolved
src/components/admin/previewComponent/inquiresPreview/InquiresPreview.styled.ts
Show resolved
Hide resolved
| import arrow_right from '../../../../assets/ArrowRight.svg'; | ||
|
|
||
| const AllUserPreview = () => { | ||
| const { allUserData, isLoading } = useGetAllUsers(); |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
쿼리 키 불일치 문제 확인 필요
useGetAllUsers 훅에서 잘못된 쿼리 키를 사용하고 있는 것으로 보입니다. 관련 코드 스니펫(src/hooks/admin/useGetAllUsers.ts)에서 ReportData.allReports를 쿼리 키로 사용하고 있는데, 이는 사용자 데이터를 가져오는 훅에서는 적절하지 않습니다.
다음 스크립트를 실행하여 쿼리 키가 올바른지 확인해주세요:
🏁 Script executed:
#!/bin/bash
# useGetAllUsers 훅의 쿼리 키 확인
rg -A 5 -B 5 "queryKey.*ReportData" src/hooks/admin/useGetAllUsers.ts
# 올바른 쿼리 키 상수 확인
rg "allUsers\|AllUsers\|ALL_USERS" src/constants/Length of output: 437
다음 스크립트를 실행하여 src/queries/user/keys.ts에 정의된 쿼리 키들을 확인해주세요:
🏁 Script executed:
#!/bin/bash
# src/queries/user/keys.ts의 쿼리 키 정의 확인
rg -n "export const" src/queries/user/keys.tsLength of output: 112
다음 스크립트를 실행하여 쿼리 키가 정의된 파일을 찾아주세요:
🏁 Script executed:
#!/bin/bash
# 쿼리 키 정의가 담긴 keys 파일 위치 확인
find src -type f -iname "*keys.ts"Length of output: 67
다음 스크립트를 실행하여 src/hooks/queries/user/keys.ts의 전체 내용을 확인해주세요:
🏁 Script executed:
#!/bin/bash
# user 쿼리 키 정의 확인
sed -n '1,200p' src/hooks/queries/user/keys.tsLength of output: 1375
useGetAllUsers 훅의 쿼리 키 수정 필요
useGetAllUsers 훅에서 현재 리포트 전용 키인 ReportData.allReports를 사용하고 있습니다.
사용자 목록을 캐싱/식별하기 위해서는 별도의 사용자 전용 쿼리 키를 정의하고 사용해야 합니다.
조치 사항:
src/hooks/queries/user/keys.ts에 사용자 목록용 키를 추가
예)export const userListKey = { allUsers: ['allUsers'], } as const;
src/hooks/admin/useGetAllUsers.ts에서 쿼리 키를userListKey.allUsers로 변경
변경 예시:
- queryKey: [ReportData.allReports],
+ queryKey: [userListKey.allUsers],– 대상 파일:
• src/hooks/admin/useGetAllUsers.ts
• src/hooks/queries/user/keys.ts
🤖 Prompt for AI Agents
In src/components/admin/previewComponent/allUserPreview/AllUserPreview.tsx at
line 9, the useGetAllUsers hook is using an incorrect query key intended for
report data. To fix this, define a proper user-specific query key in
src/hooks/queries/user/keys.ts, for example, export a constant userListKey with
allUsers as the key. Then update src/hooks/admin/useGetAllUsers.ts to use this
new userListKey.allUsers instead of ReportData.allReports to correctly cache and
identify user data queries.
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)
src/api/alarm.api.ts(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: accessibility-test
🔇 Additional comments (1)
src/api/alarm.api.ts (1)
2-2: 인증 스토어 임포트 추가 승인인증 토큰 확인을 위한
useAuthStore임포트가 적절히 추가되었습니다.
| const { accessToken } = useAuthStore.getState(); | ||
| if (accessToken) { | ||
| try { | ||
| const response = await httpClient.get<ApiAlarmList>( | ||
| `/user/send-alarm?alarmFilter=0` | ||
| ); | ||
|
|
||
| return response; | ||
| } catch (e) { | ||
| console.error(e); | ||
| throw e; | ||
| return response; | ||
| } catch (e) { | ||
| console.error(e); | ||
| throw e; | ||
| } | ||
| } else { | ||
| return; | ||
| } | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
함수의 반환 타입 일관성 개선 필요
인증 토큰 확인 로직 추가는 좋은 보안 관행입니다. 하지만 몇 가지 개선이 필요합니다:
- 반환 타입 불일치: 토큰이 있을 때는 response 객체를, 없을 때는
undefined를 반환합니다. - 함수명 개선:
testLiveAlarm이라는 이름이 테스트용으로 보이지만 실제 프로덕션 코드에서 사용되고 있습니다.
다음과 같이 개선을 권장합니다:
-export const testLiveAlarm = async () => {
+export const sendUserAlarm = async () => {
const { accessToken } = useAuthStore.getState();
- if (accessToken) {
+ if (!accessToken) {
+ throw new Error('인증 토큰이 없습니다.');
+ }
+
- try {
- const response = await httpClient.get<ApiAlarmList>(
- `/user/send-alarm?alarmFilter=0`
- );
+ try {
+ const response = await httpClient.get<ApiAlarmList>(
+ `/user/send-alarm?alarmFilter=0`
+ );
- return response;
- } catch (e) {
- console.error(e);
- throw e;
- }
- } else {
- return;
+ return response;
+ } catch (e) {
+ console.error(e);
+ throw e;
}
};📝 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.
| const { accessToken } = useAuthStore.getState(); | |
| if (accessToken) { | |
| try { | |
| const response = await httpClient.get<ApiAlarmList>( | |
| `/user/send-alarm?alarmFilter=0` | |
| ); | |
| return response; | |
| } catch (e) { | |
| console.error(e); | |
| throw e; | |
| return response; | |
| } catch (e) { | |
| console.error(e); | |
| throw e; | |
| } | |
| } else { | |
| return; | |
| } | |
| }; | |
| export const sendUserAlarm = async () => { | |
| const { accessToken } = useAuthStore.getState(); | |
| if (!accessToken) { | |
| throw new Error('인증 토큰이 없습니다.'); | |
| } | |
| try { | |
| const response = await httpClient.get<ApiAlarmList>( | |
| `/user/send-alarm?alarmFilter=0` | |
| ); | |
| return response; | |
| } catch (e) { | |
| console.error(e); | |
| throw e; | |
| } | |
| }; |
🤖 Prompt for AI Agents
In src/api/alarm.api.ts between lines 40 and 55, the function returns a response
object when the access token exists but returns undefined otherwise, causing
inconsistent return types. To fix this, ensure the function always returns a
consistent type, such as a Promise that resolves to the response or null/empty
result when no token is present. Also, rename the function from testLiveAlarm to
a more descriptive name reflecting its purpose in production, like
fetchUserAlarms or getUserAlarms.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (4)
src/components/admin/previewComponent/reportsPreview/ReportsPreview.tsx (1)
18-19: key prop 문제 해결 확인이전 리뷰에서 지적된 key prop 누락 문제가
key={report.id}로 올바르게 해결되었습니다.src/components/admin/previewComponent/allUserPreview/AllUserPreview.tsx (1)
12-14: 로딩 상태 처리 개선 확인이전 리뷰에서 지적된 로딩 상태 처리가 LoadingSpinner를 사용하여 올바르게 개선되었습니다.
src/components/admin/previewComponent/inquiresPreview/InquiresPreview.tsx (1)
11-13: 로딩 상태 처리 개선 확인이전 리뷰에서 지적된 로딩 상태 처리가 LoadingSpinner를 사용하여 올바르게 개선되었습니다.
src/components/admin/previewComponent/reportsPreview/ReportsPreview.styled.ts (1)
1-68: 이전 리뷰 이슈들이 모두 해결되었습니다과거 리뷰에서 지적된 다음 문제들이 모두 수정되었습니다:
- Date 컴포넌트가 ReportDate로 네이밍 변경되어 전역 Date 객체와의 충돌 해결
- 모든 opacity 값이 CSS 표준에 맞게 소수점 형태로 수정 (0.5, 0.2)
- IsImposed 컴포넌트의 조건부 스타일링도 적절히 구현됨
🧹 Nitpick comments (1)
src/components/admin/previewComponent/inquiresPreview/InquiresPreview.tsx (1)
30-30: 불완전한 주석 코드 정리주석처리된 불완전한 Link 코드가 남아있습니다. 사용하지 않는다면 제거해주세요.
다음 줄을 제거해주세요:
- {/* <Link to={`${ADMIN_ROUTE.}`} */}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (17)
src/api/alarm.api.ts(2 hunks)src/components/admin/previewComponent/allUserPreview/AllUserPreview.styled.ts(1 hunks)src/components/admin/previewComponent/allUserPreview/AllUserPreview.tsx(1 hunks)src/components/admin/previewComponent/inquiresPreview/InquiresPreview.styled.ts(1 hunks)src/components/admin/previewComponent/inquiresPreview/InquiresPreview.tsx(1 hunks)src/components/admin/previewComponent/noticePreview/NoticePreview.tsx(1 hunks)src/components/admin/previewComponent/reportsPreview/ReportsPreview.styled.ts(1 hunks)src/components/admin/previewComponent/reportsPreview/ReportsPreview.tsx(1 hunks)src/constants/admin/mainItems.ts(2 hunks)src/hooks/admin/useGetAllInquiries.ts(1 hunks)src/hooks/admin/useGetAllUsers.ts(1 hunks)src/hooks/queries/user/keys.ts(1 hunks)src/hooks/user/useGetNotice.ts(1 hunks)src/mock/mockReports.json(1 hunks)src/models/auth.ts(2 hunks)src/models/report.ts(1 hunks)src/routes/MergeRoutes.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (10)
- src/constants/admin/mainItems.ts
- src/hooks/admin/useGetAllUsers.ts
- src/components/admin/previewComponent/noticePreview/NoticePreview.tsx
- src/hooks/admin/useGetAllInquiries.ts
- src/mock/mockReports.json
- src/models/auth.ts
- src/hooks/queries/user/keys.ts
- src/api/alarm.api.ts
- src/models/report.ts
- src/components/admin/previewComponent/inquiresPreview/InquiresPreview.styled.ts
🧰 Additional context used
🧬 Code Graph Analysis (7)
src/routes/MergeRoutes.tsx (2)
src/components/user/notificationLive/NotificationProvider.tsx (1)
NotificationProvider(5-16)src/components/common/Toast/ToastProvider.tsx (1)
ToastProvider(6-31)
src/hooks/user/useGetNotice.ts (2)
src/hooks/queries/user/keys.ts (1)
CustomerService(53-57)src/api/customerService.api.ts (1)
getNotice(21-30)
src/components/admin/previewComponent/reportsPreview/ReportsPreview.tsx (2)
src/hooks/admin/useGetAllReports.ts (1)
useGetAllReports(5-12)src/constants/routes.ts (1)
ADMIN_ROUTE(34-44)
src/components/admin/previewComponent/allUserPreview/AllUserPreview.tsx (2)
src/hooks/admin/useGetAllUsers.ts (1)
useGetAllUsers(5-16)src/constants/routes.ts (1)
ADMIN_ROUTE(34-44)
src/components/admin/previewComponent/inquiresPreview/InquiresPreview.tsx (2)
src/hooks/admin/useGetAllInquiries.ts (1)
useGetAllInquiries(5-16)src/constants/routes.ts (1)
ADMIN_ROUTE(34-44)
src/components/admin/previewComponent/allUserPreview/AllUserPreview.styled.ts (3)
src/components/admin/previewComponent/inquiresPreview/InquiresPreview.styled.ts (4)
Container(4-7)Wrapper(9-14)Text(62-64)Arrow(66-69)src/components/admin/previewComponent/reportsPreview/ReportsPreview.styled.ts (5)
Container(4-7)Wrapper(9-14)ContentArea(20-22)Text(61-63)Arrow(65-68)src/components/admin/mainCard/MainCard.styled.ts (2)
Container(4-9)Wrapper(37-37)
src/components/admin/previewComponent/reportsPreview/ReportsPreview.styled.ts (3)
src/components/admin/previewComponent/allUserPreview/AllUserPreview.styled.ts (5)
Container(4-7)Wrapper(9-13)ContentArea(19-21)Text(37-39)Arrow(41-44)src/components/admin/previewComponent/inquiresPreview/InquiresPreview.styled.ts (7)
Container(4-7)Wrapper(9-14)Category(24-27)StateArea(36-38)Divider(45-50)Text(62-64)Arrow(66-69)src/components/admin/mainCard/MainCard.styled.ts (2)
Container(4-9)Wrapper(37-37)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: accessibility-test
🔇 Additional comments (7)
src/hooks/user/useGetNotice.ts (2)
9-18: 로딩 상태 처리 개선이 잘 구현되었습니다!
isFetching속성을 추가로 디스트럭처링하여 더 세밀한 로딩 상태 제어가 가능하도록 개선한 점이 좋습니다.isLoading과isFetching의 차이점을 활용하면 UI에서 초기 로딩과 백그라운드 재패칭을 구분하여 표시할 수 있습니다.
20-20: 반환 객체 업데이트가 적절합니다.
isFetching속성을 반환 객체에 포함하여 컴포넌트에서 활용할 수 있도록 한 점이 좋습니다. 이를 통해 NoticePreview 컴포넌트에서 더 나은 사용자 경험을 제공할 수 있을 것입니다.src/routes/MergeRoutes.tsx (2)
7-8: 적절한 import 추가관리자 메인 페이지 구현에 필요한 알림 기능 관련 컴포넌트들이 올바르게 import되었습니다.
14-19: 올바른 provider 중첩 구조NotificationProvider가 ToastProvider보다 상위에 위치하여 알림 데이터 흐름이 논리적으로 구성되었습니다. SSE 기반 알림 기능이 토스트 시스템과 올바르게 통합되었습니다.
src/components/admin/previewComponent/reportsPreview/ReportsPreview.tsx (1)
10-14: 적절한 프리뷰 로직 구현신고 목록이 6개를 초과할 경우 처음 4개만 표시하는 프리뷰 로직이 올바르게 구현되었습니다.
src/components/admin/previewComponent/allUserPreview/AllUserPreview.tsx (1)
31-31:Details
✅ Verification successful
데이터 구조 검증 필요
user.user.img라는 중첩된 구조가 사용되고 있습니다. 데이터 모델의 일관성을 확인해주세요.다음 스크립트로 사용자 데이터 구조를 확인해주세요:
🏁 Script executed:
#!/bin/bash # 사용자 데이터 모델 구조 확인 ast-grep --pattern 'interface $_ { $$$ user: { $$$ } $$$ }' # API 응답 구조 확인 rg -A 10 "getAllUsers\|AllUsers" --type ts src/Length of output: 693
🏁 Script executed:
#!/bin/bash # .user.img 사용 위치 확인 rg "\.user\.img" -n src/ # User 인터페이스 정의 검색 rg "export interface\s\+User" -n src/ # img 프로퍼티 포함 인터페이스 검색 rg "img\s*:" -n src/modelsLength of output: 1006
🏁 Script executed:
#!/bin/bash # AllUserPreview.tsx의 상단 부분 확인 sed -n '1,100p' src/components/admin/previewComponent/allUserPreview/AllUserPreview.tsxLength of output: 1561
🏁 Script executed:
#!/bin/bash # useGetAllUsers 훅 위치 검색 rg "useGetAllUsers" -n src/hooks # hook 구현 내용 확인 (상위 200줄) sed -n '1,200p' src/hooks/admin/useGetAllUsers.tsLength of output: 552
🏁 Script executed:
#!/bin/bash # getAllUsers API 구현 위치 확인 rg "getAllUsers" -n src/ # getAllUsers 함수 내용 출력 rg "export const getAllUsers" -l src/api/auth.api | xargs -I{} sed -n '1,200p' {}Length of output: 389
🏁 Script executed:
#!/bin/bash # getAllUsers API 함수 구현 및 반환 타입 확인 sed -n '80,150p' src/api/auth.api.tsLength of output: 770
🏁 Script executed:
#!/bin/bash # ApiGetAllUsers 타입 정의 확인 rg "ApiGetAllUsers" -n src # auth.api.ts 상단 100줄 출력하여 타입 선언 위치 확인 sed -n '1,100p' src/api/auth.api.tsLength of output: 2743
🏁 Script executed:
#!/bin/bash # ApiGetAllUsers 및 ApiCommonType 정의 확인 sed -n '1,200p' src/models/auth.tsLength of output: 734
데이터 모델 일관성 확인됨
AllUser인터페이스( src/models/auth.ts :31)는user: User를 포함하고,User인터페이스( src/models/apiCommon.ts :13)에도img: string이 정의되어 있어
user.user.img사용은 API 응답 타입 설계와 완전히 일치합니다.
따라서 해당 코드는 의도된 구조로, 별도 수정이 필요 없습니다.src/components/admin/previewComponent/allUserPreview/AllUserPreview.styled.ts (1)
1-26: 코드 구조와 스타일링이 잘 구현되었습니다스타일 컴포넌트들이 적절히 정의되어 있고, 다른 미리보기 컴포넌트들과 일관된 구조를 유지하고 있습니다. Arrow 컴포넌트의 크기도 11px로 설정되어 다른 컴포넌트들과 일치합니다.
Also applies to: 31-44
src/components/admin/previewComponent/inquiresPreview/InquiresPreview.tsx
Outdated
Show resolved
Hide resolved
src/components/admin/previewComponent/allUserPreview/AllUserPreview.styled.ts
Show resolved
Hide resolved
src/api/activityLog.api.ts
Outdated
| @@ -1,4 +1,8 @@ | |||
| import type { ApiMyComments, ApiMyInquiries } from './../models/activityLog'; | |||
| import type { | |||
| ApiAllInquiries, | |||
There was a problem hiding this comment.
ApiAllInquiries 같은 경우는 activityLog가 아니기 때문에 디렉토리 분리를 하는게 더 좋지 않을까 싶습니당,
There was a problem hiding this comment.
그럼 admin으로 하나를 더 만들게요
src/api/report.api.ts
Outdated
| @@ -1,4 +1,4 @@ | |||
| import type { ApiPostContent } from '../models/report'; | |||
| import { ApiAllReports, type ApiPostContent } from '../models/report'; | |||
There was a problem hiding this comment.
type이 왜 안에 들어가있나요?! 오류 안났나요??
| @@ -0,0 +1,16 @@ | |||
| import { useQuery } from '@tanstack/react-query'; | |||
| import { getAllInquiries } from '../../api/activityLog.api'; | |||
| export const ActivityLog = { | ||
| myComments: ['MyComments'], | ||
| myInquiries: ['MyInquiries'], | ||
| allInquiries: ['AllInquiries'], |
There was a problem hiding this comment.
ActivityLog는 나의 활동기록이라서 분리하는게 좋을 듯 합니당
src/models/auth.ts
Outdated
| @@ -1,5 +1,5 @@ | |||
| //model | |||
| import { ApiCommonType } from './apiCommon'; | |||
| import { ApiCommonType, User } from './apiCommon'; | |||
src/models/report.ts
Outdated
| @@ -1,6 +1,21 @@ | |||
| import { ApiCommonType, User } from './apiCommon'; | |||
구현내용
연관이슈
close #318
Summary by CodeRabbit
Summary by CodeRabbit
신규 기능
스타일
버그 수정
기타