Search Page - Pagination

* Pagination 구현
* 에러 : 최근 검색어 및 초기 기본값 출력
* 원인 : 리덕스에 Keyword를 직접 대입하는 방식이 문제 -> 이후 수정 예정

- 작성자 : 강하연
- 작성일 : 2022-03-07

Front/src/components/atoms/SearchForm/SearchForm.tsx

@@ -1,11 +1,11 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import axios from "axios";
 import { useDispatch } from 'react-redux';
 import styled from "@emotion/styled";
 import SearchIcon from "@mui/icons-material/Search";
 import { getAccessToken } from '../../../helpers/tokenControl';
 import { updateMenuItems } from '../../../features/shopFeatures/updateMenuItemsSlice';
-import { updateKeywords, updatePageTotalNum } from '../../../features/shopFeatures/updateKeywordsSlice';
+import { updateKeywords, updatePageTotalNum, updateKeyword } from '../../../features/shopFeatures/updateKeywordsSlice';
 
 const BASE_URL = "http://54.180.134.20";
 
@@ -34,6 +34,7 @@ const SearchForm: React.FC = () => {
 
  setBtnOn(true);
  dispatch(updateKeywords(true));
+ dispatch(updateKeyword(word));
  }
 
  return (

Front/src/components/organisms/Search/SearchCards.tsx

@@ -1,23 +1,66 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 import styled from "@emotion/styled";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import { Link } from "react-router-dom";
 import { RootState } from "../../../app/store";
 import { initialCards } from '../../../features/shopFeatures/updateMenuItemsSlice';
+import { updateKeyword } from '../../../features/shopFeatures/updateKeywordsSlice';
+
+type shopsDataType = {
+ id: number;
+ name: string;
+ image: string;
+ discountedPrice: number;
+ price: number;
+ shopId: number;
+ shopName: string;
+ shopCategory: Array<string>;
+};
 
 // 할인율 계산
 const calculatedDiscount = (price: number, discountedPrice: number): number => {
  return Math.ceil((1 - discountedPrice / price) * 100);
 };
 
-const SearchCards:React.FC = () => {
- const searchItems = useSelector((state: RootState) => {
+interface menuMatchType {
+ // eslint-disable-next-line react/require-default-props
+ menuPaginationNumber: number;
+}
+
+const SearchCards:React.FC<menuMatchType> = ({ menuPaginationNumber,}) => {
+ const [searchItems, setSearchItems] = useState<shopsDataType[]>([]);
+ const dispatch = useDispatch();
+ /*
+ const searchItems = useSelector((state: RootState) => {
  return state.updateMenuItems;
  })
-
+ */
+ const Keyword = useSelector((state: RootState) => {
+ return state.updateKeywords;
+ })
+
+ const SEARCH_BOARD_API_BASE_URL = `http://54.180.134.20/api/search?keyword=${
+ Keyword.keyword}&page=${menuPaginationNumber - 1}`;
+
+ const BoardService = () => {
+ return axios.get(SEARCH_BOARD_API_BASE_URL);
+ };
+
+ useEffect(() => {
+ BoardService().then(
+ (res) => {
+ setSearchItems(res.data.data.products); // api가 연결 된 경우 -> back에서 데이터 불러옴
+ },
+ (error) => {
+ console.error(error);
+ }
+ );
+ }, [menuPaginationNumber, Keyword]);
+
  return (
  <Wrapper>
- { (searchItems!==initialCards) ? (
+ { (searchItems) ? (
  searchItems.map((row) => (
  <div key={row.shopId}>
  <Link

Front/src/features/shopFeatures/updateKeywordsSlice.ts

@@ -3,11 +3,13 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 export type Type = {
  check: boolean;
  totalNum: number;
+ keyword: string;
 };
 
 export const initialType: Type = {
  check: false,
  totalNum: 0,
+ keyword: "",
 };
 
 export const updateKeywordsSlice = createSlice({
@@ -23,10 +25,15 @@ export const updateKeywordsSlice = createSlice({
  const type = state;
  type.totalNum = action.payload;
  return state;
+ },
+ updateKeyword: (state, action: PayloadAction<string>) => {
+ const type = state;
+ type.keyword = action.payload;
+ return state;
  }
  },
 });
 
-export const { updateKeywords, updatePageTotalNum } = updateKeywordsSlice.actions;
+export const { updateKeywords, updatePageTotalNum, updateKeyword } = updateKeywordsSlice.actions;
 
 export default updateKeywordsSlice.reducer;

Front/src/pages/Search/SearchPage.tsx

@@ -22,9 +22,9 @@ const Search: React.FC = () => {
  useEffect(() => {
  const pageCount = Math.ceil(totalNum.totalNum / 10);
  setPaginationCount(pageCount);
- }, []);
+ }, [totalNum]);
 
- console.log(page);
+ console.log("paginationCount", paginationCount);
 
  return (
  <>
@@ -35,7 +35,9 @@ const Search: React.FC = () => {
  isSection={false}
  isFooter={false}
  >
- <SearchCards />
+ <SearchCards
+ menuPaginationNumber={page}
+ />
  <Pagination
  css={paginationStyle}
  count={paginationCount}

Front/src/pages/ShopMenu/ShopMenuPage.tsx

@@ -62,7 +62,6 @@ const ShopMenuPage: React.FC<RouteComponentProps<matchParams>> = ({
  .catch((error) => {
  console.error(error);
  });
- console.log("paginationCount", paginationCount);
  }, [match]);
 
  return (