[Feat] #10 - crateMain(wip)

src/Router.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import Main from './pages/Main';
+import MainView from './pages/viewpage/MainView';
 
 const Router = () => {
     return (
         <BrowserRouter>
             <Routes>
-                <Route path="/" element={<Main />} />
+                {/* <Route path="/" element={<Main />} /> */}
+                <Route path="/test" element={<MainView />} />
             </Routes>
         </BrowserRouter>
     );

src/pages/viewpage/MainView.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import '../../styles/viewpage/LoginView.scss';
+import Header from '../../components/Header';
+import LeftBar from '../../components/LeftBar';
+import Post from '../../components/Post';
+
+function MainView() {
+    return (
+        <article>
+            <div className="view">
+                <div className="head">
+                    <Header />
+                </div>
+                <div className="Frame47">
+                    <LeftBar />
+                    <div className="Frame45">
+                        <Post />
+                    </div>
+                </div>
+            </div>
+        </article>
+    );
+}
+
+export default MainView;

src/styles/viewpage/MainView.scss

@@ -0,0 +1,40 @@
+@import '../variables/color.scss';
+@import '../variables/textStyle.scss';
+
+.view {
+    display: flex;
+    width: 1440px;
+    height: 1024px;
+    padding: 0px 40px;
+    flex-direction: column;
+    align-items: center;
+    gap: 60px;
+    background: var(--SubColor, #f2f0ff);
+}
+
+.head {
+    display: flex;
+    width: 1440px;
+    min-width: 800px;
+    max-width: 1980px;
+    padding: 20px 40px;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--MainColor, #804bf1);
+    background: var(--White, #fff);
+}
+
+.Frame47 {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 80px;
+    align-self: stretch;
+}
+
+.Frame45 {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 40px;
+}