From 35e1564dbc9660f1cf60a2851242875977d1b3cc Mon Sep 17 00:00:00 2001
From: HyunJungJo98 <kchwoonn0827@naver.com>
Date: Thu, 24 Mar 2022 23:27:22 +0900
Subject: [PATCH] =?UTF-8?q?[#57]Refactor:=EC=B5=9C=EC=A0=81=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../EventPage/EventMovieThumbnail.js          |  9 +-
 .../src/components/EventPage/EventPage.js     | 97 +++++--------------
 .../src/components/EventPage/Events.js        | 16 ---
 .../InformationShares/InformationSharePage.js | 12 +--
 .../InformationShares/InformationShares.js    |  7 +-
 .../src/components/MainContent/MainContent.js |  5 +-
 .../src/components/TopBar/LogIn.js            |  5 -
 .../TransactionPage/TransactionDetail.js      |  3 -
 .../TransactionPage/TransactionPage.js        | 68 ++++---------
 9 files changed, 58 insertions(+), 164 deletions(-)

diff --git a/frontend/sweet-red-beans/src/components/EventPage/EventMovieThumbnail.js b/frontend/sweet-red-beans/src/components/EventPage/EventMovieThumbnail.js
index b2c8e1c..450897f 100644
--- a/frontend/sweet-red-beans/src/components/EventPage/EventMovieThumbnail.js
+++ b/frontend/sweet-red-beans/src/components/EventPage/EventMovieThumbnail.js
@@ -46,8 +46,7 @@ const EventMovieThumbnail = ({ event }) => {
                 <Link
                     to={`/event/${event.event_id}`}
                     style={{ textDecoration: 'none' }}
-                    className={style.thumbnailArea}
-                >
+                    className={style.thumbnailArea}>
                     <img src={event.thumbnail_url} />
                     <div>{event.title}</div>
                     <div>
@@ -58,13 +57,11 @@ const EventMovieThumbnail = ({ event }) => {
                 {status ? (
                     <button
                         onClick={likeClick}
-                        className={style.likeOnButton}
-                    ></button>
+                        className={style.likeOnButton}></button>
                 ) : (
                     <button
                         onClick={likeClick}
-                        className={style.likeOffButton}
-                    ></button>
+                        className={style.likeOffButton}></button>
                 )}
             </div>
         </>
diff --git a/frontend/sweet-red-beans/src/components/EventPage/EventPage.js b/frontend/sweet-red-beans/src/components/EventPage/EventPage.js
index 28a0595..7d4f259 100644
--- a/frontend/sweet-red-beans/src/components/EventPage/EventPage.js
+++ b/frontend/sweet-red-beans/src/components/EventPage/EventPage.js
@@ -1,21 +1,9 @@
 import React, { useCallback, useEffect, useState, useMemo } from 'react';
-import { Routes, Route } from 'react-router';
-import { Link } from 'react-router-dom';
-import EventDetailPage from './EventDetailPage';
-import { useNavigate } from 'react-router';
 import Events from './Events';
-import { useDispatch, useSelector, shallowEqual } from 'react-redux';
-import events from '../../actions/event_action';
-import { EVENT_ISEND, EVENT_SORT, EVENTS } from '../../actions/types';
-import axios from 'axios';
 import style from '../../css/EventPage/EventPage.module.css';
 
 const EventPage = () => {
-    let navigation = useNavigate();
-    const dispatch = useDispatch();
-
     const [events, setEvents] = useState([]);
-    const [eventIsHere, setEventIsHere] = useState(false);
     //검색 단어, 처음에 없음
     const [search, setSearch] = useState('');
     //검색했던 단어들 저장
@@ -35,46 +23,31 @@ const EventPage = () => {
         setSearch(e.target.value);
     };
 
-    //검색 버튼 눌렀을 때 다시 서버 요청
+    //검색 버튼 눌렀을 때
     const searchClick = () => {
         setSearchWords([...searchWords, search]);
         setSelecteds([...selecteds, selected]);
     };
 
-    //진행 중 클릭했을 때 다시 서버 요청
+    //진행 중 클릭했을 때
     const ongoingClick = () => {
+        console.log('진행중');
         setIsEnd(false);
-        dispatch({
-            type: EVENT_ISEND,
-            payload: false,
-        });
     };
 
-    //진행 완료 클릭했을 때 다시 서버 요청
+    //진행 완료 클릭했을 때
     const doneClick = () => {
         setIsEnd(true);
-        dispatch({
-            type: EVENT_ISEND,
-            payload: true,
-        });
     };
 
-    //최신순 클릭했을 때 다시 서버 요청
+    //최신순 클릭했을 때
     const recentClick = () => {
         setSort('최신순');
-        dispatch({
-            type: EVENT_SORT,
-            payload: '최신순',
-        });
     };
 
-    //관심도순 클릭했을 때 다시 서버 요청
+    //관심도순 클릭했을 때
     const interestClick = () => {
         setSort('관심도순');
-        dispatch({
-            type: EVENT_SORT,
-            payload: '관심도순',
-        });
     };
 
     //영화관 필터 바뀌었을 때
@@ -82,27 +55,6 @@ const EventPage = () => {
         setSelected(e.target.value);
     };
 
-    useEffect(() => {
-        // //처음에 기본으로 진행 중인 이벤트로 보여줌
-        // dispatch({
-        //     type:EVENT_ISEND,
-        //     payload:false,
-        // })
-        // //처음에 기본으로 최신순으로 보여줌
-        // dispatch({
-        //     type:EVENT_SORT,
-        //     payload:sort,
-        // })
-    }, []);
-
-    useEffect(() => {
-        // dispatch({
-        //     type:EVENTS,
-        //     events:events,
-        // });
-        setEventIsHere(true);
-    }, [events]);
-
     return (
         <>
             <div className={style.whiteBox}>
@@ -112,16 +64,14 @@ const EventPage = () => {
                             onClick={ongoingClick}
                             className={
                                 isEnd ? style.notSelected : style.selected
-                            }
-                        >
+                            }>
                             진행 중
                         </button>
                         <button
                             onClick={doneClick}
                             className={
                                 !isEnd ? style.notSelected : style.selected
-                            }
-                        >
+                            }>
                             진행 완료
                         </button>
                     </div>
@@ -132,8 +82,7 @@ const EventPage = () => {
                                 sort === '최신순'
                                     ? style.selected
                                     : style.notSelected
-                            }
-                        >
+                            }>
                             최신순
                         </button>
                         <button
@@ -142,8 +91,7 @@ const EventPage = () => {
                                 sort === '관심도순'
                                     ? style.selected
                                     : style.notSelected
-                            }
-                        >
+                            }>
                             관심도순
                         </button>
                     </div>
@@ -163,24 +111,25 @@ const EventPage = () => {
                             type="text"
                             placeholder="검색"
                             onChange={searchChange}
-                            value={search}
-                        ></input>
+                            value={search}></input>
                         <div className={style.underline}></div>
                         <button
                             id="searchButton"
-                            onClick={searchClick}
-                        ></button>
+                            onClick={searchClick}></button>
                     </div>
                 </div>
 
-                {
-                    <Events
-                        sort={sort}
-                        isEnd={isEnd}
-                        search_word={searchWords}
-                        cinema_name={selecteds}
-                    />
-                }
+                {useMemo(
+                    () => (
+                        <Events
+                            sort={sort}
+                            isEnd={isEnd}
+                            search_word={searchWords}
+                            cinema_name={selecteds}
+                        />
+                    ),
+                    [sort, isEnd, searchWords, selecteds]
+                )}
             </div>
         </>
     );
diff --git a/frontend/sweet-red-beans/src/components/EventPage/Events.js b/frontend/sweet-red-beans/src/components/EventPage/Events.js
index de735b6..ae9fa73 100644
--- a/frontend/sweet-red-beans/src/components/EventPage/Events.js
+++ b/frontend/sweet-red-beans/src/components/EventPage/Events.js
@@ -16,24 +16,8 @@ const Events = ({ sort, isEnd, search_word, cinema_name }) => {
     const offset = (page - 1) * limit;
 
     const [events, setEvents] = useState([]);
-    useEffect(() => {
-        const body = {
-            withCredentials: true,
-            params: {
-                sort_criteria: sort,
-                is_end: isEnd,
-            },
-        };
-
-        //처음에 진행 중, 최신순으로 요청
-        axios
-            .get('http://localhost:8080/events/search', body)
-            .then((response) => setEvents(response.data))
-            .catch((error) => console.log(error));
-    }, []);
 
     useEffect(() => {
-        console.log('!!!!!!!!!!!!!!!!!!');
         let body = {};
         if (cinema_name[cinema_name.length - 1] === '전체') {
             body = {
diff --git a/frontend/sweet-red-beans/src/components/InformationShares/InformationSharePage.js b/frontend/sweet-red-beans/src/components/InformationShares/InformationSharePage.js
index 341e1d5..80b12f6 100644
--- a/frontend/sweet-red-beans/src/components/InformationShares/InformationSharePage.js
+++ b/frontend/sweet-red-beans/src/components/InformationShares/InformationSharePage.js
@@ -176,8 +176,7 @@ const InformationSharePage = () => {
                         <div className={style.filter}>
                             <select
                                 onChange={cinemaAreaChange}
-                                value={cinemaArea}
-                            >
+                                value={cinemaArea}>
                                 {cinemaAreas.map((item) => (
                                     <option value={item} key={item}>
                                         {item}
@@ -192,8 +191,7 @@ const InformationSharePage = () => {
                         <div className={style.filter}>
                             <select
                                 onChange={cinemaBranchChange}
-                                value={cinemaBranch}
-                            >
+                                value={cinemaBranch}>
                                 {cinemaBranches.map((item) => (
                                     <option value={item} key={item}>
                                         {item}
@@ -221,13 +219,11 @@ const InformationSharePage = () => {
                             placeholder="검색"
                             onChange={searchChange}
                             value={search}
-                            size="5"
-                        ></input>
+                            size="5"></input>
                         <div className={style.underline}></div>
                         <button
                             id="searchButton"
-                            onClick={searchClick}
-                        ></button>
+                            onClick={searchClick}></button>
                     </div>
                 </div>
                 <InformationShares
diff --git a/frontend/sweet-red-beans/src/components/InformationShares/InformationShares.js b/frontend/sweet-red-beans/src/components/InformationShares/InformationShares.js
index 8c898a8..edc1c33 100644
--- a/frontend/sweet-red-beans/src/components/InformationShares/InformationShares.js
+++ b/frontend/sweet-red-beans/src/components/InformationShares/InformationShares.js
@@ -5,6 +5,7 @@ import style from '../../css/InformationSharePage/InformationShares.module.css';
 import { useSelector } from 'react-redux';
 import axios from 'axios';
 import { parseDate } from '../../parseDate/parseDate';
+import { useParams } from 'react-router';
 
 const InformationShares = ({
     searchWords,
@@ -18,6 +19,8 @@ const InformationShares = ({
     const [page, setPage] = useState(1);
     const offset = (page - 1) * limit;
 
+    const { pageNumber } = useParams();
+
     useEffect(() => {
         //처음에 최신순으로 요청
         console.log(searchWords, sort, cinemaName, cinemaArea, cinemaBranch);
@@ -35,6 +38,7 @@ const InformationShares = ({
         return () => {
             setInfos([]);
         };
+        console.log(pageNumber);
     }, []);
 
     useEffect(() => {
@@ -126,8 +130,7 @@ const InformationShares = ({
                         <article key={index}>
                             <Link
                                 to={`/informationShare/${item.post_id}`}
-                                style={{ textDecoration: 'none' }}
-                            >
+                                style={{ textDecoration: 'none' }}>
                                 <div>{item.title}</div>
                             </Link>
                             <div>
diff --git a/frontend/sweet-red-beans/src/components/MainContent/MainContent.js b/frontend/sweet-red-beans/src/components/MainContent/MainContent.js
index 1ad3285..631b9d6 100644
--- a/frontend/sweet-red-beans/src/components/MainContent/MainContent.js
+++ b/frontend/sweet-red-beans/src/components/MainContent/MainContent.js
@@ -8,6 +8,7 @@ import TopBar from '../TopBar/TopBar';
 import InformationSharePage from '../InformationShares/InformationSharePage';
 import InformationShareWritePage from '../InformationShares/InformationShareWritePage';
 import InformationShareDetailPage from '../InformationShares/InformationShareDetailPage';
+import InformationShares from '../InformationShares/InformationShares';
 import TransactionPage from '../TransactionPage/TransactionPage';
 import DMPage from '../DMPage/DMPage';
 import MyPageAdmin from '../MyPage/MyPageAdmin';
@@ -38,8 +39,8 @@ const MainContent = () => {
                     element={<InformationShareWritePage />}
                 />
                 <Route
-                    path="/informationShare/:postid"
-                    element={<InformationShareDetailPage />}
+                    path="/informationShare/:pageNumber"
+                    element={<InformationShares />}
                 />
                 <Route path="/transaction/*" element={<TransactionPage />} />
                 <Route path="/DM" element={<DMPage />} />
diff --git a/frontend/sweet-red-beans/src/components/TopBar/LogIn.js b/frontend/sweet-red-beans/src/components/TopBar/LogIn.js
index 371afac..954da80 100644
--- a/frontend/sweet-red-beans/src/components/TopBar/LogIn.js
+++ b/frontend/sweet-red-beans/src/components/TopBar/LogIn.js
@@ -65,11 +65,6 @@ const LogIn = () => {
                     alert('정지된 상태입니다. 관리자에게 문의해주세요.');
                     setModalOpen(false);
                 } else if (response.data.result) {
-                    // dispatch({
-                    //   type: LOGIN_USER,
-                    //   user: response.data,
-                    // })
-
                     const date = new Date();
                     date.setMinutes(date.getMinutes() + 30);
                     cookies.set('login', true, { expires: date });
diff --git a/frontend/sweet-red-beans/src/components/TransactionPage/TransactionDetail.js b/frontend/sweet-red-beans/src/components/TransactionPage/TransactionDetail.js
index b6597f9..b4359e9 100644
--- a/frontend/sweet-red-beans/src/components/TransactionPage/TransactionDetail.js
+++ b/frontend/sweet-red-beans/src/components/TransactionPage/TransactionDetail.js
@@ -245,9 +245,6 @@ const TransactionDetail = ({ transaction }) => {
 
                 <div className={style.statusArea}>
                     {transaction.is_mine ? (
-                        // <div onClick={statusClick} className={status==='진행중'?style.proceedingButton : style.doneButton}>
-                        //     <div>{status==='진행중'? "진행중" : "마감"}</div>
-                        // </div>
                         <label className={style.statusButton}>
                             <Switch
                                 onChange={statusClick}
diff --git a/frontend/sweet-red-beans/src/components/TransactionPage/TransactionPage.js b/frontend/sweet-red-beans/src/components/TransactionPage/TransactionPage.js
index 34bf8a2..93e1116 100644
--- a/frontend/sweet-red-beans/src/components/TransactionPage/TransactionPage.js
+++ b/frontend/sweet-red-beans/src/components/TransactionPage/TransactionPage.js
@@ -15,7 +15,6 @@ const TransactionPage = () => {
 
     const [modalOpen, setModalOpen] = useState(false);
     const [transactions, setTransactions] = useState([]);
-    const [transactionIsHere, setTransactionIsHere] = useState(false);
     const [search, setSearch] = useState('');
     const [searchWords, setSearchWords] = useState([]);
     //처음엔 전체로 보여줌, true이면 진행 중만 보여줌
@@ -35,9 +34,19 @@ const TransactionPage = () => {
     const [nickname, setNickname] = useState('');
     const [profileImage, setProfileImage] = useState('');
 
-    const [fetching, setFetching] = useState(false);
+    //한 번만 실행
+    useEffect(() => {
+        //내 프로필 조회
+        if (cookies.get('user')) {
+            setNickname(cookies.get('user').nickname);
+            setProfileImage(cookies.get('user').porfileImage);
+        } else {
+            setNickname('익명');
+            setProfileImage(userImage);
+        }
+    }, []);
 
-    const serverReq = () => {
+    useEffect(() => {
         axios
             .get('http://localhost:8080/transactions/search', {
                 withCredentials: true,
@@ -57,7 +66,8 @@ const TransactionPage = () => {
                 setEnd(29);
             })
             .catch((error) => console.log(error));
-    };
+        console.log(isProceed);
+    }, [isProceed, searchWords]);
 
     const searchChange = (e) => {
         setSearch(e.target.value);
@@ -216,49 +226,6 @@ const TransactionPage = () => {
         };
     });
 
-    //한 번만 실행
-    useEffect(() => {
-        axios
-            .get('http://localhost:8080/transactions/search', {
-                withCredentials: true,
-                params: {
-                    is_proceed: isProceed,
-                    search_word: search,
-                    sort_criteria: '최신순',
-                    search_criteria: searchSort,
-                    start: start,
-                    end: end,
-                },
-            })
-            .then((response) => {
-                setTransactions(response.data);
-            })
-            .catch((error) => console.log(error));
-
-        //내 프로필 조회
-        if (cookies.get('user')) {
-            setNickname(cookies.get('user').nickname);
-            setProfileImage(cookies.get('user').porfileImage);
-        } else {
-            setNickname('익명');
-            setProfileImage(userImage);
-        }
-    }, []);
-
-    useEffect(() => {
-        setTransactionIsHere(true);
-    }, [transactions]);
-
-    useEffect(() => {
-        serverReq();
-        console.log(isProceed);
-    }, [isProceed]);
-
-    useEffect(() => {
-        serverReq();
-        console.log(searchWords, searchSort);
-    }, [searchWords]);
-
     return (
         <>
             <div className={style.wrap}>
@@ -322,7 +289,12 @@ const TransactionPage = () => {
                         </div>
                     </div>
 
-                    <Transactions transactions={transactions} />
+                    {useMemo(
+                        () => (
+                            <Transactions transactions={transactions} />
+                        ),
+                        [transactions]
+                    )}
 
                     <button
                         className={