diff --git a/package.json b/package.json
index 8e7b720..67626af 100644
--- a/package.json
+++ b/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"
diff --git a/src/Components/Detail/Reservation/Step1.jsx b/src/Components/Detail/Reservation/Step1.jsx
index 6ef818f..a97a0d9 100644
--- a/src/Components/Detail/Reservation/Step1.jsx
+++ b/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,16 +113,14 @@ 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);
@@ -127,14 +128,15 @@ const Step1 = ({ increasePageFunc }) => {
};
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 }) => {
/>
- {Friends.length === 0 ? (
+ {FriendsList.length === 0 ? (
현재 태그된 계정이 없습니다.
) : (
- Friends.map(tag => (
+ FriendsList.map(tag => (
{tag.username}
@@ -165,7 +167,7 @@ const Step1 = ({ increasePageFunc }) => {
현재 입력된 인원
- {Friends.length} 명
+ {FriendsList.length} 명
diff --git a/src/index.jsx b/src/index.jsx
index 6f12015..28a097d 100644
--- a/src/index.jsx
+++ b/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(
diff --git a/src/module/redux/reservation.jsx b/src/module/redux/reservation.jsx
index 0aa2888..207b1b4 100644
--- a/src/module/redux/reservation.jsx
+++ b/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;
}
diff --git a/yarn.lock b/yarn.lock
index aeefdef..6eebf40 100644
--- a/yarn.lock
+++ b/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"