[Feat]::Reservation List control redux add #90

package.json

@@ -20,6 +20,7 @@
     "recoil": "^0.5.2",
     "recoil-persist": "^4.0.0",
     "redux": "^4.1.2",
+    "redux-devtools-extension": "^2.13.9",
     "redux-persist": "^6.0.0",
     "styled-components": "^5.3.3",
     "web-vitals": "^1.1.2"

src/Components/Detail/Reservation/Step1.jsx

@@ -9,7 +9,7 @@ import { ReactComponent as Id } from '../../../Assets/Icons/Id.svg';
 import Colors from '../../../Assets/Colors/Colors';
 import { friendsState } from '../../../Recoil/Reservation';
 import Button from '../../Common/Button';
-import { addList } from '../../../module/redux/reservation';
+import { addList, clearList, delList } from '../../../module/redux/reservation';
 
 const Container = styled.div`
   width: 100%;
@@ -98,8 +98,11 @@ const NoneInfo = styled.p`
 `;
 
 const Step1 = ({ increasePageFunc }) => {
+  // dispatch 를 사용하여 redux 에서 값을 변경하도록 함.
   const dispatch = useDispatch();
-  const list = useSelector(state => state.reservation);
+  // list 목록을 불러오는 selector
+  const FriendsList = useSelector(state => state.reservation);
+  // 입력된 사람을 저장하는 people state
   const [people, setpeople] = useState('');
   const [Friends, setFriends] = useState([]);
   const [Active, setActive] = useState(true);
@@ -110,31 +113,30 @@ const Step1 = ({ increasePageFunc }) => {
 
   const changeList = e => {
     if (e.keyCode === 13 && people) {
-      console.log(Friends);
-      setFriends([...Friends, { username: people }]);
-      dispatch(addList(Friends));
+      dispatch(addList(people));
       setpeople('');
       e.target.value = '';
     }
   };
 
   const checkList = () => {
-    if (Friends.length === 0) {
+    if (FriendsList.length === 0) {
       setActive(true);
     } else {
       setActive(false);
     }
   };
 
   useEffect(() => {
+    // DOM 이 생성되고, 사라질 때 return 문 실행
     checkList();
-  }, [Friends]);
+    return dispatch(clearList());
+  }, [FriendsList]);
 
   // 삭제 로직
   const delItem = e => {
-    setFriends(
-      Friends.filter(friend => friend.username !== e.target.innerHTML),
-    );
+    dispatch(delList(e.target.innerHTML));
+    // console.log(FriendsList);
   };
 
   return (
@@ -151,12 +153,12 @@ const Step1 = ({ increasePageFunc }) => {
           />
         </InputBox>
         <Tags>
-          {Friends.length === 0 ? (
+          {FriendsList.length === 0 ? (
             <Tags>
               <NoneInfo>현재 태그된 계정이 없습니다.</NoneInfo>
             </Tags>
           ) : (
-            Friends.map(tag => (
+            FriendsList.map(tag => (
               <Tag onClick={delItem}>
                 <span>{tag.username}</span>
               </Tag>
@@ -165,7 +167,7 @@ const Step1 = ({ increasePageFunc }) => {
         </Tags>
         <Info>
           <p>현재 입력된 인원</p>
-          <p>{Friends.length} 명</p>
+          <p>{FriendsList.length} 명</p>
         </Info>
       </Container>
       <Button Content="확인" ClickFunc={increasePageFunc} Disabled={Active} />

src/index.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { createStore } from 'redux';
+import { composeWithDevTools } from 'redux-devtools-extension';
 import { persistStore } from 'redux-persist';
 import { PersistGate } from 'redux-persist/integration/react';
 
@@ -16,9 +17,7 @@ import rootReducer from './module/redux';
 axios.defaults.xsrfCookieName = 'csrftoken';
 axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN';
 
-const devTools =
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
-const store = createStore(rootReducer, devTools);
+const store = createStore(rootReducer, composeWithDevTools());
 const persistor = persistStore(store);
 
 ReactDOM.render(

src/module/redux/reservation.jsx

@@ -1,21 +1,28 @@
 // 액션 정의
-const ADDLIST = 'reservation/ADDLIST';
-const DELLIST = 'reservation/DELLIST';
+const CLEAR_LIST = 'reservation/CLEAR_LIST';
+const ADD_LIST = 'reservation/ADD_LIST';
+const DEL_LIST = 'reservation/DEL_LIST';
 
 // 액션 생성
-export const addList = data => ({ type: ADDLIST, payload: data });
-export const delList = data => ({ type: DELLIST, payload: data });
+export const clearList = () => ({ type: CLEAR_LIST });
+export const addList = data => ({ type: ADD_LIST, payload: data });
+export const delList = data => ({ type: DEL_LIST, payload: data });
 
 // 초기 state
-const initialState = [];
+const initialState = '';
+let friends = [];
 
 const reservation = (state = initialState, action) => {
   switch (action.type) {
-    case ADDLIST:
-      console.log(action.data);
-      return action.data;
-    case DELLIST:
-      return action.data;
+    case ADD_LIST:
+      friends.push({ username: action.payload });
+      return friends;
+    case DEL_LIST:
+      friends = friends.filter(friend => friend.username !== action.payload);
+      return friends;
+    case CLEAR_LIST:
+      friends = [];
+      return friends;
     default:
       return state;
   }

yarn.lock

@@ -9673,6 +9673,11 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+redux-devtools-extension@^2.13.9:
+  version "2.13.9"
+  resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz#6b764e8028b507adcb75a1cae790f71e6be08ae7"
+  integrity sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A==
+
 redux-persist@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8"