#17 [Style] VoteComplete page PC, Mobile UI

src/AppRouter.js

@@ -6,6 +6,7 @@ import {
   Main,
   Save,
   Vote,
+  VoteComplete,
   MyPage,
   SaveRecord,
   SaveComplete,
@@ -24,6 +25,7 @@ function AppRouter() {
         <Route path="/save" element={<Save />} />
         <Route path="/complete" element={<SaveComplete />} />
         <Route path="/vote" element={<Vote />} />
+        <Route path="/votecomplete" element={<VoteComplete />} />
         <Route path="/mypage" element={<MyPage />} />
         <Route path="/mypage/save/:date" element={<SaveRecord />} />
         <Route path="/" element={<Main />} />

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 (
+    <StyledRoot>
+      <MainText>투표가 등록되었어요</MainText>
+      <ContentBox>
+        <Clothes>오늘 주경바막</Clothes>
+        <Place>조형예술관에서 허, 불허?</Place>
+      </ContentBox>
+      <HomeButton>
+        <Text>홈으로 돌아가기</Text>
+      </HomeButton>
+    </StyledRoot>
+  );
+}
+
+export default VoteComplete;

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 };

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';