From 681d3ac6e0da94fd5632ae89591a99b5edc92b9e Mon Sep 17 00:00:00 2001
From: Hyelim Choi <HyelimChoi01@gmail.com>
Date: Sun, 24 Nov 2024 14:40:08 +0900
Subject: [PATCH 01/11] =?UTF-8?q?chore:=20lazy=20=EB=A1=9C=EB=94=A9=20?=
 =?UTF-8?q?=EC=95=88=EA=B1=B8=EB=A6=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/routers/router.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/routers/router.tsx b/frontend/src/routers/router.tsx
index e627cd1e..cd234b81 100644
--- a/frontend/src/routers/router.tsx
+++ b/frontend/src/routers/router.tsx
@@ -2,11 +2,8 @@ import React, { Suspense } from 'react';
 import { createBrowserRouter, Outlet } from 'react-router-dom';
 
 import FooterLayout from '@/components/_common/layout/FooterLayout';
+import MobileLayout from '@/components/_common/layout/MobileLayout';
 import { ROUTE_PATH } from '@/constants/routePath';
-import ResetPasswordPage from '@/pages/ResetPasswordPage';
-import RoomComparePage from '@/pages/RoomComparePage';
-import SignInPage from '@/pages/SignInPage';
-import SignUpPage from '@/pages/SignUpPage';
 
 const MainPage = React.lazy(() => import('@/pages/MainPage'));
 const ChecklistListPage = React.lazy(() => import('@/pages/ChecklistListPage'));
@@ -20,6 +17,12 @@ const ArticleDetailPage = React.lazy(() => import('@/pages/ArticleDetailPage'));
 const LandingPage = React.lazy(() => import('@/pages/LandingPage'));
 const NotFound = React.lazy(() => import('@/pages/NotFound'));
 const ErrorPage = React.lazy(() => import('@/pages/ErrorPage'));
