From 9771892bf6233f18142d83725bab702cf1355d0b Mon Sep 17 00:00:00 2001
From: Eunbi Choi <pisr25@naver.com>
Date: Wed, 27 Jul 2022 02:11:01 +0900
Subject: [PATCH] #17 [Feat] add URL parameters

---
 src/AppRouter.js                     |  5 +++-
 src/pages/Vote/VoteComplete/index.js | 13 ++++++---
 src/pages/Vote/VoteComplete/style.js | 19 ++++++++++++-
 src/pages/Vote/index.js              | 40 +++++++++++++---------------
 4 files changed, 51 insertions(+), 26 deletions(-)

diff --git a/src/AppRouter.js b/src/AppRouter.js
index 1f8dbef..01b176c 100644
--- a/src/AppRouter.js
+++ b/src/AppRouter.js
@@ -25,7 +25,10 @@ function AppRouter() {
         <Route path="/save" element={<Save />} />
         <Route path="/complete" 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 />} />
diff --git a/src/pages/Vote/VoteComplete/index.js b/src/pages/Vote/VoteComplete/index.js
index 81d291d..6faf6c9 100644
--- a/src/pages/Vote/VoteComplete/index.js
+++ b/src/pages/Vote/VoteComplete/index.js
@@ -1,25 +1,32 @@
 /* eslint-disable import/no-unresolved */
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
+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
         onClick={() => {
diff --git a/src/pages/Vote/VoteComplete/style.js b/src/pages/Vote/VoteComplete/style.js
index 682236d..cd3f02d 100644
--- a/src/pages/Vote/VoteComplete/style.js
+++ b/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,
+};
diff --git a/src/pages/Vote/index.js b/src/pages/Vote/index.js
index 495fe19..1480a07 100644
--- a/src/pages/Vote/index.js
+++ b/src/pages/Vote/index.js
@@ -1,5 +1,5 @@
-/* eslint-disable import/no-unresolved */
-import React, { useState } 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';
@@ -21,23 +21,20 @@ import {
 function Vote() {
   const navigate = useNavigate();
 
-  const [clothesText, setClothesText] = useState(true);
+  const [clothes, setClothes] = useState('');
+  const [place, setPlace] = useState('');
 
-  const changeHandler = () => {
-    setClothesText(false);
+  const cChangeHandler = e => {
+    setClothes(e.target.value);
   };
 
-  // const [content, setContent] = useState({
-  //   clothes: '',
-  //   place: '',
-  // });
+  const pChangeHandler = e => {
+    setPlace(e.target.value);
+  };
 
-  // const onChangeContent = e => {
-  //   setContent({
-  //     ...content,
-  //     [e.target.name]: e.target.value,
-  //   });
-  // };
+  const handleSubmit = e => {
+    e.preventDefault();
+  };
 
   return (
     <StyledRoot>
@@ -64,14 +61,14 @@ function Vote() {
           <SubjectText>
             오늘 이 옷<span>*</span>
           </SubjectText>
-          <Form>
+          <Form onSubmit={handleSubmit}>
             <input
               type="text"
               name="clothes"
               placeholder="입고싶은 옷을 적어주세요"
               required="required"
-              // onChange={(changeHandler, onChangeContent)}
-              onChange={changeHandler}
+              value={clothes}
+              onChange={cChangeHandler}
             />
           </Form>
         </FormBox>
@@ -82,7 +79,8 @@ function Vote() {
               type="text"
               name="place"
               placeholder="옷을 입고 갈 장소를 적어주세요"
-              // onChange={onChangeContent}
+              value={place}
+              onChange={pChangeHandler}
             />
           </Form>
         </FormBox>
@@ -91,10 +89,10 @@ function Vote() {
       <ButtonBox>
         <PublicButton
           onClick={() => {
-            navigate('/votecomplete');
+            navigate(`/votecomplete/${clothes}/${place}`);
           }}
           text="투표 만들기"
-          isDisabled={clothesText}
+          isDisabled={clothes.length > 0 ? 0 : 1}
         />
       </ButtonBox>
     </StyledRoot>