Skip to content

FEAT : 회원 목록 조회 API 수정 #7

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Merged
tldms0507 merged 2 commits into from
Nov 10, 2025
Merged

FEAT : 회원 목록 조회 API 수정 #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9c95d3c
DESIGN : 모달 높이 변경
tldms0507 Nov 10, 2025
f0b8b5f
FIX : 회원 목록 조회
tldms0507 Nov 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 63 additions & 10 deletions src/pages/inquiry.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,12 @@ export default function Inquiry() {


const columns = [
{ key: "문의 유형", value: "문의 유형" },
{ key: "문의 제목", value: "문의 제목" },
{ key: "문의 내용", value: "문의 내용" },
{ key: "문의 상태", value: "문의 상태" },
{ key: "작성자", value: "작성자" },
{ key: "문의 작성일", value: "문의 작성일" },
];

const handleTypeChange = (value) => {
Expand All @@ -39,22 +42,72 @@ export default function Inquiry() {
};

const response = await getInquiry(params);
console.log(response);
if (response && response.data && response.data.result) {
console.log("API 응답 데이터:", response.data.result.content);

// const inquiryData = response.data.result.content.map(inquiry => ({
// "문의 제목": inquiry.title,
// "문의 내용": inquiry.content,
// "문의 작성일": inquiry.createdAt,
// "문의 상태": inquiry.status === "PENDING" ? "답변 대기" :
// inquiry.status === "RESOLVED" ? "답변 완료" :
// inquiry.status === "REJECTED" ? "답변 거절" : inquiry.status
// }));
// inquiryType 숫자를 한국어로 변환하는 함수
const getInquiryTypeLabel = (type) => {
if (typeof type === 'number') {
const typeMap = {
1: "피드",
2: "외주",
3: "후기",
4: "채팅",
5: "계정/인증",
6: "기타"
};
return typeMap[type] || `유형 ${type}`;
}
const stringMap = {
"RELATED_FEED": "피드",
"RELATED_RECRUIT": "외주",
"RELATED_REVIEW": "후기",
"RELATED_CHAT": "채팅",
"RELATED_AUTHENTICATION": "계정/인증",
"ETC": "기타"
};
return stringMap[type] || type;
};

const inquiryData = response.data.result.content.map(inquiry => {
// 날짜 포맷팅
const formatDate = (dateString) => {
if (!dateString) return "";
try {
return new Date(dateString).toLocaleString('ko-KR', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
hour12: false
}).replace(/\. /g, '.').replace(/\.$/, '');
} catch (e) {
return dateString;
}
};

const mappedData = {
"문의 유형": getInquiryTypeLabel(inquiry.inquiryType),
"문의 제목": inquiry.title || "",
"문의 내용": inquiry.content || "",
"문의 작성일": formatDate(inquiry.createdTime || inquiry.createdAt || inquiry.createdDate),
"작성자": inquiry.writer || inquiry.writerName || inquiry.memberName || "",
"문의 상태": inquiry.status === "PENDING" ? "답변 대기" :
inquiry.status === "RESOLVED" ? "답변 완료" :
inquiry.status === "REJECTED" ? "답변 거절" : inquiry.status || "미설정",
inquiryId: inquiry.inquiryId,
originalData: inquiry,
};

console.log("매핑된 데이터:", mappedData);
return mappedData;
});

console.log("전체 inquiryData:", inquiryData);
setPaginationData(inquiryData);

const totalElements = response.data.result.totalElements || inquiryData.length;
const totalElements = response.data.result.page?.totalElements || response.data.result.totalElements || inquiryData.length;
setTotalPages(Math.ceil(totalElements / pageSize));
}
} catch (error) {
Expand Down
138 changes: 83 additions & 55 deletions src/pages/members.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,14 @@ const getMemberData = async () => {
}

const response = await getMember(params);
// console.log(response);
// console.log("전체 API 응답:", response);
// console.log("response.data:", response?.data);
// console.log("response.data.result:", response?.data?.result);
if (response && response.data && response.data.result) {
// console.log("API 응답 데이터:", response.data.result.content);
// console.log("페이지 정보:", response.data.result.page);
// console.log("totalElements:", response.data.result.page?.totalElements || response.data.result.totalElements);

const memberData = response.data.result.content.map(member => {
const processedMember = {
타입: member.roleType === "STUDENT" ? "학생" : member.roleType === "ADMIN" ? "관리자" : member.roleType === "CLUB" ? "동아리" : "기업",
Expand All @@ -69,7 +74,15 @@ const getMemberData = async () => {
// console.log("전체 memberData:", memberData);
setPaginationData(memberData);

const totalElements = response.data.result.totalElements || memberData.length;
// API 응답에서 totalElements 가져오기
const totalElements = response.data.result.page?.totalElements ||
response.data.result.totalElements ||
response.data.result.content?.length ||
memberData.length;

console.log("계산된 totalElements:", totalElements);
console.log("계산된 totalPages:", Math.ceil(totalElements / pageSize));

setTotalPages(Math.ceil(totalElements / pageSize));
}
} catch (error) {
Expand Down Expand Up @@ -222,7 +235,7 @@ useEffect(() => {
{showModal && selectedMember && (
<div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center" onClick={handleCloseModal}>
<div
className="bg-white rounded-lg shadow-xl w-full max-w-md p-6"
className="bg-white rounded-lg shadow-xl w-full max-w-md p-6 max-h-[80vh] overflow-y-auto"
onClick={(e) => e.stopPropagation()}
>
<div className="flex justify-between items-center mb-6">
Expand Down Expand Up @@ -261,62 +274,77 @@ useEffect(() => {
<div className="p-3 bg-gray-50 rounded border">{selectedMember.처리상태}</div>
</div>

<div className="pt-4">
<label className="block text-sm font-medium text-gray-700 mb-2">처리 상태 변경</label>
<div className="flex flex-col gap-2">

<button
className={`w-full p-3 rounded font-medium transition-colors border focus:ring-2 focus:ring-green-300 ${
selectedStatus === 'APPROVED'
? 'bg-green-400 text-white font-bold border-none'
: 'bg-white text-green-500 border-green-500 hover:bg-green-300 hover:text-white hover:font-bold'
}`}
onClick={() => handleStatusChange('APPROVED')}
>
승인
</button>
{selectedMember.처리상태 !== "승인" && (
<>
<div className="pt-4">
<label className="block text-sm font-medium text-gray-700 mb-2">처리 상태 변경</label>
<div className="flex flex-col gap-2">

<button
className={`w-full p-3 rounded font-medium transition-colors border focus:ring-2 focus:ring-green-300 ${
selectedStatus === 'APPROVED'
? 'bg-green-400 text-white font-bold border-none'
: 'bg-white text-green-500 border-green-500 hover:bg-green-300 hover:text-white hover:font-bold'
}`}
onClick={() => handleStatusChange('APPROVED')}
>
승인
</button>
<button
className={`w-full p-3 rounded font-medium transition-colors border focus:ring-2 focus:ring-red-300 ${
selectedStatus === 'REJECTED'
? 'bg-red-400 text-white font-bold border-none'
: 'bg-white text-red-500 border-red-500 hover:bg-red-300 hover:text-white hover:font-bold'
}`}
onClick={() => handleStatusChange('REJECTED')}
>
거절
</button>
</div>

{/* 거절 선택 시 사유 입력 필드 */}
{selectedStatus === 'REJECTED' && (
<div className="pt-2">
<label className="block text-sm font-medium text-gray-700 mb-2">거절 사유</label>
<textarea
value={rejectReason}
onChange={(e) => setRejectReason(e.target.value)}
placeholder="거절 사유를 입력하세요"
rows={4}
className="w-full p-3 border border-gray-300 rounded focus:ring-2 focus:ring-red-300 focus:border-transparent resize-none"
/>
</div>
)}
</div>

<div className="flex gap-3 pt-4">
<button
className="flex-1 bg-blue-main text-white font-semibold py-3 px-4 rounded hover:bg-blue-point transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
onClick={handleProcessComplete}
disabled={!selectedStatus || (selectedStatus === 'REJECTED' && !rejectReason.trim())}
>
처리 완료
</button>
<button
onClick={handleCloseModal}
className="flex-1 bg-gray-300 text-gray-700 font-semibold py-3 px-4 rounded hover:bg-gray-400 transition-colors"
>
취소
</button>
</div>
</>
)}

{selectedMember.처리상태 === "승인" && (
<div className="flex gap-3 pt-4">
<button
className={`w-full p-3 rounded font-medium transition-colors border focus:ring-2 focus:ring-red-300 ${
selectedStatus === 'REJECTED'
? 'bg-red-400 text-white font-bold border-none'
: 'bg-white text-red-500 border-red-500 hover:bg-red-300 hover:text-white hover:font-bold'
}`}
onClick={() => handleStatusChange('REJECTED')}
onClick={handleCloseModal}
className="flex-1 bg-gray-300 text-gray-700 font-semibold py-3 px-4 rounded hover:bg-gray-400 transition-colors"
>
거절
닫기
</button>
</div>

{/* 거절 선택 시 사유 입력 필드 */}
{selectedStatus === 'REJECTED' && (
<div className="pt-2">
<label className="block text-sm font-medium text-gray-700 mb-2">거절 사유</label>
<textarea
value={rejectReason}
onChange={(e) => setRejectReason(e.target.value)}
placeholder="거절 사유를 입력하세요"
rows={4}
className="w-full p-3 border border-gray-300 rounded focus:ring-2 focus:ring-red-300 focus:border-transparent resize-none"
/>
</div>
)}
</div>

<div className="flex gap-3 pt-4">
<button
className="flex-1 bg-blue-main text-white font-semibold py-3 px-4 rounded hover:bg-blue-point transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
onClick={handleProcessComplete}
disabled={!selectedStatus || (selectedStatus === 'REJECTED' && !rejectReason.trim())}
>
처리 완료
</button>
<button
onClick={handleCloseModal}
className="flex-1 bg-gray-300 text-gray-700 font-semibold py-3 px-4 rounded hover:bg-gray-400 transition-colors"
>
취소
</button>
</div>
)}
</div>
</div>
</div>
Expand Down