diff --git a/src/pages/MyPage.tsx b/src/pages/MyPage.tsx index 920206f..e917ee6 100644 --- a/src/pages/MyPage.tsx +++ b/src/pages/MyPage.tsx @@ -1,5 +1,6 @@ +import { useState } from 'react'; import { Link } from 'react-router-dom'; -import { MdChevronRight } from 'react-icons/md'; +import { MdChevronRight, MdClose } from 'react-icons/md'; const PROFILE_IMAGE = '/Group%20105.png'; const PAGE_WIDTH_CLASS = 'max-w-[1180px]'; @@ -7,18 +8,18 @@ const PAGE_WIDTH_CLASS = 'max-w-[1180px]'; const scheduleItems = [ { subject: '소프트웨어공학', - title: '소프트웨어 공학의 모든 것 2장', - tone: 'green', + title: '디자인 패턴의 이해와 실습', + tone: 'green' as const, }, { subject: '자료구조', - title: '스택과 큐 자료구조 정리', - tone: 'orange', + title: '해시 테이블과 성능 최적화', + tone: 'orange' as const, }, { - subject: '운영체제', - title: '프로세스와 스레드 개념 정리', - tone: 'blue', + subject: '물리학실험', + title: '전자기 유도 현상 측정 실험', + tone: 'blue' as const, }, ] as const; @@ -26,26 +27,33 @@ const lectures = [ { subject: '소프트웨어공학', period: '2026.03.02 ~ 수강중', - notes: '15개 노트', + notes: '3개 노트', color: '#4adf96', + scripts: [ + { id: 1, name: '디자인 패턴 서론', date: '2026.05.11', time: '14:30' }, + { id: 2, name: '싱글톤 패턴 실습', date: '2026.05.04', time: '14:32' }, + { id: 3, name: '옵저버 패턴의 활용', date: '2026.04.27', time: '14:28' }, + ], }, { subject: '자료구조', period: '2026.03.02 ~ 수강중', - notes: '8개 노트', + notes: '2개 노트', color: '#ff7f29', - }, - { - subject: '운영체제', - period: '2026.03.02 ~ 수강중', - notes: '16개 노트', - color: '#34cfe4', + scripts: [ + { id: 1, name: '해시 테이블 기초', date: '2026.05.12', time: '10:00' }, + { id: 2, name: '충돌 해결 전략', date: '2026.05.05', time: '10:05' }, + ], }, { subject: '물리학실험', period: '2026.03.02 ~ 수강중', - notes: '15개 노트', - color: '#ff6ec5', + notes: '2개 노트', + color: '#34cfe4', + scripts: [ + { id: 1, name: '전자기 유도 실험 데이터', date: '2026.05.13', time: '16:00' }, + { id: 2, name: '렌츠의 법칙 검증', date: '2026.05.06', time: '16:15' }, + ], }, ] as const; @@ -80,6 +88,7 @@ function getTodayInfo() { export default function MyPage() { const { fullDate, dayName, weekDays, todayDate } = getTodayInfo(); + const [selectedLecture, setSelectedLecture] = useState<(typeof lectures)[number] | null>(null); return (
@@ -150,14 +159,78 @@ export default function MyPage() {
- -
- {lectures.map((lecture) => ( - - ))} +
+ {/* Left Side: Lecture List */} +
+ +
+ {lectures.map((lecture) => ( + + setSelectedLecture((current) => + current?.subject === lecture.subject ? null : lecture, + ) + } + active={selectedLecture?.subject === lecture.subject} + isNarrow={!!selectedLecture} + /> + ))} +
+
+ + {/* Right Side: Detail Panel */} +
+ {selectedLecture && ( +
+
+

+ {selectedLecture.subject} +

+ +
+ +
+ {selectedLecture.scripts.map((script) => ( +
+
+

{script.name}

+ +
+
+ {script.date} + • + {script.time} 저장 +
+
+ ))} +
+

전체 요약 노트 보기

+

핵심 내용과 퀴즈가 포함되어 있습니다

+
+
+
+ )} +
@@ -256,7 +329,7 @@ function StatsCard() { const stats = [ ['학교', '한국공학대학교'], ['학점', '3.5'], - ['강의 수', '7'], + ['강의 수', '3'], ]; return ( @@ -287,39 +360,45 @@ function LectureTabs() {
- -
- - -
); } function LectureRow({ - subject, - period, - notes, - color, + lecture, + onClick, + active, + isNarrow, }: { - subject: string; - period: string; - notes: string; - color: string; + lecture: (typeof lectures)[number]; + onClick: () => void; + active: boolean; + isNarrow: boolean; }) { return ( - );