🏫 가톨릭대학교 컴퓨터 공학과 회의실 예약 웹앱

회의실 예약부터 공지사항 관리까지, 한곳에서 해결하는 스마트한 예약 시스템!

---

📌 프로젝트 소개

학교 생활을 더 편리하게 만들기 위해 회의실 예약, 공지사항 관리, FAQ, 오픈채팅방 문의, 로그인, 학교 지도 기능을 통합한 컴퓨터 공학과 회의실 예약 웹앱입니다.

학생들은 쉽고 빠르게 회의실 정보를 확인하고 예약할 수 있으며, 관리자는 공지사항과 FAQ를 효율적으로 관리할 수 있습니다.

🚀 주요 기능

• 회의실 예약 및 상세 정보 확인
• 캘린더로 회의실 예약 확인 가능
• 공지사항 및 FAQ 관리
• 학교 지도 기능 제공
• 관리자 페이지를 통한 CRUD 기능 지원
• 학생회 및 사용자 간 원활한 커뮤니케이션

---

⚙️ 기술 스택

Frontend	상태 관리	API	Routing
React + Vite	Zustand	React Query	React Router DOM

🚀 빠르고 확장성 높은 개발 환경

• React + Vite → 최적화된 빌드 및 빠른 개발 속도
• React Query → 효율적인 API 요청 및 상태 관리
• Zustand & Recoil → 단순하고 직관적인 상태 관리

---

🛠 주요 기능

1️⃣ 회의실 예약 🏢

• 현재 회의실 사용 현황 확인
• 손쉬운 예약 및 일정 관리

2️⃣ 공지사항 관리 📢

• 최신 공지사항 실시간 업데이트
• 중요 공지 핀 고정 기능

3️⃣ FAQ 관리 ❓

• 자주 묻는 질문(FAQ) 관리
• 검색 기능 제공

4️⃣ 학교 지도 🗺

• 학교 내 주요 건물 및 회의실 위치 확인
• 실시간 거리 정보 제공

5️⃣ 관리자 페이지 🔧

• 공지사항, FAQ, 회의실 예약 관리 (CRUD)
• 학생회 및 관리자 전용 기능 제공
• 학생회비 납부 관리자 확인 가능

---

---

📚 공부한 내용 (Tistory 정리)

💡 아래 링크를 클릭하면 Tistory 블로그에서 자세한 내용을 확인할 수 있습니다.

🚀 React 관련 성능 최적화 및 기능 구현

🔗 📌 React에서 페이지네이션과 유효성 검사 구현하기
🔗 🚀 React에서 공지사항(Notice) 페이징 최적화 & 성능 개선하기
🔗 🚀 React Query를 사용하여 FAQ 관리 성능 개선하기
🔗 📌 React Query cacheTime VS staleTime 차이점 정리
🔗 🚀 React Query를 활용한 API 요청 최적화

---

🔄 React Router 및 상태 관리

🔗 🔑 React Router에서 accessToken 없을 경우 리디렉션 처리하기
🔗 📍 React useLocation 상세 설명
🔗 🗂 Zustand 미들웨어와 일정 시간 후 상태 초기화 구현하기 (localStorage)

---

⏳ UI/UX & 캘린더, 애니메이션 관련 기능

🔗 📆 React Calendar 설정 및 커스텀 정리
🔗 ⏳ React에서 시간 슬롯 선택 시 자동 스크롤 기능 추가하기
🔗 🎨 Framer Motion: React에서 강력한 애니메이션 라이브러리

---

📊 예약 시스템 데이터 관리

🔗 🔄 React useEffect를 활용한 예약 시스템 데이터 관리

---