diff --git a/.eslintrc.js b/.eslintrc.js
index bcdfc4e5..b1776478 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -22,6 +22,7 @@ module.exports = {
     'no-undef': 0,
     'prettier/prettier': 2, // Means error
     'react/react-in-jsx-scope': 'off',
+    'react/prop-types': 'off', // TypeScript 에서  이미 컴포넌트의 props를 검증하기 위해 타입 체크를 제공
   },
   settings: {
     react: {
diff --git a/apps/react-world/src/components/Footer.tsx b/apps/react-world/src/components/Footer.tsx
new file mode 100644
index 00000000..5a8d332f
--- /dev/null
+++ b/apps/react-world/src/components/Footer.tsx
@@ -0,0 +1,16 @@
+export const Footer: React.FC = () => {
+  return (
+    <footer>
+      <div className="container">
+        <a href="/" className="logo-font">
+          conduit
+        </a>
+        <span className="attribution">
+          An interactive learning project from{' '}
+          <a href="https://thinkster.io">Thinkster</a>. Code &amp; design
+          licensed under MIT.
+        </span>
+      </div>
+    </footer>
+  );
+};
diff --git a/apps/react-world/src/components/Layout.tsx b/apps/react-world/src/components/Layout.tsx
new file mode 100644
index 00000000..666ec697
--- /dev/null
+++ b/apps/react-world/src/components/Layout.tsx
@@ -0,0 +1,15 @@
+import { PropsWithChildren } from 'react';
+import { Navbar } from '../components/NavBar';
+import { Footer } from '../components/Footer';
+
+type LayoutProps = PropsWithChildren;
+
+export const Layout = ({ children }: LayoutProps) => {
+  return (
+    <>
+      <Navbar />
+      {children}
+      <Footer />
+    </>
+  );
+};
diff --git a/apps/react-world/src/components/NavBar.tsx b/apps/react-world/src/components/NavBar.tsx
new file mode 100644
index 00000000..49baff27
--- /dev/null
+++ b/apps/react-world/src/components/NavBar.tsx
@@ -0,0 +1,28 @@
+export const Navbar: React.FC = () => {
+  return (
+    <nav className="navbar navbar-light">
+      <div className="container">
+        <a className="navbar-brand" href="/">
+          conduit
+        </a>
+        <ul className="nav navbar-nav pull-xs-right">
+          <li className="nav-item">
+            <a className="nav-link active" href="/">
+              Home
+            </a>
+          </li>
+          <li className="nav-item">
+            <a className="nav-link" href="/login">
+              Sign in
+            </a>
+          </li>
+          <li className="nav-item">
+            <a className="nav-link" href="/register">
+              Sign up
+            </a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  );
+};
diff --git a/apps/react-world/src/components/home/ArticlePreview.tsx b/apps/react-world/src/components/home/ArticlePreview.tsx
new file mode 100644
index 00000000..47a36bbf
--- /dev/null
+++ b/apps/react-world/src/components/home/ArticlePreview.tsx
@@ -0,0 +1,54 @@
+interface ArticlePreviewProps {
+  authorProfileLink: string;
+  authorProfileImageUrl: string;
+  authorName: string;
+  publishDate: string;
+  likeCount: number;
+  articleLink: string;
+  articleTitle: string;
+  articleDescription: string;
+  tags: string[];
+}
+
+const ArticlePreview: React.FC<ArticlePreviewProps> = ({
+  authorProfileLink,
+  authorProfileImageUrl,
+  authorName,
+  publishDate,
+  likeCount,
+  articleLink,
+  articleTitle,
+  articleDescription,
+  tags,
+}) => (
+  <div className="article-preview">
+    <div className="article-meta">
+      <a href={authorProfileLink}>
+        <img src={authorProfileImageUrl} />
+      </a>
+      <div className="info">
+        <a href={authorProfileLink} className="author">
+          {authorName}
+        </a>
+        <span className="date">{publishDate}</span>
+      </div>
+      <button className="btn btn-outline-primary btn-sm pull-xs-right">
+        <i className="ion-heart"></i> {likeCount}
+      </button>
+    </div>
+    <a href={articleLink} className="preview-link">
+      <h1>{articleTitle}</h1>
+      <p>{articleDescription}</p>
+      <span>Read more...</span>
+      <ul className="tag-list">
+        {tags.map(tag => (
+          <li className="tag-default tag-pill tag-outline" key={tag}>
+            {tag}
+          </li>
+        ))}
+      </ul>
+    </a>
+  </div>
+);
+
+export default ArticlePreview;
diff --git a/apps/react-world/src/components/home/ArticleTagList.tsx b/apps/react-world/src/components/home/ArticleTagList.tsx
new file mode 100644
index 00000000..c9acb277
--- /dev/null
+++ b/apps/react-world/src/components/home/ArticleTagList.tsx
@@ -0,0 +1,20 @@
+interface ArticleTagListProps {
+  tags: string[];
+}
+
+const ArticleTagList: React.FC<ArticleTagListProps> = ({ tags }) => (
+  <div className="col-md-3">
+    <div className="sidebar">
+      <p>Popular Tags</p>
+      <div className="tag-list">
+        {tags.map(tag => (
+          <a key={tag} href="" className="tag-pill tag-default">
+            {tag}
+          </a>
+        ))}
+      </div>
+    </div>
+  </div>
+);
+
+export default ArticleTagList;
diff --git a/apps/react-world/src/components/home/HomeBanner.tsx b/apps/react-world/src/components/home/HomeBanner.tsx
new file mode 100644
index 00000000..d3903397
--- /dev/null
+++ b/apps/react-world/src/components/home/HomeBanner.tsx
@@ -0,0 +1,12 @@
+export const HomeBanner: React.FC = () => {
+  return (
+    <div className="home-page">
+      <div className="banner">
+        <div className="container">
+          <h1 className="logo-font">conduit</h1>
+          <p>A place to share your knowledge.</p>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/react-world/src/components/home/HomeFeedContents.tsx b/apps/react-world/src/components/home/HomeFeedContents.tsx
new file mode 100644
index 00000000..4576cfe5
--- /dev/null
+++ b/apps/react-world/src/components/home/HomeFeedContents.tsx
@@ -0,0 +1,53 @@
+import ArticlePreview from './ArticlePreview';
+import ArticleTagList from './ArticleTagList';
+import HomeFeedTab from './HomeFeedTab';
+import Pagination from './Pagination';
+
+const HomeFeedContents: React.FC = () => (
+  <div className="container page">
+    <div className="row">
+      <div className="col-md-9">
+        <HomeFeedTab activeFeed="global_feed" />
+        {/* 더미 데이터 */}
+        <ArticlePreview
+          authorProfileLink="/profile/eric-simons"
+          authorProfileImageUrl="http://i.imgur.com/Qr71crq.jpg"
+          authorName="Eric Simons"
+          publishDate="January 20th"
+          likeCount={29}
+          articleLink="/article/how-to-build-webapps-that-scale"
+          articleTitle="How to build webapps that scale"
+          articleDescription="This is the description for the post."
+          tags={['realworld', 'implementations']}
+        />
+        <ArticlePreview
+          authorProfileLink="/profile/albert-pai"
+          authorProfileImageUrl="http://i.imgur.com/N4VcUeJ.jpg"
+          authorName="Albert Pai"
+          publishDate="January 20th"
+          likeCount={32}
+          articleLink="/article/the-song-you"
+          articleTitle="The song you won't ever stop singing. No matter how hard you try."
+          articleDescription="This is the description for the post."
+          tags={['realworld', 'implementations']}
+        />
+        <Pagination pages={[1, 2]} activePage={1} />
+      </div>
+
+      <ArticleTagList
+        tags={[
+          'programming',
+          'javascript',
+          'emberjs',
+          'angularjs',
+          'react',
+          'mean',
+          'node',
+          'rails',
+        ]}
+      />
+    </div>
+  </div>
+);
+
+export default HomeFeedContents;
diff --git a/apps/react-world/src/components/home/HomeFeedTab.tsx b/apps/react-world/src/components/home/HomeFeedTab.tsx
new file mode 100644
index 00000000..938a720d
--- /dev/null
+++ b/apps/react-world/src/components/home/HomeFeedTab.tsx
@@ -0,0 +1,28 @@
+interface HomeFeedTabProps {
+  activeFeed: 'my_feed' | 'global_feed';
+}
+
+const HomeFeedTab: React.FC<HomeFeedTabProps> = ({ activeFeed }) => (
+  <div className="feed-toggle">
+    <ul className="nav nav-pills outline-active">
+      <li className="nav-item">
+        <a
+          className={`nav-link ${activeFeed === 'my_feed' ? 'active' : ''}`}
+          href=""
+        >
+          Your Feed
+        </a>
+      </li>
+      <li className="nav-item">
+        <a
+          className={`nav-link ${activeFeed === 'global_feed' ? 'active' : ''}`}
+          href=""
+        >
+          Global Feed
+        </a>
+      </li>
+    </ul>
+  </div>
+);
+
+export default HomeFeedTab;
diff --git a/apps/react-world/src/components/home/HomePageContainer.tsx b/apps/react-world/src/components/home/HomePageContainer.tsx
new file mode 100644
index 00000000..708ae22d
--- /dev/null
+++ b/apps/react-world/src/components/home/HomePageContainer.tsx
@@ -0,0 +1,9 @@
+interface HomePageContainerProps {
+  children: React.ReactNode;
+}
+
+const HomePageContainer: React.FC<HomePageContainerProps> = ({ children }) => {
+  return <div className="home-page">{children}</div>;
+};
+
+export default HomePageContainer;
diff --git a/apps/react-world/src/components/home/Pagination.tsx b/apps/react-world/src/components/home/Pagination.tsx
new file mode 100644
index 00000000..cd1d7f6f
--- /dev/null
+++ b/apps/react-world/src/components/home/Pagination.tsx
@@ -0,0 +1,23 @@
+interface PaginationProps {
+  pages: number[];
+  activePage: number;
+}
+
+const Pagination: React.FC<PaginationProps> = ({ pages, activePage }) => {
+  return (
+    <ul className="pagination">
+      {pages.map(page => (
+        <li
+          key={page}
+          className={`page-item ${page === activePage ? 'active' : ''}`}
+        >
+          <a className="page-link" href="">
+            {page}
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default Pagination;
diff --git a/apps/react-world/src/pages/home.tsx b/apps/react-world/src/pages/home.tsx
index e68f0cf5..caa0b996 100644
--- a/apps/react-world/src/pages/home.tsx
+++ b/apps/react-world/src/pages/home.tsx
@@ -1,185 +1,12 @@
+import HomePageContainer from '../components/home/HomePageContainer';
+import { HomeBanner } from '../components/home/HomeBanner';
+import HomeFeedContents from '../components/home/HomeFeedContents';
+
 export const HomePage = () => {
   return (
-    <>
-      <nav className="navbar navbar-light">
-        <div className="container">
-          <a className="navbar-brand" href="/">
-            conduit
-          </a>
-          <ul className="nav navbar-nav pull-xs-right">
-            <li className="nav-item">
-              <a className="nav-link active" href="/">
-                Home
-              </a>
-            </li>
-            <li className="nav-item">
-              <a className="nav-link" href="/login">
-                Sign in
-              </a>
-            </li>
-            <li className="nav-item">
-              <a className="nav-link" href="/register">
-                Sign up
-              </a>
-            </li>
-          </ul>
-        </div>
-      </nav>
-
-      <div className="home-page">
-        <div className="banner">
-          <div className="container">
-            <h1 className="logo-font">conduit</h1>
-            <p>A place to share your knowledge.</p>
-          </div>
-        </div>
-
-        <div className="container page">
-          <div className="row">
-            <div className="col-md-9">
-              <div className="feed-toggle">
-                <ul className="nav nav-pills outline-active">
-                  <li className="nav-item">
-                    <a className="nav-link" href="">
-                      Your Feed
-                    </a>
-                  </li>
-                  <li className="nav-item">
-                    <a className="nav-link active" href="">
-                      Global Feed
-                    </a>
-                  </li>
-                </ul>
-              </div>
-
-              <div className="article-preview">
-                <div className="article-meta">
-                  <a href="/profile/eric-simons">
-                    <img src="http://i.imgur.com/Qr71crq.jpg" />
-                  </a>
-                  <div className="info">
-                    <a href="/profile/eric-simons" className="author">
-                      Eric Simons
-                    </a>
-                    <span className="date">January 20th</span>
-                  </div>
-                  <button className="btn btn-outline-primary btn-sm pull-xs-right">
-                    <i className="ion-heart"></i> 29
-                  </button>
-                </div>
-                <a
-                  href="/article/how-to-build-webapps-that-scale"
-                  className="preview-link"
-                >
-                  <h1>How to build webapps that scale</h1>
-                  <p>This is the description for the post.</p>
-                  <span>Read more...</span>
-                  <ul className="tag-list">
-                    <li className="tag-default tag-pill tag-outline">
-                      realworld
-                    </li>
-                    <li className="tag-default tag-pill tag-outline">
-                      implementations
-                    </li>
-                  </ul>
-                </a>
-              </div>
-
-              <div className="article-preview">
-                <div className="article-meta">
-                  <a href="/profile/albert-pai">
-                    <img src="http://i.imgur.com/N4VcUeJ.jpg" />
-                  </a>
-                  <div className="info">
-                    <a href="/profile/albert-pai" className="author">
-                      Albert Pai
-                    </a>
-                    <span className="date">January 20th</span>
-                  </div>
-                  <button className="btn btn-outline-primary btn-sm pull-xs-right">
-                    <i className="ion-heart"></i> 32
-                  </button>
-                </div>
-                <a href="/article/the-song-you" className="preview-link">
-                  <h1>
-                    The song you won&apos;t ever stop singing. No matter how
-                    hard you try.
-                  </h1>
-                  <p>This is the description for the post.</p>
-                  <span>Read more...</span>
-                  <ul className="tag-list">
-                    <li className="tag-default tag-pill tag-outline">
-                      realworld
-                    </li>
-                    <li className="tag-default tag-pill tag-outline">
-                      implementations
-                    </li>
-                  </ul>
-                </a>
-              </div>
-
-              <ul className="pagination">
-                <li className="page-item active">
-                  <a className="page-link" href="">
-                    1
-                  </a>
-                </li>
-                <li className="page-item">
-                  <a className="page-link" href="">
-                    2
-                  </a>
-                </li>
-              </ul>
-            </div>
-
-            <div className="col-md-3">
-              <div className="sidebar">
-                <p>Popular Tags</p>
-
-                <div className="tag-list">
-                  <a href="" className="tag-pill tag-default">
-                    programming
-                  </a>
-                  <a href="" className="tag-pill tag-default">
-                    javascript
-                  </a>
-                  <a href="" className="tag-pill tag-default">
-                    emberjs
-                  </a>
-                  <a href="" className="tag-pill tag-default">
-                    angularjs
-                  </a>
-                  <a href="" className="tag-pill tag-default">
-                    react
-                  </a>
-                  <a href="" className="tag-pill tag-default">
-                    mean
-                  </a>
-                  <a href="" className="tag-pill tag-default">
-                    node
-                  </a>
-                  <a href="" className="tag-pill tag-default">
-                    rails
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <footer>
-        <div className="container">
-          <a href="/" className="logo-font">
-            conduit
-          </a>
-          <span className="attribution">
-            An interactive learning project from{' '}
-            <a href="https://thinkster.io">Thinkster</a>. Code &amp; design
-            licensed under MIT.
-          </span>
-        </div>
-      </footer>
-    </>
+    <HomePageContainer>
+      <HomeBanner />
+      <HomeFeedContents />
+    </HomePageContainer>
   );
 };
diff --git a/apps/react-world/src/routes/Routes.tsx b/apps/react-world/src/routes/Routes.tsx
index 806b9306..b6476e7e 100644
--- a/apps/react-world/src/routes/Routes.tsx
+++ b/apps/react-world/src/routes/Routes.tsx
@@ -1,4 +1,5 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { Layout } from '../components/Layout';
 import { HomePage } from '../pages/home';
 import { LoginPage } from '../pages/login';
 import { RegisterPage } from '../pages/register';
@@ -39,5 +40,9 @@ const router = createBrowserRouter([
 ]);
 
 export const Routes = () => {
-  return <RouterProvider router={router} />;
+  return (
+    <Layout>
+      <RouterProvider router={router} />;
+    </Layout>
+  );
 };