feat(app, editor): edit.html 템플릿 기반으로 아티클 작성/수정 페이지를 만들고, 페이지 라우팅을 추가합니다.

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

@@ -0,0 +1,112 @@
+import { useParams } from 'react-router-dom';
+
+export const EditorPage = () => {
+  // slug 가 없으면 새 아티클 작성, 존재하면 권한에 따라 기존 아티클 수정
+  const { articleSlug } = useParams<{ articleSlug?: string }>();
+
+  console.log({ articleSlug });
+
+  if (articleSlug) {
+    // 권한이 있다면 기존 아티클 수정
+    return <div>아티클 수정</div>;
+  } else {
+    // 새 아티클 작성
+    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="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
+                        type="text"
+                        className="form-control form-control-lg"
+                        placeholder="Article Title"
+                      />
+                    </fieldset>
+                    <fieldset className="form-group">
+                      <input
+                        type="text"
+                        className="form-control"
+                        placeholder="What's this article about?"
+                      />
+                    </fieldset>
+                    <fieldset className="form-group">
+                      <textarea
+                        className="form-control"
+                        placeholder="Write your article (in markdown)"
+                      ></textarea>
+                    </fieldset>
+                    <fieldset className="form-group">
+                      <input
+                        type="text"
+                        className="form-control"
+                        placeholder="Enter tags"
+                      />
+                      <div className="tag-list">
+                        <span className="tag-default tag-pill">
+                          {' '}
+                          <i className="ion-close-round"></i> 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>
+
+        <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

@@ -3,6 +3,7 @@ import { HomePage } from '../pages/home';
 import { LoginPage } from '../pages/login';
 import { RegisterPage } from '../pages/register';
 import { ArticlePage } from '../pages/article';
+import { EditorPage } from '../pages/editor';
 
 const router = createBrowserRouter([
   {
@@ -18,7 +19,11 @@ const router = createBrowserRouter([
     element: <RegisterPage />,
   },
   {
-    path: '/article/:articleSlug',
+    path: '/editor/:articleSlug?', // 새 아티클 작성 | 아티클 수정
+    element: <EditorPage />,
+  },
+  {
+    path: '/article/:slug',
     element: <ArticlePage />,
   },
 ]);