코딩/Javascript

TIL 13일차(사이드바를 이용한 UI적용)

이즈99 2024. 5. 7. 19:04
728x90

오늘은 사이드바를 제작하고, 제작한 사이드바를 기반으로 ui가 바뀌어서 적용되는 스크립트를 작성하였다.

사이드바는

    <div class="left-side-bar">
      <div class="status-ico">
        <span>▶</span>
        <span>▼</span>
      </div>

      <ul>
        <li>
          <a href="#" id="nowpop">인기 영화</a>
        </li>

        <li>
          <a href="#" id ="upcoming">개봉 예정</a>
        </li>
        <li>
          <a href="#" id = "historypop">역대 흥행 영화</a>
        </li>
      </ul>
    </div>

와 같이 html코드로 리스트를 만들어서 해당하는 리스트가 왼쪽에 나오게 제작하였다.

위에 해당하는 css를 적용시키면

body,
ul,
li {
    padding: 0;
    margin: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

.left-side-bar>ul ul {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    background-color: white;
}

.left-side-bar {
    background-color: white;
    height: 100%;
    width: 180px;
    position: fixed;
    left: -155px;
    transition: left .3s;
}

.left-side-bar>.status-ico {
    text-align: right;
    padding: 10px;
}

.left-side-bar>ul li {
    position: relative;
}

.left-side-bar ul {
    font-weight: bold;
    text-align: center;
    padding: 0;
}

.left-side-bar ul>li>a {
    display: block;
    padding: 10px;
    white-space: nowrap;
}

.left-side-bar:hover {
    left: 0;
}

.left-side-bar ul>li:hover ul {
    display: block;
}

.left-side-bar ul>li:hover>a {
    color: white;
    background-color: black;
}

다음과 같이 css를 만들수 있는데 left-side-bar의 정보에 left값이나 width값을 조정해서 너비를 조정할 수 있고, transition:left는 왼쪽에서 0.3초간 이동한다는 뜻을 가지고 있다.

위의 코드를 적용하면

평소에는 들어가있다가 마우스를 가져다대면 해당하는 사이드바가 반응하여 움직이는 ui를 제작할 수 있다.

이제 해당하는 정보인 인기영화, 개봉 예정영화, 역대흥행영화의 정보를 가져와서 클릭하면 해당하는 정보로 이동하는 스크립트를 작성하였는데,

처음에는 html로 onclick시 fetch한 api함수를 호출하는 식으로 제작하려하였지만, 해당하는 정보를 사용할 때 uncaught referenceerror: 에러가 나오면서 해당하는 정보를 호출할 수 없다 라는 식으로 나왔다. onclick으로는 js의 코드에 변경을 접근하기 힘든 것같아서 다른 방법을 찾아본 결과

  nowpop.addEventListener('click', async () => {
    await fetchPopularMovies();
  });

위와 같이 해당하는 id를 html 파일에 걸어놓고, id.addEventListener('click',async() => { //내용 }을 적용하면, 해당하는 정보를 클릭시 정보를 이동할 수 있는 함수를 호출 할 수 있었다.

그래서 TMDB에서 가져온 데이터를 

  //인기 영화 데이터
  async function fetchUpcomingMoives() {
    const options = {
      method: 'GET',
      headers: {
        accept: 'application/json',
        Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJhNTAzYWNjMTdhZjRhN2RhNDIzMGFjNzJiMTMxNGM5NSIsInN1YiI6IjY2MjhkYmI5ZTI5NWI0MDE4NzlkZjZkZiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.Orq013qKSJNxThVzu1GCoS-V1LS-I2iQ7REkBIzBtKw'
      }
    };

    try {
      options)
      const data = await response.json();
      if (data && data.results) {
        pop = data.results;
        displayMovies(data.results);
      } else {
        console.error('Invalid data format:', data);
      }
    } catch (error) {
      console.error('Error fetching data:', error);
    }

  }

aysnc함수로 저장한다음 클릭시 해당하는 정보를 await으로 비동기함수를 동기함수로 바꾸게끔 하여 데이터를 저장하게하였다. 다음 해볼것은 아이디나 비밀번호를 입력시 조건을 충족해야만 아이디, 비밀번호를 적용할 수 있는 시스템과, 평점순, 추천순 등으로 영화가 정렬되게끔 제작해볼 예정이다.