OZ-Coding-School · jjub0217 · Oct 21, 2025 · Oct 21, 2025
diff --git a/src/App.jsx b/src/App.jsx
@@ -8,7 +8,7 @@ import { MovieDetail } from "./components/MovieDetail";
 import { MovieSearch } from "./components/MovieSearch";
 import MyFavorite from "./components/MyFavorite";
 import { MyPage } from "./components/MyPage";
-import { MyPageHome } from "./components/myPageHome";
+import { MyPageHome } from "./components/MyPageHome";
 import { MyProfile } from "./components/MyProfile";
 import { MyReview } from "./components/MyReview";
 import OAuthCallback from "./components/OAuthCallback";
@@ -37,7 +37,7 @@ function App() {
     `${API_URL}/movie/popular?language=ko&page=1`
   );
   const { data: topData } = useFetch(
-    `${API_URL}/movie/top_rated?language=en-US&page=1`
+    `${API_URL}/trending/movie/day?language=en-US&page=1`
   );
   const { data: playingList } = useFetch(
     `${API_URL}/movie/now_playing?language=ko&page=1`

diff --git a/src/App.scss b/src/App.scss
@@ -16,7 +16,7 @@
 
 body.dark {
   background-color: #1b1b1b;
-  color: #a5a5a5;
+  color: #fff;
   .divider {
     background-color: rgba(255, 255, 255, 0.2);
   }
@@ -56,9 +56,16 @@ body.light {
       }
     }
   }
+  .movie-tab__info {
+    .inner {
+      .movie-tabs-content {
+        background: #dfdfdf;
+      }
+    }
+  }
   .movie-tabs-content {
     & > div {
-      background-color: #cfcfcf;
+      // background-color: #dfdfdf;
     }
   }
   .dashboard,
