Mission 5 박한별 #54

juhan0628 · 2025-11-24T05:23:58Z

구현 사항

유저 정보를 활용한 마이페이지 구현 및 무한 스크롤 구현

어려웠던 점

없음

구현 이미지

…ssion-2 [mission2] 2단계 미션 구현 - 안지선 / 1팀

…ature/mission-2" This reverts commit 190af1c, reversing changes made to cae66dc.

[Mission 2] 2단계 미션 구현 - 박진우A / 2팀

…sion-2" This reverts commit b185bf8, reversing changes made to 3cb8835.

han-nun0107

코드리뷰 확인해 주세요 !

추가로 전체적인 파일 구조가 컴포넌트 안에 api 호출, 비즈니스 로직 등이 너무 과하게 있어 분리하는 작업이 필요합니다. 각 폴더 별로 나눠서 로직 분리 작업 진행해 주시면 좋을 것 같아요 !

han-nun0107 · 2025-11-24T05:28:04Z

src/App.jsx

+import Layout from "@components/Layout";
+import OAuthCallback from "@components/OAuthCallback";


components에 barrel 만들어서 사용하면 더 좋을 것 같아요

han-nun0107 · 2025-11-24T05:28:33Z

src/App.jsx

+import OAuthCallback from "@components/OAuthCallback";

+import { useSupabaseAuth } from "@sb";
+import { UserContext } from "@sbCtx/UserContext";


이 부분은 context라는 폴더로 만들어서 관리하면 좋습니다! sbCtx라는 명은 너무 불명확 합니다.

han-nun0107 · 2025-11-24T05:29:51Z

src/components/MovieCard.jsx

+import { useNavigate } from "react-router-dom";
+import { useUser } from "@sbCtx/UserContext";
+import { useBookmarks } from "@/context/BookmarkContext";
+import { Button } from ".";


절대 경로로 불러오면 더 좋을 것 같아요 !

han-nun0107 · 2025-11-24T05:30:10Z

src/components/MovieCard.jsx

+import { useBookmarks } from "@/context/BookmarkContext";
+import { Button } from ".";
+
 const baseUrl = "https://image.tmdb.org/t/p/w500";


baseUrl은 constants 폴더에 Urls라는 파일 만들어서 관리하면 더 깔끔해질 것 같아요 !

han-nun0107 · 2025-11-24T05:30:50Z

src/components/MovieCard.jsx

+    e.stopPropagation();
+
+    if (!user) {
+      alert("로그인이 필요합니다!");


alert는 ux 적으로 좋지 않기 때문에 react toastify와 같은 토스트 라이브러리 사용하는 것이 좋아요!

han-nun0107 · 2025-11-24T05:31:19Z

src/components/MovieCard.jsx

+
+      {/* 평점 */}
+      <span className="absolute bottom-2 left-2 bg-black/70 text-white text-sm px-2 py-1 rounded">
+        ⭐ {vote_average}


평점의 경우 toFixed 넣어줘서 반올림 해주면 보기 더 좋습니다 !

han-nun0107 · 2025-11-24T05:33:06Z

src/context/BookmarkContext.jsx

+  const [bookmarks, setBookmarks] = useState([]);
+
+  // localStorage에서 복원
+  useEffect(() => {
+    const saved = localStorage.getItem("bookmarks");
+    if (saved) setBookmarks(JSON.parse(saved));
+  }, []);
+
+  // 저장
+  useEffect(() => {
+    localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
+  }, [bookmarks]);
+
+  const toggleBookmark = (movie) => {
+    setBookmarks((prev) => {
+      const exists = prev.some((m) => m.id === movie.id);
+      if (exists) {
+        return prev.filter((m) => m.id !== movie.id);
+      }
+      return [...prev, movie];
+    });
+  };
+
+  const removeBookmark = (id) => {
+    setBookmarks((prev) => prev.filter((m) => m.id !== id));
+  };
+
+  const isBookmarked = (id) => bookmarks.some((m) => m.id === id);


이 부분은 비즈니스 로직 분리 해주면 좋을 것 같아요 !

han-nun0107 · 2025-11-24T05:35:43Z

src/pages/Home.jsx

+  const [featuredMovies, setFeaturedMovies] = useState([]);
  const [movies, setMovies] = useState([]);
-  const [loading, setLoading] = useState(true);
+  const movieIdsRef = useRef(new Set());
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(false);
+  const [isEnd, setIsEnd] = useState(false);
+
  const navigate = useNavigate();
+  const loaderRef = useRef(null);
+
+  const loadFeaturedMovies = async () => {
+    const popular = await fetchPopularMovies(1);
+    const shuffled = popular.sort(() => Math.random() - 0.5);
+    setFeaturedMovies(shuffled.slice(0, 20));
+  };
+
+  const loadMovies = useCallback(async () => {
+    if (loading || isEnd) return;
+
+    setLoading(true);
+    const newMovies = await fetchPopularMovies(page);
+
+    if (!newMovies || newMovies.length === 0) {
+      setIsEnd(true);
+      setLoading(false);
+      return;
+    }
+
+    const filtered = newMovies.filter(
+      (movie) => !movieIdsRef.current.has(movie.id)
+    );
+
+    if (filtered.length === 0) {
+      setPage((prev) => prev + 1);
+      setLoading(false);
+      return;
+    }
+
+    filtered.forEach((movie) => movieIdsRef.current.add(movie.id));
+
+    setMovies((prev) => [...prev, ...filtered]);
+    setPage((prev) => prev + 1);
+
+    setLoading(false);
+  }, [page, loading, isEnd]);

  useEffect(() => {
-    fetchPopularMovies()
-      .then((data) => setMovies(data))
-      .finally(() => setLoading(false));
+    loadFeaturedMovies();
+    loadMovies();
  }, []);

-  if (loading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-yellow-400"></div>
-      </div>
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const target = entries[0];
+        if (target.isIntersecting && !loading) {
+          loadMovies();
+        }
+      },
+      { threshold: 0.5 }
    );
