Skip to content

Commit

Permalink
Merge pull request #50 from thdwlsgus0/feature/layout
Browse files Browse the repository at this point in the history
feature/#8/title, 수식, 템플릿 전체 레이아웃 html 작성(기호와 resizing은 아직 넣지 않았습니다.)
  • Loading branch information
LeeSuKyeong authored Nov 27, 2020
2 parents de42f12 + 7823949 commit ea1c7ad
Showing 15 changed files with 147 additions and 7 deletions.
15 changes: 11 additions & 4 deletions src/App.tsx → src/MainPage.tsx
Original file line number Diff line number Diff line change
@@ -4,9 +4,12 @@ import Tab from '@src/components/tab';
import Mathquill from '@src/components/mathquill';
import ToolBar from '@src/components/toolbar';
import Header from '@src/components/header';
import * as StyleComponent from '@src/style';
import InputSectionContainer from '@src/components/leftsection/inputSelectionSection';
import MathSectionContainer from '@src/components/leftsection/mathSection';
import TemplateContainer from '@src/components/leftsection/templateSection';
import * as StyleComponent from './style';

const App = () => {
const MainPage = () => {
return (
<>
<GlobalStyle />
@@ -15,7 +18,11 @@ const App = () => {
<Header />
</StyleComponent.Header>
<StyleComponent.Content>
<StyleComponent.Aside />
<StyleComponent.Aside>
<InputSectionContainer />
<MathSectionContainer />
<TemplateContainer />
</StyleComponent.Aside>
<StyleComponent.Main>
<StyleComponent.ToolBar>
<ToolBar />
@@ -39,4 +46,4 @@ const App = () => {
);
};

export default App;
export default MainPage;
14 changes: 14 additions & 0 deletions src/components/common/title/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from 'react';
import * as StyledComponent from './style';

export interface NameProps {
title?: string;
}

const Title = ({ title }: NameProps) => {
return (
<StyledComponent.TitleContainer>{title}</StyledComponent.TitleContainer>
);
};

export default Title;
9 changes: 9 additions & 0 deletions src/components/common/title/style.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import styled from 'styled-components';
import colors from '@src/utils/colors';

export const TitleContainer = styled.div`
font-size: 20px;
font-weight: bold;
padding: 10px 10px;
border-bottom: 1px solid ${colors.borderGrey};
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from 'react';
import * as StyledComponent from 'styled-components';

const InputBottomSelectionSection = () => {
return (
<>
<div />
</>
);
};

export default InputBottomSelectionSection;
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from 'react';
import * as StyledComponent from './style';

const InputTopSelectionSection = () => {
return (
<>
<StyledComponent.InputTopSelectionSectionContainer />
</>
);
};

export default InputTopSelectionSection;
19 changes: 19 additions & 0 deletions src/components/leftsection/inputSelectionSection/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react';
import Title from '@src/components/common/title';
import MULTIPLY from '@src/utils/svg/leftsection/inputselection/multiply.svg';
import * as StyledComponent from './style';

const InputSelectionSectionContainer = () => {
return (
<>
<StyledComponent.InputSectionContainer>
<Title title="입력 선택" />
<StyledComponent.InputTopSelectionSectionContainer>
<MULTIPLY />
</StyledComponent.InputTopSelectionSectionContainer>
</StyledComponent.InputSectionContainer>
</>
);
};

export default InputSelectionSectionContainer;
15 changes: 15 additions & 0 deletions src/components/leftsection/inputSelectionSection/style.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import styled from 'styled-components';
import colors from '@src/utils/colors';

export const InputSectionContainer = styled.div`
background-color: ${colors.containerBackground};
width: 95%;
height: 40%;
margin-top: 10px;
border: 1px solid ${colors.borderGrey};
`;
export const InputTopSelectionSectionContainer = styled.div`
width: 100%;
height: 44%;
border-bottom: 1px solid ${colors.borderGrey};
`;
14 changes: 14 additions & 0 deletions src/components/leftsection/mathSection/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from 'react';
import Title from '@src/components/common/title';
import * as StyledComponent from './style';

const MathSectionContainer = () => {
return (
<>
<StyledComponent.MathSectionContainer>
<Title title="수식" />
</StyledComponent.MathSectionContainer>
</>
);
};
export default MathSectionContainer;
10 changes: 10 additions & 0 deletions src/components/leftsection/mathSection/style.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import styled from 'styled-components';
import colors from '@src/utils/colors';

export const MathSectionContainer = styled.div`
background-color: ${colors.containerBackground};
width: 95%;
height: 25%;
margin-top: 14px;
border: 1px solid ${colors.borderGrey};
`;
15 changes: 15 additions & 0 deletions src/components/leftsection/templateSection/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from 'react';
import Title from '@src/components/common/title';
import * as StyledComponent from './style';

const TemplateSectionContainer = () => {
return (
<>
<StyledComponent.TemplateSectionContainer>
<Title title="템플릿" />
</StyledComponent.TemplateSectionContainer>
</>
);
};

export default TemplateSectionContainer;
10 changes: 10 additions & 0 deletions src/components/leftsection/templateSection/style.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import styled from 'styled-components';
import colors from '@src/utils/colors';

export const TemplateSectionContainer = styled.div`
background-color: ${colors.containerBackground};
width: 95%;
height: 25%;
margin-top: 14px;
border: 1px solid ${colors.borderGrey};
`;
5 changes: 3 additions & 2 deletions src/index.tsx
Original file line number Diff line number Diff line change
@@ -2,11 +2,12 @@ import React from 'react';
import { Provider } from 'react-redux';
import ReactDOM from 'react-dom';
import store from '@src/store';
import App from '@src/App';

import MainPage from '@src/MainPage';

ReactDOM.render(
<Provider store={store as any}>
<App />
<MainPage />
</Provider>,
document.getElementById('root')
);
2 changes: 1 addition & 1 deletion src/style.ts
Original file line number Diff line number Diff line change
@@ -21,7 +21,7 @@ export const Content = styled.div`

export const Aside = styled.div`
display: flex;
flex: none;
flex-direction: column;
width: 30rem;
background-color: #e3ede7;
`;
1 change: 1 addition & 0 deletions src/utils/svg/leftsection/inputselection/multiply.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/utils/svg/leftsection/inputselection/root.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit ea1c7ad

Please sign in to comment.