Timetable Web Application

프로젝트 소개

React를 활용해 제작한 간단한 타임테이블 웹 애플리케이션입니다.
사용자가 시작 화면(Landing)을 거쳐 시간표 입력 화면(Entry)으로 진입하는 구조로 설계했습니다.

기존에 제작했던 시간표 프로젝트를 기반으로,
컴포넌트 구조를 정리하고 UI 완성도를 개선하는 데 초점을 두었습니다.

---

사용 기술

• React
• JavaScript (ES6)
• CSS (style.css)
• React Hooks (useState)

---

프로젝트 구조

src/
├─ App.js
├─ pages/
│ ├─ Landing.js
│ └─ Entry.js
├─ assets/
│ └─ cassette.png
├─ styles/
│ └─ style.css
├─ components/
│ ├─ Cassette.js
│ └─ Timetable.js
└─ index.js

---

핵심 구현 내용

상태 기반 화면 전환

• useState를 활용하여 앱의 시작 상태 관리
• started 값에 따라 Landing ↔ Entry 화면 전환
• 별도의 라우팅 없이 상태 기반 UI 제어 구현

const [started, setStarted] = useState(false);

{started ? <Entry /> : <Landing onStart={() => setStarted(true)} />}

컴포넌트 분리 설계

• Landing : 시작 화면
• Entry : 시간표 입력 화면 역할에 따라 파일을 분리하여 구조를 명확하게 설계했습니다.

디자인 개선

• style.css로 전체 스타일 통합 관리
• 직접 폰트를 적용하여 시각적 완성도 향상
• 레이아웃 정렬 및 UI 일관성 개선

---

배운 점

• React 상태 기반 UI 전환 구조 이해
• 컴포넌트 분리 설계의 중요성 체득
• 기능뿐 아니라 디자인 완성도가 사용자 경험에 미치는 영향 학습

---

실행 방법

npm install
npm start

브라우저에서 http://localhost:3000 접속