프로젝트 확인을 원하신다면, 아래의 로그인 정보를 사용하여 접속해 주시기 바랍니다. 감사합니다!

🔐 로그인 정보

• 이메일: [email protected]
• 비밀번호: 11111111

<aside> <img src="/icons/code_brown.svg" alt="/icons/code_brown.svg" width="40px" />

Admin 페이지는 현재 작업 중입니다.

</aside>

개요 (Overview)

이 프로젝트는 사용자가 도서를 검색하고, 대여하고, 반납할 수 있는 웹 기반의 도서관 애플리케이션입니다. 사용자는 도서 정보를 확인한 후 이용 가능 여부를 바탕으로 대여할 수 있으며, 반납 시에는 시스템에서 대여 상태가 자동으로 갱신됩니다. 이 애플리케이션은 기본적인 CRUD 기능과 검색, 상태 관리, 양식 검증 등의 기능을 포함하여 실용적인 도서 관리 시스템을 구현하는 것을 목표로 개발되었습니다.

<aside> <img src="/icons/laptop_gray.svg" alt="/icons/laptop_gray.svg" width="40px" />

기술적 스택

</aside>

• 성능 최적화: SSR과 SSG를 활용하여 SEO(검색 엔진 최적화) 및 로딩 속도 개선
• 내장 API 라우트: 별도의 백엔드 서버 없이 API를 구축 가능
• 자동 코드 분할(Code Splitting) 및 정적 최적화: SEO에 유리하며 빠른 로딩 속도 제공 | | Neon | * Neon은 PostgreSQL 기반의 완전한 서버리스 클라우드 데이터베이스
• 빠른 연결 (Connection pooling): 서버리스 환경에 최적화된 데이터베이스, 빠른 연결과 스케일링 지원 | | Drizzle | * SQL을 쓰는 느낌을 그대로 살리면서도 TypeScript의 타입 안정성을 제공함.
• 타입 안전성: TypeScript 타입을 자동 생성해줘서, 런타임 오류를 줄일 수 있음
• 빠르고 가볍다: Prisma보다 가볍고 빌드 속도가 빠름.
• 서버리스 친화적: Neon과 궁합이 잘 맞고, 서버리스 환경에 적합 | | Zustand | - useNotificationStore를 zustand로 관리하여 로그인한 유저의 알림 상태를 전역에서 공유 - 알림 벨 아이콘에 새로운 알림 개수가 바로 반영되어 UX 개선
• Redux보다 훨씬 간결하고 학습 곡선이 낮아 유지보수에 적합 | | Vercel Scheduler (Cron Job) | - 매일 자동으로 /api/cron endpoint를 실행하여 **도서 반납 마감일 전날 또는 지났을 때 자동 알림 전송
• 버튼 없이 백엔드에서 자동 실행**, 관리가 필요 없는 예약 작업 구성 | | Tailwind CSS | * 유틸리티 클래스 기반의 CSS 프레임워크
• 인라인 스타일처럼 빠른 개발 가능
• 유지보수가 쉬운 클래스 네이밍
• 다크모드, 반응형 디자인, 재사용 가능한 컴포넌트 작성에 유리 | | shadcn/ui | * Radix UI를 기반으로 한 UI 컴포넌트 라이브러리
• Tailwind와 자연스럽게 통합되어 커스터마이징이 쉬움
• 필요한 컴포넌트만 가져올 수 있어 번들 크기 최소화 | | React Hook Form + Zod | 간결한 문법과 높은 성능: 최소한의 코드로도 폼 상태 관리 및 유효성 검사가 가능 폼 재사용성 향상: 반복되는 입력 양식을 컴포넌트화하여 깔끔하게 관리 가능 검증 로직 통합: Zod과의 연동으로 복잡한 유효성 검사도 손쉽게 처리 가능 렌더링 최적화: 불필요한 리렌더링을 줄여 성능 향상 |

<aside> <img src="/icons/code_gray.svg" alt="/icons/code_gray.svg" width="40px" />

주요 기능

</aside>

1️⃣ Auth 페이지 (Register/Login)

2️⃣ 홈 페이지 (Home Page)

3️⃣ 프로필 페이지 (Profile Page)