feat: 질문추가 로직 구상중 (#66)

Yapp-17th · Dec 3, 2020 · 04cce51 · 04cce51
1 parent 38233da
commit 04cce51
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 14 deletions.
diff --git a/src/components/Question/QuestionList/QuestionList.js b/src/components/Question/QuestionList/QuestionList.js
@@ -1,22 +1,18 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import update from 'immutability-helper';
 import PropTypes from 'prop-types';
 import QuestionItem from '../QuestionItem';
 
-export default function QuestionList({ questions }) {
-  const [cards, setCards] = useState([]);
-  useEffect(() => {
-    setCards(questions);
-  }, []);
+export default function QuestionList({ questions, setQuestions }) {
   const moveCard = useCallback((dragIndex, hoverIndex) => {
-    const dragCard = cards[dragIndex];
-    setCards(update(cards, {
+    const dragCard = questions[dragIndex];
+    setQuestions(update(questions, {
       $splice: [
         [dragIndex, 1],
         [hoverIndex, 0, dragCard],
       ],
     }));
-  }, [cards]);
+  }, [questions]);
   const renderCard = (card, index) => (
     <QuestionItem
       key={card.id}
@@ -29,13 +25,14 @@ export default function QuestionList({ questions }) {
   );
   return (
     <>
-      <div>{cards.map((card, i) => renderCard(card, i))}</div>
+      <div>{questions.map((card, i) => renderCard(card, i))}</div>
     </>
   );
 }
 
 QuestionList.propTypes = {
   questions: PropTypes.array,
+  setQuestions: PropTypes.func,
 };
 
 QuestionList.defaultProp = {

diff --git a/src/pages/QuestionPage/QuestionPage.js b/src/pages/QuestionPage/QuestionPage.js
@@ -61,7 +61,7 @@ const InputQuestion = styled.input`
   width: 1070px;
   height: 26px;
   font-size: 24px;
-  padding: 17px 30px 17px 5px;
+  padding: 17px 30px 17px 17px;
   border: none;
   outline: none;
   border-radius: 10px;
@@ -72,7 +72,7 @@ const InputQuestion = styled.input`
 const IconWrapper = styled.span`
   width: 63px;
   height: 63px;
-  transform:translate(-12px, -2px);
+  transform:translate(-17px, -2px);
 `;
 
 const Text = styled.div`
@@ -165,13 +165,13 @@ export default function QuestionPage({ match }) {
                     <ListWrapper>
                       <Scroll>
                         <DndProvider backend={HTML5Backend}>
-                          <QuestionList questions={questions} />
+                          <QuestionList questions={questions} setQuestions={setQuestions} />
                         </DndProvider>
                       </Scroll>
                     </ListWrapper>
                   )}
                 <ButtonWrapper onClick={handleMakeQuestion}>
-                  <Button text="완료" theme="blue" />
+                  <Button text={id === 'new' ? '저장' : '완료'} theme="blue" />
                 </ButtonWrapper>
               </>
             )}