SNU 졸업요건 추적기

서울대학교 학생들을 위한 졸업 요건 추적 시스템입니다. 학점 기반으로 졸업 요건을 쉽게 관리하고 추적할 수 있습니다.

🎯 주요 기능

📊 요구사항 추적

• 전공: 62학점 (단일전공) / 48학점 (복수전공시)
  • 전공필수/전공선택 세부 현황 표시
• 교양: 50학점
• 공대공통: 3학점
• 복수전공: 39학점 (복수전공 활성화시)
• 졸업: 130학점 (전체)

🎓 학점 관리

• 동적 학기 추가/삭제: 기본 8학기 외 추가 학기 생성 가능
• 과목별 상세 정보:
  • 과목명 입력
  • 전공 구분 (주전공/복수전공)
  • 학점 입력 (0.5 단위, 기본값 3학점)
• 실시간 진행상황: 입력 즉시 요구사항 업데이트

💾 데이터 관리

• Google 로그인: Google OAuth 2.0을 통한 안전한 인증
• 클라우드 동기화: Supabase를 통한 기기 간 데이터 동기화
• 자동 저장: LocalStorage 및 클라우드 이중 백업
• 실시간 계산: 학점 입력시 즉각적인 요구사항 업데이트
• 상태 관리: Zustand를 활용한 효율적인 상태 관리

🚀 빠른 시작

설치

npm install --legacy-peer-deps

개발 서버 실행

npm run dev

프로덕션 빌드

npm run build

프리뷰

npm run preview

🏗️ 기술 스택

• Frontend: React 18 + TypeScript
• Build Tool: Vite
• State Management: Zustand with persist middleware
• Styling: Custom CSS with CSS Grid & Flexbox
• Backend: Supabase (PostgreSQL + Auth + API)
• Authentication: Google OAuth 2.0
• Deployment: Vercel
• Data Storage: LocalStorage + Cloud (Supabase)

📁 프로젝트 구조

src/
├── components/          # UI 컴포넌트
│   ├── Header.tsx      # 앱 헤더 + 로그인 버튼
│   ├── AuthButton.tsx  # Google 로그인/로그아웃 버튼
│   ├── RequirementCards.tsx  # 요구사항 진행 카드
│   ├── SemesterGrid.tsx      # 학기별 학점 입력 그리드
│   ├── SyncStatus.tsx  # 클라우드 동기화 상태
│   └── BrowserGuide.tsx # 외부앱 브라우저 가이드
├── stores/
│   ├── creditStore.ts  # Zustand 학점 상태 관리
│   └── authStore.ts    # Google 인증 상태 관리
├── lib/
│   └── supabase.ts     # Supabase 클라이언트 설정
├── types/
│   └── index.ts        # TypeScript 타입 정의
├── utils/
│   └── calculations.ts # 학점 계산 로직
└── index.css          # 글로벌 스타일

📖 사용 방법

0. Google 로그인 (권장)

1. 우측 상단의 "로그인" 버튼 클릭
2. Google 계정으로 로그인
3. 데이터가 클라우드에 자동 백업되어 다른 기기에서도 접근 가능

1. 기본 사용

1. 학기 카드에서 "+ 학점 추가" 버튼 클릭
2. 학점 구분 선택 (전공필수, 전공선택, 교양, 공대공통, 복수전공필수, 복수전공선택)
3. 전공 관련 과목의 경우 주전공/복수전공 구분 선택
4. 과목명 입력 (선택사항)
5. 학점 입력 (기본값: 3학점)
6. "추가" 버튼으로 확정

2. 복수전공 활성화

• 좌측 하단의 "복수전공 활성화" 체크박스 클릭
• 전공 요구사항이 62학점 → 48학점으로 변경
• 복수전공 요구사항 카드가 추가로 표시 (39학점)

3. 학기 관리

• 기본 8학기(1-1 ~ 4-2) 외 추가 학기 생성 가능
• 우측 끝의 "+ 학기 추가" 버튼으로 새 학기 추가
• 과목이 없는 학기는 삭제 가능 (기본 8학기는 삭제 불가)

🎨 핵심 특징

사용자 경험

• 직관적 인터페이스: 카드 기반의 깔끔한 디자인
• 실시간 피드백: 진행률 바와 퍼센티지로 즉각적인 상태 확인
• 반응형 디자인: 다양한 화면 크기 지원

성능 최적화

• 빠른 응답: 학점 입력 → 업데이트 응답시간 < 150ms
• 효율적 상태 관리: Zustand를 통한 최적화된 리렌더링
• 자동 데이터 지속성: 페이지 새로고침시에도 데이터 유지

데이터 무결성

• 입력 검증: 0.5 단위 학점, 음수 방지
• 일관성 보장: 실시간 계산으로 항상 정확한 상태 유지
• 안전한 삭제: 과목이 있는 학기는 삭제 방지

🔧 개발 참고사항

상태 관리

• useCreditStore: 학점 거래 및 계산 관리
• useProfileStore: 복수전공 설정 관리
• 자동 persist를 통한 LocalStorage 동기화

타입 시스템

• 완전한 TypeScript 지원
• 엄격한 타입 검사로 런타임 오류 방지
• 개발 시점 타입 안전성 보장

빌드 최적화

• Vite를 통한 빠른 개발 서버
• Tree shaking으로 최적화된 번들 크기
• 현대적 ES 모듈 지원

📄 라이선스

MIT License

---

SNU 졸업요건 추적기 - 졸업까지의 여정을 더 쉽게 🎓