-  }
+
+    if (loaderRef.current) observer.observe(loaderRef.current);
+    return () => loaderRef.current && observer.unobserve(loaderRef.current);
+  }, [loadMovies]);


이 부분도 컴포넌트 안에 비즈니스 로직이 너무 많아요 분리 해주는 작업이 좋습니다 !
useInfiniteMovies.ts, useFeaturedMovies.ts

이런식으로 분리 작업 해주면 좋습니다

anneedesign-ui and others added 19 commits October 28, 2025 11:36

feat: TMdb API 환경변수 설정 추가

d4f9f38

mission1 done

c2bc5b1

feat: TMdb API 호출 함수 구현

25d9864

feat: TMdb API 연동 완료 - 더미 데이터를 실제 API로 교체

957448a

fix: 상세보기 메뉴 제거하여 404 에러 수정

6a25f3d

Merge pull request OZ-Coding-School#15 from anneedesign-ui/feature/mi…

190af1c

…ssion-2 [mission2] 2단계 미션 구현 - 안지선 / 1팀

Revert "Merge pull request OZ-Coding-School#15 from anneedesign-ui/fe…

3cb8835

…ature/mission-2" This reverts commit 190af1c, reversing changes made to cae66dc.

[mission2] done

ec7805c

Merge pull request OZ-Coding-School#25 from fortes42-lgtm/mission-2

b185bf8

[Mission 2] 2단계 미션 구현 - 박진우A / 2팀

Revert "Merge pull request OZ-Coding-School#25 from fortes42-lgtm/mis…

7108d65

…sion-2" This reverts commit b185bf8, reversing changes made to 3cb8835.

Merge branch 'OZ-Coding-School:main' into main

1ff4a90

3단계 완료

3dc7874

오류해결

4107fac

Merge recover-work into main (resolved conflicts)

174b202

추가 수정완료

fd71794

절대경로 수정

0f4f9a2

5단계 구현 완료

c6cbd0f

도전과제 구현완료

ffc0596

마이페이지 스타일 개선

dc1d720

han-nun0107 reviewed Nov 24, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Mission 5 박한별 #54

Mission 5 박한별 #54

Uh oh!

juhan0628 commented Nov 24, 2025

Uh oh!

han-nun0107 left a comment

Uh oh!

han-nun0107 Nov 24, 2025

Uh oh!

han-nun0107 Nov 24, 2025

Uh oh!

han-nun0107 Nov 24, 2025

Uh oh!

han-nun0107 Nov 24, 2025

Uh oh!

han-nun0107 Nov 24, 2025

Uh oh!

han-nun0107 Nov 24, 2025

Uh oh!

han-nun0107 Nov 24, 2025

Uh oh!

han-nun0107 Nov 24, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

		import Layout from "@components/Layout";
		import OAuthCallback from "@components/OAuthCallback";

Mission 5 박한별 #54

Are you sure you want to change the base?

Mission 5 박한별 #54

Uh oh!

Conversation

juhan0628 commented Nov 24, 2025

구현 사항

어려웠던 점

구현 이미지

Uh oh!

han-nun0107 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants