Webtoons API 부모 컴포넌트로 이동

novice0840 · Sep 25, 2023 · 1dc6a66 · 1dc6a66
1 parent 134279c
commit 1dc6a66
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 42 deletions.
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
@@ -4,7 +4,13 @@ import SearchIcon from "@mui/icons-material/Search";
 import { SignUp, SignIn } from "@src/components";
 import logo from "@src/assets/logo.jpg";
 
-const Header = () => {
+type PropTypes = {
+  search: string;
+  handleSearch: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  handleSubmit: () => void;
+};
+
+const Header = ({ search, handleSearch, handleSubmit }: PropTypes) => {
   const signInRef = useRef<HTMLElement>(null);
   const signUpRef = useRef<HTMLElement>(null);
   const [signInOpen, setSignInOpen] = useState<boolean>(false);
@@ -26,11 +32,12 @@ const Header = () => {
       >
         <InputBase
           sx={{ ml: 1, flex: 1 }}
+          onChange={handleSearch}
           placeholder="검색어를 입력해주세요"
           inputProps={{ "aria-label": "search google maps" }}
         />
-        <IconButton type="button" sx={{ p: "10px" }} aria-label="search">
-          <SearchIcon />
+        <IconButton onClick={handleSubmit} type="button" sx={{ p: "10px" }} aria-label="search">
+          검색
         </IconButton>
       </Paper>
       <Stack spacing={2} direction="row">

diff --git a/frontend/src/components/WebtoonList.tsx b/frontend/src/components/WebtoonList.tsx
@@ -3,45 +3,14 @@ import { Grid, Paper, Typography, Link, Box, Stack } from "@mui/material";
 import { WebtoonBase } from "@src/types";
 import axios from "axios";
 
-const WebtoonList = () => {
-  const [webtoons, setWebtoons] = useState<WebtoonBase[]>([]);
-  const lastWebtoonRef = useRef<HTMLElement>(null);
-  const [page, setPage] = useState<number>(1);
-  const [totalPage, setTotalPage] = useState<number>(1);
-
-  const fetchData = async (): Promise<void> => {
-    try {
-      const response = await axios.get<{
-        info: { totalPage: number; page: number };
-        data: WebtoonBase[];
-      }>(`http://localhost:3001/webtoon/list?page=${page}`);
-      const data = response.data;
-      setTotalPage(data.info.totalPage);
-      setWebtoons([...webtoons, ...data.data]);
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  useEffect(() => {
-    void fetchData();
-  }, [page]);
-
-  useEffect(() => {
-    const observer = new IntersectionObserver((entries, observer) => {
-      if (entries[0].isIntersecting && page <= totalPage) {
-        observer.unobserve(lastWebtoonRef.current as HTMLElement);
-        setPage((page) => page + 1);
-        observer.observe(lastWebtoonRef.current as HTMLElement);
-      }
-    });
-    observer.observe(lastWebtoonRef.current as HTMLElement);
-    return () => observer.disconnect();
-  }, []);
+type PropTypes = {
+  webtoons: WebtoonBase[];
+};
 
+const WebtoonList = ({ webtoons }: PropTypes) => {
   return (
     <Grid container rowSpacing={5} spacing={3}>
-      {webtoons.map((webtoon, index, array) => (
+      {webtoons.map((webtoon, index) => (
         <Grid item xs={6} sm={3} md={2} key={index}>
           <Link style={{ textDecoration: "none" }}>
             <Paper elevation={5}>
@@ -54,7 +23,6 @@ const WebtoonList = () => {
           </Link>
         </Grid>
       ))}
-      <Box ref={lastWebtoonRef}></Box>
     </Grid>
   );
 };

diff --git a/frontend/src/pages/MainPage.tsx b/frontend/src/pages/MainPage.tsx
@@ -9,6 +9,19 @@ import { WebtoonBase } from "@src/types";
 const Main = () => {
   const [platform, setPlatform] = useState<PlatformKind>("all");
   const [dayOfWeeks, setDayOfWeeks] = useState<DayOfWeekKind[]>([]);
+  const [search, setSearch] = useState<string>("");
+  const [webtoons, setWebtoons] = useState<WebtoonBase[]>([]);
+  const [page, setPage] = useState<number>(1);
+  const [totalPage, setTotalPage] = useState<number>(1);
+  const lastWebtoonRef = useRef<HTMLElement>(null);
+
+  const handleSubmit = () => {
+    void fetchData(platform);
+  };
+
+  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearch(event.target.value);
+  };
 
   const handlePlatform = (event: React.SyntheticEvent, value: PlatformKind) => {
     setPlatform(value);
@@ -18,10 +31,53 @@ const Main = () => {
     setDayOfWeeks([...dayOfWeeks, event.target.name as DayOfWeekKind]);
   };
 
+  const fetchData = async (
+    platform = undefined,
+    dayOfWeeks = undefined,
+    tags = undefined,
+    isEnd = undefined
+  ): Promise<void> => {
+    try {
+      const response = await axios.get<{
+        info: { totalPage: number; page: number };
+        data: WebtoonBase[];
+      }>(`http://localhost:3001/webtoon/list?page=${page}`, {
+        params: {
+          platform,
+          dayOfWeeks,
+          tags,
+          isEnd,
+        },
+      });
+      const data = response.data;
+      setTotalPage(data.info.totalPage);
+      setWebtoons([...webtoons, ...data.data]);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    void fetchData();
+  }, [page]);
+
+  useEffect(() => {
+    console.log("check");
+    const observer = new IntersectionObserver((entries, observer) => {
+      if (entries[0].isIntersecting && page <= totalPage) {
+        observer.unobserve(lastWebtoonRef.current as HTMLElement);
+        setPage((page) => page + 1);
+        observer.observe(lastWebtoonRef.current as HTMLElement);
+      }
+    });
+    observer.observe(lastWebtoonRef.current as HTMLElement);
+    return () => observer.disconnect();
+  }, []);
+
   return (
     <Container maxWidth="xl">
       <Box component="header" sx={{ mt: 3 }}>
-        <Header />
+        <Header search={search} handleSearch={handleSearch} handleSubmit={handleSubmit} />
       </Box>
       <Container maxWidth="lg">
         <Box component="nav">
@@ -34,7 +90,10 @@ const Main = () => {
           <Genres genres={genres} />
         </Box>
         <Box>
-          <WebtoonList />
+          <WebtoonList webtoons={webtoons} />
+        </Box>
+        <Box>
+          <Box ref={lastWebtoonRef}></Box>
         </Box>
       </Container>
     </Container>