v1.0.0: “이 웹페이지는 이미지가 늦게 뜨네 나가야겠다”를 막기 위한 Skeleton UI 적용기

11 collapsed lines
1
  const [gallery, setGallery] = useState<GalleryItem[]>([]);
2
  const [loading, setLoading] = useState(false);
3

4
  useEffect(() => {
5
    const fetchGallery = async () => {
6
      try {
7
        setLoading(true);
8
        const res = await fetch('https://picsum.photos/v2/list');
9
        const data: GalleryItem[] = await res.json();
10

11
        // 모든 이미지 로드 대기
12
        await Promise.allSettled(
13
          data.map(
14
            (item) =>
15
              new Promise<void>((resolve, reject) => {
16
                const img = new Image();
17
                img.src = item.download_url;
18
                img.onload = () => resolve();
19
                img.onerror = () => reject();
20
              }),
21
          ),
22
        );
23

24
        setGallery(data);
25
      } catch (err) {
26
      console.error('Error fetching gallery:', err);
27
    } finally {
28
      setLoading(false);
29
    }
30
    };
31

32
    fetchGallery();
33
  }, []);
34

21 collapsed lines
35
  return (
36
    <>
37
      <div
38
        aria-busy={loading}
39
        role="status"
40
        aria-label={loading ? '갤러리 이미지를 불러오는 중입니다' : '갤러리 이미지 목록'}
41
        className="grid w-full grid-cols-5 gap-4 p-4"
42
      >
43
        {loading
44
          ? new Array(30)
45
              .fill(0)
46
              .map((_, i) => (
47
                <div key={i} className="aspect-square w-full animate-pulse bg-gray-300" aria-hidden="true"></div>
48
              ))
49
          : gallery.map((item) => (
50
              <div key={item.id} className="animate-fade-in aspect-square overflow-hidden">
51
                <img
52
                  src={item.download_url}
53
                  alt={item.author}
54
                  className="h-full w-full object-cover"
55
                />
56
              </div>
57
            ))}
58
      </div>
59
    </>
60
  );

22 collapsed lines
1
  const [gallery, setGallery] = useState<GalleryItem[]>([]);
2
  const [loading, setLoading] = useState(false);
3
  const [loadedImages, setLoadedImages] = useState<string[]>([]);
4

5
  useEffect(() => {
6
    const fetchGallery = async () => {
7
      try {
8
        setLoading(true);
9
        const res = await fetch('https://picsum.photos/v2/list');
10
        const data: GalleryItem[] = await res.json();
11

12
        setGallery(data);
13
      } catch (err) {
14
      console.error('Error fetching gallery:', err);
15
    } finally {
16
      setLoading(false);
17
    }
18
    };
19

20
    fetchGallery();
21
  }, []);
22

23
  const handleonLoad = (id: string) => {
24
    setLoadedImages((prev) => [...prev, id]);
25
  };
26

9 collapsed lines
27
  return (
28
    <>
29
      <div
30
        aria-busy={loading}
31
        role="status"
32
        aria-label={loading ? '갤러리 이미지를 불러오는 중입니다' : '갤러리 이미지 목록'}
33
        className="grid w-full grid-cols-5 gap-4 p-4"
34
      >
35
        {loading
36
          ? new Array(30)
37
              .fill(0)
38
              .map((_, i) => (
39
                <div key={i} className="aspect-square w-full animate-pulse bg-gray-300" aria-hidden="true"></div>
40
              ))
41
          : gallery.map((item) => (
42
              <div
43
                key={item.id}
44
                className={
45
                  'aspect-square overflow-hidden transition-all' +
46
                  (loadedImages.includes(item.id) ? '' : 'animate-pulse bg-gray-200')
47
                }
48
              >
49
                <img
50
                  src={item.download_url}
51
                  alt={item.author}
52
                  className={
5 collapsed lines
53
                    'h-full w-full object-cover transition-opacity' +
54
                    (loadedImages.includes(item.id) ? ' opacity-100' : ' opacity-0')
55
                  }
56
                  onLoad={() => handleonLoad(item.id)}
57
                />
58
              </div>
59
            ))}
60
      </div>
61
    </>
62
  );