Merge pull request #161 from prgrms-fe-devcourse/refactor/challenges-…

…page

[Refactor] window이벤트 제거, 새로고침시 채널 선택 버그 수정

src/pages/ChallengesPage.tsx

@@ -5,63 +5,47 @@ import Chips from "@domain/ChallengesPage/Chips";
 import useChallenges from "@hooks/quries/useChallenges";
 import useChannels from "@hooks/quries/useChannels";
 import usePageTitle from "@hooks/usePageTitle";
-import { Channel, Post } from "src/types";
+import { useNavigate, useParams } from "react-router-dom";
+import { Channel } from "src/types";
 
 const ChallengesPage = () => {
   usePageTitle("채널");
-  const [selectedChannelId, setSelectedChannelId] = useState(
-    window.location.pathname.split("/")[2]
-  );
-  const { data: channelsData } = useChannels();
-  const { data: challengesData } = useChallenges(selectedChannelId);
-  const [channels, setChannels] = useState<Channel[]>(); // 채널 목록 데이터전체
-  const [challenges, setChallenges] = useState<Post[]>(); // 선택된 채널의 포스트 목록
+  const navigate = useNavigate();
+  const { channelId } = useParams();
+  const { data: channelsData } = useChannels(); // 채널 목록 데이터전체
+  const { data: challengesData } = useChallenges(channelId); // 선택된 채널의 포스트 목록
   const [selectedChannel, setSelectedChannel] = useState<Channel>(); // 선택된 채널 데이터전체
 
-  const windowListener = () => {
-    const clickedChannel = window.location.pathname.split("/")[2];
-    setSelectedChannelId(clickedChannel);
-  };
-
   useEffect(() => {
-    setChannels(channelsData);
-
-    window.addEventListener("popstate", windowListener);
-    return () => {
-      window.removeEventListener("popstate", windowListener);
-    };
+    setSelectedChannel(
+      channelsData?.filter((item: Channel) => item._id === channelId)[0]
+    );
   }, [channelsData]);
 
   useEffect(() => {
-    setChallenges(challengesData);
-  }, [challengesData]);
-
-  useEffect(() => {
-    setChallenges(challengesData);
-    const clickedChannel = channels?.filter(
-      (item) => item._id === selectedChannelId
+    const clickedChannel = channelsData?.filter(
+      (item) => item._id === channelId
     )[0];
     setSelectedChannel(clickedChannel);
-  }, [selectedChannelId]);
+  }, [channelId]);
 
   const onClickChips = (event: React.MouseEvent<HTMLButtonElement>) => {
     const target = event.target as HTMLButtonElement;
     const channelDescription = target.dataset.description;
-    const { _id } = channels.filter(
+    const { _id } = channelsData.filter(
       (item) => item.description === channelDescription
     )[0];
-    setSelectedChannelId(_id);
-    history.pushState(null, null, `/challenges/${_id}`);
+    navigate(`/challenges/${_id}`);
   };
 
   return (
     <>
       <Chips
-        names={(channels || []).map((challenge) => challenge.description)}
+        names={(channelsData || []).map((challenge) => challenge.description)}
         selectedChip={selectedChannel?.description || "독서"}
         onClickProp={onClickChips}
       />
-      <Challenges posts={challenges || []} />
+      <Challenges posts={challengesData || []} />
     </>
   );
 };