프로젝트 연습> OTT 클론 코딩

 

D_infor.html

0.01MB

D_ost.html

0.00MB

Drama.html

0.01MB

M_OST.html

0.01MB

Movies.html

0.01MB

title.html

0.00MB

moveweb-afe1b.web.app

 

<음악과 드라마의 정보와 관련 ost, 음악을 같이 연동시켜보기>

 

API - 유튜브 ,tmbd, tunefind ,vibe

*영화 ost api가 없어서 선택한 tunefind. (주소랑 데이터랑 연경 시키기)

앞 페이지에서 표지를 클릭하면 영어로 등록된 네임이 로컬에 저장, 다음페이지에서 로컬에서 꺼내서, 리플레이스로 주소에 맞게 설정. 연동됨.

onst updateTuneFindURL = (title) => {

                const formattedTitle = title

                    .toLowerCase()

                    .replace(/[^a-z0-9]+/g, '-')

                    .replace(/(^-|-$)/g, '');

                const tunefindURL = `https://www.tunefind.com/movie/${formattedTitle}`;

                document.getElementById('title').innerText = `${title} Soundtrack`;

                document.getElementById('tunefind-frame').src = tunefindURL;

            };

            fetchMovieDetails();

            fetchMovieCredits();

            fetchMovieVideos();

        });

 

새로 써본 기능 :  swpier (슬라이드 기능, 자동 움직임 등) , api 연동, LINK 타자기능 , 로컬서버 이용 

 

구현해야할 기능>

드라마 쪽은 API 연동이 없어서, 하드작업. 데이터로 구현 해야함.

 

영화 사이트 데이터로, 로그인창, nav바 ,  장르별, 검색
반응형 으로 

node or 리액트로 만들어보기