Merge pull request #52 from pagers-org/carpe/settings-template

feat(app, settings): settings.html 템플릿 기반으로 설정화면 페이지를 만들고, 페이지 라우팅을 추가합니다.

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

@@ -0,0 +1,104 @@
+export const SettingsPage = () => {
+  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="settings-page">
+        <div className="container page">
+          <div className="row">
+            <div className="col-md-6 offset-md-3 col-xs-12">
+              <h1 className="text-xs-center">Your Settings</h1>
+
+              <ul className="error-messages">
+                <li>That name is required</li>
+              </ul>
+
+              <form>
+                <fieldset>
+                  <fieldset className="form-group">
+                    <input
+                      className="form-control"
+                      type="text"
+                      placeholder="URL of profile picture"
+                    />
+                  </fieldset>
+                  <fieldset className="form-group">
+                    <input
+                      className="form-control form-control-lg"
+                      type="text"
+                      placeholder="Your Name"
+                    />
+                  </fieldset>
+                  <fieldset className="form-group">
+                    <textarea
+                      className="form-control form-control-lg"
+                      rows="8"
+                      placeholder="Short bio about you"
+                    ></textarea>
+                  </fieldset>
+                  <fieldset className="form-group">
+                    <input
+                      className="form-control form-control-lg"
+                      type="text"
+                      placeholder="Email"
+                    />
+                  </fieldset>
+                  <fieldset className="form-group">
+                    <input
+                      className="form-control form-control-lg"
+                      type="password"
+                      placeholder="New Password"
+                    />
+                  </fieldset>
+                  <button className="btn btn-lg btn-primary pull-xs-right">
+                    Update Settings
+                  </button>
+                </fieldset>
+              </form>
+              <hr />
+              <button className="btn btn-outline-danger">
+                Or click here to logout.
+              </button>
+            </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

@@ -4,6 +4,7 @@ import { LoginPage } from '../pages/login';
 import { RegisterPage } from '../pages/register';
 import { ArticlePage } from '../pages/article';
 import { EditorPage } from '../pages/editor';
+import { SettingsPage } from '../pages/settings';
 
 const router = createBrowserRouter([
   {
@@ -26,6 +27,10 @@ const router = createBrowserRouter([
     path: '/article/:slug',
     element: <ArticlePage />,
   },
+  {
+    path: '/settings',
+    element: <SettingsPage />,
+  },
 ]);
 
 export const Routes = () => {