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

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

@@ -179,13 +179,76 @@ export default function AdminIdPage() {
setIsActivateModalOpen(true); setIsActivateModalOpen(true);
} }
function handleActivateConfirm() { async function handleActivateConfirm() {
if (selectedUserId) { 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 => setUsers(prevUsers =>
prevUsers.map(user => prevUsers.map(u =>
user.id === selectedUserId u.id === selectedUserId
? { ...user, status: 'active' } ? { ...u, status: 'active' }
: user : u
) )
); );
setToastMessage('계정을 활성화했습니다.'); setToastMessage('계정을 활성화했습니다.');
@@ -193,10 +256,19 @@ export default function AdminIdPage() {
setTimeout(() => { setTimeout(() => {
setShowToast(false); setShowToast(false);
}, 3000); }, 3000);
} } catch (err) {
const errorMessage = err instanceof Error ? err.message : '계정 활성화 중 오류가 발생했습니다.';
setToastMessage(errorMessage);
setShowToast(true);
setTimeout(() => {
setShowToast(false);
}, 3000);
console.error('계정 활성화 오류:', err);
} finally {
setIsActivateModalOpen(false); setIsActivateModalOpen(false);
setSelectedUserId(null); setSelectedUserId(null);
} }
}
function handleActivateCancel() { function handleActivateCancel() {
setIsActivateModalOpen(false); setIsActivateModalOpen(false);
@@ -337,13 +409,13 @@ export default function AdminIdPage() {
<div className="h-full flex flex-col px-8"> <div className="h-full flex flex-col px-8">
{/* 제목 영역 */} {/* 제목 영역 */}
<div className="h-[100px] flex items-center"> <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> </h1>
</div> </div>
{/* 탭 네비게이션 */} {/* 탭 네비게이션 */}
<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: 'all' as TabType, label: '전체' },
{ id: 'learner' as TabType, label: '학습자' }, { id: 'learner' as TabType, label: '학습자' },
@@ -355,15 +427,15 @@ export default function AdminIdPage() {
type="button" type="button"
onClick={() => setActiveTab(tab.id)} onClick={() => setActiveTab(tab.id)}
className={[ 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 activeTab === tab.id
? "text-[#1f2b91] font-semibold" ? "text-active-button font-semibold"
: "text-[#6c7682]", : "text-text-label",
].join(" ")} ].join(" ")}
> >
{tab.label} {tab.label}
{activeTab === tab.id && ( {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> </button>
))} ))}
@@ -373,27 +445,27 @@ export default function AdminIdPage() {
{/* 콘텐츠 영역 */} {/* 콘텐츠 영역 */}
<div className="flex-1 pt-8 flex flex-col"> <div className="flex-1 pt-8 flex flex-col">
{isLoading ? ( {isLoading ? (
<div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center"> <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-[1.5] text-[#333c47]"> <p className="text-[16px] font-medium leading-normal text-neutral-700">
데이터를 불러오는 중... 데이터를 불러오는 중...
</p> </p>
</div> </div>
) : error ? ( ) : error ? (
<div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center"> <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-[1.5] text-[#f64c4c]"> <p className="text-[16px] font-medium leading-normal text-error">
{error} {error}
</p> </p>
</div> </div>
) : filteredUsers.length === 0 ? ( ) : filteredUsers.length === 0 ? (
<div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center"> <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-[1.5] text-[#333c47]"> <p className="text-[16px] font-medium leading-normal text-neutral-700">
현재 관리할 수 있는 회원 계정이 없습니다. 현재 관리할 수 있는 회원 계정이 없습니다.
</p> </p>
</div> </div>
) : ( ) : (
<> <>
<div className="rounded-[8px]"> <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"> <table className="min-w-full border-collapse">
<colgroup> <colgroup>
<col style={{ width: 200 }} /> <col style={{ width: 200 }} />
@@ -404,11 +476,11 @@ export default function AdminIdPage() {
</colgroup> </colgroup>
<thead> <thead>
<tr className="h-12 bg-gray-50 text-left"> <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-input-border px-4 text-[14px] font-semibold leading-normal text-basic-text">가입일</th>
<th className="border-r border-[#dee1e6] px-4 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-[#dee1e6] px-4 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-[#dee1e6] px-4 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="px-4 text-center text-[14px] font-semibold leading-[1.5] text-[#4c5561]">계정관리</th> <th className="px-4 text-center text-[14px] font-semibold leading-normal text-basic-text">계정관리</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -417,31 +489,31 @@ export default function AdminIdPage() {
key={user.id} key={user.id}
className="h-12" 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} {user.joinDate}
</td> </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} {user.name}
</td> </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} {user.email}
</td> </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' ? ( {user.status === 'active' ? (
<div className="inline-flex items-center justify-center h-[20px] px-[4px] rounded-[4px] bg-[#ecf0ff]"> <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-[#384fbf] whitespace-nowrap"> <span className="text-[13px] font-semibold leading-[1.4] text-primary whitespace-nowrap">
{statusLabels[user.status]} {statusLabels[user.status]}
</span> </span>
</div> </div>
) : ( ) : (
<div className="inline-flex items-center justify-center h-[20px] px-[4px] rounded-[4px] bg-[#f1f3f5]"> <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-[#4c5561] whitespace-nowrap"> <span className="text-[13px] font-semibold leading-[1.4] text-basic-text whitespace-nowrap">
{statusLabels[user.status]} {statusLabels[user.status]}
</span> </span>
</div> </div>
)} )}
</td> </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 <button
type="button" type="button"
onClick={() => toggleAccountStatus(user.id)} onClick={() => toggleAccountStatus(user.id)}
@@ -473,7 +545,7 @@ export default function AdminIdPage() {
type="button" type="button"
onClick={() => setCurrentPage(1)} onClick={() => setCurrentPage(1)}
aria-label="맨 앞 페이지" 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} disabled={currentPage === 1}
> >
<div className="relative flex items-center justify-center w-full h-full"> <div className="relative flex items-center justify-center w-full h-full">
@@ -487,7 +559,7 @@ export default function AdminIdPage() {
type="button" type="button"
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))} onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
aria-label="이전 페이지" 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} disabled={currentPage === 1}
> >
<ChevronDownSvg width={14.8} height={14.8} className="rotate-90" /> <ChevronDownSvg width={14.8} height={14.8} className="rotate-90" />
@@ -504,10 +576,10 @@ export default function AdminIdPage() {
aria-current={active ? 'page' : undefined} aria-current={active ? 'page' : undefined}
className={[ className={[
'flex items-center justify-center rounded-[1000px] size-[32px] cursor-pointer', 'flex items-center justify-center rounded-[1000px] size-[32px] cursor-pointer',
active ? 'bg-[#ecf0ff]' : 'bg-white', active ? 'bg-bg-primary-light' : 'bg-white',
].join(' ')} ].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> </button>
); );
})} })}
@@ -517,7 +589,7 @@ export default function AdminIdPage() {
type="button" type="button"
onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))} onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
aria-label="다음 페이지" 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} disabled={currentPage === totalPages}
> >
<ChevronDownSvg width={14.8} height={14.8} className="-rotate-90" /> <ChevronDownSvg width={14.8} height={14.8} className="-rotate-90" />
@@ -528,7 +600,7 @@ export default function AdminIdPage() {
type="button" type="button"
onClick={() => setCurrentPage(totalPages)} onClick={() => setCurrentPage(totalPages)}
aria-label="맨 뒤 페이지" 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} disabled={currentPage === totalPages}
> >
<div className="relative flex items-center justify-center w-full h-full"> <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="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 flex-col gap-4 items-start justify-center w-full">
<div className="flex gap-2 items-start 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> </h2>
</div> </div>
@@ -568,14 +640,14 @@ export default function AdminIdPage() {
<button <button
type="button" type="button"
onClick={handleActivateCancel} 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>
<button <button
type="button" type="button"
onClick={handleActivateConfirm} 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> </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="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"> <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> </h2>
<p className="text-[15px] font-normal leading-[1.5] text-[#4c5561]"> <p className="text-[15px] font-normal leading-normal text-basic-text">
학습자가 강좌를 수강 중일 경우 강좌 수강이 어렵습니다. 학습자가 강좌를 수강 중일 경우 강좌 수강이 어렵습니다.
<br /> <br />
계정을 비활성화 처리하시겠습니까? 계정을 비활성화 처리하시겠습니까?
@@ -608,7 +680,7 @@ export default function AdminIdPage() {
value={deactivateReason} value={deactivateReason}
onChange={(e) => setDeactivateReason(e.target.value)} onChange={(e) => setDeactivateReason(e.target.value)}
placeholder="비활성화 사유를 입력해주세요" 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>
</div> </div>
@@ -616,14 +688,14 @@ export default function AdminIdPage() {
<button <button
type="button" type="button"
onClick={handleDeactivateCancel} 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>
<button <button
type="button" type="button"
onClick={handleDeactivateConfirm} 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> </button>
@@ -635,14 +707,14 @@ export default function AdminIdPage() {
{/* 활성화 완료 토스트 */} {/* 활성화 완료 토스트 */}
{showToast && ( {showToast && (
<div className="fixed right-[60px] bottom-[60px] z-50"> <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]"> <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"> <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"/> <path d="M5.5 8.5L7.5 10.5L11.5 6.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
</svg> </svg>
</div> </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} {toastMessage}
</p> </p>
</div> </div>

22
src/app/course-list/page.tsx
View File

@@ -16,8 +16,8 @@ const imgThumbD = '/imgs/thumb-d.png'; // public/imgs/thumb-d.png
function ColorfulTag({ text }: { text: string }) { function ColorfulTag({ text }: { text: string }) {
return ( return (
<div className="bg-[#e5f5ec] box-border flex h-[20px] items-center justify-center px-[4px] rounded-[4px]"> <div className="bg-bg-success-light box-border flex h-[20px] items-center justify-center px-[4px] rounded-[4px]">
<p className="font-['Pretendard:SemiBold',sans-serif] text-[#0c9d61] text-[13px] leading-[1.4]">{text}</p> <p className="font-['Pretendard:SemiBold',sans-serif] text-success text-[13px] leading-[1.4]">{text}</p>
</div> </div>
); );
} }
@@ -56,15 +56,15 @@ export default function CourseListPage() {
<main className="flex w-full flex-col items-center"> <main className="flex w-full flex-col items-center">
{/* 상단 타이틀 영역 */} {/* 상단 타이틀 영역 */}
<div className="flex h-[100px] w-full max-w-[1440px] items-center px-8"> <div className="flex h-[100px] w-full max-w-[1440px] items-center px-8">
<h1 className="text-[24px] font-bold leading-normal text-[#1b2027]">교육 과정 목록</h1> <h1 className="text-[24px] font-bold leading-normal text-text-title">교육 과정 목록</h1>
</div> </div>
{/* 콘텐츠 래퍼: Figma 기준 1440 컨테이너, 내부 1376 그리드 폭 */} {/* 콘텐츠 래퍼: Figma 기준 1440 컨테이너, 내부 1376 그리드 폭 */}
<section className="w-full max-w-[1440px] px-8 pt-8 pb-20"> <section className="w-full max-w-[1440px] px-8 pt-8 pb-20">
{/* 상단 카운트/정렬 영역 */} {/* 상단 카운트/정렬 영역 */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-[15px] font-medium leading-normal text-[#333c47]"> <p className="text-[15px] font-medium leading-normal text-neutral-700">
총 <span className="text-[#384fbf]">{courses.length}</span>건 총 <span className="text-primary">{courses.length}</span>건
</p> </p>
<div className="h-[40px] w-[114px]" /> <div className="h-[40px] w-[114px]" />
</div> </div>
@@ -90,13 +90,13 @@ export default function CourseListPage() {
<div className="flex w-full flex-col gap-[4px]"> <div className="flex w-full flex-col gap-[4px]">
<div className="flex flex-col gap-[4px]"> <div className="flex flex-col gap-[4px]">
{c.inProgress && <ColorfulTag text="수강 중" />} {c.inProgress && <ColorfulTag text="수강 중" />}
<h2 className="text-[18px] font-semibold leading-normal text-[#333c47]"> <h2 className="text-[18px] font-semibold leading-normal text-neutral-700">
{c.title} {c.title}
</h2> </h2>
</div> </div>
<div className="flex items-center gap-[4px]"> <div className="flex items-center gap-[4px]">
<img src={imgPlay} alt="" className="size-[16px]" /> <img src={imgPlay} alt="" className="size-[16px]" />
<p className="text-[13px] font-medium leading-[1.4] text-[#8c95a1]"> <p className="text-[13px] font-medium leading-[1.4] text-text-meta">
VOD · 총 6강 · 4시간 20분 VOD · 총 6강 · 4시간 20분
</p> </p>
</div> </div>
@@ -113,7 +113,7 @@ export default function CourseListPage() {
type="button" type="button"
onClick={() => setPage((p) => Math.max(1, p - 1))} onClick={() => setPage((p) => Math.max(1, p - 1))}
aria-label="이전 페이지" aria-label="이전 페이지"
className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40" className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-neutral-700 disabled:opacity-40"
disabled={page === 1} disabled={page === 1}
> >
<ChevronDownSvg width={14.8} height={14.8} className="rotate-90" /> <ChevronDownSvg width={14.8} height={14.8} className="rotate-90" />
@@ -130,10 +130,10 @@ export default function CourseListPage() {
aria-current={active ? 'page' : undefined} aria-current={active ? 'page' : undefined}
className={[ className={[
'flex items-center justify-center rounded-[1000px] size-[32px]', 'flex items-center justify-center rounded-[1000px] size-[32px]',
active ? 'bg-[#ecf0ff]' : 'bg-white', active ? 'bg-bg-primary-light' : 'bg-white',
].join(' ')} ].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> </button>
); );
})} })}
@@ -143,7 +143,7 @@ export default function CourseListPage() {
type="button" type="button"
onClick={() => setPage((p) => Math.min(totalPages, p + 1))} onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
aria-label="다음 페이지" aria-label="다음 페이지"
className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40" className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-neutral-700 disabled:opacity-40"
disabled={page === totalPages} disabled={page === totalPages}
> >
<ChevronDownSvg width={14.8} height={14.8} className="-rotate-90" /> <ChevronDownSvg width={14.8} height={14.8} className="-rotate-90" />

40
src/app/globals.css
View File

@@ -11,30 +11,42 @@
--font-sans: var(--font-geist-sans); --font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono); --font-mono: var(--font-geist-mono);
/* ===== 텍스트 색상 ===== */
/*login color start*/ --color-text-title: #1b2027;
--color-input-placeholder-text: #b1b8c0; --color-text-body: #1b2027;
--color-text-label: #6c7682;
--color-neutral-40: #dee1e6; --color-text-meta: #8c95a1;
--color-input-border: #dee1e6; --color-text-placeholder: #9ca3af;
--color-text-placeholder-alt: #b1b8c0;
--color-basic-text: #4c5561; --color-basic-text: #4c5561;
/* color natural 700*/
--color-neutral-700: #333c47; --color-neutral-700: #333c47;
--color-logo-text: #333c47; --color-logo-text: #333c47;
--color-input-border-select: #333c47;
--color-input-alert-text: #333c47; --color-input-alert-text: #333c47;
--color-error: #f64c4c; /* ===== 배경 색상 ===== */
--color-bg-gray-light: #f1f3f5;
--color-bg-gray-hover: #e5e7eb;
--color-bg-success-light: #e5f5ec;
--color-bg-primary-light: #ecf0ff;
--color-bg-header: #060958;
--color-inactive-checkbox: #c2c9cf; /* ===== 테두리 색상 ===== */
--color-neutral-40: #dee1e6;
--color-input-border: #dee1e6;
--color-input-border-select: #333c47;
/* ===== 버튼/액션 색상 ===== */
--color-inactive-button: #8598e8; --color-inactive-button: #8598e8;
--color-active-button: #1f2b91; --color-active-button: #1f2b91;
/*login color end*/ --color-active-button-hover: #1a2478;
--color-primary: #384fbf;
--color-primary-alt: #384FBF;
/* ===== 상태 색상 ===== */
--color-error: #f64c4c;
--color-success: #0c9d61;
--color-inactive-checkbox: #c2c9cf;
--color-input-placeholder-text: #b1b8c0;
} }
body { body {

15
src/app/login/LoginErrorModal.tsx
View File

@@ -5,11 +5,14 @@ import React from "react";
type LoginErrorModalProps = { type LoginErrorModalProps = {
open: boolean; open: boolean;
onClose: () => void; onClose: () => void;
errorMessage?: string;
}; };
export default function LoginErrorModal({ open, onClose }: LoginErrorModalProps) { export default function LoginErrorModal({ open, onClose, errorMessage }: LoginErrorModalProps) {
if (!open) return null; if (!open) return null;
const isSuspendedAccount = errorMessage?.includes("정지된 계정입니다");
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center"> <div className="fixed inset-0 z-50 flex items-center justify-center">
<button <button
@@ -25,9 +28,19 @@ export default function LoginErrorModal({ open, onClose }: LoginErrorModalProps)
className="relative bg-white box-border flex flex-col items-stretch justify-start p-6 rounded-[8px] min-w-[500px] max-w-[calc(100%-48px)]" className="relative bg-white box-border flex flex-col items-stretch justify-start p-6 rounded-[8px] min-w-[500px] max-w-[calc(100%-48px)]"
> >
<div className="text-[18px] leading-normal font-semibold text-neutral-700 mb-8" id="login-error-title"> <div className="text-[18px] leading-normal font-semibold text-neutral-700 mb-8" id="login-error-title">
{isSuspendedAccount ? (
<>
정지된 계정입니다.
<br />
확인 후 다시 시도해 주세요.
</>
) : (
<>
아이디 또는 비밀번호가 일치하지 않습니다. 아이디 또는 비밀번호가 일치하지 않습니다.
<br /> <br />
확인 후 다시 시도해 주세요. 확인 후 다시 시도해 주세요.
</>
)}
</div> </div>
<div className="flex items-center justify-end gap-[8px]"> <div className="flex items-center justify-end gap-[8px]">
<button <button

9
src/app/login/page.tsx
View File

@@ -19,6 +19,7 @@ export default function LoginPage() {
const [isUserIdFocused, setIsUserIdFocused] = useState(false); const [isUserIdFocused, setIsUserIdFocused] = useState(false);
const [isPasswordFocused, setIsPasswordFocused] = useState(false); const [isPasswordFocused, setIsPasswordFocused] = useState(false);
const [isLoginErrorOpen, setIsLoginErrorOpen] = useState(false); const [isLoginErrorOpen, setIsLoginErrorOpen] = useState(false);
const [loginErrorMessage, setLoginErrorMessage] = useState("");
const [idError, setIdError] = useState(""); const [idError, setIdError] = useState("");
const [passwordError, setPasswordError] = useState(""); const [passwordError, setPasswordError] = useState("");
@@ -146,6 +147,7 @@ export default function LoginPage() {
} }
} }
console.error("로그인 실패:", errorMessage); console.error("로그인 실패:", errorMessage);
setLoginErrorMessage(errorMessage);
setIsLoginErrorOpen(true); setIsLoginErrorOpen(true);
return; return;
} }
@@ -206,6 +208,7 @@ export default function LoginPage() {
} catch (error) { } catch (error) {
const errorMessage = error instanceof Error ? error.message : "네트워크 오류가 발생했습니다."; const errorMessage = error instanceof Error ? error.message : "네트워크 오류가 발생했습니다.";
console.error("로그인 오류:", errorMessage); console.error("로그인 오류:", errorMessage);
setLoginErrorMessage(errorMessage);
setIsLoginErrorOpen(true); setIsLoginErrorOpen(true);
} }
} }
@@ -215,7 +218,11 @@ export default function LoginPage() {
<LoginErrorModal <LoginErrorModal
open={isLoginErrorOpen} open={isLoginErrorOpen}
onClose={() => setIsLoginErrorOpen(false)} onClose={() => {
setIsLoginErrorOpen(false);
setLoginErrorMessage("");
}}
errorMessage={loginErrorMessage}
/> />
<LoginOption <LoginOption
onClick={() => setIsLoginErrorOpen(true)} onClick={() => setIsLoginErrorOpen(true)}

36
src/app/menu/ChangePasswordModal.tsx
View File

@@ -96,15 +96,15 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
> >
<div className="w-[480px] rounded-[12px] border border-[#dee1e6] bg-white shadow-[0_10px_30px_rgba(0,0,0,0.06)]"> <div className="w-[480px] rounded-[12px] border border-input-border bg-white shadow-[0_10px_30px_rgba(0,0,0,0.06)]">
{/* header */} {/* header */}
<div className="flex items-center justify-between p-6"> <div className="flex items-center justify-between p-6">
<h2 className="text-[20px] font-bold leading-[1.5] text-[#333c47]">비밀번호 변경</h2> <h2 className="text-[20px] font-bold leading-[1.5] text-neutral-700">비밀번호 변경</h2>
<button <button
type="button" type="button"
aria-label="닫기" aria-label="닫기"
onClick={onClose} onClick={onClose}
className="inline-flex size-6 items-center justify-center text-[#333c47] hover:opacity-80 cursor-pointer" className="inline-flex size-6 items-center justify-center text-neutral-700 hover:opacity-80 cursor-pointer"
> >
<ModalCloseSvg /> <ModalCloseSvg />
</button> </button>
@@ -113,14 +113,14 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
{/* body */} {/* body */}
<div className="flex flex-col gap-[10px] px-6"> <div className="flex flex-col gap-[10px] px-6">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<label className="w-[100px] text-[15px] font-semibold leading-[1.5] text-[#6c7682]">아이디 (이메일)</label> <label className="w-[100px] text-[15px] font-semibold leading-[1.5] text-text-label">아이디 (이메일)</label>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<input <input
type="email" type="email"
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
className={[ className={[
"h-10 flex-1 rounded-[8px] border border-[#dee1e6] px-3 text-[16px] leading-[1.5] text-[#333c47] placeholder-[#b1b8c0] outline-none", "h-10 flex-1 rounded-[8px] border border-input-border px-3 text-[16px] leading-[1.5] text-neutral-700 placeholder:text-text-placeholder-alt outline-none",
hasError ? "bg-white" : isCodeSent ? "bg-neutral-50" : "bg-white", hasError ? "bg-white" : isCodeSent ? "bg-neutral-50" : "bg-white",
].join(" ")} ].join(" ")}
placeholder="이메일" placeholder="이메일"
@@ -132,7 +132,7 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
setIsCodeSent(true); setIsCodeSent(true);
setError(null); setError(null);
}} }}
className="h-10 w-[136px] rounded-[8px] bg-[#f1f3f5] px-3 text-[16px] font-semibold leading-[1.5] text-[#333c47] cursor-pointer" className="h-10 w-[136px] rounded-[8px] bg-bg-gray-light px-3 text-[16px] font-semibold leading-[1.5] text-neutral-700 cursor-pointer"
> >
{isCodeSent ? "인증번호 재전송" : "인증번호 전송"} {isCodeSent ? "인증번호 재전송" : "인증번호 전송"}
</button> </button>
@@ -140,13 +140,13 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
</div> </div>
{requireCode ? ( {requireCode ? (
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<div className="w-[100px] text-[15px] font-semibold leading-[1.5] text-[#6c7682]">인증번호</div> <div className="w-[100px] text-[15px] font-semibold leading-[1.5] text-text-label">인증번호</div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<input <input
type="text" type="text"
value={code} value={code}
onChange={(e) => setCode(e.target.value)} onChange={(e) => setCode(e.target.value)}
className="h-10 flex-1 rounded-[8px] border border-[#dee1e6] bg-white px-3 text-[16px] leading-[1.5] text-[#333c47] placeholder-[#b1b8c0] outline-none" className="h-10 flex-1 rounded-[8px] border border-input-border bg-white px-3 text-[16px] leading-[1.5] text-neutral-700 placeholder:text-text-placeholder-alt outline-none"
placeholder="인증번호를 입력해 주세요." placeholder="인증번호를 입력해 주세요."
/> />
<button <button
@@ -154,7 +154,7 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
disabled={!canConfirm} disabled={!canConfirm}
className={[ className={[
"h-10 w-[136px] rounded-[8px] px-3 text-[16px] font-semibold leading-[1.5] cursor-pointer disabled:cursor-default", "h-10 w-[136px] rounded-[8px] px-3 text-[16px] font-semibold leading-[1.5] cursor-pointer disabled:cursor-default",
canConfirm ? "bg-[#f1f3f5] text-[#4c5561]" : "bg-gray-50 text-[#b1b8c0]", canConfirm ? "bg-bg-gray-light text-basic-text" : "bg-gray-50 text-text-placeholder-alt",
].join(" ")} ].join(" ")}
> >
인증번호 확인 인증번호 확인
@@ -162,37 +162,37 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
</div> </div>
{isCodeSent && !hasError && !isVerified ? ( {isCodeSent && !hasError && !isVerified ? (
<div className="px-1"> <div className="px-1">
<p className="text-[13px] font-semibold leading-[1.4] text-[#384fbf]"> <p className="text-[13px] font-semibold leading-[1.4] text-primary">
인증 확인을 위해 작성한 이메일로 인증번호를 발송했습니다. 인증 확인을 위해 작성한 이메일로 인증번호를 발송했습니다.
</p> </p>
<p className="text-[13px] font-semibold leading-[1.4] text-[#384fbf]"> <p className="text-[13px] font-semibold leading-[1.4] text-primary">
이메일을 확인해 주세요. 이메일을 확인해 주세요.
</p> </p>
</div> </div>
) : null} ) : null}
{error ? ( {error ? (
<p className="px-1 text-[13px] font-semibold leading-[1.4] text-[#f64c4c]"> <p className="px-1 text-[13px] font-semibold leading-[1.4] text-error">
{error} {error}
</p> </p>
) : null} ) : null}
</div> </div>
) : null} ) : null}
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">새 비밀번호</label> <label className="text-[15px] font-semibold leading-[1.5] text-text-label">새 비밀번호</label>
<input <input
type="password" type="password"
value={newPassword} value={newPassword}
onChange={(e) => setNewPassword(e.target.value)} onChange={(e) => setNewPassword(e.target.value)}
disabled={!isVerified} disabled={!isVerified}
className={[ className={[
"h-10 rounded-[8px] border border-[#dee1e6] px-3 text-[16px] leading-[1.5] text-[#333c47] placeholder-[#b1b8c0] outline-none", "h-10 rounded-[8px] border border-input-border px-3 text-[16px] leading-[1.5] text-neutral-700 placeholder:text-text-placeholder-alt outline-none",
isVerified ? "bg-white" : "bg-neutral-50", isVerified ? "bg-white" : "bg-neutral-50",
].join(" ")} ].join(" ")}
placeholder="새 비밀번호" placeholder="새 비밀번호"
/> />
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]"> <label className="text-[15px] font-semibold leading-[1.5] text-text-label">
새 비밀번호 확인 새 비밀번호 확인
</label> </label>
<input <input
@@ -201,7 +201,7 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
onChange={(e) => setConfirmPassword(e.target.value)} onChange={(e) => setConfirmPassword(e.target.value)}
disabled={!isVerified} disabled={!isVerified}
className={[ className={[
"h-10 rounded-[8px] border border-[#dee1e6] px-3 text-[16px] leading-[1.5] text-[#333c47] placeholder-[#b1b8c0] outline-none", "h-10 rounded-[8px] border border-input-border px-3 text-[16px] leading-[1.5] text-neutral-700 placeholder:text-text-placeholder-alt outline-none",
isVerified ? "bg-white" : "bg-neutral-50", isVerified ? "bg-white" : "bg-neutral-50",
].join(" ")} ].join(" ")}
placeholder="새 비밀번호 확인" placeholder="새 비밀번호 확인"
@@ -214,14 +214,14 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
<button <button
type="button" type="button"
onClick={onClose} onClick={onClose}
className="h-12 w-[136px] rounded-[10px] bg-[#f1f3f5] px-4 text-[16px] font-semibold leading-[1.5] text-[#4c5561] cursor-pointer" className="h-12 w-[136px] rounded-[10px] bg-bg-gray-light px-4 text-[16px] font-semibold leading-[1.5] text-basic-text cursor-pointer"
> >
취소 취소
</button> </button>
<button <button
type="button" type="button"
onClick={handleSubmit} onClick={handleSubmit}
className="h-12 w-[136px] rounded-[10px] bg-[#8598e8] px-4 text-[16px] font-semibold leading-[1.5] text-white cursor-pointer" className="h-12 w-[136px] rounded-[10px] bg-inactive-button px-4 text-[16px] font-semibold leading-[1.5] text-white cursor-pointer"
> >
비밀번호 변경 비밀번호 변경
</button> </button>

