feat(dashboard): 주차 체크리스트 → 학습 문서 연결 고리
대시보드에도 '이 주차 학습 문서' 링크를 붙였다. 과제 페이지와 같은 패턴. 대시보드가 '오늘 뭐하지'만 보여주고 끝나던 것 → 문서→체크 흐름의 허브로.
This commit is contained in:
parent
6f1c78bc03
commit
4b64d0ac9c
@ -129,6 +129,7 @@ export default function DashboardPage() {
|
|||||||
const [checkedIds, setCheckedIds] = useState(new Set()); // 내가 체크한 항목 id들
|
const [checkedIds, setCheckedIds] = useState(new Set()); // 내가 체크한 항목 id들
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [toggleError, setToggleError] = useState(''); // 체크 저장 실패 안내
|
const [toggleError, setToggleError] = useState(''); // 체크 저장 실패 안내
|
||||||
|
const [docs, setDocs] = useState([]); // 학습 문서 목록(주차별 과제집 연결용)
|
||||||
|
|
||||||
// 학습 포인트: week가 바뀔 때마다 useEffect가 다시 실행된다 (의존성 배열 [week]).
|
// 학습 포인트: week가 바뀔 때마다 useEffect가 다시 실행된다 (의존성 배열 [week]).
|
||||||
// 체크리스트와 내 진행 상황을 함께 불러온다.
|
// 체크리스트와 내 진행 상황을 함께 불러온다.
|
||||||
@ -155,6 +156,11 @@ export default function DashboardPage() {
|
|||||||
};
|
};
|
||||||
}, [week]);
|
}, [week]);
|
||||||
|
|
||||||
|
// 학습 문서 목록을 한 번 불러온다 — 대시보드에서 이 주차 학습 문서로 바로 잇기 위해.
|
||||||
|
useEffect(() => {
|
||||||
|
client.get('/documents').then((res) => setDocs(res.data)).catch(() => {});
|
||||||
|
}, []);
|
||||||
|
|
||||||
async function toggle(itemId) {
|
async function toggle(itemId) {
|
||||||
// 서버에 토글을 요청하고, 서버가 알려준 최종 상태(checked)로 화면을 맞춘다.
|
// 서버에 토글을 요청하고, 서버가 알려준 최종 상태(checked)로 화면을 맞춘다.
|
||||||
// 학습 포인트: 저장이 실패하면(오프라인·세션만료·500) 조용히 넘어가면 학생은 "체크를
|
// 학습 포인트: 저장이 실패하면(오프라인·세션만료·500) 조용히 넘어가면 학생은 "체크를
|
||||||
@ -179,6 +185,9 @@ export default function DashboardPage() {
|
|||||||
const doneCount = items.filter((item) => checkedIds.has(item.id)).length;
|
const doneCount = items.filter((item) => checkedIds.has(item.id)).length;
|
||||||
const percent = items.length === 0 ? 0 : Math.round((doneCount / items.length) * 100);
|
const percent = items.length === 0 ? 0 : Math.round((doneCount / items.length) * 100);
|
||||||
|
|
||||||
|
// 이 주차 학습 문서(주차별 과제집). 대시보드에서 "무엇부터 볼지"를 잇는 고리.
|
||||||
|
const weekDocs = docs.filter((d) => d.week === week);
|
||||||
|
|
||||||
// day별로 묶어서 보여준다 (day가 null인 항목은 "주간 공통"으로).
|
// day별로 묶어서 보여준다 (day가 null인 항목은 "주간 공통"으로).
|
||||||
const groups = new Map();
|
const groups = new Map();
|
||||||
for (const item of items) {
|
for (const item of items) {
|
||||||
@ -253,6 +262,19 @@ export default function DashboardPage() {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* 이 주차 학습 문서로 가는 고리 — 대시보드를 "학습 허브"로. 문서 → 체크 흐름을 만든다. */}
|
||||||
|
{weekDocs.length > 0 && (
|
||||||
|
<div className="assignment-doc-links">
|
||||||
|
{weekDocs.map((d) => (
|
||||||
|
<Link key={d.slug} to={`/docs/${d.slug}`} className="card assignment-doc-link">
|
||||||
|
<span className="assignment-doc-badge">📚 학습 문서</span>
|
||||||
|
<span className="assignment-doc-title">{d.title}</span>
|
||||||
|
<span className="assignment-doc-cta">체크 전에 먼저 읽어 보세요 →</span>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{toggleError && (
|
{toggleError && (
|
||||||
<p className="error-text" role="alert" style={{ marginBottom: 10 }}>{toggleError}</p>
|
<p className="error-text" role="alert" style={{ marginBottom: 10 }}>{toggleError}</p>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user