Merge pull request #53 from pagers-org/carpe/profile-template

feat(app, profile): profile.html 템플릿 기반으로 프로필 페이지를 만들고, 페이지 라우팅을 추가합니다.

apps/react-world/src/pages/profile.tsx

@@ -0,0 +1,173 @@
+import { useParams } from 'react-router-dom';
+
+export const ProfilePage = () => {
+  const { username } = useParams<{ username: string }>();
+
+  console.log('username: ' + username);
+
+  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="profile-page">
+        <div className="user-info">
+          <div className="container">
+            <div className="row">
+              <div className="col-xs-12 col-md-10 offset-md-1">
+                <img
+                  src="http://i.imgur.com/Qr71crq.jpg"
+                  className="user-img"
+                />
+                <h4>Eric Simons</h4>
+                <p>
+                  Cofounder @GoThinkster, lived in Aol&apos;s HQ for a few
+                  months, kinda looks like Peeta from the Hunger Games
+                </p>
+                <button className="btn btn-sm btn-outline-secondary action-btn">
+                  <i className="ion-plus-round"></i>
+                  &nbsp; Follow Eric Simons
+                </button>
+                <button className="btn btn-sm btn-outline-secondary action-btn">
+                  <i className="ion-gear-a"></i>
+                  &nbsp; Edit Profile Settings
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="container">
+          <div className="row">
+            <div className="col-xs-12 col-md-10 offset-md-1">
+              <div className="articles-toggle">
+                <ul className="nav nav-pills outline-active">
+                  <li className="nav-item">
+                    <a className="nav-link active" href="">
+                      My Articles
+                    </a>
+                  </li>
+                  <li className="nav-item">
+                    <a className="nav-link" href="">
+                      Favorited Articles
+                    </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-buil-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">Music</li>
+                    <li className="tag-default tag-pill tag-outline">Song</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>
+        </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>
+    </>
+  );
+};

apps/react-world/src/routes/Routes.tsx

@@ -2,6 +2,7 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { HomePage } from '../pages/home';
 import { LoginPage } from '../pages/login';
 import { RegisterPage } from '../pages/register';
+import { ProfilePage } from '../pages/profile';
 import { ArticlePage } from '../pages/article';
 import { EditorPage } from '../pages/editor';
 import { SettingsPage } from '../pages/settings';
@@ -19,6 +20,10 @@ const router = createBrowserRouter([
     path: '/register',
     element: <RegisterPage />,
   },
+  {
+    path: '/profile/:username',
+    element: <ProfilePage />,
+  },
   {
     path: '/editor/:articleSlug?', // 새 아티클 작성 | 아티클 수정
     element: <EditorPage />,