khusat / khusat-front

Go to a project
Toggle navigation Toggle navigation pinning
이준호
0cad49e7 1 parent 8627d7a2

[UPDATE] Main페이지 반응형 컨테이너로 리팩토링

Inline Side-by-side
Showing 3 changed files with 29 additions and 41 deletions
......@@ -8,7 +8,7 @@
name="description"
content="Web site created using create-react-app"
/>
<title>React App</title>
<title>KHUSAT</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
......
......@@ -20,25 +20,17 @@ const media = Object.keys(sizes).reduce((acc, label) => {
return acc;
}, {});
const WrapperContainer = styled.div`
width: 100%;
height: 100vh;
`;
const Wrapper = styled.div`
width: 100%;
height: 100%;
background-image: url(${pattern});
background-repeat: no-repeat; // background-image가 컨테이너를 가득 채우지 못할 경우에도 반복하지 않는다.
background-size: cover; // 사이즈가 container에 맞지 않아도 꽉 차도록 채운다.
background-position: center; // background-image가 컨테이너에 가운데로 오도록 한다.
`;
const Container = styled.div`
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
background-image: url(${pattern});
background-repeat: none; // background-image가 컨테이너를 가득 채우지 못할 경우에도 반복하지 않는다.
background-size: cover; // 사이즈가 container에 맞지 않아도 꽉 차도록 채운다.
background-position: center; // background-image가 컨테이너에 가운데로 오도록 한다.
color: #ffffff;
`;
......@@ -47,18 +39,23 @@ const MainImg = styled.img`
width: 30rem;
height: auto;
${media.tablet`
width: 20rem;
width: 25rem;
`}
${media.phone`
width: 22rem;
`}
`;
const MainTitle = styled.div`
margin-top: 3rem;
text-align: center;
font-size: 5rem;
font-weight: bold;
${media.tablet`
font-size: 4rem;
`}
${media.phone`
font-size: 3rem;
`}
`;
const MainDesc = styled.div`
......@@ -70,15 +67,6 @@ const MainDesc = styled.div`
`}
`;
const MainBtnWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
${media.tablet`
`}
`;
const MainBtn = styled.div`
cursor: pointer;
display: flex;
......@@ -100,6 +88,11 @@ const MainBtn = styled.div`
background-color: #ffffff;
color: #010101;
}
${media.phone`
width: 20rem;
height: 4rem;
font-size: 1.2rem;
`}
`;
function MainPage({ history }) {
......@@ -114,21 +107,15 @@ function MainPage({ history }) {
return (
<>
<WrapperContainer>
<Wrapper>
<Container>
<MainTitle>KHUSAT</MainTitle>
<MainDesc>
KHUSAT 특별과정, <br></br>
여러분의 보직을 추천드립니다.
</MainDesc>
<MainImg src={soldier} />
</Container>
<MainBtnWrapper>
<MainBtn onClick={onClick}>시작하기</MainBtn>
</MainBtnWrapper>
</Wrapper>
</WrapperContainer>
<Container>
<MainTitle>KHUSAT</MainTitle>
<MainDesc>
KHUSAT 특별과정, <br></br>
여러분의 보직을 추천드립니다.
</MainDesc>
<MainImg src={soldier} />
<MainBtn onClick={onClick}>시작하기</MainBtn>
</Container>
</>
);
}
......
......@@ -34,6 +34,7 @@ function ResultPage({result}){
<Title>{result.high}</Title>
<Position>{result.low}</Position>
<Description>{result.description}</Description>
<img src={result.image} />
</Container>)
}
</>
......