Graduable

프로젝트 소개

Graduable은 React, TypeScript, Vite로 만든 졸업·학점 관리 웹/데스크톱 애플리케이션이다. Google 로그인과 최초 온보딩을 마치면 대시보드, 학기별 로드맵, 수강 내역, 졸업 심사 시뮬레이터, 교과과정표, 이수체계도, 마이페이지 등에서 이수 현황을 한곳에서 볼 수 있다. Electron으로 패키징해 브라우저와 데스크톱에서 모두 동작하도록 구성했다.

개발 기간

• 진행 중

배포 · 실행 환경

• macOS 공식 바이너리 배포는 Apple Developer Program 비용 때문에 현재 제공하지 않는다.
• 아래 명령으로 로컬 실행은 가능하다. 개발은 npm run dev, 서명 환경이 갖춰지면 npm run dist로 설치 파일을 빌드할 수 있다.

---

시작 가이드

요구 사항

• Node.js (LTS 권장)
• npm

환경 변수

프로젝트 루트에 .env를 두고, VITE_SERVER_URL 등 필요한 키는 팀과 공유한다. 백엔드가 없으면 일부 흐름은 로컬 데이터와 온보딩 위주로 동작한다.

설치 및 실행

git clone https://github.com/dnqudgml12/Graduable_FE.git
cd Graduable_FE
npm install

웹 + Electron 개발 모드

npm run dev

프로덕션 웹 빌드 후 로컬 프리뷰

npm run build
npm start

(npm start는 vite preview이다.)

데스크톱 설치 파일(dmg / nsis / AppImage 등)

npm run dist

기타 스크립트

npm run lint           # ESLint
npm run build-electron # Electron 메인 프로세스 TypeScript만 컴파일

---

기술 스택

개발 환경

언어 · 프레임워크

상태 · 스타일

데이터 · UI

빌드 · 도구

---

화면 구성

스크린샷은 docs/에 두었다. 파일명만 영어(graduable-*.png)로 통일해 GitHub 등에서 경로가 깨지지 않게 했다.

인증

Google 로그인 및 회원가입 진입 화면이다. (macOS 데스크톱 창 모양)

온보딩

지금까지 이수한 학기 수를 선택하는 단계이다.

해당 학기에 맞는 연도·학기를 선택하는 단계이다.

히즈넷(HISNet) 등에서 복사한 졸업 심사 결과를 붙여 넣으면, 필요한 항목만 가져온다.

메인 기능

학기별 로드맵 요약, 전체 잔여 학점, 영역별 이수 학점을 한눈에 보는 홈 화면이다.

학기 카드마다 과목·학점·전공/교양 구분을 보여 주는 로드맵 화면이다.

기수강 과목 표와 필터, 영역별 막대 그래프를 제공하는 수강 내역 화면이다.

가상으로 과목을 담아 보며 졸업 요건 충족도를 확인하는 시뮬레이터 화면이다.

---

아키텍처 및 디렉터리 구조

Graduable_FE/
├── public/
├── electron/           # Electron 메인·프리로드 TypeScript 소스
├── src/
│   ├── App.tsx
│   ├── main.tsx
│   ├── Layout.tsx
│   ├── router/         # React Router, 인증·온보딩 가드
│   ├── pages/          # 대시보드, 로드맵, 시뮬레이터 등
│   ├── components/     # 공통 UI, 온보딩 플로우 등
│   ├── store/          # Recoil atoms / selectors
│   ├── styles/
│   ├── types/
│   ├── mockdata/
│   └── electron/       # 번들된 main/preload 산출물
├── docs/               # README용 스크린샷 (파일명 영어)
├── vite.config.ts
├── tailwind.config.ts
├── package.json
└── index.html

---

라우트

경로	설명
/login	Google 로그인
/	대시보드
/roadmap	학기별 로드맵
/history	수강 내역
/simulator	졸업 심사 시뮬레이터
/handbook	교과과정표
/curriculum	이수체계도
/mypage	마이페이지

---

개발자

우병희
Frontend, Electron