diff --git a/src/AppRouter.js b/src/AppRouter.js index a220ecd..1f8dbef 100644 --- a/src/AppRouter.js +++ b/src/AppRouter.js @@ -6,6 +6,7 @@ import { Main, Save, Vote, + VoteComplete, MyPage, SaveRecord, SaveComplete, @@ -24,6 +25,7 @@ function AppRouter() { } /> } /> } /> + } /> } /> } /> } /> diff --git a/src/pages/Vote/VoteComplete/index.js b/src/pages/Vote/VoteComplete/index.js new file mode 100644 index 0000000..ed7c2f7 --- /dev/null +++ b/src/pages/Vote/VoteComplete/index.js @@ -0,0 +1,28 @@ +/* eslint-disable import/no-unresolved */ +import React from 'react'; +import { + StyledRoot, + MainText, + ContentBox, + Clothes, + Place, + HomeButton, + Text, +} from './style'; + +function VoteComplete() { + return ( + + 투표가 등록되었어요 + + 오늘 주경바막 + 조형예술관에서 허, 불허? + + + 홈으로 돌아가기 + + + ); +} + +export default VoteComplete; diff --git a/src/pages/Vote/VoteComplete/style.js b/src/pages/Vote/VoteComplete/style.js new file mode 100644 index 0000000..682236d --- /dev/null +++ b/src/pages/Vote/VoteComplete/style.js @@ -0,0 +1,86 @@ +/* eslint-disable import/no-unresolved */ +import styled from 'styled-components'; +import { applyMediaQuery } from 'styles/mediaQuery'; + +const StyledRoot = styled.div` + width: 100vw; + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background: ${({ theme: { color } }) => color.greenDarker}; +`; + +const MainText = styled.p` + font-family: 'Cafe24Ssurround'; + font-size: ${({ theme: { font } }) => font.size.semiLarge}; + color: ${({ theme: { color } }) => color.white}; + margin-bottom: 10.2rem; +`; + +const ContentBox = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 56rem; + height: 20rem; + border-radius: 0.6rem; + background-color: ${({ theme: { color } }) => color.greenLighter}; + + ${applyMediaQuery('mobile')} { + width: 40rem; + height: 15rem; + } +`; + +const Clothes = styled.p` + font-family: 'Noto'; + font-size: ${({ theme: { font } }) => font.size.semiMedium}; + color: ${({ theme: { color } }) => color.greenDarker}; + margin-bottom: 2rem; + + ${applyMediaQuery('mobile')} { + font-size: ${({ theme: { font } }) => font.size.regular}; + margin-bottom: 1rem; + } +`; + +const Place = styled.p` + font-family: 'Noto'; + font-size: ${({ theme: { font } }) => font.size.semiMedium}; + color: ${({ theme: { color } }) => color.greenDarker}; + + ${applyMediaQuery('mobile')} { + font-size: ${({ theme: { font } }) => font.size.regular}; + } +`; + +const HomeButton = styled.button` + width: 20rem; + height: 5rem; + margin-top: 13.5rem; + border-radius: 0.6rem; + background-color: ${({ theme: { color } }) => color.white}; + + ${applyMediaQuery('mobile')} { + margin-top: 3rem; + width: 40rem; + height: 5rem; + } +`; + +const Text = styled.p` + font-family: 'Cafe24Ssurround'; + font-size: ${({ theme: { font } }) => font.size.small}; + color: ${({ theme: { color } }) => color.greenDarker}; + + ${applyMediaQuery('mobile')} { + font-family: 'Noto'; + font-size: ${({ theme: { font } }) => font.size.small}; + font-weight: ${({ theme: { font } }) => font.weight.bold}; + } +`; + +export { StyledRoot, MainText, ContentBox, Clothes, Place, HomeButton, Text }; diff --git a/src/pages/index.js b/src/pages/index.js index 6e2d864..d8fc252 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -4,4 +4,5 @@ export { default as MyPage } from './MyPage'; export { default as Save } from './Save'; export { default as SaveComplete } from './Save/SaveComplete'; export { default as Vote } from './Vote'; +export { default as VoteComplete } from './Vote/VoteComplete'; export { default as SaveRecord } from './SaveRecord';