App.razor:
• MudBlazor CSS: jsdelivr CDN
• MudBlazor JS: jsdelivr CDN
• admin.css: 로컬 파일 (기본 스타일)
결과:
✅ 로그인 페이지: MudBlazor 스타일 + 기본 스타일 로드
✅ 페이지 로딩 중: admin.css로 기본 UI 표시
✅ MudBlazor 로드 후: 완전한 스타일 적용
이제 Gitea Actions가 자동으로 배포합니다.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
wwwroot/css/admin.css 생성:
• 폼 요소 기본 스타일
• MudBlazor 컴포넌트 기본 스타일
• Responsive 디자인
• Material Design Blue 컬러
결과:
✅ 페이지 로딩 중에도 깔끔한 UI
✅ MudBlazor 로드 후 자동 오버라이드
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
문제:
❌ 로그인 페이지에서 MudBlazor CSS가 적용되지 않음
❌ 스타일이 없는 상태로 렌더링됨
원인:
• BlankLayout에만 MudThemeProvider가 있음
• Login.razor는 직접 MudThemeProvider를 가지지 않음
• Blazor Interactive Server에서 컴포넌트 초기화 전 렌더링됨
수정:
✅ Login.razor에 MudThemeProvider 추가
✅ MudDialogProvider, MudSnackbarProvider도 추가
✅ 버전 파일 자동 생성 (git commit hash + timestamp)
배포:
Release 빌드 → wwwroot/version.txt 생성 → 서버 배포 → systemctl restart
결과:
✅ 로그인 페이지 CSS 정상 렌더링
✅ 버전 정보 최신화
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
문제:
❌ "Publish Admin" 단계가 TaxBaik.Admin 프로젝트를 찾을 수 없음
❌ 분리된 배포 프로세스 (Web, Admin 각각)
원인:
• Web과 Admin이 이미 TaxBaik.Web으로 통합됨
• CI 스크립트가 아직도 분리된 구조를 가정
수정사항:
✅ "Publish Web" → "Publish Web (통합 앱)"
✅ "Publish Admin" 단계 제거
✅ 단일 publish 디렉토리 사용
✅ "Deploy Web" + "Deploy Admin" → "Deploy (통합 Web + Admin)"
✅ systemd를 통한 단일 서비스 재시작
결과:
✅ CI/CD 파이프라인 정상화
✅ 자동 배포 가능 (Gitea Actions)
✅ 1개 앱 배포로 단순화
파이프라인 단계:
1. Checkout → Build → Publish → Deploy → Restart
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
1️⃣ HttpClient 서비스 추가
- IApiClient 인터페이스 구현
- GET, POST, PUT, DELETE 메서드
- JWT 토큰 자동 관리
- /taxbaik/api 경로 자동 처리
2️⃣ Razor Pages 리팩토링
- Pages/Index.cshtml.cs: API /api/blog 호출
- Pages/Blog/Index.cshtml.cs: API /api/blog, /api/category 호출
- Pages/Contact.cshtml.cs: API /api/inquiry 호출
- Service 의존성 제거
3️⃣ Blazor Components 리팩토링
- Login.razor: API /api/auth/login 호출로 변경
- BlogList.razor: API /api/blog/admin/all 호출로 변경
- Service 의존성 제거
아키텍처:
View (Razor Pages + Blazor)
↓ HttpClient
Controllers (REST API)
↓
Services (비즈니스 로직)
↓
Repository (DB)
테스트 결과:
✅ 홈페이지: 200 OK
✅ 블로그 페이지: 200 OK
✅ 문의 페이지: 200 OK
✅ 로그인 페이지: 200 OK
✅ API 엔드포인트 모두 작동
장점:
• UI 리뉴얼 시 API 변경 불필요
• 모바일앱, 데스크톱 클라이언트 추가 가능
• 비즈니스 로직과 UI 완전 독립
• 테스트 가능한 구조 완성
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
4개 API 컨트롤러 구현:
✅ AuthController: POST /api/auth/login
✅ BlogController: GET/POST/PUT/DELETE /api/blog
✅ CategoryController: GET/POST/PUT/DELETE /api/category
✅ InquiryController: POST/GET/PUT /api/inquiry
아키텍처 개선:
- Application 서비스 레이어 확장 (CategoryService 추가)
- Repository 인터페이스 CRUD 지원 추가
- Program.cs에 MapControllers() 추가
- 비즈니스 로직과 UI 완전 분리
장점:
- 향후 UI 리뉴얼 시 API 변경 불필요
- 모바일 앱, 데스크톱 클라이언트 추가 가능
- 테스트 가능한 API 엔드포인트
테스트 결과:
✅ 블로그 API: 5개 포스트 조회
✅ 카테고리 API: 5개 카테고리 조회
✅ 문의 API: 문의 제출 성공
⚠️ 인증 API: 예정된 수정 대기
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Microsoft.AspNetCore.Authentication.JwtBearer 패키지 추가
- Program.cs: JWT 인증 스키마 설정
- Middleware: app.UseAuthentication() 추가
- Admin 대시보드 접근 시 인증 필요 (401 Unauthorized 반환)
테스트 결과:
✅ 홈페이지 (200 OK)
✅ 블로그 (200 OK)
✅ 문의 폼 (200 OK)
✅ 로그인 페이지 (200 OK)
✅ 관리자 대시보드 (401 - 인증 필요)
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- 포트 배치: 5001로 통합 (5002 제거)
- 배포 절차: 단일 Web 앱 빌드로 단순화
- 서비스: taxbaik만 관리 (taxbaik-admin 제거)
- Nginx: /taxbaik 블록 하나로 통합
- 파일 구조: Web/Components/Admin으로 명시
- 인증: JWT + localStorage 패턴 문서화
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
분리의 단점을 제거하고 단일 앱으로 통합:
구조 변경:
- TaxBaik.Admin → TaxBaik.Web/Components/Admin/
- Admin Services → TaxBaik.Web/Services/
- 포트: 5001 (기존 5002 제거)
경로:
- 홈페이지: http://localhost:5001/taxbaik
- 관리자: http://localhost:5001/taxbaik/admin
기술:
- Razor Pages (Web) + Blazor Server (Admin) 통합
- 단일 Program.cs로 양쪽 모두 지원
- JWT 인증 유지
- MudBlazor UI 유지
장점:
- 개발 복잡도 감소 (터미널 1개)
- 배포 단순화 (앱 1개)
- DB 마이그레이션 1회 실행
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
kjh2064