feat: 질문 리스트 삭제 시 랜더링 문제 해결 중 (#66)

.storybook/webpack.config.js

@@ -35,6 +35,7 @@ module.exports = async ({ config }) => {
     "@repository": path.resolve(__dirname, "../src/repository"),
     "@store": path.resolve(__dirname, "../src/store"),
     "@utils": path.resolve(__dirname, "../src/utils"),
+    "@context": path.resolve(__dirname, "../src/context"),
   };
 
   // don't forget to return.

src/App.js

@@ -31,14 +31,14 @@ export default function App() {
       <Switch>
         <Route exact path="/" component={LoginPage} />
         <AuthRoute path="/conference" component={ConferenceButton} />
-        <AuthRoute path="/questionlist" component={QuestionListPage} />
-        <Route path="/question/:id" component={QuestionPage} />
         <Route path="/room/:roomID" component={ConferenceRoom} />
         <Wrapper>
           {!toggleTrain && <Sidebar />}
           {!toggleTrain && <ProfileMenuContainer name={name} />}
-          <AuthRoute exact path="/self-training" component={SelfTrainPage} />
-          <AuthRoute exact path="/self-checklist" component={AloneQuestionCheckList} />
+          <AuthRoute exact path="/questionlist" component={QuestionListPage} />
+          <AuthRoute path="/question/:id" component={QuestionPage} />
+          <AuthRoute path="/self-training" component={SelfTrainPage} />
+          <AuthRoute path="/self-checklist" component={AloneQuestionCheckList} />
         </Wrapper>
         <Route component={NotFound} />
       </Switch>

src/components/AuthRoute/AuthRoute.js

@@ -2,8 +2,8 @@ import React, { useEffect } from 'react';
 import { Route, Redirect } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
-import { get } from '../../utils/snippet';
-import { setLogin } from '../../store/Auth/auth';
+import { get } from '@utils/snippet';
+import { setLogin } from '@store/Auth/auth';
 
 export default function AuthRoute({ component: Component, render, ...rest }) {
   const dispatch = useDispatch();

src/components/CamView/ButtonGroup.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import styled from 'styled-components';
 
-import Icon from '../Icon';
+import Icon from '@components/Icon';
 
 const Wrapper = styled.div`
   width: 219px;

src/components/ConferenceButton/ConferenceButton.js

@@ -5,7 +5,7 @@ import { v1 as uuid } from 'uuid';
 import { useDispatch } from 'react-redux';
 import { showModal, hideModal } from '@store/Modal/modal';
 import { MODALS } from '@utils/constant';
-import Modal from '../Modal/Modal';
+import Modal from '@components/Modal/Modal';
 
 export default function ConferenceButton({ history }) {
   const dispatch = useDispatch();

src/components/Modal/Modal.js

@@ -3,7 +3,6 @@ import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { MODALS } from '@utils/constant';
 import QuestionListSaveModal from './QuestionListSaveModal';
-import { MODALS } from '../../utils/constant';
 import SelfTrainStartModal from './SelfTrainStartModal';
 import ModalWrapper from './ModalWrapper';
 

src/components/Modal/Modal.stories.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { configureStore, combineReducers, createSlice } from '@reduxjs/toolkit';
 import Modal from './Modal';
-import { MODALS } from '../../utils/constant';
+import { MODALS } from '@utils/constant';
 
 const modalReducer = createSlice({
   name: 'modal',

src/components/Modal/ModalWrapper/ModalWrapper.js

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
-import { hideModal } from '../../../store/Modal/modal';
+import { hideModal } from '@store/Modal/modal';
 
 const Background = styled.div`
   position: fixed;

src/components/Modal/QuestionListSaveModal/QuestionListSaveModal.js

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { useDispatch, useSelector } from 'react-redux';
-import { hideModal, showModal } from '../../../store/Modal/modal';
-import InputBar from '../../InputBar';
-import Button from '../../Button';
-import { postQuestionListAPI, postQuestionItemAPI } from '../../../repository/questionListRepository';
-import { get } from '../../../utils/snippet';
-import { MODALS } from '../../../utils/constant';
+import { hideModal, showModal } from '@store/Modal/modal';
+import InputBar from '@components/InputBar';
+import Button from '@components/Button';
+import { postQuestionListAPI, postQuestionItemAPI } from '@repository/questionListRepository';
+import { get } from '@utils/snippet';
+import { MODALS } from '@utils/constant';
 
 const Wrapper = styled.div`
   display: flex;

src/components/Modal/SelfTrainStartModal/SelfTrainStartModal.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 import { useDispatch } from 'react-redux';
-import Button from '../../Button';
-import Icon from '../../Icon';
-import { hideModal } from '../../../store/Modal/modal';
-import { MODALS } from '../../../utils/constant';
-import { ResetQuestions } from '../../../store/Question/question';
+import Button from '@components/Button';
+import Icon from '@components/Icon';
+import { hideModal } from '@store/Modal/modal';
+import { MODALS } from '@utils/constant';
+import { ResetQuestions } from '@store/Question/question';
 
 const Wrapper = styled.div`
     display: flex;

src/components/ProfileInfoContainer/ProfileInfoContainer.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 import profileExample from '@assets/images/profile_example.png';
-import ProfileIcon from '../ProfileIcon';
+import ProfileIcon from '@components/ProfileIcon';
 
 const Wrapper = styled.div`
   height: 73px;

src/components/ProfileMenuContainer/ProfileMenuContainer.js

@@ -8,8 +8,8 @@ import { useDispatch } from 'react-redux';
 import profileExample from '@assets/images/profile_example.png';
 import { setLogout } from '@store/Auth/auth';
 
-import Icon from '../Icon';
-import ProfileIcon from '../ProfileIcon';
+import Icon from '@components/Icon';
+import ProfileIcon from '@components/ProfileIcon';
 
 const Wrapper = styled.div`
   @media only screen and (max-width: 480px) {

src/components/Question/QuestionItem/QuestionItem.js

@@ -3,12 +3,20 @@ import React, { useRef, useState } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import Icon from '../../Icon';
+import Icon from '@components/Icon';
+import { deleteQuestionItemAPI } from '@repository/questionListRepository';
+
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  width: 1158px;
+`;
 
 const QuestionCard = styled.div`
   position: relative;
   display: flex;
-  width: 1158px;
+  width: 1118px;
   height: 60px;
   margin: 5px;
   border-radius: 10px;
@@ -53,8 +61,8 @@ const IconWrapper = styled.span`
 `;
 
 const AnswerBox = styled.div`
-  width: 1153px;
-  margin: 5px;
+  width: 1110px;
+  margin: 5px 5px 5px 40px;
   display: ${({ clicked }) => (clicked ? 'block' : 'none')};
   overflow: hidden;
   box-shadow: 0 6px 24px 0 rgba(4, 4, 161, 0.04);
@@ -125,16 +133,25 @@ export default function QuestionItem({
     setClicked(!clicked);
   };
 
+  const handleDelete = () => {
+    deleteQuestionItemAPI(id).then(()=>{
+      window.location.reload(false);
+    })
+  }
+
   return (
     <>
       <div ref={ref} isDragging={isDragging}>
-        <QuestionCard onClick={handleTitleClick} clicked={clicked}>
-          <QusetionSymbol clicked={clicked}>Q</QusetionSymbol>
-          <TitleText clicked={clicked}>{title}</TitleText>
-          <IconWrapper clicked={clicked}>
-            <Icon type={clicked ? 'drop_up' : 'drop_down'} alt="" />
-          </IconWrapper>
-        </QuestionCard>
+        <Wrapper>
+          <Icon type="remove" alt="" func={handleDelete}/>
+          <QuestionCard onClick={handleTitleClick} clicked={clicked}>
+            <QusetionSymbol clicked={clicked}>Q</QusetionSymbol>
+            <TitleText clicked={clicked}>{title}</TitleText>
+            <IconWrapper clicked={clicked}>
+              <Icon type={clicked ? 'drop_up' : 'drop_down'} alt="" />
+            </IconWrapper>
+          </QuestionCard>
+        </Wrapper>
         <AnswerBox clicked={clicked}>
           <ContenText onChange={(e) => handleQuestion(e, title)} value={text} />
         </AnswerBox>

src/components/Question/QuestionList/QuestionList.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import update from 'immutability-helper';
 import PropTypes from 'prop-types';
-import QuestionItem from '../QuestionItem';
+import QuestionItem from '@components/Question/QuestionItem';
 
 export default function QuestionList({ questions, setQuestions }) {
   const moveCard = useCallback((dragIndex, hoverIndex) => {

src/components/QuestionCardView/QuestionCardView.js

@@ -1,8 +1,11 @@
 import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import Icon from '../Icon';
-
+import Icon from '@components/Icon';
+import { deleteQuestionListAPI, getQuestionListAPI } from '@repository/questionListRepository';
+import { SetReload } from '@store/Question/question';
 const Box = styled.div`
   position: relative;
   width: 334px;
@@ -14,10 +17,20 @@ const Box = styled.div`
   box-sizing: content-box;
   user-select: none;
   cursor: pointer;
+  z-index: 9;
 `;
 
 const Content = styled.div`
-  padding: 26px 41px;
+  padding: 0 41px;
+`;
+
+const IconBox = styled.div`
+  width: 20px;
+  height: 7px;
+  margin: 23px 26px 0 0;
+  margin-left: auto;
+  background-color: red;
+  z-index: 10;
 `;
 
 const Number = styled.div`
@@ -114,17 +127,66 @@ const StyledIcon = styled.div`
   left: -18px;
 `;
 
-export default function QuestionCardView({ number, title, description }) {
-  const [clicked, setClicked] = useState(false);
+const Delete = styled.div`
+  display: flex;
+  align-items: center;
+  position: absolute;
+  left: 165px;
+  top: 40px;
+  width: 143px;
+  height: 86px;
+  border-radius: 10px;
+  box-shadow: 0 12px 24px 0 rgba(4, 4, 161, 0.15);
+  background-color: #ffffff;
+  z-index: 1000;
+`;
+
+const DeleteText = styled.div`
+  margin-left: 28px;
+  font-family: AppleSDGothicNeoM00;
+  font-size: 20px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.3;
+  letter-spacing: normal;
+  text-align: left;
+  color: #f2886b;
+`;
 
-  const handleButtonClick = () => {
-    setClicked(!clicked);
+export default function QuestionCardView({ id, number, title, description, handleDelete }) {
+  const dispatch = useDispatch();
+  const [clicked, setClicked] = useState(false);
+  const history = useHistory();
+  const handleClick = (e) => {
+    if (e.target === e.currentTarget) {
+      setClicked(!clicked);
+    }
   };
+
+  const handleMove = (e) => {
+    if (e.target === e.currentTarget) {
+      console.log("bye");
+      history.push(`/question/${id}`);
+    }
+  }
+
+
+
   return (
     <>
-      <Box onClick={handleButtonClick} clicked={clicked}>
-        {clicked && (<StyledIcon><Icon type="check_on" alt="" /></StyledIcon>)}
-        <Content>
+      <Box onClick={handleMove}>
+      <IconBox onClick={handleClick} />
+        <Content onClick={handleMove}>
+          { clicked && (
+              <Delete onClick={(e)=>handleDelete(e, id)}>
+                <DeleteText>
+                  삭제
+                </DeleteText>
+              </Delete>
+          )}
+
+          {/* <Icon type="check_on" alt="" /> */}
           <Number>
             <NumberText>{number}</NumberText>
             <SubText>
@@ -142,7 +204,9 @@ export default function QuestionCardView({ number, title, description }) {
           </Title>
           <SubTitle>{description}</SubTitle>
         </Content>
+
       </Box>
+
     </>
   );
 }

src/components/Sidebar/SidebarButton/SidebarButton.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 import PropTypes from 'prop-types';
 
-import Icon from '../../Icon';
+import Icon from '@components/Icon';
 
 const Wrapper = styled.button`
   width: ${({ hover }) => (hover ? 296 : 159)}px;

src/components/StudyCardView/StudyCardView.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import Icon from '../Icon/Icon';
+import Icon from '@components/Icon';
 
 const Box = styled.div`
   width: 374px;

src/pages/LoginPage/LoginPage.js

@@ -142,7 +142,7 @@ export default function LoginPage() {
 
   return (
     <Wrapper>
-      {authSelector.isLogin && <Redirect to="/self-training" />}
+      {authSelector.isLogin && <Redirect to="/questionlist" />}
       <WrapContent>
         <img src={witherviewLogo} alt="logo" />
         <WrapSubTitle>

src/pages/QuestionListPage/IsQuestionList/IsQuestionList.js

@@ -47,7 +47,7 @@ const AddText = styled.div`
   color: #0c0c59;
 `;
 
-export default function IsQuestionList({ questionList }) {
+export default function IsQuestionList({ questionList, handleDelete }) {
   return (
     <>
       <Wrapper>
@@ -70,13 +70,14 @@ export default function IsQuestionList({ questionList }) {
           });
           return (
             <ItemWrapper>
-              <Link to={`/question/${val.id}`} style={{ textDecoration: 'none' }}>
                 <QuestionCardView
+                  id={val.id}
                   number={count}
                   title={val.title}
                   description={val.enterprise}
+                  questionList={questionList}
+                  handleDelete={handleDelete}
                 />
-              </Link>
             </ItemWrapper>
           );
         })}