feat: 웹툰 플랫폼 선택 방식 변경

novice0840 · Nov 6, 2023 · 315dc42 · 315dc42
1 parent e99125d
commit 315dc42
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 97 deletions.
diff --git a/frontend/src/components/Platforms.tsx b/frontend/src/components/Platforms.tsx
@@ -1,22 +1,50 @@
 import React from "react";
-import { Tabs, Tab } from "@mui/material";
+import { Checkbox, FormLabel, FormGroup, FormControl, FormControlLabel } from "@mui/material";
 import { PlatformKind } from "@src/types";
 
 type PropTypes = {
-  platform: PlatformKind;
-  handlePlatform: (event: React.SyntheticEvent, value: PlatformKind) => void;
+  handleDayOfWeek: (event: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-const Platforms = ({ platform, handlePlatform }: PropTypes) => {
+const Platforms = ({ handleDayOfWeek }: PropTypes) => {
   return (
-    <Tabs value={platform} onChange={handlePlatform} aria-label="webtoon platform tabs">
-      <Tab label="전체" value="all" />
-      <Tab label="네이버" value="naver" />
-      <Tab label="카카오" value="kakao" />
-      <Tab label="레진코믹스" value="lezhin" />
-      <Tab label="탑툰" value="toptoon" />
-      <Tab label="투믹스" value="toomics" />
-    </Tabs>
+    <FormControl component="fieldset" variant="standard">
+      <FormLabel>요일</FormLabel>
+      <FormGroup row>
+        <FormControlLabel
+          control={<Checkbox onChange={handleDayOfWeek} name="Monday" />}
+          label="월요웹툰"
+        />
+        <FormControlLabel
+          control={<Checkbox onChange={handleDayOfWeek} name="Thuesday" />}
+          label="화요웹툰"
+        />
+        <FormControlLabel
+          control={<Checkbox onChange={handleDayOfWeek} name="Wednesday" />}
+          label="수요웹툰"
+        />
+        <FormControlLabel
+          control={<Checkbox onChange={handleDayOfWeek} name="Thursday" />}
+          label="목요웹툰"
+        />
+        <FormControlLabel
+          control={<Checkbox onChange={handleDayOfWeek} name="Friday" />}
+          label="금요웹툰"
+        />
+        <FormControlLabel
+          control={<Checkbox onChange={handleDayOfWeek} name="Saturday" />}
+          label="토요웹툰"
+        />
+        <FormControlLabel
+          control={<Checkbox onChange={handleDayOfWeek} name="Sunday" />}
+          label="일요웹툰"
+        />
+        <FormControlLabel
+          control={<Checkbox onChange={handleDayOfWeek} name="End" />}
+          label="완결웹툰"
+        />
+      </FormGroup>
+    </FormControl>
   );
 };
 

diff --git a/frontend/src/pages/MainPage.tsx b/frontend/src/pages/MainPage.tsx
@@ -8,106 +8,27 @@ import { WebtoonBase } from "@src/types";
 import { useNavigate, redirect, useLocation } from "react-router-dom";
 
 const MainPage = () => {
-  const [platform, setPlatform] = useState<PlatformKind>("all");
-  const [dayOfWeeks, setDayOfWeeks] = useState<DayOfWeekKind[]>([]);
-  const [search, setSearch] = useState<string>("");
+  const [category, setCategory] = useState({
+    platform: "all",
+    dayOfWeeks: [],
+    genres: [],
+  });
   const [webtoons, setWebtoons] = useState<WebtoonBase[]>([]);
-  const [page, setPage] = useState<number>(1);
-  const [totalPage, setTotalPage] = useState<number>(1);
   const lastWebtoonRef = useRef<HTMLElement>(null);
   const navigate = useNavigate();
-  const location = useLocation();
-
-  const handleSubmit = () => {
-    console.log("submit click");
-  };
-
-  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSearch(event.target.value);
-  };
-
-  const handlePlatform = (event: React.SyntheticEvent, value: PlatformKind) => {
-    setPlatform(value);
-    if (value === "all") navigate("?platform=all");
-    else {
-      navigate(`?platform=${value}`);
-    }
-  };
 
   const handleDayOfWeek = (event: React.ChangeEvent<HTMLInputElement>) => {
     const newDay = event.target.name as DayOfWeekKind;
-    if (dayOfWeeks.includes(newDay)) {
-      setDayOfWeeks(dayOfWeeks.filter((day) => day !== newDay));
-    } else {
-      setDayOfWeeks([...dayOfWeeks, newDay]);
-    }
   };
 
-  const fetchDatainit = async (): Promise<void> => {
-    const params: { platform?: string; days?: string } = {};
-    if (platform !== "all") params.platform = platform;
-    if (dayOfWeeks.length !== 0) params.days = dayOfWeeks.join(",");
-    try {
-      const response = await axios.get<{
-        info: { totalPage: number; page: number };
-        data: WebtoonBase[];
-      }>(`http://localhost:3001/webtoon/list?page=${page}`, { params });
-      const data = response.data;
-      setPage(1);
-      setTotalPage(data.info.totalPage);
-      setWebtoons([...data.data]);
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  const fetchDataPlus = async (): Promise<void> => {
-    const params: { platform?: string; days?: string } = {};
-    if (platform !== "all") params.platform = platform;
-    if (dayOfWeeks.length !== 0) params.days = dayOfWeeks.join(",");
-    try {
-      const response = await axios.get<{
-        info: { totalPage: number; page: number };
-        data: WebtoonBase[];
-      }>(`http://localhost:3001/webtoon/list?page=${page}`, { params });
-      const data = response.data;
-      setTotalPage(data.info.totalPage);
-      setWebtoons([...webtoons, ...data.data]);
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  useEffect(() => {
-    const observer = new IntersectionObserver((entries, observer) => {
-      if (entries[0].isIntersecting && page <= totalPage) {
-        observer.unobserve(lastWebtoonRef.current as HTMLElement);
-        console.log("check");
-        setPage((page) => page + 1);
-        observer.observe(lastWebtoonRef.current as HTMLElement);
-      }
-    });
-    observer.observe(lastWebtoonRef.current as HTMLElement);
-    return () => observer.disconnect();
-  }, [totalPage]);
-
-  useEffect(() => {
-    void fetchDatainit();
-  }, [platform, dayOfWeeks]);
-
-  useEffect(() => {
-    console.log("page changed");
-    void fetchDataPlus();
-  }, [page]);
-
   return (
     <Container maxWidth="xl">
       <Box component="header" sx={{ mt: 3 }}>
         <Header />
       </Box>
       <Container maxWidth="lg">
         <Box component="nav">
-          <Platforms platform={platform} handlePlatform={handlePlatform} />
+          <Platforms handleDayOfWeek={handleDayOfWeek} />
         </Box>
         <Box sx={{ mt: 3 }}>
           <DayOfWeek handleDayOfWeek={handleDayOfWeek} />