Skip to content

[Feat] 세션 상태별 커리큘럼 콘텐츠 노출 분기 처리 #186

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
xihxxn merged 2 commits into from
Jun 7, 2026
Merged

[Feat] 세션 상태별 커리큘럼 콘텐츠 노출 분기 처리 #186

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ec5e954
[Feat] 세션 상태별 커리큘럼 콘텐츠 노출 분기 처리
xihxxn Jun 7, 2026
5677e69
[Fix] role 상태를 useState로 이동하여 첫 렌더링 시 권한 반영
xihxxn Jun 7, 2026
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
57 changes: 35 additions & 22 deletions frontend/src/pages/curriculum/CurriculumPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,9 @@ import AmImg from '../../assets/images/am.png';
import PmImg from '../../assets/images/pm.png';
import Toggle1 from '../../assets/images/icon_togle1.svg';

const role = localStorage.getItem('role') || 'MEMBER';

const DAY_LABEL = { SUNDAY: '일요일', MONDAY: '월요일', TUESDAY: '화요일', WEDNESDAY: '수요일', THURSDAY: '목요일', FRIDAY: '금요일', SATURDAY: '토요일' };
const STATUS_OPTIONS = ['BEFORE', 'ONGOING', 'AFTER'];
const STATUS_LABEL = { BEFORE: '세션 전', ONGOING: '세션 중', AFTER: '세션 후' };
const STATUS_OPTIONS = ['BEFORE_SESSION', 'IN_SESSION', 'AFTER_SESSION'];
const STATUS_LABEL = { BEFORE_SESSION: '세션 전', IN_SESSION: '세션 중', AFTER_SESSION: '세션 후' };

