Merge pull request #22 from Youngseo-kangg/feature/redux

[Client] #1 Feature/redux : redux 기본 세팅 및 기초 작성

client/package.json

@@ -10,7 +10,9 @@
     "dotenv": "^10.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.5",
     "react-scripts": "4.0.3",
+    "redux": "^4.1.1",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

client/src/actions/index.js

@@ -0,0 +1,43 @@
+// 어떤 행동을 할지 정의해 둘 actions
+export const SET_LOGIN_STATE = 'SET_LOGIN_STATE'; // 로그인 상태 변경(=로그인)
+export const SET_LOGOUT_STATE = 'SET_LOGOUT_STATE'; // 로그아웃 상태 변경
+export const EDIT_USERINFO = 'EDIT_USERINFO'; // 유저 정보(=이름, 비밀번호, 사진) 변경하기
+export const SET_MODAL_LOGINORSIGNUP = 'SET_MODAL_LOGINORSIGNUP'; // 로그인or회원가입 모달 상태
+export const SET_MODAL_QUIZ = 'SET_MODAL_QUIZ'; // 퀴즈 모달 상태
+export const SET_MODAL_SIGNOUT = 'SET_MODAL_SIGNOUT'; // 회원탈퇴 모달 상태
+export const SET_MODAL_LOGOUT = 'SET_MODAL_LOGOUT'; // 로그아웃 모달 상태
+export const SET_MODAL_CHART = 'SET_MODAL_CHART'; // 차트 모달 상태
+
+export const SET_USER_CONTENT = 'SET_USER_CONTENT'; // 유저가 쓴 글 받아오기
+export const DELETE_CONTENT = 'DELETE_CONTENT'; // 유저가 쓴 글 삭제
+export const EDIT_CONTENT = 'EDIT_CONTENT'; // 유저가 쓴 글 수정
+
+export const setLogin = (userData, isLogin) => {
+  return {
+    type: SET_LOGIN_STATE,
+    userData,
+    isLogin,
+  };
+};
+
+export const getContent = (userContent) => {
+  return {
+    type: SET_USER_CONTENT,
+    userContent,
+  };
+};
+
+export const deleteContent = (contentId) => {
+  return {
+    type: DELETE_CONTENT,
+    contentId,
+  };
+};
+
+export const editContent = (contentId, wordMean) => {
+  return {
+    type: EDIT_CONTENT,
+    contentId,
+    wordMean,
+  };
+};

client/src/components/BestSearch.js

@@ -0,0 +1 @@
+// Chart 안에 실시간 순위 그래프 보여질 부분

client/src/components/Chart.js

@@ -0,0 +1 @@
+// 실시간 순위 보여질 부분

client/src/components/EditUserInfo.js

@@ -0,0 +1 @@
+// EditMyPage에서 유저 정보 변경하는 부분

client/src/components/EditUserPic.js

@@ -0,0 +1 @@
+// EditMyPage에서 사진 변경 일어나는 부분

client/src/components/LandingQuiz.js

@@ -0,0 +1 @@
+// 랜딩페이지에서 맛보기로 제공될 퀴즈

client/src/components/Search.js

@@ -0,0 +1 @@
+// 메인페이지에서 입력창, 입력창 자동완성, 과거 검색기록, 검색결과 보여질 부분

client/src/components/SearchAutoComp.js

@@ -0,0 +1 @@
+// Search에서 자동완성 창

client/src/components/SearchHistory.js

@@ -0,0 +1 @@
+// 과거 검색결과 보관

client/src/components/SearchInput.js

@@ -0,0 +1 @@
+// Search에서 검색창 부분

client/src/components/SearchResult.js

@@ -0,0 +1 @@
+// Search에서 검색 후 좋아요 순으로 3개만 보여지는 부분

client/src/components/UserContents.js

@@ -0,0 +1 @@
+// Mypage에서 유저가 쓴 글 목록

client/src/components/UserInfo.js

@@ -0,0 +1 @@
+// Mypage 안에서 유저 정보 나타날 부분

client/src/modals/ChartModal.js

@@ -0,0 +1 @@
+// 실시간 순위 그래프 나타날 모달

client/src/modals/EditContent.js

@@ -0,0 +1 @@
+// 사용자가 쓴 글 수정하는 모달

client/src/modals/LoginOrSignUp.js

@@ -0,0 +1 @@
+// 로그인 / 회원가입 모달

client/src/modals/Logout.js

@@ -0,0 +1 @@
+// 로그아웃 모달

client/src/modals/NewContent.js

@@ -0,0 +1 @@
+// 사용자가 새로운 글을 쓰는 모달

client/src/modals/Quiz.js

@@ -0,0 +1 @@
+// 오늘의 퀴즈 부분

