[2단계 - 상세 정보 & UI/UX 개선하기] 초코(강다빈) 미션 제출합니다.

src/App.ts

@@ -1,6 +1,6 @@
 import { Movie } from './index.d';
 
-import { SKELETON_UI_PC, SKELETON_UI_TABLET, SKELETON_UI_MOBILE } from './constants';
+import { SKELETON_UI_PC, SKELETON_UI_TABLET, SKELETON_UI_MOBILE, MOBILE_SIZE, TABLET_SIZE } from './constants';
 
 import movieStore from './store/MovieStore';
 import searchMovieStore from './store/SearchMovieStore';
@@ -45,9 +45,9 @@ export default class App {
     const width = window.innerWidth;
     let skeletonCount = this.#skeletonBySize;
 
-    if (width <= 390) {
+    if (width <= MOBILE_SIZE) {
       skeletonCount = SKELETON_UI_MOBILE;
-    } else if (width <= 834) {
+    } else if (width <= TABLET_SIZE) {
       skeletonCount = SKELETON_UI_TABLET;
     }
 
@@ -111,7 +111,6 @@ export default class App {
       const card = new MovieCard({
         classes: ['skeleton-container'],
       });
-
       fragment.appendChild(card.element);
     }
 

src/constants.ts

@@ -2,6 +2,8 @@ export const SKELETON_UI_PC = 8; // 스켈레톤 UI 갯수 - pc
 export const SKELETON_UI_TABLET = 6; // 스켈레톤 UI 갯수 - tablet
 export const SKELETON_UI_MOBILE = 4; // 스켈레톤 UI 갯수 - mobile
 
+export const MOBILE_SIZE = 390; // mobile 사이즈 기준
+export const TABLET_SIZE = 834; // tablet 사이즈 기준
 
 export const ERROR_2XX = '2'; // 200번대 오류
 export const ERROR_4XX = '4'; // 400번대 오류
@@ -15,4 +17,3 @@ export const VOTE: { [key: number]: string } = {
   8: '재미있어요',
   10: '명작이에요',
 };
-