Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
woodzverse merged 9 commits into from
Nov 27, 2025
Merged

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

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ee6a2e2
refactor: 누적 관람 상단 여백 수정
woodzverse Nov 26, 2025
975ed37
refactor: 관람평 목록 여백 수정
woodzverse Nov 26, 2025
7156f6d
refactor: 헤더 뒤로가기 기능 추가 및 아이콘들 호버 효과 추가
woodzverse Nov 26, 2025
9066d52
refactor: 한줄 소개 짧은 줄거리, 긴 줄거리 모두 보이도록 수정
woodzverse Nov 26, 2025
fdae899
refactor: 리뷰 좋아요 아이콘 호버 효과 추가
woodzverse Nov 26, 2025
c940a45
fix: lint 오류 해결
woodzverse Nov 26, 2025
daee100
refactor: 헤더 정렬 수정(제목 가운데 위치)
woodzverse Nov 26, 2025
1808483
feat: 리뷰 반영(rem 수정 및 cn 반영)
woodzverse Nov 27, 2025
31c715f
fix: lint 오류 해결
woodzverse Nov 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions src/pages/movie-detail/@section/InfoSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
2 changes: 1 addition & 1 deletion src/pages/movie-detail/@section/ReviewSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export default function ReviewSection() {
실관람평 작성하고 포인트 받기
</Button>

<section className='flex flex-col gap-[1.5rem]'>
<section className="flex flex-col items-start self-stretch py-[0.9375rem] gap-[1px]">
Copy link
Collaborator

@huniversal huniversal Nov 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저 py-[0.9375rem]은 무엇일까요..?

Copy link
Member

@sminha sminha Nov 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

gap-[1px]은 rem 사용하면 좋을 것 같아요!

Copy link
Collaborator Author

@woodzverse woodzverse Nov 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수정했습니다. py-[0.9375rem] 이거는 피그마에 패딩 픽셀값이 15px여서 했던 건데 실관람평 버튼에 gap 주는 쪽으로 수정했습니다.

<h2 className="mb-2 font-title3">
<span className="text-gray-0">실관람평 </span>
<span className="text-violet-500">{totalReviewCountText}</span>
Expand Down
21 changes: 12 additions & 9 deletions src/pages/movie-detail/MovieDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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',
Expand All @@ -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}
Expand Down Expand Up @@ -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}
Expand All @@ -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]'>
Expand Down
6 changes: 0 additions & 6 deletions src/pages/movie-detail/hooks/use-movie-detail.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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() {
Expand All @@ -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,
};
Expand Down
26 changes: 16 additions & 10 deletions src/shared/components/header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,37 +42,43 @@ export default function Header({
}

return (
<header className={headerClassName}>
<header className={headerClassName}>
<div className="w-[3.6rem] flex items-center justify-start">
<IconSystemBack
aria-label='뒤로가기'
className='h-[2.4rem] w-[2.4rem] cursor-pointer'
className='h-[2.4rem] w-[2.4rem] cursor-pointer transition-transform active:scale-90 hover:opacity-70'
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]'>
<div className="w-[3.6rem] flex items-center justify-end">
{icon && (
<div className="flex items-center gap-[1.3rem]">
{liked ? (
<IconHeartFill
aria-label='하트 취소'
className='h-[2.4rem] w-[2.4rem] cursor-pointer'
className='h-[2.4rem] w-[2.4rem] cursor-pointer transition-transform active:scale-90 hover:opacity-70'
onClick={() => setLiked(false)}
/>
) : (
<IconHeart
aria-label='하트 클릭'
className='h-[2.4rem] w-[2.4rem] cursor-pointer'
className='h-[2.4rem] w-[2.4rem] cursor-pointer transition-transform active:scale-90 hover:opacity-70'
onClick={() => setLiked(true)}
/>
)}

<IconSystemShare
aria-label='공유하기'
className='h-[2.4rem] w-[2.4rem] cursor-pointer text-white'
className='h-[2.4rem] w-[2.4rem] cursor-pointer text-white transition-transform active:scale-90 hover:opacity-70'
Copy link
Member

@sminha sminha Nov 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

추가해주신 속성들이 반복되고 있는데, 아예 따로 변수로 정의해두고 cn으로 합쳐도 좋을 것 같아요!

/>
</div>
}
</header>
)}
</div>
</header>
);
}
2 changes: 1 addition & 1 deletion src/shared/components/review/Review.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down