fix: 스크롤효과 적용, 이전 주석 제거

codestates-seb · Jul 21, 2023 · 2acd7be · 2acd7be
1 parent e082c6f
commit 2acd7be
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 71 deletions.
diff --git a/client/src/pages/DetailsPage/DetailsPage.tsx b/client/src/pages/DetailsPage/DetailsPage.tsx
@@ -63,28 +63,6 @@ const DetailsPage = () => {
     setIsModalOpen(false);
   };
 
-  // css 스크롤 효과 (주석 두번부분은 메인 이미지가 있을때 사용-> 100vh)
-  // const [scrollPosition, setScrollPosition] = useState(0);
-  // // const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-
-  // useEffect(() => {
-  //   const handleScroll = () => {
-  //     setScrollPosition(window.scrollY);
-  //   };
-
-  //   // const handleResize = () => {
-  //   //   setWindowWidth(window.innerWidth);
-  //   // };
-
-  //   window.addEventListener('scroll', handleScroll);
-  //   // window.addEventListener('resize', handleResize);
-
-  //   return () => {
-  //     window.removeEventListener('scroll', handleScroll);
-  //     // window.removeEventListener('resize', handleResize);
-  //   };
-  // }, []);
-
   return (
     <>
       {isError ? (
@@ -98,14 +76,6 @@ const DetailsPage = () => {
           <MovieTitle />
           {/* 영화정보 */}
           <MovieInfo />
-
-          {/* css 스크롤 효과 */}
-          {/* <div
-            className="absolute bottom-0 left-0 z-10 w-full bg-white" //  duration-500 ease-out 고민
-            // style={{ height: `${scrollPosition}px` }}
-            style={{ top: `calc(60vh - ${scrollPosition}px)` }}
-          ></div> */}
-
           {/* 리뷰 */}
           <div className="mx-auto my-0 max-w-[1320px] p-8">
             <div className="mb-6 flex justify-between">

diff --git a/client/src/pages/DetailsPage/MovieTitle/MovieTitle.tsx b/client/src/pages/DetailsPage/MovieTitle/MovieTitle.tsx
@@ -1,59 +1,30 @@
 import { useAppSelector } from '../../../redux-toolkit/hooks';
 import { selectMovieDetails } from '../../../redux-toolkit/slices/movieDetailSlice';
 
-// interface windowWidthProps {
-//   windowWidth: number;
-// }
 const MovieTitle = () => {
   const movieDetail = useAppSelector(selectMovieDetails);
 
-  // css 스크롤 효과(아래 스크롤바가 생길때, 뷰포트를 조정)
-  // let scrollbarHeight = 0;
-  // if (windowWidth <= 697) {
-  //   scrollbarHeight = window.innerHeight - document.documentElement.clientHeight + 14;
-  // }
   return (
-    // h-movieTitle -> 스크롤 높이만큼 제거된 height
-
-    // 이전 css
-    // <div className="relative h-[60vh] w-full">
-    //   {/* 메인이미지 있을시, 사용 */}
-    //   {/* <img className="h-full w-full" src={movieDetail?.movie.posterUrl} alt="Main Img" /> */}
-    //   <div className="h-full w-full bg-theme1" />
-    //   <div className="absolute left-0 top-[55%] h-full w-full">
-    //     <div className="mx-auto my-0 max-w-[1320px] px-10">
-    //       <p className="mb-1 text-6xl font-bold text-white">{movieDetail?.movie.title}</p>
-    //       <p className="mb-4 ml-1 text-lg text-white">{movieDetail?.movie.titleEng}</p>
-    //       <p className="text-xl font-medium text-white">
-    //         {movieDetail?.movie.repRlsDate} ·{' '}
-    //         {movieDetail?.movie.genre.length !== 0 ? movieDetail?.movie.genre : '(장르)'} ·{' '}
-    //         {movieDetail?.movie.nation.length !== 0 ? movieDetail?.movie.nation : '(국가)'}
-    //       </p>
-    //       <p className="text-xl font-medium text-white">
-    //         {movieDetail?.movie.runtime.length !== 0
-    //           ? movieDetail?.movie.runtime + '분'
-    //           : '(상영시간)'}{' '}
-    //         · {movieDetail?.movie.rating.length !== 0 ? movieDetail?.movie.rating : '(연령)'}
-    //       </p>
-    //     </div>
-    //   </div>
-    // </div>
-    // 이전 css
-
+    // background img사용해서, absolute 사용할 필요 없어짐
     <div
       className={`flex w-full items-center ${movieDetail?.movie.backdrop ? '' : 'bg-theme1'} ${
-        movieDetail?.movie.backdrop ? 'custom-height' : 'h-[60vh]'
-        // h-[60vh] -> 이미지 없을때
+        movieDetail?.movie.backdrop ? 'custom-height' : 'h-[50vh]'
       }`}
       style={{
         backgroundImage: movieDetail?.movie.backdrop
           ? `url(${movieDetail?.movie.backdrop})`
           : undefined,
         backgroundSize: movieDetail?.movie.backdrop ? 'cover' : undefined,
         backgroundPosition: movieDetail?.movie.backdrop ? 'center' : undefined,
+        backgroundAttachment: 'fixed',
+        backgroundRepeat: 'no-repeat',
       }}
     >
-      <div className="mx-auto mt-60 w-[1320px] px-8 text-white">
+      <div
+        className={`mx-auto ${
+          movieDetail?.movie.backdrop ? 'mt-60' : 'mt-32'
+        }  w-[1320px] px-8 text-white`}
+      >
         <p className="mb-1 text-7xl font-bold">{movieDetail?.movie.title}</p>
         <p className="mb-4 ml-1 text-xl">{movieDetail?.movie.titleEng}</p>
         <p className="text-2xl font-medium">

diff --git a/client/tailwind.config.js b/client/tailwind.config.js
@@ -20,9 +20,6 @@ export default {
         maindarkgray: '#5A5A5A',
         maingray: '#F2F2F2',
       },
-      height: {
-        movieTitle: 'calc(100vh - 121px)',
-      },
     },
   },
   plugins: [],