-
Notifications
You must be signed in to change notification settings - Fork 0
관리자 페이지 "회원 전체 조회", "회원 전체 조회 미리보기"의 API 연결 ( issue feat/#337 ) #339
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
c101118
7a078ea
28b7ed8
60ca55e
e9cc75e
4af1c7d
54a1da4
6ff55e5
e55b013
f335657
0e993af
e6ec8c4
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,28 +3,26 @@ import { useGetAllInquiries } from '../../../../hooks/admin/useGetAllInquiries'; | |
| import Avatar from '../../../common/avatar/Avatar'; | ||
| import { ADMIN_ROUTE } from '../../../../constants/routes'; | ||
| import arrow_right from '../../../../assets/ArrowRight.svg'; | ||
| import LoadingSpinner from '../../../common/loadingSpinner/LoadingSpinner'; | ||
| import Spinner from '../../../user/mypage/Spinner'; | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Spinner import 경로 개선 필요 관리자 컴포넌트에서 사용자 마이페이지( -import Spinner from '../../../user/mypage/Spinner';
+import { Spinner } from '../../../common/loadingSpinner/LoadingSpinner.styled';
🤖 Prompt for AI Agents |
||
|
|
||
| const InquiresPreview = () => { | ||
| const { allInquiriesData, isLoading, isFetching } = useGetAllInquiries(); | ||
|
|
||
| if (isLoading || isFetching) { | ||
| return <LoadingSpinner />; | ||
| return ( | ||
| <S.SpinnerWrapper> | ||
| <Spinner /> | ||
| </S.SpinnerWrapper> | ||
| ); | ||
| } | ||
|
|
||
| if (!allInquiriesData || allInquiriesData.length === 0) { | ||
| return <S.Container>등록된 문의가 없습니다.</S.Container>; | ||
| } | ||
|
|
||
| const previewList = allInquiriesData | ||
| ? allInquiriesData.length > 6 | ||
| ? allInquiriesData.slice(0, 4) | ||
| : allInquiriesData | ||
| : []; | ||
|
|
||
| return ( | ||
| <S.Container> | ||
| {previewList?.map((inquiry) => ( | ||
| {allInquiriesData?.map((inquiry) => ( | ||
| <S.Wrapper key={inquiry.id}> | ||
| <S.Content> | ||
| {/* <Link to={`${ADMIN_ROUTE.}`} */} | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,6 +2,7 @@ import React from 'react'; | |
| import * as S from './UserCard.styled'; | ||
| import Avatar from '../../common/avatar/Avatar'; | ||
| import { type AllUser } from '../../../models/auth'; | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. type은 중괄호 밖으로 빼주세요! |
||
| import { formatDate } from '../../../util/formatDate'; | ||
|
|
||
| interface UserCardProps { | ||
| userData: AllUser; | ||
|
|
@@ -11,34 +12,38 @@ const UserCard = ({ userData }: UserCardProps) => { | |
| return ( | ||
| <S.Container> | ||
| <S.ProfileHeader> | ||
| <Avatar image={userData.user.img} size='46px' /> | ||
| <S.NickName>{userData.user.nickname}</S.NickName> | ||
| <Avatar image={userData.profileImg} size='46px' /> | ||
| <S.NickName>{userData.nickname}</S.NickName> | ||
| </S.ProfileHeader> | ||
| <S.MainContentArea> | ||
| <S.TextLabel>이메일</S.TextLabel> | ||
| <S.TextContent>{userData.email}</S.TextContent> | ||
| <S.TextLabel>회원 상태</S.TextLabel> | ||
| <S.TextContent $userState={userData.userState}> | ||
| {/* <S.TextContent $userState={userData.userState}> | ||
| {userData.userState} | ||
| </S.TextContent> | ||
| </S.TextContent> */} | ||
| <S.TextLabel>경고 횟수</S.TextLabel> | ||
| <S.TextContent> | ||
| {userData.reportedCount === 0 | ||
| ? '없음' | ||
| : `${userData.reportedCount}번`} | ||
| {userData.warning === 0 ? '없음' : `${userData.warning}번`} | ||
| </S.TextContent> | ||
| <S.TextLabel>포지션</S.TextLabel> | ||
| <S.TextContent> | ||
| {userData.position.map((position) => position.name).join(', ')} | ||
| {userData.position | ||
| ? userData.position.map((position) => position.name).join(', ') | ||
| : '선택된 포지션이 없습니다.'} | ||
| </S.TextContent> | ||
| <S.TextLabel>대표 스킬</S.TextLabel> | ||
| <S.SkillTagArea> | ||
| {userData.skill.map((skillTag) => ( | ||
| <S.SkillTag key={skillTag.id} src={skillTag.img} /> | ||
| ))} | ||
| </S.SkillTagArea> | ||
| {userData.skill ? ( | ||
| <S.SkillTagArea> | ||
| {userData.skill.map((skillTag) => ( | ||
| <S.SkillTag key={skillTag.id} src={skillTag.img} /> | ||
| ))} | ||
| </S.SkillTagArea> | ||
| ) : ( | ||
| <S.TextContent>선택된 스킬이 없습니다.</S.TextContent> | ||
| )} | ||
| <S.TextLabel>계정 생성 날짜</S.TextLabel> | ||
| <S.TextContent>{userData.createdAt}</S.TextContent> | ||
| <S.TextContent>{formatDate(userData.createdAt)}</S.TextContent> | ||
| </S.MainContentArea> | ||
| </S.Container> | ||
| ); | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -10,6 +10,7 @@ export const useGetAllInquiries = () => { | |
| } = useQuery({ | ||
| queryKey: [Inquiries.allInquiries], | ||
| queryFn: () => getAllInquiries(), | ||
| select: (allInquiries) => allInquiries.slice(0, 5), | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 옹 처음 보는거네요 ✨ |
||
| }); | ||
|
|
||
| return { allInquiriesData, isLoading, isFetching }; | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { http, HttpResponse, passthrough } from 'msw'; | ||
| import mockReports from './mockReports.json'; | ||
| import mockUsers from './mockUsers.json'; | ||
| import mockAllUsers from './mockAllUser.json'; | ||
|
|
||
| export const reportsAll = http.get( | ||
| `${import.meta.env.VITE_APP_API_BASE_URL}reports`, | ||
| () => { | ||
| return HttpResponse.json(mockReports, { status: 200 }); | ||
| } | ||
| ); | ||
|
|
||
| export const userAllPreview = http.get( | ||
| `${import.meta.env.VITE_APP_API_BASE_URL}users/preview`, | ||
| () => { | ||
| return HttpResponse.json(mockUsers, { status: 200 }); | ||
| } | ||
| ); | ||
|
|
||
| export const userAll = http.get( | ||
| `${import.meta.env.VITE_APP_API_BASE_URL}users`, | ||
| () => { | ||
| return HttpResponse.json(mockAllUsers, { status: 200 }); | ||
| } | ||
| ); | ||
|
Comment on lines
+6
to
+25
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 💡 Verification agent 🧩 Analysis chainAPI 엔드포인트 mock 구현 승인 세 가지 주요 API 엔드포인트에 대한 mock 핸들러가 올바르게 구현되었습니다:
환경변수를 사용한 base URL 설정과 적절한 HTTP 상태 코드(200) 반환이 좋습니다. Mock 데이터가 업데이트된 인터페이스와 일치하는지 확인이 필요합니다. 🏁 Script executed: #!/bin/bash
# Mock 데이터 파일 구조 확인
echo "=== mockUsers.json 구조 확인 ==="
cat src/mock/mockUsers.json | jq '.' | head -20
echo "=== mockAllUser.json 구조 확인 ==="
cat src/mock/mockAllUser.json | jq '.data.users[0]' 2>/dev/null || cat src/mock/mockAllUser.json | jq '.data' | head -10Length of output: 618 🏁 Script executed: #!/bin/bash
echo "=== src/mock 디렉터리 내 JSON 파일 목록 ==="
find src/mock -maxdepth 1 -type f -name '*.json' -printf "%f\n"
echo ""
echo "=== mockAllUsers.json 최상위 키 확인 ==="
jq 'keys' src/mock/mockAllUsers.json
echo ""
echo "=== mockAllUsers.json data 필드 구조 확인 ==="
jq '.data' src/mock/mockAllUsers.json | head -20Length of output: 1058 🏁 Script executed: #!/bin/bash
echo "=== mockAllUsers 참조 확인 ==="
grep -R "mockAllUsers" -n src/mock
echo ""
echo "=== mockAllUser 참조 확인 ==="
grep -R "mockAllUser" -n src/mock
echo ""
echo "=== src/mock/adminMock.ts 전체 내용 ==="
sed -n '1,200p' src/mock/adminMock.tsLength of output: 1512 #!/bin/bash
echo "=== mockAllUser.json 구조 확인 (최상위 50줄) ==="
cat src/mock/mockAllUser.json | jq '.' | head -50
echo ""
echo "=== mockAllUser.json 최상위 키 ==="
jq 'keys' src/mock/mockAllUser.json
echo ""
echo "=== data 필드 구조 ==="
jq '.data' src/mock/mockAllUser.json | head -20🏁 Script executed: #!/bin/bash
echo "=== mockAllUser.json 구조 확인 (상위 50줄) ==="
cat src/mock/mockAllUser.json | jq '.' | head -50Length of output: 1339 API 엔드포인트 mock 구현 승인 및 mockAllUser.json 구조 검증 요청 세 가지 주요 API 엔드포인트에 대한 mock 핸들러가 올바르게 구현되었습니다.
하지만 {
"success": true,
"message": "성공",
"data": {
"allUsers": [ /* 사용자 배열 */ ]
}
}로,
🤖 Prompt for AI Agents |
||
|
|
||
| export const passthroughAllGet = http.get(`*`, () => { | ||
| return passthrough(); | ||
| }); | ||
|
|
||
| export const passthroughAllPost = http.post(`*`, () => { | ||
| return passthrough(); | ||
| }); | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<ContentBorder />를 사용할 수 있습니당 ~!