diff --git a/src/App.tsx b/src/MainPage.tsx similarity index 70% rename from src/App.tsx rename to src/MainPage.tsx index 5b97a59..30fee47 100644 --- a/src/App.tsx +++ b/src/MainPage.tsx @@ -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 ( <> @@ -15,7 +18,11 @@ const App = () => {
- + + + + + @@ -39,4 +46,4 @@ const App = () => { ); }; -export default App; +export default MainPage; diff --git a/src/components/common/title/index.tsx b/src/components/common/title/index.tsx new file mode 100644 index 0000000..666e5d2 --- /dev/null +++ b/src/components/common/title/index.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import * as StyledComponent from './style'; + +export interface NameProps { + title?: string; +} + +const Title = ({ title }: NameProps) => { + return ( + {title} + ); +}; + +export default Title; diff --git a/src/components/common/title/style.tsx b/src/components/common/title/style.tsx new file mode 100644 index 0000000..b646915 --- /dev/null +++ b/src/components/common/title/style.tsx @@ -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}; +`; diff --git a/src/components/leftsection/inputSelectionSection/InputBottomSelectionSection.tsx b/src/components/leftsection/inputSelectionSection/InputBottomSelectionSection.tsx new file mode 100644 index 0000000..be7a87f --- /dev/null +++ b/src/components/leftsection/inputSelectionSection/InputBottomSelectionSection.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import * as StyledComponent from 'styled-components'; + +const InputBottomSelectionSection = () => { + return ( + <> +
+ + ); +}; + +export default InputBottomSelectionSection; diff --git a/src/components/leftsection/inputSelectionSection/InputTopSelectionSection.tsx b/src/components/leftsection/inputSelectionSection/InputTopSelectionSection.tsx new file mode 100644 index 0000000..000314d --- /dev/null +++ b/src/components/leftsection/inputSelectionSection/InputTopSelectionSection.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import * as StyledComponent from './style'; + +const InputTopSelectionSection = () => { + return ( + <> + + + ); +}; + +export default InputTopSelectionSection; diff --git a/src/components/leftsection/inputSelectionSection/index.tsx b/src/components/leftsection/inputSelectionSection/index.tsx new file mode 100644 index 0000000..c72f72c --- /dev/null +++ b/src/components/leftsection/inputSelectionSection/index.tsx @@ -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.InputTopSelectionSectionContainer> + <MULTIPLY /> + </StyledComponent.InputTopSelectionSectionContainer> + </StyledComponent.InputSectionContainer> + </> + ); +}; + +export default InputSelectionSectionContainer; diff --git a/src/components/leftsection/inputSelectionSection/style.tsx b/src/components/leftsection/inputSelectionSection/style.tsx new file mode 100644 index 0000000..7659b9d --- /dev/null +++ b/src/components/leftsection/inputSelectionSection/style.tsx @@ -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}; +`; diff --git a/src/components/leftsection/mathSection/index.tsx b/src/components/leftsection/mathSection/index.tsx new file mode 100644 index 0000000..bb1afb4 --- /dev/null +++ b/src/components/leftsection/mathSection/index.tsx @@ -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; diff --git a/src/components/leftsection/mathSection/style.tsx b/src/components/leftsection/mathSection/style.tsx new file mode 100644 index 0000000..0a59ca4 --- /dev/null +++ b/src/components/leftsection/mathSection/style.tsx @@ -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}; +`; diff --git a/src/components/leftsection/templateSection/index.tsx b/src/components/leftsection/templateSection/index.tsx new file mode 100644 index 0000000..23f5204 --- /dev/null +++ b/src/components/leftsection/templateSection/index.tsx @@ -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; diff --git a/src/components/leftsection/templateSection/style.tsx b/src/components/leftsection/templateSection/style.tsx new file mode 100644 index 0000000..59819ea --- /dev/null +++ b/src/components/leftsection/templateSection/style.tsx @@ -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}; +`; diff --git a/src/index.tsx b/src/index.tsx index b3c54d0..0532ef9 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -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') ); diff --git a/src/style.ts b/src/style.ts index f95e43c..7d0d5c6 100644 --- a/src/style.ts +++ b/src/style.ts @@ -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; `; diff --git a/src/utils/svg/leftsection/inputselection/multiply.svg b/src/utils/svg/leftsection/inputselection/multiply.svg new file mode 100644 index 0000000..8367f02 --- /dev/null +++ b/src/utils/svg/leftsection/inputselection/multiply.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="47" height="56" viewBox="-10 -10 47 56" id="eq-1" x="120" y="521"><path fill="#555" fill-rule="evenodd" d="M3 18h21v1H3v-1zm3 3h1v1H6v-1zm2 0h1v1H8v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zM8 31h1v1H8v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2-10h1v1h-1v-1zm0 10h1v1h-1v-1zm2-10h1v1h-1v-1zm0 10h1v1h-1v-1zm2-2h1v1h-1v-1zm0-8h1v1h-1v-1zM6 23h1v1H6v-1zm14 0h1v1h-1v-1zM6 25h1v1H6v-1zm14 0h1v1h-1v-1zM6 27h1v1H6v-1zm14 0h1v1h-1v-1zM6 29h1v1H6v-1zm14 2h1v1h-1v-1zM6 31h1v1H6v-1zM6 5h1v1H6V5zm2 0h1v1H8V5zm2 0h1v1h-1V5zm2 0h1v1h-1V5zm2 0h1v1h-1V5zM8 15h1v1H8v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2-10h1v1h-1V5zm0 10h1v1h-1v-1zm2-10h1v1h-1V5zm0 10h1v1h-1v-1zm2-2h1v1h-1v-1zm0-8h1v1h-1V5zM6 7h1v1H6V7zm14 0h1v1h-1V7zM6 9h1v1H6V9zm14 0h1v1h-1V9zM6 11h1v1H6v-1zm14 0h1v1h-1v-1zM6 13h1v1H6v-1zm14 2h1v1h-1v-1zM6 15h1v1H6v-1z"/></svg> \ No newline at end of file diff --git a/src/utils/svg/leftsection/inputselection/root.svg b/src/utils/svg/leftsection/inputselection/root.svg new file mode 100644 index 0000000..3108e6a --- /dev/null +++ b/src/utils/svg/leftsection/inputselection/root.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="47" height="56" viewBox="-10 -10 47 56" id="eq-2" x="512" y="521"><path fill="#555" fill-rule="evenodd" d="M12 10h15v1H11L7 26H5.582l-3.764-7.225-1.536.61-.282-.61 2.982-1.217 3.209 6.299L10 10h2zm1 5h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm-6 10h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm2-10h1v1h-1v-1zm2 0h1v1h-1v-1zm-12 2h1v1h-1v-1zm12 0h1v1h-1v-1zm-12 2h1v1h-1v-1zm12 0h1v1h-1v-1zm-12 2h1v1h-1v-1zm12 0h1v1h-1v-1zm0 2h1v1h-1v-1zm0 2h1v1h-1v-1zm-12-2h1v1h-1v-1zm0 2h1v1h-1v-1zm10 0h1v1h-1v-1z"/></svg> \ No newline at end of file