// sessionDate(yyyy-mm-dd)에서 요일 계산
function getWeekDayFromDate(dateStr) {
Expand All @@ -25,28 +23,35 @@ function getWeekDayFromDate(dateStr) {
function SessionInfo({ session, isAdmin }) {
const icon = session.dayPart === 'AM' ? AmImg : PmImg;
const label = session.dayPart === 'AM' ? '오전 세션' : '오후 세션';
const status = session.status;
const showDetail = isAdmin || status === 'IN_SESSION' || status === 'AFTER_SESSION';
const showRecording = isAdmin || status === 'AFTER_SESSION';

return (
<div className={styles.sessionInfo}>
<div className={styles.sessionTitleRow}>
<img src={icon} className={styles.sessionIcon} alt={label} />
<span className={styles.sessionTitle}>{session.title}</span>
<span className={styles.sessionHost}>{session.hostName}</span>
</div>
<div className={styles.sessionDetailRow}>
<span className={styles.sessionDetailLabel}>세션 자료</span>
{session.sessionMaterialUrl
? <a href={session.sessionMaterialUrl} className={styles.sessionLink} target="_blank" rel="noreferrer">{session.sessionMaterialName || '링크'}</a>
: <span className={styles.sessionDetailVal}>{session.sessionMaterialName || '-'}</span>
}
</div>
<div className={styles.sessionDetailRow}>
{session.recordingUrl
? <a href={session.recordingUrl} className={styles.sessionLink} target="_blank" rel="noreferrer">녹화본</a>
: <span className={styles.sessionDetailVal}>-</span>
}
{session.recordingPassword && <span className={styles.sessionPw}>PW : {session.recordingPassword}</span>}
{showDetail && <span className={styles.sessionHost}>{session.hostName}</span>}
</div>
{showDetail && (
<div className={styles.sessionDetailRow}>
<span className={styles.sessionDetailLabel}>세션 자료</span>
{session.sessionMaterialUrl
? <a href={session.sessionMaterialUrl} className={styles.sessionLink} target="_blank" rel="noreferrer">{session.sessionMaterialName || '링크'}</a>
: <span className={styles.sessionDetailVal}>{session.sessionMaterialName || '-'}</span>
}
</div>
)}
{showRecording && (
<div className={styles.sessionDetailRow}>
{session.recordingUrl
? <a href={session.recordingUrl} className={styles.sessionLink} target="_blank" rel="noreferrer">녹화본</a>
: <span className={styles.sessionDetailVal}>-</span>
}
{session.recordingPassword && <span className={styles.sessionPw}>PW : {session.recordingPassword}</span>}
</div>
)}
</div>
);
}
Expand All @@ -57,6 +62,7 @@ function MemberSessionCard({ day }) {
const amSession = day.sessions?.find(s => s.dayPart === 'AM');
const pmSession = day.sessions?.find(s => s.dayPart === 'PM');
const weekDay = getWeekDayFromDate(day.sessionDate) || DAY_LABEL[day.dayOfWeek] || '';
const showAssignment = amSession?.status === 'AFTER_SESSION' && pmSession?.status === 'AFTER_SESSION';

return (
<div className={styles.sessionCard}>
Expand All @@ -73,7 +79,7 @@ function MemberSessionCard({ day }) {
<div className={styles.cardBody}>
{amSession && <SessionInfo session={amSession} />}
{pmSession && <SessionInfo session={pmSession} />}
{(day.assignmentName || day.assignmentUrl) && (
{showAssignment && (day.assignmentName || day.assignmentUrl) && (
<div className={styles.assignmentRow}>
<span className={styles.assignmentLabel}>과제</span>
{day.assignmentUrl
Expand Down Expand Up @@ -143,14 +149,14 @@ function SessionForm({ day, week, onClose, onSave }) {
amMaterialName: day?.sessions?.find(s => s.dayPart === 'AM')?.sessionMaterialName || '',
amRecordingUrl: day?.sessions?.find(s => s.dayPart === 'AM')?.recordingUrl || '',
amRecordingPw: day?.sessions?.find(s => s.dayPart === 'AM')?.recordingPassword || '',
amStatus: day?.sessions?.find(s => s.dayPart === 'AM')?.status || 'BEFORE',
amStatus: day?.sessions?.find(s => s.dayPart === 'AM')?.status || 'BEFORE_SESSION',
pmTitle: day?.sessions?.find(s => s.dayPart === 'PM')?.title || '',
pmHost: day?.sessions?.find(s => s.dayPart === 'PM')?.hostName || '',
pmMaterialUrl: day?.sessions?.find(s => s.dayPart === 'PM')?.sessionMaterialUrl || '',
pmMaterialName: day?.sessions?.find(s => s.dayPart === 'PM')?.sessionMaterialName || '',
pmRecordingUrl: day?.sessions?.find(s => s.dayPart === 'PM')?.recordingUrl || '',
pmRecordingPw: day?.sessions?.find(s => s.dayPart === 'PM')?.recordingPassword || '',
pmStatus: day?.sessions?.find(s => s.dayPart === 'PM')?.status || 'BEFORE',
pmStatus: day?.sessions?.find(s => s.dayPart === 'PM')?.status || 'BEFORE_SESSION',
assignmentUrl: day?.assignmentUrl || '',
assignmentName: day?.assignmentName || '',
});
Expand Down Expand Up @@ -312,11 +318,18 @@ function SessionForm({ day, week, onClose, onSave }) {

// ── 메인 컴포넌트 ─────────────────────────────────────
function CurriculumPage() {
const [role, setRole] = useState(localStorage.getItem('role') || 'MEMBER');
const [days, setDays] = useState([]);
const [showForm, setShowForm] = useState(false);
const [editDay, setEditDay] = useState(null);
const [createWeek, setCreateWeek] = useState(null);

useEffect(() => {
const handleStorage = () => setRole(localStorage.getItem('role') || 'MEMBER');
window.addEventListener('storage', handleStorage);
return () => window.removeEventListener('storage', handleStorage);
}, []);

const fetchDays = async () => {
try {
const res = await authFetch('/api/curriculums');
Expand Down
Loading