INFORM Frontend

인하대학교 캠퍼스 정보 큐레이션 플랫폼 INFORM의 프론트엔드 레포지토리입니다. 학교 공지사항·동아리·행사 일정을 한 곳에서 확인하고 관리할 수 있습니다.

---

기술 스택

분류	기술	버전
UI 프레임워크	React	19.2.0
빌드 도구	Vite	7.2.2
라우팅	React Router DOM	7.9.5
스타일링	Tailwind CSS	4.1.17
클라이언트 상태	Zustand	5.0.8
서버 상태	TanStack React Query	5.90.7
HTTP 클라이언트	Axios	1.13.2
인증	@react-oauth/google	0.13.4
리치 텍스트 에디터	TipTap	3.22.2
아이콘	React Icons	5.5.0
분석	react-ga4 (GA4)	2.1.0
타입	TypeScript	5.9.3
폰트	LINE Seed Sans KR	0.1.0

---

프로젝트 구조

src/
├── api/                        # API 통신 함수
│   ├── axios.js                # Axios 인스턴스 (인증 인터셉터 포함)
│   ├── *.js                    # 기능별 API 함수
│   └── manage/                 # 관리자 API (TypeScript)
├── assets/                     # 정적 리소스 (아이콘, 이미지, SVG)
├── components/
│   ├── common/                 # 공통 컴포넌트
│   │   ├── ErrorBoundary.jsx
│   │   └── ProtectedRoute.jsx
│   ├── main/
│   │   ├── adaptive/           # 모바일·데스크톱 공용 컴포넌트
│   │   │   ├── common/         # SearchBar, Badge, BackHeader, NotificationModal
│   │   │   └── feature/        # 기능별 컴포넌트 (HOM, EVL, EVD, CBL, CBD, MYP)
│   │   ├── desktop/            # 데스크톱 전용 컴포넌트
│   │   │   └── common/         # TabBar, MiniCalendar, Imminent, ServiceLink 등
│   │   └── mobile/             # 모바일 전용 컴포넌트
│   │       ├── common/         # mobileHeader, mobileTabBar, BottomSheet 등
│   │       └── feature/        # HotEventList, mobileEventRow 등
│   └── manage/                 # 관리자 전용 컴포넌트 (TypeScript)
│       ├── common/             # ActionBtn, TableList, Menu, AlertModal 등
│       └── feature/            # MANDTE(에디터), MANHOM(대시보드) 등
├── constants/                  # 필터 옵션, 카테고리·상태 색상 정의
├── hooks/                      # 커스텀 훅
│   ├── useAlertModal.tsx
│   ├── useSearchHistory.js
│   ├── useCalendarPrefetch.js
│   └── useClubPrefetch.js
├── mocks/                      # 개발용 목 데이터
├── pages/
│   ├── main/                   # 사용자 페이지 (JSX, 10개)
│   ├── manage/                 # 관리자 페이지 (TSX, 7개)
│   └── NOT/                    # 에러·404 페이지
├── stores/                     # Zustand 스토어
│   ├── useAuthStore.js         # 인증 상태 (토큰, 유저 정보, persist)
│   ├── deviceStore.js          # 디바이스 유형 감지 (isMobile)
│   └── useEVLFilterStore.js    # 이벤트 목록 필터 상태
├── utils/                      # 유틸리티 함수
│   ├── CalendarUtil.js         # 캘린더 그리드·이벤트 바 계산
│   ├── dateUtil.js             # 날짜 파싱·포맷·비교
│   ├── statusUtil.js           # 공지 상태 매핑
│   └── AnalyticsTraker.js      # GA4 페이지뷰 추적
├── App.jsx                     # 루트 컴포넌트 (라우터 설정, GA4 초기화)
├── main.jsx                    # 앱 진입점 (Provider 설정)
└── global.css                  # 전역 스타일 (CSS 변수, 애니메이션, TipTap)

---

페이지 구조

사용자 페이지

