Merge pull request #21 from EFUB-TEAM4/issue-17

#17 [Vote] PC, Mobile UI
EFUB-TEAM4 · Jul 21, 2022 · 88a787b · 88a787b
2 parents 4ed3c86 + db99c56
commit 88a787b
Show file tree

Hide file tree

Showing 8 changed files with 468 additions and 10 deletions.
diff --git a/src/AppRouter.js b/src/AppRouter.js
@@ -1,7 +1,16 @@
 /* eslint-disable import/no-unresolved */
 import React from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import { Login, Main, Save, Vote, MyPage, SaveRecord } from 'pages';
+import {
+  Login,
+  Main,
+  Save,
+  Vote,
+  VoteComplete,
+  MyPage,
+  SaveRecord,
+  SaveComplete,
+} from 'pages';
 
 function AppRouter() {
   return (
@@ -14,7 +23,9 @@ 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 />} />

diff --git a/src/pages/Save/SaveComplete/index.js b/src/pages/Save/SaveComplete/index.js
@@ -0,0 +1,33 @@
+/* eslint-disable import/no-unresolved */
+import React from 'react';
+import { SaveBear, WhiteClose } from 'assets';
+import {
+  StyledRoot,
+  MainText,
+  ImgBox,
+  HomeButton,
+  Text,
+  ExitButton,
+  ButtonBox,
+} from './style';
+
+function SaveComplete() {
+  return (
+    <StyledRoot>
+      <ButtonBox>
+        <button type="button">
+          <ExitButton src={WhiteClose} alt="창 닫기 버튼" />
+        </button>
+      </ButtonBox>
+      <MainText>날씨 기록이 저장되었어요</MainText>
+      <ImgBox>
+        <img src={SaveBear} alt="저장하는 곰돌이 이미지" />
+      </ImgBox>
+      <HomeButton>
+        <Text>홈으로 돌아가기</Text>
+      </HomeButton>
+    </StyledRoot>
+  );
+}
+
+export default SaveComplete;
diff --git a/src/pages/Save/SaveComplete/style.js b/src/pages/Save/SaveComplete/style.js
@@ -0,0 +1,103 @@
+/* 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 ButtonBox = styled.div`
+  ${applyMediaQuery('mobile')} {
+    button {
+      margin-bottom: 3rem;
+      margin-left: 37rem;
+    }
+  }
+`;
+
+const ExitButton = styled.img`
+  ${applyMediaQuery('desktop')} {
+    display: none;
+  }
+
+  ${applyMediaQuery('mobile')} {
+    width: 3rem;
+    height: 3rem;
+  }
+`;
+
+const MainText = styled.p`
+  font-family: 'Cafe24Ssurround';
+  font-size: ${({ theme: { font } }) => font.size.large};
+  color: ${({ theme: { color } }) => color.white};
+  /* margin-top: 7rem; */
+  margin-bottom: 5rem;
+
+  ${applyMediaQuery('mobile')} {
+    font-size: ${({ theme: { font } }) => font.size.semiLarge};
+    margin-bottom: 4rem;
+  }
+`;
+
+const ImgBox = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40rem;
+  height: 40rem;
+  background-color: ${({ theme: { color } }) => color.white};
+  border-radius: 0.6rem;
+  margin: 0rem;
+
+  img {
+    width: 92%;
+    height: 92%;
+  }
+
+  ${applyMediaQuery('mobile')} {
+    width: 40rem;
+    height: 40rem;
+  }
+`;
+
+const HomeButton = styled.button`
+  width: 20rem;
+  height: 5rem;
+  margin-top: 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,
+  ButtonBox,
+  ExitButton,
+  MainText,
+  ImgBox,
+  HomeButton,
+  Text,
+};
diff --git a/src/pages/Vote/VoteComplete/index.js 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 (
+    <StyledRoot>
+      <MainText>투표가 등록되었어요</MainText>
+      <ContentBox>
+        <Clothes>오늘 주경바막</Clothes>
+        <Place>조형예술관에서 허, 불허?</Place>
+      </ContentBox>
+      <HomeButton>
+        <Text>홈으로 돌아가기</Text>
+      </HomeButton>
+    </StyledRoot>
+  );
+}
+
+export default VoteComplete;
diff --git a/src/pages/Vote/VoteComplete/style.js 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/Vote/index.js b/src/pages/Vote/index.js
@@ -1,13 +1,74 @@
 /* eslint-disable import/no-unresolved */
 import React from 'react';
-import { RecSun } from 'assets';
-import { StyledRoot, Text } from './style';
+import { useNavigate } from 'react-router-dom';
+import { WhiteLeft } from 'assets';
+import { HeaderIcon, PublicButton } from 'components';
+import {
+  StyledRoot,
+  HeaderIconBox,
+  Text,
+  BackButton,
+  BackButtonBox,
+  SubText,
+  MainText,
+  ContentBox,
+  FormBox,
+  SubjectText,
+  Form,
+  ButtonBox,
+} from './style';
 
 function Vote() {
+  const navigate = useNavigate();
   return (
     <StyledRoot>
-      <Text>Vote</Text>
-      <img src={RecSun} alt="RecSunny" />
+      <HeaderIconBox>
+        <HeaderIcon />
+      </HeaderIconBox>
+      <BackButtonBox>
+        <button
+          className="backbutton"
+          type="button"
+          onClick={() => {
+            navigate(-1);
+          }}
+        >
+          <BackButton src={WhiteLeft} alt="BackButton" />
+        </button>
+      </BackButtonBox>
+      <Text>
+        <SubText>오늘 옷차림이 고민될 땐,</SubText>
+        <MainText>벗들에게 물어봐!</MainText>
+      </Text>
+      <ContentBox>
+        <FormBox>
+          <SubjectText>
+            오늘 이 옷<span>*</span>
+          </SubjectText>
+          <Form>
+            <input
+              type="text"
+              name="clothes"
+              placeholder="입고싶은 옷을 적어주세요"
+              required="required"
+            />
+          </Form>
+        </FormBox>
+        <FormBox>
+          <SubjectText>어디에서</SubjectText>
+          <Form>
+            <input
+              type="text"
+              name="place"
+              placeholder="옷을 입고 갈 장소를 적어주세요"
+            />
+          </Form>
+        </FormBox>
+        <SubjectText>허, 불허?</SubjectText>
+      </ContentBox>
+      <ButtonBox>
+        <PublicButton text="투표 만들기" />
+      </ButtonBox>
     </StyledRoot>
   );
 }