add split panel

Author: yeonjuan

package-lock.json

@@ -47,6 +47,8 @@
     "react": "^16.13.1",
     "react-bootstrap": "^1.3.0",
     "react-dom": "^16.13.1",
+    "react-json-view": "^1.21.3",
+    "recoil": "^0.3.1",
     "typescript": "4.1.2"
   },
   "devDependencies": {

package.json

@@ -17,6 +17,7 @@ import {
   BOOLEAN_ECMA_FEATURES,
 } from "@/constants";
 import { queryParamsState } from "@/shared/query-params-state";
+import {RecoilRoot} from 'recoil';
 import type { FC } from "react";
 import type { Linter } from "eslint";
 import type { ParserOptions, EcmaVersion } from "@typescript-eslint/types";
@@ -87,7 +88,7 @@ export const App: FC = () => {
     queryParamsState.set({ code, rules, parserOptions });
   }, [code, rules, parserOptions]);
   return (
-    <>
+    <RecoilRoot>
       <Header />
       <Container>
         <Row>
@@ -185,6 +186,6 @@ export const App: FC = () => {
           </Col>
         </Row>
       </Container>
-    </>
+    </RecoilRoot>
   );
 };

src/App.tsx

@@ -0,0 +1,28 @@
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  max-height: 100vh;
+  font-size: 13px;
+}
+
+.top {
+  width: 100%;
+}
+
+.bottom {
+  width: 100%;
+}
+
+
+.tab-content {
+  height: calc(100% - 47px);
+}
+
+.tab-pane {
+  height: 100%;
+}
+
+.rule-editor {
+  height: 100%;
+}