16
src/app/menu/account/page.tsx
View File

@@ -122,29 +122,29 @@ export default function AccountPage() {
<h1 className="text-[24px] font-bold leading-normal text-[#1b2027]">내 정보 수정</h1> <h1 className="text-[24px] font-bold leading-normal text-[#1b2027]">내 정보 수정</h1>
</div> </div>
<div className="px-8 pb-20"> <div className="px-8 pb-20">
<div className="rounded-lg border border-[#dee1e6] bg-white p-8"> <div className="rounded-lg border border-input-border bg-white p-8">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<label className="w-[100px] text-[15px] font-semibold leading-[1.5] text-[#6c7682]"> <label className="w-[100px] text-[15px] font-semibold leading-[1.5] text-text-label">
아이디 (이메일) 아이디 (이메일)
</label> </label>
<div className="h-10 rounded-lg border border-[#dee1e6] bg-neutral-50 px-3 py-2"> <div className="h-10 rounded-lg border border-input-border bg-neutral-50 px-3 py-2">
<span className="text-[16px] leading-normal text-[#333c47]"> <span className="text-[16px] leading-normal text-neutral-700">
{isLoading ? '로딩 중...' : (userInfo.email || '이메일 정보 없음')} {isLoading ? '로딩 중...' : (userInfo.email || '이메일 정보 없음')}
</span> </span>
</div> </div>
</div> </div>
<div className="mt-6 flex flex-col gap-2"> <div className="mt-6 flex flex-col gap-2">
<label className="w-[100px] text-[15px] font-semibold leading-[1.5] text-[#6c7682]"> <label className="w-[100px] text-[15px] font-semibold leading-[1.5] text-text-label">
비밀번호 변경 비밀번호 변경
</label> </label>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="h-10 flex-1 rounded-lg border border-[#dee1e6] bg-neutral-50 px-3 py-2"> <div className="h-10 flex-1 rounded-lg border border-input-border bg-neutral-50 px-3 py-2">
<span className="text-[16px] leading-normal text-[#333c47]">●●●●●●●●●●</span> <span className="text-[16px] leading-normal text-neutral-700">●●●●●●●●●●</span>
</div> </div>
<button <button
type="button" type="button"
onClick={() => setOpen(true)} onClick={() => setOpen(true)}
className="h-10 rounded-lg bg-[#f1f3f5] px-4 text-[16px] font-semibold leading-[1.5] text-[#4c5561]" className="h-10 rounded-lg bg-bg-gray-light px-4 text-[16px] font-semibold leading-[1.5] text-basic-text"
> >
비밀번호 변경 비밀번호 변경
</button> </button>

36
src/app/menu/courses/CourseCard.tsx
View File

@@ -26,9 +26,9 @@ type Course = {
function ProgressBar({ value }: { value: number }) { function ProgressBar({ value }: { value: number }) {
const pct = Math.max(0, Math.min(100, value)); const pct = Math.max(0, Math.min(100, value));
return ( return (
<div className="relative h-1.5 w-full overflow-hidden rounded-full bg-[#ecf0ff]"> <div className="relative h-1.5 w-full overflow-hidden rounded-full bg-bg-primary-light">
<div <div
className="h-full rounded-full bg-[#384fbf] transition-[width] duration-300 ease-out" className="h-full rounded-full bg-primary transition-[width] duration-300 ease-out"
style={{ width: `${pct}%` }} style={{ width: `${pct}%` }}
/> />
</div> </div>
@@ -45,7 +45,7 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
const firstIncomplete = course.lessons.find((l) => !l.isCompleted)?.id; const firstIncomplete = course.lessons.find((l) => !l.isCompleted)?.id;
const cardClassName = [ const cardClassName = [
"rounded-xl bg-white shadow-[0_2px_8px_rgba(0,0,0,0.02)]", "rounded-xl bg-white shadow-[0_2px_8px_rgba(0,0,0,0.02)]",
open ? "border-[3px] border-[#384fbf]" : "border border-[#ecf0ff]", open ? "border-[3px] border-primary" : "border border-bg-primary-light",
].join(" "); ].join(" ");
const formatDuration = (m: number) => { const formatDuration = (m: number) => {
@@ -57,7 +57,7 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
return ( return (
<article className={cardClassName}> <article className={cardClassName}>
<header className="flex items-center gap-6 px-8 py-6"> <header className="flex items-center gap-6 px-8 py-6">
<div className="relative h-[120px] w-[180px] overflow-hidden rounded-[8px] bg-[#f1f3f5]"> <div className="relative h-[120px] w-[180px] overflow-hidden rounded-[8px] bg-bg-gray-light">
<Image <Image
src={`https://picsum.photos/seed/${encodeURIComponent(course.id)}/240/152`} src={`https://picsum.photos/seed/${encodeURIComponent(course.id)}/240/152`}
alt="" alt=""
@@ -69,19 +69,19 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="flex h-[20px] items-center justify-center rounded-[4px] bg-[#e5f5ec] px-[4px] text-[13px] font-semibold leading-[1.4] text-[#0c9d61]"> <span className="flex h-[20px] items-center justify-center rounded-[4px] bg-bg-success-light px-[4px] text-[13px] font-semibold leading-[1.4] text-success">
{course.status} {course.status}
</span> </span>
<h2 className="truncate text-[18px] font-semibold leading-normal text-[#333c47]"> <h2 className="truncate text-[18px] font-semibold leading-normal text-neutral-700">
{course.title} {course.title}
</h2> </h2>
</div> </div>
<p className="mt-1 line-clamp-2 text-[14px] leading-normal text-basic-text">{course.description}</p> <p className="mt-1 line-clamp-2 text-[14px] leading-normal text-basic-text">{course.description}</p>
<div className="mt-2 flex items-center justify-between gap-3"> <div className="mt-2 flex items-center justify-between gap-3">
<p className="text-[13px] leading-[1.4] text-[#8c95a1]"> <p className="text-[13px] leading-[1.4] text-text-meta">
VOD · 총 {course.lessons.length}강 · {totalHours}시간 {restMinutes}분 VOD · 총 {course.lessons.length}강 · {totalHours}시간 {restMinutes}분
</p> </p>
<p className="text-[13px] font-semibold leading-[1.4] text-[#384fbf]"> <p className="text-[13px] font-semibold leading-[1.4] text-primary">
전체 진도율: {course.progressPct}% 전체 진도율: {course.progressPct}%
</p> </p>
</div> </div>
@@ -94,7 +94,7 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
type="button" type="button"
aria-expanded={open} aria-expanded={open}
onClick={() => setOpen((v) => !v)} onClick={() => setOpen((v) => !v)}
className="flex h-8 w-8 items-center justify-center text-[#6c7682] cursor-pointer" className="flex h-8 w-8 items-center justify-center text-text-label cursor-pointer"
aria-label={open ? "접기" : "펼치기"} aria-label={open ? "접기" : "펼치기"}
> >
<ChevronDownSvg <ChevronDownSvg
@@ -110,14 +110,14 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
<div className="px-6 pb-6"> <div className="px-6 pb-6">
<ul className="flex flex-col gap-2"> <ul className="flex flex-col gap-2">
{course.lessons.map((lesson, idx) => ( {course.lessons.map((lesson, idx) => (
<li key={lesson.id} className="rounded-lg border border-[#dee1e6] bg-white"> <li key={lesson.id} className="rounded-lg border border-input-border bg-white">
<div className="flex items-center justify-between gap-4 px-[24px] py-[16px]"> <div className="flex items-center justify-between gap-4 px-[24px] py-[16px]">
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="truncate text-[16px] font-semibold leading-normal text-[#333c47]"> <p className="truncate text-[16px] font-semibold leading-normal text-neutral-700">
{`${idx + 1}. ${lesson.title}`} {`${idx + 1}. ${lesson.title}`}
</p> </p>
<div className="mt-2 flex items-center gap-3"> <div className="mt-2 flex items-center gap-3">
<span className="text-[13px] leading-[1.4] text-[#8c95a1]"> <span className="text-[13px] leading-[1.4] text-text-meta">
{formatDuration(lesson.durationMin)} {formatDuration(lesson.durationMin)}
</span> </span>
</div> </div>
@@ -128,8 +128,8 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
className={[ className={[
"inline-flex h-[32px] w-[140px] items-center justify-center gap-[6px] rounded-[6px] px-4 text-center whitespace-nowrap cursor-pointer", "inline-flex h-[32px] w-[140px] items-center justify-center gap-[6px] rounded-[6px] px-4 text-center whitespace-nowrap cursor-pointer",
lesson.isCompleted lesson.isCompleted
? "bg-white text-[13px] font-medium leading-[1.4] text-[#384fbf]" ? "bg-white text-[13px] font-medium leading-[1.4] text-primary"
: "bg-white text-[14px] font-medium leading-normal text-basic-text border border-[#8c95a1]", : "bg-white text-[14px] font-medium leading-normal text-basic-text border border-text-meta",
].join(" ")} ].join(" ")}
> >
{lesson.isCompleted ? ( {lesson.isCompleted ? (
@@ -144,7 +144,7 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
> >
<path <path
d="M8.75 0.75L3.25 6.25L0.75 3.75" d="M8.75 0.75L3.25 6.25L0.75 3.75"
stroke="#384FBF" stroke="var(--color-primary)"
strokeWidth="1.5" strokeWidth="1.5"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
@@ -160,7 +160,7 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
<button <button
type="button" type="button"
onClick={() => router.push(`/menu/courses/lessons/${lesson.id}/review`)} onClick={() => router.push(`/menu/courses/lessons/${lesson.id}/review`)}
className="inline-flex h-[32px] w-[140px] items-center justify-center rounded-[6px] bg-[#f1f3f5] px-4 text-center text-[14px] font-medium leading-normal text-basic-text whitespace-nowrap cursor-pointer" className="inline-flex h-[32px] w-[140px] items-center justify-center rounded-[6px] bg-bg-gray-light px-4 text-center text-[14px] font-medium leading-normal text-basic-text whitespace-nowrap cursor-pointer"
> >
복습하기 복습하기
</button> </button>
@@ -177,8 +177,8 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
className={[ className={[
"inline-flex h-[32px] w-[140px] items-center justify-center rounded-[6px] px-4 text-center text-[14px] font-medium leading-normal whitespace-nowrap cursor-pointer", "inline-flex h-[32px] w-[140px] items-center justify-center rounded-[6px] px-4 text-center text-[14px] font-medium leading-normal whitespace-nowrap cursor-pointer",
lesson.id === firstIncomplete lesson.id === firstIncomplete
? "bg-[#ecf0ff] text-[#384fbf]" ? "bg-bg-primary-light text-primary"
: "border border-[#dee1e6] text-basic-text", : "border border-input-border text-basic-text",
].join(" ")} ].join(" ")}
> >
{lesson.id === firstIncomplete ? "이어서 수강하기" : "수강하기"} {lesson.id === firstIncomplete ? "이어서 수강하기" : "수강하기"}

74
src/app/page.tsx
View File

@@ -3,12 +3,11 @@
import { useEffect, useMemo, useRef, useState } from 'react'; import { useEffect, useMemo, useRef, useState } from 'react';
import MainLogoSvg from './svgs/mainlogosvg'; import MainLogoSvg from './svgs/mainlogosvg';
import ChevronDownSvg from './svgs/chevrondownsvg';
export default function Home() { export default function Home() {
const containerRef = useRef<HTMLDivElement | null>(null); const containerRef = useRef<HTMLDivElement | null>(null);
const [currentIndex, setCurrentIndex] = useState(0); const [currentIndex, setCurrentIndex] = useState(0);
const [isNameActive, setIsNameActive] = useState(false); const [userName, setUserName] = useState<string>('');
// 코스, 공지사항 더미 데이터 // 코스, 공지사항 더미 데이터
const courseCards = useMemo( const courseCards = useMemo(
@@ -114,6 +113,57 @@ export default function Home() {
[] []
); );
// 사용자 정보 가져오기
useEffect(() => {
let isMounted = true;
async function fetchUserInfo() {
try {
const localStorageToken = localStorage.getItem('token');
const cookieToken = document.cookie
.split('; ')
.find(row => row.startsWith('token='))
?.split('=')[1];
const token = localStorageToken || cookieToken;
if (!token) {
return;
}
const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL
? `${process.env.NEXT_PUBLIC_API_BASE_URL}/auth/me`
: 'https://hrdi.coconutmeet.net/auth/me';
const response = await fetch(apiUrl, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`,
},
});
if (!response.ok) {
return;
}
const data = await response.json();
if (isMounted && data.name) {
setUserName(data.name);
}
} catch (error) {
console.error('사용자 정보 조회 오류:', error);
}
}
fetchUserInfo();
return () => {
isMounted = false;
};
}, []);
useEffect(() => { useEffect(() => {
const containerEl = containerRef.current; const containerEl = containerRef.current;
if (!containerEl) return; if (!containerEl) return;
@@ -141,10 +191,6 @@ export default function Home() {
const handlePrev = () => scrollToIndex(currentIndex - 1); const handlePrev = () => scrollToIndex(currentIndex - 1);
const handleNext = () => scrollToIndex(currentIndex + 1); const handleNext = () => scrollToIndex(currentIndex + 1);
const handleNameClick = () => {
setIsNameActive((prev) => !prev);
};
return ( return (
<div className="w-full min-h-screen flex flex-col bg-white"> <div className="w-full min-h-screen flex flex-col bg-white">
<main className="flex-1"> <main className="flex-1">
@@ -223,19 +269,9 @@ export default function Home() {
<div className="px-8 py-8"> <div className="px-8 py-8">
<div className="mb-6"> <div className="mb-6">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <span className="text-[18px] font-bold leading-normal text-[#333C47]">
type="button" {userName ? `${userName}님` : '사용자님'}
onClick={handleNameClick} </span>
aria-expanded={isNameActive}
className="m-0 p-0 bg-transparent border-0 text-[18px] font-bold leading-normal text-[#333C47] cursor-pointer inline-flex items-center gap-1"
>
김하늘님
<ChevronDownSvg
width={20}
height={20}
className={'transition-transform duration-200 ' + (isNameActive ? 'rotate-180' : 'rotate-0')}
/>
</button>
<span className="text-[18px] font-bold leading-normal text-[#333C47]">환영합니다.</span> <span className="text-[18px] font-bold leading-normal text-[#333C47]">환영합니다.</span>
</div> </div>
</div> </div>