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>
- 포트 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>
- 모든 빌드 오류 해결 (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