Rels (Relay Study)
Rels는 광주소프트웨어마이스터고등학교 릴레이 스터디의 전체 운영 과정을 하나의 플랫폼에서 효율적으로 관리하기 위한 서비스입니다.
이 저장소는 프론트엔드입니다. 백엔드는 Rels-back에서 관리합니다.
구성
이 저장소는 Next.js App Router 기반의 단일 애플리케이션이며, 레이어드 아키텍처로 구성되어 있습니다.
| 디렉터리 | 설명 |
|---|
src/app | 라우트 진입점, App Router 레이아웃, 경로 수준 인증 보호 장치 |
src/components | UI 컴포넌트 (common 공용, layout 레이아웃, 도메인별 하위 디렉터리) |
src/entities | 도메인 타입과 TanStack Query 훅 (lecture, notice, auth, notification) |
src/shared | HTTP 클라이언트, API URL·쿼리 키 상수, 공용 유틸리티 |
src/stores | 전역 클라이언트 상태 (Zustand — 인증 토큰, 유저 정보) |
src/assets | SVG 아이콘 컴포넌트 |
src/constants | 앱 전역 상수 |
worker | 서비스 워커 소스 (웹 푸시 수신·알림 클릭 처리) |
의존성은 app → components → entities → shared 단방향으로 흐릅니다. 하위 레이어만 가져오고, 같은 레이어 내에서는 수평적으로 가져오지 않습니다.
기술 스택
- Framework & Core: Next.js 16 (App Router), React 19, TypeScript 5
- Data Fetching & State: TanStack Query 5, Axios, Zustand 5
- Form & Validation: React Hook Form 7, Zod 4
- Styling & UI: Tailwind CSS 4, Pretendard, Sonner
- PWA: @ducanh2912/next-pwa, Web Push (VAPID)
- Package Manager: npm
시작하기
요구 사항
- Node.js 20 이상 (CI 기준 버전)
- npm 10 이상
설치
git clone https://github.com/VOID-GSM/Rels-front.git
cd Rels-front
npm install
환경 변수
루트에 .env.local 파일을 만들고 아래 값을 채워 주세요.
NEXT_PUBLIC_BACKEND_URL= # 백엔드 서버 주소 (/api/* 요청이 이 주소로 프록시됩니다)
NEXT_PUBLIC_BASE_URL= # 프론트엔드 주소 (OAuth 리다이렉트에 사용)
개발 서버 실행
npm run dev
기본 주소는 http://localhost:3000 입니다.
PWA와 서비스 워커는 개발 모드에서 비활성화됩니다. 푸시 알림 동작은 npm run build && npm start로 빌드하거나 배포본에서 확인해 주세요. 웹 푸시는 HTTPS에서만 동작합니다.
스크립트
| 명령 | 설명 |
|---|
npm run dev | 개발 서버 실행 |
npm run build | 프로덕션 빌드 |
npm start | 빌드 결과 실행 |
npm run lint | ESLint 검사 |
npx tsc --noEmit | 타입 검사 |
브랜치 전략
git flow를 따릅니다. 기능 브랜치는 항상 develop을 향합니다.
feature/* → develop → main
CI는 main·develop으로의 push와 pull request에서 Lint → Type Check → Build 순으로 실행됩니다.
버그 제보 및 이슈
버그를 발견하거나 기능 제안이 있다면 GitHub 이슈 트래커를 이용해 주세요.
