[add: Layout] adjust design Prototype

hyejun0608 · Aug 14, 2020 · d1f22f7 · d1f22f7
1 parent 70f6901
commit d1f22f7
Show file tree

Hide file tree

Showing 23 changed files with 220 additions and 55 deletions.
diff --git a/public/index.html b/public/index.html
@@ -20,7 +20,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>웨비나</title>
+    <title>온라인 톡톡톡</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -6,7 +6,7 @@ import { createBrowserHistory } from 'history'
 import { stores } from 'stores'
 
 import Header from 'components/Header/Header'
-import HomePage from './pages/HomePage'
+import MainPage from 'pages/MainPage'
 import TestPage from './pages/TestPage'
 import LoginPage from './pages/LoginPage'
 
@@ -18,7 +18,7 @@ const App = observer(() => {
     storeLoaded: false,
     setStoreLoaded: (load) => (store.storeLoaded = load),
   }))
-  
+
   React.useEffect(() => {
     const load = async () => {
       await hydrate('userStore', stores.userStore).then(() => {
@@ -27,14 +27,14 @@ const App = observer(() => {
     }
     load()
   }, [])
-  
+
   return (
     <Provider {...stores}>
       <Router history={browserHistory}>
         <Header />
         {store.storeLoaded ? (
           <Switch>
-            <Route exact path={'/'} component={HomePage} />
+            <Route exact path={'/'} component={MainPage} />
             <Route path={'/test'} component={TestPage} />
             <Route path={'/login'} component={LoginPage} />
           </Switch>

diff --git a/src/App.test.js b/src/App.test.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
+import React from 'react'
+import { render } from '@testing-library/react'
+import App from './App'
 
 test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
+  const { getByText } = render(<App />)
+  const linkElement = getByText(/learn react/i)
+  expect(linkElement).toBeInTheDocument()
+})
diff --git a/src/components/Info/Info.js b/src/components/Info/Info.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import './info.scss'
+
+const Info = () => {
+  return (
+    <div className={'info'}>
+      <h1>웨비나 정보</h1>
+      <div className={'contents'}>
+        (웨비나 내용)
+        여름장이란 애시당초에 글러서,
+        해는 아직 중천에 있건만 장판은 벌써 쓸쓸하고 더운 햇발이 벌여놓은 전 휘장 밑으로 등줄기를 훅훅 볶는다.
+        마을 사람들은 거지 반 돌아간 뒤요, 팔리지 못한 나무꾼 패가 길거리에 궁싯거리고들 있으나 석유병이나 받고 고깃마리나 사면 족할 이 축들을 바라고 언제까지든지 버티고 있을 법은 없다.
+        춥춥스럽게 날아드는 파리 떼도 장난꾼 각다귀들도 귀치않다. 얽둑배기요 왼손잡이인 드팀전의 허 생원은 기어코 동업의 조 선달에게 나꾸어 보았다.
+        “그만 거둘까?”
+        .......
+      </div>
+    </div>
+  )
+}
+
+export default Info
diff --git a/src/components/Info/index.js b/src/components/Info/index.js
@@ -0,0 +1 @@
+export { default } from './Info'
diff --git a/src/components/Info/info.scss b/src/components/Info/info.scss
@@ -0,0 +1,10 @@
+.info {
+  text-align: left;
+  color: #000000;
+  h1 {}
+  .contents {
+    font-size: 16px;
+    overflow-y: scroll;
+    text-overflow: clip;
+  }
+}
diff --git a/src/components/Layouts/InfoLayout/InfoLayout.js b/src/components/Layouts/InfoLayout/InfoLayout.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { observer, useLocalStore } from 'mobx-react'
+import './infoLayout.scss'
+
+const InfoLayout = observer((props) => {
+  const { menus } = props
+  const store = useLocalStore(() => ({
+    menuIndex: 0,
+    changeMenu: (index) => {
+      store.menuIndex = index
+    },
+  }))
+  const { menuIndex, changeMenu } = store
+  const MenuContents = menus[menuIndex].contents
+
+  return (
+    <div className={'info_layout'}>
+      <div className={'contents_container'}>
+        <MenuContents />
+      </div>
+      <div className={'menu_container'}>
+        {menus.map((menu, i) => (
+          <div className={menuIndex === i ? 'menu active' : 'menu'} onClick={() => changeMenu(i)}>
+            {menu.title}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+})
+
+export default InfoLayout
diff --git a/src/components/Layouts/InfoLayout/index.js b/src/components/Layouts/InfoLayout/index.js
@@ -0,0 +1 @@
+export { default } from './InfoLayout'
diff --git a/src/components/Layouts/InfoLayout/infoLayout.scss b/src/components/Layouts/InfoLayout/infoLayout.scss
@@ -0,0 +1,25 @@
+.info_layout {
+  display: flex;
+  flex-flow: row nowrap;
+  border: 1px solid #c7c6c6;
+  margin: 10px 0 0;
+  height: 300px;
+  .contents_container {
+    width: 100%;
+    padding: 22px 32px;
+  }
+  .menu_container {
+    display: flex;
+    flex-flow: column nowrap;
+    .menu {
+      height: 100%;
+      line-height: 100%;
+      width: 70px;
+      background: #818181;
+      align-items: center;
+      &.active {
+        background: #fff;
+      }
+    }
+  }
+}
diff --git a/src/components/Layouts/index.js b/src/components/Layouts/index.js
@@ -0,0 +1,3 @@
+import InfoLayout from './InfoLayout'
+
+export {InfoLayout}
diff --git a/src/components/TimeTable/TimeTable.js b/src/components/TimeTable/TimeTable.js
@@ -0,0 +1,12 @@
+import React from 'react'
+
+const TimeTable = () => {
+  return (
+    <div className={'timetable'}>
+      <h1>타임테이블</h1>
+      <div className={'contents'}>Time Table</div>
+    </div>
+  )
+}
+
+export default TimeTable
diff --git a/src/components/TimeTable/index.js b/src/components/TimeTable/index.js
@@ -0,0 +1 @@
+export { default } from './TimeTable'
diff --git a/src/components/TimeTable/timetable.scss b/src/components/TimeTable/timetable.scss
@@ -0,0 +1,10 @@
+.timetable {
+  text-align: left;
+  color: #000000;
+  h1 {}
+  .contents {
+    font-size: 16px;
+    overflow-y: scroll;
+    text-overflow: clip;
+  }
+}
diff --git a/src/components/Video/Video.js b/src/components/Video/Video.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import './video.scss'
+
+const Video = () => {
+  return (
+    <div className={'video_section'}>
+      <h1>Title</h1>
+      <div className={'video'}>Video Section</div>
+    </div>
+  )
+}
+
+export default Video
diff --git a/src/components/Video/index.js b/src/components/Video/index.js
@@ -0,0 +1 @@
+export { default } from './Video'
diff --git a/src/components/Video/video.scss b/src/components/Video/video.scss
@@ -0,0 +1,13 @@
+.video_section {
+  width: 100%;
+  h1 {
+    text-align: left;
+  }
+  .video {
+    background: #282c34;
+    height: 480px;
+    line-height: 480px;
+    color: #fff;
+    font-size: 30px;
+  }
+}
diff --git a/src/index.css b/src/index.css
@@ -1,4 +1,6 @@
-body {
+html, body {
+  width: 100%;
+  height: 100%;
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
@@ -11,3 +13,8 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+#root {
+  height: 100%;
+  width: 100%;
+}
diff --git a/src/index.js b/src/index.js
@@ -1,18 +1,18 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+import * as serviceWorker from './serviceWorker'
 import 'mobx-react-lite/batchingForReactDom'
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById('root')
-);
+)
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.unregister()
diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
diff --git a/src/pages/MainPage.js b/src/pages/MainPage.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import { Link, useHistory } from 'react-router-dom'
+import { observer } from 'mobx-react'
+import backgroundImg from 'assets/images/[email protected]'
+import VideoSection from 'components/Video'
+import { InfoLayout } from 'components/Layouts'
+import Info from 'components/Info'
+import TimeTable from 'components/TimeTable'
+import './mainPage.scss'
+
+const MainPage = observer(() => {
+  const history = useHistory()
+  const InfoMenus = [
+    { title: '정보', contents: Info },
+    { title: '타임테이블', contents: TimeTable },
+  ]
+  return (
+    <div className={'mainpage'}>
+      <div className={'main_container'}>
+        <VideoSection />
+        <InfoLayout menus={InfoMenus} />
+      </div>
+      <div className={'side_container'}>Side Menu</div>
+      {/*<img src={backgroundImg} className={'background'} alt={'background'} />*/}
+    </div>
+  )
+})
+
+export default MainPage
diff --git a/src/pages/homePage.scss b/src/pages/homePage.scss
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -1,4 +1,4 @@
-import HomePage from './HomePage'
+import MainPage from 'pages/MainPage'
 import TestPage from './TestPage'
 
-export { HomePage, TestPage }
+export { MainPage, TestPage }
diff --git a/src/pages/mainPage.scss b/src/pages/mainPage.scss
@@ -0,0 +1,19 @@
+.mainpage {
+  display: flex;
+  flex-flow: row nowrap;
+  margin: 0 0;
+  padding: 80px 212px 140px;
+  text-align: center;
+
+  .background {
+    width: 100%;
+  }
+  .main_container {
+    width: 980px;
+  }
+  .side_container {
+    width: 480px;
+    margin-left: 32px;
+    border: 1px solid #818181;
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import InfoLayout from './InfoLayout'

		export {InfoLayout}