Note: 이 프로젝트는 Google의 Gemini CLI의 도움을 받아 개발되었습니다.
CampusHub는 다양한 학교 관련 정보와 유틸리티를 한곳에 모아 제공하는 웹 애플리케이션입니다. 익명 스레드 게시판, 지뢰찾기 게임, 학교/학과 공지사항, 셔틀버스 시간표, 식단표 등 다양한 기능을 포함하고 있습니다.
- 사이드바 내비게이션: 직관적인 사이드바 메뉴를 통해 다양한 섹션으로 쉽게 이동할 수 있습니다.
- 익명 스레드 게시판: 사용자들이 익명으로 글을 작성하고 소통할 수 있는 게시판입니다.
- 이름, 제목, 내용을 포함한 글 작성 기능
- 이미지 첨부: 그림판에서 그린 이미지를 첨부하거나, 외부 이미지 URL을 통해 게시 가능합니다. (단, 일부 외부 이미지 호스팅 서비스는 보안 정책으로 인해 직접 링크를 허용하지 않을 수 있습니다. URL 입력 시
https://가 자동으로 추가됩니다.) - PostgreSQL (Neon DB)을 통한 데이터 저장 및 불러오기
- 지뢰찾기 게임: 웹 기반으로 구현된 클래식 지뢰찾기 게임입니다.
- 난이도 조절: 쉬움(10x10, 지뢰 10개), 보통(16x16, 지뢰 40개), 어려움(24x24, 지뢰 99개)
- 화음(Chording) 기능: 열린 숫자 칸 클릭 시 주변 칸 자동 열기
- 모바일 진동 피드백: 깃발 설치 시 진동 효과
- 타이머: 첫 번째 칸을 클릭했을 때부터 시간이 측정됩니다.
- 신기록 시스템: 난이도별 최고 기록을 초 단위 소수점까지 추적하고 저장 (PostgreSQL - Neon DB)
- 스레드 연동: 신기록 달성 시, 게임 맵 스크린샷과 함께 익명 스레드 게시판에 자동으로 축하 글 게시
- 학교/학과 정보: 학교 공지, 학과 공지, 셔틀버스 시간표, 학생식당/기숙사 식단표 등 외부 웹페이지를
iframe으로 통합하여 제공합니다. - 그림판: 간단한 그림을 그릴 수 있는 웹 기반 그림판 기능.
- 프론트엔드: HTML, CSS, JavaScript
- 백엔드: Node.js (Vercel Serverless Functions)
- 데이터베이스: PostgreSQL (Neon DB)
- 라이브러리:
html2canvas(게임 맵 스크린샷),pg(PostgreSQL 클라이언트)
- 내비게이션: 화면 왼쪽에 있는 사이드바 메뉴를 클릭하여 각 섹션(학교 공지, 익명 스레드, 지뢰찾기 등)으로 이동할 수 있습니다.
- 익명 스레드: '익명 스레드' 탭에서 이름, 제목, 내용을 입력하여 새 글을 작성할 수 있습니다. 이미지 URL을 직접 입력하거나, 그림판에서 그린 그림을 첨부할 수 있습니다.
- 지뢰찾기: '지뢰찾기' 탭에서 게임을 플레이합니다. 신기록 달성 시 이름과 함께 기록이 초 단위 소수점까지 저장되고 스레드 게시판에 자동으로 공유됩니다.