motaju/xrlms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

global css 적용, 권한설정 완료1

Browse Source
This commit is contained in:
wallace
2025-11-27 00:45:55 +09:00
parent 5a5cf3e9e6
commit 5a2d770589
9 changed files with 285 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
src/app/admin/id/page.tsx
View File

@@ -179,13 +179,76 @@ export default function AdminIdPage() {
setIsActivateModalOpen(true);
}
function handleActivateConfirm() {
if (selectedUserId) {
async function handleActivateConfirm() {
if (!selectedUserId) {
setIsActivateModalOpen(false);
setSelectedUserId(null);
return;
}
try {
// selectedUserId로 사용자 찾기
const user = users.find(u => u.id === selectedUserId);
if (!user || !user.email || user.email === '-') {
setToastMessage('사용자 정보를 찾을 수 없습니다.');
setShowToast(true);
setTimeout(() => {
setShowToast(false);
}, 3000);
setIsActivateModalOpen(false);
setSelectedUserId(null);
return;
}
const token = localStorage.getItem('token') || document.cookie
.split('; ')
.find(row => row.startsWith('token='))
?.split('=')[1];
if (!token) {
setToastMessage('로그인이 필요합니다.');
setShowToast(true);
setTimeout(() => {
setShowToast(false);
}, 3000);
setIsActivateModalOpen(false);
setSelectedUserId(null);
return;
}
const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL
? `${process.env.NEXT_PUBLIC_API_BASE_URL}/admin/users/${selectedUserId}/unsuspend`
: `https://hrdi.coconutmeet.net/admin/users/${selectedUserId}/unsuspend`;
const response = await fetch(apiUrl, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`,
},
});
if (!response.ok) {
let errorMessage = `계정 활성화 실패 (${response.status})`;
try {
const errorData = await response.json();
if (errorData.error) {
errorMessage = errorData.error;
} else if (errorData.message) {
errorMessage = errorData.message;
}
} catch (parseError) {
// ignore
}
throw new Error(errorMessage);
}
// API 호출 성공 시 로컬 상태 업데이트
setUsers(prevUsers =>
prevUsers.map(user =>
user.id === selectedUserId
? { ...user, status: 'active' }
: user
prevUsers.map(u =>
u.id === selectedUserId
? { ...u, status: 'active' }
: u
)
);
setToastMessage('계정을 활성화했습니다.');
@@ -193,9 +256,18 @@ export default function AdminIdPage() {
setTimeout(() => {
setShowToast(false);
}, 3000);
} catch (err) {
const errorMessage = err instanceof Error ? err.message : '계정 활성화 중 오류가 발생했습니다.';
setToastMessage(errorMessage);
setShowToast(true);
setTimeout(() => {
setShowToast(false);
}, 3000);
console.error('계정 활성화 오류:', err);
} finally {
setIsActivateModalOpen(false);
setSelectedUserId(null);
}
setIsActivateModalOpen(false);
setSelectedUserId(null);
}
function handleActivateCancel() {
@@ -337,13 +409,13 @@ export default function AdminIdPage() {
<div className="h-full flex flex-col px-8">
{/* 제목 영역 */}
<div className="h-[100px] flex items-center">
<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
<h1 className="text-[24px] font-bold leading-normal text-text-title">
권한 설정
</h1>
</div>
{/* 탭 네비게이션 */}
<div>
<div className="flex items-center gap-8 border-b border-[#dee1e6]">
<div className="flex items-center gap-8 border-b border-input-border">
{[
{ id: 'all' as TabType, label: '전체' },
{ id: 'learner' as TabType, label: '학습자' },
@@ -355,15 +427,15 @@ export default function AdminIdPage() {
type="button"
onClick={() => setActiveTab(tab.id)}
className={[
"pb-4 px-1 text-[16px] font-medium leading-[1.5] transition-colors relative cursor-pointer",
"pb-4 px-1 text-[16px] font-medium leading-normal transition-colors relative cursor-pointer",
activeTab === tab.id
? "text-[#1f2b91] font-semibold"
: "text-[#6c7682]",
? "text-active-button font-semibold"
: "text-text-label",
].join(" ")}
>
{tab.label}
{activeTab === tab.id && (
<span className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#1f2b91]" />
<span className="absolute bottom-0 left-0 right-0 h-0.5 bg-active-button" />
)}
</button>
))}
@@ -373,27 +445,27 @@ export default function AdminIdPage() {
{/* 콘텐츠 영역 */}
<div className="flex-1 pt-8 flex flex-col">
{isLoading ? (
<div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center">
<p className="text-[16px] font-medium leading-[1.5] text-[#333c47]">
<div className="rounded-lg border border-input-border bg-white min-h-[400px] flex items-center justify-center">
<p className="text-[16px] font-medium leading-normal text-neutral-700">
데이터를 불러오는 중...
</p>
</div>
) : error ? (
<div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center">
<p className="text-[16px] font-medium leading-[1.5] text-[#f64c4c]">
<div className="rounded-lg border border-input-border bg-white min-h-[400px] flex items-center justify-center">
<p className="text-[16px] font-medium leading-normal text-error">
{error}
</p>
</div>
) : filteredUsers.length === 0 ? (
<div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center">
<p className="text-[16px] font-medium leading-[1.5] text-[#333c47]">
<div className="rounded-lg border border-input-border bg-white min-h-[400px] flex items-center justify-center">
<p className="text-[16px] font-medium leading-normal text-neutral-700">
현재 관리할 수 있는 회원 계정이 없습니다.
</p>
</div>
) : (
<>
<div className="rounded-[8px]">
<div className="w-full rounded-[8px] border border-[#dee1e6] overflow-visible">
<div className="w-full rounded-[8px] border border-input-border overflow-visible">
<table className="min-w-full border-collapse">
<colgroup>
<col style={{ width: 200 }} />
@@ -404,11 +476,11 @@ export default function AdminIdPage() {
</colgroup>
<thead>
<tr className="h-12 bg-gray-50 text-left">
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">가입일</th>
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">성명</th>
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">아이디(이메일)</th>
<th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">계정상태</th>
<th className="px-4 text-center text-[14px] font-semibold leading-[1.5] text-[#4c5561]">계정관리</th>
<th className="border-r border-input-border px-4 text-[14px] font-semibold leading-normal text-basic-text">가입일</th>
<th className="border-r border-input-border px-4 text-[14px] font-semibold leading-normal text-basic-text">성명</th>
<th className="border-r border-input-border px-4 text-[14px] font-semibold leading-normal text-basic-text">아이디(이메일)</th>
<th className="border-r border-input-border px-4 text-[14px] font-semibold leading-normal text-basic-text">계정상태</th>
<th className="px-4 text-center text-[14px] font-semibold leading-normal text-basic-text">계정관리</th>
</tr>
</thead>
<tbody>
@@ -417,31 +489,31 @@ export default function AdminIdPage() {
key={user.id}
className="h-12"
>
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
<td className="border-t border-r border-input-border px-4 text-[13px] leading-normal text-text-body whitespace-nowrap">
{user.joinDate}
</td>
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
<td className="border-t border-r border-input-border px-4 text-[13px] leading-normal text-text-body whitespace-nowrap">
{user.name}
</td>
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
<td className="border-t border-r border-input-border px-4 text-[13px] leading-normal text-text-body whitespace-nowrap">
{user.email}
</td>
<td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
<td className="border-t border-r border-input-border px-4 text-[13px] leading-normal text-text-body whitespace-nowrap">
{user.status === 'active' ? (
<div className="inline-flex items-center justify-center h-[20px] px-[4px] rounded-[4px] bg-[#ecf0ff]">
<span className="text-[13px] font-semibold leading-[1.4] text-[#384fbf] whitespace-nowrap">
<div className="inline-flex items-center justify-center h-[20px] px-[4px] rounded-[4px] bg-bg-primary-light">
<span className="text-[13px] font-semibold leading-[1.4] text-primary whitespace-nowrap">
{statusLabels[user.status]}
</span>
</div>
) : (
<div className="inline-flex items-center justify-center h-[20px] px-[4px] rounded-[4px] bg-[#f1f3f5]">
<span className="text-[13px] font-semibold leading-[1.4] text-[#4c5561] whitespace-nowrap">
<div className="inline-flex items-center justify-center h-[20px] px-[4px] rounded-[4px] bg-bg-gray-light">
<span className="text-[13px] font-semibold leading-[1.4] text-basic-text whitespace-nowrap">
{statusLabels[user.status]}
</span>
</div>
)}
</td>
<td className="border-t border-[#dee1e6] px-4 text-center text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
<td className="border-t border-input-border px-4 text-center text-[13px] leading-normal text-text-body whitespace-nowrap">
<button
type="button"
onClick={() => toggleAccountStatus(user.id)}
@@ -473,7 +545,7 @@ export default function AdminIdPage() {
type="button"
onClick={() => setCurrentPage(1)}
aria-label="맨 앞 페이지"
className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-neutral-700 disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
disabled={currentPage === 1}
>
<div className="relative flex items-center justify-center w-full h-full">
@@ -487,7 +559,7 @@ export default function AdminIdPage() {
type="button"
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
aria-label="이전 페이지"
className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-neutral-700 disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
disabled={currentPage === 1}
>
<ChevronDownSvg width={14.8} height={14.8} className="rotate-90" />
@@ -504,10 +576,10 @@ export default function AdminIdPage() {
aria-current={active ? 'page' : undefined}
className={[
'flex items-center justify-center rounded-[1000px] size-[32px] cursor-pointer',
active ? 'bg-[#ecf0ff]' : 'bg-white',
active ? 'bg-bg-primary-light' : 'bg-white',
].join(' ')}
>
<span className="text-[16px] leading-[1.4] text-[#333c47]">{n}</span>
<span className="text-[16px] leading-[1.4] text-neutral-700">{n}</span>
</button>
);
})}
@@ -517,7 +589,7 @@ export default function AdminIdPage() {
type="button"
onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
aria-label="다음 페이지"
className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-neutral-700 disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
disabled={currentPage === totalPages}
>
<ChevronDownSvg width={14.8} height={14.8} className="-rotate-90" />
@@ -528,7 +600,7 @@ export default function AdminIdPage() {
type="button"
onClick={() => setCurrentPage(totalPages)}
aria-label="맨 뒤 페이지"
className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-neutral-700 disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
disabled={currentPage === totalPages}
>
<div className="relative flex items-center justify-center w-full h-full">
@@ -559,7 +631,7 @@ export default function AdminIdPage() {
<div className="relative z-10 bg-white rounded-[8px] p-6 shadow-[0px_8px_20px_0px_rgba(0,0,0,0.06),0px_24px_60px_0px_rgba(0,0,0,0.12)] flex flex-col gap-8 items-end justify-end min-w-[500px]">
<div className="flex flex-col gap-4 items-start justify-center w-full">
<div className="flex gap-2 items-start w-full">
<h2 className="text-[18px] font-semibold leading-[1.5] text-[#333c47]">
<h2 className="text-[18px] font-semibold leading-normal text-neutral-700">
계정을 활성화하시겠습니까?
</h2>
</div>
@@ -568,14 +640,14 @@ export default function AdminIdPage() {
<button
type="button"
onClick={handleActivateCancel}
className="h-[40px] px-2 rounded-[8px] bg-[#f1f3f5] text-[16px] font-semibold leading-[1.5] text-[#4c5561] w-[80px] cursor-pointer hover:bg-[#e5e7eb] transition-colors"
className="h-[40px] px-2 rounded-[8px] bg-bg-gray-light text-[16px] font-semibold leading-normal text-basic-text w-[80px] cursor-pointer hover:bg-bg-gray-hover transition-colors"
>
취소
</button>
<button
type="button"
onClick={handleActivateConfirm}
className="h-[40px] px-4 rounded-[8px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white cursor-pointer hover:bg-[#1a2478] transition-colors"
className="h-[40px] px-4 rounded-[8px] bg-active-button text-[16px] font-semibold leading-normal text-white cursor-pointer hover:bg-active-button-hover transition-colors"
>
활성화하기
</button>
@@ -594,10 +666,10 @@ export default function AdminIdPage() {
/>
<div className="relative z-10 bg-white rounded-[8px] p-[24px] shadow-[0px_8px_20px_0px_rgba(0,0,0,0.06),0px_24px_60px_0px_rgba(0,0,0,0.12)] flex flex-col gap-[32px] items-end justify-end min-w-[500px]">
<div className="flex flex-col gap-[16px] items-start justify-center w-full">
<h2 className="text-[18px] font-semibold leading-[1.5] text-[#333c47]">
<h2 className="text-[18px] font-semibold leading-normal text-[#333c47]">
계정을 비활성화 하시겠습니까?
</h2>
<p className="text-[15px] font-normal leading-[1.5] text-[#4c5561]">
<p className="text-[15px] font-normal leading-normal text-basic-text">
학습자가 강좌를 수강 중일 경우 강좌 수강이 어렵습니다.
<br />
계정을 비활성화 처리하시겠습니까?
@@ -608,7 +680,7 @@ export default function AdminIdPage() {
value={deactivateReason}
onChange={(e) => setDeactivateReason(e.target.value)}
placeholder="비활성화 사유를 입력해주세요"
className="w-full h-[40px] px-[12px] rounded-[8px] border border-[#dee1e6] text-[14px] leading-[1.5] text-[#1b2027] placeholder:text-[#9ca3af] focus:outline-none focus:ring-2 focus:ring-[#1f2b91] focus:border-transparent"
className="w-full h-[40px] px-[12px] rounded-[8px] border border-input-border text-[14px] leading-normal text-text-body placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-active-button focus:border-transparent"
/>
</div>
</div>
@@ -616,14 +688,14 @@ export default function AdminIdPage() {
<button
type="button"
onClick={handleDeactivateCancel}
className="h-[40px] px-2 rounded-[8px] bg-[#f1f3f5] text-[16px] font-semibold leading-[1.5] text-[#4c5561] w-[80px] cursor-pointer hover:bg-[#e5e7eb] transition-colors"
className="h-[40px] px-2 rounded-[8px] bg-bg-gray-light text-[16px] font-semibold leading-normal text-basic-text w-[80px] cursor-pointer hover:bg-bg-gray-hover transition-colors"
>
취소
</button>
<button
type="button"
onClick={handleDeactivateConfirm}
className="h-[40px] px-4 rounded-[8px] bg-red-50 text-[16px] font-semibold leading-[1.5] text-[#f64c4c] cursor-pointer hover:bg-red-100 transition-colors"
className="h-[40px] px-4 rounded-[8px] bg-red-50 text-[16px] font-semibold leading-normal text-error cursor-pointer hover:bg-red-100 transition-colors"
>
비활성화하기
</button>
@@ -635,14 +707,14 @@ export default function AdminIdPage() {
{/* 활성화 완료 토스트 */}
{showToast && (
<div className="fixed right-[60px] bottom-[60px] z-50">
<div className="bg-white border border-[#dee1e6] rounded-[8px] p-4 min-w-[360px] flex gap-[10px] items-center">
<div className="bg-white border border-input-border rounded-[8px] p-4 min-w-[360px] flex gap-[10px] items-center">
<div className="relative shrink-0 w-[16.667px] h-[16.667px]">
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="8.5" cy="8.5" r="8.5" fill="#384FBF"/>
<circle cx="8.5" cy="8.5" r="8.5" fill="var(--color-primary)"/>
<path d="M5.5 8.5L7.5 10.5L11.5 6.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</div>
<p className="text-[15px] font-medium leading-[1.5] text-[#1b2027] text-nowrap">
<p className="text-[15px] font-medium leading-normal text-text-body text-nowrap">
{toastMessage}
</p>
</div>