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

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

</aside>

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

🔐 로그인 정보

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

개요 (Overview)

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

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

기술적 스택

</aside>

• 성능 최적화: SSR과 SSG를 활용하여 SEO(검색 엔진 최적화) 및 로딩 속도 개선
• 내장 API 라우트: 별도의 백엔드 서버 없이 API를 구축 가능
• 자동 코드 분할(Code Splitting) 및 정적 최적화로 빠른 페이지 렌더링 | | Neon | * Neon은 PostgreSQL 기반의 완전한 서버리스 클라우드 데이터베이스
• 빠른 연결 (Connection pooling): 서버리스 환경에서도 안정적으로 동시 연결을 처리할 수 있음 | | Drizzle | * SQL을 쓰는 느낌을 그대로 살리면서도 TypeScript의 타입 안정성을 제공함. -타입 안전성: TypeScript 타입을 자동 생성해줘서, 런타임 오류를 줄일 수 있음 -빠르고 가볍다: Prisma보다 가볍고 빌드 속도가 빠름. -서버리스 친화적: Neon과 궁합이 잘 맞고, 서버리스 환경에 적합 | | Tailwind CSS | * 유틸리티 클래스 기반의 CSS 프레임워크
• 인라인 스타일처럼 빠른 개발 가능
• 유지보수가 쉬운 클래스 네이밍
• 다크 모드 및 반응형 디자인 지원 | | shadcn/ui | * Radix UI를 기반으로 한 UI 컴포넌트 라이브러리
• Tailwind CSS와 완벽하게 호환
• 접근성(Accessibility) 최적화
• 필요할 때만 설치하여 불필요한 코드가 적음 | | React Hook Form | 간결한 문법과 높은 성능: 최소한의 코드로도 폼 상태 관리 및 유효성 검사가 가능 폼 재사용성 향상: 반복되는 입력 양식을 컴포넌트화하여 깔끔하게 관리 가능 검증 로직 통합: Zod과의 연동으로 복잡한 유효성 검사도 손쉽게 처리 가능 렌더링 최적화: 불필요한 리렌더링을 줄여 성능 향상 | | Upstash | 이메일 전송을 일정 시간 후에 예약 서버리스 환경 최적화: Next.js Edge 환경에 적합한 서버리스 기반의 Redis/Queue 서비스 간편한 예약 작업 처리: cron 스케줄링 기능을 활용해 정해진 시간에 작업 실행 가능 (예: 회원가입 후 일정 시간 간격으로 이메일 전송) 백엔드 인프라 없이 동작: 무거운 서버 설정 없이도 비동기 작업 처리 가능 확장성: 대용량 트래픽에도 유연하게 대응 가능 | | Resend | 사용자에게 실제로 이메일을 전송하는 기능 담당 Next.js와의 자연스러운 통합: API Route와 바로 연동 가능하여 이메일 전송 로직 구현이 간편 신뢰도 높은 이메일 전송: 빠르고 안정적인 전송 속도 및 상태 추적 기능 제공 |

<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)