@@ -204,18 +211,24 @@ input[type="file"] {
 .movie-detail,
 .movie-tab__info {
   .inner {
-    padding: 0 5vw;
-    // width: 50vw;
     height: auto;
-    // padding-left: 0;
     @media screen and (max-width: 768px) {
       width: 100%;
     }
   }
 }
+.movie-detail {
+  .inner {
+    padding: 0 5vw;
+  }
+}
 .movie-tab__info {
   .inner {
-    padding-right: 0;
+    padding: 0 3vw;
+    .movie-tabs-content {
+      padding: 1.25rem 2vw;
+      border-radius: 1.25rem;
+    }
   }
 }
 
@@ -494,13 +507,13 @@ input[type="file"] {
   .movie-poster {
     position: relative;
     min-width: 1240px;
-    padding-bottom: calc((655 / 1600) * 100%) !important;
+    padding-bottom: 32% !important;
     @media screen and (max-width: 1700px) {
-      padding-bottom: 53% !important;
+      padding-bottom: 42% !important;
     }
     @media screen and (max-width: 768px) {
       min-width: auto;
-      padding-bottom: 130% !important;
+      padding-bottom: 100% !important;
     }
     .movie-poster {
       position: absolute !important;
@@ -545,10 +558,10 @@ input[type="file"] {
       position: absolute;
       bottom: 20px;
       left: auto;
-      right: calc(50% - 620px);
+      right: calc(50% - 730px);
       transform: translate(-50%);
       background-color: rgba(0, 0, 0, 0.6);
-      padding: 4px 10px;
+      padding: 3px 10px;
       color: #fff;
       border-radius: 20px;
       width: auto;
@@ -560,19 +573,20 @@ input[type="file"] {
       justify-content: center;
     }
     .swiper-pagination-current {
-      font-size: 0.9rem;
+      font-size: 0.8rem;
     }
     .swiper-pagination-total {
       display: flex;
       align-items: center;
       justify-content: center;
       color: hsla(0, 0%, 100%, 0.7);
+      font-size: 0.8rem;
 
       &::before {
         display: block;
-        margin: 0 10px;
+        margin: 0 8px;
         width: 1px;
-        height: 10px;
+        height: 12px;
         background-color: hsla(0, 0%, 100%, 0.2);
         content: "";
       }
@@ -583,22 +597,22 @@ input[type="file"] {
   }
 }
 .favorite-btn {
-  width: 3rem;
-  height: 3rem;
+  width: 2.5rem;
+  height: 2.5rem;
   top: 10px;
   right: 10px;
   @media screen and (max-width: 768px) {
-    width: 2.3rem;
-    height: 2.3rem;
+    width: 2rem;
+    height: 2rem;
     top: 5px;
     right: 5px;
   }
   .bookmark {
-    width: 2rem;
-    height: 2rem;
+    width: 1.3rem;
+    height: 1.3rem;
     @media screen and (max-width: 768px) {
-      width: 1.3rem;
-      height: 1.3rem;
+      width: 0.9rem;
+      height: 0.9rem;
     }
   }
 }
@@ -820,7 +834,7 @@ input[type="file"] {
     bottom: 3px;
     width: 25px;
     height: 25px;
-    background: url("../public/images/Ico_search.png") no-repeat center / cover;
+    background: url("../images/Ico_search.png") no-repeat center / cover;
   }
 }
 
@@ -972,9 +986,8 @@ input[type="file"] {
   }
 }
 .average-rating-count {
-  width: 100%;
   @media screen and (max-width: 768px) {
-    // flex-direction: column;
+    width: 100%;
     padding-top: 30px;
   }
 }
diff --git a/src/components/CommentContent.jsx b/src/components/CommentContent.jsx
@@ -18,7 +18,7 @@ export const CommentContent = ({ detailInfo, commentCount }) => {
   };
 
   return (
-    <div className="mt-6">
+    <div>
       <p className="text-gray-400 text-[1.4rem] max-[1279px]:text-[1.2rem] max-[768px]:text-[1rem]">
         리뷰 <span>{commentCount}</span>개
       </p>
@@ -31,14 +31,20 @@ export const CommentContent = ({ detailInfo, commentCount }) => {
       />
 
       {detailInfo.length ? (
-        detailInfo.map((el) => {
+        detailInfo.map((el, i) => {
           const isExpanded =
             Array.isArray(selectIds) && selectIds.includes(el.id);
+          const isLast = i === detailInfo.length - 1;
           return (
             <div
               key={el.id}
-              style={{ borderColor: "rgba(255, 255, 255, 0.2)" }}
-              className="pt-[2rem] border-b-[1px] pb-[20px]"
+              style={{
+                borderColor: "rgba(255, 255, 255, 0.2)",
+                borderBottom: isLast
+                  ? "none"
+                  : "1px solid rgba(255, 255, 255, 0.2)",
+              }}
+              className="pt-[2rem] pb-[20px]"
             >
               <div className="text-sm text-gray-400 flex gap-[10px] items-center pb-[1rem]">
                 <div

diff --git a/src/components/Login.jsx b/src/components/Login.jsx
@@ -25,7 +25,7 @@ export const Login = () => {
     const isValid = Object.values(errorType).every((val) => val === "");
     if (!isValid) return;
     const { email, password } = loginUserInfo;
-    const { data, error } = await login({ email, password });
+    const { error } = await login({ email, password });
     // console.log("✅ 로그인 응답:", data, error);
     if (!error) {
       navigate("/");

diff --git a/src/components/MovieCard.jsx b/src/components/MovieCard.jsx
@@ -41,7 +41,6 @@ export const MovieCard = memo((props) => {
   return (
     <CardContainer onClick={handleToDetail} isSwiper={isSwiper}>
       <div className="movie-poster ">
-        {/* {!isLoaded && <p>🖼️ 이미지 로딩 중...</p>} */}
         <img
           src={
             isSwiper

diff --git a/src/components/MovieDetail.jsx b/src/components/MovieDetail.jsx
@@ -12,13 +12,11 @@ import { Tabs } from "./Tabs";
 export const MovieDetail = () => {
   const { id } = useParams();
   const { data: movieDetail } = useFetch(`${API_URL}/movie/${id}?language=ko`);
-  // const [isLoaded, setIsLoaded] = useState(false);
   const [activeTab, setActiveTab] = useState("comments");
   const [loadedCount, setLoadedCount] = useState(0);
   const { data: detailInfo } = useFetch(
     `${API_URL}/movie/${id}/reviews?language=en-US&page=1`
   );
-  // console.log(movieDetail);
 
   const commentList = detailInfo?.results ?? [];
   const commentCount = detailInfo?.results?.length ?? 0;
@@ -37,7 +35,7 @@ export const MovieDetail = () => {
   const isAllLoaded = loadedCount >= totalImageCount;
 
   return (
-    <div className="mt-[2rem] relative">
+    <div className="relative">
       {!isAllLoaded && (
         <div className="fixed inset-0 z-[9999] flex justify-center items-center bg-black bg-opacity-60">
           <div className="relative w-12 h-12">
@@ -90,15 +88,12 @@ export const MovieDetail = () => {
             </div>
 
             <div className="movie-poster__backdrop h-full">
-              {/* {!isLoaded && <p>🖼️ 이미지 로딩 중...</p>} */}
               <img
                 src={`${IMAGE_BASE_URL.backdrop}${movieDetail.backdrop_path}`}
                 alt={movieDetail.title}
                 onLoad={onImageLoad}
                 style={{
                   visibility: isAllLoaded ? "visible" : "hidden",
-                  // width: "100%",
-                  // height: "auto",
                 }}
                 className="h-full object-cover"
               />
@@ -107,12 +102,11 @@ export const MovieDetail = () => {
         </div>
       </section>
       <section className="movie-tab__info pb-[80px] mt-[6.5rem] max-[768px]:px-[5vw] ">
-        <div className="inner text-left w-full ">
+        <div className="inner text-left w-full">
           <Tabs setActiveTab={setActiveTab} tabs={tabs} id={id} />
           <div className="movie-tabs-content">
             <div
               style={{ display: activeTab === "comments" ? "block" : "none" }}
-              className="pr-[5vw]"
             >
               <CommentContent
                 detailInfo={commentList}

diff --git a/src/components/MyPage.jsx b/src/components/MyPage.jsx
@@ -9,12 +9,12 @@ import { Tabs } from "./Tabs";
 export const MyPage = () => {
   const tabs = getMyTabs();
 
-  const { getReviews, updateReview, deleteReview } = useSupabaseReview();
+  const { getReviews } = useSupabaseReview();
   const { user, setFavoriteList: setGlobalFavoriteList } = useSupabase();
   const { fetchFavorites } = useSupabaseFavorite();
   const [favoriteList, setFavoriteList] = useState([]);
   const [reviewData, setReviewData] = useState(null);
-  const [loading, setLoading] = useState(true);
+  const [setLoading] = useState(true);
 
   useEffect(() => {
     const fetch = async () => {

diff --git a/src/components/MyPageHome.jsx b/src/components/MyPageHome.jsx
@@ -138,8 +138,8 @@ export const MyPageHome = () => {
                 </p>
               </div>
             ) : (
-              <div lassName="grid grid-cols-4 gap-4 dashboard-favorite">
-                {favoriteList.slice(0, 5).map((movie) => (
+              <div className="grid grid-cols-4 gap-4 dashboard-favorite">
+                {favoriteList.slice(0, 8).map((movie) => (
                   <div
                     key={movie.id}
                     className="movie-poster rounded-xl overflow-hidden"

diff --git a/src/components/MyProfile.jsx b/src/components/MyProfile.jsx
@@ -112,7 +112,7 @@ export const MyProfile = () => {
             <img
               src={user?.user_metadata?.profileImage || "images/user.png"}
               alt="프로필 이미지"
-              className="w-full h-[5rem] rounded-full object-contain"
+              className="w-full h-full rounded-full object-cover"
             />
             <button
               type="button"

diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
@@ -69,7 +69,7 @@ export default function NavBar() {
 
   return (
     <nav className="">
-      <div className="inner flex h-[74px] justify-between items-center px-[5vw]">
+      <div className="inner flex h-[74px] justify-between items-center px-[6vw]">
         <h1 className="font-semibold">
           <Link to="/" className="flex items-center">
             <span className="font-Pixgamer text-[2.4rem] font-black">OZ</span>
@@ -103,11 +103,11 @@ export default function NavBar() {
             onMouseLeave={() => setIsHovering(false)}
             onClick={toggleMenu} // 모바일 대응
           >
-            <div className="w-[43px] h-[43px] rounded-full bg-gray-700 flex items-center justify-center">
+            <div className="w-[25px] h-[25px] flex items-center justify-center">
               <img
                 src={user?.user_metadata?.profileImage || "images/user.png"}
                 alt="프로필 이미지"
-                className="w-full h-full rounded-full object-cover max-[768px]:object-contain max-[768px]:h-[1.5rem]"
+                className="w-full h-full object-cover max-[768px]:object-contain max-[768px]:h-[1.5rem]"
               />
             </div>
             <div

diff --git a/src/components/RecommendContent.jsx b/src/components/RecommendContent.jsx
@@ -103,19 +103,19 @@ export const RecommendContent = ({ id, genres }) => {
               modules={[Navigation]}
               breakpoints={{
                 320: {
-                  slidesPerView: 3.5,
+                  slidesPerView: 4,
                 },
                 640: {
-                  slidesPerView: 3.5,
+                  slidesPerView: 4,
                 },
                 768: {
-                  slidesPerView: 6.5,
+                  slidesPerView: 7.5,
                 },
                 1279: {
-                  slidesPerView: 5.2,
+                  slidesPerView: 6,
                 },
                 1920: {
-                  slidesPerView: 11.5,
+                  slidesPerView: 12.5,
                 },
               }}
             >
@@ -147,19 +147,19 @@ export const RecommendContent = ({ id, genres }) => {
               modules={[Navigation]}
               breakpoints={{
                 320: {
-                  slidesPerView: 3.5,
+                  slidesPerView: 4,
                 },
                 640: {
-                  slidesPerView: 3.5,
+                  slidesPerView: 4,
                 },
                 768: {
-                  slidesPerView: 6.5,
+                  slidesPerView: 7.5,
                 },
                 1024: {
-                  slidesPerView: 5.5,
+                  slidesPerView: 6.5,
                 },
                 1920: {
-                  slidesPerView: 11.5,
+                  slidesPerView: 12.5,
                 },
               }}
             >