client/src/modals/SignOut.js

@@ -0,0 +1 @@
+// 회원 탈퇴 모달

client/src/pages/EditMyPage.js

@@ -0,0 +1 @@
+// 개인정보 변경 페이지

client/src/pages/Footer.js

@@ -0,0 +1 @@
+// footer 부분

client/src/pages/Main.js

@@ -0,0 +1 @@
+// main 페이지 (검색 및 검색결과 보기 페이지)

client/src/pages/Mypage.js

@@ -0,0 +1 @@
+// 개인정보 확인 및 작성한 글 보이는 페이지

client/src/pages/Navbar.js

@@ -0,0 +1 @@
+// Navbar 부분

client/src/pages/SearchMore.js

@@ -0,0 +1 @@
+// 검색결과 전체 보여지는 페이지

client/src/reducers/index.js

@@ -0,0 +1,11 @@
+// reducer들을 한번에 정리
+import { combineReducers } from 'redux';
+import userInfoReducer from './userInfoReducer';
+import userContentReducer from './userContentReducer';
+
+const rootReducer = combineReducers({
+  userInfoReducer,
+  userContentReducer,
+});
+
+export default rootReducer;

client/src/reducers/userContentReducer.js

@@ -0,0 +1,39 @@
+// 유저가 쓴 글 관리 reducer
+// 기본값: 유저가 작성한 글
+// 기능 : 유저가 쓴 글 받아오기, 유저가 쓴 글 삭제, 유저가 쓴 글 수정
+
+import {
+  SET_USER_CONTENT,
+  DELETE_CONTENT,
+  EDIT_CONTENT,
+} from '../actions/index';
+
+const defaultUserContentInfo = {
+  data: [],
+};
+
+const userContentReducer = (state = defaultUserContentInfo, action) => {
+  switch (action.type) {
+    case SET_USER_CONTENT: // 유저가 쓴 글 다 받아오기
+      return { ...action.payload };
+
+    case DELETE_CONTENT: // 유저가 쓴 글 제거하는 reducer, payload로 contentId 들어옴
+      let saveContents = state.data.filter(
+        (ele) => ele.id !== action.payload.contentId
+      );
+      return Object.assign({}, { data: [...saveContents] });
+
+    case EDIT_CONTENT:
+      let editData = state.data.filter(
+        (ele) => ele.id === action.payload.contentId
+      );
+      editData.wordMean = action.payload.wordMean;
+      return Object.assign({}, { data: [...state.data] });
+
+    default:
+      // 기본 reducer
+      return state;
+  }
+};
+
+export default userContentReducer;

client/src/reducers/userInfoReducer.js

@@ -0,0 +1,41 @@
+// 유저의 개인정보 및 모달 닫/열림 상태 관리 reducer
+// 기본값: 개인 정보 (username, email, userPic, exp), 로그인 상태, 모달 상태(로그인, 로그아웃, …)
+// 기능 : 로그인하기, 유저 이름/비밀번호/사진 변경, 모달 켜기/끄기, 로그아웃하기, 회원 탈퇴하기
+
+import { SET_LOGIN_STATE, SET_LOGOUT_STATE } from '../actions/index';
+
+const defaultUserInfo = {
+  userInfo: {
+    id: -1,
+    email: '',
+    username: '',
+    userPic: null,
+    exp: 0,
+  }, // 기본 유저 정보
+  isLogin: false, //로그인 상태
+  isShowLoginOrSignupModal: false, // 로그인or회원가입 모달 상태
+  isShowQuizModal: false, // 퀴즈 모달 상태
+  isShowSignoutModal: false, // 회원탈퇴 모달 상태
+  isShowLogoutModal: false, // 로그아웃 모달 상태
+  isShowChartModal: false, // 차트 모달 상태
+};
+
+const userInfoReducer = (state = defaultUserInfo, action) => {
+  switch (action.type) {
+    case SET_LOGIN_STATE: // 로그인 reducer
+      return {
+        ...state,
+        userInfo: action.userData,
+        isLogin: action.isLogin,
+      };
+    case SET_LOGOUT_STATE: // 로그아웃 reducer
+      return {
+        ...defaultUserInfo,
+      };
+    default:
+      // 기본 reducer
+      return state;
+  }
+};
+
+export default userInfoReducer;

client/src/store/store.js

@@ -0,0 +1,14 @@
+// react-redux에서 상태들을 갖고있을 store
+import { compose, createStore, applyMiddleware } from 'redux';
+import rootReducer from '../reducers/index';
+import thunk from 'redux-thunk';
+
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+  ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
+  : compose;
+const store = createStore(
+  rootReducer,
+  composeEnhancers(applyMiddleware(thunk))
+);
+
+export default store;