기존 예제 템플릿 페이지를 서비스 내부로 옮겨옵니다.

.github/CODEOWNERS

@@ -1,3 +1 @@
-@hhhminme
-@brgndyy
-@InSeong-So
+* @hhhminme @brgndyy @InSeong-So @Siihyun @0uizi0

apps/web/app/(article)/article/page.tsx

@@ -0,0 +1,134 @@
+export default function ArticlePage(): JSX.Element {
+  return (
+    <div className="article-page">
+      <div className="banner">
+        <div className="container">
+          <h1>How to build webapps that scale</h1>
+
+          <div className="article-meta">
+            <a href="/profile/eric-simons">
+              <img alt="" src="http://i.imgur.com/Qr71crq.jpg" />
+            </a>
+            <div className="info">
+              <a className="author" href="/profile/eric-simons">
+                Eric Simons
+              </a>
+              <span className="date">January 20th</span>
+            </div>
+            <button className="btn btn-sm btn-outline-secondary" type="button">
+              <i className="ion-plus-round" />
+              &nbsp; Follow Eric Simons <span className="counter">(10)</span>
+            </button>
+            &nbsp;&nbsp;
+            <button className="btn btn-sm btn-outline-primary" type="button">
+              <i className="ion-heart" />
+              &nbsp; Favorite Post <span className="counter">(29)</span>
+            </button>
+            <button className="btn btn-sm btn-outline-secondary" type="button">
+              <i className="ion-edit" /> Edit Article
+            </button>
+            <button className="btn btn-sm btn-outline-danger" type="button">
+              <i className="ion-trash-a" /> Delete Article
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="container page">
+        <div className="row article-content">
+          <div className="col-md-12">
+            <p>Web development technologies have evolved at an incredible clip over the past few years.</p>
+            <h2 id="introducing-ionic">Introducing RealWorld.</h2>
+            <p>It&rsquo;s a great solution for learning how other frameworks work.</p>
+            <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>
+          </div>
+        </div>
+
+        <hr />
+
+        <div className="article-actions">
+          <div className="article-meta">
+            <a href="profile.html">
+              <img alt="" src="http://i.imgur.com/Qr71crq.jpg" />
+            </a>
+            <div className="info">
+              <a className="author" href="/">
+                Eric Simons
+              </a>
+              <span className="date">January 20th</span>
+            </div>
+            <button className="btn btn-sm btn-outline-secondary" type="button">
+              <i className="ion-plus-round" />
+              &nbsp; Follow Eric Simons
+            </button>
+            &nbsp;
+            <button className="btn btn-sm btn-outline-primary" type="button">
+              <i className="ion-heart" />
+              &nbsp; Favorite Article <span className="counter">(29)</span>
+            </button>
+            <button className="btn btn-sm btn-outline-secondary" type="button">
+              <i className="ion-edit" /> Edit Article
+            </button>
+            <button className="btn btn-sm btn-outline-danger" type="button">
+              <i className="ion-trash-a" /> Delete Article
+            </button>
+          </div>
+        </div>
+
+        <div className="row">
+          <div className="col-xs-12 col-md-8 offset-md-2">
+            <form className="card comment-form">
+              <div className="card-block">
+                <textarea className="form-control" placeholder="Write a comment..." rows={3} />
+              </div>
+              <div className="card-footer">
+                <img alt="" className="comment-author-img" src="http://i.imgur.com/Qr71crq.jpg" />
+                <button className="btn btn-sm btn-primary" type="button">
+                  Post Comment
+                </button>
+              </div>
+            </form>
+
+            <div className="card">
+              <div className="card-block">
+                <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
+              </div>
+              <div className="card-footer">
+                <a className="comment-author" href="/profile/author">
+                  <img alt="" className="comment-author-img" src="http://i.imgur.com/Qr71crq.jpg" />
+                </a>
+                &nbsp;
+                <a className="comment-author" href="/profile/jacob-schmidt">
+                  Jacob Schmidt
+                </a>
+                <span className="date-posted">Dec 29th</span>
+              </div>
+            </div>
+
+            <div className="card">
+              <div className="card-block">
+                <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
+              </div>
+              <div className="card-footer">
+                <a className="comment-author" href="/profile/author">
+                  <img alt="" className="comment-author-img" src="http://i.imgur.com/Qr71crq.jpg" />
+                </a>
+                &nbsp;
+                <a className="comment-author" href="/profile/jacob-schmidt">
+                  Jacob Schmidt
+                </a>
+                <span className="date-posted">Dec 29th</span>
+                <span className="mod-options">
+                  <i className="ion-trash-a" />
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/app/(article)/edit/page.tsx

@@ -0,0 +1,41 @@
+export default function EditPage(): JSX.Element {
+  return (
+    <div className="editor-page">
+      <div className="container page">
+        <div className="row">
+          <div className="col-md-10 offset-md-1 col-xs-12">
+            <ul className="error-messages">
+              <li>That title is required</li>
+            </ul>
+
+            <form>
+              <fieldset>
+                <fieldset className="form-group">
+                  <input className="form-control form-control-lg" placeholder="Article Title" type="text" />
+                </fieldset>
+                <fieldset className="form-group">
+                  <input className="form-control" placeholder="What's this article about?" type="text" />
+                </fieldset>
+                <fieldset className="form-group">
+                  <textarea className="form-control" placeholder="Write your article (in markdown)" rows={8} />
+                </fieldset>
+                <fieldset className="form-group">
+                  <input className="form-control" placeholder="Enter tags" type="text" />
+                  <div className="tag-list">
+                    <span className="tag-default tag-pill">
+                      {" "}
+                      <i className="ion-close-round" /> tag{" "}
+                    </span>
+                  </div>
+                </fieldset>
+                <button className="btn btn-lg pull-xs-right btn-primary" type="button">
+                  Publish Article
+                </button>
+              </fieldset>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/app/(auth)/login/page.tsx

@@ -0,0 +1,32 @@
+export default function LoginPage(): JSX.Element {
+  return (
+    <div className="auth-page">
+      <div className="container page">
+        <div className="row">
+          <div className="col-md-6 offset-md-3 col-xs-12">
+            <h1 className="text-xs-center">Sign in</h1>
+            <p className="text-xs-center">
+              <a href="/register">Need an account?</a>
+            </p>
+
+            <ul className="error-messages">
+              <li>That email is already taken</li>
+            </ul>
+
+            <form>
+              <fieldset className="form-group">
+                <input className="form-control form-control-lg" placeholder="Email" type="text" />
+              </fieldset>
+              <fieldset className="form-group">
+                <input className="form-control form-control-lg" placeholder="Password" type="password" />
+              </fieldset>
+              <button className="btn btn-lg btn-primary pull-xs-right" type="button">
+                Sign in
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/app/(auth)/register/page.tsx

@@ -0,0 +1,35 @@
+export default function RegisterPage(): JSX.Element {
+  return (
+    <div className="auth-page">
+      <div className="container page">
+        <div className="row">
+          <div className="col-md-6 offset-md-3 col-xs-12">
+            <h1 className="text-xs-center">Sign up</h1>
+            <p className="text-xs-center">
+              <a href="/login">Have an account?</a>
+            </p>
+
+            <ul className="error-messages">
+              <li>That email is already taken</li>
+            </ul>
+
+            <form>
+              <fieldset className="form-group">
+                <input className="form-control form-control-lg" placeholder="Username" type="text" />
+              </fieldset>
+              <fieldset className="form-group">
+                <input className="form-control form-control-lg" placeholder="Email" type="text" />
+              </fieldset>
+              <fieldset className="form-group">
+                <input className="form-control form-control-lg" placeholder="Password" type="password" />
+              </fieldset>
+              <button className="btn btn-lg btn-primary pull-xs-right" type="button">
+                Sign up
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/app/(user)/profile/page.tsx

@@ -0,0 +1,114 @@
+export default function ProfilePage(): JSX.Element {
+  return (
+    <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 alt="" className="user-img" src="http://i.imgur.com/Qr71crq.jpg" />
+              <h4>Eric Simons</h4>
+              <p>
+                Cofounder @GoThinkster, lived in Aol&rsquo;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" type="button">
+                <i className="ion-plus-round" />
+                &nbsp; Follow Eric Simons
+              </button>
+              <button className="btn btn-sm btn-outline-secondary action-btn" type="button">
+                <i className="ion-gear-a" />
+                &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 alt="" src="http://i.imgur.com/Qr71crq.jpg" />
+                </a>
+                <div className="info">
+                  <a className="author" href="/profile/eric-simons">
+                    Eric Simons
+                  </a>
+                  <span className="date">January 20th</span>
+                </div>
+                <button className="btn btn-outline-primary btn-sm pull-xs-right" type="button">
+                  <i className="ion-heart" /> 29
+                </button>
+              </div>
+              <a className="preview-link" href="/article/how-to-buil-webapps-that-scale">
+                <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 alt="" src="http://i.imgur.com/N4VcUeJ.jpg" />
+                </a>
+                <div className="info">
+                  <a className="author" href="/profile/albert-pai">
+                    Albert Pai
+                  </a>
+                  <span className="date">January 20th</span>
+                </div>
+                <button className="btn btn-outline-primary btn-sm pull-xs-right" type="button">
+                  <i className="ion-heart" /> 32
+                </button>
+              </div>
+              <a className="preview-link" href="/article/the-song-you">
+                <h1>The song you won&rsquo;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>
+  );
+}