diff --git a/react-app/src/components/AnalysisChart.jsx b/react-app/src/components/AnalysisChart.jsx
new file mode 100644
index 0000000..2558f95
--- /dev/null
+++ b/react-app/src/components/AnalysisChart.jsx
@@ -0,0 +1 @@
+// 뉴스 분석 차트 표시
\ No newline at end of file
diff --git a/react-app/src/components/ArticleList.jsx b/react-app/src/components/ArticleList.jsx
new file mode 100644
index 0000000..ced6b7f
--- /dev/null
+++ b/react-app/src/components/ArticleList.jsx
@@ -0,0 +1 @@
+// 기사 목록 표시
\ No newline at end of file
diff --git a/react-app/src/components/Footer.jsx b/react-app/src/components/Footer.jsx
new file mode 100644
index 0000000..2844867
--- /dev/null
+++ b/react-app/src/components/Footer.jsx
@@ -0,0 +1 @@
+// 웹사이트 하단 푸터 부분
\ No newline at end of file
diff --git a/react-app/src/components/Header.jsx b/react-app/src/components/Header.jsx
new file mode 100644
index 0000000..6ada8d0
--- /dev/null
+++ b/react-app/src/components/Header.jsx
@@ -0,0 +1 @@
+// 웹사이트 상단 헤더 부분
\ No newline at end of file
diff --git a/react-app/src/components/NewsCard.jsx b/react-app/src/components/NewsCard.jsx
new file mode 100644
index 0000000..9ac8992
--- /dev/null
+++ b/react-app/src/components/NewsCard.jsx
@@ -0,0 +1 @@
+// 개별 뉴스 기사 카드 형태 표시
\ No newline at end of file
diff --git a/react-app/src/components/NewsGrid.jsx b/react-app/src/components/NewsGrid.jsx
new file mode 100644
index 0000000..9a8be26
--- /dev/null
+++ b/react-app/src/components/NewsGrid.jsx
@@ -0,0 +1 @@
+// 뉴스 기사 그리드 형태로 표시
\ No newline at end of file
diff --git a/react-app/src/data/initialState.js b/react-app/src/data/initialState.js
new file mode 100644
index 0000000..975a3dd
--- /dev/null
+++ b/react-app/src/data/initialState.js
@@ -0,0 +1,9 @@
+// 애플리케이션의 초기 상태를 정의합니다.
+// 리덕스나 다른 상태 관리 라이브러리와 함께 사용할 수 있습니다.
+
+export const initialState = {
+    news: [],
+    user: null,
+    isLoading: false,
+    error: null
+  };
diff --git a/react-app/src/data/mockData.js b/react-app/src/data/mockData.js
new file mode 100644
index 0000000..00a1051
--- /dev/null
+++ b/react-app/src/data/mockData.js
@@ -0,0 +1,12 @@
+// 개발 및 테스트 목적으로 사용할 수 있는 가짜 데이터를 정의합니다.
+
+export const mockNews = [
+    { id: 1, title: "샘플 뉴스 1", content: "이것은 첫 번째 샘플 뉴스입니다." },
+    { id: 2, title: "샘플 뉴스 2", content: "이것은 두 번째 샘플 뉴스입니다." },
+  ];
+  
+  export const mockUser = {
+    id: 1,
+    username: "testuser",
+    email: "testuser@example.com"
+  };
diff --git a/react-app/src/hooks/useNews.js b/react-app/src/hooks/useNews.js
new file mode 100644
index 0000000..9632d75
--- /dev/null
+++ b/react-app/src/hooks/useNews.js
@@ -0,0 +1 @@
+// 뉴스 데이터 가져오고 관리하는 커스텀 훅
\ No newline at end of file
diff --git a/react-app/src/index.js b/react-app/src/index.js
new file mode 100644
index 0000000..36801dc
--- /dev/null
+++ b/react-app/src/index.js
@@ -0,0 +1 @@
+// App 컴포넌트를 렌더링하고 필요한 설정을 초기화
\ No newline at end of file
diff --git a/react-app/src/pages/AnalysisPage.jsx b/react-app/src/pages/AnalysisPage.jsx
new file mode 100644
index 0000000..01ef747
--- /dev/null
+++ b/react-app/src/pages/AnalysisPage.jsx
@@ -0,0 +1 @@
+// 뉴스 분석 페이지 구성
\ No newline at end of file
diff --git a/react-app/src/pages/ArticlePage.jsx b/react-app/src/pages/ArticlePage.jsx
new file mode 100644
index 0000000..81600d4
--- /dev/null
+++ b/react-app/src/pages/ArticlePage.jsx
@@ -0,0 +1 @@
+// 개별 기사 상세 페이지 구성
\ No newline at end of file
diff --git a/react-app/src/pages/ScrapPage.jsx b/react-app/src/pages/ScrapPage.jsx
new file mode 100644
index 0000000..c0a1955
--- /dev/null
+++ b/react-app/src/pages/ScrapPage.jsx
@@ -0,0 +1 @@
+// 스크랩한 기사 페이지를 구성
\ No newline at end of file
diff --git a/react-app/src/services/api.js b/react-app/src/services/api.js
new file mode 100644
index 0000000..50c2c59
--- /dev/null
+++ b/react-app/src/services/api.js
@@ -0,0 +1 @@
+// 백엔드 API와의 통신 담당하는 함수 포함
\ No newline at end of file
diff --git a/react-app/src/styles/global.css b/react-app/src/styles/global.css
new file mode 100644
index 0000000..0434887
--- /dev/null
+++ b/react-app/src/styles/global.css
@@ -0,0 +1 @@
+/* 전역적으로 적용되는 CSS 스타일 정의 */
\ No newline at end of file
diff --git a/react-app/src/types/news.ts b/react-app/src/types/news.ts
new file mode 100644
index 0000000..fb99466
--- /dev/null
+++ b/react-app/src/types/news.ts
@@ -0,0 +1,15 @@
+// 뉴스 관련 타입 정의
+
+export interface News {
+    id: number;
+    title: string;
+    content: string;
+    author?: string;
+    publishedDate?: Date;
+  }
+  
+  export interface NewsState {
+    articles: News[];
+    isLoading: boolean;
+    error: string | null;
+  }
diff --git a/react-app/src/types/user.ts b/react-app/src/types/user.ts
new file mode 100644
index 0000000..5d1a7f8
--- /dev/null
+++ b/react-app/src/types/user.ts
@@ -0,0 +1,15 @@
+// 사용자 관련 타입 정의
+
+export interface User {
+    id: number;
+    username: string;
+    email: string;
+    firstName?: string;
+    lastName?: string;
+  }
+  
+  export interface UserState {
+    currentUser: User | null;
+    isAuthenticated: boolean;
+    error: string | null;
+  }
diff --git a/react-app/src/utils/helpers.js b/react-app/src/utils/helpers.js
new file mode 100644
index 0000000..43ca9a8
--- /dev/null
+++ b/react-app/src/utils/helpers.js
@@ -0,0 +1 @@
+// 여러 곳에서 사용되는 유틸리티 함수 포함
\ No newline at end of file