231025_TIL

고병옥·2023년 10월 25일
0

오늘 팀프로젝트를 진행하면서 작성했던 코드로 대신한다

  1. html 간 파라메터 전송
    const urlParams = new URLSearchParams(window.location.search);
    const id = urlParams.get('id');

  2. tmdb api 활용

  • 관람연령을 가져오고싶었는데, 쉽지않았음. 일단 국가별로 관람가 기준이 다르고. 해당 영화가 어떤 국가에서 가져오는지, 해당영화의 개봉일(개봉일에 따라 등급이 다시부여되기도 하나봄)에 등급..등으 조합해서 써야함... 그렇게 구현했는데, 문제는 certi값이 ALL로 리턴했는데, 국가코드 KR에서 매칭되는 등급이 없어서 봣더니.. All..... 아 이런거까지 처리를..해야..할까 하면서 그냥 덮었다.
  1. git 사용법
  • pull request , 깃페이지에서 진행, 특정브런치간 merge할때 쓰임.
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
 
  <script>
    // 임시 tmdb 키
    const options = {
      method: 'GET',
      headers: {
        accept: 'application/json',
        Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIzZTIMThhMzFiODI2YiIsInN1YiI6IjY1MmY3NTI3Y2FlZjJkMDExY2M3NjQwMSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.Y2O9RbcGo7qPJ-yEOEqGlxpeVLpN8wEti5QxngyiAYo'
      }
    };
 
    document.addEventListener('DOMContentLoaded', function () {
      // 임시 url 파라메터 가져오는부분
      const urlParams = new URLSearchParams(window.location.search);
      const id = urlParams.get('id');
 
 
 
 
      fetch(`https://api.themoviedb.org/3/movie/${id}?language=ko-KR`, options)
        .then(response => response.json())
        .then(response => setDetailInfo(response))
        .catch(err => console.error(err));
 
      fetch(`https://api.themoviedb.org/3/movie/${id}/credits?language=ko-KR`, options)
        .then(response => response.json())
        .then(response => searchDirector(response))
        .catch(err => console.error(err));
 
      fetch(`https://api.themoviedb.org/3/movie/${id}/images`, options)
        .then(response => response.json())
        .then(response => searchImage(response))
        .catch(err => console.error(err));
 
      fetch(`https://api.themoviedb.org/3/movie/${id}/release_dates`, options)
        .then(response => response.json())
        .then(response => searchRelease(response))
        .catch(err => console.error(err));
 
 
    });
 
    function setDetailInfo(response) {
      console.log(response);
      document.querySelector('#detailInfo .title').innerHTML = response.title;
      document.querySelector('#detailInfo .releaseDate').innerHTML = response.release_date;
      document.querySelector('#detailInfo .voteAverage').innerHTML = response.vote_average;
      // document.querySelector('#detailInfo .meme').innerHTML = response.vote_average;
      document.querySelector('#detailInfo .genres').innerHTML = response.genres.reduce((str, e, idx) => { return str += e.name + (response.genres.length != idx + 1 ? ', ' : ''); }, '');
      document.querySelector('#detailInfo .runtime').innerHTML = minToHourMin(response.runtime);
      document.querySelector('#detailInfo .overview').innerHTML = response.overview;
 
    }
 
    function searchDirector(response) {
      console.log(response);
      // jsonData.crew.filter(({job})=> job ==='Director')
      let directorArray = response.crew.filter((e) => { return e.job === 'Director' });
      console.log(directorArray);
      document.querySelector('#detailInfo .director').innerHTML = directorArray[0].name;
 
      let actorArray = response.cast.filter((e) => { return e.known_for_department === 'Acting' });
      console.log(actorArray);
      document.querySelector('#detailInfo .actor').innerHTML = actorArray.reduce((str, e, idx) => { return str += e.name + (actorArray.length != idx + 1 ? ', ' : ''); }, '');
    }
 
    function searchImage(response) {
      console.log(response);
      let tempHtml = '';
      response.backdrops.forEach((e) => {
        tempHtml += `
          <img src="https://image.tmdb.org/t/p/w300/${e.file_path}">
        `;
      });
 
      document.querySelector('#detailInfo .images').innerHTML = tempHtml;
    }
 
    function searchRelease(response) {
      console.log(response);
 
      let releaseArray = response.results;
      console.log(releaseArray);
 
      let release = response.results.find((result) => {
        if (result.iso_3166_1 === 'KR') {
          return true;
        }
      });
      // let release;
 
      // 한국 없으면 최상단 배열값
      if (release === undefined) {
        release = releaseArray[0];
      }
 
      document.querySelector('#detailInfo .certification').innerHTML = release.release_dates[0].certification;
 
      // 음.. 이부분 이슈가 있어서 그냥............
      //searchCertification(release.iso_3166_1, release.release_dates[0].certification);
    }
 
    function searchCertification(iso, cert) {
      fetch(`https://api.themoviedb.org/3/certification/movie/list`, options)
        .then(response => response.json())
        .then(response => {
          console.log(response.certifications[iso]);
          //console.log(response.certifications[iso]);
          console.log(iso, response);
          
          document.querySelector('#detailInfo .meaning').innerHTML = '권장연령미확인';
 
          let certificationByIso = response.certifications[iso];
          if (certificationByIso !== undefined) {
            let certification = certificationByIso.find((e) => { if (e.certification === cert) { return true; } });
            console.log(certification);
            if (certification !== undefined) {
              document.querySelector('#detailInfo .meaning').innerHTML = '(' + certification.meaning + ')';
            }
          }
        })
        .catch(err => console.error(err));
    }
 
    function minToHourMin(min) {
      let hour = Math.floor(min / 60);
      let leftMin = min % 60;
 
      return hour > 0 ? (hour + '시간 ' + leftMin + '분') : (leftMin + '분');
    }
  </script>
</head>
 
<body>
  <!-- 상세정보 -->
  <div id="detailInfo">
    <h2 class="title">제목</h2>
    <div>
      <p class="releaseDate">개봉일자</p>
    </div>
    <div>
      <p class="voteAverage">영화평점</p>
    </div>
    <div>
      <span class="certification">관람가</span><!-- <small class="meaning">설명</small>--> / <span class="genres">장르</span> / <span
        class="runtime">상영시간</span>
    </div>
    <div>
      <span class="director">감독</span> / <span class="actor">출연진</span>
    </div>
    <div>
      <p class="overview">세부내용</p>
    </div>
    <div>
      <div class="images">
        사진들
      </div>
    </div>
  </div>
  <!-- 상세정보 끝 -->
 
</body>
 
</html>
cs
profile
고병옥
천천히 그리고 단단하게
이전 포스트

231024_TIL

다음 포스트

231026_TIL

0개의 댓글