대학교 수강신청 매번 너무 어렵죠? 이제 ClassPick으로 충분히 연습하고 도전해보세요!
지금 바로 사용해보세요 → https://classpick.netlify.app
수강신청, 한 번쯤 망쳐본 적 있으시죠?
짧은 시간 안에 정확하게 클릭해야 하는데, 처음 수강신청을 앞둔 신입생은 실제 화면을 한 번도 본 적 없이 당일을 맞이하게 돼요. 긴장되는 건 당연한 일이에요.
ClassPick은 실제 수강신청 흐름인 로그인 대기 → 화면 접속 → 캡차 인증 → 과목 신청 → 마감을 그대로 재현해서, 실전처럼 연습할 수 있는 환경을 제공해요. 미리 충분히 손에 익혀두면, 당일에 훨씬 여유롭게 신청할 수 있어요!
별도의 과목 설정 없이 지금 바로 수강신청을 체험할 수 있어요!
- '지금 바로 체험하기' 버튼 하나로 즉시 시작해요.
- 타이머 제한 없이 전 과목 신청 시 자동 완료돼요.
- 결과는 일회용이며 랭킹에 기록되지 않아요.
- 체험 종료 후 기존 설정이 자동으로 복원돼요.
원하는 과목을 직접 설정하고 수강신청 화면을 자유롭게 체험해볼 수 있어요.
- 수강꾸러미: 화면에 목록으로 표시되는 과목이에요. [신청] 버튼을 클릭해서 신청해요.
- 이미 신청된 과목: 연습 시작 시점에 이미 신청 완료 상태로 설정할 수 있어요.
- 코드 입력 과목: 강좌번호를 직접 타이핑해야 신청되는 과목이에요.
신청·삭제할 때마다 화면에 표시된 숫자를 입력해야 해요. 실제 수강신청의 보안코드 입력 과정을 그대로 재현했어요.
진짜 수강신청 당일 상황을 재현해드려요!
- 오전 10시 대기 화면 → 입장 직후 흰 화면(서버 부하 상황) → 과목 마감 순서로 진행돼요.
- 각 과목은 설정된 난이도에 따라 랜덤 시간에 자동으로 마감돼요.
- 쉬움 / 보통 / 어려움 세 가지 난이도 중에서 선택할 수 있어요.
모든 사용자가 동일한 과목 세트로 경쟁하는 모드예요!
- 닉네임을 입력하고 도전하면 소요 시간이 서버에 기록돼요.
- 전 과목 신청 성공 시에만 랭킹에 등록돼요. 하나라도 마감되면 기록되지 않아요.
- 닉네임별로 최고 기록만 유지되고, 재도전 횟수 제한은 없어요. 얼마든지 도전해보세요!
다른 사람들의 기록도 한눈에 볼 수 있어요.
- 닉네임으로 검색하거나, 소요 시간순/최신순으로 정렬할 수 있어요.
- 100명씩 무한 스크롤로 편하게 탐색할 수 있어요.
더 빠르고 편하게 연습할 수 있도록 다양한 편의 기능도 준비했어요.
- 프리셋 저장/불러오기: 자주 쓰는 과목 세트를 이름 붙여 저장해두세요.
- 과목 이동: 수강꾸러미 ↔ 이미 신청된 과목 ↔ 코드 입력 과목 간에 자유롭게 이동할 수 있어요.
| 분류 | 기술 | 선택 이유 |
|---|---|---|
| UI 프레임워크 | React 19 | 컴포넌트 기반 구조로 수강신청 UI를 재사용 가능하게 분리 |
| 빌드 도구 | Vite 7 | 빠른 개발 서버와 번들링으로 즉각적인 피드백 |
| 라우팅 | React Router v7 | SPA에서 설정/로그인/수강신청/결과 화면 간 이동 관리 |
| 백엔드 | Firebase Firestore | 별도 서버 없이 랭킹 데이터를 실시간으로 저장·조회 |
| 인증 | Firebase Anonymous Auth | 회원가입 없이 익명으로 랭킹 도전 가능 |
| 시간 측정 | Firebase Server Timestamp | 클라이언트 조작이 불가능한 공정한 서버 기준 시간 기록 |
| 배포 | Netlify | GitHub 연동 자동 배포, SPA 라우팅 지원 |
| 상태 저장 | localStorage | 과목 설정·프리셋을 브라우저에 영구 보존 |
- Node.js 20 이상 (Vite 7 요구사항)
- Firebase 프로젝트 (Firestore + Anonymous Auth 활성화)
# 1. 저장소 클론
git clone https://github.com/ganglike248/classPick.git
cd classPick
# 2. 의존성 설치
npm install
# 3. 환경 변수 설정
cp .env.example .env
# .env 파일에 Firebase 설정값 입력
# 4. 개발 서버 실행
npm run devVITE_FIREBASE_API_KEY=...
VITE_FIREBASE_AUTH_DOMAIN=...
VITE_FIREBASE_PROJECT_ID=...
VITE_FIREBASE_STORAGE_BUCKET=...
VITE_FIREBASE_MESSAGING_SENDER_ID=...
VITE_FIREBASE_APP_ID=...npm run buildsrc/
├── main.jsx # React 앱 마운트 진입점
├── App.jsx # 라우팅 설정
├── firebase.js # Firebase 초기화
├── components/
│ ├── common/ # 공통 컴포넌트 (Modal)
│ ├── layout/ # TopBand, Footer, MainNav
│ ├── setup/ # 설정 화면 전용 컴포넌트
│ │ ├── CourseTable.jsx
│ │ ├── CourseAddForm.jsx
│ │ ├── PresetManager.jsx
│ │ └── PracticeModeSetup.jsx
│ └── register/ # 수강신청 화면 전용 컴포넌트
│ ├── Captcha.jsx
│ ├── CartCourses.jsx
│ ├── CodeInput.jsx
│ ├── PracticeTimer.jsx
│ ├── RegisteredCourses.jsx
│ └── StudentInfo.jsx
├── data/
│ └── challengeData.js # 랭킹 도전 과목 세트 설정
├── hooks/
│ ├── useClock.js # 실시간 시계 훅
│ └── useCaptcha.js # 보안코드 생성 및 검증 훅
├── pages/
│ ├── SetupPage.jsx # 과목 설정 화면 (메인)
│ ├── RegisterPage.jsx # 수강신청 연습 화면
│ ├── PracticeLoginPage.jsx # 실전/체험 모드 로그인 대기 화면
│ ├── ChallengePage.jsx # 랭킹 도전 참가 화면
│ ├── RankingPage.jsx # 랭킹 조회 화면
│ ├── ResultPage.jsx # 결과 화면
│ ├── PrivacyPage.jsx # 개인정보처리방침
│ └── TermsPage.jsx # 이용약관
├── utils/
│ ├── storage.js # localStorage 상태 관리
│ ├── courseUtils.js # 과목 관련 유틸 함수
│ ├── practiceUtils.js # 실전 모드 타이밍·난이도 로직
│ └── rankingUtils.js # Firebase 랭킹 CRUD
└── styles/
└── global.css # 전체 공통 스타일
문의와 피드백은 언제나 환영해요! 사용하다가 불편한 점이나 개선됐으면 하는 부분이 있다면 언제든지 아래 메일로 편하게 보내주세요.
더 좋은 서비스를 만드는 데 큰 도움이 돼요. 감사합니다!
본 프로젝트는 교육 목적의 개인 포트폴리오예요. 실제 대학교 수강신청 시스템과는 무관합니다.