markdown 页眉页脚和溢出内容

Posted 2021-05-05

```tsx
import React, { Component } from 'react';
import styled from 'styled-components';
import faker from 'faker'

const Container = styled.div`
  /* display: flex; */
  height: 100vh;
  /* justify-content: center; */
  /* align-items: center; */
  background: ${(props) => props.theme.background};
  /* padding: 50px; */
  /* overflow: hidden; */
`;

const Title = styled.h1`
  text-align: left;
  /* display: block; */
  font-size: 3em;
  padding-bottom: 0.3em;
`

const ServiceAddButton = styled.button`
  /* width: 5em; */
  font-size: 1em;
  display: block;
  padding: 0.5em 0.4em;
  margin: 0.3em;
  /* float: left; */
`

const ServiceListTitle = styled.div`
  text-align: left;
  padding: 0.5em;
`

const ServiceList = styled.div`
  display: flex;
  flex-direction: column;
`

const TempContainer = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;
  /* padding: 2%; */
  /* width: 50%; */
  background-color: skyblue;
`
const TempHeader = styled.div`
  margin: 2%;
  background-color: gray;
  /* min-height: 30px; */
  flex: 0 0 auto;
`

const TempFooter = styled.div`
  background-color: gray;
  flex: 0 0 auto;
`
const Article = styled.div`
  /* flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px; */
`
const ServiceList2 = styled.div`
  display: flex;
  flex-direction: column;
`

const ServiceListRow = styled.div`
  margin-top: 0.5em;
  display: flex;
`
const Cell = styled.div`
  flex: 1 0 auto;
  width: 6em;
`

const Icon = styled.img`
  width: 32px;
  height: 32px;
`

interface IProps {
  history?: any;
}

const SERVICE_LIST = (() => {
  let list = []
  const length = 50
  for (let i = 0; i < length; i++) {
    list.push({
      id: faker.random.number(),
      name: faker.company.companyName(),
      name_kr: faker.company.companyName(),
      icon: faker.image.avatar()
    })
  }
  return list;
})()


function Main(props: IProps) {
  const { history } = props;
  return (
    // <Container>

    <TempContainer>
      <TempHeader>
      <Title>Whatssub Admin</Title>
       <ServiceAddButton>서비스 추가</ServiceAddButton>
       <ServiceListTitle>서비스 리스트</ServiceListTitle>
      </TempHeader>
      <Article>
        <ServiceList2>
          {
            SERVICE_LIST.map(service => {
              return (
                <ServiceListRow>
                  <Cell>{service.id}</Cell>
                  <Cell>{service.name}</Cell>
                  <Cell>{service.name_kr}</Cell>
                  <Cell><Icon src={service.icon} /></Cell>
                </ServiceListRow>
              )
            })
          }
        </ServiceList2>
      </Article>
      <TempFooter>
        Footer
      </TempFooter>
    </TempContainer>
    // </Container>
  );
}

// function Main(props: IProps) {
//   const { history } = props;
//   return (
//     <Container>
//       <Title>Whatssub Admin</Title>
//       <ServiceAddButton>서비스 추가</ServiceAddButton>
//       <ServiceListTitle>서비스 리스트</ServiceListTitle>
//         <ServiceListRow>
//           <Cell>ID</Cell>
//           <Cell>NAME</Cell>
//           <Cell>NAME(KR)</Cell>
//           <Cell>ICON</Cell>
//         </ServiceListRow>
//         <ServiceList2>
//           {
//             SERVICE_LIST.map(service => {
//               return (
//                 <ServiceListRow>
//                   <Cell>{service.id}</Cell>
//                   <Cell>{service.name}</Cell>
//                   <Cell>{service.name_kr}</Cell>
//                   <Cell><Icon src={service.icon} /></Cell>
//                 </ServiceListRow>
//               )
//             })
//           }
//         </ServiceList2>

//     </Container>
//   );
// }



export default Main;

```