+const ResetPasswordPage = React.lazy(() => import('@/pages/ResetPasswordPage'));
+const RoomComparePage = React.lazy(() => import('@/pages/RoomComparePage'));
+const SignInPage = React.lazy(() => import('@/pages/SignInPage'));
+const SignUpPage = React.lazy(() => import('@/pages/SignUpPage'));
+const AdminPage = React.lazy(() => import('@/pages/AdminPage'));
+const ArticleEditorPage = React.lazy(() => import('@/pages/ArticleEditorPage'));
 
 const router = createBrowserRouter([
   {

From 188d6ed12ba45d0d71ddfa0e118e0da4f3ec0b84 Mon Sep 17 00:00:00 2001
From: Hyelim Choi <HyelimChoi01@gmail.com>
Date: Sun, 24 Nov 2024 14:40:33 +0900
Subject: [PATCH 02/11] =?UTF-8?q?chore:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EC=82=AC=EC=9D=B4=EC=A6=88=20=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=EC=9C=BC=EB=A1=9C=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_common/layout/MobileLayout.tsx           | 27 +++++++++++++++++
 frontend/src/routers/router.tsx               | 30 ++++++++++++++++---
 frontend/src/styles/global.ts                 | 10 -------
 3 files changed, 53 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/components/_common/layout/MobileLayout.tsx

diff --git a/frontend/src/components/_common/layout/MobileLayout.tsx b/frontend/src/components/_common/layout/MobileLayout.tsx
new file mode 100644
index 00000000..8179cf9f
--- /dev/null
+++ b/frontend/src/components/_common/layout/MobileLayout.tsx
@@ -0,0 +1,27 @@
+import styled from '@emotion/styled';
+
+import theme from '@/styles/theme';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const MobileLayout = ({ children }: Props) => {
+  return <S.BodyWrapper>{children}</S.BodyWrapper>;
+};
+
+export default MobileLayout;
+
+const S = {
+  BodyWrapper: styled.div`
+    max-width: 60rem;
+    min-height: 100dvh;
+
+    margin: 0 auto;
+    box-sizing: border-box;
+
+    border-left: 0.1rem solid ${theme.palette.grey200};
+    border-right: 0.1rem solid ${theme.palette.grey200};
+    box-shadow: 0 0 2rem ${theme.palette.grey100};
+  `,
+};
diff --git a/frontend/src/routers/router.tsx b/frontend/src/routers/router.tsx
index cd234b81..61ab054c 100644
--- a/frontend/src/routers/router.tsx
+++ b/frontend/src/routers/router.tsx
@@ -25,11 +25,14 @@ const AdminPage = React.lazy(() => import('@/pages/AdminPage'));
 const ArticleEditorPage = React.lazy(() => import('@/pages/ArticleEditorPage'));
 
 const router = createBrowserRouter([
+  // 모바일 페이지 레이아웃
   {
     element: (
-      <Suspense>
-        <Outlet />
-      </Suspense>
+      <MobileLayout>
+        <Suspense>
+          <Outlet />
+        </Suspense>
+      </MobileLayout>
     ),
     errorElement: <ErrorPage />,
     children: [
@@ -86,7 +89,6 @@ const router = createBrowserRouter([
         element: <SignInPage />,
         path: ROUTE_PATH.signIn,
       },
-
       {
         element: <ResetPasswordPage />,
         path: ROUTE_PATH.resetPassword,
@@ -101,6 +103,26 @@ const router = createBrowserRouter([
       },
     ],
   },
+
+  // 어드민 페이지 레이아웃
+  {
+    element: (
+      <Suspense>
+        <Outlet />
+      </Suspense>
+    ),
+    errorElement: <ErrorPage />,
+    children: [
+      {
+        element: <AdminPage />,
+        path: ROUTE_PATH.admin,
+      },
+      {
+        element: <ArticleEditorPage />,
+        path: ROUTE_PATH.articleEditor,
+      },
+    ],
+  },
 ]);
 
 export default router;
diff --git a/frontend/src/styles/global.ts b/frontend/src/styles/global.ts
index 78f1d466..d2d18ae7 100644
--- a/frontend/src/styles/global.ts
+++ b/frontend/src/styles/global.ts
@@ -17,16 +17,6 @@ export const baseStyle = css`
 
     font-size: ${theme.text.size.small};
 
-    max-width: 60rem;
-    min-height: 100dvh;
-
-    margin: 0 auto;
-    box-sizing: border-box;
-
-    border-left: 0.1rem solid ${theme.palette.grey200};
-    border-right: 0.1rem solid ${theme.palette.grey200};
-    box-shadow: 0 0 2rem ${theme.palette.grey100};
-
     @supports (-webkit-touch-callout: none) {
       min-height: -webkit-fill-available;
     }

From 02327070de43b90704a31a51cd4717d17f67fec9 Mon Sep 17 00:00:00 2001
From: Hyelim Choi <HyelimChoi01@gmail.com>
Date: Sun, 24 Nov 2024 14:40:57 +0900
Subject: [PATCH 03/11] =?UTF-8?q?feat:=20=EB=AA=A9=20=EC=96=B4=EB=93=9C?=
 =?UTF-8?q?=EB=AF=BC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/constants/routePath.ts |  1 +
 frontend/src/pages/AdminPage.tsx    | 72 +++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+)
 create mode 100644 frontend/src/pages/AdminPage.tsx

diff --git a/frontend/src/constants/routePath.ts b/frontend/src/constants/routePath.ts
index aad2bc39..d4207f43 100644
--- a/frontend/src/constants/routePath.ts
+++ b/frontend/src/constants/routePath.ts
@@ -21,4 +21,5 @@ export const ROUTE_PATH = {
   /* etc */
   location: '/location',
   myPage: '/my-page',
+  admin: '/admin',
 };
diff --git a/frontend/src/pages/AdminPage.tsx b/frontend/src/pages/AdminPage.tsx
new file mode 100644
index 00000000..91489d01
--- /dev/null
+++ b/frontend/src/pages/AdminPage.tsx
@@ -0,0 +1,72 @@
+import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
+
+import { ROUTE_PATH } from '@/constants/routePath';
+import { boxShadowSpread, flexRow, title2, title3 } from '@/styles/common';
+
+const AdminPage = () => {
+  return (
+    <S.PageWrapper>
+      <S.QuestionBox>
+        <S.QuestionText>Is Hailey God?</S.QuestionText>
+        <S.ButtonWrapper>
+          <S.Button color={'red'}>No</S.Button>
+          <Link to={ROUTE_PATH.articleEditor}>
+            <S.Button>Yes</S.Button>
+          </Link>
+        </S.ButtonWrapper>
+      </S.QuestionBox>
+    </S.PageWrapper>
+  );
+};
+
+export default AdminPage;
+
+const S = {
+  PageWrapper: styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh; /* 전체 화면 높이에 맞춰 정렬 */
+
+    background-color: ${({ theme }) => theme.palette.white};
+  `,
+
+  QuestionBox: styled.div`
+    padding: 2rem;
+
+    background-color: ${({ theme }) => theme.palette.white};
+
+    text-align: center;
+    border-radius: 10px;
+    ${boxShadowSpread}
+  `,
+
+  QuestionText: styled.h2`
+    margin-bottom: 2rem;
+
+    color: ${({ theme }) => theme.palette.black};
+    ${title2}
+  `,
+  ButtonWrapper: styled.div`
+    ${flexRow}
+    justify-content: center;
+    gap: 1rem;
+  `,
+  Button: styled.button<{ color?: string }>`
+    padding: 0.8rem 2rem;
+    border: none;
+
+    background-color: ${({ theme, color }) => (color === 'red' ? theme.palette.red500 : theme.palette.green500)};
+
+    color: ${({ theme }) => theme.palette.white};
+    ${title3}
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+
+    &:hover {
+      background-color: ${({ theme, color }) => (color === 'red' ? theme.palette.red600 : theme.palette.green600)};
+    }
+  `,
+};

From d2a8f073235f1233ac4fbde532b2bd2a53666fcc Mon Sep 17 00:00:00 2001
From: Hyelim Choi <HyelimChoi01@gmail.com>
Date: Sun, 24 Nov 2024 14:41:27 +0900
Subject: [PATCH 04/11] =?UTF-8?q?chore:=20=EB=A7=88=ED=81=AC=EB=8B=A4?=
 =?UTF-8?q?=EC=9A=B4=20=EB=9D=BC=EC=9D=B4=EB=B8=8C=EB=9F=AC=EB=A6=AC=20?=
 =?UTF-8?q?=EC=84=A4=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package.json |   1 +
 frontend/yarn.lock    | 582 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 583 insertions(+)

diff --git a/frontend/package.json b/frontend/package.json
index e81d92a7..67a2150c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -36,6 +36,7 @@
     "@emotion/styled": "^11.11.5",
     "@sentry/react": "^8.22.0",
     "@tanstack/react-query": "^5.51.15",
+    "@uiw/react-markdown-editor": "^6.1.2",
     "@uiw/react-markdown-preview": "^5.1.2",
     "babel-loader": "^9.2.1",
     "init": "^0.1.2",
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 93ec14d8..4266fcce 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1509,6 +1509,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.18.6", "@babel/runtime@^7.22.6":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1"
+  integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.24.7", "@babel/template@^7.3.3":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.24.7.tgz#02efcee317d0609d2c07117cb70ef8fb17ab7315"
@@ -1647,6 +1654,338 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
+"@codemirror/autocomplete@^6.0.0", "@codemirror/autocomplete@^6.3.2", "@codemirror/autocomplete@^6.7.1":
+  version "6.18.3"
+  resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.18.3.tgz#f9ea79a2f369662516f71bc0b2f819454d3c8e00"
+  integrity sha512-1dNIOmiM0z4BIBwxmxEfA1yoxh1MF/6KPBbh20a5vphGV0ictKlgQsbJs6D6SkR6iJpGbpwRsa6PFMNlg9T9pQ==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.17.0"
+    "@lezer/common" "^1.0.0"
+
+"@codemirror/commands@^6.0.0", "@codemirror/commands@^6.1.0":
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-6.7.1.tgz#04561e95bc0779eaa49efd63e916c4efb3bbf6d6"
+  integrity sha512-llTrboQYw5H4THfhN4U3qCnSZ1SOJ60ohhz+SzU0ADGtwlc533DtklQP0vSFaQuCPDn3BPpOd1GbbnUtwNjsrw==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.4.0"
+    "@codemirror/view" "^6.27.0"
+    "@lezer/common" "^1.1.0"
+
+"@codemirror/lang-angular@^0.1.0":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-angular/-/lang-angular-0.1.3.tgz#83035e7e9e1f0e2ba466e83d778407b519089a28"
+  integrity sha512-xgeWGJQQl1LyStvndWtruUvb4SnBZDAu/gvFH/ZU+c0W25tQR8e5hq7WTwiIY2dNxnf+49mRiGI/9yxIwB6f5w==
+  dependencies:
+    "@codemirror/lang-html" "^6.0.0"
+    "@codemirror/lang-javascript" "^6.1.2"
+    "@codemirror/language" "^6.0.0"
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.3.3"
+
+"@codemirror/lang-cpp@^6.0.0":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-cpp/-/lang-cpp-6.0.2.tgz#076c98340c3beabde016d7d83e08eebe17254ef9"
+  integrity sha512-6oYEYUKHvrnacXxWxYa6t4puTlbN3dgV662BDfSH8+MfjQjVmP697/KYTDOqpxgerkvoNm7q5wlFMBeX8ZMocg==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@lezer/cpp" "^1.0.0"
+
+"@codemirror/lang-css@^6.0.0", "@codemirror/lang-css@^6.2.0":
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-css/-/lang-css-6.3.0.tgz#607628559f2471b385c6070ec795072a55cffc0b"
+  integrity sha512-CyR4rUNG9OYcXDZwMPvJdtb6PHbBDKUc/6Na2BIwZ6dKab1JQqKa4di+RNRY9Myn7JB81vayKwJeQ7jEdmNVDA==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@lezer/common" "^1.0.2"
+    "@lezer/css" "^1.1.7"
+
+"@codemirror/lang-go@^6.0.0":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-go/-/lang-go-6.0.1.tgz#598222c90f56eae28d11069c612ca64d0306b057"
+  integrity sha512-7fNvbyNylvqCphW9HD6WFnRpcDjr+KXX/FgqXy5H5ZS0eC5edDljukm/yNgYkwTsgp2busdod50AOTIy6Jikfg==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/language" "^6.6.0"
+    "@codemirror/state" "^6.0.0"
+    "@lezer/common" "^1.0.0"
+    "@lezer/go" "^1.0.0"
+
+"@codemirror/lang-html@^6.0.0":
+  version "6.4.9"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-html/-/lang-html-6.4.9.tgz#d586f2cc9c341391ae07d1d7c545990dfa069727"
+  integrity sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/lang-css" "^6.0.0"
+    "@codemirror/lang-javascript" "^6.0.0"
+    "@codemirror/language" "^6.4.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.17.0"
+    "@lezer/common" "^1.0.0"
+    "@lezer/css" "^1.1.0"
+    "@lezer/html" "^1.3.0"
+
+"@codemirror/lang-java@^6.0.0":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-java/-/lang-java-6.0.1.tgz#03bd06334da7c8feb9dff6db01ac6d85bd2e48bb"
+  integrity sha512-OOnmhH67h97jHzCuFaIEspbmsT98fNdhVhmA3zCxW0cn7l8rChDhZtwiwJ/JOKXgfm4J+ELxQihxaI7bj7mJRg==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@lezer/java" "^1.0.0"
+
+"@codemirror/lang-javascript@^6.0.0", "@codemirror/lang-javascript@^6.1.2":
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-javascript/-/lang-javascript-6.2.2.tgz#7141090b22994bef85bcc5608a3bc1257f2db2ad"
+  integrity sha512-VGQfY+FCc285AhWuwjYxQyUQcYurWlxdKYT4bqwr3Twnd5wP5WSeu52t4tvvuWmljT4EmgEgZCqSieokhtY8hg==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/language" "^6.6.0"
+    "@codemirror/lint" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.17.0"
+    "@lezer/common" "^1.0.0"
+    "@lezer/javascript" "^1.0.0"
+
+"@codemirror/lang-json@^6.0.0":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-json/-/lang-json-6.0.1.tgz#0a0be701a5619c4b0f8991f9b5e95fe33f462330"
+  integrity sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@lezer/json" "^1.0.0"
+
+"@codemirror/lang-less@^6.0.0":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-less/-/lang-less-6.0.2.tgz#2e3d82a3ddb8710e6409689cd4a28c66558d0cb8"
+  integrity sha512-EYdQTG22V+KUUk8Qq582g7FMnCZeEHsyuOJisHRft/mQ+ZSZ2w51NupvDUHiqtsOy7It5cHLPGfHQLpMh9bqpQ==
+  dependencies:
+    "@codemirror/lang-css" "^6.2.0"
+    "@codemirror/language" "^6.0.0"
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+
+"@codemirror/lang-liquid@^6.0.0":
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-liquid/-/lang-liquid-6.2.2.tgz#5b5a2391ac14b6af85c520b8b81ea1f344d40a62"
+  integrity sha512-7Dm841fk37+JQW6j2rI1/uGkJyESrjzyhiIkaLjbbR0U6aFFQvMrJn35WxQreRMADMhzkyVkZM4467OR7GR8nQ==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/lang-html" "^6.0.0"
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/common" "^1.0.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.3.1"
+
+"@codemirror/lang-markdown@^6.0.0":
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-markdown/-/lang-markdown-6.3.1.tgz#067e4e18993fa3520e2a980d2dce5fe23dd245a0"
+  integrity sha512-y3sSPuQjBKZQbQwe3ZJKrSW6Silyl9PnrU/Mf0m2OQgIlPoSYTtOvEL7xs94SVMkb8f4x+SQFnzXPdX4Wk2lsg==
+  dependencies:
+    "@codemirror/autocomplete" "^6.7.1"
+    "@codemirror/lang-html" "^6.0.0"
+    "@codemirror/language" "^6.3.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/common" "^1.2.1"
+    "@lezer/markdown" "^1.0.0"
+
+"@codemirror/lang-php@^6.0.0":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-php/-/lang-php-6.0.1.tgz#fa34cc75562178325861a5731f79bd621f57ffaa"
+  integrity sha512-ublojMdw/PNWa7qdN5TMsjmqkNuTBD3k6ndZ4Z0S25SBAiweFGyY68AS3xNcIOlb6DDFDvKlinLQ40vSLqf8xA==
+  dependencies:
+    "@codemirror/lang-html" "^6.0.0"
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@lezer/common" "^1.0.0"
+    "@lezer/php" "^1.0.0"
+
+"@codemirror/lang-python@^6.0.0":
+  version "6.1.6"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-python/-/lang-python-6.1.6.tgz#0c55e7e2dfa85b68be93b9692e5d3f76f284bbb2"
+  integrity sha512-ai+01WfZhWqM92UqjnvorkxosZ2aq2u28kHvr+N3gu012XqY2CThD67JPMHnGceRfXPDBmn1HnyqowdpF57bNg==
+  dependencies:
+    "@codemirror/autocomplete" "^6.3.2"
+    "@codemirror/language" "^6.8.0"
+    "@codemirror/state" "^6.0.0"
+    "@lezer/common" "^1.2.1"
+    "@lezer/python" "^1.1.4"
+
+"@codemirror/lang-rust@^6.0.0":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-rust/-/lang-rust-6.0.1.tgz#d6829fc7baa39a15bcd174a41a9e0a1bf7cf6ba8"
+  integrity sha512-344EMWFBzWArHWdZn/NcgkwMvZIWUR1GEBdwG8FEp++6o6vT6KL9V7vGs2ONsKxxFUPXKI0SPcWhyYyl2zPYxQ==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@lezer/rust" "^1.0.0"
+
+"@codemirror/lang-sass@^6.0.0":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-sass/-/lang-sass-6.0.2.tgz#38c1b0a1326cc9f5cb2741d2cd51cfbcd7abc0b2"
+  integrity sha512-l/bdzIABvnTo1nzdY6U+kPAC51czYQcOErfzQ9zSm9D8GmNPD0WTW8st/CJwBTPLO8jlrbyvlSEcN20dc4iL0Q==
+  dependencies:
+    "@codemirror/lang-css" "^6.2.0"
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@lezer/common" "^1.0.2"
+    "@lezer/sass" "^1.0.0"
+
+"@codemirror/lang-sql@^6.0.0":
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-sql/-/lang-sql-6.8.0.tgz#1ae68ad49f378605ff88a4cc428ba667ce056068"
+  integrity sha512-aGLmY4OwGqN3TdSx3h6QeA1NrvaYtF7kkoWR/+W7/JzB0gQtJ+VJxewlnE3+VImhA4WVlhmkJr109PefOOhjLg==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+
+"@codemirror/lang-vue@^0.1.1":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-vue/-/lang-vue-0.1.3.tgz#bf79b9152cc18b4903d64c1f67e186ae045c8a97"
+  integrity sha512-QSKdtYTDRhEHCfo5zOShzxCmqKJvgGrZwDQSdbvCRJ5pRLWBS7pD/8e/tH44aVQT6FKm0t6RVNoSUWHOI5vNug==
+  dependencies:
+    "@codemirror/lang-html" "^6.0.0"
+    "@codemirror/lang-javascript" "^6.1.2"
+    "@codemirror/language" "^6.0.0"
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.3.1"
+
+"@codemirror/lang-wast@^6.0.0":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-wast/-/lang-wast-6.0.2.tgz#d2b14175e5e80d7878cbbb29e20ec90dc12d3a2b"
+  integrity sha512-Imi2KTpVGm7TKuUkqyJ5NRmeFWF7aMpNiwHnLQe0x9kmrxElndyH0K6H/gXtWwY6UshMRAhpENsgfpSwsgmC6Q==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+
+"@codemirror/lang-xml@^6.0.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-xml/-/lang-xml-6.1.0.tgz#e3e786e1a89fdc9520efe75c1d6d3de1c40eb91c"
+  integrity sha512-3z0blhicHLfwi2UgkZYRPioSgVTo9PV5GP5ducFH6FaHy0IAJRg+ixj5gTR1gnT/glAIC8xv4w2VL1LoZfs+Jg==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/language" "^6.4.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/common" "^1.0.0"
+    "@lezer/xml" "^1.0.0"
+
+"@codemirror/lang-yaml@^6.0.0":
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-yaml/-/lang-yaml-6.1.1.tgz#6f6e4e16c5a4e6d549f462c9dc2053439e070d0d"
+  integrity sha512-HV2NzbK9bbVnjWxwObuZh5FuPCowx51mEfoFT9y3y+M37fA3+pbxx4I7uePuygFzDsAmCTwQSc/kXh/flab4uw==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.2.0"
+    "@lezer/yaml" "^1.0.0"
+
+"@codemirror/language-data@^6.1.0":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/language-data/-/language-data-6.5.1.tgz#5cb9413d5225ef27a577c23781bbc0b36c58bb67"
+  integrity sha512-0sWxeUSNlBr6OmkqybUTImADFUP0M3P0IiSde4nc24bz/6jIYzqYSgkOSLS+CBIoW1vU8Q9KUWXscBXeoMVC9w==
+  dependencies:
+    "@codemirror/lang-angular" "^0.1.0"
+    "@codemirror/lang-cpp" "^6.0.0"
+    "@codemirror/lang-css" "^6.0.0"
+    "@codemirror/lang-go" "^6.0.0"
+    "@codemirror/lang-html" "^6.0.0"
+    "@codemirror/lang-java" "^6.0.0"
+    "@codemirror/lang-javascript" "^6.0.0"
+    "@codemirror/lang-json" "^6.0.0"
+    "@codemirror/lang-less" "^6.0.0"
+    "@codemirror/lang-liquid" "^6.0.0"
+    "@codemirror/lang-markdown" "^6.0.0"
+    "@codemirror/lang-php" "^6.0.0"
+    "@codemirror/lang-python" "^6.0.0"
+    "@codemirror/lang-rust" "^6.0.0"
+    "@codemirror/lang-sass" "^6.0.0"
+    "@codemirror/lang-sql" "^6.0.0"
+    "@codemirror/lang-vue" "^0.1.1"
+    "@codemirror/lang-wast" "^6.0.0"
+    "@codemirror/lang-xml" "^6.0.0"
+    "@codemirror/lang-yaml" "^6.0.0"
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/legacy-modes" "^6.4.0"
+
+"@codemirror/language@^6.0.0", "@codemirror/language@^6.3.0", "@codemirror/language@^6.4.0", "@codemirror/language@^6.6.0", "@codemirror/language@^6.8.0":
+  version "6.10.3"
+  resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-6.10.3.tgz#eb25fc5ade19032e7bf1dcaa957804e5f1660585"
+  integrity sha512-kDqEU5sCP55Oabl6E7m5N+vZRoc0iWqgDVhEKifcHzPzjqCegcO4amfrYVL9PmPZpl4G0yjkpTpUO/Ui8CzO8A==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.23.0"
+    "@lezer/common" "^1.1.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+    style-mod "^4.0.0"
+
+"@codemirror/legacy-modes@^6.4.0":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/legacy-modes/-/legacy-modes-6.4.2.tgz#723a55aae21304d4c112575943d3467c9040d217"
+  integrity sha512-HsvWu08gOIIk303eZQCal4H4t65O/qp1V4ul4zVa3MHK5FJ0gz3qz3O55FIkm+aQUcshUOjBx38t2hPiJwW5/g==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+
+"@codemirror/lint@^6.0.0":
+  version "6.8.3"
+  resolved "https://registry.yarnpkg.com/@codemirror/lint/-/lint-6.8.3.tgz#5988b4afc0717da2ccec6ddd33c5cfc0de5ba4d9"
+  integrity sha512-GSGfKxCo867P7EX1k2LoCrjuQFeqVgPGRRsSl4J4c0KMkD+k1y6WYvTQkzv0iZ8JhLJDujEvlnMchv4CZQLh3Q==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.35.0"
+    crelt "^1.0.5"
+
+"@codemirror/search@^6.0.0":
+  version "6.5.8"
+  resolved "https://registry.yarnpkg.com/@codemirror/search/-/search-6.5.8.tgz#b59b3659b46184cc75d6108d7c050a4ca344c3a0"
+  integrity sha512-PoWtZvo7c1XFeZWmmyaOp2G0XVbOnm+fJzvghqGAktBW3cufwJUWvSCcNG0ppXiBEM05mZu6RhMtXPv2hpllig==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    crelt "^1.0.5"
+
+"@codemirror/state@^6.0.0", "@codemirror/state@^6.1.1", "@codemirror/state@^6.4.0":
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.4.1.tgz#da57143695c056d9a3c38705ed34136e2b68171b"
+  integrity sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==
+
+"@codemirror/theme-one-dark@^6.0.0":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz#fcef9f9cfc17a07836cb7da17c9f6d7231064df8"
+  integrity sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/highlight" "^1.0.0"
+
+"@codemirror/view@^6.0.0", "@codemirror/view@^6.17.0", "@codemirror/view@^6.23.0", "@codemirror/view@^6.27.0", "@codemirror/view@^6.35.0":
+  version "6.35.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.35.0.tgz#890e8e31a58edf65cdf193049fe9f3fdec20cc82"
+  integrity sha512-I0tYy63q5XkaWsJ8QRv5h6ves7kvtrBWjBcnf/bzohFJQc5c14a1AQRdE8QpPF9eMp5Mq2FMm59TCj1gDfE7kw==
+  dependencies:
+    "@codemirror/state" "^6.4.0"
+    style-mod "^4.1.0"
+    w3c-keyname "^2.2.4"
+
 "@csstools/css-parser-algorithms@^2.7.1":
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.7.1.tgz#6d93a8f7d8aeb7cd9ed0868f946e46f021b6aa70"
@@ -2556,6 +2895,150 @@
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz#4fc56c15c580b9adb7dc3c333a134e540b44bfb1"
   integrity sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==
 
+"@lezer/common@^1.0.0", "@lezer/common@^1.0.2", "@lezer/common@^1.1.0", "@lezer/common@^1.2.0", "@lezer/common@^1.2.1":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.2.3.tgz#138fcddab157d83da557554851017c6c1e5667fd"
+  integrity sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==
+
+"@lezer/cpp@^1.0.0":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@lezer/cpp/-/cpp-1.1.2.tgz#1db93b09e011e8a7a08c347c9d5b7749971253bf"
+  integrity sha512-macwKtyeUO0EW86r3xWQCzOV9/CF8imJLpJlPv3sDY57cPGeUZ8gXWOWNlJr52TVByMV3PayFQCA5SHEERDmVQ==
+  dependencies:
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+
+"@lezer/css@^1.1.0", "@lezer/css@^1.1.7":
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/@lezer/css/-/css-1.1.9.tgz#404563d361422c5a1fe917295f1527ee94845ed1"
+  integrity sha512-TYwgljcDv+YrV0MZFFvYFQHCfGgbPMR6nuqLabBdmZoFH3EP1gvw8t0vae326Ne3PszQkbXfVBjCnf3ZVCr0bA==
+  dependencies:
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+
+"@lezer/go@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@lezer/go/-/go-1.0.0.tgz#26cd2463f8583e630f52e714dca6d7420c5f7d7e"
+  integrity sha512-co9JfT3QqX1YkrMmourYw2Z8meGC50Ko4d54QEcQbEYpvdUvN4yb0NBZdn/9ertgvjsySxHsKzH3lbm3vqJ4Jw==
+  dependencies:
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+
+"@lezer/highlight@^1.0.0", "@lezer/highlight@^1.1.3", "@lezer/highlight@^1.2.0":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@lezer/highlight/-/highlight-1.2.1.tgz#596fa8f9aeb58a608be0a563e960c373cbf23f8b"
+  integrity sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==
+  dependencies:
+    "@lezer/common" "^1.0.0"
+
+"@lezer/html@^1.3.0":
+  version "1.3.10"
+  resolved "https://registry.yarnpkg.com/@lezer/html/-/html-1.3.10.tgz#1be9a029a6fe835c823b20a98a449a630416b2af"
+  integrity sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==
+  dependencies:
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+
+"@lezer/java@^1.0.0":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@lezer/java/-/java-1.1.3.tgz#9efd6a29b4142d07f211076a6fb5e8061c85e147"
+  integrity sha512-yHquUfujwg6Yu4Fd1GNHCvidIvJwi/1Xu2DaKl/pfWIA2c1oXkVvawH3NyXhCaFx4OdlYBVX5wvz2f7Aoa/4Xw==
+  dependencies:
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+
+"@lezer/javascript@^1.0.0":
+  version "1.4.19"
+  resolved "https://registry.yarnpkg.com/@lezer/javascript/-/javascript-1.4.19.tgz#7c8c8e5052537d8c8ddcae428e270227aadbddc9"
+  integrity sha512-j44kbR1QL26l6dMunZ1uhKBFteVGLVCBGNUD2sUaMnic+rbTviVuoK0CD1l9FTW31EueWvFFswCKMH7Z+M3JRA==
+  dependencies:
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.1.3"
+    "@lezer/lr" "^1.3.0"
+
+"@lezer/json@^1.0.0":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@lezer/json/-/json-1.0.2.tgz#bdc849e174113e2d9a569a5e6fb1a27e2f703eaf"
+  integrity sha512-xHT2P4S5eeCYECyKNPhr4cbEL9tc8w83SPwRC373o9uEdrvGKTZoJVAGxpOsZckMlEh9W23Pc72ew918RWQOBQ==
+  dependencies:
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+
+"@lezer/lr@^1.0.0", "@lezer/lr@^1.1.0", "@lezer/lr@^1.3.0", "@lezer/lr@^1.3.1", "@lezer/lr@^1.3.3", "@lezer/lr@^1.4.0":
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-1.4.2.tgz#931ea3dea8e9de84e90781001dae30dea9ff1727"
+  integrity sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==
+  dependencies:
+    "@lezer/common" "^1.0.0"
+
+"@lezer/markdown@^1.0.0":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@lezer/markdown/-/markdown-1.3.2.tgz#9d648b2a6cb47523f3d7ab494eee8c7be4f1ea9e"
+  integrity sha512-Wu7B6VnrKTbBEohqa63h5vxXjiC4pO5ZQJ/TDbhJxPQaaIoRD/6UVDhSDtVsCwVZV12vvN9KxuLL3ATMnlG0oQ==
+  dependencies:
+    "@lezer/common" "^1.0.0"
+    "@lezer/highlight" "^1.0.0"
+
+"@lezer/php@^1.0.0":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@lezer/php/-/php-1.0.2.tgz#7c291631fc1e7f7efe99977522bc48bdc732658a"
+  integrity sha512-GN7BnqtGRpFyeoKSEqxvGvhJQiI4zkgmYnDk/JIyc7H7Ifc1tkPnUn/R2R8meH3h/aBf5rzjvU8ZQoyiNDtDrA==
+  dependencies:
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.1.0"
+
+"@lezer/python@^1.1.4":
+  version "1.1.14"
+  resolved "https://registry.yarnpkg.com/@lezer/python/-/python-1.1.14.tgz#a0887086fb7645cd09ada38ed748ca1d968e6363"
+  integrity sha512-ykDOb2Ti24n76PJsSa4ZoDF0zH12BSw1LGfQXCYJhJyOGiFTfGaX0Du66Ze72R+u/P35U+O6I9m8TFXov1JzsA==
+  dependencies:
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+
+"@lezer/rust@^1.0.0":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@lezer/rust/-/rust-1.0.2.tgz#cc9a75605d67182a0e799ac40b1965a61dcc6ef0"
+  integrity sha512-Lz5sIPBdF2FUXcWeCu1//ojFAZqzTQNRga0aYv6dYXqJqPfMdCAI0NzajWUd4Xijj1IKJLtjoXRPMvTKWBcqKg==
+  dependencies:
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+
+"@lezer/sass@^1.0.0":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@lezer/sass/-/sass-1.0.7.tgz#e90066b1d386eee6160edc88a39293844e4ba106"
+  integrity sha512-8HLlOkuX/SMHOggI2DAsXUw38TuURe+3eQ5hiuk9QmYOUyC55B1dYEIMkav5A4IELVaW4e1T4P9WRiI5ka4mdw==
+  dependencies:
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+
+"@lezer/xml@^1.0.0":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@lezer/xml/-/xml-1.0.5.tgz#4bb7fd3e527f41b78372477aa753f035b41c3846"
+  integrity sha512-VFouqOzmUWfIg+tfmpcdV33ewtK+NSwd4ngSe1aG7HFb4BN0ExyY1b8msp+ndFrnlG4V4iC8yXacjFtrwERnaw==
+  dependencies:
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+
+"@lezer/yaml@^1.0.0":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@lezer/yaml/-/yaml-1.0.3.tgz#b23770ab42b390056da6b187d861b998fd60b1ff"
+  integrity sha512-GuBLekbw9jDBDhGur82nuwkxKQ+a3W5H0GfaAthDXcAu+XdpS43VlnxA9E9hllkpSP5ellRDKjLLj7Lu9Wr6xA==
+  dependencies:
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.4.0"
+
 "@mdx-js/react@^3.0.0":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-3.0.1.tgz#997a19b3a5b783d936c75ae7c47cfe62f967f746"
@@ -4624,11 +5107,82 @@
     "@typescript-eslint/types" "7.17.0"
     eslint-visitor-keys "^3.4.3"
 
+"@uiw/codemirror-extensions-basic-setup@4.23.6":
+  version "4.23.6"
+  resolved "https://registry.yarnpkg.com/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.23.6.tgz#a15afa85ad12e08fdaca40e89828bced78beeef5"
+  integrity sha512-bvtq8IOvdkLJMhoJBRGPEzU51fMpPDwEhcAHp9xCR05MtbIokQgsnLXrmD1aZm6e7s/3q47H+qdSfAAkR5MkLA==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/commands" "^6.0.0"
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/lint" "^6.0.0"
+    "@codemirror/search" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+
+"@uiw/codemirror-extensions-events@^4.12.3":
+  version "4.23.6"
+  resolved "https://registry.yarnpkg.com/@uiw/codemirror-extensions-events/-/codemirror-extensions-events-4.23.6.tgz#38239041828674041a475cbac32c8b9edd22c4b1"
+  integrity sha512-4/01T65JsDk5MORj+gotwTuujv//6LsY2DZLT8Geapd7pnoOSDnf2okPEVUOh8Pe7zcUtEUgeE+D0OlKNZ8ZUQ==
+
+"@uiw/codemirror-themes@^4.12.3":
+  version "4.23.6"
+  resolved "https://registry.yarnpkg.com/@uiw/codemirror-themes/-/codemirror-themes-4.23.6.tgz#47a101733a9c4aa382696178bc4b7bc0ecf0e5fa"
+  integrity sha512-0dpuLQW+V6zrKvfvor/eo71V3tpr2L2Hsu8QZAdtSzksjWABxTOzH3ShaBRxCEsrz6sU9sa9o7ShwBMMDz59bQ==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+
 "@uiw/copy-to-clipboard@~1.0.12":
   version "1.0.17"
   resolved "https://registry.yarnpkg.com/@uiw/copy-to-clipboard/-/copy-to-clipboard-1.0.17.tgz#86f501ddc8a6db0b45e6899bcd9d48e0b78f233e"
   integrity sha512-O2GUHV90Iw2VrSLVLK0OmNIMdZ5fgEg4NhvtwINsX+eZ/Wf6DWD0TdsK9xwV7dNRnK/UI2mQtl0a2/kRgm1m1A==
 
+"@uiw/react-codemirror@^4.12.3":
+  version "4.23.6"
+  resolved "https://registry.yarnpkg.com/@uiw/react-codemirror/-/react-codemirror-4.23.6.tgz#e77f302a39a28c644164ed59bdc1a9edeb587cdf"
+  integrity sha512-caYKGV6TfGLRV1HHD3p0G3FiVzKL1go7wes5XT2nWjB0+dTdyzyb81MKRSacptgZcotujfNO6QXn65uhETRAMw==
+  dependencies:
+    "@babel/runtime" "^7.18.6"
+    "@codemirror/commands" "^6.1.0"
+    "@codemirror/state" "^6.1.1"
+    "@codemirror/theme-one-dark" "^6.0.0"
+    "@uiw/codemirror-extensions-basic-setup" "4.23.6"
+    codemirror "^6.0.0"
+
+"@uiw/react-markdown-editor@^6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@uiw/react-markdown-editor/-/react-markdown-editor-6.1.2.tgz#ce4131c70a3b9f18052d593e60e2643eafe99258"
+  integrity sha512-nC1EnPBzJdVdmi+8+R/8Tr4hoj5ewjpguVjOxz448c4TF9bieqCQEb9Ivar5tGkduEOV0xFkcKupp4nhkGHI6A==
+  dependencies:
+    "@babel/runtime" "^7.22.6"
+    "@codemirror/lang-markdown" "^6.0.0"
+    "@codemirror/language-data" "^6.1.0"
+    "@uiw/codemirror-extensions-events" "^4.12.3"
+    "@uiw/codemirror-themes" "^4.12.3"
+    "@uiw/react-codemirror" "^4.12.3"
+    "@uiw/react-markdown-preview" "^5.0.0"
+
+"@uiw/react-markdown-preview@^5.0.0":
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/@uiw/react-markdown-preview/-/react-markdown-preview-5.1.3.tgz#edbffb9e3dde910e6bc862e8d17019c838b265f0"
+  integrity sha512-jV02wO4XHWFk54kz7sLqOkdPgJLttSfKLyen47XgjcyGgQXU2I4WJBygmdpV2AT9m/MiQ8qrN1Y+E5Syv9ZDpw==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@uiw/copy-to-clipboard" "~1.0.12"
+    react-markdown "~9.0.1"
+    rehype-attr "~3.0.1"
+    rehype-autolink-headings "~7.1.0"
+    rehype-ignore "^2.0.0"
+    rehype-prism-plus "2.0.0"
+    rehype-raw "^7.0.0"
+    rehype-rewrite "~4.0.0"
+    rehype-slug "~6.0.0"
+    remark-gfm "~4.0.0"
+    remark-github-blockquote-alert "^1.0.0"
+    unist-util-visit "^5.0.0"
+
 "@uiw/react-markdown-preview@^5.1.2":
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/@uiw/react-markdown-preview/-/react-markdown-preview-5.1.2.tgz#9de14c85536dbf3858a895195ea13031d37da2d9"
@@ -6038,6 +6592,19 @@ co@^4.6.0:
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
   integrity sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==
 
+codemirror@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-6.0.1.tgz#62b91142d45904547ee3e0e0e4c1a79158035a29"
+  integrity sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/commands" "^6.0.0"
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/lint" "^6.0.0"
+    "@codemirror/search" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+
 collect-v8-coverage@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz#c0b29bcd33bcd0779a1344c2136051e6afd3d9e9"
@@ -6349,6 +6916,11 @@ create-jest@^29.7.0:
     jest-util "^29.7.0"
     prompts "^2.0.1"
 
+crelt@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.6.tgz#7cc898ea74e190fb6ef9dae57f8f81cf7302df72"
+  integrity sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==
+
 cross-env@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
@@ -14363,6 +14935,11 @@ style-loader@^4.0.0:
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-4.0.0.tgz#0ea96e468f43c69600011e0589cb05c44f3b17a5"
   integrity sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==
 
+style-mod@^4.0.0, style-mod@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-4.1.2.tgz#ca238a1ad4786520f7515a8539d5a63691d7bf67"
+  integrity sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==
+
 style-to-object@^1.0.0:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-1.0.6.tgz#0c28aed8be1813d166c60d962719b2907c26547b"
@@ -15432,6 +16009,11 @@ vinyl@^2.0.1:
     remove-trailing-separator "^1.0.1"
     replace-ext "^1.0.0"
 
+w3c-keyname@^2.2.4:
+  version "2.2.8"
+  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz#7b17c8c6883d4e8b86ac8aba79d39e880f8869c5"
+  integrity sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==
+
 w3c-xmlserializer@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz#aebdc84920d806222936e3cdce408e32488a3073"

From d89569dc44143a245fda1a6c10221220fb839c78 Mon Sep 17 00:00:00 2001
From: Hyelim Choi <HyelimChoi01@gmail.com>
Date: Sun, 24 Nov 2024 14:41:41 +0900
Subject: [PATCH 05/11] =?UTF-8?q?design:=20=EC=8A=A4=EB=AA=B0=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=ED=8C=A8=EB=94=A9=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/_common/Button/Button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/_common/Button/Button.tsx b/frontend/src/components/_common/Button/Button.tsx
index 23ceb722..589d6d39 100644
--- a/frontend/src/components/_common/Button/Button.tsx
+++ b/frontend/src/components/_common/Button/Button.tsx
@@ -124,7 +124,7 @@ const sizeStyles = {
     min-width: 7rem;
   `,
   small: css`
-    padding: 1rem 1.6rem;
+    padding: 0.8rem 1.2rem;
     ${title3}
   `,
   medium: css`

From 8776465b43ab75e107307c45d94d8db2db0ebb8a Mon Sep 17 00:00:00 2001
From: Hyelim Choi <HyelimChoi01@gmail.com>
Date: Sun, 24 Nov 2024 15:12:36 +0900
Subject: [PATCH 06/11] =?UTF-8?q?feat:=20=EC=95=84=ED=8B=B0=ED=81=B4=20?=
 =?UTF-8?q?=EC=97=90=EB=94=94=ED=84=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_common/layout/DesktopLayout.tsx          |  21 +++
 frontend/src/constants/routePath.ts           |   1 +
 frontend/src/pages/ArticleEditorPage.tsx      | 125 ++++++++++++++++++
 3 files changed, 147 insertions(+)
 create mode 100644 frontend/src/components/_common/layout/DesktopLayout.tsx
 create mode 100644 frontend/src/pages/ArticleEditorPage.tsx

diff --git a/frontend/src/components/_common/layout/DesktopLayout.tsx b/frontend/src/components/_common/layout/DesktopLayout.tsx
new file mode 100644
index 00000000..89244d2e
--- /dev/null
+++ b/frontend/src/components/_common/layout/DesktopLayout.tsx
@@ -0,0 +1,21 @@
+import styled from '@emotion/styled';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const DesktopLayout = ({ children }: Props) => {
+  return <S.BodyWrapper>{children}</S.BodyWrapper>;
+};
+
+export default DesktopLayout;
+
+const S = {
+  BodyWrapper: styled.div`
+    max-width: 120rem;
+    min-height: 100dvh;
+
+    margin: 0 auto;
+    box-sizing: border-box;
+  `,
+};
diff --git a/frontend/src/constants/routePath.ts b/frontend/src/constants/routePath.ts
index d4207f43..ed0ae96e 100644
--- a/frontend/src/constants/routePath.ts
+++ b/frontend/src/constants/routePath.ts
@@ -22,4 +22,5 @@ export const ROUTE_PATH = {
   location: '/location',
   myPage: '/my-page',
   admin: '/admin',
+  articleEditor: '/isHaileyGod',
 };
diff --git a/frontend/src/pages/ArticleEditorPage.tsx b/frontend/src/pages/ArticleEditorPage.tsx
new file mode 100644
index 00000000..b91b34b8
--- /dev/null
+++ b/frontend/src/pages/ArticleEditorPage.tsx
@@ -0,0 +1,125 @@
+import styled from '@emotion/styled';
+import MarkdownEditor from '@uiw/react-markdown-editor';
+import { useState } from 'react';
+
+import Button from '@/components/_common/Button/Button';
+import FormField from '@/components/_common/FormField/FormField'; // 예시로 주신 FormField 컴포넌트 사용
+import DesktopLayout from '@/components/_common/layout/DesktopLayout';
+import usePostArticleQuery from '@/hooks/query/usePostArticleQuery';
+import { flexColumn, flexRow, flexSpaceBetween, title2 } from '@/styles/common';
+
+const ArticleEditorPage = () => {
+  const [title, setTitle] = useState('');
+  const [keyword, setKeyword] = useState('');
+  const [summary, setSummary] = useState('');
+  const [content, setContent] = useState('# 여기에 아티클을 작성해주세요');
+
+  const { mutate: addArticle } = usePostArticleQuery();
+
+  const handleSubmit = () => {
+    addArticle({
+      title,
+      content,
+      keyword,
+      summary,
+    });
+  };
+
+  return (
+    <>
+      <S.Header>
+        <S.HeaderContents>
+          <S.Title>방끗 Article Editor</S.Title>
+
+          {/* 저장 버튼 */}
+          <Button type="submit" label="저장" isSquare color="dark" onClick={handleSubmit} size="small" />
+        </S.HeaderContents>
+      </S.Header>
+      <DesktopLayout>
+        <S.Form
+          onSubmit={e => {
+            e.preventDefault();
+            handleSubmit();
+          }}
+        >
+          {/* 제목 폼 필드 */}
+          <FormField>
+            <FormField.Label label="아티클 제목" htmlFor="title" required />
+            <FormField.Input
+              placeholder="제목을 입력하세요"
+              onChange={e => setTitle(e.target.value)}
+              name="title"
+              id="title"
+              value={title}
+            />
+          </FormField>
+
+          {/* 키워드 폼 필드 */}
+          <FormField>
+            <FormField.Label label="키워드" htmlFor="keyword" required />
+            <FormField.Input
+              placeholder="키워드를 입력하세요"
+              onChange={e => setKeyword(e.target.value)}
+              name="keyword"
+              id="keyword"
+              value={keyword}
+            />
+          </FormField>
+
+          {/* 요약 폼 필드 */}
+          <FormField>
+            <FormField.Label label="요약" htmlFor="summary" required />
+            <FormField.Input
+              placeholder="요약을 입력하세요"
+              onChange={e => setSummary(e.target.value)}
+              name="summary"
+              id="summary"
+              value={summary}
+            />
+          </FormField>
+
+          {/* MarkdownEditor로 content 작성 */}
+          <div style={{ marginBottom: '20px' }}>
+            <MarkdownEditor
+              value={content}
+              height="70vh"
+              onChange={value => setContent(value)}
+              visible={true}
+              enablePreview={true}
+            />
+          </div>
+        </S.Form>
+      </DesktopLayout>
+    </>
+  );
+};
+
+export default ArticleEditorPage;
+
+const S = {
+  Header: styled.header`
+    ${flexRow}
+    justify-content: center;
+
+    width: 100vw;
+    height: 50px;
+    border-bottom: 1px solid ${({ theme }) => theme.palette.grey200};
+
+    box-sizing: border-box;
+
+    margin-bottom: 20px;
+  `,
+  HeaderContents: styled.div`
+    width: 120rem;
+    ${flexRow}
+    ${flexSpaceBetween}
+    align-items: center;
+  `,
+  Title: styled.h1`
+    ${title2}
+  `,
+  Form: styled.form`
+    ${flexColumn}
+    gap: 20px;
+  `,
+};

From 756b19a9850ce8343701dfc73487b33b50a94745 Mon Sep 17 00:00:00 2001
From: Hyelim Choi <HyelimChoi01@gmail.com>
Date: Sun, 24 Nov 2024 15:13:13 +0900
Subject: [PATCH 07/11] =?UTF-8?q?feat:=20=EC=95=84=ED=8B=B0=ED=81=B4=20pos?=
 =?UTF-8?q?t=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/apis/article.ts                    | 7 ++++++-
 frontend/src/hooks/query/usePostArticleQuery.ts | 9 +++++++++
 frontend/src/types/article.ts                   | 7 +++++++
 3 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/hooks/query/usePostArticleQuery.ts

diff --git a/frontend/src/apis/article.ts b/frontend/src/apis/article.ts
index 56fdd519..ab933d73 100644
--- a/frontend/src/apis/article.ts
+++ b/frontend/src/apis/article.ts
@@ -1,6 +1,6 @@
 import fetcher from '@/apis/fetcher';
 import { BASE_URL, ENDPOINT } from '@/apis/url';
-import { Article } from '@/types/article';
+import { Article, ArticlePostForm } from '@/types/article';
 
 export const getArticleList = async () => {
   const response = await fetcher.get({ url: BASE_URL + ENDPOINT.ARTICLES });
@@ -13,3 +13,8 @@ export const getArticle = async (id: number) => {
   const data = await response.json();
   return data as Article;
 };
+
+export const postArticle = async (article: ArticlePostForm) => {
+  const response = await fetcher.post({ url: BASE_URL + ENDPOINT.ARTICLES, body: article });
+  return response;
+};
diff --git a/frontend/src/hooks/query/usePostArticleQuery.ts b/frontend/src/hooks/query/usePostArticleQuery.ts
new file mode 100644
index 00000000..d1768272
--- /dev/null
+++ b/frontend/src/hooks/query/usePostArticleQuery.ts
@@ -0,0 +1,9 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { postArticle } from '@/apis/article';
+
+const usePostArticleQuery = () => {
+  return useMutation({ mutationFn: postArticle });
+};
+
+export default usePostArticleQuery;
diff --git a/frontend/src/types/article.ts b/frontend/src/types/article.ts
index b041d2bd..6ef5f0dd 100644
--- a/frontend/src/types/article.ts
+++ b/frontend/src/types/article.ts
@@ -7,3 +7,10 @@ export interface Article {
   thumbnail?: string | null;
   createdAt: string;
 }
+
+export interface ArticlePostForm {
+  keyword: string;
+  title: string;
+  summary: string;
+  content: string;
+}

From 159a8b2285299d899c10a0f03fe2b8ceeb5b8eca Mon Sep 17 00:00:00 2001
From: Hyelim Choi <HyelimChoi01@gmail.com>
Date: Sun, 24 Nov 2024 15:13:40 +0900
Subject: [PATCH 08/11] =?UTF-8?q?feat:=20=ED=94=84=EB=A6=AC=EB=B7=B0?=
 =?UTF-8?q?=EB=A1=9C=20=ED=83=9C=EA=B7=B8=20=EC=9D=B8=EC=8B=9D=20=EA=B0=80?=
 =?UTF-8?q?=EB=8A=A5=ED=95=98=EA=B2=8C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ArticleDetail/ArticleContent.tsx    | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ArticleDetail/ArticleContent.tsx b/frontend/src/components/ArticleDetail/ArticleContent.tsx
index 33865071..7dd347b9 100644
--- a/frontend/src/components/ArticleDetail/ArticleContent.tsx
+++ b/frontend/src/components/ArticleDetail/ArticleContent.tsx
@@ -31,9 +31,17 @@ const ArticleContent = () => {
         <S.Title>{article?.title}</S.Title>
         <MarkdownPreview
           source={article?.content}
-          style={{ fontSize: '1.6rem', lineHeight: '2.6rem', fontFamily: 'SUITE Variable' }}
-          wrapperElement={{
-            'data-color-mode': 'light',
+          style={{ padding: 10 }}
+          rehypeRewrite={(node, index, parent) => {
+            if (
+              node.type === 'element' &&
+              node.tagName === 'a' &&
+              parent &&
+              parent.type === 'element' &&
+              /^h(1|2|3|4|5|6)/.test(parent.tagName)
+            ) {
+              parent.children = parent.children.slice(1);
+            }
           }}
         />
       </S.Wrapper>

From 040f1adab5613f4fb6eb60b86ce644d62695439a Mon Sep 17 00:00:00 2001
From: Hyelim Choi <HyelimChoi01@gmail.com>
Date: Sun, 24 Nov 2024 15:14:05 +0900
Subject: [PATCH 09/11] =?UTF-8?q?test:=20=EC=95=84=ED=8B=B0=ED=81=B4=20pos?=
 =?UTF-8?q?t=20=EB=AA=A9=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/mocks/handlers/article.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/frontend/src/mocks/handlers/article.ts b/frontend/src/mocks/handlers/article.ts
index ec968c98..ae41d3db 100644
--- a/frontend/src/mocks/handlers/article.ts
+++ b/frontend/src/mocks/handlers/article.ts
@@ -1,6 +1,7 @@
 import { http, HttpResponse } from 'msw';
 
 import { BASE_URL, ENDPOINT } from '@/apis/url';
+import { article2 } from '@/mocks/fixtures/a';
 import { article } from '@/mocks/fixtures/article';
 import { articleList } from '@/mocks/fixtures/articleList';
 
@@ -14,6 +15,14 @@ export const ArticleHandlers = [
   }),
 
   http.get(BASE_URL + ENDPOINT.ARTICLE_ID(2), () => {
+    return HttpResponse.json(article2, { status: 200 });
+  }),
+
+  http.get(BASE_URL + ENDPOINT.ARTICLE_ID(3), () => {
     return HttpResponse.json(article, { status: 404 });
   }),
+
+  http.post(BASE_URL + ENDPOINT.ARTICLES, () => {
+    return HttpResponse.json({}, { status: 200 });
+  }),
 ];

From b3d184ae38090c09643343cba5d36670391848be Mon Sep 17 00:00:00 2001
From: Hyelim Choi <HyelimChoi01@gmail.com>
Date: Mon, 25 Nov 2024 14:03:14 +0900
Subject: [PATCH 10/11] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20=EB=AA=A8=ED=82=B9=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/mocks/handlers/article.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/frontend/src/mocks/handlers/article.ts b/frontend/src/mocks/handlers/article.ts
index ae41d3db..0de1ce9a 100644
--- a/frontend/src/mocks/handlers/article.ts
+++ b/frontend/src/mocks/handlers/article.ts
@@ -1,7 +1,6 @@
 import { http, HttpResponse } from 'msw';
 
 import { BASE_URL, ENDPOINT } from '@/apis/url';
-import { article2 } from '@/mocks/fixtures/a';
 import { article } from '@/mocks/fixtures/article';
 import { articleList } from '@/mocks/fixtures/articleList';
 
@@ -14,10 +13,6 @@ export const ArticleHandlers = [
     return HttpResponse.json(article, { status: 200 });
   }),
 
-  http.get(BASE_URL + ENDPOINT.ARTICLE_ID(2), () => {
-    return HttpResponse.json(article2, { status: 200 });
-  }),
-
   http.get(BASE_URL + ENDPOINT.ARTICLE_ID(3), () => {
     return HttpResponse.json(article, { status: 404 });
   }),

From 2f2992dc7b77741b3a475d1f96da54555aa94b77 Mon Sep 17 00:00:00 2001
From: Hyelim Choi <HyelimChoi01@gmail.com>
Date: Mon, 25 Nov 2024 16:55:55 +0900
Subject: [PATCH 11/11] =?UTF-8?q?feat:=20=EC=95=84=ED=8B=B0=ED=81=B4=20?=
 =?UTF-8?q?=ED=8F=AC=EC=8A=A4=ED=8A=B8=20=EB=A1=9C=EC=A7=81=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/query/usePostArticleQuery.ts | 14 +++++++++++++-
 frontend/src/pages/ArticleEditorPage.tsx        |  2 ++
 frontend/src/types/article.ts                   |  1 +
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/frontend/src/hooks/query/usePostArticleQuery.ts b/frontend/src/hooks/query/usePostArticleQuery.ts
index d1768272..a50c3b6e 100644
--- a/frontend/src/hooks/query/usePostArticleQuery.ts
+++ b/frontend/src/hooks/query/usePostArticleQuery.ts
@@ -1,9 +1,21 @@
 import { useMutation } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
 
 import { postArticle } from '@/apis/article';
+import { ROUTE_PATH } from '@/constants/routePath';
+import useToast from '@/hooks/useToast';
 
 const usePostArticleQuery = () => {
-  return useMutation({ mutationFn: postArticle });
+  const { showToast } = useToast();
+  const navigate = useNavigate();
+
+  return useMutation({
+    mutationFn: postArticle,
+    onSuccess: () => {
+      showToast({ message: '아티클 등록 완료!' });
+      navigate(ROUTE_PATH.admin);
+    },
+  });
 };
 
 export default usePostArticleQuery;
diff --git a/frontend/src/pages/ArticleEditorPage.tsx b/frontend/src/pages/ArticleEditorPage.tsx
index b91b34b8..6b72ff69 100644
--- a/frontend/src/pages/ArticleEditorPage.tsx
+++ b/frontend/src/pages/ArticleEditorPage.tsx
@@ -12,6 +12,7 @@ const ArticleEditorPage = () => {
   const [title, setTitle] = useState('');
   const [keyword, setKeyword] = useState('');
   const [summary, setSummary] = useState('');
+  const [thumbnail] = useState('');
   const [content, setContent] = useState('# 여기에 아티클을 작성해주세요');
 
   const { mutate: addArticle } = usePostArticleQuery();
@@ -21,6 +22,7 @@ const ArticleEditorPage = () => {
       title,
       content,
       keyword,
+      thumbnail,
       summary,
     });
   };
diff --git a/frontend/src/types/article.ts b/frontend/src/types/article.ts
index 6ef5f0dd..74f3034c 100644
--- a/frontend/src/types/article.ts
+++ b/frontend/src/types/article.ts
@@ -13,4 +13,5 @@ export interface ArticlePostForm {
   title: string;
   summary: string;
   content: string;
+  thumbnail?: string;
 }