요구사항 HTML,CSS 관련 + 이미지 상세 보기 모달 관련

유저가 사용하는 디바이스의 가로 길이에 따라 검색결과의 row 당 column 갯수를 적절히 변경해주어야 합니다.

style.css에서 media query로 해결한다. style.css 맨 아래쪽 추가.

@media screen and (max-width : 992px){}
@media screen and (max-width : 768px){}
@media screen and (max-width : 576px){}

기존 css를 확인해보니 .SearchResult에 grid 를 사용했다.

미디어 쿼리에 grid-template-columns속성을 변경 시켜서 해결.

.SearchResult {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(250px, 1fr));
  grid-gap: 10px;
}

/*...생략*/

/*해결*/
@media screen and (max-width : 992px){
  .SearchResult {
    grid-template-columns: repeat(3, minmax(250px, 1fr));
  }
}
@media screen and (max-width : 768px){
  .SearchResult {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
  }
}
@media screen and (max-width : 576px){
  .SearchResult {
    grid-template-columns: repeat(1, minmax(250px, 1fr));
  }
}

디바이스 가로 길이가 768px 이하인 경우, 모달의 가로 길이를 디바이스 가로 길이만큼 늘려야 합니다.

@media screen and (max-width : 768px){
  .SearchResult {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
  }
  **.ImageInfo .content-wrapper{
    width: 100%;
  }**
}

다크 모드(Dark mode)를 지원하도록 CSS를 수정해야 합니다.

기존 style.css 소스 주석 해제. 미디어 쿼리에 prefers-color-scheme라는 조건일 때 안에 소스가 실행된다. 하지만 toggle 이벤트로 동작하기 위해서는 이것만으로는 부족하다.

/* dark mode 처리 */
**@media (prefers-color-scheme: dark) {**
  body {
    background-color: #000;
    color: white;
  }
**}**

다크모드 토글 버튼을 컴포넌트로 만들어주자.

적당히 DarkmodeToggle.js라는 컴포넌트를 기존 컴포넌트들 복사해서 넣어주고, index.html에서 새로 만든 script를 불러와준다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="src/style.css" />
    <title>Cat Search</title>
  </head>
  <body>
    <div id="App"></div>
    <script src="src/utils/validator.js"></script>
    <script src="src/api.js"></script>
    <script src="src/ImageInfo.js"></script>
    <script src="src/SearchInput.js"></script>
    <script src="src/SearchResult.js"></script>
    **<script src="src/DarkmodeToggle.js"></script>**
    <script src="src/App.js"></script>
    <script src="src/main.js"></script>
  </body>
</html>

이렇게 붙여주고 App.js에서 DarkmodeToggle 컴포넌트를 불러와 주자. 불러와야 화면에 보임.

class App {
  $target = null;
  data = [];

  constructor($target) {
    this.$target = $target;

    **this.DarkmodeToggle = new DarkmodeToggle({
      $target,
    });**

		//...생략
	}
}

다크모드를 toggle로 동작하기 위해서는 기존 prefers-color-scheme 을 사용하지 않고, 다른 접근을 해야한다.