From e30877ee9e80c6a0460187a292d7c10030b47457 Mon Sep 17 00:00:00 2001 From: Slity <0911kjw@yu.ac.kr> Date: Tue, 13 May 2025 07:31:19 +0900 Subject: [PATCH 1/6] =?UTF-8?q?=EC=98=81=ED=99=94=20=EB=AA=A9=EB=A1=9D=20?= =?UTF-8?q?=ED=98=B8=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 9 +++++++-- src/fetchMovies.jsx | 48 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 55 insertions(+), 2 deletions(-) create mode 100644 src/fetchMovies.jsx diff --git a/src/App.jsx b/src/App.jsx index caf3eb2..038126e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,7 +1,12 @@ import React from "react"; +import FetchMovies from "./fetchMovies"; const App = () => { - return
App
; + return ( +
+ +
+ ); }; -export default App; +export default App; \ No newline at end of file diff --git a/src/fetchMovies.jsx b/src/fetchMovies.jsx new file mode 100644 index 0000000..7bfc602 --- /dev/null +++ b/src/fetchMovies.jsx @@ -0,0 +1,48 @@ +import React, { useEffect, useState } from "react"; + +const fetchMovies = () => { + const movies = []; + + // movies 배열 안에 객체 형태의 데이터 추가 + for (let i = 1; i <= 2500; i++) { + movies.push({ + id: i, + title: `Movie ${i}`, + description: `Description for Movie ${i}`, + }); + console.log("2500개의 영화 목록을 가져오는 중..."); + } + + // fetchMovies함수가 동작하는데 오래 걸린다고 가정하기 위한 코드 + alert("데이터를 가져오는 중입니다..."); + + return movies; +}; + +const FetchMovies = () => { + const [movies, setMovies] = useState([]); + + useEffect(() => { + const data = fetchMovies(); + setMovies(data); + }, []); + + return ( +
+ +
+ ); +}; + +export default FetchMovies; From c5df9e3f473b9b8655f435073517b78c58c04cae Mon Sep 17 00:00:00 2001 From: Slity <84740013+vni911@users.noreply.github.com> Date: Tue, 13 May 2025 13:54:50 +0900 Subject: [PATCH 2/6] =?UTF-8?q?Loading=20=20=EA=B5=AC=ED=98=84=20=EB=B0=8F?= =?UTF-8?q?=20=EC=BB=A8=ED=85=8C=EC=9D=B4=EB=84=88=20=EA=B5=AC=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/fetchMovies.jsx | 72 +++++++++++++++++++++++++++++++++++---------- 1 file changed, 57 insertions(+), 15 deletions(-) diff --git a/src/fetchMovies.jsx b/src/fetchMovies.jsx index 7bfc602..d30d07c 100644 --- a/src/fetchMovies.jsx +++ b/src/fetchMovies.jsx @@ -21,27 +21,69 @@ const fetchMovies = () => { const FetchMovies = () => { const [movies, setMovies] = useState([]); + const [loading, setLoading] = useState(true); useEffect(() => { - const data = fetchMovies(); - setMovies(data); + const loadMovies = async () => { + setLoading(true); // 로딩 시작 + const data = await fetchMovies(); + setMovies(data); + setLoading(false); // 로딩 종료 + }; + + loadMovies(); }, []); + if (loading) { + return ( +
+
+ Movie List +
+
+ Loading... +
+
+ Footer +
+
+ + ); + } + + return ( -
- +
+
+ Movie List +
+
+
+
시청한 영화 목록
+
+
    + {movies.map((movie) => ( +
  • +
    {movie.title}
    +
    {movie.description}
    +
    +
    시청한 영화 담기
    +
    볼 영화 담기
    +
    +
    • + ))} +
+
+
볼 영화 목록
+
+
+
+ Footer +
+ +
+ ); }; From 0509ca44386cede19540443885246da0244be4a9 Mon Sep 17 00:00:00 2001 From: Slity <0911kjw@yu.ac.kr> Date: Tue, 13 May 2025 17:55:58 +0900 Subject: [PATCH 3/6] =?UTF-8?q?MovieList=20=EA=B5=AC=EC=A1=B0=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/fetchMovies.jsx | 57 ++++++++++++++++++++++++++++----------------- 1 file changed, 36 insertions(+), 21 deletions(-) diff --git a/src/fetchMovies.jsx b/src/fetchMovies.jsx index d30d07c..f0cf3c8 100644 --- a/src/fetchMovies.jsx +++ b/src/fetchMovies.jsx @@ -36,54 +36,69 @@ const FetchMovies = () => { if (loading) { return ( -
+
Movie List
-
+
Loading...
-
+
Footer
- ); } - return ( -
-
+
+
Movie List
-
-
-
시청한 영화 목록
+
+
+
+
시청한 영화 목록
+
+
+ +
+
-
    +
      {movies.map((movie) => ( -
    • +
    • {movie.title}
      {movie.description}
      -
      -
      시청한 영화 담기
      -
      볼 영화 담기
      +
      + +
      • ))}
    -
    -
    볼 영화 목록
    + + +
    +
    +
    볼 영화 목록
    +
    +
    + +
    +
    -
    + + +
    Footer
    - -
    - ); }; From 35db5383a2d6d4561bf8405c01e56ab58163bd3f Mon Sep 17 00:00:00 2001 From: Slity <0911kjw@naver.com> Date: Wed, 14 May 2025 02:22:49 +0900 Subject: [PATCH 4/6] =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/fetchMovies.jsx | 64 ++++++++++++++++++++++++++++++++++++--------- 1 file changed, 52 insertions(+), 12 deletions(-) diff --git a/src/fetchMovies.jsx b/src/fetchMovies.jsx index f0cf3c8..1569883 100644 --- a/src/fetchMovies.jsx +++ b/src/fetchMovies.jsx @@ -22,6 +22,8 @@ const fetchMovies = () => { const FetchMovies = () => { const [movies, setMovies] = useState([]); const [loading, setLoading] = useState(true); + const [watched, setWatched] = useState([]); + const [toWatch, setToWatch] = useState([]); useEffect(() => { const loadMovies = async () => { @@ -34,6 +36,26 @@ const FetchMovies = () => { loadMovies(); }, []); + const addWatched = (movie) => { + setWatched((prev) => [...prev, movie]); + setMovies((prev) => prev.filter((m) => m.id !== movie.id)); + }; + + const addToWatchList = (movie) => { + setToWatch((prev) => [...prev, movie]); + setMovies((prev) => prev.filter((m) => m.id !== movie.id)); + }; + + const removeWatchedList = (movie) => { + setWatched((prev) => prev.filter((m) => m.id !== movie.id)); + setMovies((prev) => [...prev, movie].sort((a, b) => a.id - b.id)); + }; + + const removeToWatchList = (movie) => { + setToWatch((prev) => prev.filter((m) => m.id !== movie.id)); + setMovies((prev) => [...prev, movie].sort((a, b) => a.id - b.id)); + }; + if (loading) { return (
    @@ -57,24 +79,35 @@ const FetchMovies = () => {
    -
    +
    시청한 영화 목록
    -
    -
    - -
    + {watched.map((movie) => ( +
    +
    {movie.title}
    + +
    + ))}
    -
      +
        {movies.map((movie) => (
      • {movie.title}
        {movie.description}
        - -
        @@ -86,10 +119,17 @@ const FetchMovies = () => {
        볼 영화 목록
        -
        -
        - -
        + {toWatch.map((movie) => ( +
        +
        {movie.title}
        + +
        + ))}
    From 97ccf37624df9ca4aabb38c3f37666bd5fd0bc8e Mon Sep 17 00:00:00 2001 From: Slity <0911kjw@naver.com> Date: Wed, 14 May 2025 02:50:44 +0900 Subject: [PATCH 5/6] =?UTF-8?q?=EC=98=A4=EB=A6=84=EC=B0=A8=EC=88=9C=20?= =?UTF-8?q?=EC=A0=95=EB=A0=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/fetchMovies.jsx | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/fetchMovies.jsx b/src/fetchMovies.jsx index 1569883..c7bb9fd 100644 --- a/src/fetchMovies.jsx +++ b/src/fetchMovies.jsx @@ -36,24 +36,26 @@ const FetchMovies = () => { loadMovies(); }, []); + const sortById = (list) => list.sort((a, b) => a.id - b.id); + const addWatched = (movie) => { - setWatched((prev) => [...prev, movie]); - setMovies((prev) => prev.filter((m) => m.id !== movie.id)); + setWatched((prev) => sortById([...prev, movie])); + setMovies((prev) => sortById(prev.filter((m) => m.id !== movie.id))); }; const addToWatchList = (movie) => { - setToWatch((prev) => [...prev, movie]); - setMovies((prev) => prev.filter((m) => m.id !== movie.id)); + setToWatch((prev) => sortById([...prev, movie])); + setMovies((prev) => sortById(prev.filter((m) => m.id !== movie.id))); }; const removeWatchedList = (movie) => { - setWatched((prev) => prev.filter((m) => m.id !== movie.id)); - setMovies((prev) => [...prev, movie].sort((a, b) => a.id - b.id)); + setWatched((prev) => sortById(prev.filter((m) => m.id !== movie.id))); + setMovies((prev) => sortById([...prev, movie])); }; const removeToWatchList = (movie) => { - setToWatch((prev) => prev.filter((m) => m.id !== movie.id)); - setMovies((prev) => [...prev, movie].sort((a, b) => a.id - b.id)); + setToWatch((prev) => sortById(prev.filter((m) => m.id !== movie.id))); + setMovies((prev) => sortById([...prev, movie])); }; if (loading) { @@ -142,4 +144,4 @@ const FetchMovies = () => { ); }; -export default FetchMovies; +export default FetchMovies; \ No newline at end of file From 3813590f8fb16420eea8c4b9bb43d7c0af3827f9 Mon Sep 17 00:00:00 2001 From: Slity <0911kjw@naver.com> Date: Wed, 14 May 2025 03:15:44 +0900 Subject: [PATCH 6/6] Update fetchMovies.jsx --- src/fetchMovies.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/fetchMovies.jsx b/src/fetchMovies.jsx index c7bb9fd..bf5f23a 100644 --- a/src/fetchMovies.jsx +++ b/src/fetchMovies.jsx @@ -38,7 +38,7 @@ const FetchMovies = () => { const sortById = (list) => list.sort((a, b) => a.id - b.id); - const addWatched = (movie) => { + const addWatchedList = (movie) => { setWatched((prev) => sortById([...prev, movie])); setMovies((prev) => sortById(prev.filter((m) => m.id !== movie.id))); }; @@ -103,7 +103,7 @@ const FetchMovies = () => {
    {movie.description}