[design] 분석 차트 페이지 퍼블리싱 (#22)

* [design] 분석 차트 페이지 퍼블리싱

* [test] eslint 테스트 실행

* [test] eslint 테스트 실행

* [test] CI 에러  해결

* [test] CI 에러: 코드 원상태 복귀(App.jsx에서 import문에 확장자 제거)

* [settings] node_modules 파일 gitignore 처리

react-app/src/App.jsx

@@ -1,14 +1,15 @@
-import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import OnboardingPage from './pages/OnboardingPage';
 import IdentifiedArticlesPage from './pages/IdentifiedArticlesPage';
+import AnalysisPage from './pages/AnalysisPage';
 
 export default function App() {
   return (
     <Router>
       <Routes>
-        <Route path="/OnboardingPage" element={<OnboardingPage />} />
-        <Route path="/IdentifiedArticlesPage" element={<IdentifiedArticlesPage />} />
+        <Route path="/OnboardingPage" element={<OnboardingPage />} /> {/* 온보딩 페이지 라우팅 */}
+        <Route path="/IdentifiedArticlesPage" element={<IdentifiedArticlesPage />} /> {/* 판별 기사 목록 페이지 라우팅 */}
+        <Route path="/AnalysisPage" element={<AnalysisPage />} /> {/* 분석 차트 페이지 라우팅 */}
       </Routes>
     </Router>
   );

react-app/src/components/AnalysisChart.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useNavigate } from 'react-router-dom'; // React Router 사용
 import {
   LineChart,

react-app/src/components/layout/AnalysisPage.module.css

@@ -0,0 +1,57 @@
+/* 페이지 전체 배경색을 연한 회색으로 설정 */
+.bg-background {
+  background-color: #ebebeb;
+}
+
+/* 네비게이션 바의 배경색을 짙은 네이비로 설정 */
+.bg-navy-900 {
+  background-color: #002b53;
+}
+
+/* 텍스트 색상을 흰색으로 설정 */
+.text-white {
+  color: white;
+}
+
+/* 보조 텍스트(예: 설명글)의 색상을 회색 계열로 설정 */
+.text-muted-foreground {
+  color: #000000;
+}
+
+/* 기본적인 테두리 스타일 정의 */
+.border {
+  border: 1px solid #dee2e6; /* 밝은 회색 테두리 */
+}
+
+/* 요소의 모서리를 부드럽게 라운드 처리 */
+.rounded-lg {
+  border-radius: 0.5rem; /* 8px 반지름으로 둥글게 설정 */
+}
+
+/* 컨테이너 최대 너비와 가운데 정렬을 설정 */
+.container {
+  max-width: 1200px; /* 컨테이너의 최대 너비 */
+  margin: 0 auto; /* 좌우 여백을 자동으로 설정해 가운데 정렬 */
+}
+
+/* 플렉스 박스 레이아웃 설정 */
+.flex {
+  display: flex; /* 요소들을 플렉스 박스로 배치 */
+}
+
+/* 좌우 여백을 자동으로 설정해 가운데 정렬 */
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* 요소에 1rem(16px) 패딩을 추가 */
+.p-4 {
+  padding: 1rem;
+}
+
+/* 요소의 아래쪽에 1rem(16px) 간격 추가 */
+.mb-4 {
+  margin-bottom: 1rem;
+}
+

react-app/src/components/layout/Header.jsx

@@ -1,5 +1,4 @@
 // src/components/Header.jsx
-import React from 'react';
 import { Link } from 'react-router-dom';
 import styles from './Header.module.css';
 

react-app/src/components/ui/Button.jsx

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+
+export function Button({ children, size, variant, ...props }) {
+  const baseClass = "p-2 rounded transition";
+  const sizeClass = size === "sm" ? "text-sm px-3" : "text-base px-4";
+  const variantClass = variant === "secondary" ? "bg-gray-300 hover:bg-gray-400" : "bg-blue-500 text-white";
+
+  return (
+    <button className={`${baseClass} ${sizeClass} ${variantClass}`} {...props}>
+      {children}
+    </button>
+  );
+}
+
+Button.propTypes = {
+  children: PropTypes.node.isRequired,  // 자식 컴포넌트는 필수적으로 전달되어야 함을 명시
+  size: PropTypes.string,               // size prop의 유형을 문자열로 정의
+  variant: PropTypes.string             // variant prop의 유형을 문자열로 정의
+};

react-app/src/components/ui/Card.jsx

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+
+export function Card({ children }) {
+  return <div className="border rounded-lg p-4 bg-white shadow-sm">{children}</div>;
+}
+
+Card.propTypes = {
+  children: PropTypes.node
+};
+
+export function CardHeader({ children }) {
+  return <div className="border-b pb-2 mb-2">{children}</div>;
+}
+
+CardHeader.propTypes = {
+  children: PropTypes.node
+};
+
+export function CardTitle({ children }) {
+  return <h2 className="text-xl font-bold">{children}</h2>;
+}
+
+CardTitle.propTypes = {
+  children: PropTypes.node
+};
+
+export function CardContent({ children }) {
+  return <div>{children}</div>;
+}
+
+CardContent.propTypes = {
+  children: PropTypes.node
+};

react-app/src/pages/AnalysisPage.jsx

@@ -1 +1,111 @@
-// 뉴스 분석 페이지 구성
+// 뉴스 분석 페이지 구성
+import { Button } from "../components/ui/Button";
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
+import { Link } from 'react-router-dom'; // Link 컴포넌트를 사용하기 위해 임포트
+import '../components/layout/AnalysisPage.module.css';
+import Navbar from '../components/layout/Navbar.jsx';
+
+export default function AnalysisPage() {
+    return (
+    <div className="min-h-screen bg-background">
+      {/* Navbar 사용 */}
+      <Navbar />
+
+      {/* 메인 콘텐츠 영역 */}
+      <main className="container mx-auto p-4">
+        <div className="grid gap-6 md:grid-cols-2">
+          {/* 왼쪽 섹션: 요약 및 분석 카드 */}
+          <div className="space-y-6">
+            {/* 요약 박스 */}
+            <Card>
+              <CardHeader>
+                <CardTitle>뉴스 요약</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="rounded-lg border bg-muted p-4 mb-4">
+                  <h3 className="text-lg font-medium mb-4">
+                    하마스 무장세력이 이스라엘 군인의 시신을 가자지구 거리로 끌고 다녀 양측의 긴장이 고조되었습니다.
+                  </h3>
+                  <div className="flex gap-2">
+                    <Button size="sm" variant="secondary">
+                      번역하기
+                    </Button>
+                    <Button size="sm" variant="secondary">
+                      뉴스 요약
+                    </Button>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* 분석 결과 카드 */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Analysis Result</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="flex justify-center">
+                  <div className="relative h-48 w-48">
+                    <div className="absolute inset-0 flex items-center justify-center rounded-full border-8 border-primary/20">
+                      <div className="text-center">
+                        <div className="text-4xl font-bold">93%</div>
+                        <div className="text-sm text-muted-foreground">Accuracy</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="mt-6 flex justify-center gap-4">
+                  <div className="flex items-center gap-2">
+                    <div className="h-3 w-3 rounded-full bg-gray-300" />
+                    <span className="text-sm">0-25%</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="h-3 w-3 rounded-full bg-blue-300" />
+                    <span className="text-sm">26-50%</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="h-3 w-3 rounded-full bg-blue-500" />
+                    <span className="text-sm">51-75%</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="h-3 w-3 rounded-full bg-blue-700" />
+                    <span className="text-sm">76-100%</span>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* 오른쪽 섹션: 원본 기사 카드 */}
+          <Card>
+            <CardHeader>
+              <CardTitle>What are Israel&apos;s Iron Dome, David&apos;s Sling, and Arrow missile defenses?</CardTitle>
+            </CardHeader>
+            <CardContent>
+              {/* next/image 대신 img 태그 사용 */}
+              <img
+                alt="Israel missile defense system at night"
+                className="rounded-lg object-cover"
+                height={300}
+                src="/src/assets/images/fakenewsimg.png"
+                width={600}
+              />
+              <div className="mt-4 space-y-4">
+                <p className="text-sm text-muted-foreground">
+                  Israel uses its elaborate system of air defenses to counter hundreds of missiles and drones launched by Iran on Tuesday night.
+                </p>
+                <h3 className="font-medium">What are the different tiers of Israel&apos;s missile defence system?</h3>
+                <p className="text-sm text-muted-foreground">
+                  Israel has several air defence systems, each one designed to intercept incoming missiles at different altitudes and distances...
+                </p>
+                <Link to="/read-more" className="text-blue-500 hover:underline">
+                  Read More
+                </Link>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </main>
+    </div>
+    );
+}

react-app/src/pages/OnBoardingPage.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 // import Header from '../components/layout/Header';
 import Navbar from '../components/layout/Navbar'
 import AnalysisChart from '../components/AnalysisChart';