갤러리 뷰 3열로 보기 스크립트

// ==UserScript==

// @name Kone 갤러리 3열 + 큰 썸네일

// @namespace https://kone.gg/

// @version 1.1

// @description Kone 갤러리 뷰를 3열로 변경하고 썸네일을 크게 표시

// @match https://kone.gg/s/*

// @run-at document-idle

// @grant GM_addStyle

// ==/UserScript==

(function () {

'use strict';

GM_addStyle(`

/*

* 갤러리 카드 내부 이미지가 카드 폭에 맞게 커지도록 보정

*/

a.group\\/article img {

width: 100% !important;

height: auto !important;

object-fit: cover !important;

}

/*

* 제목/정보 영역이 카드 폭을 정상 사용하도록 보정

*/

a.group\\/article {

width: 100% !important;

max-width: none !important;

}

`);

function applyGalleryLayout() {

const grids = document.querySelectorAll('div.grid');

grids.forEach(grid => {

const className = grid.className?.toString() ?? '';

/*

* 실제 사이트에서 쓰는 클래스:

* grid-cols-[repeat(auto-fill,minmax(10rem,1fr))]

*/

const isGalleryGrid =

className.includes('grid-cols-[repeat(auto-fill,minmax(10rem,1fr))]') ||

grid.querySelector('a.group\\/article[href*="/s/"]');

if (!isGalleryGrid) return;

const articleLinks = grid.querySelectorAll('a.group\\/article[href*="/s/"]');

// 게시글 카드가 여러 개 있는 영역만 갤러리로 판단

if (articleLinks.length < 3) return;

grid.style.setProperty(

'grid-template-columns',

'repeat(3, minmax(0, 1fr))',

'important'

);

grid.style.setProperty('gap', '1.25rem', 'important');

grid.style.setProperty('justify-items', 'stretch', 'important');

articleLinks.forEach(link => {

link.style.setProperty('width', '100%', 'important');

link.style.setProperty('max-width', 'none', 'important');

});

});

}

applyGalleryLayout();

/*

* Kone이 화면을 다시 그리는 경우가 있어서 변화 감지 후 재적용

*/

const observer = new MutationObserver(() => {

applyGalleryLayout();

});

observer.observe(document.body, {

childList: true,

subtree: true

});

})();