Skip to content

검색페이지 whereFrom, 팔로우/팔로잉페이지 isFollower persist설정 삭제 #136

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gangpyono wants to merge 9 commits into
base: dev
Choose a base branch
from
+74 −111
Open

검색페이지 whereFrom, 팔로우/팔로잉페이지 isFollower persist설정 삭제 #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
baea7cf
[edit] : whwereFrom persist제거
gangpyono Dec 16, 2021
5955ddf
[edit] : whwereFrom persist제거& 무한스크롤 구현중
gangpyono Dec 16, 2021
6f09fc4
[edit] : whwereFrom persist제거
gangpyono Dec 16, 2021
134ad6d
[edit] : whwereFrom모듈 제거
gangpyono Dec 16, 2021
bdb9d9c
[edit] : 불필요코드 제거
gangpyono Dec 16, 2021
46fc84c
[edit] : 팔로우/팔로잉 리스트 perist제거
gangpyono Dec 16, 2021
4f12b8e
merge into gangpyo
gangpyono Dec 16, 2021
94b3948
[edit] : 불필요 코드 제거
gangpyono Jan 17, 2022
d5e4ddb
[edit} : 추가 댓글 작성시 팝업창이 안나오는 오류 해결
gangpyono Jan 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions cafeWang/src/components/Board/BoardDetail.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,6 @@ import {
getInfinityScrollBulletinCommentDB,
} from "../../redux/Async/bulletinBoard";

import { whereFrom } from "../../redux/Modules/whereFromSlice";

// 무한스크롤 Hook
import { useInterSectionObserver } from "../../hooks/index";

