[#57]Refactor:최적화

Sweet-red-beans · Mar 24, 2022 · 35e1564 · 35e1564
1 parent 1643dd4
commit 35e1564
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 164 deletions.
diff --git 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
@@ -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,74 +23,38 @@ 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: '관심도순',
-        });
     };
 
     //영화관 필터 바뀌었을 때
     const selectChange = (e) => {
         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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}