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

#17 [Vote] Button & VoteComplete Params

src/AppRouter.js

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

src/pages/Vote/VoteComplete/index.js

@@ -1,24 +1,38 @@
 /* eslint-disable import/no-unresolved */
 import React from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
 import {
   StyledRoot,
   MainText,
   ContentBox,
   Clothes,
   Place,
+  Params,
   HomeButton,
   Text,
 } from './style';
 
 function VoteComplete() {
+  const navigate = useNavigate();
+  const { clothes } = useParams();
+  const { place } = useParams();
+
   return (
     <StyledRoot>
       <MainText>투표가 등록되었어요</MainText>
       <ContentBox>
-        <Clothes>오늘 주경바막</Clothes>
-        <Place>조형예술관에서 허, 불허?</Place>
+        <Clothes>
+          오늘 <Params>{clothes}</Params>
+        </Clothes>
+        <Place>
+          <Params>{place}</Params>에서 허, 불허?
+        </Place>
       </ContentBox>
-      <HomeButton>
+      <HomeButton
+        onClick={() => {
+          navigate('/');
+        }}
+      >
         <Text>홈으로 돌아가기</Text>
       </HomeButton>
     </StyledRoot>

src/pages/Vote/VoteComplete/style.js

@@ -57,6 +57,14 @@ const Place = styled.p`
   }
 `;
 
+const Params = styled.b`
+  font-weight: ${({ theme: { font } }) => font.weight.bold};
+
+  ${applyMediaQuery('mobile')} {
+    font-weight: ${({ theme: { font } }) => font.weight.bold};
+  }
+`;
+
 const HomeButton = styled.button`
   width: 20rem;
   height: 5rem;
@@ -83,4 +91,13 @@ const Text = styled.p`
   }
 `;
 
-export { StyledRoot, MainText, ContentBox, Clothes, Place, HomeButton, Text };
+export {
+  StyledRoot,
+  MainText,
+  ContentBox,
+  Clothes,
+  Place,
+  Params,
+  HomeButton,
+  Text,
+};

src/pages/Vote/index.js

@@ -1,5 +1,5 @@
-/* eslint-disable import/no-unresolved */
-import React from 'react';
+/* eslint-disable */
+import React, { useState, useParams } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { WhiteLeft } from 'assets';
 import { HeaderIcon, PublicButton } from 'components';
@@ -20,6 +20,22 @@ import {
 
 function Vote() {
   const navigate = useNavigate();
+
+  const [clothes, setClothes] = useState('');
+  const [place, setPlace] = useState('');
+
+  const cChangeHandler = e => {
+    setClothes(e.target.value);
+  };
+
+  const pChangeHandler = e => {
+    setPlace(e.target.value);
+  };
+
+  const handleSubmit = e => {
+    e.preventDefault();
+  };
+
   return (
     <StyledRoot>
       <HeaderIconBox>
@@ -45,12 +61,14 @@ function Vote() {
           <SubjectText>
             오늘 이 옷<span>*</span>
           </SubjectText>
-          <Form>
+          <Form onSubmit={handleSubmit}>
             <input
               type="text"
               name="clothes"
               placeholder="입고싶은 옷을 적어주세요"
               required="required"
+              value={clothes}
+              onChange={cChangeHandler}
             />
           </Form>
         </FormBox>
@@ -61,13 +79,21 @@ function Vote() {
               type="text"
               name="place"
               placeholder="옷을 입고 갈 장소를 적어주세요"
+              value={place}
+              onChange={pChangeHandler}
             />
           </Form>
         </FormBox>
         <SubjectText>허, 불허?</SubjectText>
       </ContentBox>
       <ButtonBox>
-        <PublicButton text="투표 만들기" />
+        <PublicButton
+          onClick={() => {
+            navigate(`/votecomplete/${clothes}/${place}`);
+          }}
+          text="투표 만들기"
+          isDisabled={clothes.length > 0 ? 0 : 1}
+        />
       </ButtonBox>
     </StyledRoot>
   );

src/pages/Vote/style.js

@@ -47,7 +47,7 @@ const BackButton = styled.img`
   height: 3rem;
 `;
 
-const Text = styled.p`
+const Text = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;