D23 把抽卡和收藏功能接在一起，抽到的卡片不只會出現在抽卡當下，也會被記錄下來，出現在收藏頁裡。
不過昨天解決的是「卡片怎麼進入收藏」，今天則是在卡片真的放進去之後，繼續處理收藏頁的顯示和操作。

卡片進來了，原本的排版又不適用了

真正把卡片放進收藏頁之後，又碰到一個原本空白狀態時不會發現的小問題。
之前收藏區裡沒有任何卡片，所以為了讓：

還沒有收藏任何梗圖卡

這類提示文字顯示在收藏區正中央，原本使用的是置中的排版方式。
但沿用同一套設定後，收藏卡片也會一起跑到正中央。
空白狀態需要置中，但真正的收藏卡片比較適合從左上開始排列。
所以後來加入 .has-cards，把兩種狀態分開處理：

.collection-content.has-cards {
    align-items: flex-start;
    justify-content: flex-start;
}

這樣就可以維持 :

沒有收藏
→ 提示文字置中

有收藏
→ 卡片從左上開始排列
→ 多張時自動換行
→ 超出收藏區高度時在區域內捲動

卡片縮圖一開始先用比較小的尺寸測試，最後再依照收藏區實際顯示的效果調整成 160px。

收藏進來了，但卡片內容有點看不清楚

調整完收藏區的排版後，卡片已經可以正常出現在收藏頁。
但之後收藏數量變多時，縮圖不能做得太大，否則整個頁面會變得很壅擠。
這也帶來下一個問題：

如果我想仔細看卡片上的內容怎麼辦？

所以這次沒有繼續增加縮圖尺寸，而是另外加入：

點擊卡片 → 放大預覽

點一下，再把同一張卡放大

收藏頁新增了一個預覽用的 Modal：

<div class="preview-modal" id="preview-modal">
    <img class="preview-image" id="preview-image" alt="卡片預覽">
</div>

平常這個 Modal 不會顯示。

當使用者點擊收藏頁裡的卡片時，JavaScript 會判斷實際點擊的元素是不是 .collected-card：

if (e.target.classList.contains('collected-card')) {
    openPreview(e.target.src);
}

如果是，就利用 e.target.src 取得被點擊卡片的圖片，再把同一張圖片放進預覽 Modal。

這次也沒有替每一張收藏卡片分別寫一個 click 事件，而是把事件放在 MEME 和 CHALLENGE 的收藏區，再判斷使用者點到的是不是 .collected-card。
這樣之後收藏變多，也不用每增加一張卡片就重新加入一次點擊事件。

點卡片不關，點外面才關

最後是預覽 Modal 的關閉方式。
這個操作方式跟前面抽卡 Modal 有點類似：

if (e.target === previewModal) {
    closePreview();
}

只有使用者真的點到 Modal 外圍的背景時，才會關閉預覽，點擊放大的卡片本身則不會關閉。
所以現在完整的預覽流程變成：

收藏頁縮圖 → 點擊卡片 → 放大預覽 → 點擊外圍 → 回到收藏頁

從空白狀態到真的開始累積卡片，原本看起來沒問題的版型，也會隨著實際內容出現需要調整的地方。
而當卡片真的開始被收藏之後，「放得下」之外，也開始需要考慮「看不看得清楚」。