✍️ 4주차 복습

💡 배운점

이번 주는 클론 코딩을 구현했다.

다음과 같이 페이지를 구성하여 화면을 구현하였다.

📌 CourseCard.jsx

역할

1. 개별 강의 정보를 카드 형태로 시각화
2. 교과 구분, 강의명, 교수명, ‘NEW’ 뱃지를 props로 받아 표시
3. 기본 교과 유형은 일반, 필요 시 사이버 등으로 변경 가능

구현

  title="프로그래밍언어론[4]" 
  instructor="정예원" 
  badge="NEW" 
/>

export default function CourseCard({ title, instructor, badge, type = "일반" }) {
  return (
    <div className="flex items-center p-4 border-b">
      ...
    </div>
  );
}

📌 CoursePage.jsx

역할

1. 강의 리스트 전체 페이지
2. 여러 CourseCard를 나열해 사용자가 수강할 과목을 고를 수 있도록 구성

구현

export default function CoursePage() {
  return (
    <div className="p-6">
      <CourseCard title="객체지향프로그래밍[4]" instructor="고재욱" />
      ...
    </div>
  );
}

📌 CalendarPanel.jsx

역할

1. 우측 고정 패널로 공지사항 + 달력 기능 제공
2. react-calendar 라이브러리를 사용하여 날짜 선택 구현
3. 선택 날짜는 useState로 관리

구현

import Calendar from 'react-calendar';

export default function CalendarPanel() {
  const [value, setValue] = useState(new Date());

  return (
    <Calendar value={value} onChange={setValue} />
  );
}

📌 Sidebar.jsx

역할

1. 좌측 고정된 메뉴 영역
2. 현재는 정적인 텍스트, 추후 라우팅 링크로 확장 가능

구현

export default function Sidebar() {
  return (
    <aside className="w-48 bg-gray-800 text-white p-4 space-y-4">
      <div>나의 강좌</div>
      <div>자율강좌</div>
    </aside>
  );
}

📌 Topbar.jsx

역할

1. 상단 헤더로 사용자명과 로그아웃 버튼을 포함
2. flex와 justify-between으로 레이아웃 정렬

구현

export default function Topbar() {
  return (
    <header className="bg-blue-900 text-white p-4 flex justify-between items-center">
      <span>김수진</span>
      <button className="bg-blue-400 px-3 py-1 rounded">로그아웃</button>
    </header>
  );
}

📌 App.jsx

역할

1. 전체 앱의 레이아웃과 라우팅의 중심 역할을 수행하는 최상위 컴포넌트
2. BrowserRouter를 통해 SPA 라우팅 처리
3. Sidebar, Topbar, CoursePage, CalendarPanel 등을 조합하여 3단 분할 레이아웃 구성

구현

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import CoursePage from './pages/CoursePage.jsx';
import Sidebar from './components/Sidebar.jsx';
import Topbar from './components/Topbar.jsx';
import CalendarPanel from './components/CalendarPanel.jsx';

function App() {
  return (
    <BrowserRouter>
      <div className="flex min-h-screen">
        <Sidebar />
        <div className="flex-1 flex flex-col">
          <Topbar />
          <div className="flex flex-1">
            <div className="flex-1">
              <Routes>
                <Route path="/" element={<CoursePage />} />
              </Routes>
            </div>
            <CalendarPanel />
          </div>
        </div>
      </div>
    </BrowserRouter>
  );
}

최종으로 App.js에서 BrowserRouter로 전체 앱 라우팅 영역을 감쌌고, Route를 통해 URL별 컴포넌트 분기를 구현했다.
flex 레이아웃으로 Sidebar, Topbar, CalendarPanel을 정렬하고, min-h-screen을 통해 세로 높이 유지를 하여, 빈 공간 없이 꽉 찬 UI 설계하였다.

최종적으로 홍익대학교 클래스룸을 구현할 수 있었다.

✍️ 느낀점

이번 클론 코딩을 통해 컴포넌트를 분리하고, 데이터를 전달하고 조합하는 방식, TailwindCSS를 통한 UI 구조 설계까지 실제 프론트엔드 개발 흐름을 체계적으로 연습할 수 있었다. 특히, 컴포넌트를 독립적으로 설계하고 props를 통해 유연하게 조정하는 방식을 배웠다.