37-COLLABORATION-WEB-MEGABOX/src/pages/movie-detail/@section/InfoSection.tsx at 31c715f63e132eb315c61d1a68d06cd04024b1e6 · SOPT-all/37-COLLABORATION-WEB-MEGABOX · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import { IconUparrow } from '@assets/index';
import { Button } from '@components/index';
import { MOVIES } from '@constants/movies';

interface InfoSectionProps {
  movieId: number;

  cumulativeAudienceText: string;
  openDayText: string;
  dailyAudienceText: string;
  dailyCompareText: string;
}

export default function InfoSection({
  movieId,
  cumulativeAudienceText,
  openDayText,
  dailyAudienceText,
  dailyCompareText,
}: InfoSectionProps) {

  const movieMedia = MOVIES[movieId] ?? {};
  const trailers = movieMedia.trailers ?? [];
  const posters = movieMedia.posters ?? [];
  const goods = movieMedia.goods ?? null;

  return (
    <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>

        <div className='border-gradient-1 relative flex justify-center gap-[2rem] p-[2rem] rounded-[0.8rem] overflow-hidden'>
          <div className='pointer-events-none absolute -left-[1.5rem] top-0 h-[4.4rem] w-[4.4rem] rounded-full bg-violet-400 blur-[2.375rem]' />
          <div className='pointer-events-none absolute -right-[1.5rem] bottom-0 h-[4.4rem] w-[4.4rem] rounded-full bg-violet-400 blur-[2.375rem]' />

          <div className='flex w-full flex-col gap-[1.3rem]'>
            <p className='font-body1 text-gray-0'>누적 관객 수</p>
            <p className='font-body4 text-gray-0'>{cumulativeAudienceText}</p>
            <p className='font-caption1 text-gray-400'>{openDayText}</p>
          </div>

          <div className='h-[9.3rem] w-[0.1rem] bg-gray-200' />
          <div className='flex w-full flex-col gap-[1.3rem]'>
            <p className='font-body1 text-gray-0'>일별 관객 수</p>
            <p className='font-body4 text-gray-0'>{dailyAudienceText}</p>
            <p className='font-caption1 flex items-center gap-[0.2rem] text-violet-300'>
              {dailyCompareText}
              <IconUparrow className='h-[1.2rem] w-[1.2rem] text-violet-300' />
            </p>
          </div>
        </div>
      </section>

      <section className='flex flex-col gap-[1.4rem]'>
        <div className='flex items-center gap-[0.6rem]'>
          <h2 className='font-title3 text-gray-0'>예고편 / 트레일러</h2>
          <span className='font-title3 text-violet-500'>{trailers.length}</span>
        </div>

        <div className='scrollbar-hide w-full overflow-x-auto'>
          <div className='flex gap-[0.7rem]'>
            {trailers.map((src, index) => (
              <img
                key={index}
                src={src}
                alt={`예고편 ${index + 1}`}
                className='h-[16.3rem] object-cover'
              />
            ))}
          </div>
        </div>

        {trailers.length > 0 && (
          <p className='font-body1 text-gray-0 mt-[0.9rem]'>메인 예고편</p>
        )}
      </section>

      <section className='flex flex-col gap-[1.4rem]'>
        <div className='flex items-center gap-[0.6rem]'>
          <h2 className='font-title3 text-gray-0'>포스터 / 스틸컷</h2>
          <span className='font-title3 text-violet-500'>{posters.length}</span>
        </div>

        <div className='scrollbar-hide w-full overflow-x-auto'>
          <div className='flex gap-[0.7rem]'>
            {posters.map((src, index) => (
              <img
                key={index}
                src={src}
                alt={`포스터 / 스틸컷 ${index + 1}`}
                className='h-[19.9rem] object-cover'
              />
            ))}
          </div>
        </div>
      </section>

      {goods && (
        <section className='flex flex-col gap-[1.4rem]'>
          <div className='flex items-center justify-between'>
            <div className='flex items-center gap-[0.6rem]'>
              <h2 className='font-title3 text-gray-0'>오리지널 굿즈</h2>
              <span className='font-title3 text-violet-500'>1</span>
            </div>
            <Button variant='sub'>소진현황</Button>
          </div>

          <div className='flex flex-col gap-[0.8rem]'>
            <img
              src={goods.image}
              alt='오리지널 굿즈'
              className='h-[14rem] w-[14rem] object-cover'
            />
            <p className='font-body1 text-gray-0 mt-[0.9rem]'>{goods.title}</p>
          </div>
        </section>
      )}
    </div>
  );
}