feat: 웹사이트 표준화 검사 도구 구현
- 4개 검사 엔진: HTML/CSS, 접근성(WCAG), SEO, 성능/보안 (총 50개 항목) - FastAPI 백엔드 (9개 API, SSE 실시간 진행, PDF/JSON 리포트) - Next.js 15 프론트엔드 (6개 페이지, 29개 컴포넌트, 반원 게이지 차트) - Docker Compose 배포 (Backend:8011, Frontend:3011, MongoDB:27022, Redis:6392) - 전체 테스트 32/32 PASS Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jungwoo choi
37
frontend/src/app/globals.css
Normal file
37
frontend/src/app/globals.css
Normal file
@ -0,0 +1,37 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
67
frontend/src/app/history/page.tsx
Normal file
67
frontend/src/app/history/page.tsx
Normal file
@ -0,0 +1,67 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useInspectionHistory } from "@/lib/queries";
|
||||
import { SearchBar } from "@/components/history/SearchBar";
|
||||
import { InspectionHistoryTable } from "@/components/history/InspectionHistoryTable";
|
||||
import { Pagination } from "@/components/history/Pagination";
|
||||
import { ErrorState } from "@/components/common/ErrorState";
|
||||
|
||||
export default function HistoryPage() {
|
||||
const [page, setPage] = useState(1);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
||||
const { data, isLoading, isError, refetch } = useInspectionHistory(
|
||||
page,
|
||||
searchQuery || undefined
|
||||
);
|
||||
|
||||
const handleSearch = (query: string) => {
|
||||
setSearchQuery(query);
|
||||
setPage(1); // 검색 시 1페이지로 리셋
|
||||
};
|
||||
|
||||
const handlePageChange = (newPage: number) => {
|
||||
setPage(newPage);
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<h1 className="text-2xl font-bold mb-6">검사 이력</h1>
|
||||
|
||||
{/* 검색 바 */}
|
||||
<div className="mb-6 max-w-md">
|
||||
<SearchBar
|
||||
query={searchQuery}
|
||||
onSearch={handleSearch}
|
||||
placeholder="URL 검색..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 테이블 또는 에러 */}
|
||||
{isError ? (
|
||||
<ErrorState
|
||||
message="검사 이력을 불러올 수 없습니다"
|
||||
onRetry={() => refetch()}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<InspectionHistoryTable
|
||||
inspections={data?.items}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
|
||||
{/* 페이지네이션 */}
|
||||
{data && data.total_pages > 1 && (
|
||||
<Pagination
|
||||
currentPage={data.page}
|
||||
totalPages={data.total_pages}
|
||||
onPageChange={handlePageChange}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
123
frontend/src/app/history/trend/page.tsx
Normal file
123
frontend/src/app/history/trend/page.tsx
Normal file
@ -0,0 +1,123 @@
|
||||
"use client";
|
||||
|
||||
import { Suspense } from "react";
|
||||
import { useSearchParams, useRouter } from "next/navigation";
|
||||
import { useInspectionTrend } from "@/lib/queries";
|
||||
import { TrendChart } from "@/components/trend/TrendChart";
|
||||
import { ComparisonSummary } from "@/components/trend/ComparisonSummary";
|
||||
import { LoadingSpinner } from "@/components/common/LoadingSpinner";
|
||||
import { EmptyState } from "@/components/common/EmptyState";
|
||||
import { ErrorState } from "@/components/common/ErrorState";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ExternalLink, RotateCcw } from "lucide-react";
|
||||
import { api, ApiError } from "@/lib/api";
|
||||
import { useInspectionStore } from "@/stores/useInspectionStore";
|
||||
|
||||
function TrendPageContent() {
|
||||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
const trendUrl = searchParams.get("url") || "";
|
||||
const { setInspection } = useInspectionStore();
|
||||
|
||||
const { data, isLoading, isError, refetch } = useInspectionTrend(
|
||||
trendUrl || undefined
|
||||
);
|
||||
|
||||
const handleReinspect = async () => {
|
||||
if (!trendUrl) return;
|
||||
try {
|
||||
const response = await api.startInspection(trendUrl);
|
||||
setInspection(response.inspection_id, trendUrl);
|
||||
router.push(`/inspections/${response.inspection_id}/progress`);
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError) {
|
||||
alert(err.detail);
|
||||
} else {
|
||||
alert("재검사 시작에 실패했습니다.");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
{/* 페이지 제목 */}
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-bold">트렌드 분석</h1>
|
||||
{trendUrl && (
|
||||
<div className="flex items-center gap-2 mt-2 text-muted-foreground">
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
<span className="text-sm">{trendUrl}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 콘텐츠 */}
|
||||
{!trendUrl ? (
|
||||
<EmptyState
|
||||
message="URL이 지정되지 않았습니다"
|
||||
description="검사 이력에서 트렌드 버튼을 클릭하여 접근해주세요"
|
||||
/>
|
||||
) : isLoading ? (
|
||||
<LoadingSpinner message="트렌드 데이터를 불러오는 중..." />
|
||||
) : isError ? (
|
||||
<ErrorState
|
||||
message="트렌드 데이터를 불러올 수 없습니다"
|
||||
onRetry={() => refetch()}
|
||||
/>
|
||||
) : !data || data.data_points.length === 0 ? (
|
||||
<EmptyState
|
||||
message="검사 이력이 없습니다"
|
||||
description="해당 URL의 검사 결과가 없습니다"
|
||||
>
|
||||
<Button onClick={handleReinspect}>검사 시작</Button>
|
||||
</EmptyState>
|
||||
) : data.data_points.length === 1 ? (
|
||||
<div className="space-y-6">
|
||||
<EmptyState
|
||||
message="비교할 이력이 없습니다"
|
||||
description="동일 URL의 검사를 2회 이상 수행해야 트렌드를 확인할 수 있습니다"
|
||||
>
|
||||
<Button onClick={handleReinspect}>
|
||||
<RotateCcw className="h-4 w-4" />
|
||||
재검사
|
||||
</Button>
|
||||
</EmptyState>
|
||||
<ComparisonSummary latest={data.data_points[0]} previous={null} />
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{/* 차트 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">점수 추이 차트</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<TrendChart dataPoints={data.data_points} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 비교 요약 */}
|
||||
<ComparisonSummary
|
||||
latest={data.data_points[data.data_points.length - 1]}
|
||||
previous={data.data_points[data.data_points.length - 2]}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TrendPage() {
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<LoadingSpinner message="페이지를 불러오는 중..." />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<TrendPageContent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
70
frontend/src/app/inspections/[id]/issues/page.tsx
Normal file
70
frontend/src/app/inspections/[id]/issues/page.tsx
Normal file
@ -0,0 +1,70 @@
|
||||
"use client";
|
||||
|
||||
import { use, useState } from "react";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { useInspectionIssues } from "@/lib/queries";
|
||||
import { FilterBar } from "@/components/issues/FilterBar";
|
||||
import { IssueList } from "@/components/issues/IssueList";
|
||||
import { ErrorState } from "@/components/common/ErrorState";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
|
||||
export default function IssuesPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
}) {
|
||||
const { id } = use(params);
|
||||
const searchParams = useSearchParams();
|
||||
const initialCategory = searchParams.get("category") || "all";
|
||||
|
||||
const [selectedCategory, setSelectedCategory] = useState(initialCategory);
|
||||
const [selectedSeverity, setSelectedSeverity] = useState("all");
|
||||
|
||||
const { data, isLoading, isError, refetch } = useInspectionIssues(
|
||||
id,
|
||||
selectedCategory === "all" ? undefined : selectedCategory,
|
||||
selectedSeverity === "all" ? undefined : selectedSeverity
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
{/* 뒤로가기 */}
|
||||
<div className="mb-6">
|
||||
<Link href={`/inspections/${id}`}>
|
||||
<Button variant="ghost" size="sm">
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
결과 대시보드로 돌아가기
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<h1 className="text-2xl font-bold mb-6">상세 이슈 목록</h1>
|
||||
|
||||
{/* 필터 */}
|
||||
<div className="mb-6">
|
||||
<FilterBar
|
||||
selectedCategory={selectedCategory}
|
||||
selectedSeverity={selectedSeverity}
|
||||
onCategoryChange={setSelectedCategory}
|
||||
onSeverityChange={setSelectedSeverity}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 이슈 목록 */}
|
||||
{isError ? (
|
||||
<ErrorState
|
||||
message="이슈 목록을 불러올 수 없습니다"
|
||||
onRetry={() => refetch()}
|
||||
/>
|
||||
) : (
|
||||
<IssueList
|
||||
issues={data?.issues}
|
||||
isLoading={isLoading}
|
||||
total={data?.total || 0}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
143
frontend/src/app/inspections/[id]/page.tsx
Normal file
143
frontend/src/app/inspections/[id]/page.tsx
Normal file
@ -0,0 +1,143 @@
|
||||
"use client";
|
||||
|
||||
import { use, useCallback } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useInspectionResult } from "@/lib/queries";
|
||||
import { OverallScoreGauge } from "@/components/dashboard/OverallScoreGauge";
|
||||
import { CategoryScoreCard } from "@/components/dashboard/CategoryScoreCard";
|
||||
import { IssueSummaryBar } from "@/components/dashboard/IssueSummaryBar";
|
||||
import { InspectionMeta } from "@/components/dashboard/InspectionMeta";
|
||||
import { ActionButtons } from "@/components/dashboard/ActionButtons";
|
||||
import { LoadingSpinner } from "@/components/common/LoadingSpinner";
|
||||
import { ErrorState } from "@/components/common/ErrorState";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { CATEGORY_LABELS, CATEGORY_KEYS } from "@/lib/constants";
|
||||
import { api, ApiError } from "@/lib/api";
|
||||
import { useInspectionStore } from "@/stores/useInspectionStore";
|
||||
import type { CategoryKey } from "@/types/inspection";
|
||||
|
||||
export default function ResultDashboardPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
}) {
|
||||
const { id } = use(params);
|
||||
const router = useRouter();
|
||||
const { setInspection } = useInspectionStore();
|
||||
const { data: result, isLoading, isError, error, refetch } =
|
||||
useInspectionResult(id);
|
||||
|
||||
const handleViewIssues = useCallback(() => {
|
||||
router.push(`/inspections/${id}/issues`);
|
||||
}, [id, router]);
|
||||
|
||||
const handleCategoryClick = useCallback(
|
||||
(category: CategoryKey) => {
|
||||
router.push(`/inspections/${id}/issues?category=${category}`);
|
||||
},
|
||||
[id, router]
|
||||
);
|
||||
|
||||
const handleReinspect = useCallback(async () => {
|
||||
if (!result) return;
|
||||
try {
|
||||
const response = await api.startInspection(result.url);
|
||||
setInspection(response.inspection_id, result.url);
|
||||
router.push(`/inspections/${response.inspection_id}/progress`);
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError) {
|
||||
alert(err.detail);
|
||||
} else {
|
||||
alert("재검사 시작에 실패했습니다.");
|
||||
}
|
||||
}
|
||||
}, [result, router, setInspection]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<LoadingSpinner message="검사 결과를 불러오는 중..." />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError || !result) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<ErrorState
|
||||
message={
|
||||
error instanceof ApiError
|
||||
? error.detail
|
||||
: "검사 결과를 불러올 수 없습니다"
|
||||
}
|
||||
onRetry={() => refetch()}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
{/* 종합 점수 */}
|
||||
<Card className="mb-6">
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="text-xl">종합 점수</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex justify-center">
|
||||
<OverallScoreGauge
|
||||
score={result.overall_score}
|
||||
grade={result.grade}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 카테고리별 점수 카드 */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
{CATEGORY_KEYS.map((key) => {
|
||||
const cat = result.categories[key];
|
||||
return (
|
||||
<CategoryScoreCard
|
||||
key={key}
|
||||
categoryName={CATEGORY_LABELS[key]}
|
||||
score={cat.score}
|
||||
grade={cat.grade}
|
||||
issueCount={cat.total_issues}
|
||||
onClick={() => handleCategoryClick(key)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 검사 메타 정보 */}
|
||||
<div className="mb-6">
|
||||
<InspectionMeta
|
||||
url={result.url}
|
||||
createdAt={result.created_at}
|
||||
durationSeconds={result.duration_seconds}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 액션 버튼 */}
|
||||
<div className="mb-6">
|
||||
<ActionButtons
|
||||
inspectionId={id}
|
||||
onViewIssues={handleViewIssues}
|
||||
onReinspect={handleReinspect}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 이슈 요약 바 */}
|
||||
<Card>
|
||||
<CardContent className="py-4">
|
||||
<IssueSummaryBar
|
||||
critical={result.summary.critical}
|
||||
major={result.summary.major}
|
||||
minor={result.summary.minor}
|
||||
info={result.summary.info}
|
||||
total={result.summary.total_issues}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
19
frontend/src/app/inspections/[id]/progress/page.tsx
Normal file
19
frontend/src/app/inspections/[id]/progress/page.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import { use } from "react";
|
||||
import { InspectionProgress } from "@/components/inspection/InspectionProgress";
|
||||
|
||||
export default function ProgressPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
}) {
|
||||
const { id } = use(params);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<h1 className="text-2xl font-bold mb-6 text-center">검사 진행 중</h1>
|
||||
<InspectionProgress inspectionId={id} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
34
frontend/src/app/layout.tsx
Normal file
34
frontend/src/app/layout.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { Providers } from "@/lib/providers";
|
||||
import { Header } from "@/components/layout/Header";
|
||||
import { Footer } from "@/components/layout/Footer";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Web Inspector - 웹사이트 표준 검사",
|
||||
description:
|
||||
"URL을 입력하면 HTML/CSS, 접근성, SEO, 성능/보안을 한 번에 검사합니다",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="ko">
|
||||
<body className={inter.className}>
|
||||
<Providers>
|
||||
<div className="flex min-h-screen flex-col">
|
||||
<Header />
|
||||
<main className="flex-1">{children}</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</Providers>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
32
frontend/src/app/page.tsx
Normal file
32
frontend/src/app/page.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
"use client";
|
||||
|
||||
import { UrlInputForm } from "@/components/inspection/UrlInputForm";
|
||||
import { RecentInspections } from "@/components/inspection/RecentInspections";
|
||||
import { Search } from "lucide-react";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
{/* 히어로 섹션 */}
|
||||
<section className="text-center mb-10">
|
||||
<div className="flex items-center justify-center gap-3 mb-4">
|
||||
<div className="rounded-full bg-primary/10 p-3">
|
||||
<Search className="h-8 w-8 text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-3xl sm:text-4xl font-bold tracking-tight mb-3">
|
||||
웹사이트 표준 검사
|
||||
</h1>
|
||||
<p className="text-muted-foreground text-lg max-w-xl mx-auto">
|
||||
URL을 입력하면 HTML/CSS, 접근성, SEO, 성능/보안을 한 번에 검사합니다
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* URL 입력 폼 */}
|
||||
<UrlInputForm />
|
||||
|
||||
{/* 최근 검사 이력 */}
|
||||
<RecentInspections />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user