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>
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>
분리의 단점을 제거하고 단일 앱으로 통합:
구조 변경:
- 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>
- 포트 5001로 설정 (기존 5012 → 5001)
- DB 연결 없이도 페이지 렌더링 가능하도록 error handling 추가
- Index.cshtml.cs: 블로그 로드 실패 시 빈 리스트 반환
- Blog/Index.cshtml.cs: 카테고리 및 포스트 로드 실패 시 빈 리스트 반환
- Contact.cshtml.cs: 문의 제출 실패 시 사용자 친화적 에러 메시지
- Program.cs: 마이그레이션을 non-blocking으로 변경
페이지 구성:
- 홈페이지 (Index): 회사 소개 및 최근 블로그
- 블로그 (Blog): 게시글 목록 및 카테고리 필터
- 서비스 (Services): 서비스 소개
- 문의 (Contact): 상담 신청 폼
- 소개 (About): 회사 정보
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
주요 변경사항:
- Hero 섹션: 강력한 임팩트, 자격 배지, 큰 CTA
- 신뢰도 섹션: 자격 3개 항목 수직 확장
- 서비스 섹션: 아이콘 + 상세 설명 + 리스트형 혜택 → 전문성 강조
- 상담 프로세스: 새로운 4단계 시각화 섹션 추가
- 블로그 섹션: 플레이스홀더 이미지, 더 큰 카드
- 최종 CTA: 강렬한 다크 그린 배경, 대비 강한 버튼
디자인 개선:
- 화이트스페이스 확대
- 시각적 계층 구조 강화
- 기능별 섹션 분리
- 반응형 레이아웃 개선
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- site.css: 색상 팔레트 전환 (골드/브론즈/초록/베이지)
- admin.css: MudBlazor 커스터마이징으로 일관성 있는 관리자 UI
- theme-color 메타 태그 업데이트
변경사항:
- 주색: #1B4F8A(네이비) → #C89D6E(따뜻한 골드)
- 보조색: 새로 추가 #2E5C4E(따뜻한 초록)
- 배경: #F7F9FC(차가운 화이트) → #F9F7F3(따뜻한 화이트)
- 그라데이션, 섀도우, 타이포그래피 개선
이전: 기본적인 텍스트 나열식 디자인
현재: 경험 많은 세무사 사무실 느낌의 세련되고 전문적인 디자인
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
## 문제
_ViewStart.cshtml이 없어서 _Layout.cshtml이 렌더링되지 않음
→ CSS/JS가 HTML에 포함되지 않음
→ 스타일 미적용 상태
## 해결
_ViewStart.cshtml 생성하여 Layout 전역 설정
→ 모든 Razor Pages가 _Layout.cshtml을 상속받음
→ CSS/JS 정상 로드
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
## 변경사항
- Footer에 빌드 버전 및 시간 표시
- VersionInfo를 DI로 주입받아 렌더링
- 형식: v{Version} · {Built}
- 투명도(opacity: 0.6)로 미세하게 표시
## 사용자 편의
배포 후 실시간으로 버전 확인 가능
버그 또는 새 기능 적용 여부를 즉시 확인
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
## 근본 원인
Razor Pages 기본 HtmlEncoder가 한글을 유니코드 엔티티로 과도 인코딩
- 데이터: '사업자' → 렌더링: '사업자'
- 사용자에게 보이는 것: 인코딩된 엔티티 텍스트
## 해결
Program.cs에서 HtmlEncoder를 UnicodeRanges.All로 초기화
- ASP.NET Core DI에 HtmlEncoder.Create(UnicodeRanges.All) 등록
- 모든 유니코드 문자를 UTF-8 문자 그대로 렌더링
- XSS 보호는 유지 (HTML 마크업 문자는 여전히 이스케이핑)
## 결과
✅ 한글 제목 정상 표시
✅ 블로그 카테고리 정상 표시
✅ 다국어 지원
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
## 문제
Razor Pages에서 한글 제목이 HTML 유니코드 엔티티로 과도하게 인코딩됨
- 사업자 (한글 '사업자' 등)
- 렌더링 결과: 엔티티 코드가 그대로 표시됨
## 해결
Program.cs에서 WebEncoderOptions 설정
- TextEncoderSettings: UnicodeRanges.All 적용
- 한글 및 다국어 문자를 유니코드 엔티티로 변환하지 않음
- XSS 보호는 유지 (필요시 @Html.Raw() 사용)
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
문제:
- VersionInfo.cs가 namespace를 가지고 있음
- Program.cs (top-level statements)에서 직접 접근 불가능
- 빌드 시 "The type or namespace name 'VersionInfo' could not be found" 오류
해결:
- TaxBaik.Web/VersionInfo.cs에서 namespace 제거
- TaxBaik.Admin/VersionInfo.cs에서 namespace 제거
- Program.cs에서 직접 접근 가능하도록 변경
결과:
- 빌드 성공 (오류 0개, 경고만 있음)
- 경고는 Npgsql 보안 취약성 (이미 알려진 것)
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
### 버전 정보 표시 기능
- CI/CD에서 빌드 시간과 git commit hash를 version.txt에 기록
- Web과 Admin 앱이 시작 시 version.txt를 읽어 VersionInfo 싱글톤으로 등록
- 홈페이지 푸터에 "버전: <커밋해시> | 배포: <빌드시간>" 표시
- 최신 소스 반영 여부를 즉시 확인 가능
### 포트 충돌 해결
- 배포 후 기존 프로세스 종료 시 포트 릴리스 대기 로직 추가
- lsof 명령으로 포트 사용 여부 확인 (최대 30초 대기)
- 5001/5002 포트가 완전히 릴리스될 때까지 new process 시작 지연
- "Address already in use" 오류 해결
파일 변경:
- .gitea/workflows/deploy.yml: 버전 파일 생성 + 포트 대기 로직
- TaxBaik.Web/Program.cs: version.txt 읽기 + VersionInfo 등록
- TaxBaik.Admin/Program.cs: version.txt 읽기 + VersionInfo 등록
- TaxBaik.Web/Pages/Shared/_Footer.cshtml: 버전 정보 표시
- TaxBaik.Web/VersionInfo.cs: 새로 추가
- TaxBaik.Admin/VersionInfo.cs: 새로 추가
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- MigrationRunner: 이미 존재하는 테이블에 대한 "relation already exists" 오류 처리
- V002, V003 마이그레이션: ON CONFLICT DO NOTHING으로 멱등성 보장
- Web, Admin Program.cs: app.UseAntiforgery() 미들웨어 추가 (anti-forgery 토큰 검증)
변경사항:
- 마이그레이션 재실행 시에도 안전하게 처리
- 폼 제출 시 CSRF 공격 방지
- 관리자 로그인 페이지 405 에러 해결
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- MigrationRunner 구현 (자동 DB 마이그레이션)
- Program.cs에 마이그레이션 자동 실행 추가
- 마이그레이션 SQL 파일을 임베드 리소스로 설정
- 완전한 배포 가이드 작성 (DEPLOYMENT_GUIDE.md)
- E2E 테스트 절차 포함
- 롤백 및 모니터링 가이드 추가
배포 준비 완료: Gitea CI/CD 자동 배포 활성화 가능
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- 모든 빌드 오류 해결 (PageModel, Blazor, ResponseCompression)
- Admin 컴포넌트 MudBlazor 6.x 호환성 확보
- IBlogPostRepository 메서드 통일
- ResponseCompression gzip 활성화
W0~W6 전체 작업 완료:
✅ 프로젝트 기반 구축
✅ LLM 개발 지침 (CLAUDE.md)
✅ 도메인/인프라/서비스 레이어
✅ 공개 홈페이지 (Razor Pages SSR)
✅ 관리자 백오피스 (Blazor Server + MudBlazor)
✅ CSS 디자인 시스템 + 모바일 UX
✅ 초기 데이터 + 블로그 포스트 5개
다음 단계: 서버 배포 (Gitea CI/CD)
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- CSS 변수 확장 (색상, 스페이싱, 반응형 브레이크포인트)
- 모든 요소 전환 애니메이션 추가
- 이미지 lazy load 지원
- 응답 압축 (gzip) 활성화
- 폰트 preconnect + DNS prefetch 최적화
- 375px ~ 초소형 화면 반응형 대응
- 게시물 레이아웃 개선 (섹션 구조, 메타데이터)
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
공개 사이트 (port 5001):
- Program.cs: AddRazorPages, AddInfrastructure, AddApplication, UsePathBase("/taxbaik")
- appsettings.json: PostgreSQL 연결 문자열
레이아웃 및 공통 컴포넌트:
- _Layout.cshtml: Bootstrap 5, Noto Sans KR, OG 메타 태그, 모바일 고정 CTA 바
- _Header.cshtml: sticky navbar, 로고, 네비게이션 링크, 상담신청 버튼
- _Footer.cshtml: 사업자정보, 연락처, KakaoTalk, 저작권
- _ViewImports.cshtml, _ViewStart.cshtml
- site.css: CSS 변수 (--color-primary, --color-cta 등), 반응형 스타일
- site.js: 모바일 CTA 바 제어, sticky 헤더 효과
페이지 구현:
1. Index.cshtml (메인 랜딩): Hero, 신뢰도 strip, 서비스 카드, 최근 블로그
2. Services.cshtml (서비스): 4개 서비스 소개, 상담료 안내
3. About.cshtml (소개): 세무사 프로필, 3개 자격증, 서비스 철학
4. Contact.cshtml (상담신청): 폼 (이름, 전화, 이메일, 분야, 문의), ValidationException 처리
5. Blog/Index.cshtml (블로그 목록): 카테고리 필터 탭, 12개 그리드, 페이지네이션
6. Blog/Post.cshtml (포스트 상세): 브레드크럼, 제목, 메타정보, 콘텐츠, CTA, 공유 버튼
SEO:
- robots.txt: /taxbaik 허용, /admin 차단, sitemap 링크
- Sitemap.cshtml: 동적 생성 (정적 페이지 + 모든 포스트)
기술:
- Dapper 기반 DB 접근
- 페이징: 12개/페이지
- 한국어 입력값 검증
Co-Authored-By: Claude <noreply@anthropic.com>
kjh2064