Admin

Next.js Admin SSR 성능 최적화 실전 가이드: 3.5초 LCP에서 1.2초로 줄이는 체계적 방법론

메일 알림 서비스: 관리자 신청 프로세스의 Resend 통합

JoyMini API의 메일 알림 서비스는 Resend를 기반으로 구축되었으며, 관리자 신청 프로세스의 승인 알림 시나리오에 집중합니다. 단일 메서드 서비스 설계, HTML 템플릿 엔진 및 오류 처리 구현을 다룹니다.

admin-next UI 컴포넌트 라이브러리 – 12가지 기본 컴포넌트: Button, Card, Modal, Input, Select, Switch, Badge, Toast, Dropdown, ImageUpload, Breadcrumbs

admin-next UI 컴포넌트 라이브러리에 대한 종합적인 안내서 — React, Tailwind CSS, Framer Motion으로 구축된 12가지 재사용 가능한 컴포넌트. Button, Card, Modal, Input, Select, Switch, Badge, Toast, Dropdown, ImageUpload, Breadcrumbs 및 유틸리티 내보내기를 다룹니다.

admin-next Server Prefetch + ISR——Server Component 데이터 가져오기와 증분 정적 재생성

admin-next의 서버 측 데이터 가져오기 전략에 대한 심층 분석 — Server Components용 serverGet 유틸리티, 태그 기반 ISR 재검증, 그리고 캐시 무효화를 위한 Server Actions.

보안 도구 체인: Zod 검증 + PII 마스킹 + XSS 방어

security-utils.ts 모듈은 관리 백엔드의 프론트엔드 보안 도구 키트로, 276줄에 걸쳐 Zod 입력 검증, PII 데이터 마스킹, XSS 방어, SQL 인젝션 휴리스틱 탐지, 비밀번호 강도 평가 등 다섯 가지 보안 관심사를 다룹니다.

admin-next 라우트 구성 체계 — 8개의 라우트 그룹, 27개의 라우트 및 lucide-react 아이콘 매핑

admin-next 라우트 구성 시스템에 대한 심층 분석 — RouteConfig 타입 시스템, 27개의 라우트 정의가 포함된 8개의 라우트 그룹, lucide-react 아이콘 매핑 전략, 메타데이터 매칭을 위한 숨겨진 라우트, 그리고 내비게이션/권한 부여 통합.

admin-next LanguageProvider——하위 호환성을 갖춘 next-intl 브리징 레이어

admin-next LanguageProvider에 대한 심층 분석 — 레거시 코드베이스와 next-intl을 연결하는 하위 호환성 shim입니다. useLanguage 훅, 쿠키 기반 지속성을 갖춘 setLocale, getLocalizedValue 유틸리티, 그리고 커스텀 i18n에서 next-intl로의 마이그레이션 전략을 다룹니다.

캐시 계약 패턴: 15개의 통합된 React Query 캐시 모듈

lib/cache/ 디렉토리에는 15개의 캐시 모듈이 있으며, 각 모듈은 동일한 계약 패턴을 따라 URL 검색 파라미터를 API 쿼리 파라미터 및 React Query 캐시 키와 연결합니다. 이를 통해 백오피스 패널에서 페이지네이션, 필터 및 캐시 무효화 동기화와 관련된 일반적인 문제점을 해결합니다.

admin-next BuildInfo + 유틸리티 함수——빌드 메타데이터 표시와 역할 상수

admin-next 유틸리티 모듈에 대한 심층 분석 — UI에 배포 메타데이터(빌드 시간, Git SHA)를 표시하는 BuildInfoViewModel 시스템과 역할 기반 권한 표시를 위한 ROLE_DISPLAY_NAMES 상수.

admin-next 브라우저 Crypto Shim——Web Crypto API를 사용한 node:crypto 모방

admin-next 브라우저 crypto shim에 대한 심층 분석 — Node.js/browser 혼합 코드베이스를 위해 Web Crypto API로 node:crypto를 대체하는 경량 폴리필입니다. createHash 함수, 동기식 폴백(fallback), 그리고 최소 shim 전략을 다룹니다.