[refactor/#81] 영화 정보 확인 페이지 QA

src/pages/movie-detail/@section/InfoSection.tsx

@@ -25,8 +25,7 @@ export default function InfoSection({
   const goods = movieMedia.goods ?? null;
 
   return (
-    <div className='flex flex-col gap-[2.8rem] p-[1.7rem]'>
-≈
+    <div className='flex flex-col gap-[2rem] pt-[1rem] px-[1.75rem] pb-[1.75rem]'>
       <section className='flex flex-col gap-[1.4rem]'>
         <h2 className='font-title3 text-gray-0 mb-[1rem]'>누적관람</h2>
 

src/pages/movie-detail/@section/ReviewSection.tsx

@@ -74,12 +74,12 @@ export default function ReviewSection() {
           연출, 영상미 좋은 영화
         </p>
       </section>
-      <div className="px-[1.7rem] flex flex-col gap-[1.5rem]">
+      <div className="px-[1.7rem] flex flex-col gap-[2rem]">
         <Button variant='secondary' className='mt-[3.2rem] w-full py-3'>
           실관람평 작성하고 포인트 받기
         </Button>
 
-        <section className='flex flex-col gap-[1.5rem]'>
+        <section className="flex flex-col items-start self-stretch gap-[0.5rem]">
           <h2 className="mb-2 font-title3">
             <span className="text-gray-0">실관람평 </span>
             <span className="text-violet-500">{totalReviewCountText}</span>

src/pages/movie-detail/MovieDetail.tsx

@@ -1,5 +1,4 @@
 import { useParams, useNavigate } from 'react-router-dom';
-
 import { Header, Movie, Button } from '@components/index';
 import { InfoSection, ReviewSection } from '@pages/movie-detail/@section';
 import { useMovieDetail } from '@pages/movie-detail/hooks/use-movie-detail';
@@ -77,9 +76,7 @@ export default function MovieDetail() {
     detail?.description ?? MOVIE_DETAIL_DESCRIPTION.full;
   const shortDescription =
     detail?.summary ?? MOVIE_DETAIL_DESCRIPTION.short;
-  const descriptionText = isDescriptionExpanded
-    ? fullDescription
-    : shortDescription;
+
 
   const totalReviewCountCompact = new Intl.NumberFormat('en-US', {
     notation: 'compact',
@@ -94,7 +91,7 @@ export default function MovieDetail() {
 
   return (
     <div className='min-h-screen'>
-      <Header variant='movie' title={movie.title} />
+      <Header variant='movie' title={movie.title } handleClickBack={() => navigate(-1)}/>
 
       <Movie
         id={movie.id}
@@ -142,9 +139,15 @@ export default function MovieDetail() {
           바로예매
         </Button>
 
-        <section className='mt-[3.9rem]'>
+        <section className='mt-[3.9rem] mb-[3.9rem]'>
           <div className='flex w-full justify-between'>
-            <p className='font-body1 text-gray-0'>{descriptionText}</p>
+            <div className='flex flex-col gap-[0.4rem]'>
+              <p className='font-body1 text-gray-0'>{shortDescription}</p>
+              {isDescriptionExpanded && (
+                <p className='font-body1 text-gray-0'>{fullDescription}</p>
+              )}
+            </div>
+
             <Button
               variant='sub'
               onClick={handleToggleDescription}
@@ -163,10 +166,10 @@ export default function MovieDetail() {
           className='h-[7.6rem] w-full object-cover'
         />
         <span
-          className='absolute left-0 top-0 inline-flex items-center justify-center  px-[0.1875rem] py-[0.1875rem] rounded-br-[0.6rem] bg-blueGreen-500 font-label2 text-gray-0'
-        >
+        className="absolute left-0 top-0 inline-flex items-center justify-center pt-[0.125rem] pr-[0.75rem] pb-[0.1875rem] pl-[0.6875rem] rounded-br-[0.6rem] bg-blueGreen-500 font-label2 text-gray-0">
           이벤트
         </span>
+
       </div>
 
       <section className='mt-[3.9rem] flex flex-col gap-[2.8rem]'>

src/pages/movie-detail/hooks/use-movie-detail.ts

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { MOVIE_DETAIL_DESCRIPTION } from '@pages/movie-detail/mock';
 import type { MovieDetailMenu } from '@pages/movie-detail/types/menu';
 
 export function useMovieDetail() {
@@ -14,14 +13,9 @@ export function useMovieDetail() {
     setIsDescriptionExpanded(prev => !prev);
   };
 
-  const descriptionText = isDescriptionExpanded
-    ? MOVIE_DETAIL_DESCRIPTION.full
-    : MOVIE_DETAIL_DESCRIPTION.short;
-
   return {
     activeTab,
     isDescriptionExpanded,
-    descriptionText,
     handleClickTab,
     handleToggleDescription,
   };

src/shared/components/header/Header.tsx

@@ -6,6 +6,7 @@ import {
   IconSystemShare,
 } from '@assets/index';
 import ImgLogo from '@/../public/assets/img-logo.svg';
+import { cn } from '@utils/cn';
 
 type HeaderVariant = 'main' | 'movie';
 
@@ -16,6 +17,9 @@ interface HeaderProps {
   handleClickBack?: () => void;
 }
 
+const ICON_BASE_CLASS =
+  'h-[2.4rem] w-[2.4rem] cursor-pointer transition-transform active:scale-90 hover:opacity-70';
+
 export default function Header({
   variant = 'movie',
   title = '',
@@ -43,36 +47,40 @@ export default function Header({
 
   return (
     <header className={headerClassName}>
-      <IconSystemBack
-        aria-label='뒤로가기'
-        className='h-[2.4rem] w-[2.4rem] cursor-pointer'
-        onClick={handleClickBack}
-      />
+      <div className='w-[3.6rem] flex items-center justify-start'>
+        <IconSystemBack
+          aria-label='뒤로가기'
+          className={ICON_BASE_CLASS}
+          onClick={handleClickBack}
+        />
+      </div>
 
-      <h1 className='font-title1 flex-1 text-center'>{title}</h1>
+      <h1 className='flex-1 text-center font-title1'>{title}</h1>
 
-      {icon &&
-        <div className='flex items-center gap-[1.3rem]'>
-          {liked ? (
-            <IconHeartFill
-              aria-label='하트 취소'
-              className='h-[2.4rem] w-[2.4rem] cursor-pointer'
-              onClick={() => setLiked(false)}
-            />
-          ) : (
-            <IconHeart
-              aria-label='하트 클릭'
-              className='h-[2.4rem] w-[2.4rem] cursor-pointer'
-              onClick={() => setLiked(true)}
-            />
-          )}
+      <div className='w-[3.6rem] flex items-center justify-end'>
+        {icon && (
+          <div className='flex items-center gap-[1.3rem]'>
+            {liked ? (
+              <IconHeartFill
+                aria-label='하트 취소'
+                className={ICON_BASE_CLASS}
+                onClick={() => setLiked(false)}
+              />
+            ) : (
+              <IconHeart
+                aria-label='하트 클릭'
+                className={ICON_BASE_CLASS}
+                onClick={() => setLiked(true)}
+              />
+            )}
 
-          <IconSystemShare
-            aria-label='공유하기'
-            className='h-[2.4rem] w-[2.4rem] cursor-pointer text-white'
-          />
-        </div>
-      }
+            <IconSystemShare
+              aria-label='공유하기'
+              className={cn(ICON_BASE_CLASS, 'text-white')}
+            />
+          </div>
+        )}
+      </div>
     </header>
   );
 }

src/shared/components/review/Review.tsx

@@ -30,7 +30,7 @@ export default function Review({
         <p className='font-body1'>{content}</p>
       </div>
       <div className='flex items-center justify-end gap-[0.1rem]'>
-        <IconGoodFill className='cursor-pointer text-gray-200' />
+        <IconGoodFill className='cursor-pointer text-gray-200 transition-transform active:scale-90 hover:opacity-70' />
         <span className='font-caption2 text-blue-500'>0</span>
         <IconKebab className='cursor-pointer text-gray-200' />
       </div>