Expand Down Expand Up @@ -190,6 +188,7 @@ const BoardDetail = ({ boardName }) => {
const addComment = () => {
if (!content) {
alertPopUp(" 내용을 작성해 주세요!", 1200);
setButtonName(null);
return;
}

Expand Down Expand Up @@ -339,7 +338,6 @@ const BoardDetail = ({ boardName }) => {
<UserHashTagItem
key={tag}
onClick={(e) => {
dispatch(whereFrom("cafe"));
dispatch(
getSearchCafeDB({
keyword: tag,
Expand All @@ -349,7 +347,7 @@ const BoardDetail = ({ boardName }) => {
)
.unwrap()
.then(() => {
history.push("/searchmain");
history.push("/searchmain/cafeboard");
});
}}
>
Expand Down
66 changes: 41 additions & 25 deletions cafeWang/src/pages/SearchPage/SearchMain.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,16 @@ import { getSearchCafeDB, getSearchBoardDB } from "../../redux/Async/Search";

import { setSorting } from "../../redux/Modules/searchSlice";

//interSectionObserver
import { useInterSectionObserver } from "../../hooks/useIntersectionObserver";
import { useParams } from "react-router";

const SearchMain = () => {
const [popUp, setPopUp] = useState(false);

// 검색페이지를올떄 자유게시판에서 왔는지, 카페 후기게시판에서왔는지를 판단하기위함.
const whereFrom = useParams().wherefrom;
Copy link
Member Author

@gangpyono gangpyono Dec 21, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useParans훅을 이용하여 해당하는 값을 받아올 수 있어, 이를 활용하여 분기처리시의 기준값으로 설정해줌.


const dispatch = useDispatch();
const isActive = useSelector((state) => state.modal.isActive);
const isFetching = useSelector((state) => state.search.isFetching);
Expand All @@ -34,9 +41,6 @@ const SearchMain = () => {
//현재 게시물이 존재하는지(카페 후기 or 자유게시물 아무거나뭐든)
const isList = useSelector((state) => state.search.isList);

// 검색페이지를올떄 자유게시판에서 왔는지, 카페 후기게시판에서왔는지를 판단하기위함.
const whereFrom = useSelector((state) => state.whereFrom.whereFrom);

const hashTag = useSelector((state) => state.search.hashTag);
const preKeyword = useSelector((state) => state.search.keyword);
const currentSorting = useSelector((state) => state.search.currentSorting);
Expand Down Expand Up @@ -73,7 +77,7 @@ const SearchMain = () => {
setPopUp(false);
}, 700);
} else {
if (whereFrom === "cafe") {
if (whereFrom === "cafeboard") {
dispatch(
getSearchCafeDB({
keyword,
Expand Down Expand Up @@ -107,7 +111,6 @@ const SearchMain = () => {

//처음접속시 인풋창 포커스 & 스크롤 탑 위치
useEffect(() => {

window.scrollTo({
top: 0,
});
Expand All @@ -116,6 +119,7 @@ const SearchMain = () => {
}, []);

//게시물 불러오기(검색된 게시물을 클릭하여 상세페이지로 이동후 뭔가 동작(좋아요,댓글)을 하고 다시 뒤로돌아왔을떄 변경된내용을 반영시키기위해 다시 불러옴)

// 최초에 검색하고 게시물을 불러올떈 동작하지않는다.
useEffect(() => {
// (검색전엔 아무것도 불러오지않은상태니 배열의 길이로 실행여부를 판단함.)
Expand Down Expand Up @@ -160,6 +164,8 @@ const SearchMain = () => {
}
}, []);

//게시물 불러오기(검색된 게시물을 클릭하여 상세페이지로 이동후 뭔가 동작(좋아요,댓글)을 하고 다시 뒤로돌아왔을떄 변경된내용을 반영시키기위해 다시 불러옴)
// 최초에 검색하고 게시물을 불러올떈 동작하지않는다.
useEffect(() => {
if (boardList.length !== 0) {
if (currentSorting === "byDate") {
Expand All @@ -180,10 +186,13 @@ const SearchMain = () => {
}
}, []);

// //무한 스크롤
// const target = useRef(null);
// const [isLoading, setIsLoading] = useState(false);
// const pageRef = useRef(1);

// useInterSectionObserver(fetchMoreData, pageRef, target.current, currentList);



return (
<>
{/* 헤더 */}
Expand Down Expand Up @@ -215,7 +224,11 @@ const SearchMain = () => {
{isActive ? (
""
) : (
<SearchModal isSearch={isSearch} setIsSearch={setIsSearch} />
<SearchModal
isSearch={isSearch}
setIsSearch={setIsSearch}
whereFrom={whereFrom}
/>
)}
</HeaderInner>

Expand Down Expand Up @@ -248,7 +261,7 @@ const SearchMain = () => {
let keyword = null;

// 카페 후기검색일경우 해쉬태그도 생각해야한다.
if (whereFrom === "cafe") {
if (whereFrom === "cafeboard") {
if (hashTag) {
keyword = hashTag;
} else {
Expand Down Expand Up @@ -287,7 +300,7 @@ const SearchMain = () => {

let keyword = null;

if (whereFrom === "cafe") {
if (whereFrom === "cafeboard") {
if (hashTag) {
keyword = hashTag;
} else {
Expand Down Expand Up @@ -320,21 +333,24 @@ const SearchMain = () => {
</SmallFilterButton>
</ButtonInner>
{/* 목록 뿌려주기 */}
{whereFrom === "cafe" ? (
<SearchListInner>
{isFetching && <SpinnerImg src={Spinner} />}
{cafeList.length !== 0 // 검색된결과가 없다면 ( == 받아온 배열의 길이가 0 이라면) "게시물이 없습니다 " 보여줌.
? cafeList.map((cafe) => (
<CafeCard
key={cafe.cafeId}
{...cafe}
_onClick={() => {
history.push(`/cafeboard/detail/${cafe.cafeId}`);
}}
/>
))
: !isFetching && <Blank message="조회된 글이 없습니다." />}
</SearchListInner>
{whereFrom === "cafeboard" ? (
<>
<SearchListInner>
{isFetching && <SpinnerImg src={Spinner} />}
{cafeList.length !== 0 // 검색된결과가 없다면 ( == 받아온 배열의 길이가 0 이라면) "게시물이 없습니다 " 보여줌.
? cafeList.map((cafe) => (
<CafeCard
key={cafe.cafeId}
{...cafe}
_onClick={() => {
history.push(`/cafeboard/detail/${cafe.cafeId}`);
}}
/>
))
: !isFetching && <Blank message="조회된 글이 없습니다." />}
</SearchListInner>
{/* <div ref={target}>{isLoading && "loading..."}</div> */}
</>
) : (
<SearchListInner>
{boardList.length !== 0
Expand Down
11 changes: 4 additions & 7 deletions cafeWang/src/pages/SearchPage/SearchModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,11 @@ import {
deleteBoardKeyword,
} from "../../redux/Modules/searchSlice";

const SearchModal = ({ isSearch, setIsSearch }) => {
const SearchModal = ({ isSearch, setIsSearch, whereFrom }) => {
const dispatch = useDispatch();

const [popUp, setPopUp] = useState(false);

// 카페 후기게시판 or 자유게시판 중 어디서 왔는지 판단해주는 변수
const whereFrom = useSelector((state) => state.whereFrom.whereFrom);

//카페 후기 최근검색목록 리스트
const cafeSearchList = useSelector((state) => state.search.cafeSearchList);

Expand All @@ -48,7 +45,7 @@ const SearchModal = ({ isSearch, setIsSearch }) => {
{/* 전체삭제 버튼 */}
<DeleteAllButton
onClick={() => {
if (whereFrom === "cafe") {
if (whereFrom === "cafeboard") {
if (cafeSearchList.length === 0) {
setPopUp(true);
setTimeout(() => {
Expand All @@ -73,7 +70,7 @@ const SearchModal = ({ isSearch, setIsSearch }) => {

<SearchWordList>
{/* 카페 후기에서 왔으면 카페 후기 최근검색목록 아니면 자유게시판 최근검색목록 보여주기 */}
{whereFrom === "cafe"
{whereFrom === "cafeboard"
? cafeSearchList.map((keyword) => {
return (
<SearchWordInner key={keyword}>
Expand Down Expand Up @@ -136,7 +133,7 @@ const SearchModal = ({ isSearch, setIsSearch }) => {
</RecentSearchInner>
<>
{/* 해쉬태그검색은 카페 후기검색에만 있는 기능이니 카페 후기게시판에서 이동했는지 확인 */}
{whereFrom === "cafe" && (
{whereFrom === "cafeboard" && (
<>
<Grid margin="16px 0px">
<Text grey>추천 키워드</Text>
Expand Down
25 changes: 11 additions & 14 deletions cafeWang/src/pages/UserPage/UserFollowList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,60 @@
import React, { useEffect } from "react";
import styled from "styled-components";
import { useSelector, useDispatch } from "react-redux";
import { useParams } from "react-router-dom";
import { history } from "../../redux/configureStore";

import { BigFilterButton } from "../../elements";

import UserCard from "../../components/Card/UserCard";

import ModalBackground from "../../shared/ModalBackground";
import Blank from "../../shared/Blank";

import Header from "../../shared/Header";

import { useParams } from "react-router-dom";

import {
userFollowingListDB,
userFollowListDB,
} from "../../redux/Async/userPage";

import { setIsFollower } from "../../redux/Modules/userPageSlice";

const UserPageFollowList = (props) => {
const UserPageFollowList = () => {
const dispatch = useDispatch();
const nickname = useParams().nickname;
const pageName = useParams().pagename;

const isActive = useSelector((state) => state.modal.isActive);
const userList = useSelector((state) => state.userPage.userList);
const isFollower = useSelector((state) => state.userPage.isFollower);

useEffect(() => {
window.scrollTo({
top: 0,
});

if (isFollower) {
if (pageName === "follower") {
dispatch(userFollowListDB(nickname));
} else {
dispatch(userFollowingListDB(nickname));
}
}, [dispatch, isFollower, nickname, userList.length]);
}, [dispatch, pageName, nickname, userList.length]);

return (
<>
<Header />
<Container>
{isActive && <ModalBackground />}
<BigFilterButton
active={isFollower}
active={pageName === "follower"}
noneBorderTop
_onClick={() => {
dispatch(setIsFollower(true));
history.replace(`/userpagefollowlist/${nickname}/follower`);
}}
>
팔로워
</BigFilterButton>
<BigFilterButton
active={!isFollower}
active={pageName === "following"}
noneBorderTop
_onClick={() => {
dispatch(setIsFollower(false));
history.replace(`/userpagefollowlist/${nickname}/following`);
}}
>
팔로잉
Expand Down
14 changes: 7 additions & 7 deletions cafeWang/src/pages/UserPage/UserMain.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React, { useEffect, useState, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import styled, { css } from "styled-components";

import { useParams } from "react-router";
import { history } from "../../redux/configureStore";

Expand Down Expand Up @@ -37,7 +36,7 @@ import {
} from "../../redux/Async/userPage";

//sliceAction
import { resetPost, setIsFollower } from "../../redux/Modules/userPageSlice";
import { resetPost } from "../../redux/Modules/userPageSlice";

//interSectionObserver
import { useInterSectionObserver } from "../../hooks";
Expand All @@ -54,7 +53,6 @@ const UserMain = (props) => {
(state) => state.userPage.isFetchingStatus
);

console.log(isFetching);
//로그인 유저정보, 페이지 정보 불러오기
const loginUserInfo = useSelector((state) => state.user);
const pageInfo = useSelector((state) => state.userPage);
Expand Down Expand Up @@ -187,8 +185,9 @@ const UserMain = (props) => {
<Grid flexBetween>
<Button
onClick={() => {
dispatch(setIsFollower(true));
history.push(`/userpagefollowlist/${userInfo.nickname}`);
history.push(
`/userpagefollowlist/${userInfo.nickname}/follower`
);
}}
>
<Count>{userInfo.followingCount}</Count>
Expand All @@ -197,8 +196,9 @@ const UserMain = (props) => {

<Button
onClick={() => {
dispatch(setIsFollower(false));
history.push(`/userpagefollowlist/${userInfo.nickname}`);
history.push(
`/userpagefollowlist/${userInfo.nickname}/following`
);
}}
>
<Count>{userInfo.followCount}</Count>
Expand Down
6 changes: 1 addition & 5 deletions cafeWang/src/redux/Modules/userPageSlice.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,10 +102,6 @@ const userPageSlice = createSlice({
updateUserList: (state, action) => {
state.userList = action.payload;
},

setIsFollower: (state, action) => {
state.isFollower = action.payload;
},
},

extraReducers: {
Expand Down Expand Up @@ -296,7 +292,7 @@ const userPageSlice = createSlice({
},
});

export const { resetPost, updateUserList, updateIsFollowing, setIsFollower } =
export const { resetPost, updateUserList, updateIsFollowing } =
userPageSlice.actions;

export default userPageSlice;
23 changes: 0 additions & 23 deletions cafeWang/src/redux/Modules/whereFromSlice.js
View file
Open in desktop

This file was deleted.

Loading