경로	코드	설명	인증 필요
/	HOM	메인 캘린더 (월별 공지 일정, HOT 게시글)
/login	LGN	Google OAuth 로그인
/onboarding	ONB	신규 사용자 온보딩 가이드
/events	EVL	학교 공지사항·이벤트 목록 (검색·필터·페이지네이션)	✅
/events/detail/:id	EVD	이벤트 상세 (북마크, 첨부파일, 캘린더 추가)	✅
/clubs	CBL	동아리 목록	✅
/clubs/detail/:id	CBD	동아리 상세	✅
/mypage	MYP	내 프로필·북마크·학과 수정·계정 삭제	✅
/privacy-policy	PRI	개인정보처리방침
/terms-of-service	TOS	이용약관
/error, /*	NOT	에러·404 페이지

관리자 페이지 (/manage/*, TypeScript)

경로	설명
/manage	대시보드 (상태별 게시글 현황)
/manage/login	관리자 로그인
/manage/detail/:id	게시글 상세 조회
/manage/edit, /manage/edit/:id	게시글 작성·수정 (TipTap 에디터)
/manage/staged	반영 대기 게시글
/manage/garbage	휴지통 (복구·영구 삭제)
/manage/unreviewed	미검수 게시글

---

주요 기능

반응형 디자인

• 모바일 (≤ 430px): 하단 탭바, 바텀 시트 모달, 스와이프 제스처 지원
• 데스크톱 (> 430px): 사이드바(미니 캘린더, 서비스 링크), 상단 탭바

캘린더

• 6×7 그리드 월별 캘린더
• 공지사항 기간을 이벤트 바(bar)로 시각화 (겹침 처리 포함)
• 날짜 선택 시 해당 날의 공지 목록 표시
• 카테고리·북마크 필터링 지원

공지사항·이벤트 목록 (EVL)

• 키워드 검색 (검색 기록 localStorage 저장)
• 다중 필터: 날짜 범위, 상태(진행중/예정/마감임박/종료), 카테고리, 출처
• 페이지네이션 (5/10/20개씩 보기)
• 상태 우선순위 정렬: 마감임박 > 진행중 > 예정 > 종료

인증

• Google OAuth 2.0 소셜 로그인
• 인하대 이메일(@inha.edu, @inha.ac.kr) 도메인 검증
• 로그인 상태·토큰 localStorage 영속화 (Zustand persist)
• Axios 인터셉터로 Bearer 토큰 자동 첨부
• 401/403 응답 시 자동 로그아웃·로그인 페이지 리다이렉트

북마크 및 알림

• 이벤트 북마크 추가/삭제
• 마이페이지에서 북마크 목록 일괄 관리
• 읽지 않은 알림 배지·전체 읽음 처리

관리자 기능

• TipTap 리치 텍스트 에디터로 게시글 작성·수정 (이미지 첨부 포함)
• 게시글 상태 관리: 미검수 → 반영 대기 → 반영/삭제 → 휴지통 → 영구 삭제·복구
• 중복 게시글 ID 검사
• 상태별 목록 조회 및 일괄 처리 (체크박스 선택)

기타

• 인앱 브라우저 감지: 카카오톡·에브리타임·인스타그램 등에서 접속 시 외부 브라우저 유도
• Google Analytics 4 페이지 방문 추적
• 에러 바운더리 및 전역 에러 페이지

---

시작하기

사전 요구사항

• Node.js 18.x 이상

환경 변수 설정

# .env 파일을 프로젝트 루트에 생성
VITE_GOOGLE_CLIENT_ID=your_google_client_id

설치 및 실행

# 저장소 클론
git clone https://github.com/Team-Alimi/IN-FORM_Frontend.git
cd inform_frontend

# 의존성 설치
npm install

# 개발 서버 실행 (http://localhost:5173)
npm run dev

빌드

npm run build     # 프로덕션 빌드 (dist/ 폴더 생성)
npm run preview   # 빌드 결과 로컬 미리보기

코드 품질

npm run lint      # ESLint 검사
npm run format    # Prettier 포매팅

---

개발 가이드

네이밍 컨벤션

대상	규칙	예시
컴포넌트 파일	PascalCase	EventRow.jsx
유틸리티 함수	camelCase	formatDateKey()
상수	UPPER_SNAKE_CASE	FILTER_OPTIONS
페이지 폴더	3글자 대문자 코드	HOM/, EVL/, EVD/
import 경로	@/ 절대 경로	@/components/main/...

Git 커밋 컨벤션

type: 간단한 설명

type	설명
feat	새로운 기능
fix	버그 수정
docs	문서 변경
style	스타일 변경 (CSS, 포맷)
refactor	기능 변화 없는 코드 개선
chore	설정·패키지·빌드
test	테스트 코드

브랜치 전략

main        ← 프로덕션 배포
dev         ← 개발 통합 (기본 브랜치)
manageDev   ← 관리자 기능 개발

기능 브랜치는 feat/기능명, fix/버그명 형태로 분기 후 dev에 병합합니다.

---

Contact

[email protected]