feat(app, home): 홈페이지 내부를 React 컴포넌트로 분리하고, 공용 레이아웃으로 감싸도록 페이지 내부를 리팩토링합니다.

.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: {

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>
+  );
+};

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 />
+    </>
+  );
+};

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>
+  );
+};

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;

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;

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>
+  );
+};

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;

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;

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;

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;