Compare commits
2 Commits
8b72e06784
...
e5de79a669
| Author | SHA1 | Date | |
|---|---|---|---|
 ttipo
|
e5de79a669 | ||
|
ttipo
|
049bc5e2cf |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+43
-43
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,117 @@
|
||||
// 아트보드 헤더를 서린즈 워드마크로 맞춘다.
|
||||
// 1) 「서린즈」 글자 표기 → 워드마크 SVG
|
||||
// 2) 헤더 앞의 돋보기 심볼 타일 제거 (심볼은 앱 아이콘 자리에서만 쓴다)
|
||||
// templates/ 를 다시 만든 뒤에는 이 스크립트를 한 번 더 돌린다 (여러 번 돌려도 안전).
|
||||
// node apply-logo.mjs .
|
||||
import { readFileSync, writeFileSync, readdirSync } from 'node:fs';
|
||||
import { join } from 'node:path';
|
||||
import { pathToFileURL } from 'node:url';
|
||||
|
||||
const TOP = 2;
|
||||
const BOT = 106;
|
||||
const X = { seo: 0, rin: 124, jeu: 244 };
|
||||
const INK = { left: -4, right: 350 };
|
||||
|
||||
const line = (pts) => `<polyline points="${pts.map(([x, y]) => `${x},${y}`).join(' ')}"></polyline>`;
|
||||
const seo = (x) => [
|
||||
line([[x + 34, TOP], [x + 6, BOT]]),
|
||||
line([[x + 34, TOP], [x + 60, BOT]]),
|
||||
line([[x + 100, TOP], [x + 100, BOT]]),
|
||||
line([[x + 74, 54], [x + 100, 54]]),
|
||||
].join('');
|
||||
const rin = (x) => [
|
||||
line([[x + 6, TOP], [x + 60, TOP], [x + 60, 33], [x + 6, 33], [x + 6, 64], [x + 60, 64]]),
|
||||
line([[x + 86, TOP], [x + 86, 64]]),
|
||||
line([[x + 18, 76], [x + 18, BOT], [x + 86, BOT]]),
|
||||
].join('');
|
||||
const jeu = (x) => [
|
||||
line([[x + 4, 6], [x + 92, 6]]),
|
||||
line([[x + 48, 6], [x + 10, 76]]),
|
||||
line([[x + 48, 6], [x + 86, 76]]),
|
||||
line([[x + 4, BOT], [x + 92, BOT]]),
|
||||
].join('');
|
||||
|
||||
export const wordmark = ({ height = 20, color = '#14161A', weight = 15 } = {}) => {
|
||||
const pad = weight / 2 + 2;
|
||||
const vbW = INK.right - INK.left + pad * 2;
|
||||
const vbH = BOT - TOP + pad * 2;
|
||||
const w = Math.round((height * vbW) / vbH);
|
||||
return `<svg width="${w}" height="${height}" viewBox="${INK.left - pad} ${TOP - pad} ${vbW} ${vbH}" fill="none" stroke="${color}" stroke-width="${weight}" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈">${seo(X.seo)}${rin(X.rin)}${jeu(X.jeu)}</svg>`;
|
||||
};
|
||||
|
||||
// 앱 아이콘 — 워드마크에서 「서」 한 글자만 떼어 정사각에 담는다
|
||||
export const appMark = (size = 64, { bg = '#FF6A00', color = '#FFFFFF', weight = 17 } = {}) => {
|
||||
const pad = weight / 2 + 12;
|
||||
const vbW = 100 - 6 + pad * 2;
|
||||
const vbH = BOT - TOP + pad * 2;
|
||||
return `<span style="display: inline-flex; width: ${size}px; height: ${size}px; border-radius: ${Math.round(size / 3.4)}px; background: ${bg}; flex-shrink: 0;"><svg width="${size}" height="${size}" viewBox="${6 - pad} ${TOP - pad} ${vbW} ${vbH}" fill="none" stroke="${color}" stroke-width="${weight}" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈">${seo(0)}</svg></span>`;
|
||||
};
|
||||
|
||||
const SWAPS = [
|
||||
['<span style="font-size: 1.25rem; font-weight: 700; letter-spacing: -0.035em;">서린즈</span>', wordmark({ height: 20 })],
|
||||
['<span style="font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">서린즈</span>', wordmark({ height: 18 })],
|
||||
['<span style="font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.035em;">서린즈</span>', wordmark({ height: 19 })],
|
||||
];
|
||||
|
||||
// 헤더의 심볼 타일 — 여는 div 부터 짝이 맞는 </div> 까지 통째로 지운다
|
||||
const TILE = /<div style="width: (?:30|32)px; height: (?:30|32)px; border-radius: (?:10|11)px; background: #FF6A00;[^"]*">/;
|
||||
|
||||
const dropTile = (src) => {
|
||||
let n = 0;
|
||||
for (;;) {
|
||||
const m = TILE.exec(src);
|
||||
if (!m) break;
|
||||
// 여는 태그부터 짝이 맞는 닫는 태그를 찾는다
|
||||
let i = m.index + m[0].length;
|
||||
let depth = 1;
|
||||
while (depth > 0) {
|
||||
const open = src.indexOf('<div', i);
|
||||
const close = src.indexOf('</div>', i);
|
||||
if (close < 0) throw new Error('닫는 div 를 찾지 못했습니다');
|
||||
if (open >= 0 && open < close) {
|
||||
depth += 1;
|
||||
i = open + 4;
|
||||
} else {
|
||||
depth -= 1;
|
||||
i = close + 6;
|
||||
}
|
||||
}
|
||||
src = src.slice(0, m.index) + src.slice(i).replace(/^\s*\n\s*/, '');
|
||||
n += 1;
|
||||
}
|
||||
return { src, n };
|
||||
};
|
||||
|
||||
// 직접 실행할 때만 아트보드를 고친다 (다른 스크립트에서 wordmark/appMark 만 가져다 쓸 수 있게)
|
||||
if (import.meta.url === pathToFileURL(process.argv[1]).href) {
|
||||
const dir = join(process.argv[2] ?? '.', 'templates');
|
||||
let swapped = 0;
|
||||
let dropped = 0;
|
||||
|
||||
for (const name of readdirSync(dir).filter((n) => n.endsWith('.dc.html'))) {
|
||||
if (name === 'Logo.dc.html') continue; // 로고 아트보드는 제 손으로 그린다
|
||||
const path = join(dir, name);
|
||||
let src = readFileSync(path, 'utf8');
|
||||
const before = src;
|
||||
|
||||
let s = 0;
|
||||
for (const [from, to] of SWAPS) {
|
||||
while (src.includes(from)) {
|
||||
src = src.replace(from, to);
|
||||
s += 1;
|
||||
}
|
||||
}
|
||||
|
||||
const out = dropTile(src);
|
||||
src = out.src;
|
||||
|
||||
if (src !== before) {
|
||||
writeFileSync(path, src, 'utf8');
|
||||
console.log(`${name} — 워드마크 ${s}곳 · 심볼 제거 ${out.n}곳`);
|
||||
swapped += s;
|
||||
dropped += out.n;
|
||||
}
|
||||
}
|
||||
|
||||
console.log(`워드마크 ${swapped}곳 · 심볼 제거 ${dropped}곳`);
|
||||
}
|
||||
|
Before Width: | Height: | Size: 236 KiB After Width: | Height: | Size: 236 KiB |
@@ -1,5 +1,9 @@
|
||||
// templates/*.dc.html 의 /*PRETENDARD*/ 토큰을 Pretendard woff2 data URI 로 치환해
|
||||
// 작업 디렉터리 루트에 최종 .dc.html 아트보드를 생성한다.
|
||||
//
|
||||
// 아트보드는 각각 독립 문서로 렌더되므로 폰트가 아트보드 수만큼 복사된다.
|
||||
// 그래서 fonts/mini 의 서브셋(아트보드가 실제로 쓰는 글자만)을 쓴다.
|
||||
// 새 글자가 들어오면 아래 검사에서 경고가 뜨고, make-subset.mjs 로 다시 만들면 된다.
|
||||
import { readFileSync, writeFileSync, readdirSync } from 'node:fs';
|
||||
import { join } from 'node:path';
|
||||
|
||||
@@ -10,19 +14,41 @@ const WEIGHTS = [
|
||||
];
|
||||
|
||||
const faces = WEIGHTS.map(([file, weight]) => {
|
||||
const b64 = readFileSync(join('fonts', `Pretendard-${file}.subset.woff2`)).toString('base64');
|
||||
const b64 = readFileSync(join('fonts', 'mini', `Pretendard-${file}.mini.woff2`)).toString('base64');
|
||||
return `@font-face{font-family:'Pretendard';font-style:normal;font-weight:${weight};font-display:swap;src:url(data:font/woff2;base64,${b64}) format('woff2');}`;
|
||||
}).join('\n');
|
||||
|
||||
const charset = new Set(readFileSync(join('fonts', 'mini', 'charset.txt'), 'utf8'));
|
||||
|
||||
let count = 0;
|
||||
let total = 0;
|
||||
const missing = new Set();
|
||||
|
||||
for (const name of readdirSync('templates')) {
|
||||
if (!name.endsWith('.dc.html')) continue;
|
||||
const src = readFileSync(join('templates', name), 'utf8');
|
||||
if (!src.includes('/*PRETENDARD*/')) {
|
||||
console.error(`warn: ${name} 에 /*PRETENDARD*/ 토큰이 없습니다`);
|
||||
}
|
||||
writeFileSync(name, src.replace('/*PRETENDARD*/', faces), 'utf8');
|
||||
|
||||
// 서브셋에 없는 글자 찾기 — 태그·스타일을 뺀 실제 텍스트만 본다
|
||||
const text = src.replace(/<style[\s\S]*?<\/style>/g, '').replace(/<[^>]+>/g, ' ');
|
||||
for (const ch of text) {
|
||||
if (ch.charCodeAt(0) > 0x1f && !charset.has(ch)) missing.add(ch);
|
||||
}
|
||||
|
||||
const out = src.replace('/*PRETENDARD*/', faces);
|
||||
writeFileSync(name, out, 'utf8');
|
||||
count += 1;
|
||||
console.log(`${name} — ${(readFileSync(name).length / 1024).toFixed(0)} KB`);
|
||||
total += out.length;
|
||||
console.log(`${name} — ${(out.length / 1024).toFixed(0)} KB`);
|
||||
}
|
||||
|
||||
console.log(`${count} artboards built · 합계 ${(total / 1024 / 1024).toFixed(1)} MB`);
|
||||
|
||||
if (missing.size > 0) {
|
||||
console.error(
|
||||
`\nwarn: 서브셋에 없는 글자 ${missing.size}개 — ${[...missing].join('')}\n` +
|
||||
' 이 글자들은 대체 글꼴로 그려집니다. node make-subset.mjs . 로 서브셋을 다시 만드세요.',
|
||||
);
|
||||
}
|
||||
console.log(`${count} artboards built`);
|
||||
|
||||
+139
-29
@@ -2,71 +2,181 @@
|
||||
"pages": [
|
||||
{
|
||||
"id": "page-1",
|
||||
"name": "홈 (확정)"
|
||||
"name": "디자인 시스템"
|
||||
},
|
||||
{
|
||||
"id": "page-2",
|
||||
"name": "지난 시안"
|
||||
"name": "홈"
|
||||
}
|
||||
],
|
||||
"artboards": [
|
||||
{
|
||||
"file": "Main.dc.html",
|
||||
"title": "서린즈 홈",
|
||||
"file": "Logo.dc.html",
|
||||
"title": "로고 · 서린즈 워드마크",
|
||||
"page": "page-1",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"w": 1440,
|
||||
"h": 1860
|
||||
},
|
||||
{
|
||||
"file": "Brand.dc.html",
|
||||
"title": "브랜드 컬러 · 탄피 오렌지",
|
||||
"page": "page-1",
|
||||
"x": 1600,
|
||||
"y": 0,
|
||||
"w": 1440,
|
||||
"h": 1500
|
||||
},
|
||||
{
|
||||
"file": "Foundations.dc.html",
|
||||
"title": "기본 요소 · 글자 · 색 · 컴포넌트",
|
||||
"page": "page-1",
|
||||
"x": 3200,
|
||||
"y": 0,
|
||||
"w": 1440,
|
||||
"h": 1720
|
||||
},
|
||||
{
|
||||
"file": "Blocks.dc.html",
|
||||
"title": "실패 · 비어 있음 블록",
|
||||
"page": "page-1",
|
||||
"x": 4800,
|
||||
"y": 0,
|
||||
"w": 1440,
|
||||
"h": 1040
|
||||
},
|
||||
{
|
||||
"file": "Main.dc.html",
|
||||
"title": "홈 · 데스크톱 1440",
|
||||
"page": "page-2",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"w": 1440,
|
||||
"h": 2420
|
||||
},
|
||||
{
|
||||
"file": "HomeA.dc.html",
|
||||
"title": "A · 세로 스택형",
|
||||
"page": "page-2",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"w": 1440,
|
||||
"h": 3000
|
||||
},
|
||||
{
|
||||
"file": "HomeB.dc.html",
|
||||
"title": "B · 포털 3단형",
|
||||
"file": "Loading.dc.html",
|
||||
"title": "홈 · 로딩",
|
||||
"page": "page-2",
|
||||
"x": 1600,
|
||||
"y": 0,
|
||||
"w": 1440,
|
||||
"h": 2360
|
||||
"h": 2420
|
||||
},
|
||||
{
|
||||
"file": "HomeC.dc.html",
|
||||
"title": "C · 앱 사이드바형",
|
||||
"file": "States.dc.html",
|
||||
"title": "홈 · 섞인 상태",
|
||||
"page": "page-2",
|
||||
"x": 3200,
|
||||
"y": 0,
|
||||
"w": 1440,
|
||||
"h": 2120
|
||||
"h": 2480
|
||||
},
|
||||
{
|
||||
"file": "Search.dc.html",
|
||||
"title": "헤더 검색 · 아이콘과 시트",
|
||||
"page": "page-2",
|
||||
"x": 4800,
|
||||
"y": 0,
|
||||
"w": 1440,
|
||||
"h": 2200
|
||||
},
|
||||
{
|
||||
"file": "Tablet.dc.html",
|
||||
"title": "홈 · 태블릿 768",
|
||||
"page": "page-2",
|
||||
"x": 0,
|
||||
"y": 2760,
|
||||
"w": 768,
|
||||
"h": 2960
|
||||
},
|
||||
{
|
||||
"file": "Mobile.dc.html",
|
||||
"title": "홈 · 모바일 390",
|
||||
"page": "page-2",
|
||||
"x": 900,
|
||||
"y": 2760,
|
||||
"w": 390,
|
||||
"h": 4000
|
||||
}
|
||||
],
|
||||
"annotations": [
|
||||
{
|
||||
"id": "note-home",
|
||||
"x": 0,
|
||||
"y": -520,
|
||||
"w": 760,
|
||||
"page": "page-1",
|
||||
"text": "서린즈 홈 · 확정안 (밀도 그리드형)\n\n게임 랭킹 — 세 갈래로 나눴습니다\n한 칸에 하나씩, 세 랭킹을 나란히 놓았습니다.\n· 계급 랭킹 — 통합 / 시즌\n· 랭크전 랭킹 — 솔로 / 파티 / 클랜 (여기만 RP 점수 열이 있습니다)\n· 클랜 랭킹 — 공식 / 일반\n유저 랭킹은 계급 이미지 + 닉네임, 클랜 랭킹은 클랜 마크 + 클랜명으로만 구성했고 승률·K/D·헤드샷·판수는 모두 뺐습니다. 모든 랭킹에 등락(▲n / ▼n / 변동 없음)을 붙였습니다.\n계급 이미지와 클랜 마크는 실제 에셋 자리로, 지금은 회색 타일에 약식 표장을 그려 뒀습니다. 실제 이미지 규격을 주시면 교체하겠습니다.\n\n검색을 최상단으로\n헤더에서 검색을 빼고 화면 맨 위 히어로로 올렸습니다. 검색창만 덩그러니 올리면 허전해서 세 가지를 함께 뒀습니다.\n· 문구 두 줄 — \"누구의 전적이 궁금하세요?\" 와 무엇을 해주는 곳인지 설명하는 한 줄\n· 최근 검색 칩 — 빈 검색창 아래에 바로 누를 것이 생겨서 첫 화면이 비어 보이지 않습니다\n· 옅은 색면(#FAFBFC) + 아래 경계선 — 히어로가 떠 있는 게 아니라 하나의 층으로 읽힙니다. 아래 그리드와 역할이 분리됩니다\n헤더에는 대신 \"전적 검색\" 메뉴를 넣었습니다.\n\n그 아래 배치 — 커뮤니티와 스트리밍의 자리를 바꿨습니다\n· 이벤트 슬라이드(2칸) + 검색 랭킹(1칸)\n· 게임 랭킹(2칸) + 커뮤니티(1칸)\n· 서든어택 소식 + 서린즈 소식 + 지금 방송 중\n\n지금 방송 중\n· 스트리머 이름 앞에 프로필 아바타를 붙였습니다. 대표 방송은 20px, 아래 목록 세 줄은 18px 원형이고, 히어로의 \"최근에 찾아봤어요\" 칩과 같은 자리표시 방식입니다. 실제 프로필 이미지 규격을 주시면 교체하겠습니다.\n· 빨간 LIVE 점과 글자는 뺐습니다. 이제 아바타 + 닉네임 · 시청자 수만 남습니다.\n\n남은 검토거리\n· 스크롤을 내리면 히어로 검색창이 사라집니다. 헤더에 작은 검색창을 다시 붙여 따라오게 할지 정하면 좋겠습니다.\n· 히어로 오른쪽에 오늘의 요약 수치(분석된 경기 수 등)를 넣는 안도 있는데, 지금은 넣지 않았습니다. 필요하면 말씀해 주세요.\n· 스트리밍이 아랫줄로 내려가면서 그 줄이 소식 목록보다 200px쯤 높아졌습니다. 소식을 6건에서 8건으로 늘려 높이를 맞출지 정하면 좋겠습니다.\n\n회색 사각형은 썸네일·스크린샷 자리, 닉네임·수치·공지 제목은 예시 데이터입니다."
|
||||
"y": -620,
|
||||
"w": 800,
|
||||
"page": "page-2",
|
||||
"text": "서린즈 홈 · 확정안 (밀도 그리드형)\n\n게임 랭킹 — 세 갈래로 나눴습니다\n한 칸에 하나씩, 세 랭킹을 나란히 놓았습니다.\n· 계급 랭킹 — 통합 / 시즌\n· 랭크전 랭킹 — 솔로 / 파티 / 클랜 (여기만 티어 이미지와 RP 점수 열이 있습니다)\n· 클랜 랭킹 — 공식 / 일반\n유저 랭킹은 계급 이미지 + 닉네임, 클랜 랭킹은 클랜 마크 + 클랜명으로만 구성했고 승률·K/D·헤드샷·판수는 모두 뺐습니다. 모든 랭킹에 등락(▲n / ▼n / 변동 없음)을 붙였습니다.\n계급 이미지와 랭크전 티어 이미지, 클랜 마크는 모두 실제 에셋 자리로, 지금은 회색 타일에 약식 표장을 그려 뒀습니다. 한 줄에 계급과 티어가 함께 놓이므로 표장을 갈라 뒀습니다 — 계급은 막대·별·마름모, 티어는 육각, 클랜은 방패입니다. 실제 이미지 규격을 주시면 교체하겠습니다.\n\n랭크전만 열이 하나 더 늘었습니다. 티어는 RP 와 한 몸으로 읽혀야 해서 둘을 한 칸(72px)에 묶고 그 안에서만 4px 로 붙였습니다 — 표 전체 칸 간격 8px 을 그대로 두면 티어가 닉네임과 RP 중간에 떠 보입니다. RP 숫자는 폭을 42px 로 고정해 두어 자릿수가 달라져도 티어가 세로로 줄맞춤됩니다.\n\n세 갈래를 나란히 놓는 1280 이상에서는 한 열이 283px 뿐입니다. 티어를 독립 칸으로 끼워 넣었을 때는 닉네임이 85px 까지 줄어 열 줄 중 아홉 줄이 서너 글자에서 잘렸는데, RP 칸을 48 → 42px, 등락 칸을 38 → 34px 로 줄이고 티어를 RP 에 붙이면서 101px 로 돌아왔습니다. 티어를 넣기 전과 마찬가지로 여덟 글자인 「웨어하우스지박령」 하나만 잘립니다.\n\n검색을 최상단으로\n헤더에서 검색을 빼고 화면 맨 위 히어로로 올렸습니다. 검색창만 덩그러니 올리면 허전해서 세 가지를 함께 뒀습니다.\n· 문구 두 줄 — \"누구의 전적이 궁금하세요?\" 와 무엇을 해주는 곳인지 설명하는 한 줄\n· 최근 검색 칩 — 빈 검색창 아래에 바로 누를 것이 생겨서 첫 화면이 비어 보이지 않습니다\n· 옅은 색면(#FAFBFC) + 아래 경계선 — 히어로가 떠 있는 게 아니라 하나의 층으로 읽힙니다. 아래 그리드와 역할이 분리됩니다\n헤더에는 대신 \"전적 검색\" 메뉴를 넣었습니다.\n\n그 아래 배치 — 커뮤니티와 스트리밍의 자리를 바꿨습니다\n· 이벤트 슬라이드(2칸) + 검색 랭킹(1칸)\n· 게임 랭킹(2칸) + 커뮤니티(1칸)\n· 서든어택 소식 + 서린즈 소식 + 지금 방송 중\n\n지금 방송 중\n· 스트리머 이름 앞에 프로필 아바타를 붙였습니다. 대표 방송은 20px, 아래 목록 세 줄은 18px 원형이고, 히어로의 \"최근에 찾아봤어요\" 칩과 같은 자리표시 방식입니다. 실제 프로필 이미지 규격을 주시면 교체하겠습니다.\n· 빨간 LIVE 점과 글자는 뺐습니다. 이제 아바타 + 닉네임 · 시청자 수만 남습니다.\n\n브랜드 컬러 적용 (D 탄피 오렌지)\n로고 타일과 찾아보기 버튼은 면 #FF6A00 에 흰 글자·아이콘, 「신규」와 링크는 진한 #C24A00 입니다. 면과 글자가 서로 다른 값인 색이라 「브랜드 컬러」 페이지에 네 값을 정리해 뒀습니다.\n\n소식 목록의 신규 표기\n파란 점 대신 제목 옆에 「신규」를 글자로 붙였습니다. 배경 없이 브랜드 글자색(#C24A00) 만 쓰고(11px 굵게), 점이 있던 6px 자리 열은 통째로 없앴습니다 — 제목이 왼쪽으로 12px 붙고 그만큼 길게 들어갑니다. 옅은 바탕 + 컬러 글자로 만드는 뱃지 형태는 쓰지 않습니다. 서든어택 소식·서린즈 소식 각 2건에 붙어 있습니다.\n\n남은 검토거리\n· 스크롤을 내리면 히어로 검색창이 사라지는 건 헤더 돋보기 아이콘 + 검색 시트로 풀었습니다 (반응형 페이지의 「헤더 검색 · C안」). 헤더에 입력칸을 다시 넣지는 않습니다.\n· 히어로 오른쪽에 오늘의 요약 수치(분석된 경기 수 등)를 넣는 안도 있는데, 지금은 넣지 않았습니다. 필요하면 말씀해 주세요.\n· 스트리밍이 아랫줄로 내려가면서 그 줄이 소식 목록보다 200px쯤 높아졌습니다. 소식을 6건에서 8건으로 늘려 높이를 맞출지 정하면 좋겠습니다.\n· 「신규」를 며칠 이내 글에 붙일지 기준을 정하면 좋겠습니다. 지금 시안은 각 목록 최근 2건에만 붙여 뒀습니다.\n\n회색 사각형은 썸네일·스크린샷 자리, 닉네임·수치·공지 제목은 예시 데이터입니다."
|
||||
},
|
||||
{
|
||||
"id": "note-past",
|
||||
"x": 0,
|
||||
"y": -300,
|
||||
"w": 700,
|
||||
"id": "note-brand",
|
||||
"page": "page-1",
|
||||
"x": 1600,
|
||||
"y": -560,
|
||||
"w": 800,
|
||||
"text": "브랜드 컬러 확정 — D 탄피 오렌지\n\n네 값을 씁니다.\n· 면 #FF6A00 — 로고 타일, 주 버튼. 그 위 글자·아이콘은 흰색\n· 면 누름 · hover #D95A00\n· 글자 #C24A00 — 「신규」, 링크. 흰 바탕 위 4.91:1\n· 글자 hover #A03C00 — 흰 바탕 위 6.69:1\n\n면 위 흰 글자에 대해\n#FF6A00 에 흰 글자는 2.87:1 로 권고치(4.5:1) 아래입니다. 검정 글자로 두면 6.31:1 이지만 흰 글자 쪽 인상을 택했습니다. 나중에 통과선을 맞춰야 하면 면색을 #CE5400(4.29:1) 이나 #C24A00(4.91:1) 으로 한 단씩 내리는 자리가 있습니다 — 색은 그만큼 가라앉습니다.\n\n계속 지켜볼 것\n글자용 #C24A00 과 랭킹 하락 빨강 #C4453D 이 색상환에서 18° 밖에 안 떨어져 있습니다. 지금은 「신규」가 소식 목록에, 하락 표시가 랭킹 표에 있어 한 줄에서 만나지 않습니다. 두 색이 같은 줄에 놓이는 화면이 생기면 하락 색을 더 차갑게 옮기는 편이 낫습니다.\n\n후보 넷은 나중에 되돌아볼 수 있게 그대로 남겨 뒀습니다. D 행에 선택 표시를 해 뒀습니다.\n\n아직 안 정한 것 — 다크 모드 계획이 있으면 같은 색이라도 어두운 배경용 밝기를 한 단 올려 잡아야 합니다."
|
||||
},
|
||||
{
|
||||
"id": "note-loading",
|
||||
"page": "page-2",
|
||||
"text": "지난 시안 (참고용)\n\n고르지 않은 세 배치입니다. 나중에 되돌아볼 일이 있을까 싶어 남겨 뒀습니다. 지워도 괜찮으면 말씀해 주세요.\n이벤트 배너와 커뮤니티 글 종류는 세 안에도 모두 반영되어 있습니다."
|
||||
"x": 1600,
|
||||
"y": -620,
|
||||
"w": 800,
|
||||
"text": "홈 로딩 — 스켈레톤\n\n기준 하나로 갈랐습니다 — 서버 응답이 없어도 그릴 수 있는 것은 전부 즉시 그리고, 데이터가 있어야 알 수 있는 자리만 회색으로 둡니다.\n\n즉시 그리는 것 (회색 없음)\n· 헤더 전체 — 로고, 메뉴, 로그인 버튼\n· 히어로 — 문구 두 줄, 검색창, 찾아보기 버튼. 첫 화면에서 바로 검색할 수 있어야 하니 여기는 기다리게 하지 않습니다.\n· 섹션 제목과 「더 보기」, 탭(통합/시즌 · 솔로/파티/클랜 · 공지사항/업데이트 · 인기/최신/클립), 표 머리(순위·닉네임·등락·RP)\n· 랭킹의 순위 숫자 — 1~10위는 데이터를 기다릴 필요가 없어 미리 찍습니다. 회색 바가 그만큼 줄어듭니다.\n· 「매일 오전 8시 갱신」처럼 고정된 문구\n\n회색으로 두는 것\n최근 검색 칩, 이벤트 배너와 그 아래 설명 줄, 검색 랭킹 9줄, 게임 랭킹 세 열의 10줄씩, 커뮤니티 4칸, 소식 두 목록 6줄씩, 방송 대표 화면과 아래 3줄. 「18:20 기준」과 「1~10위 · 전체 100위」처럼 데이터에서 나오는 수치도 회색입니다.\n\n모양 규칙\n· 색은 #EDEFF2 하나만 씁니다. 흰색 띠가 1.6초에 한 번 왼쪽에서 오른쪽으로 지나갑니다.\n· 글자 자리는 높이 10~13px 막대에 라운드 5px. 실제 글자 크기가 클수록 막대도 두껍습니다.\n· 닉네임·제목 막대는 폭을 54~84% 사이로 흩어 놨습니다. 전부 같은 길이면 표가 아니라 무늬로 보입니다.\n· 이미지·썸네일 자리는 실제 비율과 라운드를 그대로 씁니다 (배너 720:248 라운드 24, 커뮤니티 1:1 라운드 18, 방송 16:9 라운드 16, 계급 타일 26px 라운드 8).\n· 행 높이와 구분선은 실제 화면과 같습니다. 데이터가 들어와도 레이아웃이 밀리지 않습니다.\n· 움직임 줄이기를 켠 기기에서는 쓸어가는 효과가 꺼지고 회색 막대만 남습니다.\n\n채우는 방식 — 섹션별로 따로 (확정)\n한 번에 모아서 보여주지 않습니다. 각 섹션이 자기 응답을 받는 즉시 스켈레톤을 걷어냅니다. 랭킹이 늦어도 소식은 먼저 뜹니다. 그래서 어느 순간이든 화면은 여러 상태가 섞여 있고, 그 모습이 오른쪽 「홈 · 섞인 상태」 아트보드입니다.\n\n지연은 두지 않습니다 (확정)\n스켈레톤을 200ms 늦게 띄우는 방식은 쓰지 않습니다. 응답이 빠르면 빠른 대로 바로 내용을 보여줍니다. 아주 빠른 응답에서 스켈레톤이 한 번 깜빡일 수 있지만, 일부러 기다리게 만드는 것보다 낫다고 봤습니다."
|
||||
},
|
||||
{
|
||||
"id": "note-states",
|
||||
"page": "page-2",
|
||||
"x": 3200,
|
||||
"y": -620,
|
||||
"w": 800,
|
||||
"text": "섞인 상태와 실패 · 비어 있음\n\n홈 · 섞인 상태 — 보기용 조합\n섹션별로 따로 채우기 때문에 화면은 어느 순간이든 여러 상태가 섞여 있습니다. 네 상태를 한 번에 보여주려고 섹션마다 다른 상태를 하나씩 배정했습니다.\n\n섹션과 상태는 정해진 짝이 아닙니다. 랭킹도 소식도 비어 있을 수 있고(빈 문구는 블록 아트보드 표에 있습니다), 커뮤니티도 방송도 실패할 수 있습니다. 아래 배정은 이 그림에서만 그렇다는 뜻입니다 — 아트보드 맨 위 띠와 점선 라벨로도 표시해 뒀고, 둘 다 실제 화면에는 없는 표시입니다.\n· 이벤트 — 완료\n· 검색 랭킹 — 로딩\n· 게임 랭킹 — 계급은 완료, 랭크전은 로딩, 클랜은 실패 (같은 섹션 안에서도 열마다 따로입니다)\n· 커뮤니티 — 비어 있음\n· 서든어택 소식 — 완료 / 서린즈 소식 — 실패\n· 지금 방송 중 — 비어 있음\n완료 부분은 홈 아트보드에서 그대로 떼어 온 것이라, 홈을 고치면 이 화면도 같이 따라옵니다.\n\n블록의 규격과 섹션별 문구는 디자인 시스템 페이지의 「실패 · 비어 있음 블록」에 있습니다.\n\n검토해 주실 것\n· 빈 상태 문구를 그대로 쓸지 봐 주세요. 특히 커뮤니티의 「첫 글 쓰러 가기」와 게임 랭킹의 「지난 시즌 보기」는 실제로 갈 곳이 있어야 합니다.\n· 랭킹처럼 자동으로 다시 시도하는 편이 나은 섹션이 있는지 — 지금은 전부 사용자가 눌러야 다시 부릅니다."
|
||||
},
|
||||
{
|
||||
"id": "note-responsive",
|
||||
"page": "page-2",
|
||||
"x": 0,
|
||||
"y": 2160,
|
||||
"w": 800,
|
||||
"text": "반응형 — 기준점 두 개\n\n프런트엔드에 잡힌 기준이 없어서 여기서 정했습니다. 기준점은 둘뿐입니다.\n· 1280 이상 — 세 열. 홈(확정) 아트보드 그대로입니다. 게임 랭킹의 계급·랭크전·클랜을 나란히 놓습니다.\n· 768 ~ 1279 — 두 열. 이 페이지의 태블릿 아트보드가 좁은 쪽 끝(768)입니다.\n· 768 미만 — 한 열. 모바일 아트보드입니다.\n기준점을 둘로 줄인 이유는 세 열을 유지할 수 있는 폭이 실제로 1280 부터이고, 두 열이 무너지는 지점이 768 이기 때문입니다. 사이에 하나 더 두면 관리할 경우의 수만 늘어납니다.\n\n가장 큰 변화 — 게임 랭킹\n세 갈래를 나란히 놓는 건 1280 이상에서만 합니다. 그 아래에서는 계급 / 랭크전 / 클랜을 밑줄형 세그먼트로 바꿔 한 번에 하나만 봅니다. 표가 전체 폭을 쓰게 되어 닉네임이 잘리지 않습니다.\n세그먼트를 하위 탭(통합/시즌 같은 알약)과 다른 모양으로 만든 것은 의도한 것입니다. 갈래를 고르는 것과 필터를 고르는 것은 다른 층위라, 같은 알약을 두 줄로 쌓으면 무엇이 상위인지 읽히지 않습니다.\n\n태블릿(768)에서 순서를 하나 바꿨습니다\n커뮤니티를 검색 랭킹 옆으로 끌어올렸습니다. 데스크톱 순서 그대로 두 열에 흘리면 게임 랭킹이 두 칸을 차지하는 탓에 검색 랭킹 옆이 빈 칸으로 남습니다. 방송도 두 칸을 쓰되 대표 화면을 왼쪽에 눕히고 목록을 오른쪽에 두어, 세로로 길어지지 않게 했습니다.\n\n모바일(390)에서 정한 것들\n· 메뉴는 서랍으로 접었지만 검색은 접지 않았습니다. 히어로의 검색창은 그대로 첫 화면에 있습니다.\n· 누르는 것은 모두 44px 이상입니다. 랭킹 행은 46 → 52, 소식 행은 46 → 50, 페이지 이동 화살표는 34 → 44 로 키웠습니다.\n· 최근 검색 칩과 이벤트 배너는 옆으로 밀어 넘깁니다. 화살표 버튼은 뺐습니다.\n· 커뮤니티는 2×2 정사각을 그대로 씁니다. 한 열로 풀면 카드가 너무 커집니다.\n· 아래쪽 고정 탭바는 넣지 않았습니다. 웹이라 브라우저 UI와 겹치고, 홈에서 바로 갈 곳은 이미 각 섹션의 「전체 보기」에 있습니다.\n\n그대로 두는 것\n색·글꼴·문구·아이콘은 폭과 무관하게 같습니다. 로딩 스켈레톤과 실패·비어 있음 블록도 같은 규칙을 그대로 따릅니다 — 폭에 따라 막대 길이와 블록 높이만 달라집니다.\n\n검토해 주실 것\n· 모바일에서 섹션 순서를 데스크톱과 같게 뒀습니다 (이벤트 → 검색 랭킹 → 게임 랭킹 → 커뮤니티 → 소식 → 방송). 모바일에서는 게임 랭킹을 검색 랭킹보다 위로 올리는 것도 방법인데, 지금은 바꾸지 않았습니다.\n· 스크롤 뒤 검색 진입점은 정해졌습니다 — 헤더 돋보기 아이콘 + 검색 시트(오른쪽 「헤더 검색 · C안」). 세 폭 모두 같은 방식입니다."
|
||||
},
|
||||
{
|
||||
"id": "note-search",
|
||||
"page": "page-2",
|
||||
"x": 4800,
|
||||
"y": -620,
|
||||
"w": 800,
|
||||
"text": "헤더 검색 — C안 확정\n\n히어로 검색창이 화면 밖으로 나가면 헤더에 돋보기 아이콘이 나타나고, 누르면 검색 시트가 열립니다. 세 폭 모두 같은 방식이고 시트 크기만 다릅니다 — 데스크톱·태블릿은 가운데 640px 카드, 모바일은 전체 화면입니다.\n\n왜 헤더에 입력칸을 넣지 않았나\n· 모바일 헤더 390px 안에는 로고와 햄버거가 이미 있어, 입력칸까지 넣으면 셋 다 옹색해집니다. 어차피 눌러야 키보드가 올라오니 아이콘 한 번이 손해가 아닙니다.\n· 데스크톱은 폭이 남지만, 폭마다 다른 방식을 쓰면 만들 것도 설명할 것도 둘이 됩니다. 헤더에서 검색을 빼 히어로로 올린 확정안과도 결이 맞습니다.\n\n정한 것들\n· 헤더는 스크롤해도 위에 붙어 있습니다. 아이콘은 맨 위에서는 없다가 히어로가 벗어난 뒤 나타납니다 — 맨 위에서는 바로 아래 큰 검색창이 있어 같은 것이 둘이 됩니다.\n· 아이콘이 나타날 때 헤더에 옅은 그림자가 함께 생겨, 스크롤된 상태라는 것이 보입니다.\n· 아직 아무것도 안 친 시트에는 최근 검색과 「지금 많이 찾는」 다섯이 들어갑니다. 홈의 검색 랭킹과 같은 데이터라 새로 만들 것이 없고, 빈 시트를 마주하지 않게 합니다.\n· 닫기 — 데스크톱은 ESC 와 바깥 누르기, 모바일은 「취소」. 뒤로 가기로도 닫히게 하는 편이 좋습니다.\n· 모바일 시트는 전체 화면입니다. 반쯤 덮는 시트로 만들면 키보드가 올라왔을 때 남는 높이가 너무 작습니다. 목록이 키보드에 가리므로 최근 검색을 위쪽에 뒀습니다.\n· 아이콘·햄버거·최근 검색의 X 모두 모바일에서 44px 입니다.\n\n아직 안 그린 것\n글자를 치기 시작하면 최근 검색과 「지금 많이 찾는」 자리에 자동완성 결과가 들어옵니다. 그 화면은 아직 없습니다 — 필요하면 이어서 그리겠습니다."
|
||||
},
|
||||
{
|
||||
"id": "note-logo",
|
||||
"page": "page-1",
|
||||
"x": 0,
|
||||
"y": -560,
|
||||
"w": 800,
|
||||
"text": "서린즈 워드마크\n\n글꼴을 골라 쓰지 않고 획을 직접 그렸습니다. 서 = ㅅ+ㅓ, 린 = ㄹ+ㅣ+ㄴ, 즈 = ㅈ+ㅡ 인데 이 일곱 자모가 모두 곧은 선이라, 선으로만 짜고 끝과 꺾이는 자리를 둥글게 굴려 «동글»한 인상을 만들었습니다.\n글꼴 파일에 기대지 않으니 어디에 써도 같은 모양이 나오고, 크기를 키워도 깨지지 않으며, PNG·PDF 로 내보낼 때도 그대로 나옵니다. 글꼴을 썼다면 내보낼 때 다른 글꼴로 바뀝니다.\n\n다듬은 자리\n· 글자마다 속 폭이 달라서 글자 사이를 같은 값으로 두면 「린」과 「즈」 사이가 벌어져 보입니다. 눈으로 고르게 보이도록 세 글자의 가로 위치를 하나씩 잡았습니다.\n· 「린」은 ㄹ 의 가로획 셋에 받침 ㄴ 까지 네 겹이라, 처음 두께(18)에서는 ㄹ 속이 막혔습니다. 두께를 15 로 낮추고 ㄹ 을 조금 키운 뒤 ㄴ 을 아래로 내려 숨통을 틔웠습니다.\n· 「즈」는 ㅈ 다리를 길게 내려 ㅡ 와의 사이가 비어 보이지 않게 했습니다.\n\n정한 것\n· 색은 셋뿐입니다 — 검정 #14161A, 오렌지 #FF6A00, 오렌지 바탕 위 흰색. 사진 위에는 바로 올리지 않고 오렌지 바탕을 깔고 흰 워드마크를 올립니다.\n· 획 두께는 기본 15 입니다. 큰 화면이나 인쇄물에는 13, 아주 작게 쓰거나 굿즈에는 20 을 씁니다.\n· 최소 높이 16px. 그 아래로는 「린」의 ㄹ 속이 막힙니다. 둘레 여백은 글자 높이의 절반 이상.\n· 파비콘·앱 아이콘처럼 좁은 자리에는 심볼(오렌지 타일 + 돋보기)만 씁니다. 워드마크를 정사각에 욱여넣지 않습니다.\n\n적용 범위\n모든 아트보드의 헤더를 워드마크로 바꿨습니다 — 홈, 로딩, 섞인 상태, 태블릿, 모바일, 헤더 검색, 브랜드 컬러, 지난 시안까지. 심볼(오렌지 타일 + 돋보기)은 그대로 두고 글자만 바뀌었습니다.\n\n봐 주실 것\n· 획 두께 셋 중 기본값이 맞는지 봐 주세요. 헤더에서는 15 가 지금 홈의 글자 굵기와 가장 비슷하게 보입니다.\n· 심볼의 돋보기를 계속 쓸지도 정하면 좋겠습니다. 지금은 첫 시안의 것을 그대로 두었고, 워드마크와 짝을 새로 맞춘 심볼이 필요하면 이어서 그리겠습니다."
|
||||
},
|
||||
{
|
||||
"id": "note-foundations",
|
||||
"page": "page-1",
|
||||
"x": 3200,
|
||||
"y": -560,
|
||||
"w": 800,
|
||||
"text": "기본 요소\n\n홈을 그리면서 실제로 굳어진 값만 모았습니다. 새로 만든 표가 아니라 이미 화면에 쓰이고 있는 것을 한자리에 옮겨 적은 것입니다.\n· 글자 — 아홉 단계. Pretendard 400/500/600/700 네 굵기만 씁니다. 숫자는 tabular-nums.\n· 색 — 브랜드 4, 글자 5, 선 3, 면 5, 의미 2. 여기 없는 색은 쓰지 않습니다.\n· 컴포넌트 — 탭(필터)과 세그먼트(갈래)를 다른 모양으로 두는 이유, 버튼 세 종류, 표 한 줄의 구성.\n· 치수 — 라운드·행 높이·여백·최소 터치 크기.\n\n여기 없는 크기나 색을 화면에서 쓰게 되면, 먼저 이 아트보드에 올리고 나서 씁니다. 그래야 한 벌로 남습니다."
|
||||
},
|
||||
{
|
||||
"id": "note-blocks",
|
||||
"page": "page-1",
|
||||
"x": 4800,
|
||||
"y": -560,
|
||||
"w": 800,
|
||||
"text": "실패 · 비어 있음 블록\n\n섹션마다 따로 채우기 때문에 한 섹션이 실패하거나 비어도 나머지는 그대로 보입니다. 실제로 섞인 화면은 홈 페이지의 「홈 · 섞인 상태」에 있습니다.\n\n· 두 상태 모두 섹션 본문이 있어야 할 높이를 그대로 차지합니다. 이게 핵심입니다 — 안 그러면 늦게 도착한 섹션 때문에 페이지가 계속 튑니다.\n· 바탕 #FAFBFC · 테두리 1px #EDEFF2 · 라운드 16px. 아이콘은 44px 회색 원 안에 선 아이콘이고, 색으로 경고하지 않습니다 (브랜드 오렌지도 빨강도 쓰지 않습니다).\n· 실패 문구는 에러 코드 맵의 SYS_001 문장을 그대로 씁니다. 화면에서 문구를 새로 짓지 않고, 서버가 다른 코드를 주면 그 코드의 문장이 나옵니다.\n· 실패에는 「다시 시도」 버튼이 항상 붙고, 그 섹션만 다시 부릅니다. 페이지 전체를 새로 고치게 하지 않습니다.\n· 비어 있음 문구는 섹션마다 다릅니다. 여섯 섹션 문구는 아트보드의 표에 있습니다.\n\n갈림 기준은 하나입니다 — 요청이 실패했으면 실패, 요청은 됐는데 목록이 0건이면 비어 있음."
|
||||
}
|
||||
],
|
||||
"launch": {
|
||||
"view": "canvas",
|
||||
"page": "page-1"
|
||||
"page": "page-2"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1 @@
|
||||
실패·비어있음블록섹션마다따로채우기때문에한이하거나도머지는그대보입니.두상태모본자리를차해서,늦게착페가밀않습든공통일시적인스템오류발생했잠후주세요구름(커뮤티예)아직올라온글없첫쓰러의규격바탕#FABC테1pxED2운드6야할높min-hegt웁콘은4원형7안선9색으경고—브랜렌빨강5조3데정렬최0r줄꿈「」버튼흰항붙갈곳을만링크코맵SY_장씁른내려면뀝화새짓부릅전체치별«터»같묶았유르액벤트진행중열알릴검랭킹집계된쌓순위타납임번즌난소식택린즈등금방송널작되여표됩컬탄피확얹변과값래네넷돌볼수남겨뒀8:누ov단둡신미잡혀승락속켜것권밝살쪽결키굵감맞춰씩용환°떨져놓더갑옮편낫루돈klc%사초멀헷걸점흔합N파랑덩읽억찾히월무명연디렛넉뼘앉와겹또렷P재툴먼저옵딥틸분낮숫빽튀들깝약뜻총럽못칩홈제굳필추da/목궁?달빛각설닉날짜벨bus켭간클좁힙~꼴반복탭큰카배너썸톱좌백밖흐활성옅냐립컴포넌양급층므칼햄–▲▼셋뿐밍근까력봤동매갱솔R…업획접렸=ㅅ+ㅓㄹㅣㄴㅈㅡ곱곧끝꺾둥굴냈써워깨며낼쓸깔께둘쇄물헤롯톰굿처럼심릿앞던돋뺐말맡앱칸떼욱넣회막레절율꾸울림얇꿉꿔벽벌준밤샷삼골웨박령호찰폭롱컨K칭개률었졌즐능칙듬탈출청참판관침넥슨I창맨뒤롤벗함줍많칠쳤섯빈깥닫옹눌취쯤덮왔좋X웠완담짝느띠료딩!"$&'*;<>@GHJLMOQTUVWZ[\]^`fjqwyz{|}‘’“”『』〈〉《》±×÷≤≥→←↑↓★☆※℃％㎏㎜㎝
|
||||
@@ -0,0 +1,46 @@
|
||||
// 아트보드가 실제로 쓰는 글자만 남긴 Pretendard 서브셋을 만든다.
|
||||
// 아트보드마다 폰트가 통째로 들어가므로(각 아트보드는 독립 문서), 글자 수를 줄이는 것이 곧 캔버스 용량이다.
|
||||
import { readFileSync, writeFileSync, readdirSync, mkdirSync } from 'node:fs';
|
||||
import { join } from 'node:path';
|
||||
import subsetFont from 'subset-font';
|
||||
import { decompress } from 'wawoff2';
|
||||
|
||||
const DIR = process.argv[2]; // .design/surinz
|
||||
const TPL = join(DIR, 'templates');
|
||||
const SRC = join(DIR, 'fonts');
|
||||
const OUT = join(DIR, 'fonts', 'mini');
|
||||
|
||||
// 1) 아트보드 텍스트에서 쓰이는 글자를 모은다 (style 블록과 태그는 제외)
|
||||
const used = new Set();
|
||||
for (const name of readdirSync(TPL).filter((n) => n.endsWith('.dc.html'))) {
|
||||
const src = readFileSync(join(TPL, name), 'utf8')
|
||||
.replace(/<style[\s\S]*?<\/style>/g, '')
|
||||
.replace(/<[^>]+>/g, ' ');
|
||||
for (const c of src) used.add(c);
|
||||
}
|
||||
|
||||
// 2) 안전 여유 — 아스키 인쇄 가능 문자와 자주 쓰는 기호는 항상 포함
|
||||
for (let i = 0x20; i <= 0x7e; i += 1) used.add(String.fromCharCode(i));
|
||||
for (const c of '·…—–‘’“”「」『』〈〉《》±×÷≤≥→←↑↓★☆※℃％㎏㎜㎝가나다라마바사아자차카타파하') used.add(c);
|
||||
|
||||
const text = [...used].filter((c) => c.charCodeAt(0) > 0x1f).join('');
|
||||
console.log(`서브셋 글자 수 ${text.length}`);
|
||||
|
||||
mkdirSync(OUT, { recursive: true });
|
||||
writeFileSync(join(OUT, 'charset.txt'), text, 'utf8');
|
||||
|
||||
const WEIGHTS = ['Regular', 'SemiBold', 'Bold'];
|
||||
let before = 0;
|
||||
let after = 0;
|
||||
|
||||
for (const w of WEIGHTS) {
|
||||
const woff2 = readFileSync(join(SRC, `Pretendard-${w}.subset.woff2`));
|
||||
before += woff2.length;
|
||||
const ttf = Buffer.from(await decompress(woff2));
|
||||
const out = await subsetFont(ttf, text, { targetFormat: 'woff2' });
|
||||
after += out.length;
|
||||
writeFileSync(join(OUT, `Pretendard-${w}.mini.woff2`), out);
|
||||
console.log(`${w.padEnd(9)} ${(woff2.length / 1024).toFixed(0).padStart(4)} KB → ${(out.length / 1024).toFixed(0).padStart(3)} KB`);
|
||||
}
|
||||
|
||||
console.log(`합계 ${(before / 1024).toFixed(0)} KB → ${(after / 1024).toFixed(0)} KB (아트보드 1개당)`);
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,171 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 서린즈 — 실패 · 비어 있음 블록 규격과 섹션별 문구 */
|
||||
body { margin: 0; }
|
||||
.d-root, .d-root * { box-sizing: border-box; }
|
||||
.d-root {
|
||||
font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
a { color: #C24A00; text-decoration: none; }
|
||||
a:hover { color: #A03C00; }
|
||||
.d-h2 { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em; }
|
||||
.d-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
|
||||
.d-tab { display: inline-flex; align-items: center; height: 30px; padding: 0 0.8125rem; border-radius: 999px; background: #F5F6F8; font-size: 0.8125rem; font-weight: 500; color: #5B6169; }
|
||||
.d-tab-on { background: #14161A; font-weight: 600; color: #FFFFFF; }
|
||||
.d-more { font-size: 0.8125rem; font-weight: 600; color: #5B6169; }
|
||||
.d-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.d-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #F0F2F5; }
|
||||
.d-mv { display: flex; align-items: center; justify-content: flex-end; gap: 0.1875rem; }
|
||||
.d-arw { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; }
|
||||
|
||||
/* 스켈레톤 — 한 덩어리(.s)로 통일하고 크기·라운드만 자리마다 다르게 준다 */
|
||||
.s { display: block; position: relative; overflow: hidden; background: #EDEFF2; }
|
||||
.s::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform: translateX(-100%);
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
|
||||
animation: s-sweep 1.6s ease-in-out infinite;
|
||||
}
|
||||
@keyframes s-sweep { to { transform: translateX(100%); } }
|
||||
/* 움직임을 줄이도록 설정한 기기에서는 쓸어가는 효과를 끈다 */
|
||||
@media (prefers-reduced-motion: reduce) { .s::after { animation: none; } }
|
||||
|
||||
/* 실패 · 비어 있음 — 섹션 본문 자리를 그대로 채워 레이아웃이 튀지 않게 한다 */
|
||||
.st { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.5rem; border: 1px solid #EDEFF2; border-radius: 16px; background: #FAFBFC; text-align: center; }
|
||||
.st-t { margin: 0; font-size: 0.875rem; line-height: 1.6; color: #5B6169; max-width: 20rem; }
|
||||
.st-s { margin: 0; font-size: 0.8125rem; line-height: 1.6; color: #9BA1A9; }
|
||||
.st-b { display: inline-flex; align-items: center; height: 36px; padding: 0 1rem; border: 1px solid #D6DAE0; border-radius: 999px; background: #FFFFFF; font-family: inherit; font-size: 0.8125rem; font-weight: 600; color: #14161A; cursor: pointer; }
|
||||
.st-l { font-size: 0.8125rem; font-weight: 600; color: #C24A00; }
|
||||
.st-i { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: #F2F4F7; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="d-root" style="width: 1440px; min-height: 1040px; padding: 48px; background: #FFFFFF; color: #14161A;">
|
||||
|
||||
<h1 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">실패 · 비어 있음 블록</h1>
|
||||
<p style="margin: 0.625rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: #5B6169; max-width: 68rem;">섹션마다 따로 채우기 때문에 한 섹션이 실패하거나 비어도 나머지는 그대로 보입니다. 두 상태 모두 섹션 본문 자리를 그대로 차지해서, 늦게 도착한 섹션 때문에 페이지가 밀리지 않습니다.</p>
|
||||
|
||||
<div style="display: flex; gap: 2rem; margin-top: 1.75rem;">
|
||||
|
||||
<div style="flex-shrink: 0; width: 432px;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.75rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">실패</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">모든 섹션 공통</span>
|
||||
</div>
|
||||
<div class="st" style="min-height: 240px;">
|
||||
<span class="st-i"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"></circle><path d="M12 7.5v5"></path><path d="M12 16.2h.01"></path></svg></span>
|
||||
<p class="st-t">일시적인 시스템 오류가 발생했습니다.<br>잠시 후 다시 시도해 주세요.</p>
|
||||
<button class="st-b">다시 시도</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-shrink: 0; width: 432px;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.75rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">비어 있음</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">섹션마다 문구가 다름 (커뮤니티 예시)</span>
|
||||
</div>
|
||||
<div class="st" style="min-height: 240px;">
|
||||
<span class="st-i"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5a3 3 0 01-3 3H9.5L5 20.5V6a3 3 0 013-3h9a3 3 0 013 3z"></path></svg></span>
|
||||
<p class="st-t">아직 올라온 글이 없어요</p>
|
||||
|
||||
<span class="st-l">첫 글 쓰러 가기</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="font-size: 0.9375rem; font-weight: 700;">두 블록의 공통 규격</div>
|
||||
<ul style="margin: 0.625rem 0 0; padding-left: 1.0625rem;">
|
||||
<li style="margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">바탕 #FAFBFC · 테두리 1px #EDEFF2 · 라운드 16px. 섹션 본문이 있어야 할 높이를 <span style="font-weight: 700; color: #14161A;">min-height</span> 로 그대로 채웁니다.</li>
|
||||
<li style="margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">아이콘은 44px 원형(#F2F4F7) 안에 22px 선 아이콘(#9BA1A9). 색으로 경고를 주지 않습니다 — 브랜드 오렌지도, 빨강도 쓰지 않습니다.</li>
|
||||
<li style="margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">본문 14px #5B6169, 보조 문구 13px #9BA1A9, 가운데 정렬, 최대 20rem 에서 줄바꿈.</li>
|
||||
<li style="margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">실패에는 <span style="font-weight: 700; color: #14161A;">「다시 시도」</span> 버튼(36px · 흰 바탕 · 1px #D6DAE0 테두리)이 항상 붙습니다. 비어 있음에는 갈 곳이 있을 때만 글자 링크를 붙입니다.</li>
|
||||
<li style="margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">실패 문구는 에러 코드 맵의 <span style="font-weight: 700; color: #14161A;">SYS_001</span> 문장을 그대로 씁니다. 서버가 다른 코드를 내려주면 그 코드의 문장으로 바뀝니다 — 화면에서 문구를 새로 짓지 않습니다.</li>
|
||||
<li style="margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">한 섹션이 실패해도 그 섹션만 다시 부릅니다. 페이지 전체를 새로 고치게 하지 않습니다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 2.25rem;">
|
||||
<div style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">섹션별 비어 있음 문구</div>
|
||||
<p style="margin: 0.5rem 0 0; font-size: 0.8125rem; line-height: 1.6; color: #9BA1A9;">«데이터가 없습니다» 같은 한 문장으로 묶지 않았습니다. 비어 있는 이유가 섹션마다 다르고, 다음에 할 일도 다릅니다.</p>
|
||||
<div style="margin-top: 1rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: grid; grid-template-columns: 210px minmax(0, 1.1fr) minmax(0, 1fr) 150px; align-items: center; gap: 1rem; height: 36px; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">섹션</span><span class="d-th">문구</span><span class="d-th">보조 문구</span><span class="d-th">액션</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 210px minmax(0, 1.1fr) minmax(0, 1fr) 150px; align-items: center; gap: 1rem; min-height: 52px; padding: 0.625rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<span style="display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #F2F4F7;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 4.5v15"></path><path d="M4.5 5.5h12l-2.4 3.4 2.4 3.4h-12"></path></svg></span>
|
||||
<span style="font-size: 0.875rem; font-weight: 600;">이벤트</span>
|
||||
</div>
|
||||
<span style="font-size: 0.875rem;">진행 중인 이벤트가 없어요</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">새 이벤트가 열리면 알려 드릴게요</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: #C9CDD3;">없음</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 210px minmax(0, 1.1fr) minmax(0, 1fr) 150px; align-items: center; gap: 1rem; min-height: 52px; padding: 0.625rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<span style="display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #F2F4F7;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5h16"></path><path d="M7.5 16.5v-4"></path><path d="M12 16.5v-8"></path><path d="M16.5 16.5v-5.5"></path></svg></span>
|
||||
<span style="font-size: 0.875rem; font-weight: 600;">검색 랭킹</span>
|
||||
</div>
|
||||
<span style="font-size: 0.875rem;">아직 집계된 검색이 없어요</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">검색이 쌓이면 순위가 나타납니다</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: #C9CDD3;">없음</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 210px minmax(0, 1.1fr) minmax(0, 1fr) 150px; align-items: center; gap: 1rem; min-height: 52px; padding: 0.625rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<span style="display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #F2F4F7;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5h16"></path><path d="M7.5 16.5v-4"></path><path d="M12 16.5v-8"></path><path d="M16.5 16.5v-5.5"></path></svg></span>
|
||||
<span style="font-size: 0.875rem; font-weight: 600;">게임 랭킹</span>
|
||||
</div>
|
||||
<span style="font-size: 0.875rem;">이번 시즌 랭킹이 아직 열리지 않았어요</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">—</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: #C24A00;">지난 시즌 보기</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 210px minmax(0, 1.1fr) minmax(0, 1fr) 150px; align-items: center; gap: 1rem; min-height: 52px; padding: 0.625rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<span style="display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #F2F4F7;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5a3 3 0 01-3 3H9.5L5 20.5V6a3 3 0 013-3h9a3 3 0 013 3z"></path></svg></span>
|
||||
<span style="font-size: 0.875rem; font-weight: 600;">커뮤니티</span>
|
||||
</div>
|
||||
<span style="font-size: 0.875rem;">아직 올라온 글이 없어요</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">—</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: #C24A00;">첫 글 쓰러 가기</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 210px minmax(0, 1.1fr) minmax(0, 1fr) 150px; align-items: center; gap: 1rem; min-height: 52px; padding: 0.625rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<span style="display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #F2F4F7;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13.5 3H7.5a2 2 0 00-2 2v14a2 2 0 002 2h9a2 2 0 002-2V8z"></path><path d="M13.5 3v5h5"></path></svg></span>
|
||||
<span style="font-size: 0.875rem; font-weight: 600;">소식 (서든어택 · 서린즈)</span>
|
||||
</div>
|
||||
<span style="font-size: 0.875rem;">등록된 소식이 없어요</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">—</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: #C9CDD3;">없음</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 210px minmax(0, 1.1fr) minmax(0, 1fr) 150px; align-items: center; gap: 1rem; min-height: 52px; padding: 0.625rem 0;">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<span style="display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #F2F4F7;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="12.5" rx="3"></rect><path d="M10.5 9.2l4.8 3-4.8 3z"></path></svg></span>
|
||||
<span style="font-size: 0.875rem; font-weight: 600;">지금 방송 중</span>
|
||||
</div>
|
||||
<span style="font-size: 0.875rem;">지금 방송 중인 채널이 없어요</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">방송이 시작되면 여기에 표시됩니다</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: #C9CDD3;">없음</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,319 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 서린즈 브랜드 컬러 — D 탄피 오렌지 확정, 후보 넷 비교 기록 */
|
||||
body { margin: 0; }
|
||||
.b-root, .b-root * { box-sizing: border-box; }
|
||||
.b-root {
|
||||
font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
a { color: #C24A00; text-decoration: none; }
|
||||
a:hover { color: #A03C00; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="b-root" style="width: 1440px; min-height: 1500px; padding: 48px; background: #FFFFFF; color: #14161A;">
|
||||
|
||||
<h1 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">브랜드 컬러 — 탄피 오렌지</h1>
|
||||
<p style="margin: 0.625rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: #5B6169; max-width: 68rem;">D안으로 확정했습니다. 면 위에는 흰 글자·아이콘을 얹고, 흰 바탕 위 글자는 진한 변형을 씁니다 — 면과 글자가 서로 다른 값을 쓰는 색이라 아래 네 값으로 정리했습니다. 후보 넷은 나중에 되돌아볼 수 있게 그대로 남겨 뒀습니다.</p>
|
||||
|
||||
<div style="display: flex; gap: 0.75rem; margin-top: 1.5rem;">
|
||||
<div style="flex-grow: 1; padding: 1.125rem 1.25rem; border-radius: 16px; background: #FF6A00;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.8);">면 — 주 버튼 · 강조 면</div>
|
||||
<div style="margin-top: 0.375rem; font-size: 1.25rem; font-weight: 700; color: #FFFFFF;">#FF6A00</div>
|
||||
<div style="margin-top: 0.5rem; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.8);">그 위 글자·아이콘은 흰색 · 2.87 : 1</div>
|
||||
</div>
|
||||
<div style="flex-grow: 1; padding: 1.125rem 1.25rem; border-radius: 16px; background: #D95A00;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.75);">면 누름 · hover</div>
|
||||
<div style="margin-top: 0.375rem; font-size: 1.25rem; font-weight: 700; color: #FFFFFF;">#D95A00</div>
|
||||
<div style="margin-top: 0.5rem; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.75);">면색보다 한 단 어둡게</div>
|
||||
</div>
|
||||
<div style="flex-grow: 1; padding: 1.125rem 1.25rem; border-radius: 16px; background: #C24A00;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.75);">글자 — 「신규」 · 링크</div>
|
||||
<div style="margin-top: 0.375rem; font-size: 1.25rem; font-weight: 700; color: #FFFFFF;">#C24A00</div>
|
||||
<div style="margin-top: 0.5rem; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.75);">흰 바탕 위 4.91 : 1</div>
|
||||
</div>
|
||||
<div style="flex-grow: 1; padding: 1.125rem 1.25rem; border-radius: 16px; background: #A03C00;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.75);">글자 hover</div>
|
||||
<div style="margin-top: 0.375rem; font-size: 1.25rem; font-weight: 700; color: #FFFFFF;">#A03C00</div>
|
||||
<div style="margin-top: 0.5rem; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.75);">흰 바탕 위 6.69 : 1</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 2rem; margin-top: 0.75rem; padding: 1rem 1.25rem; border-radius: 14px; background: #F5F6F8;">
|
||||
<div style="flex-shrink: 0;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: #7A828C;">이미 잡혀 있는 색</div>
|
||||
<div style="display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem;">
|
||||
<span style="display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem;"><span style="width: 12px; height: 12px; border-radius: 4px; background: #12805C;"></span>상승 #12805C</span>
|
||||
<span style="display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem;"><span style="width: 12px; height: 12px; border-radius: 4px; background: #C4453D;"></span>하락 #C4453D</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex-shrink: 0; width: 1px; background: #E4E8ED;"></div>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: #7A828C;">계속 지켜볼 것</div>
|
||||
<p style="margin: 0.5rem 0 0; font-size: 0.8125rem; line-height: 1.6; color: #5B6169;">면 위 흰 글자는 2.87:1 로 권고치 아래입니다. 밝기를 살리는 쪽을 택한 결과이고, 버튼 글자를 키우거나 굵게 하면 체감은 나아집니다. 나중에 통과선을 맞춰야 하면 면색을 <span style="font-weight: 700; color: #CE5400;">#CE5400</span>(4.29:1) · <span style="font-weight: 700; color: #C24A00;">#C24A00</span>(4.91:1) 쪽으로 한 단씩 내리는 자리가 있습니다.<br>글자용 <span style="font-weight: 700; color: #C24A00;">#C24A00</span> 과 하락 빨강 <span style="font-weight: 700; color: #C4453D;">#C4453D</span> 은 색상환에서 18° 떨어져 있습니다. 두 색이 같은 줄에 놓이는 화면이 생기면 하락 색을 더 차갑게 옮기는 편이 낫습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 1.75rem; margin-top: 2rem;">
|
||||
|
||||
<div style="display: flex; gap: 2rem; padding: 0 0 1.75rem; border-bottom: 1px solid #EDEFF2;">
|
||||
|
||||
<div style="flex-shrink: 0; width: 224px;">
|
||||
<div style="display: flex; align-items: flex-end; height: 132px; padding: 0.875rem; border-radius: 16px; background: #0B5FFF;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">#0B5FFF</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem;">
|
||||
<span style="flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; background: #0A4ACC; border: 1px solid rgba(20, 22, 26, 0.08);"></span>
|
||||
<span style="font-size: 0.75rem; color: #5B6169;">면 누름 · 글자 hover</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.75rem; font-weight: 600; color: #14161A;">#0A4ACC</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-shrink: 0; width: 372px;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem;">
|
||||
<span style="font-size: 0.75rem; font-weight: 700; color: #0B5FFF;">A</span>
|
||||
<span style="font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">코발트 블루</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">지금 색을 정돈한 안</span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 1.25rem; margin-top: 0.625rem; padding-bottom: 0.75rem; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.75rem; color: #7A828C;">oklch(55.2% 0.248 262)</span>
|
||||
<span style="font-size: 0.75rem; color: #7A828C;">면 위 글자 대비 <span style="font-weight: 700; color: #14161A;">5.13 : 1</span></span>
|
||||
</div>
|
||||
<p style="margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.65;">전적·기록 사이트에서 기대되는 색입니다. 상승 초록·하락 빨강과 색상환에서 멀리 떨어져 있어 랭킹 표에서 헷갈릴 일이 없습니다.</p>
|
||||
<p style="margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.65; color: #7A828C;">걸리는 점 — 가장 흔합니다. 다른 전적 사이트, SNS 파랑과 한 덩어리로 읽혀서 기억에 남지 않습니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0; padding: 1.125rem 1.25rem; border: 1px solid #E4E8ED; border-radius: 16px;">
|
||||
<div style="display: flex; align-items: center; gap: 1rem;">
|
||||
<svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#0B5FFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 1.125rem; border-radius: 11px; background: #0B5FFF;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">찾아보기</span>
|
||||
</div>
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #0B5FFF;">전적 자세히 보기</span>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 1rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내</span>
|
||||
<span style="flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; color: #0B5FFF; letter-spacing: -0.01em;">신규</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.02</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 42px;">
|
||||
<span style="width: 14px; font-size: 0.8125rem; font-weight: 700; color: #9BA1A9;">1</span>
|
||||
<span style="display: inline-flex; width: 26px; height: 26px; border-radius: 8px; background: #EDEFF2;"></span>
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 600;">무명연대장</span>
|
||||
<span style="display: flex; align-items: center; gap: 0.1875rem;"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 2rem; padding: 0 0 1.75rem; border-bottom: 1px solid #EDEFF2;">
|
||||
|
||||
<div style="flex-shrink: 0; width: 224px;">
|
||||
<div style="display: flex; align-items: flex-end; height: 132px; padding: 0.875rem; border-radius: 16px; background: #4F39E0;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">#4F39E0</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem;">
|
||||
<span style="flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; background: #402DB8; border: 1px solid rgba(20, 22, 26, 0.08);"></span>
|
||||
<span style="font-size: 0.75rem; color: #5B6169;">면 누름 · 글자 hover</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.75rem; font-weight: 600; color: #14161A;">#402DB8</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-shrink: 0; width: 372px;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem;">
|
||||
<span style="font-size: 0.75rem; font-weight: 700; color: #4F39E0;">B</span>
|
||||
<span style="font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">인디고 바이올렛</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">대비가 가장 넉넉한 안</span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 1.25rem; margin-top: 0.625rem; padding-bottom: 0.75rem; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.75rem; color: #7A828C;">oklch(48.8% 0.237 279)</span>
|
||||
<span style="font-size: 0.75rem; color: #7A828C;">면 위 글자 대비 <span style="font-weight: 700; color: #14161A;">7.01 : 1</span></span>
|
||||
</div>
|
||||
<p style="margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.65;">파랑에서 한 뼘 옮겨 앉아 다른 전적 사이트와 겹치지 않습니다. 흰 바탕 대비가 7:1 이라 작은 「신규」 글자도 또렷합니다.</p>
|
||||
<p style="margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.65; color: #7A828C;">걸리는 점 — 보라 계열이라 밀리터리 FPS 라는 소재와는 거리가 있습니다. 게임보다 서비스·툴 인상이 먼저 옵니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0; padding: 1.125rem 1.25rem; border: 1px solid #E4E8ED; border-radius: 16px;">
|
||||
<div style="display: flex; align-items: center; gap: 1rem;">
|
||||
<svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#4F39E0" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 1.125rem; border-radius: 11px; background: #4F39E0;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">찾아보기</span>
|
||||
</div>
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #4F39E0;">전적 자세히 보기</span>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 1rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내</span>
|
||||
<span style="flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; color: #4F39E0; letter-spacing: -0.01em;">신규</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.02</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 42px;">
|
||||
<span style="width: 14px; font-size: 0.8125rem; font-weight: 700; color: #9BA1A9;">1</span>
|
||||
<span style="display: inline-flex; width: 26px; height: 26px; border-radius: 8px; background: #EDEFF2;"></span>
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 600;">무명연대장</span>
|
||||
<span style="display: flex; align-items: center; gap: 0.1875rem;"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 2rem; padding: 0 0 1.75rem; border-bottom: 1px solid #EDEFF2;">
|
||||
|
||||
<div style="flex-shrink: 0; width: 224px;">
|
||||
<div style="display: flex; align-items: flex-end; height: 132px; padding: 0.875rem; border-radius: 16px; background: #007A87;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">#007A87</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem;">
|
||||
<span style="flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; background: #00616B; border: 1px solid rgba(20, 22, 26, 0.08);"></span>
|
||||
<span style="font-size: 0.75rem; color: #5B6169;">면 누름 · 글자 hover</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.75rem; font-weight: 600; color: #14161A;">#00616B</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-shrink: 0; width: 372px;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem;">
|
||||
<span style="font-size: 0.75rem; font-weight: 700; color: #007A87;">C</span>
|
||||
<span style="font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">딥 틸</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">가장 차분한 안</span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 1.25rem; margin-top: 0.625rem; padding-bottom: 0.75rem; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.75rem; color: #7A828C;">oklch(53.0% 0.091 208)</span>
|
||||
<span style="font-size: 0.75rem; color: #7A828C;">면 위 글자 대비 <span style="font-weight: 700; color: #14161A;">5.08 : 1</span></span>
|
||||
</div>
|
||||
<p style="margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.65;">채도가 낮아 숫자가 빽빽한 화면에서 색이 먼저 튀지 않습니다. 오래 들여다보는 화면에 맞습니다.</p>
|
||||
<p style="margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.65; color: #7A828C;">걸리는 점 — 상승 초록(#12805C)과 계열이 가깝습니다. 브랜드 색과 상승 표시가 한 화면에 있으면 구분이 약해집니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0; padding: 1.125rem 1.25rem; border: 1px solid #E4E8ED; border-radius: 16px;">
|
||||
<div style="display: flex; align-items: center; gap: 1rem;">
|
||||
<svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#007A87" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 1.125rem; border-radius: 11px; background: #007A87;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">찾아보기</span>
|
||||
</div>
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #007A87;">전적 자세히 보기</span>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 1rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내</span>
|
||||
<span style="flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; color: #007A87; letter-spacing: -0.01em;">신규</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.02</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 42px;">
|
||||
<span style="width: 14px; font-size: 0.8125rem; font-weight: 700; color: #9BA1A9;">1</span>
|
||||
<span style="display: inline-flex; width: 26px; height: 26px; border-radius: 8px; background: #EDEFF2;"></span>
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 600;">무명연대장</span>
|
||||
<span style="display: flex; align-items: center; gap: 0.1875rem;"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 2rem; padding: 1.5rem 1.5rem 1.75rem; border: 2px solid #FF6A00; border-radius: 20px;">
|
||||
|
||||
<div style="flex-shrink: 0; width: 224px;">
|
||||
<div style="display: flex; align-items: flex-end; height: 132px; padding: 0.875rem; border-radius: 16px; background: #FF6A00;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">#FF6A00</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem;">
|
||||
<span style="flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; background: #D95A00; border: 1px solid rgba(20, 22, 26, 0.08);"></span>
|
||||
<span style="font-size: 0.75rem; color: #5B6169;">면 누름</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.75rem; font-weight: 600; color: #14161A;">#D95A00</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem;">
|
||||
<span style="flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; background: #C24A00; border: 1px solid rgba(20, 22, 26, 0.08);"></span>
|
||||
<span style="font-size: 0.75rem; color: #5B6169;">글자</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.75rem; font-weight: 600; color: #14161A;">#C24A00</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem;">
|
||||
<span style="flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; background: #A03C00; border: 1px solid rgba(20, 22, 26, 0.08);"></span>
|
||||
<span style="font-size: 0.75rem; color: #5B6169;">글자 hover</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.75rem; font-weight: 600; color: #14161A;">#A03C00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-shrink: 0; width: 372px;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem;">
|
||||
<span style="font-size: 0.75rem; font-weight: 700; color: #C24A00;">D</span>
|
||||
<span style="font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">탄피 오렌지</span>
|
||||
<span style="display: inline-flex; align-items: center; height: 20px; padding: 0 0.4375rem; border-radius: 5px; background: #FF6A00; font-size: 0.6875rem; font-weight: 700; color: #FFFFFF;">선택</span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 1.25rem; margin-top: 0.625rem; padding-bottom: 0.75rem; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.75rem; color: #7A828C;">oklch(70.1% 0.201 45)</span>
|
||||
<span style="font-size: 0.75rem; color: #7A828C;">면 위 글자 대비 <span style="font-weight: 700; color: #14161A;">2.87 : 1</span></span>
|
||||
</div>
|
||||
<p style="margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.65;">네 후보 중 유일한 따뜻한 색이고, 총기·탄피 쪽 연상이 자연스럽습니다. 전적 사이트 사이에서 확실히 구분됩니다.</p>
|
||||
<p style="margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.65; color: #7A828C;">걸리는 점 — 면 위 흰 글자는 2.87:1 로 권고치(4.5:1)에 못 미칩니다. 밝기를 살리는 쪽을 택한 결과이고, 흰 바탕 위 글자는 진한 변형(#C24A00, 4.91:1)을 따로 씁니다 — 면과 글자가 서로 다른 값입니다. 하락 빨강과 색상환에서 18° 떨어져 있는 점도 계속 지켜볼 부분입니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0; padding: 1.125rem 1.25rem; border: 1px solid #E4E8ED; border-radius: 16px;">
|
||||
<div style="display: flex; align-items: center; gap: 1rem;">
|
||||
<svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#C24A00" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 1.125rem; border-radius: 11px; background: #FF6A00;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">찾아보기</span>
|
||||
</div>
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #C24A00;">전적 자세히 보기</span>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 1rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내</span>
|
||||
<span style="flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; color: #C24A00; letter-spacing: -0.01em;">신규</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.02</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 42px;">
|
||||
<span style="width: 14px; font-size: 0.8125rem; font-weight: 700; color: #9BA1A9;">1</span>
|
||||
<span style="display: inline-flex; width: 26px; height: 26px; border-radius: 8px; background: #EDEFF2;"></span>
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 600;">무명연대장</span>
|
||||
<span style="display: flex; align-items: center; gap: 0.1875rem;"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,343 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 서린즈 기본 요소 — 글자 · 색 · 컴포넌트 · 치수 */
|
||||
|
||||
body { margin: 0; }
|
||||
.d-root, .d-root * { box-sizing: border-box; }
|
||||
.d-root {
|
||||
font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
a { color: #C24A00; text-decoration: none; }
|
||||
a:hover { color: #A03C00; }
|
||||
.d-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
|
||||
.d-tab { display: inline-flex; align-items: center; height: 32px; padding: 0 0.8125rem; border-radius: 999px; background: #F5F6F8; font-size: 0.8125rem; font-weight: 500; color: #5B6169; }
|
||||
.d-tab-on { background: #14161A; font-weight: 600; color: #FFFFFF; }
|
||||
.d-more { font-size: 0.8125rem; font-weight: 600; color: #5B6169; }
|
||||
.d-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.d-mv { display: flex; align-items: center; justify-content: flex-end; gap: 0.1875rem; }
|
||||
.d-new { flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; color: #C24A00; letter-spacing: -0.01em; }
|
||||
.d-arw { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; }
|
||||
/* 갈래 선택 — 하위 탭(알약)과 구분되도록 밑줄형 세그먼트로 둔다 */
|
||||
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid #E4E8ED; }
|
||||
.seg > span { display: flex; align-items: center; justify-content: center; height: 46px; font-size: 0.9375rem; font-weight: 500; color: #9BA1A9; box-shadow: inset 0 -2px 0 transparent; }
|
||||
.seg > .on { font-weight: 700; color: #14161A; box-shadow: inset 0 -2px 0 #14161A; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="d-root" style="width: 1440px; min-height: 1720px; padding: 48px; background: #FFFFFF; color: #14161A;">
|
||||
|
||||
<h1 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">기본 요소</h1>
|
||||
<p style="margin: 0.625rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: #5B6169; max-width: 66rem;">홈 화면을 그리면서 실제로 굳어진 값만 모았습니다. 여기 없는 크기·색은 새로 만든 것이니, 필요하면 여기에 먼저 추가하고 화면에 씁니다.</p>
|
||||
|
||||
<div style="display: flex; gap: 2.5rem; margin-top: 1.75rem;">
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.875rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">글자</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">Pretendard · 400 / 500 / 600 / 700 네 굵기만</span>
|
||||
</div>
|
||||
<div style="border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: grid; grid-template-columns: 150px 148px minmax(0, 1fr); align-items: baseline; gap: 1.25rem; padding: 0.75rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600;">히어로 제목</span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">2.125rem · 34px · 700</span>
|
||||
<span style="font-size: 2.125rem; font-weight: 700; letter-spacing: -0.045em; color: #14161A;">누구의 전적이 궁금하세요?</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 150px 148px minmax(0, 1fr); align-items: baseline; gap: 1.25rem; padding: 0.75rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600;">아트보드 제목</span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">1.75rem · 28px · 700</span>
|
||||
<span style="font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em; color: #14161A;">브랜드 컬러</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 150px 148px minmax(0, 1fr); align-items: baseline; gap: 1.25rem; padding: 0.75rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600;">섹션 제목</span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">1.125rem · 18px · 700</span>
|
||||
<span style="font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em; color: #14161A;">게임 랭킹</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 150px 148px minmax(0, 1fr); align-items: baseline; gap: 1.25rem; padding: 0.75rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600;">본문 · 목록 제목</span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">0.9375rem · 15px · 400</span>
|
||||
<span style="font-size: 0.9375rem; font-weight: 400; letter-spacing: -0.015em; color: #14161A;">9월 정기점검 안내</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 150px 148px minmax(0, 1fr); align-items: baseline; gap: 1.25rem; padding: 0.75rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600;">강조 본문</span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">0.9375rem · 15px · 600</span>
|
||||
<span style="font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; color: #14161A;">달빛조각사</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 150px 148px minmax(0, 1fr); align-items: baseline; gap: 1.25rem; padding: 0.75rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600;">보조 설명</span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">0.875rem · 14px · 400</span>
|
||||
<span style="font-size: 0.875rem; font-weight: 400; letter-spacing: -0.015em; color: #14161A;">닉네임만 알려주시면 정리해 드릴게요</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 150px 148px minmax(0, 1fr); align-items: baseline; gap: 1.25rem; padding: 0.75rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600;">날짜 · 부가 수치</span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">0.8125rem · 13px · 400</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 400; letter-spacing: -0.015em; color: #14161A;">09.02 · 1,204명</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 150px 148px minmax(0, 1fr); align-items: baseline; gap: 1.25rem; padding: 0.75rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600;">표 머리 · 라벨</span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">0.75rem · 12px · 500</span>
|
||||
<span style="font-size: 0.75rem; font-weight: 500; letter-spacing: -0.015em; color: #14161A;">순위 · 닉네임 · 등락</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 150px 148px minmax(0, 1fr); align-items: baseline; gap: 1.25rem; padding: 0.75rem 0;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600;">「신규」 표기</span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">0.6875rem · 11px · 700</span>
|
||||
<span style="font-size: 0.6875rem; font-weight: 700; letter-spacing: -0.01em; color: #C24A00;">신규</span>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0.875rem 0 0; font-size: 0.8125rem; line-height: 1.65; color: #7A828C;">숫자는 자리가 흔들리지 않도록 <span style="font-weight: 700; color: #14161A;">tabular-nums</span> 를 켭니다. 자간은 제목이 클수록 좁힙니다(-0.045em ~ -0.015em). 로고는 글꼴이 아니라 그린 도형입니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="flex-shrink: 0; width: 380px;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.875rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">치수</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">반복해서 쓰는 값</span>
|
||||
</div>
|
||||
<div style="border-top: 1px solid #E4E8ED;">
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; color: #5B6169;">라운드 — 알약(탭·버튼·칩)</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 700;">999px</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; color: #5B6169;">라운드 — 큰 카드 · 배너</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 700;">24 / 20 / 18px</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; color: #5B6169;">라운드 — 보통 카드 · 상태 블록</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 700;">16 / 14px</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; color: #5B6169;">라운드 — 작은 타일 · 썸네일</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 700;">12 / 10 / 8px</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; color: #5B6169;">표 행 높이 — 데스크톱</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 700;">46px</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; color: #5B6169;">표 행 높이 — 모바일</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 700;">52px</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; color: #5B6169;">표 머리 높이</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 700;">32 ~ 34px</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; color: #5B6169;">섹션 사이 — 데스크톱</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 700;">40px</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; color: #5B6169;">섹션 사이 — 모바일</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 700;">32px</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; color: #5B6169;">그리드 좌우 여백 — 1440 / 768 / 390</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 700;">40 / 24 / 20px</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; color: #5B6169;">누를 수 있는 것의 최소 크기(모바일)</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 700;">44px</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; color: #5B6169;">본문 최소 크기</span>
|
||||
<span style="font-size: 0.8125rem; font-weight: 700;">12px</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 2.5rem;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.875rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">색</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">이 밖의 색은 쓰지 않습니다</span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 1.25rem;">
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: #7A828C; margin-bottom: 0.5rem;">브랜드</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 0.375rem;">
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #FF6A00;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">면</span>
|
||||
<span style="font-size: 0.6875rem; color: #FFFFFF; opacity: 0.75;">#FF6A00</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #D95A00;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">면 누름</span>
|
||||
<span style="font-size: 0.6875rem; color: #FFFFFF; opacity: 0.75;">#D95A00</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #C24A00;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">글자</span>
|
||||
<span style="font-size: 0.6875rem; color: #FFFFFF; opacity: 0.75;">#C24A00</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #A03C00;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">글자 hover</span>
|
||||
<span style="font-size: 0.6875rem; color: #FFFFFF; opacity: 0.75;">#A03C00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: #7A828C; margin-bottom: 0.5rem;">글자</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 0.375rem;">
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #14161A;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">본문</span>
|
||||
<span style="font-size: 0.6875rem; color: #FFFFFF; opacity: 0.75;">#14161A</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #5B6169;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">보조</span>
|
||||
<span style="font-size: 0.6875rem; color: #FFFFFF; opacity: 0.75;">#5B6169</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #7A828C;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">흐린 보조</span>
|
||||
<span style="font-size: 0.6875rem; color: #FFFFFF; opacity: 0.75;">#7A828C</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #9BA1A9;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">가장 흐린</span>
|
||||
<span style="font-size: 0.6875rem; color: #FFFFFF; opacity: 0.75;">#9BA1A9</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #C9CDD3;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #14161A;">비활성</span>
|
||||
<span style="font-size: 0.6875rem; color: #14161A; opacity: 0.75;">#C9CDD3</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: #7A828C; margin-bottom: 0.5rem;">선</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 0.375rem;">
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #E4E8ED;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #14161A;">진한 선</span>
|
||||
<span style="font-size: 0.6875rem; color: #14161A; opacity: 0.75;">#E4E8ED</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #EDEFF2;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #14161A;">보통 선</span>
|
||||
<span style="font-size: 0.6875rem; color: #14161A; opacity: 0.75;">#EDEFF2</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #14161A;">옅은 행 구분</span>
|
||||
<span style="font-size: 0.6875rem; color: #14161A; opacity: 0.75;">#F3F5F7</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: #7A828C; margin-bottom: 0.5rem;">면</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 0.375rem;">
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #FFFFFF; border: 1px solid #E4E8ED;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #14161A;">기본</span>
|
||||
<span style="font-size: 0.6875rem; color: #14161A; opacity: 0.75;">#FFFFFF</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #FAFBFC;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #14161A;">한 겹 아래</span>
|
||||
<span style="font-size: 0.6875rem; color: #14161A; opacity: 0.75;">#FAFBFC</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #F5F6F8;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #14161A;">카드·탭</span>
|
||||
<span style="font-size: 0.6875rem; color: #14161A; opacity: 0.75;">#F5F6F8</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #F2F4F7;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #14161A;">버튼 바탕</span>
|
||||
<span style="font-size: 0.6875rem; color: #14161A; opacity: 0.75;">#F2F4F7</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #EDEFF2;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #14161A;">자리표시</span>
|
||||
<span style="font-size: 0.6875rem; color: #14161A; opacity: 0.75;">#EDEFF2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: #7A828C; margin-bottom: 0.5rem;">의미</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 0.375rem;">
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #12805C;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">상승</span>
|
||||
<span style="font-size: 0.6875rem; color: #FFFFFF; opacity: 0.75;">#12805C</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #C4453D;">
|
||||
<span style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">하락</span>
|
||||
<span style="font-size: 0.6875rem; color: #FFFFFF; opacity: 0.75;">#C4453D</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0.875rem 0 0; font-size: 0.8125rem; line-height: 1.65; color: #7A828C; max-width: 62rem;">브랜드 색은 <span style="font-weight: 700; color: #14161A;">면이냐 글자냐</span>에 따라 값이 갈립니다 — 면에는 #FF6A00 에 흰 글자, 흰 바탕 위 글자에는 #C24A00. 상승·하락은 의미가 정해진 색이라 다른 뜻으로 쓰지 않습니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 2.5rem;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.875rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">컴포넌트</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">화면마다 같은 모양으로 씁니다</span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 1.25rem;">
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0; padding: 1.25rem; border: 1px solid #E4E8ED; border-radius: 16px;">
|
||||
<div style="font-size: 0.8125rem; font-weight: 700; margin-bottom: 0.875rem;">탭 — 필터를 고를 때</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem;"><span class="d-tab d-tab-on">통합</span><span class="d-tab">시즌</span><span class="d-tab">클랜</span></div>
|
||||
<div style="margin-top: 1.25rem; font-size: 0.8125rem; font-weight: 700; margin-bottom: 0.875rem;">세그먼트 — 갈래를 고를 때</div>
|
||||
<div class="seg"><span class="on">계급</span><span>랭크전</span><span>클랜</span></div>
|
||||
<p style="margin: 0.875rem 0 0; font-size: 0.75rem; line-height: 1.6; color: #7A828C;">층위가 다르므로 모양도 다릅니다. 알약 탭을 두 줄로 쌓지 않습니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0; padding: 1.25rem; border: 1px solid #E4E8ED; border-radius: 16px;">
|
||||
<div style="font-size: 0.8125rem; font-weight: 700; margin-bottom: 0.875rem;">버튼</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap;">
|
||||
<button style="height: 44px; padding: 0 1.375rem; border: none; border-radius: 999px; background: #FF6A00; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.02em;">찾아보기</button>
|
||||
<button style="height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #F2F4F7; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em;">로그인</button>
|
||||
<button class="st-b" style="display: inline-flex; align-items: center; height: 36px; padding: 0 1rem; border: 1px solid #D6DAE0; border-radius: 999px; background: #FFFFFF; font-family: inherit; font-size: 0.8125rem; font-weight: 600; color: #14161A;">다시 시도</button>
|
||||
</div>
|
||||
<div style="margin-top: 1.25rem; font-size: 0.8125rem; font-weight: 700; margin-bottom: 0.75rem;">글자 링크</div>
|
||||
<div style="display: flex; align-items: center; gap: 1.25rem;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: #5B6169;">더 보기</span>
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #C24A00;">전적 자세히 보기</span>
|
||||
</div>
|
||||
<p style="margin: 0.875rem 0 0; font-size: 0.75rem; line-height: 1.6; color: #7A828C;">한 화면에 주 버튼(오렌지)은 하나입니다. 「더 보기」는 브랜드 색을 쓰지 않습니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0; padding: 1.25rem; border: 1px solid #E4E8ED; border-radius: 16px;">
|
||||
<div style="font-size: 0.8125rem; font-weight: 700; margin-bottom: 0.875rem;">표 한 줄</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 32px; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">#</span><span></span><span class="d-th">유저</span><span class="d-th" style="text-align: right;">등락</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span>
|
||||
<span style="display: inline-flex; width: 26px; height: 26px; border-radius: 8px; background: #F0F2F5;"></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">달빛조각사</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<span style="display: inline-flex; width: 26px; height: 26px; border-radius: 8px; background: #F0F2F5;"></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">칼든햄스터</span>
|
||||
<span class="d-mv"><span style="font-size: 0.75rem; color: #C9CDD3;">–</span></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; margin-top: 0.75rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내</span><span class="d-new">신규</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.02</span>
|
||||
</div>
|
||||
<p style="margin: 0.5rem 0 0; font-size: 0.75rem; line-height: 1.6; color: #7A828C;">등락은 ▲n / ▼n / – 셋뿐입니다. 「신규」는 배경 없는 글자입니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,335 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 안 A — 세로 스택형: 검색 히어로 아래로 섹션을 한 줄씩 쌓는다 */
|
||||
body { margin: 0; }
|
||||
.h-root, .h-root * { box-sizing: border-box; }
|
||||
.h-root {
|
||||
font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
a { color: #0866FF; text-decoration: none; }
|
||||
a:hover { color: #0450CC; }
|
||||
.h2 { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.035em; }
|
||||
.th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
|
||||
.tab { display: inline-flex; align-items: center; height: 32px; padding: 0 0.875rem; border-radius: 999px; background: #F5F6F8; font-size: 0.8125rem; font-weight: 500; color: #5B6169; }
|
||||
.tab-on { background: #14161A; font-weight: 600; color: #FFFFFF; }
|
||||
.more { font-size: 0.8125rem; font-weight: 600; color: #5B6169; }
|
||||
.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.arw { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; cursor: pointer; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="h-root" style="width: 1440px; min-height: 3000px; background: #FFFFFF; color: #14161A;">
|
||||
|
||||
<header style="display: flex; align-items: center; gap: 2rem; height: 76px; padding: 0 48px; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<div style="width: 32px; height: 32px; border-radius: 11px; background: #0866FF; display: flex; align-items: center; justify-content: center;">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg>
|
||||
</div>
|
||||
<span style="font-size: 1.25rem; font-weight: 700; letter-spacing: -0.035em;">서린즈</span>
|
||||
</div>
|
||||
<nav style="display: flex; align-items: center; gap: 1.625rem; margin-left: 1rem; font-size: 0.9375rem;">
|
||||
<span style="font-weight: 700;">홈</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">전적 검색</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">랭킹</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">커뮤니티</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">스트리밍</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">소식</span>
|
||||
</nav>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<button style="height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #F2F4F7; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">로그인</button>
|
||||
</header>
|
||||
|
||||
<!-- 검색 -->
|
||||
<section style="display: flex; flex-direction: column; align-items: center; padding: 48px 48px 44px;">
|
||||
<h1 style="margin: 0; font-size: 2.25rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.045em;">누구의 전적이 궁금하세요?</h1>
|
||||
<p style="margin: 0.75rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: #5B6169;">닉네임만 알려주시면 최근 경기부터 자주 쓰는 무기까지 정리해 드릴게요.</p>
|
||||
<div style="display: flex; align-items: center; gap: 0.875rem; width: 100%; max-width: 680px; height: 64px; margin-top: 1.625rem; padding: 0 0.5rem 0 1.375rem; background: #FFFFFF; border: 1px solid #E4E8ED; border-radius: 999px; box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04), 0 12px 32px rgba(20, 22, 26, 0.07);">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg>
|
||||
<span style="flex-grow: 1; font-size: 1rem; color: #9BA1A9;">닉네임을 입력해 보세요</span>
|
||||
<button style="height: 48px; padding: 0 1.625rem; border: none; border-radius: 999px; background: #0866FF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.02em; cursor: pointer;">찾아보기</button>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem;">
|
||||
<span style="font-size: 0.875rem; color: #9BA1A9; margin-right: 0.25rem;">최근에 찾아봤어요</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.5rem; height: 36px; padding: 0 0.875rem 0 0.375rem; border-radius: 999px; background: #F5F6F8; font-size: 0.875rem; font-weight: 600;"><span style="width: 24px; height: 24px; border-radius: 999px; background: #DDE4EE;"></span>달빛조각사</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.5rem; height: 36px; padding: 0 0.875rem 0 0.375rem; border-radius: 999px; background: #F5F6F8; font-size: 0.875rem; font-weight: 600;"><span style="width: 24px; height: 24px; border-radius: 999px; background: #E5E0F0;"></span>칼든햄스터</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.5rem; height: 36px; padding: 0 0.875rem 0 0.375rem; border-radius: 999px; background: #F5F6F8; font-size: 0.875rem; font-weight: 600;"><span style="width: 24px; height: 24px; border-radius: 999px; background: #E7E3D8;"></span>새벽두시</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 이벤트 슬라이드 -->
|
||||
<section style="padding: 0 48px 48px;">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 1rem;">
|
||||
<h2 class="h2">이벤트</h2>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span class="more">전체 보기</span>
|
||||
</div>
|
||||
|
||||
<!-- 배너는 제목이 이미지 안에 들어 있는 가로형(720:248). 이미지를 그대로 살리고 설명은 아래 한 줄로 뺀다. -->
|
||||
<div style="border: 1px solid #EDEFF2; border-radius: 24px; overflow: hidden;">
|
||||
<img src="20260903074208.jpg" alt="서든 페스티벌 같이 갈래?" style="display: block; width: 100%; aspect-ratio: 720 / 248; object-fit: cover;">
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.875rem; height: 60px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">시즌 이벤트</span>
|
||||
<span style="width: 1px; height: 12px; background: #E4E8ED;"></span>
|
||||
<span style="font-size: 1rem; font-weight: 600;">서든 페스티벌 같이 갈래?</span>
|
||||
<span style="font-size: 0.875rem; color: #9BA1A9;">9월 1일 ~ 9월 30일</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="width: 22px; height: 5px; border-radius: 999px; background: #14161A;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9; margin: 0 0.25rem 0 0.5rem;">1 / 5</span>
|
||||
<span class="arw"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 5l-7 7 7 7"></path></svg></span>
|
||||
<span class="arw"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 5l7 7-7 7"></path></svg></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 게임 랭킹 + 검색 랭킹 -->
|
||||
<section style="display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 2.5rem; padding: 0 48px 48px;">
|
||||
<div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="h2">게임 랭킹</h2>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-left: 1.25rem;">
|
||||
<span class="tab tab-on">전체</span>
|
||||
<span class="tab">폭파미션</span>
|
||||
<span class="tab">팀 데스매치</span>
|
||||
<span class="tab">클랜전</span>
|
||||
</div>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span class="more">전체 보기</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px 80px 88px 88px; align-items: center; gap: 0.75rem; height: 36px; margin-top: 1rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="th">순위</span><span class="th">유저</span>
|
||||
<span class="th" style="text-align: right;">승률</span>
|
||||
<span class="th" style="text-align: right;">K/D</span>
|
||||
<span class="th" style="text-align: right;">헤드샷</span>
|
||||
<span class="th" style="text-align: right;">판수</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px 80px 88px 88px; align-items: center; gap: 0.75rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700;">1</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; min-width: 0;"><span style="width: 34px; height: 34px; border-radius: 999px; background: #DDE4EE; flex-shrink: 0;"></span><span style="font-size: 0.9375rem; font-weight: 600;">달빛조각사</span><span style="font-size: 0.8125rem; color: #9BA1A9;">병장 3호봉</span></div>
|
||||
<span style="text-align: right; font-size: 0.9375rem; font-weight: 600;">78.4%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">2.14</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">41.2%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem; color: #5B6169;">1,284</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px 80px 88px 88px; align-items: center; gap: 0.75rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700;">2</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; min-width: 0;"><span style="width: 34px; height: 34px; border-radius: 999px; background: #E5E0F0; flex-shrink: 0;"></span><span style="font-size: 0.9375rem; font-weight: 600;">칼든햄스터</span><span style="font-size: 0.8125rem; color: #9BA1A9;">소위 1호봉</span></div>
|
||||
<span style="text-align: right; font-size: 0.9375rem; font-weight: 600;">74.9%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">1.96</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">38.7%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem; color: #5B6169;">2,041</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px 80px 88px 88px; align-items: center; gap: 0.75rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700;">3</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; min-width: 0;"><span style="width: 34px; height: 34px; border-radius: 999px; background: #E7E3D8; flex-shrink: 0;"></span><span style="font-size: 0.9375rem; font-weight: 600;">새벽두시</span><span style="font-size: 0.8125rem; color: #9BA1A9;">병장 1호봉</span></div>
|
||||
<span style="text-align: right; font-size: 0.9375rem; font-weight: 600;">71.2%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">1.88</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">44.1%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem; color: #5B6169;">986</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px 80px 88px 88px; align-items: center; gap: 0.75rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 600; color: #9BA1A9;">4</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; min-width: 0;"><span style="width: 34px; height: 34px; border-radius: 999px; background: #D8E6E2; flex-shrink: 0;"></span><span style="font-size: 0.9375rem; font-weight: 600;">무명연대장</span><span style="font-size: 0.8125rem; color: #9BA1A9;">중사 2호봉</span></div>
|
||||
<span style="text-align: right; font-size: 0.9375rem; font-weight: 600;">69.5%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">1.74</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">33.9%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem; color: #5B6169;">3,102</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px 80px 88px 88px; align-items: center; gap: 0.75rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 600; color: #9BA1A9;">5</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; min-width: 0;"><span style="width: 34px; height: 34px; border-radius: 999px; background: #EDDFE2; flex-shrink: 0;"></span><span style="font-size: 0.9375rem; font-weight: 600;">한밤의저격수</span><span style="font-size: 0.8125rem; color: #9BA1A9;">상사 1호봉</span></div>
|
||||
<span style="text-align: right; font-size: 0.9375rem; font-weight: 600;">68.1%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">1.71</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">47.3%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem; color: #5B6169;">742</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px 80px 88px 88px; align-items: center; gap: 0.75rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 600; color: #9BA1A9;">6</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; min-width: 0;"><span style="width: 34px; height: 34px; border-radius: 999px; background: #E4E8ED; flex-shrink: 0;"></span><span style="font-size: 0.9375rem; font-weight: 600;">조용한총잡이</span><span style="font-size: 0.8125rem; color: #9BA1A9;">병장 2호봉</span></div>
|
||||
<span style="text-align: right; font-size: 0.9375rem; font-weight: 600;">66.7%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">1.68</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">36.4%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem; color: #5B6169;">1,530</span>
|
||||
</div>
|
||||
|
||||
<button style="width: 100%; height: 48px; margin-top: 1rem; border: none; border-radius: 999px; background: #F5F6F8; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">랭킹 100위까지 보기</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="h2">검색 랭킹</h2>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">18:20 기준</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 36px; margin-top: 1rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="th">순위</span><span class="th">닉네임</span><span class="th" style="text-align: right;">변동</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 44px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span><span class="clip" style="font-size: 0.9375rem;">달빛조각사</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 44px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span><span class="clip" style="font-size: 0.9375rem;">칼든햄스터</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 44px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span><span class="clip" style="font-size: 0.9375rem;">새벽두시</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">4</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 44px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">4</span><span class="clip" style="font-size: 0.9375rem;">무명연대장</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end;"><span style="width: 10px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 44px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">5</span><span class="clip" style="font-size: 0.9375rem;">한밤의저격수</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">3</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 44px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">6</span><span class="clip" style="font-size: 0.9375rem;">조용한총잡이</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 44px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">7</span><span class="clip" style="font-size: 0.9375rem;">야간부대장</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end;"><span style="width: 10px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 44px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">8</span><span class="clip" style="font-size: 0.9375rem;">헤드샷장인</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">5</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 소식 2단 -->
|
||||
<section style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; padding: 0 48px 48px;">
|
||||
<div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="h2">서든어택 소식</h2><div style="flex-grow: 1;"></div><span class="more">더 보기</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.875rem;">
|
||||
<span class="tab tab-on">공지사항</span><span class="tab">업데이트</span>
|
||||
</div>
|
||||
<div style="margin-top: 0.75rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;"><span style="width: 7px; height: 7px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내 (09.04 02:00~08:00)</span><span style="font-size: 0.8125rem; color: #9BA1A9;">09.02</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;"><span style="width: 7px; height: 7px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">비매너 이용자 제재 결과 안내</span><span style="font-size: 0.8125rem; color: #9BA1A9;">09.01</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;"><span style="width: 7px; height: 7px; flex-shrink: 0;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">가을 시즌 랭크전 일정 공지</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.29</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;"><span style="width: 7px; height: 7px; flex-shrink: 0;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">신규 맵 컨테이너 야드 추가</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.28</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;"><span style="width: 7px; height: 7px; flex-shrink: 0;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">AK-47 반동 수치 조정 안내</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.26</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="h2">서린즈 소식</h2><div style="flex-grow: 1;"></div><span class="more">더 보기</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.875rem;">
|
||||
<span class="tab tab-on">공지사항</span><span class="tab">업데이트</span>
|
||||
</div>
|
||||
<div style="margin-top: 0.75rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;"><span style="width: 7px; height: 7px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">맵별 승률 통계를 새로 열었어요</span><span style="font-size: 0.8125rem; color: #9BA1A9;">09.03</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;"><span style="width: 7px; height: 7px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">전적 갱신 속도가 두 배 빨라졌어요</span><span style="font-size: 0.8125rem; color: #9BA1A9;">09.01</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;"><span style="width: 7px; height: 7px; flex-shrink: 0;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">즐겨찾기한 유저 알림 기능 추가</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.30</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;"><span style="width: 7px; height: 7px; flex-shrink: 0;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">8월 서버 점검 결과 보고</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.27</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;"><span style="width: 7px; height: 7px; flex-shrink: 0;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">커뮤니티 이용 규칙을 정리했어요</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.24</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 스트리밍 -->
|
||||
<section style="padding: 0 48px 48px;">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="h2">지금 방송 중</h2>
|
||||
<span style="margin-left: 0.875rem; font-size: 0.875rem; color: #9BA1A9;">시청자 2,924명</span>
|
||||
<div style="flex-grow: 1;"></div><span class="more">전체 보기</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.125rem;">
|
||||
<div>
|
||||
<div style="aspect-ratio: 16 / 9; border-radius: 16px; background: #E4E8ED;"></div>
|
||||
<div class="clip" style="font-size: 0.9375rem; font-weight: 600; margin-top: 0.75rem;">삼보급 스나 연습</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem; margin-top: 0.3125rem;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #E8443A;"></span><span style="font-size: 0.75rem; font-weight: 600; color: #E8443A;">LIVE</span><span style="font-size: 0.8125rem; color: #9BA1A9;">달빛조각사 · 1,204명</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="aspect-ratio: 16 / 9; border-radius: 16px; background: #EAE6E0;"></div>
|
||||
<div class="clip" style="font-size: 0.9375rem; font-weight: 600; margin-top: 0.75rem;">클랜전 정기 리그 중계</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem; margin-top: 0.3125rem;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #E8443A;"></span><span style="font-size: 0.75rem; font-weight: 600; color: #E8443A;">LIVE</span><span style="font-size: 0.8125rem; color: #9BA1A9;">무명연대 · 862명</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="aspect-ratio: 16 / 9; border-radius: 16px; background: #E2E9E6;"></div>
|
||||
<div class="clip" style="font-size: 0.9375rem; font-weight: 600; margin-top: 0.75rem;">초보 탈출 폭파미션 강의</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem; margin-top: 0.3125rem;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #E8443A;"></span><span style="font-size: 0.75rem; font-weight: 600; color: #E8443A;">LIVE</span><span style="font-size: 0.8125rem; color: #9BA1A9;">새벽두시 · 517명</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="aspect-ratio: 16 / 9; border-radius: 16px; background: #E8E4EC;"></div>
|
||||
<div class="clip" style="font-size: 0.9375rem; font-weight: 600; margin-top: 0.75rem;">시청자 참여 한 판</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem; margin-top: 0.3125rem;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #E8443A;"></span><span style="font-size: 0.75rem; font-weight: 600; color: #E8443A;">LIVE</span><span style="font-size: 0.8125rem; color: #9BA1A9;">한밤의저격수 · 341명</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 커뮤니티 -->
|
||||
<section style="padding: 0 48px 48px;">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="h2">커뮤니티</h2>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-left: 1.25rem;">
|
||||
<span class="tab tab-on">인기</span><span class="tab">최신</span><span class="tab">클립</span><span class="tab">공략</span><span class="tab">클랜원 모집</span>
|
||||
</div>
|
||||
<div style="flex-grow: 1;"></div><span class="more">전체 보기</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.125rem;">
|
||||
<div style="position: relative; aspect-ratio: 1 / 1; border-radius: 18px; background: #E4E8ED; overflow: hidden;">
|
||||
<div style="position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.5rem; height: 46px; padding: 0 0.875rem; background: rgba(20, 22, 26, 0.5);"><span style="width: 22px; height: 22px; border-radius: 999px; background: #C9D2DD;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; font-weight: 600; color: #FFFFFF;">달빛조각사</span><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.4-7-9.3A4.2 4.2 0 0112 8a4.2 4.2 0 017 2.7c0 4.9-7 9.3-7 9.3z"></path></svg><span style="font-size: 0.8125rem; font-weight: 600; color: #FFFFFF;">312</span></div>
|
||||
</div>
|
||||
<div style="position: relative; aspect-ratio: 1 / 1; border-radius: 18px; background: #EAE6E0; overflow: hidden;">
|
||||
<div style="position: absolute; top: 12px; right: 12px;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="3" width="13" height="13" rx="3"></rect><path d="M16 19.5A2.5 2.5 0 0113.5 22H6a3 3 0 01-3-3V9.5"></path></svg></div>
|
||||
<div style="position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.5rem; height: 46px; padding: 0 0.875rem; background: rgba(20, 22, 26, 0.5);"><span style="width: 22px; height: 22px; border-radius: 999px; background: #D8D2C8;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; font-weight: 600; color: #FFFFFF;">칼든햄스터</span><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.4-7-9.3A4.2 4.2 0 0112 8a4.2 4.2 0 017 2.7c0 4.9-7 9.3-7 9.3z"></path></svg><span style="font-size: 0.8125rem; font-weight: 600; color: #FFFFFF;">274</span></div>
|
||||
</div>
|
||||
<!-- 사진 없는 글 — 본문이 곧 썸네일이 된다 -->
|
||||
<div style="display: flex; flex-direction: column; aspect-ratio: 1 / 1; padding: 22px; border-radius: 18px; background: #F5F6F8;">
|
||||
<p style="margin: 0; font-size: 1.0625rem; line-height: 1.6; font-weight: 500;">폭파 삼보급에서 A 롱각 잡을 때 다들 어디 서세요? 요즘 자꾸 먼저 죽습니다.</p>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<span style="width: 22px; height: 22px; border-radius: 999px; background: #DDE4EE;"></span>
|
||||
<span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; font-weight: 600;">새벽두시</span>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#5B6169" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.4-7-9.3A4.2 4.2 0 0112 8a4.2 4.2 0 017 2.7c0 4.9-7 9.3-7 9.3z"></path></svg>
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: #5B6169;">198</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 클립(영상) 글 -->
|
||||
<div style="position: relative; aspect-ratio: 1 / 1; border-radius: 18px; background: #E8E4EC; overflow: hidden;">
|
||||
<div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 999px; background: rgba(20, 22, 26, 0.55);">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M8 5.5l11 6.5-11 6.5z"></path></svg>
|
||||
</div>
|
||||
<div style="position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.5rem; height: 46px; padding: 0 0.875rem; background: rgba(20, 22, 26, 0.5);"><span style="width: 22px; height: 22px; border-radius: 999px; background: #D5CEDC;"></span><span class="clip" style="flex-grow: 1; min-width: 0; font-size: 0.8125rem; font-weight: 600; color: #FFFFFF;">무명연대장</span><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.4-7-9.3A4.2 4.2 0 0112 8a4.2 4.2 0 017 2.7c0 4.9-7 9.3-7 9.3z"></path></svg><span style="font-size: 0.8125rem; font-weight: 600; color: #FFFFFF;">163</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button style="width: 100%; height: 48px; margin-top: 1.25rem; border: none; border-radius: 999px; background: #F5F6F8; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">게시글 더 보기</button>
|
||||
</section>
|
||||
|
||||
<footer style="display: flex; align-items: center; gap: 1.5rem; padding: 32px 48px 48px; border-top: 1px solid #EDEFF2; font-size: 0.875rem; color: #9BA1A9;">
|
||||
<span style="font-weight: 600; color: #5B6169;">서린즈</span><span>이용약관</span><span>개인정보 처리방침</span><span>문의하기</span>
|
||||
<div style="flex-grow: 1;"></div><span>넥슨 공개 API 기반 · 서든어택 비공식 서비스</span>
|
||||
</footer>
|
||||
</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,547 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 홈 B — 포털 3단: 좌 랭킹 / 중앙 검색·소식·커뮤니티 / 우 스트리밍·이벤트 */
|
||||
body { margin: 0; }
|
||||
.p-root, .p-root * { box-sizing: border-box; }
|
||||
.p-root {
|
||||
font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
a { color: #0866FF; text-decoration: none; }
|
||||
a:hover { color: #0450CC; }
|
||||
.p-h2 { margin: 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em; }
|
||||
.p-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
|
||||
.p-tab { display: inline-flex; align-items: center; height: 30px; padding: 0 0.8125rem; border-radius: 999px; background: #F5F6F8; font-size: 0.8125rem; font-weight: 500; color: #5B6169; }
|
||||
.p-tab-on { background: #14161A; font-weight: 600; color: #FFFFFF; }
|
||||
.p-more { font-size: 0.8125rem; font-weight: 600; color: #5B6169; }
|
||||
/* 한 줄 제목 자르기 */
|
||||
.p-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.p-arw { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; cursor: pointer; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="p-root" style="width: 1440px; min-height: 2360px; background: #FFFFFF; color: #14161A;">
|
||||
|
||||
<!-- 상단 내비게이션 (검색 통합) -->
|
||||
<header style="display: flex; align-items: center; gap: 1.75rem; height: 72px; padding: 0 40px; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<div style="width: 32px; height: 32px; border-radius: 11px; background: #0866FF; display: flex; align-items: center; justify-content: center;">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round">
|
||||
<circle cx="11" cy="11" r="6.5"></circle>
|
||||
<path d="M19.5 19.5L16 16"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span style="font-size: 1.25rem; font-weight: 700; letter-spacing: -0.035em;">서린즈</span>
|
||||
</div>
|
||||
|
||||
<nav style="display: flex; align-items: center; gap: 1.5rem; font-size: 0.9375rem;">
|
||||
<span style="font-weight: 700;">홈</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">랭킹</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">커뮤니티</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">스트리밍</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">소식</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">이벤트</span>
|
||||
</nav>
|
||||
|
||||
<div style="flex-grow: 1; display: flex; justify-content: center;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; width: 100%; max-width: 340px; height: 44px; padding: 0 1.125rem; background: #F5F6F8; border-radius: 999px;">
|
||||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="2.2" stroke-linecap="round">
|
||||
<circle cx="11" cy="11" r="6.5"></circle>
|
||||
<path d="M19.5 19.5L16 16"></path>
|
||||
</svg>
|
||||
<span style="font-size: 0.875rem; color: #9BA1A9;">닉네임 검색</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button style="height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #F2F4F7; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">로그인</button>
|
||||
</header>
|
||||
|
||||
<!-- 3단 본문 -->
|
||||
<div style="display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; gap: 2rem; padding: 32px 40px 56px;">
|
||||
|
||||
<!-- 좌: 게임 랭킹 + 검색 랭킹 -->
|
||||
<aside>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="p-h2">게임 랭킹</h2>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span class="p-more">전체 보기</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.875rem;">
|
||||
<span class="p-tab p-tab-on">승률</span>
|
||||
<span class="p-tab">K/D</span>
|
||||
<span class="p-tab">헤드샷</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 56px 44px; align-items: center; gap: 0.625rem; height: 34px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="p-th">#</span>
|
||||
<span class="p-th">유저</span>
|
||||
<span class="p-th" style="text-align: right;">승률</span>
|
||||
<span class="p-th" style="text-align: right;">K/D</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 56px 44px; align-items: center; gap: 0.625rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;">
|
||||
<span style="width: 32px; height: 32px; border-radius: 999px; background: #DDE4EE; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem; font-weight: 600;">달빛조각사</span>
|
||||
</div>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">78.4%</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; color: #5B6169;">2.14</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 56px 44px; align-items: center; gap: 0.625rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;">
|
||||
<span style="width: 32px; height: 32px; border-radius: 999px; background: #E5E0F0; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem; font-weight: 600;">칼든햄스터</span>
|
||||
</div>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">74.9%</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; color: #5B6169;">1.96</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 56px 44px; align-items: center; gap: 0.625rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;">
|
||||
<span style="width: 32px; height: 32px; border-radius: 999px; background: #E7E3D8; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem; font-weight: 600;">새벽두시</span>
|
||||
</div>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">71.2%</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; color: #5B6169;">1.88</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 56px 44px; align-items: center; gap: 0.625rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">4</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;">
|
||||
<span style="width: 32px; height: 32px; border-radius: 999px; background: #D8E6E2; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem; font-weight: 600;">무명연대장</span>
|
||||
</div>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">69.5%</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; color: #5B6169;">1.74</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 56px 44px; align-items: center; gap: 0.625rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">5</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;">
|
||||
<span style="width: 32px; height: 32px; border-radius: 999px; background: #EDDFE2; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem; font-weight: 600;">한밤의저격수</span>
|
||||
</div>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">68.1%</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; color: #5B6169;">1.71</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 56px 44px; align-items: center; gap: 0.625rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">6</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;">
|
||||
<span style="width: 32px; height: 32px; border-radius: 999px; background: #E4E8ED; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem; font-weight: 600;">조용한총잡이</span>
|
||||
</div>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">66.7%</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; color: #5B6169;">1.68</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 56px 44px; align-items: center; gap: 0.625rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">7</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;">
|
||||
<span style="width: 32px; height: 32px; border-radius: 999px; background: #EAE6E0; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem; font-weight: 600;">야간부대장</span>
|
||||
</div>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">65.2%</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; color: #5B6169;">1.63</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 56px 44px; align-items: center; gap: 0.625rem; height: 56px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">8</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;">
|
||||
<span style="width: 32px; height: 32px; border-radius: 999px; background: #E2E9E6; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem; font-weight: 600;">헤드샷장인</span>
|
||||
</div>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">64.8%</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; color: #5B6169;">1.59</span>
|
||||
</div>
|
||||
|
||||
<button style="width: 100%; height: 44px; margin-top: 1rem; border: none; border-radius: 999px; background: #F5F6F8; font-family: inherit; font-size: 0.875rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">랭킹 100위까지 보기</button>
|
||||
|
||||
<div style="height: 1px; background: #EDEFF2; margin: 2rem 0;"></div>
|
||||
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="p-h2">검색 랭킹</h2>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">18:20 기준</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 34px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="p-th">#</span>
|
||||
<span class="p-th">닉네임</span>
|
||||
<span class="p-th" style="text-align: right;">변동</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem;">달빛조각사</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;">
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg>
|
||||
<span style="font-size: 0.8125rem; color: #12805C;">2</span>
|
||||
</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem;">칼든햄스터</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;">
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg>
|
||||
<span style="font-size: 0.8125rem; color: #C4453D;">1</span>
|
||||
</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem;">새벽두시</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;">
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg>
|
||||
<span style="font-size: 0.8125rem; color: #12805C;">4</span>
|
||||
</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">4</span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem;">무명연대장</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end;"><span style="width: 10px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">5</span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem;">한밤의저격수</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;">
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg>
|
||||
<span style="font-size: 0.8125rem; color: #12805C;">3</span>
|
||||
</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">6</span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem;">조용한총잡이</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;">
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg>
|
||||
<span style="font-size: 0.8125rem; color: #C4453D;">2</span>
|
||||
</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">7</span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem;">야간부대장</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end;"><span style="width: 10px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">8</span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem;">헤드샷장인</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;">
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg>
|
||||
<span style="font-size: 0.8125rem; color: #12805C;">5</span>
|
||||
</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">9</span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem;">삼보급단골</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end;"><span style="width: 10px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">10</span>
|
||||
<span class="p-clip" style="font-size: 0.9375rem;">웨어하우스지박령</span>
|
||||
<span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;">
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg>
|
||||
<span style="font-size: 0.8125rem; color: #12805C;">1</span>
|
||||
</span>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 중앙: 검색 + 소식 + 커뮤니티 피드 -->
|
||||
<main>
|
||||
<div style="display: flex; align-items: center; gap: 0.875rem; height: 64px; padding: 0 0.5rem 0 1.25rem; background: #FFFFFF; border: 1px solid #E4E8ED; border-radius: 999px; box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04), 0 10px 28px rgba(20, 22, 26, 0.06);">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="2.2" stroke-linecap="round">
|
||||
<circle cx="11" cy="11" r="6.5"></circle>
|
||||
<path d="M19.5 19.5L16 16"></path>
|
||||
</svg>
|
||||
<span style="flex-grow: 1; font-size: 1rem; color: #9BA1A9;">궁금한 닉네임을 입력해 보세요</span>
|
||||
<button style="height: 48px; padding: 0 1.5rem; border: none; border-radius: 999px; background: #0866FF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.02em; cursor: pointer;">찾아보기</button>
|
||||
</div>
|
||||
|
||||
<!-- 소식 2단 -->
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.75rem;">
|
||||
|
||||
<div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="p-h2">서든어택 소식</h2>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span class="p-more">더 보기</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.875rem;">
|
||||
<span class="p-tab p-tab-on">공지사항</span>
|
||||
<span class="p-tab">업데이트</span>
|
||||
</div>
|
||||
<div style="margin-top: 0.75rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="width: 6px; height: 6px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.02</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="width: 6px; height: 6px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">비매너 이용자 제재 결과</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.01</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="width: 6px; height: 6px; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">가을 시즌 랭크전 일정</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.29</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="width: 6px; height: 6px; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">신규 맵 컨테이너 야드 추가</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.28</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="width: 6px; height: 6px; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">AK-47 반동 수치 조정</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.26</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="p-h2">서린즈 소식</h2>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span class="p-more">더 보기</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.875rem;">
|
||||
<span class="p-tab p-tab-on">공지사항</span>
|
||||
<span class="p-tab">업데이트</span>
|
||||
</div>
|
||||
<div style="margin-top: 0.75rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="width: 6px; height: 6px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">맵별 승률 통계를 열었어요</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.03</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="width: 6px; height: 6px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">전적 갱신이 두 배 빨라졌어요</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.01</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="width: 6px; height: 6px; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">즐겨찾기 알림 기능 추가</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.30</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="width: 6px; height: 6px; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">8월 서버 점검 결과 보고</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.27</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="width: 6px; height: 6px; flex-shrink: 0;"></span>
|
||||
<span class="p-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">커뮤니티 이용 규칙 정리</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.24</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 커뮤니티 -->
|
||||
<div style="display: flex; align-items: center; margin-top: 2.25rem;">
|
||||
<h2 class="p-h2">커뮤니티</h2>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-left: 1.125rem;">
|
||||
<span class="p-tab p-tab-on">인기</span>
|
||||
<span class="p-tab">최신</span>
|
||||
<span class="p-tab">클립</span>
|
||||
<span class="p-tab">공략</span>
|
||||
</div>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<button style="height: 34px; padding: 0 1rem; border: none; border-radius: 999px; background: #F5F6F8; font-family: inherit; font-size: 0.8125rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">글쓰기</button>
|
||||
</div>
|
||||
|
||||
<article style="padding: 1.5rem 0 1.75rem; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<span style="width: 44px; height: 44px; border-radius: 999px; background: #DDE4EE;"></span>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="font-size: 0.9375rem; font-weight: 600;">달빛조각사</div>
|
||||
<div style="font-size: 0.8125rem; color: #9BA1A9; margin-top: 0.0625rem;">병장 3호봉 · 12분 전</div>
|
||||
</div>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="#9BA1A9"><circle cx="5" cy="12" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="19" cy="12" r="1.6"></circle></svg>
|
||||
</div>
|
||||
|
||||
<div style="aspect-ratio: 16 / 9; margin-top: 1rem; border-radius: 18px; background: #E4E8ED;"></div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 1rem; margin-top: 0.875rem;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20.5S3.5 15.2 3.5 9.6A4.8 4.8 0 0112 6.6a4.8 4.8 0 018.5 3c0 5.6-8.5 10.9-8.5 10.9z"></path></svg>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.4 8.4 0 01-9 8.4 9.3 9.3 0 01-3.4-.6L3 21l1.8-5A8.1 8.1 0 013.5 11.5a8.4 8.4 0 019-8.4 8.4 8.4 0 018.5 8.4z"></path></svg>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21.5 3.5L11 14"></path><path d="M21.5 3.5l-6.7 18-3.8-7.5L3.5 10.2z"></path></svg>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3.5h12v17l-6-4.3-6 4.3z"></path></svg>
|
||||
</div>
|
||||
|
||||
<div style="font-size: 0.9375rem; font-weight: 600; margin-top: 0.75rem;">좋아요 312개</div>
|
||||
<p style="margin: 0.5rem 0 0; font-size: 0.9375rem; line-height: 1.65;">
|
||||
<span style="font-weight: 600;">달빛조각사</span>
|
||||
제3보급창고 마지막 라운드 1대4 역전했어요. 각도만 잘 잡으면 아직 됩니다.
|
||||
</p>
|
||||
<div style="font-size: 0.875rem; color: #9BA1A9; margin-top: 0.5rem;">댓글 24개 모두 보기</div>
|
||||
</article>
|
||||
|
||||
<!-- 사진 없는 글 — 이미지 영역 없이 본문이 바로 온다 -->
|
||||
<article style="padding: 1.5rem 0 1.75rem; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<span style="width: 44px; height: 44px; border-radius: 999px; background: #E5E0F0;"></span>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="font-size: 0.9375rem; font-weight: 600;">칼든햄스터</div>
|
||||
<div style="font-size: 0.8125rem; color: #9BA1A9; margin-top: 0.0625rem;">소위 1호봉 · 48분 전</div>
|
||||
</div>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="#9BA1A9"><circle cx="5" cy="12" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="19" cy="12" r="1.6"></circle></svg>
|
||||
</div>
|
||||
|
||||
<p style="margin: 1rem 0 0; font-size: 1.0625rem; line-height: 1.75;">웨어하우스 스나 자리 세 군데만 외우면 됩니다. 컨테이너 위, 이층 창문, 그리고 리스폰 바로 옆 기둥. 나머지는 다 걸립니다.</p>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 1rem; margin-top: 1.125rem;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20.5S3.5 15.2 3.5 9.6A4.8 4.8 0 0112 6.6a4.8 4.8 0 018.5 3c0 5.6-8.5 10.9-8.5 10.9z"></path></svg>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.4 8.4 0 01-9 8.4 9.3 9.3 0 01-3.4-.6L3 21l1.8-5A8.1 8.1 0 013.5 11.5a8.4 8.4 0 019-8.4 8.4 8.4 0 018.5 8.4z"></path></svg>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21.5 3.5L11 14"></path><path d="M21.5 3.5l-6.7 18-3.8-7.5L3.5 10.2z"></path></svg>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3.5h12v17l-6-4.3-6 4.3z"></path></svg>
|
||||
</div>
|
||||
|
||||
<div style="font-size: 0.9375rem; font-weight: 600; margin-top: 0.75rem;">좋아요 274개</div>
|
||||
<div style="font-size: 0.875rem; color: #9BA1A9; margin-top: 0.375rem;">댓글 18개 모두 보기</div>
|
||||
</article>
|
||||
|
||||
<!-- 클립(영상) 글 -->
|
||||
<article style="padding: 1.5rem 0 1.75rem; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<span style="width: 44px; height: 44px; border-radius: 999px; background: #E7E3D8;"></span>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="font-size: 0.9375rem; font-weight: 600;">새벽두시</div>
|
||||
<div style="font-size: 0.8125rem; color: #9BA1A9; margin-top: 0.0625rem;">병장 1호봉 · 2시간 전</div>
|
||||
</div>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="#9BA1A9"><circle cx="5" cy="12" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="19" cy="12" r="1.6"></circle></svg>
|
||||
</div>
|
||||
|
||||
<div style="position: relative; aspect-ratio: 16 / 9; margin-top: 1rem; border-radius: 18px; background: #EAE6E0; overflow: hidden;">
|
||||
<div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 999px; background: rgba(20, 22, 26, 0.55);">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M8 5.5l11 6.5-11 6.5z"></path></svg>
|
||||
</div>
|
||||
<div style="position: absolute; right: 12px; bottom: 12px; padding: 0.25rem 0.5rem; border-radius: 8px; background: rgba(20, 22, 26, 0.6); font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">0:24</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 1rem; margin-top: 0.875rem;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20.5S3.5 15.2 3.5 9.6A4.8 4.8 0 0112 6.6a4.8 4.8 0 018.5 3c0 5.6-8.5 10.9-8.5 10.9z"></path></svg>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.4 8.4 0 01-9 8.4 9.3 9.3 0 01-3.4-.6L3 21l1.8-5A8.1 8.1 0 013.5 11.5a8.4 8.4 0 019-8.4 8.4 8.4 0 018.5 8.4z"></path></svg>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21.5 3.5L11 14"></path><path d="M21.5 3.5l-6.7 18-3.8-7.5L3.5 10.2z"></path></svg>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3.5h12v17l-6-4.3-6 4.3z"></path></svg>
|
||||
</div>
|
||||
|
||||
<div style="font-size: 0.9375rem; font-weight: 600; margin-top: 0.75rem;">좋아요 198개</div>
|
||||
<p style="margin: 0.5rem 0 0; font-size: 0.9375rem; line-height: 1.65;">
|
||||
<span style="font-weight: 600;">새벽두시</span>
|
||||
크로스카운터 1대3 클러치. 소리만 듣고 돌았습니다.
|
||||
</p>
|
||||
<div style="font-size: 0.875rem; color: #9BA1A9; margin-top: 0.5rem;">댓글 31개 모두 보기</div>
|
||||
</article>
|
||||
|
||||
<button style="width: 100%; height: 48px; margin-top: 1.5rem; border: none; border-radius: 999px; background: #F5F6F8; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">게시글 더 보기</button>
|
||||
</main>
|
||||
|
||||
<!-- 우: 스트리밍 + 이벤트 -->
|
||||
<aside>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="p-h2">지금 방송 중</h2>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span class="p-more">전체 보기</span>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 1.125rem;">
|
||||
<div style="aspect-ratio: 16 / 9; border-radius: 16px; background: #E4E8ED;"></div>
|
||||
<div style="font-size: 0.9375rem; font-weight: 600; margin-top: 0.75rem;">삼보급 스나 연습</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem; margin-top: 0.3125rem;">
|
||||
<span style="width: 6px; height: 6px; border-radius: 999px; background: #E8443A;"></span>
|
||||
<span style="font-size: 0.75rem; font-weight: 600; color: #E8443A;">LIVE</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">달빛조각사 · 1,204명</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<div style="width: 88px; height: 52px; border-radius: 12px; background: #EAE6E0; flex-shrink: 0;"></div>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div class="p-clip" style="font-size: 0.875rem; font-weight: 600;">클랜전 리그 중계</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem;">
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #E8443A;"></span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">무명연대 · 862명</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<div style="width: 88px; height: 52px; border-radius: 12px; background: #E2E9E6; flex-shrink: 0;"></div>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div class="p-clip" style="font-size: 0.875rem; font-weight: 600;">초보 탈출 폭파 강의</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem;">
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #E8443A;"></span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">새벽두시 · 517명</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<div style="width: 88px; height: 52px; border-radius: 12px; background: #E8E4EC; flex-shrink: 0;"></div>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div class="p-clip" style="font-size: 0.875rem; font-weight: 600;">시청자 참여 한 판</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem;">
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #E8443A;"></span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">한밤의저격수 · 341명</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height: 1px; background: #EDEFF2; margin: 2rem 0;"></div>
|
||||
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="p-h2">이벤트</h2>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span class="p-more">전체 보기</span>
|
||||
</div>
|
||||
|
||||
<!-- 이벤트 슬라이드 — 가로형 배너(720:248)를 그대로 쓰고 설명은 아래에 -->
|
||||
<div style="margin-top: 1.125rem;">
|
||||
<div style="border: 1px solid #EDEFF2; border-radius: 14px; overflow: hidden;">
|
||||
<img src="20260903074208.jpg" alt="서든 페스티벌 같이 갈래?" style="display: block; width: 100%; aspect-ratio: 720 / 248; object-fit: cover;">
|
||||
</div>
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: #9BA1A9; margin-top: 0.875rem;">시즌 이벤트</div>
|
||||
<div class="p-clip" style="font-size: 1rem; font-weight: 700; letter-spacing: -0.03em; margin-top: 0.25rem;">서든 페스티벌 같이 갈래?</div>
|
||||
<div style="font-size: 0.8125rem; color: #9BA1A9; margin-top: 0.375rem;">9월 1일 ~ 9월 30일</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem; margin-top: 0.875rem;">
|
||||
<span style="width: 20px; height: 4px; border-radius: 999px; background: #14161A;"></span>
|
||||
<span style="width: 4px; height: 4px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 4px; height: 4px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 4px; height: 4px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 4px; height: 4px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9; margin-right: 0.125rem;">1 / 5</span>
|
||||
<span class="p-arw"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 5l-7 7 7 7"></path></svg></span>
|
||||
<span class="p-arw"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 5l7 7-7 7"></path></svg></span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<!-- 푸터 -->
|
||||
<footer style="display: flex; align-items: center; gap: 1.5rem; padding: 32px 40px 48px; border-top: 1px solid #EDEFF2; font-size: 0.875rem; color: #9BA1A9;">
|
||||
<span style="font-weight: 600; color: #5B6169;">서린즈</span>
|
||||
<span>이용약관</span>
|
||||
<span>개인정보 처리방침</span>
|
||||
<span>문의하기</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span>넥슨 공개 API 기반 · 서든어택 비공식 서비스</span>
|
||||
</footer>
|
||||
</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,305 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 안 C — 앱 사이드바형: 좌측 고정 내비 + 본문 2단 */
|
||||
body { margin: 0; }
|
||||
.c-root, .c-root * { box-sizing: border-box; }
|
||||
.c-root {
|
||||
font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
a { color: #0866FF; text-decoration: none; }
|
||||
a:hover { color: #0450CC; }
|
||||
.c-h2 { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em; }
|
||||
.c-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
|
||||
.c-tab { display: inline-flex; align-items: center; height: 30px; padding: 0 0.8125rem; border-radius: 999px; background: #F5F6F8; font-size: 0.8125rem; font-weight: 500; color: #5B6169; }
|
||||
.c-tab-on { background: #14161A; font-weight: 600; color: #FFFFFF; }
|
||||
.c-more { font-size: 0.8125rem; font-weight: 600; color: #5B6169; }
|
||||
.c-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.c-arw { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; cursor: pointer; }
|
||||
.c-nav { display: flex; align-items: center; gap: 0.875rem; height: 46px; padding: 0 0.875rem; border-radius: 14px; font-size: 0.9375rem; font-weight: 500; color: #14161A; }
|
||||
.c-nav-on { background: #EFF1F4; font-weight: 700; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="c-root" style="display: flex; width: 1440px; min-height: 2120px; background: #FFFFFF; color: #14161A;">
|
||||
|
||||
<!-- 좌측 고정 내비 -->
|
||||
<aside style="display: flex; flex-direction: column; width: 240px; flex-shrink: 0; padding: 22px 14px 28px; background: #FAFBFC; border-right: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; padding: 0 0.75rem; margin-bottom: 1.5rem;">
|
||||
<div style="width: 30px; height: 30px; border-radius: 10px; background: #0866FF; display: flex; align-items: center; justify-content: center;">
|
||||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg>
|
||||
</div>
|
||||
<span style="font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.035em;">서린즈</span>
|
||||
</div>
|
||||
|
||||
<div class="c-nav c-nav-on">
|
||||
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11.5L12 4.5l8 7"></path><path d="M6 10.5V20h12v-9.5"></path></svg>
|
||||
홈
|
||||
</div>
|
||||
<div class="c-nav">
|
||||
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#5B6169" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg>
|
||||
전적 검색
|
||||
</div>
|
||||
<div class="c-nav">
|
||||
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#5B6169" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19V11M10 19V5M16 19v-6M21 19H3"></path></svg>
|
||||
랭킹
|
||||
</div>
|
||||
<div class="c-nav">
|
||||
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#5B6169" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="4.5" width="17" height="15" rx="4"></rect><path d="M8 10h8M8 14h5"></path></svg>
|
||||
커뮤니티
|
||||
</div>
|
||||
<div class="c-nav">
|
||||
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#5B6169" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="5" width="19" height="13" rx="3.5"></rect><path d="M10.5 9.5l4.5 2.5-4.5 2.5z"></path></svg>
|
||||
스트리밍
|
||||
</div>
|
||||
<div class="c-nav">
|
||||
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#5B6169" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3.5h9l3.5 3.5v13H6z"></path><path d="M9 11h7M9 15h5"></path></svg>
|
||||
소식
|
||||
</div>
|
||||
<div class="c-nav">
|
||||
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#5B6169" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 9.5h17M3.5 9.5A2 2 0 015.5 7.5h13a2 2 0 012 2v9a2 2 0 01-2 2h-13a2 2 0 01-2-2z"></path><path d="M8 4.5v4M16 4.5v4"></path></svg>
|
||||
이벤트
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1;"></div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.875rem; border-radius: 14px; background: #FFFFFF; border: 1px solid #EDEFF2;">
|
||||
<span style="width: 36px; height: 36px; border-radius: 999px; background: #DDE4EE; flex-shrink: 0;"></span>
|
||||
<div style="min-width: 0;">
|
||||
<div class="c-clip" style="font-size: 0.875rem; font-weight: 600;">달빛조각사</div>
|
||||
<div style="font-size: 0.75rem; color: #9BA1A9; margin-top: 0.0625rem;">병장 3호봉</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 본문 -->
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
|
||||
<header style="display: flex; align-items: center; gap: 1rem; height: 72px; padding: 0 40px; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; width: 100%; max-width: 460px; height: 46px; padding: 0 1.125rem; background: #F5F6F8; border-radius: 999px;">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg>
|
||||
<span style="font-size: 0.9375rem; color: #9BA1A9;">닉네임을 입력해 보세요</span>
|
||||
</div>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: #F5F6F8;">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#5B6169" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 106 8c0 7-3 9-3 9h18s-3-2-3-9z"></path><path d="M13.7 21a2 2 0 01-3.4 0"></path></svg>
|
||||
</span>
|
||||
<span style="width: 42px; height: 42px; border-radius: 999px; background: #DDE4EE;"></span>
|
||||
</header>
|
||||
|
||||
<div style="padding: 32px 40px 56px;">
|
||||
|
||||
<!-- 이벤트 슬라이드 -->
|
||||
<div style="display: flex; align-items: center; margin-bottom: 1rem;">
|
||||
<h2 class="c-h2">이벤트</h2><div style="flex-grow: 1;"></div><span class="c-more">전체 보기</span>
|
||||
</div>
|
||||
|
||||
<!-- 가로형 배너(720:248) 그대로 + 아래 한 줄 설명 -->
|
||||
<div style="border: 1px solid #EDEFF2; border-radius: 24px; overflow: hidden;">
|
||||
<img src="20260903074208.jpg" alt="서든 페스티벌 같이 갈래?" style="display: block; width: 100%; aspect-ratio: 720 / 248; object-fit: cover;">
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.875rem; height: 58px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">시즌 이벤트</span>
|
||||
<span style="width: 1px; height: 12px; background: #E4E8ED;"></span>
|
||||
<span style="font-size: 1rem; font-weight: 600;">서든 페스티벌 같이 갈래?</span>
|
||||
<span style="font-size: 0.875rem; color: #9BA1A9;">9월 1일 ~ 9월 30일</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="width: 22px; height: 5px; border-radius: 999px; background: #14161A;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9; margin: 0 0.25rem 0 0.5rem;">1 / 5</span>
|
||||
<span class="c-arw"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 5l-7 7 7 7"></path></svg></span>
|
||||
<span class="c-arw"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 5l7 7-7 7"></path></svg></span>
|
||||
</div>
|
||||
|
||||
<!-- 2단 -->
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2.5rem; margin-top: 2.5rem;">
|
||||
|
||||
<div>
|
||||
<!-- 게임 랭킹 -->
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="c-h2">게임 랭킹</h2>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-left: 1rem;">
|
||||
<span class="c-tab c-tab-on">전체</span><span class="c-tab">폭파미션</span><span class="c-tab">팀 데스매치</span>
|
||||
</div>
|
||||
<div style="flex-grow: 1;"></div><span class="c-more">전체 보기</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 36px minmax(0, 1fr) 80px 68px 76px; align-items: center; gap: 0.75rem; height: 36px; margin-top: 1rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="c-th">순위</span><span class="c-th">유저</span>
|
||||
<span class="c-th" style="text-align: right;">승률</span>
|
||||
<span class="c-th" style="text-align: right;">K/D</span>
|
||||
<span class="c-th" style="text-align: right;">판수</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 36px minmax(0, 1fr) 80px 68px 76px; align-items: center; gap: 0.75rem; height: 54px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700;">1</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;"><span style="width: 32px; height: 32px; border-radius: 999px; background: #DDE4EE; flex-shrink: 0;"></span><span class="c-clip" style="font-size: 0.9375rem; font-weight: 600;">달빛조각사</span><span style="font-size: 0.8125rem; color: #9BA1A9; flex-shrink: 0;">병장 3호봉</span></div>
|
||||
<span style="text-align: right; font-size: 0.9375rem; font-weight: 600;">78.4%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">2.14</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem; color: #5B6169;">1,284</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 36px minmax(0, 1fr) 80px 68px 76px; align-items: center; gap: 0.75rem; height: 54px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700;">2</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;"><span style="width: 32px; height: 32px; border-radius: 999px; background: #E5E0F0; flex-shrink: 0;"></span><span class="c-clip" style="font-size: 0.9375rem; font-weight: 600;">칼든햄스터</span><span style="font-size: 0.8125rem; color: #9BA1A9; flex-shrink: 0;">소위 1호봉</span></div>
|
||||
<span style="text-align: right; font-size: 0.9375rem; font-weight: 600;">74.9%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">1.96</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem; color: #5B6169;">2,041</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 36px minmax(0, 1fr) 80px 68px 76px; align-items: center; gap: 0.75rem; height: 54px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700;">3</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;"><span style="width: 32px; height: 32px; border-radius: 999px; background: #E7E3D8; flex-shrink: 0;"></span><span class="c-clip" style="font-size: 0.9375rem; font-weight: 600;">새벽두시</span><span style="font-size: 0.8125rem; color: #9BA1A9; flex-shrink: 0;">병장 1호봉</span></div>
|
||||
<span style="text-align: right; font-size: 0.9375rem; font-weight: 600;">71.2%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">1.88</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem; color: #5B6169;">986</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 36px minmax(0, 1fr) 80px 68px 76px; align-items: center; gap: 0.75rem; height: 54px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 600; color: #9BA1A9;">4</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;"><span style="width: 32px; height: 32px; border-radius: 999px; background: #D8E6E2; flex-shrink: 0;"></span><span class="c-clip" style="font-size: 0.9375rem; font-weight: 600;">무명연대장</span><span style="font-size: 0.8125rem; color: #9BA1A9; flex-shrink: 0;">중사 2호봉</span></div>
|
||||
<span style="text-align: right; font-size: 0.9375rem; font-weight: 600;">69.5%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">1.74</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem; color: #5B6169;">3,102</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 36px minmax(0, 1fr) 80px 68px 76px; align-items: center; gap: 0.75rem; height: 54px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 600; color: #9BA1A9;">5</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;"><span style="width: 32px; height: 32px; border-radius: 999px; background: #EDDFE2; flex-shrink: 0;"></span><span class="c-clip" style="font-size: 0.9375rem; font-weight: 600;">한밤의저격수</span><span style="font-size: 0.8125rem; color: #9BA1A9; flex-shrink: 0;">상사 1호봉</span></div>
|
||||
<span style="text-align: right; font-size: 0.9375rem; font-weight: 600;">68.1%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">1.71</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem; color: #5B6169;">742</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 36px minmax(0, 1fr) 80px 68px 76px; align-items: center; gap: 0.75rem; height: 54px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 600; color: #9BA1A9;">6</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; min-width: 0;"><span style="width: 32px; height: 32px; border-radius: 999px; background: #E4E8ED; flex-shrink: 0;"></span><span class="c-clip" style="font-size: 0.9375rem; font-weight: 600;">조용한총잡이</span><span style="font-size: 0.8125rem; color: #9BA1A9; flex-shrink: 0;">병장 2호봉</span></div>
|
||||
<span style="text-align: right; font-size: 0.9375rem; font-weight: 600;">66.7%</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem;">1.68</span>
|
||||
<span style="text-align: right; font-size: 0.9375rem; color: #5B6169;">1,530</span>
|
||||
</div>
|
||||
|
||||
<button style="width: 100%; height: 46px; margin-top: 1rem; border: none; border-radius: 999px; background: #F5F6F8; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">랭킹 100위까지 보기</button>
|
||||
|
||||
<!-- 소식 2단 -->
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-top: 2.5rem;">
|
||||
<div>
|
||||
<div style="display: flex; align-items: center;"><h2 class="c-h2">서든어택 소식</h2><div style="flex-grow: 1;"></div><span class="c-more">더 보기</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.875rem;"><span class="c-tab c-tab-on">공지사항</span><span class="c-tab">업데이트</span></div>
|
||||
<div style="margin-top: 0.75rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span><span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내</span><span style="font-size: 0.8125rem; color: #9BA1A9;">09.02</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span><span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">비매너 이용자 제재 결과</span><span style="font-size: 0.8125rem; color: #9BA1A9;">09.01</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">가을 시즌 랭크전 일정</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.29</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">신규 맵 컨테이너 야드 추가</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.28</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">AK-47 반동 수치 조정</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.26</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="display: flex; align-items: center;"><h2 class="c-h2">서린즈 소식</h2><div style="flex-grow: 1;"></div><span class="c-more">더 보기</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.875rem;"><span class="c-tab c-tab-on">공지사항</span><span class="c-tab">업데이트</span></div>
|
||||
<div style="margin-top: 0.75rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span><span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">맵별 승률 통계를 열었어요</span><span style="font-size: 0.8125rem; color: #9BA1A9;">09.03</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span><span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">전적 갱신이 두 배 빨라졌어요</span><span style="font-size: 0.8125rem; color: #9BA1A9;">09.01</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">즐겨찾기 알림 기능 추가</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.30</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">8월 서버 점검 결과 보고</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.27</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">커뮤니티 이용 규칙 정리</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.24</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 커뮤니티 -->
|
||||
<div style="display: flex; align-items: center; margin-top: 2.5rem;">
|
||||
<h2 class="c-h2">커뮤니티</h2>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-left: 1rem;">
|
||||
<span class="c-tab c-tab-on">인기</span><span class="c-tab">최신</span><span class="c-tab">클립</span>
|
||||
</div>
|
||||
<div style="flex-grow: 1;"></div><span class="c-more">전체 보기</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.125rem;">
|
||||
<div style="position: relative; aspect-ratio: 1 / 1; border-radius: 18px; background: #E4E8ED; overflow: hidden;">
|
||||
<div style="position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.4375rem; height: 44px; padding: 0 0.75rem; background: rgba(20, 22, 26, 0.5);"><span style="width: 20px; height: 20px; border-radius: 999px; background: #C9D2DD;"></span><span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">달빛조각사</span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.4-7-9.3A4.2 4.2 0 0112 8a4.2 4.2 0 017 2.7c0 4.9-7 9.3-7 9.3z"></path></svg><span style="font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">312</span></div>
|
||||
</div>
|
||||
<div style="position: relative; aspect-ratio: 1 / 1; border-radius: 18px; background: #EAE6E0; overflow: hidden;">
|
||||
<div style="position: absolute; top: 10px; right: 10px;"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="3" width="13" height="13" rx="3"></rect><path d="M16 19.5A2.5 2.5 0 0113.5 22H6a3 3 0 01-3-3V9.5"></path></svg></div>
|
||||
<div style="position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.4375rem; height: 44px; padding: 0 0.75rem; background: rgba(20, 22, 26, 0.5);"><span style="width: 20px; height: 20px; border-radius: 999px; background: #D8D2C8;"></span><span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">칼든햄스터</span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.4-7-9.3A4.2 4.2 0 0112 8a4.2 4.2 0 017 2.7c0 4.9-7 9.3-7 9.3z"></path></svg><span style="font-size: 0.75rem; font-weight: 600; color: #FFFFFF;">274</span></div>
|
||||
</div>
|
||||
<!-- 사진 없는 글 — 본문이 곧 썸네일이 된다 -->
|
||||
<div style="display: flex; flex-direction: column; aspect-ratio: 1 / 1; padding: 18px; border-radius: 18px; background: #F5F6F8;">
|
||||
<p style="margin: 0; font-size: 0.9375rem; line-height: 1.6; font-weight: 500;">폭파 삼보급에서 A 롱각 잡을 때 다들 어디 서세요? 요즘 자꾸 먼저 죽습니다.</p>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem;">
|
||||
<span style="width: 20px; height: 20px; border-radius: 999px; background: #DDE4EE;"></span>
|
||||
<span class="c-clip" style="flex-grow: 1; min-width: 0; font-size: 0.75rem; font-weight: 600;">새벽두시</span>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#5B6169" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.4-7-9.3A4.2 4.2 0 0112 8a4.2 4.2 0 017 2.7c0 4.9-7 9.3-7 9.3z"></path></svg>
|
||||
<span style="font-size: 0.75rem; font-weight: 600; color: #5B6169;">198</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 우측 레일 -->
|
||||
<aside>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="c-h2">검색 랭킹</h2><div style="flex-grow: 1;"></div><span style="font-size: 0.8125rem; color: #9BA1A9;">18:20 기준</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 34px; margin-top: 1rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="c-th">#</span><span class="c-th">닉네임</span><span class="c-th" style="text-align: right;">변동</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;"><span style="font-size: 0.875rem; font-weight: 700;">1</span><span class="c-clip" style="font-size: 0.9375rem;">달빛조각사</span><span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">2</span></span></div>
|
||||
<div style="display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;"><span style="font-size: 0.875rem; font-weight: 700;">2</span><span class="c-clip" style="font-size: 0.9375rem;">칼든햄스터</span><span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">1</span></span></div>
|
||||
<div style="display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;"><span style="font-size: 0.875rem; font-weight: 700;">3</span><span class="c-clip" style="font-size: 0.9375rem;">새벽두시</span><span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">4</span></span></div>
|
||||
<div style="display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;"><span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">4</span><span class="c-clip" style="font-size: 0.9375rem;">무명연대장</span><span style="display: flex; align-items: center; justify-content: flex-end;"><span style="width: 10px; height: 1px; background: #C9CDD3;"></span></span></div>
|
||||
<div style="display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;"><span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">5</span><span class="c-clip" style="font-size: 0.9375rem;">한밤의저격수</span><span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">3</span></span></div>
|
||||
<div style="display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;"><span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">6</span><span class="c-clip" style="font-size: 0.9375rem;">조용한총잡이</span><span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">2</span></span></div>
|
||||
<div style="display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;"><span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">7</span><span class="c-clip" style="font-size: 0.9375rem;">야간부대장</span><span style="display: flex; align-items: center; justify-content: flex-end;"><span style="width: 10px; height: 1px; background: #C9CDD3;"></span></span></div>
|
||||
<div style="display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px; align-items: center; gap: 0.625rem; height: 42px;"><span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">8</span><span class="c-clip" style="font-size: 0.9375rem;">헤드샷장인</span><span style="display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;"><svg width="10" height="10" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">5</span></span></div>
|
||||
|
||||
<div style="height: 1px; background: #EDEFF2; margin: 2rem 0;"></div>
|
||||
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="c-h2">지금 방송 중</h2><div style="flex-grow: 1;"></div><span class="c-more">전체 보기</span>
|
||||
</div>
|
||||
<div style="margin-top: 1.125rem;">
|
||||
<div style="aspect-ratio: 16 / 9; border-radius: 16px; background: #E4E8ED;"></div>
|
||||
<div class="c-clip" style="font-size: 0.9375rem; font-weight: 600; margin-top: 0.75rem;">삼보급 스나 연습</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem; margin-top: 0.3125rem;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #E8443A;"></span><span style="font-size: 0.75rem; font-weight: 600; color: #E8443A;">LIVE</span><span style="font-size: 0.8125rem; color: #9BA1A9;">달빛조각사 · 1,204명</span></div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<div style="width: 88px; height: 52px; border-radius: 12px; background: #EAE6E0; flex-shrink: 0;"></div>
|
||||
<div style="flex-grow: 1; min-width: 0;"><div class="c-clip" style="font-size: 0.875rem; font-weight: 600;">클랜전 리그 중계</div><div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem;"><span style="width: 5px; height: 5px; border-radius: 999px; background: #E8443A;"></span><span style="font-size: 0.75rem; color: #9BA1A9;">무명연대 · 862명</span></div></div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<div style="width: 88px; height: 52px; border-radius: 12px; background: #E2E9E6; flex-shrink: 0;"></div>
|
||||
<div style="flex-grow: 1; min-width: 0;"><div class="c-clip" style="font-size: 0.875rem; font-weight: 600;">초보 탈출 폭파 강의</div><div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem;"><span style="width: 5px; height: 5px; border-radius: 999px; background: #E8443A;"></span><span style="font-size: 0.75rem; color: #9BA1A9;">새벽두시 · 517명</span></div></div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<div style="width: 88px; height: 52px; border-radius: 12px; background: #E8E4EC; flex-shrink: 0;"></div>
|
||||
<div style="flex-grow: 1; min-width: 0;"><div class="c-clip" style="font-size: 0.875rem; font-weight: 600;">시청자 참여 한 판</div><div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem;"><span style="width: 5px; height: 5px; border-radius: 999px; background: #E8443A;"></span><span style="font-size: 0.75rem; color: #9BA1A9;">한밤의저격수 · 341명</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer style="display: flex; align-items: center; gap: 1.5rem; padding: 32px 40px 48px; border-top: 1px solid #EDEFF2; font-size: 0.875rem; color: #9BA1A9;">
|
||||
<span style="font-weight: 600; color: #5B6169;">서린즈</span><span>이용약관</span><span>개인정보 처리방침</span><span>문의하기</span>
|
||||
<div style="flex-grow: 1;"></div><span>넥슨 공개 API 기반 · 서든어택 비공식 서비스</span>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,554 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 서린즈 홈 — 로딩(스켈레톤). 뼈대는 즉시 그리고 데이터 자리만 회색으로 둔다 */
|
||||
body { margin: 0; }
|
||||
.d-root, .d-root * { box-sizing: border-box; }
|
||||
.d-root {
|
||||
font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
a { color: #C24A00; text-decoration: none; }
|
||||
a:hover { color: #A03C00; }
|
||||
.d-h2 { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em; }
|
||||
.d-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
|
||||
.d-tab { display: inline-flex; align-items: center; height: 30px; padding: 0 0.8125rem; border-radius: 999px; background: #F5F6F8; font-size: 0.8125rem; font-weight: 500; color: #5B6169; }
|
||||
.d-tab-on { background: #14161A; font-weight: 600; color: #FFFFFF; }
|
||||
.d-more { font-size: 0.8125rem; font-weight: 600; color: #5B6169; }
|
||||
.d-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.d-arw { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; }
|
||||
|
||||
/* 스켈레톤 — 한 덩어리(.s)로 통일하고 크기·라운드만 자리마다 다르게 준다 */
|
||||
.s { display: block; position: relative; overflow: hidden; background: #EDEFF2; }
|
||||
.s::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform: translateX(-100%);
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
|
||||
animation: s-sweep 1.6s ease-in-out infinite;
|
||||
}
|
||||
@keyframes s-sweep { to { transform: translateX(100%); } }
|
||||
/* 움직임을 줄이도록 설정한 기기에서는 쓸어가는 효과를 끈다 */
|
||||
@media (prefers-reduced-motion: reduce) { .s::after { animation: none; } }
|
||||
.d-tier { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #EDEFF2; }
|
||||
.d-rp { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.25rem; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="d-root" style="width: 1440px; min-height: 2420px; background: #FFFFFF; color: #14161A;">
|
||||
|
||||
<!-- 헤더 — 데이터가 없어도 그대로 그린다 -->
|
||||
<header style="display: flex; align-items: center; gap: 1.75rem; height: 72px; padding: 0 40px; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
</div>
|
||||
|
||||
<nav style="display: flex; align-items: center; gap: 1.5rem; margin-left: 0.75rem; font-size: 0.9375rem;">
|
||||
<span style="font-weight: 700;">홈</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">전적 검색</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">랭킹</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">커뮤니티</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">스트리밍</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">소식</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">이벤트</span>
|
||||
</nav>
|
||||
|
||||
<div style="flex-grow: 1;"></div>
|
||||
|
||||
<button style="height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #F2F4F7; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">로그인</button>
|
||||
</header>
|
||||
|
||||
<!-- 검색 히어로 — 검색창까지 전부 즉시. 최근 검색 칩만 회색 -->
|
||||
<section style="background: #FAFBFC; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; flex-direction: column; align-items: center; padding: 52px 40px 46px;">
|
||||
<h1 style="margin: 0; text-align: center; font-size: 2.125rem; line-height: 1.28; font-weight: 700; letter-spacing: -0.045em;">누구의 전적이 궁금하세요?</h1>
|
||||
<p style="margin: 0.75rem 0 0; text-align: center; font-size: 0.9375rem; line-height: 1.65; color: #5B6169;">닉네임만 알려주시면 최근 경기 흐름부터 자주 쓰는 무기까지 정리해 드릴게요.</p>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.875rem; width: 100%; max-width: 700px; height: 66px; margin-top: 1.625rem; padding: 0 0.5rem 0 1.375rem; background: #FFFFFF; border: 1px solid #E4E8ED; border-radius: 999px; box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04), 0 12px 32px rgba(20, 22, 26, 0.07);">
|
||||
<svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg>
|
||||
<span style="flex-grow: 1; font-size: 1.0625rem; color: #9BA1A9;">닉네임을 입력해 보세요</span>
|
||||
<button style="height: 50px; padding: 0 1.75rem; border: none; border-radius: 999px; background: #FF6A00; font-family: inherit; font-size: 1rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.02em; cursor: pointer;">찾아보기</button>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem;">
|
||||
<span style="font-size: 0.875rem; color: #9BA1A9; margin-right: 0.25rem;">최근에 찾아봤어요</span>
|
||||
<span class="s" style="width: 112px; height: 36px; border-radius: 999px;"></span>
|
||||
<span class="s" style="width: 124px; height: 36px; border-radius: 999px;"></span>
|
||||
<span class="s" style="width: 104px; height: 36px; border-radius: 999px;"></span>
|
||||
<span class="s" style="width: 132px; height: 36px; border-radius: 999px;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 균등 3열 그리드 -->
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; padding: 36px 40px 56px;">
|
||||
|
||||
<!-- 이벤트 (2칸) -->
|
||||
<section style="grid-column: span 2;">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">이벤트</h2><div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
<span class="s" style="width: 100%; height: auto; border-radius: 24px; aspect-ratio: 720 / 248;"></span>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 56px;">
|
||||
<span class="s" style="width: 68px; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="width: 1px; height: 12px; background: #E4E8ED;"></span>
|
||||
<span class="s" style="width: 216px; height: 13px; border-radius: 5px;"></span>
|
||||
<span class="s" style="width: 124px; height: 11px; border-radius: 5px;"></span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="width: 22px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span class="s" style="width: 28px; height: 11px; border-radius: 5px; margin: 0 0.25rem 0 0.5rem;"></span>
|
||||
<span class="d-arw"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 5l-7 7 7 7"></path></svg></span>
|
||||
<span class="d-arw"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 5l7 7-7 7"></path></svg></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 검색 랭킹 -->
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">검색 랭킹</h2><div style="flex-grow: 1;"></div><span class="s" style="width: 68px; height: 11px; border-radius: 5px;"></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 34px; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">순위</span><span class="d-th">닉네임</span><span class="d-th" style="text-align: right;">변동</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span>
|
||||
<span class="s" style="width: 72%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<span class="s" style="width: 58%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span>
|
||||
<span class="s" style="width: 80%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">4</span>
|
||||
<span class="s" style="width: 64%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">5</span>
|
||||
<span class="s" style="width: 76%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">6</span>
|
||||
<span class="s" style="width: 54%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">7</span>
|
||||
<span class="s" style="width: 68%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">8</span>
|
||||
<span class="s" style="width: 84%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">9</span>
|
||||
<span class="s" style="width: 60%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 게임 랭킹 (2칸) -->
|
||||
<section style="grid-column: span 2;">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">게임 랭킹</h2>
|
||||
<span style="margin-left: 0.75rem; font-size: 0.8125rem; color: #9BA1A9;">매일 오전 8시 갱신</span>
|
||||
<div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem;">
|
||||
|
||||
<div>
|
||||
<div style="font-size: 0.9375rem; font-weight: 700;">계급 랭킹</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.25rem; margin-top: 0.625rem;">
|
||||
<span class="d-tab d-tab-on">통합</span><span class="d-tab">시즌</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">#</span><span></span><span class="d-th">유저</span>
|
||||
<span class="d-th" style="text-align: right;">등락</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 72%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 58%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 80%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">4</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 64%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">5</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 76%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">6</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 54%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">7</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 68%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">8</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 84%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">9</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 60%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">10</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 74%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="font-size: 0.9375rem; font-weight: 700;">랭크전 랭킹</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.25rem; margin-top: 0.625rem;">
|
||||
<span class="d-tab d-tab-on">솔로</span><span class="d-tab">파티</span><span class="d-tab">클랜</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">#</span><span></span><span class="d-th">유저</span>
|
||||
<span class="d-th" style="text-align: right;">RP</span>
|
||||
<span class="d-th" style="text-align: right;">등락</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 72%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 58%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 80%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">4</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 64%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">5</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 76%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">6</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 54%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">7</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 68%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">8</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 84%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">9</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 60%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">10</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 74%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="font-size: 0.9375rem; font-weight: 700;">클랜 랭킹</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.25rem; margin-top: 0.625rem;">
|
||||
<span class="d-tab d-tab-on">공식</span><span class="d-tab">일반</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">#</span><span></span><span class="d-th">클랜</span>
|
||||
<span class="d-th" style="text-align: right;">등락</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span>
|
||||
<span class="s" style="width: 28px; height: 28px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 72%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<span class="s" style="width: 28px; height: 28px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 58%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span>
|
||||
<span class="s" style="width: 28px; height: 28px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 80%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">4</span>
|
||||
<span class="s" style="width: 28px; height: 28px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 64%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">5</span>
|
||||
<span class="s" style="width: 28px; height: 28px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 76%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">6</span>
|
||||
<span class="s" style="width: 28px; height: 28px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 54%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">7</span>
|
||||
<span class="s" style="width: 28px; height: 28px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 68%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">8</span>
|
||||
<span class="s" style="width: 28px; height: 28px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 84%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">9</span>
|
||||
<span class="s" style="width: 28px; height: 28px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 60%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">10</span>
|
||||
<span class="s" style="width: 28px; height: 28px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 74%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 순위 구간 이동 -->
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #EDEFF2;">
|
||||
<span class="s" style="width: 136px; height: 11px; border-radius: 5px;"></span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span class="d-arw" style="opacity: 0.4;"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 5l-7 7 7 7"></path></svg></span>
|
||||
<div style="display: flex; align-items: center; gap: 0.125rem;">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; background: #14161A; font-size: 0.875rem; font-weight: 700; color: #FFFFFF;">1</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #C9CDD3;">2</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #C9CDD3;">3</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #C9CDD3;">4</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #C9CDD3;">5</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 34px; font-size: 0.875rem; color: #C9CDD3;">…</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #C9CDD3;">10</span>
|
||||
</div>
|
||||
<span class="d-arw"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 5l7 7-7 7"></path></svg></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 커뮤니티 -->
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">커뮤니티</h2><div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem;"><span class="d-tab d-tab-on">인기</span><span class="d-tab">최신</span><span class="d-tab">클립</span></div>
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.875rem;">
|
||||
<span class="s" style="width: 100%; height: auto; border-radius: 18px; aspect-ratio: 1 / 1;"></span>
|
||||
<span class="s" style="width: 100%; height: auto; border-radius: 18px; aspect-ratio: 1 / 1;"></span>
|
||||
<div style="display: flex; flex-direction: column; aspect-ratio: 1 / 1; padding: 16px; border-radius: 18px; background: #F5F6F8;">
|
||||
<span class="s" style="width: 100%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="height: 0.5rem;"></span>
|
||||
<span class="s" style="width: 62%; height: 12px; border-radius: 5px;"></span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem;"><span class="s" style="width: 20px; height: 20px; border-radius: 999px;"></span><span class="s" style="width: 54%; height: 10px; border-radius: 5px;"></span></div>
|
||||
</div>
|
||||
<span class="s" style="width: 100%; height: auto; border-radius: 18px; aspect-ratio: 1 / 1;"></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">서든어택 소식</h2><div style="flex-grow: 1;"></div><span class="d-more">더 보기</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem;"><span class="d-tab d-tab-on">공지사항</span><span class="d-tab">업데이트</span></div>
|
||||
<div style="margin-top: 0.75rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0;"><span class="s" style="width: 64%; height: 12px; border-radius: 5px;"></span></span>
|
||||
<span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0;"><span class="s" style="width: 78%; height: 12px; border-radius: 5px;"></span></span>
|
||||
<span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0;"><span class="s" style="width: 56%; height: 12px; border-radius: 5px;"></span></span>
|
||||
<span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0;"><span class="s" style="width: 82%; height: 12px; border-radius: 5px;"></span></span>
|
||||
<span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0;"><span class="s" style="width: 68%; height: 12px; border-radius: 5px;"></span></span>
|
||||
<span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px;">
|
||||
<span style="flex-grow: 1; min-width: 0;"><span class="s" style="width: 74%; height: 12px; border-radius: 5px;"></span></span>
|
||||
<span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">서린즈 소식</h2><div style="flex-grow: 1;"></div><span class="d-more">더 보기</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem;"><span class="d-tab d-tab-on">공지사항</span><span class="d-tab">업데이트</span></div>
|
||||
<div style="margin-top: 0.75rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0;"><span class="s" style="width: 72%; height: 12px; border-radius: 5px;"></span></span>
|
||||
<span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0;"><span class="s" style="width: 58%; height: 12px; border-radius: 5px;"></span></span>
|
||||
<span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0;"><span class="s" style="width: 80%; height: 12px; border-radius: 5px;"></span></span>
|
||||
<span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0;"><span class="s" style="width: 66%; height: 12px; border-radius: 5px;"></span></span>
|
||||
<span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="flex-grow: 1; min-width: 0;"><span class="s" style="width: 76%; height: 12px; border-radius: 5px;"></span></span>
|
||||
<span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px;">
|
||||
<span style="flex-grow: 1; min-width: 0;"><span class="s" style="width: 62%; height: 12px; border-radius: 5px;"></span></span>
|
||||
<span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 지금 방송 중 -->
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">지금 방송 중</h2><div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="s" style="width: 100%; height: auto; border-radius: 16px; aspect-ratio: 16 / 9;"></span>
|
||||
<span style="display: block; margin-top: 0.875rem;"><span class="s" style="width: 68%; height: 13px; border-radius: 5px;"></span></span>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem; margin-top: 0.5rem;"><span class="s" style="width: 20px; height: 20px; border-radius: 999px;"></span><span class="s" style="width: 46%; height: 11px; border-radius: 5px;"></span></div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<span class="s" style="width: 92px; height: 54px; border-radius: 12px; flex-shrink: 0;"></span>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<span class="s" style="width: 76%; height: 12px; border-radius: 5px;"></span>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.4375rem;"><span class="s" style="width: 18px; height: 18px; border-radius: 999px;"></span><span class="s" style="width: 58%; height: 10px; border-radius: 5px;"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<span class="s" style="width: 92px; height: 54px; border-radius: 12px; flex-shrink: 0;"></span>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<span class="s" style="width: 76%; height: 12px; border-radius: 5px;"></span>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.4375rem;"><span class="s" style="width: 18px; height: 18px; border-radius: 999px;"></span><span class="s" style="width: 58%; height: 10px; border-radius: 5px;"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<span class="s" style="width: 92px; height: 54px; border-radius: 12px; flex-shrink: 0;"></span>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<span class="s" style="width: 76%; height: 12px; border-radius: 5px;"></span>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.4375rem;"><span class="s" style="width: 18px; height: 18px; border-radius: 999px;"></span><span class="s" style="width: 58%; height: 10px; border-radius: 5px;"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,173 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 서린즈 로고 — 곧은 획으로만 짜고 끝과 꺾임을 굴린 워드마크 */
|
||||
|
||||
body { margin: 0; }
|
||||
.d-root, .d-root * { box-sizing: border-box; }
|
||||
.d-root {
|
||||
font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
a { color: #C24A00; text-decoration: none; }
|
||||
a:hover { color: #A03C00; }
|
||||
.d-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
|
||||
.d-tab { display: inline-flex; align-items: center; height: 32px; padding: 0 0.8125rem; border-radius: 999px; background: #F5F6F8; font-size: 0.8125rem; font-weight: 500; color: #5B6169; }
|
||||
.d-tab-on { background: #14161A; font-weight: 600; color: #FFFFFF; }
|
||||
.d-more { font-size: 0.8125rem; font-weight: 600; color: #5B6169; }
|
||||
.d-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.d-mv { display: flex; align-items: center; justify-content: flex-end; gap: 0.1875rem; }
|
||||
.d-new { flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; color: #C24A00; letter-spacing: -0.01em; }
|
||||
.d-arw { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; }
|
||||
/* 갈래 선택 — 하위 탭(알약)과 구분되도록 밑줄형 세그먼트로 둔다 */
|
||||
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid #E4E8ED; }
|
||||
.seg > span { display: flex; align-items: center; justify-content: center; height: 46px; font-size: 0.9375rem; font-weight: 500; color: #9BA1A9; box-shadow: inset 0 -2px 0 transparent; }
|
||||
.seg > .on { font-weight: 700; color: #14161A; box-shadow: inset 0 -2px 0 #14161A; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="d-root" style="width: 1440px; min-height: 1860px; padding: 48px; background: #FFFFFF; color: #14161A;">
|
||||
|
||||
<h1 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">서린즈 로고</h1>
|
||||
<p style="margin: 0.625rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: #5B6169; max-width: 66rem;">글꼴을 그대로 쓰지 않고 획을 직접 그렸습니다. 서 = ㅅ+ㅓ, 린 = ㄹ+ㅣ+ㄴ, 즈 = ㅈ+ㅡ 인데 이 일곱 자모가 모두 곧은 선이라, 선으로만 짜고 끝과 꺾이는 자리만 둥글게 굴려 «동글»한 인상을 냈습니다. 글꼴 파일에 기대지 않으니 어디에 써도 같은 모양이 나오고, 크기를 키워도 깨지지 않으며, 내보낼 때도 그대로 나옵니다.</p>
|
||||
|
||||
<div style="display: flex; align-items: center; justify-content: center; height: 260px; margin-top: 1.75rem; border: 1px solid #E4E8ED; border-radius: 20px;"><svg width="315" height="104" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg></div>
|
||||
|
||||
<div style="margin-top: 2.5rem;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.875rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">색</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">세 가지만 씁니다</span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 1rem;">
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="display: flex; align-items: center; justify-content: center; height: 140px; border-radius: 16px; background: #FFFFFF; border: 1px solid #E4E8ED;"><svg width="170" height="56" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg></div>
|
||||
<div style="margin-top: 0.5rem; font-size: 0.8125rem; color: #5B6169;">기본 — 검정 #14161A · 흰 바탕</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="display: flex; align-items: center; justify-content: center; height: 140px; border-radius: 16px; background: #FFFFFF; border: 1px solid #E4E8ED;"><svg width="170" height="56" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#C24A00" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg></div>
|
||||
<div style="margin-top: 0.5rem; font-size: 0.8125rem; color: #5B6169;">강조 — 오렌지 #C24A00 · 흰 바탕</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="display: flex; align-items: center; justify-content: center; height: 140px; border-radius: 16px; background: #FF6A00;"><svg width="170" height="56" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg></div>
|
||||
<div style="margin-top: 0.5rem; font-size: 0.8125rem; color: #5B6169;">반전 — 흰색 · 오렌지 바탕</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0.875rem 0 0; font-size: 0.8125rem; line-height: 1.65; color: #7A828C; max-width: 62rem;">흰 바탕에 오렌지로 쓸 때는 밝은 #FF6A00 이 아니라 글자용 #C24A00 을 씁니다 — 밝은 쪽은 흰 바탕에서 2.87:1 이라 획이 날아갑니다. 사진 위에 얹어야 하면 오렌지 바탕을 깔고 흰 워드마크를 올립니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 2.5rem;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.875rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">획 두께</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">기본은 가운데. 나머지 둘은 필요할 때만</span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 1rem;">
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="display: flex; align-items: center; justify-content: center; height: 116px; border: 1px solid #E4E8ED; border-radius: 16px;"><svg width="172" height="56" viewBox="-12.5 -6.5 371 121" fill="none" stroke="#14161A" stroke-width="13" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg></div>
|
||||
<div style="margin-top: 0.5rem; font-size: 0.8125rem; font-weight: 600;">가는 획</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.75rem; line-height: 1.55; color: #9BA1A9;">큰 화면·인쇄물에서 여유 있게 보일 때</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="display: flex; align-items: center; justify-content: center; height: 116px; border: 1px solid #E4E8ED; border-radius: 16px;"><svg width="170" height="56" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg></div>
|
||||
<div style="margin-top: 0.5rem; font-size: 0.8125rem; font-weight: 600;">기본</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.75rem; line-height: 1.55; color: #9BA1A9;">헤더를 비롯한 모든 자리의 기본값</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="display: flex; align-items: center; justify-content: center; height: 116px; border: 1px solid #E4E8ED; border-radius: 16px;"><svg width="165" height="56" viewBox="-16 -10 378 128" fill="none" stroke="#14161A" stroke-width="20" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg></div>
|
||||
<div style="margin-top: 0.5rem; font-size: 0.8125rem; font-weight: 600;">도톰한 획</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.75rem; line-height: 1.55; color: #9BA1A9;">아주 작게 쓰거나 굿즈처럼 두께가 필요할 때</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 2.5rem; margin-top: 2.5rem;">
|
||||
|
||||
<div style="flex-shrink: 0;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.875rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">헤더</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">심볼 없이 워드마크만</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem;">
|
||||
<div style="display: flex; align-items: center; height: 88px; padding: 0 1.5rem; border: 1px solid #E4E8ED; border-radius: 16px;"><svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; height: 80px; padding: 0 1.5rem; border: 1px solid #E4E8ED; border-radius: 16px;"><svg width="55" height="18" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0.75rem 0 0; width: 24rem; font-size: 0.8125rem; line-height: 1.65; color: #7A828C;">데스크톱·태블릿 20px, 모바일 18px. 앞에 있던 돋보기 심볼은 뺐습니다 — 워드마크가 이미 이름을 다 말하고, 검색은 히어로와 헤더 아이콘이 따로 맡습니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="flex-shrink: 0;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.875rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">앱 아이콘</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">「서」 한 글자</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: flex-end; gap: 1.25rem; height: 108px; padding: 0 1.5rem; border: 1px solid #E4E8ED; border-radius: 16px;"><span style="display: inline-flex; width: 64px; height: 64px; border-radius: 19px; background: #FF6A00; flex-shrink: 0;"><svg width="64" height="64" viewBox="-14.5 -18.5 135 145" fill="none" stroke="#FFFFFF" stroke-width="17" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline></svg></span><span style="display: inline-flex; width: 44px; height: 44px; border-radius: 13px; background: #FF6A00; flex-shrink: 0;"><svg width="44" height="44" viewBox="-14.5 -18.5 135 145" fill="none" stroke="#FFFFFF" stroke-width="17" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline></svg></span><span style="display: inline-flex; width: 32px; height: 32px; border-radius: 9px; background: #FF6A00; flex-shrink: 0;"><svg width="32" height="32" viewBox="-14.5 -18.5 135 145" fill="none" stroke="#FFFFFF" stroke-width="17" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline></svg></span><span style="display: inline-flex; width: 20px; height: 20px; border-radius: 6px; background: #FF6A00; flex-shrink: 0;"><svg width="20" height="20" viewBox="-14.5 -18.5 135 145" fill="none" stroke="#FFFFFF" stroke-width="17" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline></svg></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 1.25rem; height: 96px; margin-top: 0.75rem; padding: 0 1.5rem; border: 1px solid #E4E8ED; border-radius: 16px;"><span style="display: inline-flex; width: 64px; height: 64px; border-radius: 19px; background: #14161A; flex-shrink: 0;"><svg width="64" height="64" viewBox="-14.5 -18.5 135 145" fill="none" stroke="#FFFFFF" stroke-width="17" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline></svg></span><span style="display: inline-flex; width: 64px; height: 64px; border-radius: 19px; background: #F2F4F7; flex-shrink: 0;"><svg width="64" height="64" viewBox="-14.5 -18.5 135 145" fill="none" stroke="#14161A" stroke-width="17" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline></svg></span>
|
||||
</div>
|
||||
<p style="margin: 0.75rem 0 0; width: 24rem; font-size: 0.8125rem; line-height: 1.65; color: #7A828C;">파비콘·앱 아이콘처럼 정사각 한 칸만 있는 자리에는 워드마크의 첫 글자 「서」를 그대로 떼어 씁니다. 워드마크를 정사각에 욱여넣지 않습니다. 바탕은 오렌지가 기본이고, 검정·연회색은 오렌지를 못 쓰는 자리에서만 씁니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.875rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">지켜야 할 것</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;"></span>
|
||||
</div>
|
||||
<ul style="margin: 0; padding-left: 1.0625rem;">
|
||||
<li style="margin-top: 0.4375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">최소 크기는 <span style="font-weight: 700; color: #14161A;">높이 16px</span> 입니다. 그 아래로는 「린」의 ㄹ 속이 막힙니다.</li>
|
||||
<li style="margin-top: 0.4375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">둘레 여백은 <span style="font-weight: 700; color: #14161A;">글자 높이의 절반</span> 이상 비웁니다.</li>
|
||||
<li style="margin-top: 0.4375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">가로세로 비율을 바꾸지 않습니다. 기울이거나 그림자·테두리를 더하지 않습니다.</li>
|
||||
<li style="margin-top: 0.4375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">획 두께는 크기에 따라 저절로 얇아지지 않습니다. 아주 작게 쓸 때는 「도톰한 획」으로 바꿉니다.</li>
|
||||
<li style="margin-top: 0.4375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">글자를 다시 배열하거나 「서린즈」를 다른 말로 바꿔 같은 모양을 만들지 않습니다.</li>
|
||||
<li style="margin-top: 0.4375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">앱 아이콘의 「서」는 워드마크와 같은 좌표에서 떼어 온 것입니다. 따로 다시 그리지 않습니다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 2.5rem;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.875rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">헤더에 얹은 모습</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">데스크톱과 모바일</span>
|
||||
</div>
|
||||
<div style="border: 1px solid #E4E8ED; border-radius: 16px; overflow: hidden;">
|
||||
<header style="display: flex; align-items: center; gap: 1.75rem; height: 72px; padding: 0 40px; background: #FFFFFF; border-bottom: 1px solid #EDEFF2;"><svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
<nav style="display: flex; align-items: center; gap: 1.5rem; margin-left: 0.75rem; font-size: 0.9375rem;">
|
||||
<span style="font-weight: 700;">홈</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">전적 검색</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">랭킹</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">커뮤니티</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">스트리밍</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">소식</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">이벤트</span>
|
||||
</nav>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<button style="height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #F2F4F7; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">로그인</button>
|
||||
</header>
|
||||
<header style="display: flex; align-items: center; gap: 0.5rem; width: 390px; height: 60px; padding: 0 20px; background: #FFFFFF; border-top: 1px solid #EDEFF2;"><svg width="55" height="18" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -0.625rem;">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2" stroke-linecap="round"><path d="M4 7h16"></path><path d="M4 12h16"></path><path d="M4 17h16"></path></svg>
|
||||
</span>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,18 +18,21 @@
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
a { color: #0866FF; text-decoration: none; }
|
||||
a:hover { color: #0450CC; }
|
||||
a { color: #C24A00; text-decoration: none; }
|
||||
a:hover { color: #A03C00; }
|
||||
.d-h2 { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em; }
|
||||
.d-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
|
||||
.d-tab { display: inline-flex; align-items: center; height: 30px; padding: 0 0.8125rem; border-radius: 999px; background: #F5F6F8; font-size: 0.8125rem; font-weight: 500; color: #5B6169; }
|
||||
.d-tab-on { background: #14161A; font-weight: 600; color: #FFFFFF; }
|
||||
.d-more { font-size: 0.8125rem; font-weight: 600; color: #5B6169; }
|
||||
.d-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.d-new { flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; color: #C24A00; letter-spacing: -0.01em; }
|
||||
.d-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #F0F2F5; }
|
||||
.d-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #EDEFF2; }
|
||||
.d-mv { display: flex; align-items: center; justify-content: flex-end; gap: 0.1875rem; }
|
||||
.d-arw { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; cursor: pointer; }
|
||||
.d-tier { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #EDEFF2; }
|
||||
.d-rp { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.25rem; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
@@ -37,10 +40,7 @@
|
||||
|
||||
<header style="display: flex; align-items: center; gap: 1.75rem; height: 72px; padding: 0 40px; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<div style="width: 32px; height: 32px; border-radius: 11px; background: #0866FF; display: flex; align-items: center; justify-content: center;">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg>
|
||||
</div>
|
||||
<span style="font-size: 1.25rem; font-weight: 700; letter-spacing: -0.035em;">서린즈</span>
|
||||
<svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
</div>
|
||||
|
||||
<nav style="display: flex; align-items: center; gap: 1.5rem; margin-left: 0.75rem; font-size: 0.9375rem;">
|
||||
@@ -67,7 +67,7 @@
|
||||
<div style="display: flex; align-items: center; gap: 0.875rem; width: 100%; max-width: 700px; height: 66px; margin-top: 1.625rem; padding: 0 0.5rem 0 1.375rem; background: #FFFFFF; border: 1px solid #E4E8ED; border-radius: 999px; box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04), 0 12px 32px rgba(20, 22, 26, 0.07);">
|
||||
<svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg>
|
||||
<span style="flex-grow: 1; font-size: 1.0625rem; color: #9BA1A9;">닉네임을 입력해 보세요</span>
|
||||
<button style="height: 50px; padding: 0 1.75rem; border: none; border-radius: 999px; background: #0866FF; font-family: inherit; font-size: 1rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.02em; cursor: pointer;">찾아보기</button>
|
||||
<button style="height: 50px; padding: 0 1.75rem; border: none; border-radius: 999px; background: #FF6A00; font-family: inherit; font-size: 1rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.02em; cursor: pointer;">찾아보기</button>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem;">
|
||||
@@ -217,70 +217,70 @@
|
||||
<div style="display: flex; align-items: center; gap: 0.25rem; margin-top: 0.625rem;">
|
||||
<span class="d-tab d-tab-on">솔로</span><span class="d-tab">파티</span><span class="d-tab">클랜</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">#</span><span></span><span class="d-th">유저</span>
|
||||
<span class="d-th" style="text-align: right;">RP</span>
|
||||
<span class="d-th" style="text-align: right;">등락</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4l2.3 4.9 5.4.7-3.9 3.8 1 5.3L12 16.2 7.2 18.7l1-5.3L4.3 9.6l5.4-.7z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">헤드샷장인</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,486</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">1</span></span>
|
||||
<span class="d-rp"><span class="d-tier"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span><span style="width: 42px; text-align: right; font-size: 0.875rem; font-weight: 600;">2,486</span></span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">달빛조각사</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,451</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">1</span></span>
|
||||
<span class="d-rp"><span class="d-tier"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span><span style="width: 42px; text-align: right; font-size: 0.875rem; font-weight: 600;">2,451</span></span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">삼보급단골</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,398</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">6</span></span>
|
||||
<span class="d-rp"><span class="d-tier"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span><span style="width: 42px; text-align: right; font-size: 0.875rem; font-weight: 600;">2,398</span></span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">6</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">4</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4l2.3 4.9 5.4.7-3.9 3.8 1 5.3L12 16.2 7.2 18.7l1-5.3L4.3 9.6l5.4-.7z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">칼든햄스터</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,344</span><span class="d-mv"><span style="width: 9px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
<span class="d-rp"><span class="d-tier"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span><span style="width: 42px; text-align: right; font-size: 0.875rem; font-weight: 600;">2,344</span></span><span class="d-mv"><span style="width: 9px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">5</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">웨어하우스지박령</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,301</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">2</span></span>
|
||||
<span class="d-rp"><span class="d-tier"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span><span style="width: 42px; text-align: right; font-size: 0.875rem; font-weight: 600;">2,301</span></span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">6</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">새벽두시</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,276</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">3</span></span>
|
||||
<span class="d-rp"><span class="d-tier"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span><span style="width: 42px; text-align: right; font-size: 0.875rem; font-weight: 600;">2,276</span></span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">3</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">7</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">조용한총잡이</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,240</span><span class="d-mv"><span style="width: 9px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
<span class="d-rp"><span class="d-tier"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span><span style="width: 42px; text-align: right; font-size: 0.875rem; font-weight: 600;">2,240</span></span><span class="d-mv"><span style="width: 9px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">8</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">한밤의저격수</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,205</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">4</span></span>
|
||||
<span class="d-rp"><span class="d-tier"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span><span style="width: 42px; text-align: right; font-size: 0.875rem; font-weight: 600;">2,205</span></span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">4</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">9</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">야간부대장</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,181</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">2</span></span>
|
||||
<span class="d-rp"><span class="d-tier"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span><span style="width: 42px; text-align: right; font-size: 0.875rem; font-weight: 600;">2,181</span></span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 48px 38px; align-items: center; gap: 0.5rem; height: 46px;">
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">10</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">무명연대장</span>
|
||||
<span style="text-align: right; font-size: 0.875rem; font-weight: 600;">2,154</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">1</span></span>
|
||||
<span class="d-rp"><span class="d-tier"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path><path d="M9 13.2l3-2.6 3 2.6"></path></svg></span><span style="width: 42px; text-align: right; font-size: 0.875rem; font-weight: 600;">2,154</span></span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">1</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -416,12 +416,12 @@
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem;"><span class="d-tab d-tab-on">공지사항</span><span class="d-tab">업데이트</span></div>
|
||||
<div style="margin-top: 0.75rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내</span><span style="font-size: 0.8125rem; color: #9BA1A9;">09.02</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">비매너 이용자 제재 결과</span><span style="font-size: 0.8125rem; color: #9BA1A9;">09.01</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">가을 시즌 랭크전 일정</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.29</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">신규 맵 컨테이너 야드 추가</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.28</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">AK-47 반동 수치 조정</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.26</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">클랜전 매칭 로직 개선</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.22</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;"><span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내</span><span class="d-new">신규</span></div><span style="font-size: 0.8125rem; color: #9BA1A9;">09.02</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;"><span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">비매너 이용자 제재 결과</span><span class="d-new">신규</span></div><span style="font-size: 0.8125rem; color: #9BA1A9;">09.01</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">가을 시즌 랭크전 일정</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.29</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">신규 맵 컨테이너 야드 추가</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.28</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">AK-47 반동 수치 조정</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.26</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">클랜전 매칭 로직 개선</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.22</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -432,12 +432,12 @@
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem;"><span class="d-tab d-tab-on">공지사항</span><span class="d-tab">업데이트</span></div>
|
||||
<div style="margin-top: 0.75rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">맵별 승률 통계를 열었어요</span><span style="font-size: 0.8125rem; color: #9BA1A9;">09.03</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; border-radius: 999px; background: #0866FF; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">전적 갱신이 두 배 빨라졌어요</span><span style="font-size: 0.8125rem; color: #9BA1A9;">09.01</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">즐겨찾기 알림 기능 추가</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.30</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">8월 서버 점검 결과 보고</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.27</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">커뮤니티 이용 규칙 정리</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.24</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span style="width: 6px; height: 6px; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">모바일 화면을 다듬었어요</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.20</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;"><span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">맵별 승률 통계를 열었어요</span><span class="d-new">신규</span></div><span style="font-size: 0.8125rem; color: #9BA1A9;">09.03</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;"><span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">전적 갱신이 두 배 빨라졌어요</span><span class="d-new">신규</span></div><span style="font-size: 0.8125rem; color: #9BA1A9;">09.01</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">즐겨찾기 알림 기능 추가</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.30</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">8월 서버 점검 결과 보고</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.27</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">커뮤니티 이용 규칙 정리</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.24</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">모바일 화면을 다듬었어요</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.20</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -0,0 +1,372 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 서린즈 홈 — 모바일 (390) · 한 열, 게임 랭킹은 갈래 세그먼트로 하나씩 */
|
||||
|
||||
body { margin: 0; }
|
||||
.d-root, .d-root * { box-sizing: border-box; }
|
||||
.d-root {
|
||||
font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
a { color: #C24A00; text-decoration: none; }
|
||||
a:hover { color: #A03C00; }
|
||||
.d-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
|
||||
.d-tab { display: inline-flex; align-items: center; height: 32px; padding: 0 0.8125rem; border-radius: 999px; background: #F5F6F8; font-size: 0.8125rem; font-weight: 500; color: #5B6169; }
|
||||
.d-tab-on { background: #14161A; font-weight: 600; color: #FFFFFF; }
|
||||
.d-more { font-size: 0.8125rem; font-weight: 600; color: #5B6169; }
|
||||
.d-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.d-mv { display: flex; align-items: center; justify-content: flex-end; gap: 0.1875rem; }
|
||||
.d-new { flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; color: #C24A00; letter-spacing: -0.01em; }
|
||||
.d-arw { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; }
|
||||
/* 갈래 선택 — 하위 탭(알약)과 구분되도록 밑줄형 세그먼트로 둔다 */
|
||||
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid #E4E8ED; }
|
||||
.seg > span { display: flex; align-items: center; justify-content: center; height: 46px; font-size: 0.9375rem; font-weight: 500; color: #9BA1A9; box-shadow: inset 0 -2px 0 transparent; }
|
||||
.seg > .on { font-weight: 700; color: #14161A; box-shadow: inset 0 -2px 0 #14161A; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="d-root" style="width: 390px; min-height: 4000px; background: #FFFFFF; color: #14161A;">
|
||||
|
||||
<header style="display: flex; align-items: center; gap: 0.625rem; height: 60px; padding: 0 20px 0 20px; border-bottom: 1px solid #EDEFF2;">
|
||||
<svg width="55" height="18" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -0.625rem;">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2" stroke-linecap="round"><path d="M4 7h16"></path><path d="M4 12h16"></path><path d="M4 17h16"></path></svg>
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<!-- 검색 히어로 — 메뉴는 서랍으로 접었지만 검색은 접지 않는다 -->
|
||||
<section style="background: #FAFBFC; border-bottom: 1px solid #EDEFF2; padding: 32px 20px 26px;">
|
||||
<h1 style="margin: 0; text-align: center; font-size: 1.625rem; line-height: 1.32; font-weight: 700; letter-spacing: -0.045em; text-wrap: balance;">누구의 전적이 궁금하세요?</h1>
|
||||
<p style="margin: 0.625rem 0 0; text-align: center; font-size: 0.875rem; line-height: 1.6; color: #5B6169; text-wrap: pretty;">닉네임만 알려주시면 최근 경기 흐름부터 자주 쓰는 무기까지 정리해 드릴게요.</p>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; height: 56px; margin-top: 1.25rem; padding: 0 0.375rem 0 0.875rem; background: #FFFFFF; border: 1px solid #E4E8ED; border-radius: 999px; box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04), 0 8px 22px rgba(20, 22, 26, 0.06);">
|
||||
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg>
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; color: #9BA1A9;">닉네임을 입력해 보세요</span>
|
||||
<button style="height: 44px; padding: 0 1.125rem; border: none; border-radius: 999px; background: #FF6A00; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.02em; cursor: pointer;">찾아보기</button>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 1rem;">
|
||||
<div style="font-size: 0.8125rem; color: #9BA1A9;">최근에 찾아봤어요</div>
|
||||
<!-- 칩은 가로로 넘치면 옆으로 밀어 본다 -->
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.5rem; overflow-x: auto;">
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.4375rem; flex-shrink: 0; height: 36px; padding: 0 0.75rem 0 0.3125rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.8125rem; font-weight: 600;"><span style="width: 24px; height: 24px; border-radius: 999px; background: #DDE4EE;"></span>달빛조각사</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.4375rem; flex-shrink: 0; height: 36px; padding: 0 0.75rem 0 0.3125rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.8125rem; font-weight: 600;"><span style="width: 24px; height: 24px; border-radius: 999px; background: #E5E0F0;"></span>칼든햄스터</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.4375rem; flex-shrink: 0; height: 36px; padding: 0 0.75rem 0 0.3125rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.8125rem; font-weight: 600;"><span style="width: 24px; height: 24px; border-radius: 999px; background: #E7E3D8;"></span>새벽두시</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.4375rem; flex-shrink: 0; height: 36px; padding: 0 0.75rem 0 0.3125rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.8125rem; font-weight: 600;"><span style="width: 24px; height: 24px; border-radius: 999px; background: #D8E6E2;"></span>무명연대장</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 2rem; padding: 24px 20px 40px;">
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">이벤트</h2>
|
||||
<div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
<div style="border: 1px solid #EDEFF2; border-radius: 16px; overflow: hidden;">
|
||||
<img src="20260903074208.jpg" alt="서든 페스티벌 같이 갈래?" style="display: block; width: 100%; aspect-ratio: 720 / 248; object-fit: cover;">
|
||||
</div>
|
||||
<!-- 화살표 대신 옆으로 밀어 넘긴다 -->
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem;">
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 600;">서든 페스티벌 같이 갈래?</span>
|
||||
<span style="width: 16px; height: 4px; border-radius: 999px; background: #14161A;"></span>
|
||||
<span style="width: 4px; height: 4px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 4px; height: 4px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 4px; height: 4px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 4px; height: 4px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: #9BA1A9;">시즌 이벤트</span>
|
||||
<span style="width: 1px; height: 10px; background: #E4E8ED;"></span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">9월 1일 ~ 9월 30일</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">검색 랭킹</h2>
|
||||
<div style="flex-grow: 1;"></div><span style="font-size: 0.8125rem; color: #9BA1A9;">18:20 기준</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 34px; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">순위</span><span class="d-th">닉네임</span><span class="d-th" style="text-align: right;">변동</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">달빛조각사</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">칼든햄스터</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">새벽두시</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">4</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">4</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">무명연대장</span><span class="d-mv"><span style="font-size: 0.8125rem; color: #C9CDD3;">–</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">5</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">한밤의저격수</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">6</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">조용한총잡이</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">3</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">7</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">야간부대장</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">8</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">헤드샷장인</span><span class="d-mv"><span style="font-size: 0.8125rem; color: #C9CDD3;">–</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 48px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">9</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">삼보급단골</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">2</span></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">게임 랭킹</h2>
|
||||
<div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
<div class="seg">
|
||||
<span class="on">계급</span><span>랭크전</span><span>클랜</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.875rem;">
|
||||
<span class="d-tab d-tab-on">통합</span><span class="d-tab">시즌</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">매일 오전 8시 갱신</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 34px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">#</span><span></span><span class="d-th">유저</span><span class="d-th" style="text-align: right;">등락</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 52px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">달빛조각사</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 52px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><svg width="14" height="14" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4l2.3 4.9 5.4.7-3.9 3.8 1 5.3L12 16.2 7.2 18.7l1-5.3L4.3 9.6l5.4-.7z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">칼든햄스터</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 52px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">새벽두시</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">4</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 52px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">4</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">무명연대장</span><span class="d-mv"><span style="font-size: 0.8125rem; color: #C9CDD3;">–</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 52px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">5</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><svg width="14" height="14" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4l2.3 4.9 5.4.7-3.9 3.8 1 5.3L12 16.2 7.2 18.7l1-5.3L4.3 9.6l5.4-.7z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">한밤의저격수</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 52px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">6</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">조용한총잡이</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">3</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 52px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">7</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">야간부대장</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 52px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">8</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><svg width="14" height="14" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4l2.3 4.9 5.4.7-3.9 3.8 1 5.3L12 16.2 7.2 18.7l1-5.3L4.3 9.6l5.4-.7z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">헤드샷장인</span><span class="d-mv"><span style="font-size: 0.8125rem; color: #C9CDD3;">–</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 52px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">9</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">삼보급단골</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 52px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">10</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">웨어하우스지박령</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">5</span></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.25rem;">
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">1 ~ 10위 · 전체 100위</span>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<span class="d-arw" style="width: 44px; height: 44px; opacity: 0.4;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 5l-7 7 7 7"></path></svg></span>
|
||||
<span class="d-arw" style="width: 44px; height: 44px;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 5l7 7-7 7"></path></svg></span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">커뮤니티</h2>
|
||||
<div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem;"><span class="d-tab d-tab-on">인기</span><span class="d-tab">최신</span><span class="d-tab">클립</span></div>
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; margin-top: 0.875rem;">
|
||||
<div style="position: relative; aspect-ratio: 1 / 1; border-radius: 16px; background: #E4E8ED; overflow: hidden;">
|
||||
<div style="position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.375rem; height: 38px; padding: 0 0.625rem; background: rgba(20, 22, 26, 0.5);"><span style="width: 18px; height: 18px; border-radius: 999px; background: #C9D2DD; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.6875rem; font-weight: 600; color: #FFFFFF;">달빛조각사</span><span style="font-size: 0.6875rem; font-weight: 600; color: #FFFFFF;">312</span></div>
|
||||
</div>
|
||||
<div style="position: relative; aspect-ratio: 1 / 1; border-radius: 16px; background: #EAE6E0; overflow: hidden;">
|
||||
<div style="position: absolute; top: 8px; right: 8px;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="3" width="13" height="13" rx="3"></rect><path d="M16 19.5A2.5 2.5 0 0113.5 22H6a3 3 0 01-3-3V9.5"></path></svg></div>
|
||||
<div style="position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.375rem; height: 38px; padding: 0 0.625rem; background: rgba(20, 22, 26, 0.5);"><span style="width: 18px; height: 18px; border-radius: 999px; background: #D8D2C8; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.6875rem; font-weight: 600; color: #FFFFFF;">칼든햄스터</span><span style="font-size: 0.6875rem; font-weight: 600; color: #FFFFFF;">274</span></div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; aspect-ratio: 1 / 1; padding: 14px; border-radius: 16px; background: #F5F6F8;">
|
||||
<p style="margin: 0; font-size: 0.8125rem; line-height: 1.55; font-weight: 500;">폭파 삼보급 A 롱각, 다들 어디 서세요?</p>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem;">
|
||||
<span style="width: 18px; height: 18px; border-radius: 999px; background: #DDE4EE; flex-shrink: 0;"></span>
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.6875rem; font-weight: 600;">새벽두시</span>
|
||||
<span style="font-size: 0.6875rem; font-weight: 600; color: #5B6169;">198</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: relative; aspect-ratio: 1 / 1; border-radius: 16px; background: #E8E4EC; overflow: hidden;">
|
||||
<div style="position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: rgba(20, 22, 26, 0.55);">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M8 5.5l11 6.5-11 6.5z"></path></svg>
|
||||
</div>
|
||||
<div style="position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.375rem; height: 38px; padding: 0 0.625rem; background: rgba(20, 22, 26, 0.5);"><span style="width: 18px; height: 18px; border-radius: 999px; background: #D5CEDC; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.6875rem; font-weight: 600; color: #FFFFFF;">무명연대장</span><span style="font-size: 0.6875rem; font-weight: 600; color: #FFFFFF;">163</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">서든어택 소식</h2>
|
||||
<div style="flex-grow: 1;"></div><span class="d-more">더 보기</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem;"><span class="d-tab d-tab-on">공지사항</span><span class="d-tab">업데이트</span></div>
|
||||
<div style="margin-top: 0.75rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 50px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내</span><span class="d-new">신규</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.02</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 50px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">비매너 이용자 제재 결과</span><span class="d-new">신규</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.01</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 50px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">가을 시즌 랭크전 일정</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.29</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 50px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">신규 맵 컨테이너 야드 추가</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.28</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 50px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">AK-47 반동 수치 조정</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.26</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 50px;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">클랜전 매칭 로직 개선</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.22</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">서린즈 소식</h2>
|
||||
<div style="flex-grow: 1;"></div><span class="d-more">더 보기</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem;"><span class="d-tab d-tab-on">공지사항</span><span class="d-tab">업데이트</span></div>
|
||||
<div style="margin-top: 0.75rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 50px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">맵별 승률 통계를 열었어요</span><span class="d-new">신규</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.03</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 50px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">전적 갱신이 두 배 빨라졌어요</span><span class="d-new">신규</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.01</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 50px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">즐겨찾기 알림 기능 추가</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.30</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 50px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">8월 서버 점검 결과 보고</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.27</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 50px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">커뮤니티 이용 규칙 정리</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.24</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 50px;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">모바일 화면을 다듬었어요</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.20</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">지금 방송 중</h2>
|
||||
<div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
<div>
|
||||
<div style="aspect-ratio: 16 / 9; border-radius: 14px; background: #E4E8ED;"></div>
|
||||
<div class="d-clip" style="font-size: 0.9375rem; font-weight: 600; margin-top: 0.75rem;">삼보급 스나 연습</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem; margin-top: 0.3125rem;"><span style="width: 20px; height: 20px; border-radius: 999px; background: #DDE4EE; flex-shrink: 0;"></span><span style="font-size: 0.8125rem; color: #9BA1A9;">달빛조각사 · 1,204명</span></div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<div style="width: 104px; height: 60px; border-radius: 12px; background: #EAE6E0; flex-shrink: 0;"></div>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div class="d-clip" style="font-size: 0.875rem; font-weight: 600;">클랜전 정기 리그 중계</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem;"><span style="width: 18px; height: 18px; border-radius: 999px; background: #D8E6E2; flex-shrink: 0;"></span><span class="d-clip" style="font-size: 0.75rem; color: #9BA1A9;">무명연대 · 862명</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<div style="width: 104px; height: 60px; border-radius: 12px; background: #E2E9E6; flex-shrink: 0;"></div>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div class="d-clip" style="font-size: 0.875rem; font-weight: 600;">초보 탈출 폭파미션 강의</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem;"><span style="width: 18px; height: 18px; border-radius: 999px; background: #E7E3D8; flex-shrink: 0;"></span><span class="d-clip" style="font-size: 0.75rem; color: #9BA1A9;">새벽두시 · 517명</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<div style="width: 104px; height: 60px; border-radius: 12px; background: #E8E4EC; flex-shrink: 0;"></div>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div class="d-clip" style="font-size: 0.875rem; font-weight: 600;">시청자 참여 한 판</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem;"><span style="width: 18px; height: 18px; border-radius: 999px; background: #E5E0F0; flex-shrink: 0;"></span><span class="d-clip" style="font-size: 0.75rem; color: #9BA1A9;">한밤의저격수 · 341명</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,256 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 서린즈 — 헤더 검색 (C안). 아이콘을 눌러 검색 시트를 연다 */
|
||||
|
||||
body { margin: 0; }
|
||||
.d-root, .d-root * { box-sizing: border-box; }
|
||||
.d-root {
|
||||
font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
a { color: #C24A00; text-decoration: none; }
|
||||
a:hover { color: #A03C00; }
|
||||
.d-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
|
||||
.d-tab { display: inline-flex; align-items: center; height: 32px; padding: 0 0.8125rem; border-radius: 999px; background: #F5F6F8; font-size: 0.8125rem; font-weight: 500; color: #5B6169; }
|
||||
.d-tab-on { background: #14161A; font-weight: 600; color: #FFFFFF; }
|
||||
.d-more { font-size: 0.8125rem; font-weight: 600; color: #5B6169; }
|
||||
.d-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.d-mv { display: flex; align-items: center; justify-content: flex-end; gap: 0.1875rem; }
|
||||
.d-new { flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; color: #C24A00; letter-spacing: -0.01em; }
|
||||
.d-arw { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; }
|
||||
/* 갈래 선택 — 하위 탭(알약)과 구분되도록 밑줄형 세그먼트로 둔다 */
|
||||
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid #E4E8ED; }
|
||||
.seg > span { display: flex; align-items: center; justify-content: center; height: 46px; font-size: 0.9375rem; font-weight: 500; color: #9BA1A9; box-shadow: inset 0 -2px 0 transparent; }
|
||||
.seg > .on { font-weight: 700; color: #14161A; box-shadow: inset 0 -2px 0 #14161A; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="d-root" style="width: 1440px; min-height: 2200px; padding: 48px; background: #FFFFFF; color: #14161A;">
|
||||
|
||||
<h1 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">헤더 검색 — 아이콘과 검색 시트</h1>
|
||||
<p style="margin: 0.625rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: #5B6169; max-width: 68rem;">히어로 검색창이 화면 밖으로 나가면 헤더에 돋보기 아이콘이 나타납니다. 누르면 검색 시트가 열립니다. 데스크톱·태블릿·모바일 모두 같은 방식이고, 폭에 따라 시트의 크기만 다릅니다.</p>
|
||||
|
||||
<div style="margin-top: 1.75rem;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.75rem;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700;">데스크톱 헤더</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">위 — 맨 위에 있을 때 · 아래 — 히어로가 화면 밖으로 나간 뒤</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem; border: 1px solid #E4E8ED; border-radius: 16px; overflow: hidden; padding: 0;">
|
||||
|
||||
<header style="display: flex; align-items: center; gap: 1.75rem; height: 72px; padding: 0 40px; background: #FFFFFF; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
</div>
|
||||
|
||||
<nav style="display: flex; align-items: center; gap: 1.5rem; margin-left: 0.75rem; font-size: 0.9375rem;">
|
||||
<span style="font-weight: 700;">홈</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">전적 검색</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">랭킹</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">커뮤니티</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">스트리밍</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">소식</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">이벤트</span>
|
||||
</nav>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<button style="height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #F2F4F7; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">로그인</button>
|
||||
</header>
|
||||
|
||||
<header style="display: flex; align-items: center; gap: 1.75rem; height: 72px; padding: 0 40px; background: #FFFFFF; border-bottom: 1px solid #EDEFF2; box-shadow: 0 6px 18px rgba(20, 22, 26, 0.06);">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
</div>
|
||||
|
||||
<nav style="display: flex; align-items: center; gap: 1.5rem; margin-left: 0.75rem; font-size: 0.9375rem;">
|
||||
<span style="font-weight: 700;">홈</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">전적 검색</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">랭킹</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">커뮤니티</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">스트리밍</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">소식</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">이벤트</span>
|
||||
</nav>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: #F2F4F7;"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg></span>
|
||||
<button style="height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #F2F4F7; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">로그인</button>
|
||||
</header>
|
||||
</div>
|
||||
<p style="margin: 0.75rem 0 0; font-size: 0.8125rem; line-height: 1.65; color: #7A828C; max-width: 60rem;">헤더는 스크롤해도 위에 붙어 있습니다. 아이콘은 처음부터 두지 않고 히어로가 벗어난 뒤에 나타납니다 — 맨 위에서는 바로 아래 큰 검색창이 있어 같은 것이 둘이 되기 때문입니다. 나타날 때 헤더에 옅은 그림자가 함께 생겨 페이지가 스크롤된 상태임을 알려 줍니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 2.25rem;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.75rem;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700;">데스크톱 검색 시트</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">아이콘을 누른 뒤 · 640px 카드</span>
|
||||
</div>
|
||||
|
||||
<div style="position: relative; height: 560px; border-radius: 20px; background: #F5F6F8; overflow: hidden;">
|
||||
<div style="position: absolute; inset: 0; background: rgba(20, 22, 26, 0.45);"></div>
|
||||
<div style="position: absolute; left: 50%; top: 56px; transform: translateX(-50%); width: 640px; border-radius: 20px; background: #FFFFFF; box-shadow: 0 24px 60px rgba(20, 22, 26, 0.28); overflow: hidden;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 64px; padding: 0 1.25rem; border-bottom: 1px solid #EDEFF2;"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg>
|
||||
<span style="flex-grow: 1; font-size: 1.0625rem; color: #9BA1A9;">닉네임을 입력해 보세요</span>
|
||||
<span style="display: inline-flex; align-items: center; height: 24px; padding: 0 0.4375rem; border: 1px solid #E4E8ED; border-radius: 6px; font-size: 0.6875rem; font-weight: 600; color: #9BA1A9;">ESC</span>
|
||||
</div>
|
||||
<div style="padding: 0.25rem 1.25rem 1.125rem;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: #9BA1A9; margin: 0.875rem 0 0.25rem;">최근에 찾아봤어요</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px;">
|
||||
<span style="width: 26px; height: 26px; border-radius: 999px; background: #DDE4EE; flex-shrink: 0;"></span>
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 500;">달빛조각사</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 0;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12"></path><path d="M18 6L6 18"></path></svg></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px;">
|
||||
<span style="width: 26px; height: 26px; border-radius: 999px; background: #E5E0F0; flex-shrink: 0;"></span>
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 500;">칼든햄스터</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 0;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12"></path><path d="M18 6L6 18"></path></svg></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px;">
|
||||
<span style="width: 26px; height: 26px; border-radius: 999px; background: #E7E3D8; flex-shrink: 0;"></span>
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 500;">새벽두시</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 0;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12"></path><path d="M18 6L6 18"></path></svg></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px;">
|
||||
<span style="width: 26px; height: 26px; border-radius: 999px; background: #D8E6E2; flex-shrink: 0;"></span>
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 500;">무명연대장</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 0;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12"></path><path d="M18 6L6 18"></path></svg></span>
|
||||
</div>
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: #9BA1A9; margin: 0.875rem 0 0.25rem;">지금 많이 찾는</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 44px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">달빛조각사</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 44px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">칼든햄스터</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 44px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">새벽두시</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">4</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 44px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">4</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">무명연대장</span><span class="d-mv"><span style="font-size: 0.8125rem; color: #C9CDD3;">–</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 44px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">5</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">한밤의저격수</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">1</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0.75rem 0 0; font-size: 0.8125rem; line-height: 1.65; color: #7A828C; max-width: 60rem;">입력칸은 열리자마자 바로 칠 수 있는 상태입니다. 아직 아무것도 안 쳤을 때는 최근 검색과 「지금 많이 찾는」 다섯을 보여줍니다 — 홈의 검색 랭킹과 같은 데이터라 새로 만들 것이 없고, 빈 시트를 마주하지 않게 합니다. ESC 나 바깥을 누르면 닫힙니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 2.25rem;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.75rem;">
|
||||
<span style="font-size: 0.9375rem; font-weight: 700;">모바일</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">헤더 두 상태와 전체 화면 시트</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: flex-start; gap: 2.5rem;">
|
||||
<div style="display: flex; flex-direction: column; gap: 1.25rem;">
|
||||
<div style="border: 1px solid #E4E8ED; border-radius: 14px; overflow: hidden;">
|
||||
|
||||
<header style="display: flex; align-items: center; gap: 0.5rem; width: 390px; height: 60px; padding: 0 20px; background: #FFFFFF; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<svg width="55" height="18" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
</div>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -0.625rem;"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2" stroke-linecap="round"><path d="M4 7h16"></path><path d="M4 12h16"></path><path d="M4 17h16"></path></svg></span>
|
||||
</header>
|
||||
</div>
|
||||
<div style="border: 1px solid #E4E8ED; border-radius: 14px; overflow: hidden;">
|
||||
|
||||
<header style="display: flex; align-items: center; gap: 0.5rem; width: 390px; height: 60px; padding: 0 20px; background: #FFFFFF; border-bottom: 1px solid #EDEFF2; box-shadow: 0 6px 18px rgba(20, 22, 26, 0.06);">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<svg width="55" height="18" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
</div>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg></span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -0.625rem;"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2" stroke-linecap="round"><path d="M4 7h16"></path><path d="M4 12h16"></path><path d="M4 17h16"></path></svg></span>
|
||||
</header>
|
||||
</div>
|
||||
<p style="margin: 0; width: 390px; font-size: 0.8125rem; line-height: 1.65; color: #7A828C;">모바일 헤더에는 입력칸을 넣지 않았습니다. 390px 안에 로고·햄버거가 이미 있어 셋 다 옹색해지고, 어차피 눌러야 키보드가 올라오기 때문입니다. 아이콘과 햄버거 모두 44px 입니다.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<div style="width: 390px; height: 844px; background: #FFFFFF; border: 1px solid #EDEFF2; border-radius: 18px; overflow: hidden;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 60px; padding: 0 0.75rem 0 1rem; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; flex-grow: 1; min-width: 0; height: 42px; padding: 0 0.875rem; border-radius: 999px; background: #F2F4F7;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg>
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; color: #9BA1A9;">닉네임을 입력해 보세요</span>
|
||||
</div>
|
||||
<span style="flex-shrink: 0; padding: 0 0.375rem; font-size: 0.9375rem; font-weight: 600; color: #5B6169;">취소</span>
|
||||
</div>
|
||||
<div style="padding: 0.25rem 1.25rem 1.125rem;">
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: #9BA1A9; margin: 0.875rem 0 0.25rem;">최근에 찾아봤어요</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 48px;">
|
||||
<span style="width: 26px; height: 26px; border-radius: 999px; background: #DDE4EE; flex-shrink: 0;"></span>
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 500;">달빛조각사</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -0.5rem;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12"></path><path d="M18 6L6 18"></path></svg></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 48px;">
|
||||
<span style="width: 26px; height: 26px; border-radius: 999px; background: #E5E0F0; flex-shrink: 0;"></span>
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 500;">칼든햄스터</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -0.5rem;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12"></path><path d="M18 6L6 18"></path></svg></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 48px;">
|
||||
<span style="width: 26px; height: 26px; border-radius: 999px; background: #E7E3D8; flex-shrink: 0;"></span>
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 500;">새벽두시</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -0.5rem;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12"></path><path d="M18 6L6 18"></path></svg></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 48px;">
|
||||
<span style="width: 26px; height: 26px; border-radius: 999px; background: #D8E6E2; flex-shrink: 0;"></span>
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 500;">무명연대장</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -0.5rem;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12"></path><path d="M18 6L6 18"></path></svg></span>
|
||||
</div>
|
||||
<div style="font-size: 0.75rem; font-weight: 600; color: #9BA1A9; margin: 0.875rem 0 0.25rem;">지금 많이 찾는</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 48px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">달빛조각사</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 48px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">칼든햄스터</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 48px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">새벽두시</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">4</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 48px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">4</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">무명연대장</span><span class="d-mv"><span style="font-size: 0.8125rem; color: #C9CDD3;">–</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px; align-items: center; gap: 0.625rem; height: 48px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">5</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">한밤의저격수</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">1</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div style="font-size: 0.9375rem; font-weight: 700;">시트에서 정한 것</div>
|
||||
<ul style="margin: 0.625rem 0 0; padding-left: 1.0625rem;">
|
||||
<li style="margin-top: 0.4375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">모바일은 전체 화면입니다. 반쯤 덮는 시트로 만들면 키보드가 올라왔을 때 남는 높이가 너무 작습니다.</li>
|
||||
<li style="margin-top: 0.4375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">가짜 키보드는 그리지 않았습니다. 실제 기기에서는 아래쪽에 진짜 키보드가 올라와 목록을 가립니다 — 그래서 최근 검색을 위쪽에 뒀습니다.</li>
|
||||
<li style="margin-top: 0.4375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">닫기는 데스크톱 ESC · 바깥 누르기, 모바일 「취소」 입니다. 뒤로 가기로도 닫히게 하는 편이 좋습니다.</li>
|
||||
<li style="margin-top: 0.4375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">최근 검색 줄의 X 는 그 기록만 지웁니다. 모바일에서는 44px 로 키웠습니다.</li>
|
||||
<li style="margin-top: 0.4375rem; font-size: 0.8125rem; line-height: 1.65; color: #5B6169;">글자를 치기 시작하면 이 두 목록 자리에 자동완성 결과가 들어옵니다. 그 화면은 아직 그리지 않았습니다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,457 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 서린즈 홈 — 섹션마다 상태가 다른 한 순간. 완료 · 로딩 · 실패 · 비어 있음 */
|
||||
body { margin: 0; }
|
||||
.d-root, .d-root * { box-sizing: border-box; }
|
||||
.d-root {
|
||||
font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
a { color: #C24A00; text-decoration: none; }
|
||||
a:hover { color: #A03C00; }
|
||||
.d-h2 { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em; }
|
||||
.d-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
|
||||
.d-tab { display: inline-flex; align-items: center; height: 30px; padding: 0 0.8125rem; border-radius: 999px; background: #F5F6F8; font-size: 0.8125rem; font-weight: 500; color: #5B6169; }
|
||||
.d-tab-on { background: #14161A; font-weight: 600; color: #FFFFFF; }
|
||||
.d-more { font-size: 0.8125rem; font-weight: 600; color: #5B6169; }
|
||||
.d-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.d-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #F0F2F5; }
|
||||
.d-mv { display: flex; align-items: center; justify-content: flex-end; gap: 0.1875rem; }
|
||||
.an { display: inline-flex; align-items: center; height: 20px; margin-left: 0.5rem; padding: 0 0.4375rem; border: 1px dashed #C9CDD3; border-radius: 5px; font-size: 0.6875rem; font-weight: 600; color: #7A828C; letter-spacing: -0.01em; }
|
||||
.d-arw { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; }
|
||||
|
||||
/* 스켈레톤 — 한 덩어리(.s)로 통일하고 크기·라운드만 자리마다 다르게 준다 */
|
||||
.s { display: block; position: relative; overflow: hidden; background: #EDEFF2; }
|
||||
.s::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform: translateX(-100%);
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
|
||||
animation: s-sweep 1.6s ease-in-out infinite;
|
||||
}
|
||||
@keyframes s-sweep { to { transform: translateX(100%); } }
|
||||
/* 움직임을 줄이도록 설정한 기기에서는 쓸어가는 효과를 끈다 */
|
||||
@media (prefers-reduced-motion: reduce) { .s::after { animation: none; } }
|
||||
|
||||
/* 실패 · 비어 있음 — 섹션 본문 자리를 그대로 채워 레이아웃이 튀지 않게 한다 */
|
||||
.st { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.5rem; border: 1px solid #EDEFF2; border-radius: 16px; background: #FAFBFC; text-align: center; }
|
||||
.st-t { margin: 0; font-size: 0.875rem; line-height: 1.6; color: #5B6169; max-width: 20rem; }
|
||||
.st-s { margin: 0; font-size: 0.8125rem; line-height: 1.6; color: #9BA1A9; }
|
||||
.st-b { display: inline-flex; align-items: center; height: 36px; padding: 0 1rem; border: 1px solid #D6DAE0; border-radius: 999px; background: #FFFFFF; font-family: inherit; font-size: 0.8125rem; font-weight: 600; color: #14161A; cursor: pointer; }
|
||||
.st-l { font-size: 0.8125rem; font-weight: 600; color: #C24A00; }
|
||||
.st-i { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: #F2F4F7; }
|
||||
.d-tier { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #EDEFF2; }
|
||||
.d-rp { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.25rem; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="d-root" style="width: 1440px; min-height: 2420px; background: #FFFFFF; color: #14161A;">
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 52px; padding: 0 40px; background: #14161A;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 700; color: #FFFFFF;">보기용 조합</span>
|
||||
<span style="font-size: 0.8125rem; line-height: 1.5; color: rgba(255, 255, 255, 0.72);">네 가지 상태를 한 화면에 담으려고 섹션마다 다른 상태를 하나씩 넣었습니다. 섹션과 상태는 정해진 짝이 아니며, 어느 섹션이든 네 상태를 모두 가집니다. 이 띠와 점선 라벨은 실제 화면에 없습니다.</span>
|
||||
</div>
|
||||
|
||||
<header style="display: flex; align-items: center; gap: 1.75rem; height: 72px; padding: 0 40px; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
</div>
|
||||
|
||||
<nav style="display: flex; align-items: center; gap: 1.5rem; margin-left: 0.75rem; font-size: 0.9375rem;">
|
||||
<span style="font-weight: 700;">홈</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">전적 검색</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">랭킹</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">커뮤니티</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">스트리밍</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">소식</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">이벤트</span>
|
||||
</nav>
|
||||
|
||||
<div style="flex-grow: 1;"></div>
|
||||
|
||||
<button style="height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #F2F4F7; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">로그인</button>
|
||||
</header>
|
||||
|
||||
<section style="background: #FAFBFC; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; flex-direction: column; align-items: center; padding: 52px 40px 46px;">
|
||||
<h1 style="margin: 0; text-align: center; font-size: 2.125rem; line-height: 1.28; font-weight: 700; letter-spacing: -0.045em;">누구의 전적이 궁금하세요?</h1>
|
||||
<p style="margin: 0.75rem 0 0; text-align: center; font-size: 0.9375rem; line-height: 1.65; color: #5B6169;">닉네임만 알려주시면 최근 경기 흐름부터 자주 쓰는 무기까지 정리해 드릴게요.</p>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.875rem; width: 100%; max-width: 700px; height: 66px; margin-top: 1.625rem; padding: 0 0.5rem 0 1.375rem; background: #FFFFFF; border: 1px solid #E4E8ED; border-radius: 999px; box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04), 0 12px 32px rgba(20, 22, 26, 0.07);">
|
||||
<svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg>
|
||||
<span style="flex-grow: 1; font-size: 1.0625rem; color: #9BA1A9;">닉네임을 입력해 보세요</span>
|
||||
<button style="height: 50px; padding: 0 1.75rem; border: none; border-radius: 999px; background: #FF6A00; font-family: inherit; font-size: 1rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.02em; cursor: pointer;">찾아보기</button>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem;">
|
||||
<span style="font-size: 0.875rem; color: #9BA1A9; margin-right: 0.25rem;">최근에 찾아봤어요</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.5rem; height: 36px; padding: 0 0.875rem 0 0.375rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.875rem; font-weight: 600;"><span style="width: 24px; height: 24px; border-radius: 999px; background: #DDE4EE;"></span>달빛조각사</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.5rem; height: 36px; padding: 0 0.875rem 0 0.375rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.875rem; font-weight: 600;"><span style="width: 24px; height: 24px; border-radius: 999px; background: #E5E0F0;"></span>칼든햄스터</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.5rem; height: 36px; padding: 0 0.875rem 0 0.375rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.875rem; font-weight: 600;"><span style="width: 24px; height: 24px; border-radius: 999px; background: #E7E3D8;"></span>새벽두시</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.5rem; height: 36px; padding: 0 0.875rem 0 0.375rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.875rem; font-weight: 600;"><span style="width: 24px; height: 24px; border-radius: 999px; background: #D8E6E2;"></span>무명연대장</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 균등 3열 그리드 -->
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; padding: 36px 40px 56px;">
|
||||
|
||||
<!-- 이벤트 슬라이드 (2칸) -->
|
||||
<section style="grid-column: span 2;">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">이벤트</h2><span class="an">완료</span><div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
<!-- 가로형 배너(720:248) 그대로 + 아래 한 줄 설명 -->
|
||||
<div style="border: 1px solid #EDEFF2; border-radius: 24px; overflow: hidden;">
|
||||
<img src="20260903074208.jpg" alt="서든 페스티벌 같이 갈래?" style="display: block; width: 100%; aspect-ratio: 720 / 248; object-fit: cover;">
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; height: 56px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">시즌 이벤트</span>
|
||||
<span style="width: 1px; height: 12px; background: #E4E8ED;"></span>
|
||||
<span class="d-clip" style="font-size: 1rem; font-weight: 600;">서든 페스티벌 같이 갈래?</span>
|
||||
<span style="font-size: 0.875rem; color: #9BA1A9; white-space: nowrap;">9월 1일 ~ 9월 30일</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="width: 22px; height: 5px; border-radius: 999px; background: #14161A;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9; margin: 0 0.25rem 0 0.5rem;">1 / 5</span>
|
||||
<span class="d-arw"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 5l-7 7 7 7"></path></svg></span>
|
||||
<span class="d-arw"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 5l7 7-7 7"></path></svg></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 검색 랭킹 · 로딩 -->
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">검색 랭킹</h2><span class="an">로딩</span><div style="flex-grow: 1;"></div><span class="s" style="width: 68px; height: 11px; border-radius: 5px;"></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 34px; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">순위</span><span class="d-th">닉네임</span><span class="d-th" style="text-align: right;">변동</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span>
|
||||
<span class="s" style="width: 72%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<span class="s" style="width: 58%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span>
|
||||
<span class="s" style="width: 80%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">4</span>
|
||||
<span class="s" style="width: 64%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">5</span>
|
||||
<span class="s" style="width: 76%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">6</span>
|
||||
<span class="s" style="width: 54%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">7</span>
|
||||
<span class="s" style="width: 68%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">8</span>
|
||||
<span class="s" style="width: 84%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 42px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">9</span>
|
||||
<span class="s" style="width: 60%; height: 12px; border-radius: 5px;"></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 26px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 게임 랭킹 (2칸) — 계급 / 랭크전 / 클랜 세 갈래를 나란히 -->
|
||||
<section style="grid-column: span 2;">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">게임 랭킹</h2><span class="an">열마다 다름</span>
|
||||
<span style="margin-left: 0.75rem; font-size: 0.8125rem; color: #9BA1A9;">매일 오전 8시 갱신</span>
|
||||
<div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem;">
|
||||
<!-- 계급 랭킹 -->
|
||||
<div>
|
||||
<div style="display: flex; align-items: center;"><span style="font-size: 0.9375rem; font-weight: 700;">계급 랭킹</span><span class="an">완료</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.25rem; margin-top: 0.625rem;">
|
||||
<span class="d-tab d-tab-on">통합</span><span class="d-tab">시즌</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">#</span><span></span><span class="d-th">유저</span>
|
||||
<span class="d-th" style="text-align: right;">등락</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">달빛조각사</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4l2.3 4.9 5.4.7-3.9 3.8 1 5.3L12 16.2 7.2 18.7l1-5.3L4.3 9.6l5.4-.7z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">칼든햄스터</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">새벽두시</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">4</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">4</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">무명연대장</span>
|
||||
<span class="d-mv"><span style="width: 9px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">5</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">한밤의저격수</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">3</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">6</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">조용한총잡이</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">7</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">야간부대장</span>
|
||||
<span class="d-mv"><span style="width: 9px; height: 1px; background: #C9CDD3;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">8</span>
|
||||
<span class="d-badge"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">헤드샷장인</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">5</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">9</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">삼보급단골</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.75rem; color: #C4453D;">3</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 46px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #9BA1A9;">10</span>
|
||||
<span class="d-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4l2.3 4.9 5.4.7-3.9 3.8 1 5.3L12 16.2 7.2 18.7l1-5.3L4.3 9.6l5.4-.7z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">웨어하우스지박령</span>
|
||||
<span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.75rem; color: #12805C;">1</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 랭크전 랭킹 · 로딩 -->
|
||||
<div>
|
||||
<div style="display: flex; align-items: center;"><span style="font-size: 0.9375rem; font-weight: 700;">랭크전 랭킹</span><span class="an">로딩</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.25rem; margin-top: 0.625rem;">
|
||||
<span class="d-tab d-tab-on">솔로</span><span class="d-tab">파티</span><span class="d-tab">클랜</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">#</span><span></span><span class="d-th">유저</span>
|
||||
<span class="d-th" style="text-align: right;">RP</span>
|
||||
<span class="d-th" style="text-align: right;">등락</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 72%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 58%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 80%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">4</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 64%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">5</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 76%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">6</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 54%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">7</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 68%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">8</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 84%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">9</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 60%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 72px 34px; align-items: center; gap: 0.5rem; height: 46px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">10</span>
|
||||
<span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span>
|
||||
<span class="s" style="width: 74%; height: 12px; border-radius: 5px;"></span>
|
||||
<span class="d-rp"><span class="s" style="width: 26px; height: 26px; border-radius: 8px;"></span><span style="display: flex; width: 42px; justify-content: flex-end;"><span class="s" style="width: 34px; height: 11px; border-radius: 5px;"></span></span></span>
|
||||
<span style="display: flex; justify-content: flex-end;"><span class="s" style="width: 22px; height: 11px; border-radius: 5px;"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 클랜 랭킹 · 실패 -->
|
||||
<div>
|
||||
<div style="display: flex; align-items: center;"><span style="font-size: 0.9375rem; font-weight: 700;">클랜 랭킹</span><span class="an">실패</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.25rem; margin-top: 0.625rem;">
|
||||
<span class="d-tab d-tab-on">공식</span><span class="d-tab">일반</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 38px; align-items: center; gap: 0.5rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">#</span><span></span><span class="d-th">클랜</span>
|
||||
<span class="d-th" style="text-align: right;">등락</span>
|
||||
</div>
|
||||
<div style="margin-top: 0.75rem;">
|
||||
<div class="st" style="min-height: 448px;">
|
||||
<span class="st-i"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"></circle><path d="M12 7.5v5"></path><path d="M12 16.2h.01"></path></svg></span>
|
||||
<p class="st-t">일시적인 시스템 오류가 발생했습니다.<br>잠시 후 다시 시도해 주세요.</p>
|
||||
<button class="st-b">다시 시도</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 순위 구간 이동 — 세 랭킹이 같은 구간을 함께 본다 -->
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #EDEFF2;">
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">1 ~ 10위 · 전체 100위</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span class="d-arw" style="opacity: 0.4;"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 5l-7 7 7 7"></path></svg></span>
|
||||
<div style="display: flex; align-items: center; gap: 0.125rem;">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; background: #14161A; font-size: 0.875rem; font-weight: 700; color: #FFFFFF;">1</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #5B6169;">2</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #5B6169;">3</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #5B6169;">4</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #5B6169;">5</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 34px; font-size: 0.875rem; color: #9BA1A9;">…</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #5B6169;">10</span>
|
||||
</div>
|
||||
<span class="d-arw"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 5l7 7-7 7"></path></svg></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 커뮤니티 · 비어 있음 -->
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">커뮤니티</h2><span class="an">비어 있음</span><div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem;"><span class="d-tab d-tab-on">인기</span><span class="d-tab">최신</span><span class="d-tab">클립</span></div>
|
||||
<div style="margin-top: 0.875rem;">
|
||||
<div class="st" style="min-height: 432px;">
|
||||
<span class="st-i"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5a3 3 0 01-3 3H9.5L5 20.5V6a3 3 0 013-3h9a3 3 0 013 3z"></path></svg></span>
|
||||
<p class="st-t">아직 올라온 글이 없어요</p>
|
||||
|
||||
<span class="st-l">첫 글 쓰러 가기</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 서든어택 소식 -->
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">서든어택 소식</h2><span class="an">완료</span><div style="flex-grow: 1;"></div><span class="d-more">더 보기</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem;"><span class="d-tab d-tab-on">공지사항</span><span class="d-tab">업데이트</span></div>
|
||||
<div style="margin-top: 0.75rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;"><span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내</span><span class="d-new">신규</span></div><span style="font-size: 0.8125rem; color: #9BA1A9;">09.02</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;"><span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">비매너 이용자 제재 결과</span><span class="d-new">신규</span></div><span style="font-size: 0.8125rem; color: #9BA1A9;">09.01</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">가을 시즌 랭크전 일정</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.29</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">신규 맵 컨테이너 야드 추가</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.28</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">AK-47 반동 수치 조정</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.26</span></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;"><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem;">클랜전 매칭 로직 개선</span><span style="font-size: 0.8125rem; color: #9BA1A9;">08.22</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 서린즈 소식 · 실패 -->
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">서린즈 소식</h2><span class="an">실패</span><div style="flex-grow: 1;"></div><span class="d-more">더 보기</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem;"><span class="d-tab d-tab-on">공지사항</span><span class="d-tab">업데이트</span></div>
|
||||
<div style="margin-top: 0.75rem;">
|
||||
<div class="st" style="min-height: 276px;">
|
||||
<span class="st-i"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"></circle><path d="M12 7.5v5"></path><path d="M12 16.2h.01"></path></svg></span>
|
||||
<p class="st-t">일시적인 시스템 오류가 발생했습니다.<br>잠시 후 다시 시도해 주세요.</p>
|
||||
<button class="st-b">다시 시도</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 지금 방송 중 · 비어 있음 -->
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">지금 방송 중</h2><span class="an">비어 있음</span><div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
<div class="st" style="min-height: 516px;">
|
||||
<span class="st-i"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="12.5" rx="3"></rect><path d="M10.5 9.2l4.8 3-4.8 3z"></path></svg></span>
|
||||
<p class="st-t">지금 방송 중인 채널이 없어요</p>
|
||||
<p class="st-s">방송이 시작되면 여기에 표시됩니다</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,391 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 서린즈 홈 — 태블릿 (768) · 두 열, 게임 랭킹은 갈래 세그먼트로 하나씩 */
|
||||
|
||||
body { margin: 0; }
|
||||
.d-root, .d-root * { box-sizing: border-box; }
|
||||
.d-root {
|
||||
font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
a { color: #C24A00; text-decoration: none; }
|
||||
a:hover { color: #A03C00; }
|
||||
.d-th { font-size: 0.75rem; font-weight: 500; color: #9BA1A9; }
|
||||
.d-tab { display: inline-flex; align-items: center; height: 32px; padding: 0 0.8125rem; border-radius: 999px; background: #F5F6F8; font-size: 0.8125rem; font-weight: 500; color: #5B6169; }
|
||||
.d-tab-on { background: #14161A; font-weight: 600; color: #FFFFFF; }
|
||||
.d-more { font-size: 0.8125rem; font-weight: 600; color: #5B6169; }
|
||||
.d-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.d-mv { display: flex; align-items: center; justify-content: flex-end; gap: 0.1875rem; }
|
||||
.d-new { flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; color: #C24A00; letter-spacing: -0.01em; }
|
||||
.d-arw { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; }
|
||||
/* 갈래 선택 — 하위 탭(알약)과 구분되도록 밑줄형 세그먼트로 둔다 */
|
||||
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid #E4E8ED; }
|
||||
.seg > span { display: flex; align-items: center; justify-content: center; height: 46px; font-size: 0.9375rem; font-weight: 500; color: #9BA1A9; box-shadow: inset 0 -2px 0 transparent; }
|
||||
.seg > .on { font-weight: 700; color: #14161A; box-shadow: inset 0 -2px 0 #14161A; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="d-root" style="width: 768px; min-height: 2960px; background: #FFFFFF; color: #14161A;">
|
||||
|
||||
<header style="display: flex; align-items: center; gap: 1.25rem; height: 64px; padding: 0 24px; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<svg width="55" height="18" viewBox="-13.5 -7.5 373 123" fill="none" stroke="#14161A" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="서린즈"><polyline points="34,2 6,106"></polyline><polyline points="34,2 60,106"></polyline><polyline points="100,2 100,106"></polyline><polyline points="74,54 100,54"></polyline><polyline points="130,2 184,2 184,33 130,33 130,64 184,64"></polyline><polyline points="210,2 210,64"></polyline><polyline points="142,76 142,106 210,106"></polyline><polyline points="248,6 336,6"></polyline><polyline points="292,6 254,76"></polyline><polyline points="292,6 330,76"></polyline><polyline points="248,106 336,106"></polyline></svg>
|
||||
</div>
|
||||
|
||||
<nav style="display: flex; align-items: center; gap: 1.0625rem; font-size: 0.875rem;">
|
||||
<span style="font-weight: 700;">홈</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">전적 검색</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">랭킹</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">커뮤니티</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">스트리밍</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">소식</span>
|
||||
<span style="font-weight: 500; color: #5B6169;">이벤트</span>
|
||||
</nav>
|
||||
|
||||
<div style="flex-grow: 1;"></div>
|
||||
|
||||
<button style="height: 38px; padding: 0 1rem; border: none; border-radius: 999px; background: #F2F4F7; font-family: inherit; font-size: 0.875rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">로그인</button>
|
||||
</header>
|
||||
|
||||
<section style="background: #FAFBFC; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; flex-direction: column; align-items: center; padding: 44px 24px 38px;">
|
||||
<h1 style="margin: 0; text-align: center; font-size: 1.875rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.045em;">누구의 전적이 궁금하세요?</h1>
|
||||
<p style="margin: 0.625rem 0 0; text-align: center; font-size: 0.9375rem; line-height: 1.6; color: #5B6169;">닉네임만 알려주시면 최근 경기 흐름부터 자주 쓰는 무기까지 정리해 드릴게요.</p>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; width: 100%; max-width: 560px; height: 60px; margin-top: 1.375rem; padding: 0 0.4375rem 0 1.125rem; background: #FFFFFF; border: 1px solid #E4E8ED; border-radius: 999px; box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04), 0 10px 26px rgba(20, 22, 26, 0.06);">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#9BA1A9" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg>
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 1rem; color: #9BA1A9;">닉네임을 입력해 보세요</span>
|
||||
<button style="height: 46px; padding: 0 1.375rem; border: none; border-radius: 999px; background: #FF6A00; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.02em; cursor: pointer;">찾아보기</button>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem; margin-top: 1.125rem;">
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9; margin-right: 0.125rem;">최근에 찾아봤어요</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 34px; padding: 0 0.75rem 0 0.3125rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.8125rem; font-weight: 600;"><span style="width: 22px; height: 22px; border-radius: 999px; background: #DDE4EE;"></span>달빛조각사</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 34px; padding: 0 0.75rem 0 0.3125rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.8125rem; font-weight: 600;"><span style="width: 22px; height: 22px; border-radius: 999px; background: #E5E0F0;"></span>칼든햄스터</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 34px; padding: 0 0.75rem 0 0.3125rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.8125rem; font-weight: 600;"><span style="width: 22px; height: 22px; border-radius: 999px; background: #E7E3D8;"></span>새벽두시</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 34px; padding: 0 0.75rem 0 0.3125rem; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDEFF2; font-size: 0.8125rem; font-weight: 600;"><span style="width: 22px; height: 22px; border-radius: 999px; background: #D8E6E2;"></span>무명연대장</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 두 열 그리드. 데스크톱과 순서를 하나 바꿨다 — 커뮤니티를 검색 랭킹 옆으로 올려 빈 칸을 없앤다 -->
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.5rem; padding: 28px 24px 48px;">
|
||||
|
||||
<section style="grid-column: span 2;">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">이벤트</h2>
|
||||
<div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
<div style="border: 1px solid #EDEFF2; border-radius: 20px; overflow: hidden;">
|
||||
<img src="20260903074208.jpg" alt="서든 페스티벌 같이 갈래?" style="display: block; width: 100%; aspect-ratio: 720 / 248; object-fit: cover;">
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 52px;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: #9BA1A9;">시즌 이벤트</span>
|
||||
<span style="width: 1px; height: 11px; background: #E4E8ED;"></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">서든 페스티벌 같이 갈래?</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9; white-space: nowrap;">9월 1일 ~ 9월 30일</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="width: 20px; height: 5px; border-radius: 999px; background: #14161A;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
<span style="width: 5px; height: 5px; border-radius: 999px; background: #D6DAE0;"></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">검색 랭킹</h2>
|
||||
<div style="flex-grow: 1;"></div><span style="font-size: 0.8125rem; color: #9BA1A9;">18:20 기준</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 34px; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">순위</span><span class="d-th">닉네임</span><span class="d-th" style="text-align: right;">변동</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">달빛조각사</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">칼든햄스터</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">새벽두시</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">4</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">4</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">무명연대장</span><span class="d-mv"><span style="font-size: 0.8125rem; color: #C9CDD3;">–</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">5</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">한밤의저격수</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">6</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">조용한총잡이</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">3</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">7</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">야간부대장</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">8</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">헤드샷장인</span><span class="d-mv"><span style="font-size: 0.8125rem; color: #C9CDD3;">–</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 46px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">9</span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem;">삼보급단골</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">2</span></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">커뮤니티</h2>
|
||||
<div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem;"><span class="d-tab d-tab-on">인기</span><span class="d-tab">최신</span><span class="d-tab">클립</span></div>
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; margin-top: 0.875rem;">
|
||||
<div style="position: relative; aspect-ratio: 1 / 1; border-radius: 16px; background: #E4E8ED; overflow: hidden;">
|
||||
<div style="position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.375rem; height: 38px; padding: 0 0.625rem; background: rgba(20, 22, 26, 0.5);"><span style="width: 18px; height: 18px; border-radius: 999px; background: #C9D2DD; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.6875rem; font-weight: 600; color: #FFFFFF;">달빛조각사</span><span style="font-size: 0.6875rem; font-weight: 600; color: #FFFFFF;">312</span></div>
|
||||
</div>
|
||||
<div style="position: relative; aspect-ratio: 1 / 1; border-radius: 16px; background: #EAE6E0; overflow: hidden;">
|
||||
<div style="position: absolute; top: 8px; right: 8px;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="3" width="13" height="13" rx="3"></rect><path d="M16 19.5A2.5 2.5 0 0113.5 22H6a3 3 0 01-3-3V9.5"></path></svg></div>
|
||||
<div style="position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.375rem; height: 38px; padding: 0 0.625rem; background: rgba(20, 22, 26, 0.5);"><span style="width: 18px; height: 18px; border-radius: 999px; background: #D8D2C8; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.6875rem; font-weight: 600; color: #FFFFFF;">칼든햄스터</span><span style="font-size: 0.6875rem; font-weight: 600; color: #FFFFFF;">274</span></div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; aspect-ratio: 1 / 1; padding: 14px; border-radius: 16px; background: #F5F6F8;">
|
||||
<p style="margin: 0; font-size: 0.8125rem; line-height: 1.55; font-weight: 500;">폭파 삼보급 A 롱각, 다들 어디 서세요?</p>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem;">
|
||||
<span style="width: 18px; height: 18px; border-radius: 999px; background: #DDE4EE; flex-shrink: 0;"></span>
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.6875rem; font-weight: 600;">새벽두시</span>
|
||||
<span style="font-size: 0.6875rem; font-weight: 600; color: #5B6169;">198</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: relative; aspect-ratio: 1 / 1; border-radius: 16px; background: #E8E4EC; overflow: hidden;">
|
||||
<div style="position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: rgba(20, 22, 26, 0.55);">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M8 5.5l11 6.5-11 6.5z"></path></svg>
|
||||
</div>
|
||||
<div style="position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.375rem; height: 38px; padding: 0 0.625rem; background: rgba(20, 22, 26, 0.5);"><span style="width: 18px; height: 18px; border-radius: 999px; background: #D5CEDC; flex-shrink: 0;"></span><span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.6875rem; font-weight: 600; color: #FFFFFF;">무명연대장</span><span style="font-size: 0.6875rem; font-weight: 600; color: #FFFFFF;">163</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="grid-column: span 2;">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">게임 랭킹</h2>
|
||||
<div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
<div class="seg">
|
||||
<span class="on">계급</span><span>랭크전</span><span>클랜</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.875rem;">
|
||||
<span class="d-tab d-tab-on">통합</span><span class="d-tab">시즌</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">매일 오전 8시 갱신</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 34px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">#</span><span></span><span class="d-th">유저</span><span class="d-th" style="text-align: right;">등락</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">1</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">달빛조각사</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">2</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><svg width="14" height="14" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4l2.3 4.9 5.4.7-3.9 3.8 1 5.3L12 16.2 7.2 18.7l1-5.3L4.3 9.6l5.4-.7z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">칼든햄스터</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">3</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">새벽두시</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">4</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">4</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">무명연대장</span><span class="d-mv"><span style="font-size: 0.8125rem; color: #C9CDD3;">–</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">5</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><svg width="14" height="14" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4l2.3 4.9 5.4.7-3.9 3.8 1 5.3L12 16.2 7.2 18.7l1-5.3L4.3 9.6l5.4-.7z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">한밤의저격수</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">1</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">6</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">조용한총잡이</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">3</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">7</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">야간부대장</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">8</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><svg width="14" height="14" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4l2.3 4.9 5.4.7-3.9 3.8 1 5.3L12 16.2 7.2 18.7l1-5.3L4.3 9.6l5.4-.7z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">헤드샷장인</span><span class="d-mv"><span style="font-size: 0.8125rem; color: #C9CDD3;">–</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 48px; border-bottom: 1px solid #F3F5F7;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">9</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><svg width="13" height="13" viewBox="0 0 24 24" fill="#7A828C"><path d="M12 4.5l5.5 7.5L12 19.5 6.5 12z"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">삼보급단골</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#C4453D"><path d="M6 10L2 3h8z"></path></svg><span style="font-size: 0.8125rem; color: #C4453D;">2</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) 60px; align-items: center; gap: 0.75rem; height: 48px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700;">10</span><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F0F2F5;"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<span class="d-clip" style="font-size: 0.9375rem; font-weight: 600;">웨어하우스지박령</span><span class="d-mv"><svg width="9" height="9" viewBox="0 0 12 12" fill="#12805C"><path d="M6 2l4 7H2z"></path></svg><span style="font-size: 0.8125rem; color: #12805C;">5</span></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem; padding-top: 1.125rem; border-top: 1px solid #EDEFF2;">
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">1 ~ 10위 · 전체 100위</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span class="d-arw" style="opacity: 0.4;"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 5l-7 7 7 7"></path></svg></span>
|
||||
<div style="display: flex; align-items: center; gap: 0.125rem;">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; background: #14161A; font-size: 0.875rem; font-weight: 700; color: #FFFFFF;">1</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #5B6169;">2</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #5B6169;">3</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #5B6169;">4</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #5B6169;">5</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 34px; font-size: 0.875rem; color: #9BA1A9;">…</span>
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #5B6169;">10</span>
|
||||
</div>
|
||||
<span class="d-arw"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 5l7 7-7 7"></path></svg></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">서든어택 소식</h2>
|
||||
<div style="flex-grow: 1;"></div><span class="d-more">더 보기</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem;"><span class="d-tab d-tab-on">공지사항</span><span class="d-tab">업데이트</span></div>
|
||||
<div style="margin-top: 0.75rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">9월 정기점검 안내</span><span class="d-new">신규</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.02</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">비매너 이용자 제재 결과</span><span class="d-new">신규</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.01</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">가을 시즌 랭크전 일정</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.29</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">신규 맵 컨테이너 야드 추가</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.28</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">AK-47 반동 수치 조정</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.26</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">클랜전 매칭 로직 개선</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.22</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">서린즈 소식</h2>
|
||||
<div style="flex-grow: 1;"></div><span class="d-more">더 보기</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem;"><span class="d-tab d-tab-on">공지사항</span><span class="d-tab">업데이트</span></div>
|
||||
<div style="margin-top: 0.75rem; border-top: 1px solid #E4E8ED;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">맵별 승률 통계를 열었어요</span><span class="d-new">신규</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.03</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">전적 갱신이 두 배 빨라졌어요</span><span class="d-new">신규</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">09.01</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">즐겨찾기 알림 기능 추가</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.30</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">8월 서버 점검 결과 보고</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.27</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px; border-bottom: 1px solid #F3F5F7;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">커뮤니티 이용 규칙 정리</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.24</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 46px;">
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; flex-grow: 1; min-width: 0;">
|
||||
<span class="d-clip" style="min-width: 0; font-size: 0.9375rem;">모바일 화면을 다듬었어요</span>
|
||||
</div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">08.20</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="grid-column: span 2;">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 0.875rem;">
|
||||
<h2 style="margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em;">지금 방송 중</h2>
|
||||
<div style="flex-grow: 1;"></div><span class="d-more">전체 보기</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem;">
|
||||
<div>
|
||||
<div style="aspect-ratio: 16 / 9; border-radius: 14px; background: #E4E8ED;"></div>
|
||||
<div class="d-clip" style="font-size: 0.9375rem; font-weight: 600; margin-top: 0.75rem;">삼보급 스나 연습</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.4375rem; margin-top: 0.3125rem;"><span style="width: 20px; height: 20px; border-radius: 999px; background: #DDE4EE; flex-shrink: 0;"></span><span style="font-size: 0.8125rem; color: #9BA1A9;">달빛조각사 · 1,204명</span></div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; gap: 1rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<div style="width: 96px; height: 56px; border-radius: 12px; background: #EAE6E0; flex-shrink: 0;"></div>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div class="d-clip" style="font-size: 0.875rem; font-weight: 600;">클랜전 정기 리그 중계</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem;"><span style="width: 18px; height: 18px; border-radius: 999px; background: #D8E6E2; flex-shrink: 0;"></span><span class="d-clip" style="font-size: 0.75rem; color: #9BA1A9;">무명연대 · 862명</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<div style="width: 96px; height: 56px; border-radius: 12px; background: #E2E9E6; flex-shrink: 0;"></div>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div class="d-clip" style="font-size: 0.875rem; font-weight: 600;">초보 탈출 폭파미션 강의</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem;"><span style="width: 18px; height: 18px; border-radius: 999px; background: #E7E3D8; flex-shrink: 0;"></span><span class="d-clip" style="font-size: 0.75rem; color: #9BA1A9;">새벽두시 · 517명</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<div style="width: 96px; height: 56px; border-radius: 12px; background: #E8E4EC; flex-shrink: 0;"></div>
|
||||
<div style="flex-grow: 1; min-width: 0;">
|
||||
<div class="d-clip" style="font-size: 0.875rem; font-weight: 600;">시청자 참여 한 판</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem;"><span style="width: 18px; height: 18px; border-radius: 999px; background: #E5E0F0; flex-shrink: 0;"></span><span class="d-clip" style="font-size: 0.75rem; color: #9BA1A9;">한밤의저격수 · 341명</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
+10
-2
@@ -4,8 +4,16 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="프로젝트 베이스 템플릿" />
|
||||
<title>Project Base</title>
|
||||
<meta name="description" content="서든어택 전적 검색 · 랭킹 · 커뮤니티 — 서린즈" />
|
||||
<!--
|
||||
Pretendard — 한글 동적 서브셋. 자체 호스팅이 필요해지면
|
||||
pretendard 패키지를 설치해 이 링크를 걷어내면 된다.
|
||||
-->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
|
||||
/>
|
||||
<title>서린즈</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
@@ -0,0 +1,64 @@
|
||||
/* 전역 기본값 — 토큰을 먼저 읽은 뒤 적용한다 */
|
||||
@import './tokens.css';
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
/* 모든 rem 값의 기준 (16px = 1rem) */
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: var(--sz-surface);
|
||||
color: var(--sz-text);
|
||||
font-family: 'Pretendard Variable', 'Pretendard', -apple-system, 'Apple SD Gothic Neo',
|
||||
'Malgun Gothic', sans-serif;
|
||||
font-size: 1rem;
|
||||
/* 숫자 자리가 흔들리지 않도록 고정폭 숫자를 쓴다 (랭킹 표) */
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.015em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--sz-brand-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--sz-brand-text-hover);
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
letter-spacing: inherit;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* 키보드 이동 시에만 초점 테두리를 보인다 */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--sz-brand-text);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* 시각적으로 감추되 보조기기에는 읽히게 한다 */
|
||||
.sz-sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
/*
|
||||
* 서린즈 디자인 토큰 — .design/surinz 아트보드(Foundations · Brand)의 값을 그대로 옮긴 것.
|
||||
* 화면 코드에서는 여기 없는 색·치수를 새로 만들지 않는다.
|
||||
*/
|
||||
:root {
|
||||
/* ---------- 브랜드 (탄피 오렌지) ---------- */
|
||||
/* 면 위에는 흰 글자, 흰 바탕 위 글자는 진한 변형을 쓴다 — 값이 서로 다르다 */
|
||||
--sz-brand: #ff6a00;
|
||||
--sz-brand-press: #d95a00;
|
||||
--sz-brand-text: #c24a00;
|
||||
--sz-brand-text-hover: #a03c00;
|
||||
|
||||
/* ---------- 글자 ---------- */
|
||||
--sz-text: #14161a;
|
||||
--sz-text-sub: #5b6169;
|
||||
--sz-text-dim: #7a828c;
|
||||
--sz-text-faint: #9ba1a9;
|
||||
--sz-text-disabled: #c9cdd3;
|
||||
--sz-text-invert: #ffffff;
|
||||
|
||||
/* ---------- 선 ---------- */
|
||||
--sz-line-strong: #e4e8ed;
|
||||
--sz-line: #edeff2;
|
||||
--sz-line-row: #f3f5f7;
|
||||
--sz-line-button: #d6dae0;
|
||||
|
||||
/* ---------- 면 ---------- */
|
||||
--sz-surface: #ffffff;
|
||||
--sz-surface-sub: #fafbfc;
|
||||
--sz-surface-card: #f5f6f8;
|
||||
--sz-surface-button: #f2f4f7;
|
||||
--sz-surface-badge: #f0f2f5;
|
||||
--sz-surface-placeholder: #edeff2;
|
||||
--sz-scrim: rgba(20, 22, 26, 0.5);
|
||||
--sz-scrim-strong: rgba(20, 22, 26, 0.55);
|
||||
|
||||
/* ---------- 의미 ---------- */
|
||||
--sz-up: #12805c;
|
||||
--sz-down: #c4453d;
|
||||
|
||||
/* ---------- 라운드 ---------- */
|
||||
--sz-radius-pill: 999px;
|
||||
--sz-radius-xl: 1.5rem; /* 24px — 큰 배너 */
|
||||
--sz-radius-lg: 1.25rem; /* 20px */
|
||||
--sz-radius-post: 1.125rem; /* 18px — 커뮤니티 카드 */
|
||||
--sz-radius-md: 1rem; /* 16px — 보통 카드 · 상태 블록 */
|
||||
--sz-radius-sm: 0.875rem; /* 14px */
|
||||
--sz-radius-thumb: 0.75rem; /* 12px — 썸네일 */
|
||||
--sz-radius-tile: 0.5rem; /* 8px — 계급 · 클랜 타일 */
|
||||
|
||||
/* ---------- 치수 ---------- */
|
||||
--sz-row-h: 2.875rem; /* 46px — 데스크톱 표 행 */
|
||||
--sz-row-h-mobile: 3.25rem; /* 52px — 모바일 표 행 */
|
||||
--sz-row-head-h: 2rem; /* 32px */
|
||||
--sz-tap-min: 2.75rem; /* 44px — 모바일 최소 터치 영역 */
|
||||
--sz-page-pad: 2.5rem; /* 40px */
|
||||
--sz-page-pad-tablet: 1.5rem; /* 24px */
|
||||
--sz-page-pad-mobile: 1.25rem; /* 20px */
|
||||
--sz-section-gap: 2.5rem; /* 40px */
|
||||
--sz-section-gap-mobile: 2rem; /* 32px */
|
||||
|
||||
/* ---------- 그림자 ---------- */
|
||||
--sz-shadow-hero: 0 1px 2px rgba(20, 22, 26, 0.04), 0 12px 32px rgba(20, 22, 26, 0.07);
|
||||
--sz-shadow-hero-mobile: 0 1px 2px rgba(20, 22, 26, 0.04), 0 8px 22px rgba(20, 22, 26, 0.06);
|
||||
--sz-shadow-header: 0 1px 12px rgba(20, 22, 26, 0.06);
|
||||
--sz-shadow-sheet: 0 8px 20px rgba(20, 22, 26, 0.08), 0 32px 64px rgba(20, 22, 26, 0.16);
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
<script setup lang="ts">
|
||||
// 아이콘 — 좌표는 app-icon.ts 에 모여 있고, 이 컴포넌트는 그리기만 한다.
|
||||
// 장식용이므로 보조기기에서는 건너뛴다. 뜻은 항상 옆 글자가 전달한다.
|
||||
import { computed } from 'vue'
|
||||
import { icons, type IconDefinition, type IconName } from '@/components/common/app-icon'
|
||||
|
||||
interface Props {
|
||||
name: IconName
|
||||
/** 한 변의 크기 (px) */
|
||||
size?: number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
size: 16,
|
||||
})
|
||||
|
||||
const icon = computed<IconDefinition>(() => icons[props.name])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
class="app-icon"
|
||||
:width="size"
|
||||
:height="size"
|
||||
:viewBox="icon.viewBox"
|
||||
:fill="icon.mode === 'fill' ? 'currentColor' : 'none'"
|
||||
:stroke="icon.mode === 'stroke' ? 'currentColor' : undefined"
|
||||
:stroke-width="icon.strokeWidth"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
>
|
||||
<template
|
||||
v-for="(shape, index) in icon.shapes"
|
||||
:key="index"
|
||||
>
|
||||
<path
|
||||
v-if="shape.tag === 'path'"
|
||||
:d="shape.d"
|
||||
/>
|
||||
<circle
|
||||
v-else-if="shape.tag === 'circle'"
|
||||
:cx="shape.cx"
|
||||
:cy="shape.cy"
|
||||
:r="shape.r"
|
||||
/>
|
||||
<rect
|
||||
v-else
|
||||
:x="shape.x"
|
||||
:y="shape.y"
|
||||
:width="shape.width"
|
||||
:height="shape.height"
|
||||
:rx="shape.rx"
|
||||
/>
|
||||
</template>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.app-icon {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
// 프로필 이미지 자리 — 실제 이미지가 없으면 단색 원으로 둔다.
|
||||
|
||||
interface Props {
|
||||
/** 지름 (rem) */
|
||||
size?: string
|
||||
imageUrl?: string
|
||||
/** 이미지가 없을 때 채울 색 */
|
||||
color?: string
|
||||
/** 이미지 설명 — 보통 닉네임 */
|
||||
alt?: string
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
size: '1.25rem',
|
||||
color: '#DDE4EE',
|
||||
imageUrl: undefined,
|
||||
alt: undefined,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span
|
||||
class="avatar-circle"
|
||||
:style="{ width: size, height: size, background: imageUrl ? undefined : color }"
|
||||
>
|
||||
<img
|
||||
v-if="imageUrl"
|
||||
class="avatar-circle__image"
|
||||
:src="imageUrl"
|
||||
:alt="alt ?? ''"
|
||||
>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.avatar-circle {
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
border-radius: var(--sz-radius-pill);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-circle__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
<script setup lang="ts">
|
||||
// 서린즈 워드마크 — 아트보드 Logo.dc.html 의 선 그리기를 그대로 옮겼다.
|
||||
// 색은 currentColor 를 따르므로 어두운 바탕 위에서도 쓸 수 있다.
|
||||
|
||||
interface Props {
|
||||
/** 로고 너비 (px). 높이는 비율에 맞춰 따라간다 */
|
||||
width?: number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
width: 61,
|
||||
})
|
||||
|
||||
// 원본 비율 373 : 123 을 유지한다
|
||||
const height = () => Math.round((props.width * 123) / 373)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
class="brand-logo"
|
||||
:width="width"
|
||||
:height="height()"
|
||||
viewBox="-13.5 -7.5 373 123"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="15"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
role="img"
|
||||
aria-label="서린즈"
|
||||
>
|
||||
<polyline points="34,2 6,106" />
|
||||
<polyline points="34,2 60,106" />
|
||||
<polyline points="100,2 100,106" />
|
||||
<polyline points="74,54 100,54" />
|
||||
<polyline points="130,2 184,2 184,33 130,33 130,64 184,64" />
|
||||
<polyline points="210,2 210,64" />
|
||||
<polyline points="142,76 142,106 210,106" />
|
||||
<polyline points="248,6 336,6" />
|
||||
<polyline points="292,6 254,76" />
|
||||
<polyline points="292,6 330,76" />
|
||||
<polyline points="248,106 336,106" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.brand-logo {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,79 @@
|
||||
<script setup lang="ts">
|
||||
// 알약형 하위 탭 — 통합/시즌, 솔로/파티/클랜, 인기/최신/클립 처럼 섹션 안에서 갈래를 고를 때 쓴다.
|
||||
import type { RankTabOption } from '@/types/home'
|
||||
|
||||
interface Props {
|
||||
options: RankTabOption[]
|
||||
/** 선택된 옵션 값 (v-model) */
|
||||
modelValue: string
|
||||
/** 탭 묶음의 용도 — 보조기기가 읽는다 */
|
||||
label: string
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: string): void
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="pill-tabs"
|
||||
role="tablist"
|
||||
:aria-label="label"
|
||||
>
|
||||
<button
|
||||
v-for="option in options"
|
||||
:key="option.value"
|
||||
type="button"
|
||||
role="tab"
|
||||
class="pill-tabs__item"
|
||||
:class="{ 'pill-tabs__item--on': option.value === modelValue }"
|
||||
:aria-selected="option.value === modelValue"
|
||||
@click="emit('update:modelValue', option.value)"
|
||||
>
|
||||
{{ option.label }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.pill-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.pill-tabs__item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 1.875rem;
|
||||
padding: 0 0.8125rem;
|
||||
border: none;
|
||||
border-radius: var(--sz-radius-pill);
|
||||
background: var(--sz-surface-card);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
color: var(--sz-text-sub);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pill-tabs__item--on {
|
||||
background: var(--sz-text);
|
||||
font-weight: 600;
|
||||
color: var(--sz-text-invert);
|
||||
}
|
||||
|
||||
@media (max-width: 47.9375rem) {
|
||||
.pill-tabs {
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.pill-tabs__item {
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,91 @@
|
||||
<script setup lang="ts">
|
||||
// 계급 이미지 · 랭크전 티어 이미지 · 클랜 마크 자리.
|
||||
// 실제 에셋이 없을 때는 회색 타일 위에 약식 표장을 그린다 — 규격을 받으면 이미지로 교체한다.
|
||||
// 랭크전은 한 줄에 계급과 티어가 함께 놓이므로 표장을 갈라 뒀다:
|
||||
// 계급은 막대·별·마름모, 티어는 육각, 클랜은 방패.
|
||||
import AppIcon from '@/components/common/AppIcon.vue'
|
||||
import type { IconName } from '@/components/common/app-icon'
|
||||
import type { RankGradeShape } from '@/types/home'
|
||||
|
||||
interface Props {
|
||||
/** grade = 계급 이미지 자리, tier = 랭크전 티어 자리, clan = 클랜 마크 자리 */
|
||||
variant?: 'grade' | 'tier' | 'clan'
|
||||
/** 계급 자리표시 모양 (variant 가 grade 일 때) */
|
||||
shape?: RankGradeShape
|
||||
/** 실제 이미지 주소. 있으면 자리표시 대신 이미지를 그린다 */
|
||||
imageUrl?: string
|
||||
/** 이미지 설명 — 계급명 · 티어명 · 클랜명 */
|
||||
alt?: string
|
||||
/** 타일 한 변 (rem) */
|
||||
size?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
variant: 'grade',
|
||||
shape: 'bar',
|
||||
size: '1.625rem',
|
||||
imageUrl: undefined,
|
||||
alt: undefined,
|
||||
})
|
||||
|
||||
const gradeIcons: Record<RankGradeShape, IconName> = {
|
||||
bar: 'tierBar',
|
||||
star: 'tierStar',
|
||||
diamond: 'tierDiamond',
|
||||
}
|
||||
|
||||
const iconName = (): IconName => {
|
||||
if (props.variant === 'clan') return 'shield'
|
||||
if (props.variant === 'tier') return 'tierHex'
|
||||
return gradeIcons[props.shape]
|
||||
}
|
||||
|
||||
const iconSize = (): number => (props.variant === 'clan' ? 15 : 14)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span
|
||||
class="rank-badge"
|
||||
:class="`rank-badge--${variant}`"
|
||||
:style="{ width: size, height: size }"
|
||||
>
|
||||
<img
|
||||
v-if="imageUrl"
|
||||
class="rank-badge__image"
|
||||
:src="imageUrl"
|
||||
:alt="alt ?? ''"
|
||||
>
|
||||
<AppIcon
|
||||
v-else
|
||||
:name="iconName()"
|
||||
:size="iconSize()"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.rank-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
border-radius: var(--sz-radius-tile);
|
||||
color: var(--sz-text-dim);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rank-badge--grade {
|
||||
background: var(--sz-surface-badge);
|
||||
}
|
||||
|
||||
.rank-badge--tier,
|
||||
.rank-badge--clan {
|
||||
background: var(--sz-surface-placeholder);
|
||||
}
|
||||
|
||||
.rank-badge__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,82 @@
|
||||
<script setup lang="ts">
|
||||
// 순위 등락 — 상승 ▲n · 하락 ▼n · 변동 없음은 짧은 선.
|
||||
// 색만으로 뜻이 갈리지 않도록 방향 기호와 보조기기용 문구를 함께 둔다.
|
||||
import AppIcon from '@/components/common/AppIcon.vue'
|
||||
import type { RankMovement } from '@/types/home'
|
||||
|
||||
interface Props {
|
||||
movement: RankMovement
|
||||
/** 숫자 크기 (rem) — 표마다 조금씩 다르다 */
|
||||
fontSize?: string
|
||||
/** 삼각형 크기 (px) */
|
||||
iconSize?: number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
fontSize: '0.8125rem',
|
||||
iconSize: 10,
|
||||
})
|
||||
|
||||
// 보조기기가 읽을 문구 — 화면에는 기호와 숫자만 보인다
|
||||
const description = () => {
|
||||
if (props.movement.direction === 'up') return `${props.movement.amount}계단 상승`
|
||||
if (props.movement.direction === 'down') return `${props.movement.amount}계단 하락`
|
||||
return '변동 없음'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="rank-movement">
|
||||
<span class="sz-sr-only">{{ description() }}</span>
|
||||
|
||||
<template v-if="movement.direction === 'same'">
|
||||
<span
|
||||
class="rank-movement__flat"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<AppIcon
|
||||
:name="movement.direction === 'up' ? 'caretUp' : 'caretDown'"
|
||||
:size="iconSize"
|
||||
:class="`rank-movement__icon rank-movement__icon--${movement.direction}`"
|
||||
/>
|
||||
<span
|
||||
:class="`rank-movement__amount rank-movement__amount--${movement.direction}`"
|
||||
:style="{ fontSize }"
|
||||
aria-hidden="true"
|
||||
>{{ movement.amount }}</span>
|
||||
</template>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.rank-movement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 0.1875rem;
|
||||
}
|
||||
|
||||
.rank-movement__icon--up {
|
||||
color: var(--sz-up);
|
||||
}
|
||||
|
||||
.rank-movement__icon--down {
|
||||
color: var(--sz-down);
|
||||
}
|
||||
|
||||
.rank-movement__amount--up {
|
||||
color: var(--sz-up);
|
||||
}
|
||||
|
||||
.rank-movement__amount--down {
|
||||
color: var(--sz-down);
|
||||
}
|
||||
|
||||
.rank-movement__flat {
|
||||
width: 0.625rem;
|
||||
height: 1px;
|
||||
background: var(--sz-text-disabled);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,66 @@
|
||||
<script setup lang="ts">
|
||||
// 섹션 본문의 상태 분기 — 로딩(스켈레톤) · 실패 · 비어 있음 · 정상.
|
||||
// 섹션마다 이 네 상태를 모두 가진다. 한 섹션이 실패해도 그 섹션만 다시 부른다.
|
||||
import SectionStateBlock from '@/components/common/SectionStateBlock.vue'
|
||||
import type { IconName } from '@/components/common/app-icon'
|
||||
import type { SectionStatus } from '@/composables/useSectionResource'
|
||||
|
||||
interface Props {
|
||||
status: SectionStatus
|
||||
/** 실패 문구 — 에러 코드 맵에서 온 문장을 그대로 받는다 */
|
||||
errorMessage?: string
|
||||
/** 비어 있음 문구 — 섹션마다 다르다 */
|
||||
emptyTitle: string
|
||||
emptyDescription?: string
|
||||
emptyLinkLabel?: string
|
||||
emptyIcon?: IconName
|
||||
/** 상태 블록이 채울 높이 — 섹션 본문 높이와 같게 준다 */
|
||||
minHeight?: string
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
errorMessage: '일시적인 시스템 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.',
|
||||
minHeight: '15rem',
|
||||
emptyDescription: undefined,
|
||||
emptyLinkLabel: undefined,
|
||||
emptyIcon: undefined,
|
||||
})
|
||||
|
||||
interface Emits {
|
||||
(e: 'retry'): void
|
||||
(e: 'empty-link'): void
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 로딩 — 섹션마다 모양이 달라 스켈레톤은 슬롯으로 받는다 -->
|
||||
<div
|
||||
v-if="status === 'idle' || status === 'loading'"
|
||||
aria-busy="true"
|
||||
>
|
||||
<slot name="skeleton" />
|
||||
</div>
|
||||
|
||||
<SectionStateBlock
|
||||
v-else-if="status === 'error'"
|
||||
variant="error"
|
||||
:title="errorMessage"
|
||||
:min-height="minHeight"
|
||||
@retry="emit('retry')"
|
||||
/>
|
||||
|
||||
<SectionStateBlock
|
||||
v-else-if="status === 'empty'"
|
||||
variant="empty"
|
||||
:title="emptyTitle"
|
||||
:description="emptyDescription"
|
||||
:link-label="emptyLinkLabel"
|
||||
:icon="emptyIcon"
|
||||
:min-height="minHeight"
|
||||
@link="emit('empty-link')"
|
||||
/>
|
||||
|
||||
<slot v-else />
|
||||
</template>
|
||||
@@ -0,0 +1,99 @@
|
||||
<script setup lang="ts">
|
||||
// 섹션 머리 — 제목 · 부가 설명 · 오른쪽 링크. 모든 홈 섹션이 같은 모양을 쓴다.
|
||||
|
||||
interface Props {
|
||||
title: string
|
||||
/** 제목 옆 부가 설명 (예: 매일 오전 8시 갱신) */
|
||||
note?: string
|
||||
/** 오른쪽 끝 링크 문구 (예: 전체 보기). 없으면 링크를 두지 않는다 */
|
||||
moreLabel?: string
|
||||
/** 오른쪽 끝 회색 보조 문구 (예: 18:20 기준). moreLabel 과 함께 쓰지 않는다 */
|
||||
meta?: string
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
interface Emits {
|
||||
(e: 'more'): void
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="section-header">
|
||||
<h2 class="section-header__title">
|
||||
{{ title }}
|
||||
</h2>
|
||||
<span
|
||||
v-if="note"
|
||||
class="section-header__note"
|
||||
>{{ note }}</span>
|
||||
|
||||
<span class="section-header__spacer" />
|
||||
|
||||
<span
|
||||
v-if="meta"
|
||||
class="section-header__meta"
|
||||
>{{ meta }}</span>
|
||||
<button
|
||||
v-else-if="moreLabel"
|
||||
type="button"
|
||||
class="section-header__more"
|
||||
@click="emit('more')"
|
||||
>
|
||||
{{ moreLabel }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.875rem;
|
||||
}
|
||||
|
||||
.section-header__title {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
.section-header__note {
|
||||
margin-left: 0.75rem;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--sz-text-faint);
|
||||
}
|
||||
|
||||
.section-header__spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.section-header__meta {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--sz-text-faint);
|
||||
}
|
||||
|
||||
.section-header__more {
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: var(--sz-text-sub);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.section-header__more:hover {
|
||||
color: var(--sz-text);
|
||||
}
|
||||
|
||||
@media (max-width: 47.9375rem) {
|
||||
/* 모바일에서는 제목 옆 부가 설명을 접는다 — 자리를 다투지 않게 */
|
||||
.section-header__note {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,155 @@
|
||||
<script setup lang="ts">
|
||||
// 실패 · 비어 있음 블록 — 섹션 본문이 있어야 할 높이를 그대로 채워서
|
||||
// 늦게 도착한 섹션 때문에 페이지가 밀리지 않게 한다.
|
||||
//
|
||||
// 색으로 경고하지 않는다 — 브랜드 오렌지도, 빨강도 쓰지 않는다.
|
||||
import AppIcon from '@/components/common/AppIcon.vue'
|
||||
import type { IconName } from '@/components/common/app-icon'
|
||||
|
||||
interface Props {
|
||||
/** 실패인지 비어 있음인지 */
|
||||
variant: 'error' | 'empty'
|
||||
/** 본문 문구. 실패일 때는 에러 코드 맵의 문장을 그대로 받는다 */
|
||||
title: string
|
||||
/** 보조 문구 — 없으면 두지 않는다 */
|
||||
description?: string
|
||||
/** 비어 있음일 때 붙는 글자 링크 문구 — 갈 곳이 있을 때만 */
|
||||
linkLabel?: string
|
||||
/** 블록 아이콘. 지정하지 않으면 실패는 경고, 비어 있음은 말풍선 */
|
||||
icon?: IconName
|
||||
/** 섹션 본문 높이 (CSS 길이) */
|
||||
minHeight?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
minHeight: '15rem',
|
||||
description: undefined,
|
||||
linkLabel: undefined,
|
||||
icon: undefined,
|
||||
})
|
||||
|
||||
interface Emits {
|
||||
/** 「다시 시도」 */
|
||||
(e: 'retry'): void
|
||||
/** 비어 있음 블록의 글자 링크 */
|
||||
(e: 'link'): void
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const iconName = (): IconName => props.icon ?? (props.variant === 'error' ? 'alert' : 'message')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="state-block"
|
||||
:style="{ minHeight }"
|
||||
role="status"
|
||||
>
|
||||
<span class="state-block__icon">
|
||||
<AppIcon
|
||||
:name="iconName()"
|
||||
:size="22"
|
||||
/>
|
||||
</span>
|
||||
|
||||
<p class="state-block__title">
|
||||
{{ title }}
|
||||
</p>
|
||||
<p
|
||||
v-if="description"
|
||||
class="state-block__description"
|
||||
>
|
||||
{{ description }}
|
||||
</p>
|
||||
|
||||
<button
|
||||
v-if="variant === 'error'"
|
||||
type="button"
|
||||
class="state-block__retry"
|
||||
@click="emit('retry')"
|
||||
>
|
||||
다시 시도
|
||||
</button>
|
||||
<button
|
||||
v-else-if="linkLabel"
|
||||
type="button"
|
||||
class="state-block__link"
|
||||
@click="emit('link')"
|
||||
>
|
||||
{{ linkLabel }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.state-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--sz-line);
|
||||
border-radius: var(--sz-radius-md);
|
||||
background: var(--sz-surface-sub);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.state-block__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
border-radius: var(--sz-radius-pill);
|
||||
background: var(--sz-surface-button);
|
||||
color: var(--sz-text-faint);
|
||||
}
|
||||
|
||||
.state-block__title {
|
||||
margin: 0;
|
||||
max-width: 20rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
color: var(--sz-text-sub);
|
||||
/* 줄바꿈 위치가 어색하지 않게 */
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.state-block__description {
|
||||
margin: 0;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.6;
|
||||
color: var(--sz-text-faint);
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.state-block__retry {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 2.25rem;
|
||||
padding: 0 1rem;
|
||||
border: 1px solid var(--sz-line-button);
|
||||
border-radius: var(--sz-radius-pill);
|
||||
background: var(--sz-surface);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: var(--sz-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.state-block__link {
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: var(--sz-brand-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.state-block__link:hover {
|
||||
color: var(--sz-brand-text-hover);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,69 @@
|
||||
<script setup lang="ts">
|
||||
// 밑줄형 세그먼트 — 갈래 자체를 고르는 상위 선택.
|
||||
// 알약형 하위 탭(PillTabs)과 층이 다르다는 것을 모양으로 구분하려고 밑줄형을 쓴다.
|
||||
import type { RankTabOption } from '@/types/home'
|
||||
|
||||
interface Props {
|
||||
options: RankTabOption[]
|
||||
modelValue: string
|
||||
label: string
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: string): void
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="segmented-tabs"
|
||||
role="tablist"
|
||||
:aria-label="label"
|
||||
>
|
||||
<button
|
||||
v-for="option in options"
|
||||
:key="option.value"
|
||||
type="button"
|
||||
role="tab"
|
||||
class="segmented-tabs__item"
|
||||
:class="{ 'segmented-tabs__item--on': option.value === modelValue }"
|
||||
:aria-selected="option.value === modelValue"
|
||||
@click="emit('update:modelValue', option.value)"
|
||||
>
|
||||
{{ option.label }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.segmented-tabs {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 1fr;
|
||||
border-bottom: 1px solid var(--sz-line-strong);
|
||||
}
|
||||
|
||||
.segmented-tabs__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 2.875rem;
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
color: var(--sz-text-faint);
|
||||
box-shadow: inset 0 -2px 0 transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.segmented-tabs__item--on {
|
||||
font-weight: 700;
|
||||
color: var(--sz-text);
|
||||
box-shadow: inset 0 -2px 0 var(--sz-text);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,66 @@
|
||||
<script setup lang="ts">
|
||||
// 스켈레톤 한 덩어리 — 크기와 라운드만 자리마다 다르게 준다.
|
||||
// 움직임을 줄이도록 설정한 기기에서는 쓸어가는 효과를 끈다.
|
||||
|
||||
interface Props {
|
||||
/** 너비 — CSS 길이 문자열 (예: 100%, 5rem) */
|
||||
width?: string
|
||||
/** 높이 — CSS 길이 문자열 */
|
||||
height?: string
|
||||
/** 라운드 — CSS 길이 문자열 */
|
||||
radius?: string
|
||||
/** 가로세로 비율 (예: 720 / 248). 지정하면 height 대신 쓴다 */
|
||||
ratio?: string
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
width: '100%',
|
||||
height: '0.875rem',
|
||||
radius: '0.375rem',
|
||||
ratio: undefined,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span
|
||||
class="skeleton-box"
|
||||
:style="{ width, height: ratio ? undefined : height, borderRadius: radius, aspectRatio: ratio }"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.skeleton-box {
|
||||
display: block;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
background: var(--sz-surface-placeholder);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skeleton-box::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform: translateX(-100%);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.75) 50%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
animation: skeleton-sweep 1.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes skeleton-sweep {
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.skeleton-box::after {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,160 @@
|
||||
/**
|
||||
* 아이콘 정의 — 아트보드에 쓰인 선 아이콘·채움 아이콘의 좌표를 한곳에 모았다.
|
||||
* 색은 그리는 쪽에서 currentColor 로 받는다.
|
||||
*/
|
||||
|
||||
type ShapeTag = 'path' | 'circle' | 'rect'
|
||||
|
||||
export interface IconShape {
|
||||
tag: ShapeTag
|
||||
d?: string
|
||||
cx?: number
|
||||
cy?: number
|
||||
r?: number
|
||||
x?: number
|
||||
y?: number
|
||||
width?: number
|
||||
height?: number
|
||||
rx?: number
|
||||
}
|
||||
|
||||
export interface IconDefinition {
|
||||
viewBox: string
|
||||
/** 선 아이콘인지 채움 아이콘인지 */
|
||||
mode: 'stroke' | 'fill'
|
||||
strokeWidth?: number
|
||||
shapes: IconShape[]
|
||||
}
|
||||
|
||||
// path 하나를 짧게 적기 위한 도우미
|
||||
const p = (d: string): IconShape => ({ tag: 'path', d })
|
||||
|
||||
export const icons = {
|
||||
search: {
|
||||
viewBox: '0 0 24 24',
|
||||
mode: 'stroke',
|
||||
strokeWidth: 2.2,
|
||||
shapes: [{ tag: 'circle', cx: 11, cy: 11, r: 6.5 }, p('M19.5 19.5L16 16')],
|
||||
},
|
||||
menu: {
|
||||
viewBox: '0 0 24 24',
|
||||
mode: 'stroke',
|
||||
strokeWidth: 2,
|
||||
shapes: [p('M4 7h16'), p('M4 12h16'), p('M4 17h16')],
|
||||
},
|
||||
close: {
|
||||
viewBox: '0 0 24 24',
|
||||
mode: 'stroke',
|
||||
strokeWidth: 2,
|
||||
shapes: [p('M6 6l12 12'), p('M18 6L6 18')],
|
||||
},
|
||||
chevronLeft: {
|
||||
viewBox: '0 0 24 24',
|
||||
mode: 'stroke',
|
||||
strokeWidth: 2.3,
|
||||
shapes: [p('M14.5 5l-7 7 7 7')],
|
||||
},
|
||||
chevronRight: {
|
||||
viewBox: '0 0 24 24',
|
||||
mode: 'stroke',
|
||||
strokeWidth: 2.3,
|
||||
shapes: [p('M9.5 5l7 7-7 7')],
|
||||
},
|
||||
album: {
|
||||
viewBox: '0 0 24 24',
|
||||
mode: 'stroke',
|
||||
strokeWidth: 2,
|
||||
shapes: [
|
||||
{ tag: 'rect', x: 8, y: 3, width: 13, height: 13, rx: 3 },
|
||||
p('M16 19.5A2.5 2.5 0 0113.5 22H6a3 3 0 01-3-3V9.5'),
|
||||
],
|
||||
},
|
||||
alert: {
|
||||
viewBox: '0 0 24 24',
|
||||
mode: 'stroke',
|
||||
strokeWidth: 1.8,
|
||||
shapes: [{ tag: 'circle', cx: 12, cy: 12, r: 8.5 }, p('M12 7.5v5'), p('M12 16.2h.01')],
|
||||
},
|
||||
message: {
|
||||
viewBox: '0 0 24 24',
|
||||
mode: 'stroke',
|
||||
strokeWidth: 1.8,
|
||||
shapes: [p('M20 14.5a3 3 0 01-3 3H9.5L5 20.5V6a3 3 0 013-3h9a3 3 0 013 3z')],
|
||||
},
|
||||
shield: {
|
||||
viewBox: '0 0 24 24',
|
||||
mode: 'stroke',
|
||||
strokeWidth: 1.8,
|
||||
shapes: [p('M12 3.5l7 2.8v5.2c0 3.8-2.8 7.2-7 9-4.2-1.8-7-5.2-7-9V6.3z')],
|
||||
},
|
||||
chart: {
|
||||
viewBox: '0 0 24 24',
|
||||
mode: 'stroke',
|
||||
strokeWidth: 1.8,
|
||||
shapes: [p('M4 19.5h16'), p('M7.5 16.5v-4'), p('M12 16.5v-8'), p('M16.5 16.5v-5.5')],
|
||||
},
|
||||
video: {
|
||||
viewBox: '0 0 24 24',
|
||||
mode: 'stroke',
|
||||
strokeWidth: 1.8,
|
||||
shapes: [
|
||||
{ tag: 'rect', x: 3.5, y: 5, width: 17, height: 12.5, rx: 3 },
|
||||
p('M10.5 9.2l4.8 3-4.8 3z'),
|
||||
],
|
||||
},
|
||||
document: {
|
||||
viewBox: '0 0 24 24',
|
||||
mode: 'stroke',
|
||||
strokeWidth: 1.8,
|
||||
shapes: [p('M13.5 3H7.5a2 2 0 00-2 2v14a2 2 0 002 2h9a2 2 0 002-2V8z'), p('M13.5 3v5h5')],
|
||||
},
|
||||
flag: {
|
||||
viewBox: '0 0 24 24',
|
||||
mode: 'stroke',
|
||||
strokeWidth: 1.8,
|
||||
shapes: [p('M4.5 4.5v15'), p('M4.5 5.5h12l-2.4 3.4 2.4 3.4h-12')],
|
||||
},
|
||||
// 계급 자리표시 — 실제 계급 이미지 규격을 받으면 교체한다
|
||||
tierBar: {
|
||||
viewBox: '0 0 24 24',
|
||||
mode: 'stroke',
|
||||
strokeWidth: 2.4,
|
||||
shapes: [p('M5 10l7 4 7-4'), p('M5 15l7 4 7-4')],
|
||||
},
|
||||
tierStar: {
|
||||
viewBox: '0 0 24 24',
|
||||
mode: 'fill',
|
||||
shapes: [p('M12 4l2.3 4.9 5.4.7-3.9 3.8 1 5.3L12 16.2 7.2 18.7l1-5.3L4.3 9.6l5.4-.7z')],
|
||||
},
|
||||
tierDiamond: {
|
||||
viewBox: '0 0 24 24',
|
||||
mode: 'fill',
|
||||
shapes: [p('M12 4.5l5.5 7.5L12 19.5 6.5 12z')],
|
||||
},
|
||||
// 랭크전 티어 자리표시 — 한 줄에 계급과 나란히 놓이므로 표장을 갈라 둔다
|
||||
// (계급은 막대·별·마름모, 티어는 육각, 클랜은 방패)
|
||||
tierHex: {
|
||||
viewBox: '0 0 24 24',
|
||||
mode: 'stroke',
|
||||
strokeWidth: 1.8,
|
||||
shapes: [p('M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z'), p('M9 13.2l3-2.6 3 2.6')],
|
||||
},
|
||||
play: {
|
||||
viewBox: '0 0 24 24',
|
||||
mode: 'fill',
|
||||
shapes: [p('M8 5.5l11 6.5-11 6.5z')],
|
||||
},
|
||||
// 등락 삼각형 — 표에서만 쓰는 작은 아이콘이라 12 격자를 따로 쓴다
|
||||
caretUp: {
|
||||
viewBox: '0 0 12 12',
|
||||
mode: 'fill',
|
||||
shapes: [p('M6 2l4 7H2z')],
|
||||
},
|
||||
caretDown: {
|
||||
viewBox: '0 0 12 12',
|
||||
mode: 'fill',
|
||||
shapes: [p('M6 10L2 3h8z')],
|
||||
},
|
||||
} satisfies Record<string, IconDefinition>
|
||||
|
||||
export type IconName = keyof typeof icons
|
||||
@@ -0,0 +1,253 @@
|
||||
<script setup lang="ts">
|
||||
// 커뮤니티 — 정사각 카드 넷. 사진 · 여러 장 · 글 · 클립 네 종류가 한 격자에 섞인다.
|
||||
import { ref } from 'vue'
|
||||
import AppIcon from '@/components/common/AppIcon.vue'
|
||||
import AvatarCircle from '@/components/common/AvatarCircle.vue'
|
||||
import PillTabs from '@/components/common/PillTabs.vue'
|
||||
import SectionBoundary from '@/components/common/SectionBoundary.vue'
|
||||
import SectionHeader from '@/components/common/SectionHeader.vue'
|
||||
import SkeletonBox from '@/components/common/SkeletonBox.vue'
|
||||
import type { SectionResource } from '@/composables/useSectionResource'
|
||||
import { formatCount } from '@/shared/utils/format'
|
||||
import type { CommunityPost, RankTabOption } from '@/types/home'
|
||||
|
||||
interface Props {
|
||||
resource: SectionResource<CommunityPost[]>
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const tabOptions: RankTabOption[] = [
|
||||
{ value: 'popular', label: '인기' },
|
||||
{ value: 'latest', label: '최신' },
|
||||
{ value: 'clip', label: '클립' },
|
||||
]
|
||||
|
||||
const selectedTab = ref('popular')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<SectionHeader
|
||||
title="커뮤니티"
|
||||
more-label="전체 보기"
|
||||
/>
|
||||
|
||||
<PillTabs
|
||||
v-model="selectedTab"
|
||||
:options="tabOptions"
|
||||
label="커뮤니티 정렬"
|
||||
/>
|
||||
|
||||
<SectionBoundary
|
||||
class="community__body"
|
||||
:status="resource.status.value"
|
||||
:error-message="resource.errorMessage.value"
|
||||
empty-title="아직 올라온 글이 없어요"
|
||||
empty-link-label="첫 글 쓰러 가기"
|
||||
min-height="24rem"
|
||||
@retry="resource.reload"
|
||||
>
|
||||
<template #skeleton>
|
||||
<div class="community__grid">
|
||||
<SkeletonBox
|
||||
v-for="index in 4"
|
||||
:key="index"
|
||||
ratio="1 / 1"
|
||||
:radius="'var(--sz-radius-post)'"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="community__grid">
|
||||
<a
|
||||
v-for="post in resource.data.value ?? []"
|
||||
:key="post.id"
|
||||
class="community__card"
|
||||
:class="`community__card--${post.kind}`"
|
||||
:style="{ background: post.placeholderColor }"
|
||||
href="#"
|
||||
>
|
||||
<!-- 사진이 없는 글은 본문이 그대로 카드가 된다 -->
|
||||
<p
|
||||
v-if="post.kind === 'text'"
|
||||
class="community__excerpt"
|
||||
>
|
||||
{{ post.excerpt }}
|
||||
</p>
|
||||
|
||||
<img
|
||||
v-else-if="post.thumbnailUrl"
|
||||
class="community__thumb"
|
||||
:src="post.thumbnailUrl"
|
||||
:alt="post.excerpt ?? ''"
|
||||
>
|
||||
|
||||
<!-- 여러 장 표시 -->
|
||||
<span
|
||||
v-if="post.kind === 'album'"
|
||||
class="community__album"
|
||||
>
|
||||
<AppIcon
|
||||
name="album"
|
||||
:size="17"
|
||||
/>
|
||||
</span>
|
||||
|
||||
<!-- 클립 재생 표시 -->
|
||||
<span
|
||||
v-if="post.kind === 'clip'"
|
||||
class="community__play"
|
||||
>
|
||||
<AppIcon
|
||||
name="play"
|
||||
:size="17"
|
||||
/>
|
||||
</span>
|
||||
|
||||
<div class="community__author">
|
||||
<AvatarCircle
|
||||
size="1.25rem"
|
||||
:color="post.authorAvatarColor"
|
||||
:image-url="post.authorAvatarUrl"
|
||||
/>
|
||||
<span class="community__nickname">{{ post.authorNickname }}</span>
|
||||
<span class="community__count">{{ formatCount(post.reactionCount) }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</SectionBoundary>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.community__body {
|
||||
margin-top: 0.875rem;
|
||||
}
|
||||
|
||||
.community__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.community__card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
aspect-ratio: 1 / 1;
|
||||
border-radius: var(--sz-radius-post);
|
||||
color: inherit;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.community__thumb {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.community__excerpt {
|
||||
margin: 0;
|
||||
padding: 1rem 1rem 0;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
font-weight: 500;
|
||||
color: var(--sz-text);
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.community__album {
|
||||
position: absolute;
|
||||
top: 0.625rem;
|
||||
right: 0.625rem;
|
||||
color: var(--sz-text-invert);
|
||||
}
|
||||
|
||||
.community__play {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
border-radius: var(--sz-radius-pill);
|
||||
background: var(--sz-scrim-strong);
|
||||
color: var(--sz-text-invert);
|
||||
}
|
||||
|
||||
.community__author {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4375rem;
|
||||
margin-top: auto;
|
||||
height: 2.625rem;
|
||||
padding: 0 0.75rem;
|
||||
/* 사진 위에서는 어두운 띠 위에, 글 카드에서는 바탕 위에 그대로 */
|
||||
background: var(--sz-scrim);
|
||||
color: var(--sz-text-invert);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.community__card--text .community__author {
|
||||
height: auto;
|
||||
padding: 0 1rem 1rem;
|
||||
background: none;
|
||||
color: var(--sz-text);
|
||||
}
|
||||
|
||||
.community__nickname {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.community__count {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.community__card--text .community__count {
|
||||
color: var(--sz-text-sub);
|
||||
}
|
||||
|
||||
@media (max-width: 47.9375rem) {
|
||||
.community__grid {
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.community__card {
|
||||
border-radius: var(--sz-radius-md);
|
||||
}
|
||||
|
||||
.community__excerpt {
|
||||
padding: 0.875rem 0.875rem 0;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.community__author {
|
||||
height: 2.375rem;
|
||||
padding: 0 0.625rem;
|
||||
gap: 0.375rem;
|
||||
font-size: 0.6875rem;
|
||||
}
|
||||
|
||||
.community__card--text .community__author {
|
||||
padding: 0 0.875rem 0.875rem;
|
||||
}
|
||||
|
||||
.community__play {
|
||||
width: 2.375rem;
|
||||
height: 2.375rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,342 @@
|
||||
<script setup lang="ts">
|
||||
// 이벤트 — 가로형 배너(720:248)를 한 장씩 넘겨 본다.
|
||||
// 데스크톱은 화살표로, 모바일은 옆으로 밀어서 넘긴다(스크롤 스냅).
|
||||
import { ref } from 'vue'
|
||||
import AppIcon from '@/components/common/AppIcon.vue'
|
||||
import SectionBoundary from '@/components/common/SectionBoundary.vue'
|
||||
import SectionHeader from '@/components/common/SectionHeader.vue'
|
||||
import SkeletonBox from '@/components/common/SkeletonBox.vue'
|
||||
import type { SectionResource } from '@/composables/useSectionResource'
|
||||
import type { EventBanner } from '@/types/home'
|
||||
|
||||
interface Props {
|
||||
resource: SectionResource<EventBanner[]>
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const trackRef = ref<HTMLElement | null>(null)
|
||||
const activeIndex = ref(0)
|
||||
|
||||
// 스크롤 위치로 지금 보고 있는 배너를 알아낸다 — 밀어서 넘겼을 때도 점이 따라온다
|
||||
function syncActiveIndex() {
|
||||
const track = trackRef.value
|
||||
if (!track || track.clientWidth === 0) return
|
||||
activeIndex.value = Math.round(track.scrollLeft / track.clientWidth)
|
||||
}
|
||||
|
||||
function goTo(index: number) {
|
||||
const track = trackRef.value
|
||||
const banners = props.resource.data.value
|
||||
if (!track || !banners) return
|
||||
|
||||
const clamped = Math.min(Math.max(index, 0), banners.length - 1)
|
||||
track.scrollTo({ left: clamped * track.clientWidth, behavior: 'smooth' })
|
||||
}
|
||||
|
||||
const currentBanner = () => props.resource.data.value?.[activeIndex.value]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="event-section">
|
||||
<SectionHeader
|
||||
title="이벤트"
|
||||
more-label="전체 보기"
|
||||
/>
|
||||
|
||||
<SectionBoundary
|
||||
:status="resource.status.value"
|
||||
:error-message="resource.errorMessage.value"
|
||||
empty-title="진행 중인 이벤트가 없어요"
|
||||
empty-description="새 이벤트가 열리면 알려 드릴게요"
|
||||
empty-icon="flag"
|
||||
min-height="20rem"
|
||||
@retry="resource.reload"
|
||||
>
|
||||
<template #skeleton>
|
||||
<SkeletonBox
|
||||
ratio="720 / 248"
|
||||
:radius="'var(--sz-radius-xl)'"
|
||||
/>
|
||||
<div class="event-section__meta">
|
||||
<SkeletonBox
|
||||
width="5rem"
|
||||
height="0.875rem"
|
||||
/>
|
||||
<SkeletonBox
|
||||
width="12rem"
|
||||
height="1rem"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="event-section__banners">
|
||||
<div
|
||||
ref="trackRef"
|
||||
class="event-section__track"
|
||||
@scroll.passive="syncActiveIndex"
|
||||
>
|
||||
<a
|
||||
v-for="banner in resource.data.value ?? []"
|
||||
:key="banner.id"
|
||||
class="event-section__slide"
|
||||
href="#"
|
||||
>
|
||||
<img
|
||||
v-if="banner.imageUrl"
|
||||
class="event-section__image"
|
||||
:src="banner.imageUrl"
|
||||
:alt="banner.title"
|
||||
>
|
||||
<span
|
||||
v-else
|
||||
class="event-section__image event-section__image--placeholder"
|
||||
:style="{ background: banner.placeholderColor }"
|
||||
role="img"
|
||||
:aria-label="banner.title"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="event-section__meta">
|
||||
<span class="event-section__category">{{ currentBanner()?.category }}</span>
|
||||
<span class="event-section__divider" />
|
||||
<span class="event-section__title">{{ currentBanner()?.title }}</span>
|
||||
<span class="event-section__period">{{ currentBanner()?.period }}</span>
|
||||
|
||||
<span class="event-section__spacer" />
|
||||
|
||||
<div
|
||||
class="event-section__dots"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<span
|
||||
v-for="(banner, index) in resource.data.value ?? []"
|
||||
:key="banner.id"
|
||||
class="event-section__dot"
|
||||
:class="{ 'event-section__dot--on': index === activeIndex }"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span class="event-section__counter">
|
||||
{{ activeIndex + 1 }} / {{ (resource.data.value ?? []).length }}
|
||||
</span>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="event-section__arrow"
|
||||
aria-label="이전 이벤트"
|
||||
:disabled="activeIndex === 0"
|
||||
@click="goTo(activeIndex - 1)"
|
||||
>
|
||||
<AppIcon
|
||||
name="chevronLeft"
|
||||
:size="14"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="event-section__arrow"
|
||||
aria-label="다음 이벤트"
|
||||
:disabled="activeIndex >= (resource.data.value ?? []).length - 1"
|
||||
@click="goTo(activeIndex + 1)"
|
||||
>
|
||||
<AppIcon
|
||||
name="chevronRight"
|
||||
:size="14"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</SectionBoundary>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.event-section__banners {
|
||||
border: 1px solid var(--sz-line);
|
||||
border-radius: var(--sz-radius-xl);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.event-section__track {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.event-section__track::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.event-section__slide {
|
||||
flex: 0 0 100%;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
.event-section__image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
aspect-ratio: 720 / 248;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.event-section__image--placeholder {
|
||||
background: var(--sz-surface-placeholder);
|
||||
}
|
||||
|
||||
.event-section__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
height: 3.5rem;
|
||||
}
|
||||
|
||||
.event-section__category {
|
||||
flex-shrink: 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--sz-text-faint);
|
||||
}
|
||||
|
||||
.event-section__divider {
|
||||
flex-shrink: 0;
|
||||
width: 1px;
|
||||
height: 0.75rem;
|
||||
background: var(--sz-line-strong);
|
||||
}
|
||||
|
||||
.event-section__title {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.event-section__period {
|
||||
flex-shrink: 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--sz-text-faint);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.event-section__spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.event-section__dots {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.event-section__dot {
|
||||
width: 0.3125rem;
|
||||
height: 0.3125rem;
|
||||
border-radius: var(--sz-radius-pill);
|
||||
background: #d6dae0;
|
||||
}
|
||||
|
||||
.event-section__dot--on {
|
||||
width: 1.375rem;
|
||||
background: var(--sz-text);
|
||||
}
|
||||
|
||||
.event-section__counter {
|
||||
margin: 0 0.25rem 0 0.5rem;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--sz-text-faint);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.event-section__arrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
width: 2.125rem;
|
||||
height: 2.125rem;
|
||||
border: 1px solid var(--sz-line-strong);
|
||||
border-radius: var(--sz-radius-pill);
|
||||
background: var(--sz-surface);
|
||||
color: var(--sz-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.event-section__arrow:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* ---------- 태블릿 — 화살표와 장수 표시를 접는다 ---------- */
|
||||
@media (max-width: 74.9375rem) {
|
||||
.event-section__banners {
|
||||
border-radius: var(--sz-radius-lg);
|
||||
}
|
||||
|
||||
.event-section__meta {
|
||||
height: 3.25rem;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.event-section__counter,
|
||||
.event-section__arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- 모바일 — 제목과 점을 한 줄, 분류·기간을 아랫줄 ---------- */
|
||||
@media (max-width: 47.9375rem) {
|
||||
.event-section__banners {
|
||||
border-radius: var(--sz-radius-md);
|
||||
}
|
||||
|
||||
.event-section__meta {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
height: auto;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.event-section__title {
|
||||
order: 1;
|
||||
flex-grow: 1;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.event-section__dots {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.event-section__dot {
|
||||
width: 0.25rem;
|
||||
height: 0.25rem;
|
||||
}
|
||||
|
||||
.event-section__dot--on {
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.event-section__category {
|
||||
order: 3;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.event-section__divider {
|
||||
order: 4;
|
||||
height: 0.625rem;
|
||||
}
|
||||
|
||||
.event-section__period {
|
||||
order: 5;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.event-section__spacer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,227 @@
|
||||
<script setup lang="ts">
|
||||
// 게임 랭킹 — 계급 · 랭크전 · 클랜 세 갈래.
|
||||
// 데스크톱은 한 칸에 하나씩 세 갈래를 나란히 두고,
|
||||
// 태블릿·모바일은 폭이 모자라 갈래 세그먼트로 하나씩 고른다.
|
||||
import { computed, ref } from 'vue'
|
||||
import PillTabs from '@/components/common/PillTabs.vue'
|
||||
import SectionBoundary from '@/components/common/SectionBoundary.vue'
|
||||
import SectionHeader from '@/components/common/SectionHeader.vue'
|
||||
import SegmentedTabs from '@/components/common/SegmentedTabs.vue'
|
||||
import RankPagination from '@/components/home/RankPagination.vue'
|
||||
import RankingTable from '@/components/home/RankingTable.vue'
|
||||
import { toClanRows, toUserRows } from '@/components/home/ranking-table'
|
||||
import { BREAKPOINT, useMediaQuery } from '@/composables/useMediaQuery'
|
||||
import type { SectionResource } from '@/composables/useSectionResource'
|
||||
import type { GameRanking, GameRankBranch, RankTabOption } from '@/types/home'
|
||||
|
||||
interface Props {
|
||||
resource: SectionResource<GameRanking>
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const UPDATE_NOTE = '매일 오전 8시 갱신'
|
||||
|
||||
const branchOptions: RankTabOption[] = [
|
||||
{ value: 'tier', label: '계급' },
|
||||
{ value: 'ranked', label: '랭크전' },
|
||||
{ value: 'clan', label: '클랜' },
|
||||
]
|
||||
|
||||
// 갈래마다 하위 탭이 다르다
|
||||
const subTabOptions: Record<GameRankBranch, RankTabOption[]> = {
|
||||
tier: [
|
||||
{ value: 'total', label: '통합' },
|
||||
{ value: 'season', label: '시즌' },
|
||||
],
|
||||
ranked: [
|
||||
{ value: 'solo', label: '솔로' },
|
||||
{ value: 'party', label: '파티' },
|
||||
{ value: 'clan', label: '클랜' },
|
||||
],
|
||||
clan: [
|
||||
{ value: 'official', label: '공식' },
|
||||
{ value: 'normal', label: '일반' },
|
||||
],
|
||||
}
|
||||
|
||||
const branchTitle: Record<GameRankBranch, string> = {
|
||||
tier: '계급 랭킹',
|
||||
ranked: '랭크전 랭킹',
|
||||
clan: '클랜 랭킹',
|
||||
}
|
||||
|
||||
// 갈래별로 고른 하위 탭을 따로 기억한다 — 갈래를 옮겨도 되돌아왔을 때 그대로다
|
||||
const selectedSubTab = ref<Record<GameRankBranch, string>>({
|
||||
tier: 'total',
|
||||
ranked: 'solo',
|
||||
clan: 'official',
|
||||
})
|
||||
|
||||
// 태블릿 이하에서만 갈래를 하나씩 고른다
|
||||
const isSegmented = useMediaQuery(BREAKPOINT.tabletDown)
|
||||
const selectedBranch = ref<GameRankBranch>('tier')
|
||||
|
||||
const page = ref(1)
|
||||
|
||||
// 표에 그릴 줄로 옮긴다 — 유저 랭킹과 클랜 랭킹의 모양을 하나로 맞춘다
|
||||
const rowsOf = (branch: GameRankBranch) => {
|
||||
const data = props.resource.data.value
|
||||
if (!data) return []
|
||||
if (branch === 'clan') return toClanRows(data.clan)
|
||||
return toUserRows(branch === 'tier' ? data.tier : data.ranked)
|
||||
}
|
||||
|
||||
const visibleBranches = computed<GameRankBranch[]>(() =>
|
||||
isSegmented.value ? [selectedBranch.value] : ['tier', 'ranked', 'clan'],
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<SectionHeader
|
||||
title="게임 랭킹"
|
||||
:note="UPDATE_NOTE"
|
||||
more-label="전체 보기"
|
||||
/>
|
||||
|
||||
<SectionBoundary
|
||||
:status="resource.status.value"
|
||||
:error-message="resource.errorMessage.value"
|
||||
empty-title="이번 시즌 랭킹이 아직 열리지 않았어요"
|
||||
empty-link-label="지난 시즌 보기"
|
||||
empty-icon="chart"
|
||||
min-height="30rem"
|
||||
@retry="resource.reload"
|
||||
>
|
||||
<template #skeleton>
|
||||
<!-- 표의 뼈대는 그대로 두고 값만 회색으로 — 도착했을 때 자리가 튀지 않는다 -->
|
||||
<div class="game-rank__branches">
|
||||
<div
|
||||
v-for="branch in visibleBranches"
|
||||
:key="branch"
|
||||
class="game-rank__branch"
|
||||
>
|
||||
<div class="game-rank__branch-title">
|
||||
{{ branchTitle[branch] }}
|
||||
</div>
|
||||
<PillTabs
|
||||
v-model="selectedSubTab[branch]"
|
||||
class="game-rank__sub-tabs"
|
||||
:options="subTabOptions[branch]"
|
||||
:label="`${branchTitle[branch]} 하위 탭`"
|
||||
/>
|
||||
<RankingTable
|
||||
class="game-rank__table"
|
||||
:rows="[]"
|
||||
:label-head="branch === 'clan' ? '클랜' : '유저'"
|
||||
:show-rp="branch === 'ranked'"
|
||||
loading
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 태블릿 이하 — 갈래를 하나씩 고른다 -->
|
||||
<SegmentedTabs
|
||||
v-if="isSegmented"
|
||||
class="game-rank__segments"
|
||||
:model-value="selectedBranch"
|
||||
:options="branchOptions"
|
||||
label="게임 랭킹 갈래"
|
||||
@update:model-value="selectedBranch = $event as GameRankBranch"
|
||||
/>
|
||||
|
||||
<div class="game-rank__branches">
|
||||
<div
|
||||
v-for="branch in visibleBranches"
|
||||
:key="branch"
|
||||
class="game-rank__branch"
|
||||
>
|
||||
<div
|
||||
v-if="!isSegmented"
|
||||
class="game-rank__branch-title"
|
||||
>
|
||||
{{ branchTitle[branch] }}
|
||||
</div>
|
||||
|
||||
<div class="game-rank__tab-row">
|
||||
<PillTabs
|
||||
v-model="selectedSubTab[branch]"
|
||||
class="game-rank__sub-tabs"
|
||||
:options="subTabOptions[branch]"
|
||||
:label="`${branchTitle[branch]} 하위 탭`"
|
||||
/>
|
||||
<span
|
||||
v-if="isSegmented"
|
||||
class="game-rank__note"
|
||||
>{{ UPDATE_NOTE }}</span>
|
||||
</div>
|
||||
|
||||
<RankingTable
|
||||
class="game-rank__table"
|
||||
:rows="rowsOf(branch)"
|
||||
:label-head="branch === 'clan' ? '클랜' : '유저'"
|
||||
:show-rp="branch === 'ranked'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<RankPagination
|
||||
v-model:page="page"
|
||||
:page-size="resource.data.value?.pageSize ?? 10"
|
||||
:total-count="resource.data.value?.totalCount ?? 0"
|
||||
/>
|
||||
</SectionBoundary>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.game-rank__branches {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.game-rank__branch-title {
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.game-rank__tab-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 0.625rem;
|
||||
}
|
||||
|
||||
.game-rank__note {
|
||||
margin-left: auto;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--sz-text-faint);
|
||||
}
|
||||
|
||||
.game-rank__table {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.game-rank__segments {
|
||||
margin-bottom: 0.875rem;
|
||||
}
|
||||
|
||||
/* 태블릿 이하 — 한 갈래만 보이므로 한 열로 */
|
||||
@media (max-width: 74.9375rem) {
|
||||
.game-rank__branches {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.game-rank__tab-row {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 47.9375rem) {
|
||||
.game-rank__note {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,127 @@
|
||||
<script setup lang="ts">
|
||||
// 소식 목록 — 서든어택 소식과 서린즈 소식이 같은 컴포넌트를 쓴다.
|
||||
// 「신규」는 옅은 배경 뱃지 대신 브랜드 글자색만으로 표시한다.
|
||||
import { ref } from 'vue'
|
||||
import PillTabs from '@/components/common/PillTabs.vue'
|
||||
import SectionBoundary from '@/components/common/SectionBoundary.vue'
|
||||
import SectionHeader from '@/components/common/SectionHeader.vue'
|
||||
import SkeletonBox from '@/components/common/SkeletonBox.vue'
|
||||
import type { SectionResource } from '@/composables/useSectionResource'
|
||||
import type { NewsItem, RankTabOption } from '@/types/home'
|
||||
|
||||
interface Props {
|
||||
title: string
|
||||
resource: SectionResource<NewsItem[]>
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const tabOptions: RankTabOption[] = [
|
||||
{ value: 'notice', label: '공지사항' },
|
||||
{ value: 'update', label: '업데이트' },
|
||||
]
|
||||
|
||||
const selectedTab = ref('notice')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<SectionHeader
|
||||
:title="title"
|
||||
more-label="더 보기"
|
||||
/>
|
||||
|
||||
<PillTabs
|
||||
v-model="selectedTab"
|
||||
:options="tabOptions"
|
||||
:label="`${title} 분류`"
|
||||
/>
|
||||
|
||||
<SectionBoundary
|
||||
class="news__body"
|
||||
:status="resource.status.value"
|
||||
:error-message="resource.errorMessage.value"
|
||||
empty-title="등록된 소식이 없어요"
|
||||
empty-icon="document"
|
||||
min-height="18rem"
|
||||
@retry="resource.reload"
|
||||
>
|
||||
<template #skeleton>
|
||||
<div
|
||||
v-for="index in 6"
|
||||
:key="index"
|
||||
class="news__row"
|
||||
>
|
||||
<SkeletonBox
|
||||
width="60%"
|
||||
height="0.875rem"
|
||||
/>
|
||||
<SkeletonBox
|
||||
width="2.25rem"
|
||||
height="0.8125rem"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<a
|
||||
v-for="item in resource.data.value ?? []"
|
||||
:key="item.id"
|
||||
class="news__row"
|
||||
href="#"
|
||||
>
|
||||
<span class="news__title">{{ item.title }}</span>
|
||||
<span
|
||||
v-if="item.isNew"
|
||||
class="news__new"
|
||||
>신규</span>
|
||||
<span class="news__date">{{ item.date }}</span>
|
||||
</a>
|
||||
</SectionBoundary>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.news__body {
|
||||
margin-top: 0.75rem;
|
||||
border-top: 1px solid var(--sz-line-strong);
|
||||
}
|
||||
|
||||
.news__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
height: 2.875rem;
|
||||
border-bottom: 1px solid var(--sz-line-row);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.news__title {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.news__new {
|
||||
flex-shrink: 0;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 700;
|
||||
color: var(--sz-brand-text);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.news__date {
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
padding-left: 0.625rem;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--sz-text-faint);
|
||||
}
|
||||
|
||||
@media (max-width: 47.9375rem) {
|
||||
.news__row {
|
||||
height: 3.125rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,201 @@
|
||||
<script setup lang="ts">
|
||||
// 순위 구간 이동 — 세 랭킹이 같은 구간을 함께 본다.
|
||||
import { computed } from 'vue'
|
||||
import AppIcon from '@/components/common/AppIcon.vue'
|
||||
|
||||
interface Props {
|
||||
/** 지금 보고 있는 구간 (1부터) */
|
||||
page: number
|
||||
/** 한 구간에 보여 주는 순위 수 */
|
||||
pageSize: number
|
||||
/** 전체 순위 수 */
|
||||
totalCount: number
|
||||
/** 한 번에 늘어놓을 구간 번호 개수 */
|
||||
visibleCount?: number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
visibleCount: 5,
|
||||
})
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:page', page: number): void
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const lastPage = computed(() => Math.max(1, Math.ceil(props.totalCount / props.pageSize)))
|
||||
|
||||
// 앞쪽 몇 개를 늘어놓고, 사이를 줄임표로 접은 뒤 마지막 구간을 붙인다
|
||||
const pages = computed<(number | 'gap')[]>(() => {
|
||||
const total = lastPage.value
|
||||
if (total <= props.visibleCount + 1) {
|
||||
return Array.from({ length: total }, (_, index) => index + 1)
|
||||
}
|
||||
|
||||
const start = Math.min(Math.max(1, props.page - 2), total - props.visibleCount)
|
||||
const head = Array.from({ length: props.visibleCount }, (_, index) => start + index)
|
||||
return [...head, 'gap', total]
|
||||
})
|
||||
|
||||
const rangeLabel = computed(() => {
|
||||
const from = (props.page - 1) * props.pageSize + 1
|
||||
const to = Math.min(props.page * props.pageSize, props.totalCount)
|
||||
return `${from} ~ ${to}위 · 전체 ${props.totalCount}위`
|
||||
})
|
||||
|
||||
function move(page: number) {
|
||||
if (page < 1 || page > lastPage.value || page === props.page) return
|
||||
emit('update:page', page)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="rank-pagination">
|
||||
<span class="rank-pagination__range">{{ rangeLabel }}</span>
|
||||
<span class="rank-pagination__spacer" />
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="rank-pagination__arrow"
|
||||
aria-label="이전 구간"
|
||||
:disabled="page === 1"
|
||||
@click="move(page - 1)"
|
||||
>
|
||||
<AppIcon
|
||||
name="chevronLeft"
|
||||
:size="14"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<div class="rank-pagination__pages">
|
||||
<template
|
||||
v-for="(item, index) in pages"
|
||||
:key="`${item}-${index}`"
|
||||
>
|
||||
<span
|
||||
v-if="item === 'gap'"
|
||||
class="rank-pagination__gap"
|
||||
aria-hidden="true"
|
||||
>…</span>
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="rank-pagination__page"
|
||||
:class="{ 'rank-pagination__page--on': item === page }"
|
||||
:aria-current="item === page ? 'page' : undefined"
|
||||
@click="move(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="rank-pagination__arrow"
|
||||
aria-label="다음 구간"
|
||||
:disabled="page === lastPage"
|
||||
@click="move(page + 1)"
|
||||
>
|
||||
<AppIcon
|
||||
name="chevronRight"
|
||||
:size="14"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.rank-pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1.5rem;
|
||||
padding-top: 1.25rem;
|
||||
border-top: 1px solid var(--sz-line);
|
||||
}
|
||||
|
||||
.rank-pagination__range {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--sz-text-faint);
|
||||
}
|
||||
|
||||
.rank-pagination__spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.rank-pagination__arrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
width: 2.125rem;
|
||||
height: 2.125rem;
|
||||
border: 1px solid var(--sz-line-strong);
|
||||
border-radius: var(--sz-radius-pill);
|
||||
background: var(--sz-surface);
|
||||
color: var(--sz-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rank-pagination__arrow:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.rank-pagination__pages {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.125rem;
|
||||
}
|
||||
|
||||
.rank-pagination__page {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 2.125rem;
|
||||
height: 2.125rem;
|
||||
padding: 0 0.5rem;
|
||||
border: none;
|
||||
border-radius: var(--sz-radius-pill);
|
||||
background: none;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--sz-text-sub);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rank-pagination__page--on {
|
||||
background: var(--sz-text);
|
||||
font-weight: 700;
|
||||
color: var(--sz-text-invert);
|
||||
}
|
||||
|
||||
.rank-pagination__gap {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 1.625rem;
|
||||
height: 2.125rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--sz-text-faint);
|
||||
}
|
||||
|
||||
@media (max-width: 47.9375rem) {
|
||||
/* 좁은 폭에서는 구간 문구를 윗줄로 올린다 */
|
||||
.rank-pagination {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.rank-pagination__range {
|
||||
flex-basis: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rank-pagination__spacer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,250 @@
|
||||
<script setup lang="ts">
|
||||
// 랭킹 표 — 계급 · 랭크전 · 클랜 세 갈래가 같은 표를 쓴다.
|
||||
// 승률 · K/D · 헤드샷 · 판수는 두지 않는다. 순위와 등락, 랭크전의 RP 만 남긴다.
|
||||
import RankBadge from '@/components/common/RankBadge.vue'
|
||||
import RankMovementCell from '@/components/common/RankMovementCell.vue'
|
||||
import SkeletonBox from '@/components/common/SkeletonBox.vue'
|
||||
import { formatCount } from '@/shared/utils/format'
|
||||
import type { RankingRow } from '@/components/home/ranking-table'
|
||||
|
||||
interface Props {
|
||||
rows: RankingRow[]
|
||||
/** 이름 열의 머리말 — 유저 / 클랜 */
|
||||
labelHead: string
|
||||
/** RP 열을 둘지 — 랭크전 랭킹에만 둔다 */
|
||||
showRp?: boolean
|
||||
/** 표 대신 스켈레톤을 그린다 */
|
||||
loading?: boolean
|
||||
/** 스켈레톤 줄 수 */
|
||||
skeletonRows?: number
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
showRp: false,
|
||||
loading: false,
|
||||
skeletonRows: 10,
|
||||
})
|
||||
|
||||
// 1~3위만 진하게
|
||||
const isTop = (rank: number) => rank <= 3
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="ranking-table"
|
||||
:class="{ 'ranking-table--rp': showRp }"
|
||||
>
|
||||
<div class="ranking-table__head">
|
||||
<span class="ranking-table__th">#</span>
|
||||
<span />
|
||||
<span class="ranking-table__th">{{ labelHead }}</span>
|
||||
<span
|
||||
v-if="showRp"
|
||||
class="ranking-table__th ranking-table__th--right"
|
||||
>RP</span>
|
||||
<span class="ranking-table__th ranking-table__th--right">등락</span>
|
||||
</div>
|
||||
|
||||
<template v-if="loading">
|
||||
<div
|
||||
v-for="index in skeletonRows"
|
||||
:key="index"
|
||||
class="ranking-table__row"
|
||||
>
|
||||
<SkeletonBox
|
||||
width="0.75rem"
|
||||
height="0.875rem"
|
||||
/>
|
||||
<SkeletonBox
|
||||
width="1.625rem"
|
||||
height="1.625rem"
|
||||
:radius="'var(--sz-radius-tile)'"
|
||||
/>
|
||||
<SkeletonBox
|
||||
width="60%"
|
||||
height="0.875rem"
|
||||
/>
|
||||
<span
|
||||
v-if="showRp"
|
||||
class="ranking-table__score"
|
||||
>
|
||||
<SkeletonBox
|
||||
width="1.625rem"
|
||||
height="1.625rem"
|
||||
:radius="'var(--sz-radius-tile)'"
|
||||
/>
|
||||
<span class="ranking-table__rp">
|
||||
<SkeletonBox
|
||||
width="2.125rem"
|
||||
height="0.875rem"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
<SkeletonBox
|
||||
width="1.5rem"
|
||||
height="0.875rem"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<a
|
||||
v-for="row in rows"
|
||||
:key="row.rank"
|
||||
class="ranking-table__row"
|
||||
href="#"
|
||||
>
|
||||
<span
|
||||
class="ranking-table__rank"
|
||||
:class="{ 'ranking-table__rank--top': isTop(row.rank) }"
|
||||
>{{ row.rank }}</span>
|
||||
<RankBadge
|
||||
:variant="row.badgeVariant"
|
||||
:shape="row.badgeShape"
|
||||
:image-url="row.badgeImageUrl"
|
||||
:alt="row.label"
|
||||
:size="row.badgeVariant === 'clan' ? '1.75rem' : '1.625rem'"
|
||||
/>
|
||||
<span class="ranking-table__label">{{ row.label }}</span>
|
||||
<!-- 티어와 RP 는 한 몸으로 읽혀야 해서 한 칸에 붙여 둔다 -->
|
||||
<span
|
||||
v-if="showRp"
|
||||
class="ranking-table__score"
|
||||
>
|
||||
<RankBadge
|
||||
variant="tier"
|
||||
:image-url="row.tierImageUrl"
|
||||
:alt="`${row.label} 티어`"
|
||||
size="1.625rem"
|
||||
/>
|
||||
<span class="ranking-table__rp">
|
||||
{{ row.rp === undefined ? '-' : formatCount(row.rp) }}
|
||||
</span>
|
||||
</span>
|
||||
<RankMovementCell
|
||||
:movement="row.movement"
|
||||
font-size="0.75rem"
|
||||
:icon-size="9"
|
||||
/>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ranking-table__head,
|
||||
.ranking-table__row {
|
||||
display: grid;
|
||||
grid-template-columns: 1.125rem 1.625rem minmax(0, 1fr) 2.375rem;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* 랭크전 랭킹 — 티어와 RP 가 한 칸(4.5rem)을 나눠 쓴다.
|
||||
표 전체 칸 간격 0.5rem 을 그대로 두면 티어가 닉네임과 RP 중간에 떠 보인다. */
|
||||
.ranking-table--rp .ranking-table__head,
|
||||
.ranking-table--rp .ranking-table__row {
|
||||
grid-template-columns: 1.125rem 1.625rem minmax(0, 1fr) 4.5rem 2.125rem;
|
||||
}
|
||||
|
||||
.ranking-table__head {
|
||||
height: 2rem;
|
||||
border-bottom: 1px solid var(--sz-line-strong);
|
||||
}
|
||||
|
||||
.ranking-table__th {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--sz-text-faint);
|
||||
}
|
||||
|
||||
.ranking-table__th--right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ranking-table__row {
|
||||
height: var(--sz-row-h);
|
||||
border-bottom: 1px solid var(--sz-line-row);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.ranking-table__row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.ranking-table__rank {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--sz-text-faint);
|
||||
}
|
||||
|
||||
.ranking-table__rank--top {
|
||||
font-weight: 700;
|
||||
color: var(--sz-text);
|
||||
}
|
||||
|
||||
.ranking-table__label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 티어 타일 + RP 한 칸 */
|
||||
.ranking-table__score {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
/* RP 는 폭을 고정해 두어 자릿수가 달라져도 티어가 세로로 줄맞춤된다 */
|
||||
.ranking-table__rp {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
width: 2.625rem;
|
||||
text-align: right;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ---------- 태블릿 · 모바일 — 한 갈래만 넓게 보이므로 열을 키운다 ---------- */
|
||||
@media (max-width: 74.9375rem) {
|
||||
.ranking-table__head,
|
||||
.ranking-table__row {
|
||||
grid-template-columns: 1.5rem 1.75rem minmax(0, 1fr) 3.75rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.ranking-table--rp .ranking-table__head,
|
||||
.ranking-table--rp .ranking-table__row {
|
||||
grid-template-columns: 1.5rem 1.75rem minmax(0, 1fr) 6rem 3.75rem;
|
||||
}
|
||||
|
||||
.ranking-table__rp {
|
||||
width: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 47.9375rem) {
|
||||
.ranking-table__head,
|
||||
.ranking-table__row {
|
||||
grid-template-columns: 1.375rem 1.75rem minmax(0, 1fr) 2.75rem;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.ranking-table--rp .ranking-table__head,
|
||||
.ranking-table--rp .ranking-table__row {
|
||||
grid-template-columns: 1.375rem 1.75rem minmax(0, 1fr) 5.25rem 2.75rem;
|
||||
}
|
||||
|
||||
.ranking-table__rp {
|
||||
width: 3.25rem;
|
||||
}
|
||||
|
||||
.ranking-table__row {
|
||||
height: var(--sz-row-h-mobile);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,154 @@
|
||||
<script setup lang="ts">
|
||||
// 검색 랭킹 — 서린즈에서 많이 찾아본 닉네임. 승률·K/D 같은 지표는 두지 않는다.
|
||||
import { computed } from 'vue'
|
||||
import RankMovementCell from '@/components/common/RankMovementCell.vue'
|
||||
import SectionBoundary from '@/components/common/SectionBoundary.vue'
|
||||
import SectionHeader from '@/components/common/SectionHeader.vue'
|
||||
import SkeletonBox from '@/components/common/SkeletonBox.vue'
|
||||
import type { SectionResource } from '@/composables/useSectionResource'
|
||||
import { formatClockTime } from '@/shared/utils/format'
|
||||
import type { SearchRankEntry } from '@/types/home'
|
||||
|
||||
interface Props {
|
||||
resource: SectionResource<SearchRankEntry[]>
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
// 집계 기준 시각 — 지금은 불러온 시각을 쓴다.
|
||||
// 서버가 집계 시각을 내려 주면 그 값으로 바꾼다.
|
||||
const baseTime = computed(() =>
|
||||
props.resource.status.value === 'ready' ? `${formatClockTime(new Date())} 기준` : '',
|
||||
)
|
||||
|
||||
// 1~3위만 진하게 — 그 아래는 흐리게 두어 상위권이 먼저 읽히게 한다
|
||||
const isTop = (rank: number) => rank <= 3
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<SectionHeader
|
||||
title="검색 랭킹"
|
||||
:meta="baseTime"
|
||||
/>
|
||||
|
||||
<SectionBoundary
|
||||
:status="resource.status.value"
|
||||
:error-message="resource.errorMessage.value"
|
||||
empty-title="아직 집계된 검색이 없어요"
|
||||
empty-description="검색이 쌓이면 순위가 나타납니다"
|
||||
empty-icon="chart"
|
||||
min-height="26rem"
|
||||
@retry="resource.reload"
|
||||
>
|
||||
<template #skeleton>
|
||||
<div class="search-rank__head">
|
||||
<span class="search-rank__th">순위</span>
|
||||
<span class="search-rank__th">닉네임</span>
|
||||
<span class="search-rank__th search-rank__th--right">변동</span>
|
||||
</div>
|
||||
<div
|
||||
v-for="index in 9"
|
||||
:key="index"
|
||||
class="search-rank__row"
|
||||
>
|
||||
<SkeletonBox
|
||||
width="0.875rem"
|
||||
height="0.875rem"
|
||||
/>
|
||||
<SkeletonBox
|
||||
width="45%"
|
||||
height="0.875rem"
|
||||
/>
|
||||
<SkeletonBox
|
||||
width="1.5rem"
|
||||
height="0.875rem"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="search-rank__head">
|
||||
<span class="search-rank__th">순위</span>
|
||||
<span class="search-rank__th">닉네임</span>
|
||||
<span class="search-rank__th search-rank__th--right">변동</span>
|
||||
</div>
|
||||
<a
|
||||
v-for="entry in resource.data.value ?? []"
|
||||
:key="entry.rank"
|
||||
class="search-rank__row"
|
||||
href="#"
|
||||
>
|
||||
<span
|
||||
class="search-rank__rank"
|
||||
:class="{ 'search-rank__rank--top': isTop(entry.rank) }"
|
||||
>{{ entry.rank }}</span>
|
||||
<span class="search-rank__nickname">{{ entry.nickname }}</span>
|
||||
<RankMovementCell :movement="entry.movement" />
|
||||
</a>
|
||||
</SectionBoundary>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.search-rank__head,
|
||||
.search-rank__row {
|
||||
display: grid;
|
||||
grid-template-columns: 1.625rem minmax(0, 1fr) 3.25rem;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.search-rank__head {
|
||||
height: 2.125rem;
|
||||
border-bottom: 1px solid var(--sz-line-strong);
|
||||
}
|
||||
|
||||
.search-rank__th {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--sz-text-faint);
|
||||
}
|
||||
|
||||
.search-rank__th--right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.search-rank__row {
|
||||
height: 2.625rem;
|
||||
border-bottom: 1px solid var(--sz-line-row);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.search-rank__row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.search-rank__rank {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--sz-text-faint);
|
||||
}
|
||||
|
||||
.search-rank__rank--top {
|
||||
font-weight: 700;
|
||||
color: var(--sz-text);
|
||||
}
|
||||
|
||||
.search-rank__nickname {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
@media (max-width: 47.9375rem) {
|
||||
/* 모바일은 손가락이 닿는 높이로 키운다 */
|
||||
.search-rank__head {
|
||||
height: 2.125rem;
|
||||
}
|
||||
|
||||
.search-rank__row {
|
||||
height: 3rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,258 @@
|
||||
<script setup lang="ts">
|
||||
// 지금 방송 중 — 맨 위 하나는 크게, 나머지는 가로 목록으로.
|
||||
import { computed } from 'vue'
|
||||
import AvatarCircle from '@/components/common/AvatarCircle.vue'
|
||||
import SectionBoundary from '@/components/common/SectionBoundary.vue'
|
||||
import SectionHeader from '@/components/common/SectionHeader.vue'
|
||||
import SkeletonBox from '@/components/common/SkeletonBox.vue'
|
||||
import type { SectionResource } from '@/composables/useSectionResource'
|
||||
import { formatCount } from '@/shared/utils/format'
|
||||
import type { StreamChannel } from '@/types/home'
|
||||
|
||||
interface Props {
|
||||
resource: SectionResource<StreamChannel[]>
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const featured = computed(() => props.resource.data.value?.[0])
|
||||
const rest = computed(() => props.resource.data.value?.slice(1) ?? [])
|
||||
|
||||
const viewerLabel = (channel: StreamChannel) =>
|
||||
`${channel.streamerName} · ${formatCount(channel.viewerCount)}명`
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<SectionHeader
|
||||
title="지금 방송 중"
|
||||
more-label="전체 보기"
|
||||
/>
|
||||
|
||||
<SectionBoundary
|
||||
:status="resource.status.value"
|
||||
:error-message="resource.errorMessage.value"
|
||||
empty-title="지금 방송 중인 채널이 없어요"
|
||||
empty-description="방송이 시작되면 여기에 표시됩니다"
|
||||
empty-icon="video"
|
||||
min-height="24rem"
|
||||
@retry="resource.reload"
|
||||
>
|
||||
<template #skeleton>
|
||||
<div class="streaming__layout">
|
||||
<div>
|
||||
<SkeletonBox
|
||||
ratio="16 / 9"
|
||||
:radius="'var(--sz-radius-md)'"
|
||||
/>
|
||||
<SkeletonBox
|
||||
class="streaming__skeleton-line"
|
||||
width="60%"
|
||||
height="1rem"
|
||||
/>
|
||||
<SkeletonBox
|
||||
class="streaming__skeleton-line"
|
||||
width="40%"
|
||||
height="0.8125rem"
|
||||
/>
|
||||
</div>
|
||||
<div class="streaming__list">
|
||||
<div
|
||||
v-for="index in 3"
|
||||
:key="index"
|
||||
class="streaming__item"
|
||||
>
|
||||
<SkeletonBox
|
||||
width="5.75rem"
|
||||
height="3.375rem"
|
||||
:radius="'var(--sz-radius-thumb)'"
|
||||
/>
|
||||
<div class="streaming__item-body">
|
||||
<SkeletonBox
|
||||
width="70%"
|
||||
height="0.875rem"
|
||||
/>
|
||||
<SkeletonBox
|
||||
class="streaming__skeleton-line"
|
||||
width="45%"
|
||||
height="0.75rem"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="streaming__layout">
|
||||
<a
|
||||
v-if="featured"
|
||||
class="streaming__feature"
|
||||
href="#"
|
||||
>
|
||||
<img
|
||||
v-if="featured.thumbnailUrl"
|
||||
class="streaming__feature-thumb"
|
||||
:src="featured.thumbnailUrl"
|
||||
:alt="featured.title"
|
||||
>
|
||||
<span
|
||||
v-else
|
||||
class="streaming__feature-thumb"
|
||||
:style="{ background: featured.placeholderColor }"
|
||||
/>
|
||||
<div class="streaming__feature-title">{{ featured.title }}</div>
|
||||
<div class="streaming__meta">
|
||||
<AvatarCircle
|
||||
size="1.25rem"
|
||||
:color="featured.streamerAvatarColor"
|
||||
:image-url="featured.streamerAvatarUrl"
|
||||
/>
|
||||
<span class="streaming__meta-text">{{ viewerLabel(featured) }}</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="streaming__list">
|
||||
<a
|
||||
v-for="channel in rest"
|
||||
:key="channel.id"
|
||||
class="streaming__item"
|
||||
href="#"
|
||||
>
|
||||
<img
|
||||
v-if="channel.thumbnailUrl"
|
||||
class="streaming__item-thumb"
|
||||
:src="channel.thumbnailUrl"
|
||||
:alt="channel.title"
|
||||
>
|
||||
<span
|
||||
v-else
|
||||
class="streaming__item-thumb"
|
||||
:style="{ background: channel.placeholderColor }"
|
||||
/>
|
||||
<div class="streaming__item-body">
|
||||
<div class="streaming__item-title">{{ channel.title }}</div>
|
||||
<div class="streaming__meta streaming__meta--small">
|
||||
<AvatarCircle
|
||||
size="1.125rem"
|
||||
:color="channel.streamerAvatarColor"
|
||||
:image-url="channel.streamerAvatarUrl"
|
||||
/>
|
||||
<span class="streaming__meta-text">{{ viewerLabel(channel) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</SectionBoundary>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.streaming__feature {
|
||||
display: block;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.streaming__feature-thumb {
|
||||
display: block;
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: var(--sz-radius-md);
|
||||
background: var(--sz-surface-placeholder);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.streaming__feature-title {
|
||||
margin-top: 0.75rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.streaming__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4375rem;
|
||||
margin-top: 0.3125rem;
|
||||
}
|
||||
|
||||
.streaming__meta-text {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--sz-text-faint);
|
||||
}
|
||||
|
||||
.streaming__meta--small {
|
||||
margin-top: 0.25rem;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.streaming__meta--small .streaming__meta-text {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.streaming__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.streaming__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.streaming__item-thumb {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
width: 5.75rem;
|
||||
height: 3.375rem;
|
||||
border-radius: var(--sz-radius-thumb);
|
||||
background: var(--sz-surface-placeholder);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.streaming__item-body {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.streaming__item-title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.streaming__skeleton-line {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* 태블릿 — 섹션이 두 칸을 차지하므로 큰 방송과 목록을 나란히 둔다 */
|
||||
@media (min-width: 48rem) and (max-width: 74.9375rem) {
|
||||
.streaming__layout {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.streaming__list {
|
||||
justify-content: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.streaming__item-thumb {
|
||||
width: 6rem;
|
||||
height: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,59 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { toClanRows, toUserRows } from '@/components/home/ranking-table'
|
||||
import type { ClanRankEntry, UserRankEntry } from '@/types/home'
|
||||
|
||||
describe('랭킹 표 줄 변환', () => {
|
||||
it('유저 랭킹은 계급 · 티어 자리표시와 RP 를 그대로 옮긴다', () => {
|
||||
const entries: UserRankEntry[] = [
|
||||
{
|
||||
rank: 1,
|
||||
nickname: '헤드샷장인',
|
||||
gradeShape: 'star',
|
||||
tierImageUrl: '/images/tiers/diamond.png',
|
||||
rp: 2486,
|
||||
movement: { direction: 'up', amount: 1 },
|
||||
},
|
||||
]
|
||||
|
||||
expect(toUserRows(entries)).toEqual([
|
||||
{
|
||||
rank: 1,
|
||||
label: '헤드샷장인',
|
||||
badgeVariant: 'grade',
|
||||
badgeShape: 'star',
|
||||
badgeImageUrl: undefined,
|
||||
tierImageUrl: '/images/tiers/diamond.png',
|
||||
rp: 2486,
|
||||
movement: { direction: 'up', amount: 1 },
|
||||
},
|
||||
])
|
||||
})
|
||||
|
||||
it('계급 랭킹처럼 티어 이미지가 없으면 그 자리는 비워 둔다', () => {
|
||||
const entries: UserRankEntry[] = [
|
||||
{
|
||||
rank: 1,
|
||||
nickname: '달빛조각사',
|
||||
gradeShape: 'bar',
|
||||
movement: { direction: 'same', amount: 0 },
|
||||
},
|
||||
]
|
||||
|
||||
const [row] = toUserRows(entries)
|
||||
|
||||
expect(row?.tierImageUrl).toBeUndefined()
|
||||
expect(row?.rp).toBeUndefined()
|
||||
})
|
||||
|
||||
it('클랜 랭킹은 클랜명을 이름 자리에 두고 RP 를 두지 않는다', () => {
|
||||
const entries: ClanRankEntry[] = [
|
||||
{ rank: 3, clanName: '야간부대', movement: { direction: 'down', amount: 1 } },
|
||||
]
|
||||
|
||||
const [row] = toClanRows(entries)
|
||||
|
||||
expect(row?.label).toBe('야간부대')
|
||||
expect(row?.badgeVariant).toBe('clan')
|
||||
expect(row?.rp).toBeUndefined()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,47 @@
|
||||
/**
|
||||
* 랭킹 표 한 줄의 화면용 모양.
|
||||
*
|
||||
* 유저 랭킹(계급·랭크전)과 클랜 랭킹은 담는 값이 다르지만 표의 생김새는 같다.
|
||||
* 두 도메인 타입을 이 모양으로 옮겨서 표 컴포넌트 하나로 그린다.
|
||||
*/
|
||||
import type { ClanRankEntry, RankGradeShape, RankMovement, UserRankEntry } from '@/types/home'
|
||||
|
||||
export interface RankingRow {
|
||||
rank: number
|
||||
/** 닉네임 또는 클랜명 */
|
||||
label: string
|
||||
/** 이름 앞 타일이 계급 이미지 자리인지 클랜 마크 자리인지 */
|
||||
badgeVariant: 'grade' | 'clan'
|
||||
/** 계급 자리표시 모양 — 유저 랭킹에만 있다 */
|
||||
badgeShape?: RankGradeShape
|
||||
/** 계급 이미지 또는 클랜 마크 */
|
||||
badgeImageUrl?: string
|
||||
/** 랭크전 티어 이미지 — RP 와 한 칸에 붙는다 */
|
||||
tierImageUrl?: string
|
||||
/** 랭크전 랭킹에만 있는 RP 점수 */
|
||||
rp?: number
|
||||
movement: RankMovement
|
||||
}
|
||||
|
||||
export function toUserRows(entries: UserRankEntry[]): RankingRow[] {
|
||||
return entries.map((entry) => ({
|
||||
rank: entry.rank,
|
||||
label: entry.nickname,
|
||||
badgeVariant: 'grade',
|
||||
badgeShape: entry.gradeShape,
|
||||
badgeImageUrl: entry.gradeImageUrl,
|
||||
tierImageUrl: entry.tierImageUrl,
|
||||
rp: entry.rp,
|
||||
movement: entry.movement,
|
||||
}))
|
||||
}
|
||||
|
||||
export function toClanRows(entries: ClanRankEntry[]): RankingRow[] {
|
||||
return entries.map((entry) => ({
|
||||
rank: entry.rank,
|
||||
label: entry.clanName,
|
||||
badgeVariant: 'clan',
|
||||
badgeImageUrl: entry.markImageUrl,
|
||||
movement: entry.movement,
|
||||
}))
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
<script setup lang="ts">
|
||||
// 전역 푸터 — 서비스 성격을 밝히는 한 줄까지 포함한다.
|
||||
|
||||
interface FooterLink {
|
||||
label: string
|
||||
to?: string
|
||||
}
|
||||
|
||||
const links: FooterLink[] = [
|
||||
{ label: '이용약관' },
|
||||
{ label: '개인정보 처리방침' },
|
||||
{ label: '문의하기' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="app-footer">
|
||||
<span class="app-footer__brand">서린즈</span>
|
||||
<a
|
||||
v-for="link in links"
|
||||
:key="link.label"
|
||||
class="app-footer__link"
|
||||
:href="link.to ?? '#'"
|
||||
>{{ link.label }}</a>
|
||||
|
||||
<span class="app-footer__spacer" />
|
||||
<span class="app-footer__note">넥슨 공개 API 기반 · 서든어택 비공식 서비스</span>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.app-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
padding: 2rem var(--sz-page-pad) 3rem;
|
||||
border-top: 1px solid var(--sz-line);
|
||||
font-size: 0.875rem;
|
||||
color: var(--sz-text-faint);
|
||||
}
|
||||
|
||||
.app-footer__brand {
|
||||
font-weight: 600;
|
||||
color: var(--sz-text-sub);
|
||||
}
|
||||
|
||||
.app-footer__link {
|
||||
color: var(--sz-text-faint);
|
||||
}
|
||||
|
||||
.app-footer__link:hover {
|
||||
color: var(--sz-text-sub);
|
||||
}
|
||||
|
||||
.app-footer__spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 74.9375rem) {
|
||||
.app-footer {
|
||||
padding: 2rem var(--sz-page-pad-tablet) 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 47.9375rem) {
|
||||
/* 좁은 폭에서는 한 줄에 다 들어가지 않으므로 줄을 바꾼다 */
|
||||
.app-footer {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem 1rem;
|
||||
padding: 1.5rem var(--sz-page-pad-mobile) 2.5rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.app-footer__spacer {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,358 @@
|
||||
<script setup lang="ts">
|
||||
// 전역 헤더 — 스크롤해도 위에 붙어 있다.
|
||||
// 검색 아이콘은 처음부터 두지 않고 히어로 검색창이 화면 밖으로 나간 뒤에 나타난다
|
||||
// (맨 위에서는 바로 아래 큰 검색창이 있어 같은 것이 둘이 되기 때문).
|
||||
import { ref, watch } from 'vue'
|
||||
import AppIcon from '@/components/common/AppIcon.vue'
|
||||
import BrandLogo from '@/components/common/BrandLogo.vue'
|
||||
|
||||
interface NavItem {
|
||||
label: string
|
||||
/** 라우트가 생기면 to 를 채운다 — 지금은 홈만 있다 */
|
||||
to?: string
|
||||
}
|
||||
|
||||
interface Props {
|
||||
/** 히어로 검색창이 화면 밖으로 나갔는지 — 검색 아이콘과 그림자를 함께 켠다 */
|
||||
searchVisible?: boolean
|
||||
/** 지금 보고 있는 메뉴 */
|
||||
currentLabel?: string
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
searchVisible: false,
|
||||
currentLabel: '홈',
|
||||
})
|
||||
|
||||
interface Emits {
|
||||
/** 헤더 검색 아이콘 — 검색 시트를 연다 */
|
||||
(e: 'open-search'): void
|
||||
(e: 'login'): void
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{ label: '홈', to: '/' },
|
||||
{ label: '전적 검색' },
|
||||
{ label: '랭킹' },
|
||||
{ label: '커뮤니티' },
|
||||
{ label: '스트리밍' },
|
||||
{ label: '소식' },
|
||||
{ label: '이벤트' },
|
||||
]
|
||||
|
||||
// 모바일 메뉴 서랍
|
||||
const isDrawerOpen = ref(false)
|
||||
|
||||
watch(isDrawerOpen, (open) => {
|
||||
// 서랍이 열려 있는 동안에는 뒤 페이지가 따라 움직이지 않게 한다
|
||||
document.body.style.overflow = open ? 'hidden' : ''
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header
|
||||
class="app-header"
|
||||
:class="{ 'app-header--floating': searchVisible }"
|
||||
>
|
||||
<RouterLink
|
||||
class="app-header__logo"
|
||||
to="/"
|
||||
aria-label="서린즈 홈"
|
||||
>
|
||||
<BrandLogo :width="61" />
|
||||
</RouterLink>
|
||||
|
||||
<nav
|
||||
class="app-header__nav"
|
||||
aria-label="주 메뉴"
|
||||
>
|
||||
<RouterLink
|
||||
v-for="item in navItems"
|
||||
:key="item.label"
|
||||
class="app-header__nav-item"
|
||||
:class="{ 'app-header__nav-item--on': item.label === currentLabel }"
|
||||
:to="item.to ?? '/'"
|
||||
>
|
||||
{{ item.label }}
|
||||
</RouterLink>
|
||||
</nav>
|
||||
|
||||
<span class="app-header__spacer" />
|
||||
|
||||
<button
|
||||
v-show="searchVisible"
|
||||
type="button"
|
||||
class="app-header__icon-button"
|
||||
aria-label="전적 검색 열기"
|
||||
@click="emit('open-search')"
|
||||
>
|
||||
<AppIcon
|
||||
name="search"
|
||||
:size="21"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="app-header__login"
|
||||
@click="emit('login')"
|
||||
>
|
||||
로그인
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="app-header__icon-button app-header__menu"
|
||||
aria-label="메뉴 열기"
|
||||
:aria-expanded="isDrawerOpen"
|
||||
@click="isDrawerOpen = true"
|
||||
>
|
||||
<AppIcon
|
||||
name="menu"
|
||||
:size="22"
|
||||
/>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<!-- 모바일 메뉴 서랍 -->
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="isDrawerOpen"
|
||||
class="app-drawer"
|
||||
>
|
||||
<div
|
||||
class="app-drawer__scrim"
|
||||
@click="isDrawerOpen = false"
|
||||
/>
|
||||
<div
|
||||
class="app-drawer__panel"
|
||||
role="dialog"
|
||||
aria-label="메뉴"
|
||||
>
|
||||
<div class="app-drawer__head">
|
||||
<BrandLogo :width="55" />
|
||||
<span class="app-header__spacer" />
|
||||
<button
|
||||
type="button"
|
||||
class="app-header__icon-button"
|
||||
aria-label="메뉴 닫기"
|
||||
@click="isDrawerOpen = false"
|
||||
>
|
||||
<AppIcon
|
||||
name="close"
|
||||
:size="22"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav
|
||||
class="app-drawer__nav"
|
||||
aria-label="주 메뉴"
|
||||
>
|
||||
<RouterLink
|
||||
v-for="item in navItems"
|
||||
:key="item.label"
|
||||
class="app-drawer__nav-item"
|
||||
:class="{ 'app-drawer__nav-item--on': item.label === currentLabel }"
|
||||
:to="item.to ?? '/'"
|
||||
@click="isDrawerOpen = false"
|
||||
>
|
||||
{{ item.label }}
|
||||
</RouterLink>
|
||||
</nav>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="app-drawer__login"
|
||||
@click="emit('login')"
|
||||
>
|
||||
로그인
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.app-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.75rem;
|
||||
height: 4.5rem;
|
||||
padding: 0 var(--sz-page-pad);
|
||||
background: var(--sz-surface);
|
||||
border-bottom: 1px solid var(--sz-line);
|
||||
}
|
||||
|
||||
/* 스크롤된 상태임을 옅은 그림자로 알려 준다 */
|
||||
.app-header--floating {
|
||||
box-shadow: var(--sz-shadow-header);
|
||||
}
|
||||
|
||||
.app-header__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--sz-text);
|
||||
}
|
||||
|
||||
.app-header__nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
margin-left: 0.75rem;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.app-header__nav-item {
|
||||
font-weight: 500;
|
||||
color: var(--sz-text-sub);
|
||||
}
|
||||
|
||||
.app-header__nav-item:hover {
|
||||
color: var(--sz-text);
|
||||
}
|
||||
|
||||
.app-header__nav-item--on {
|
||||
font-weight: 700;
|
||||
color: var(--sz-text);
|
||||
}
|
||||
|
||||
.app-header__spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.app-header__icon-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--sz-tap-min);
|
||||
height: var(--sz-tap-min);
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--sz-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-header__login {
|
||||
height: 2.625rem;
|
||||
padding: 0 1.25rem;
|
||||
border: none;
|
||||
border-radius: var(--sz-radius-pill);
|
||||
background: var(--sz-surface-button);
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
color: var(--sz-text);
|
||||
letter-spacing: -0.015em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 메뉴 버튼은 모바일에서만 */
|
||||
.app-header__menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ---------- 태블릿 ---------- */
|
||||
@media (max-width: 74.9375rem) {
|
||||
.app-header {
|
||||
gap: 1.25rem;
|
||||
height: 4rem;
|
||||
padding: 0 var(--sz-page-pad-tablet);
|
||||
}
|
||||
|
||||
.app-header__nav {
|
||||
gap: 1.0625rem;
|
||||
margin-left: 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- 모바일 ---------- */
|
||||
@media (max-width: 47.9375rem) {
|
||||
.app-header {
|
||||
gap: 0.625rem;
|
||||
height: 3.75rem;
|
||||
padding: 0 var(--sz-page-pad-mobile);
|
||||
}
|
||||
|
||||
.app-header__nav,
|
||||
.app-header__login {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-header__menu {
|
||||
display: inline-flex;
|
||||
/* 아이콘 광학 정렬 — 오른쪽 여백에 맞춘다 */
|
||||
margin-right: -0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- 메뉴 서랍 ---------- */
|
||||
.app-drawer {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.app-drawer__scrim {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--sz-scrim);
|
||||
}
|
||||
|
||||
.app-drawer__panel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: min(20rem, 82vw);
|
||||
height: 100%;
|
||||
padding: 0 var(--sz-page-pad-mobile) 1.5rem;
|
||||
background: var(--sz-surface);
|
||||
}
|
||||
|
||||
.app-drawer__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 3.75rem;
|
||||
color: var(--sz-text);
|
||||
}
|
||||
|
||||
.app-drawer__nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.app-drawer__nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 3.25rem;
|
||||
border-bottom: 1px solid var(--sz-line-row);
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: var(--sz-text-sub);
|
||||
}
|
||||
|
||||
.app-drawer__nav-item--on {
|
||||
font-weight: 700;
|
||||
color: var(--sz-text);
|
||||
}
|
||||
|
||||
.app-drawer__login {
|
||||
height: 3rem;
|
||||
margin-top: auto;
|
||||
border: none;
|
||||
border-radius: var(--sz-radius-pill);
|
||||
background: var(--sz-surface-button);
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
color: var(--sz-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,307 @@
|
||||
<script setup lang="ts">
|
||||
// 검색 히어로 — 화면 맨 위. 옅은 색면으로 아래 그리드와 층을 나눈다.
|
||||
// 검색은 이 서비스의 첫 동작이라 헤더에 넣지 않고 여기에 크게 둔다.
|
||||
import { ref } from 'vue'
|
||||
import AppIcon from '@/components/common/AppIcon.vue'
|
||||
import AvatarCircle from '@/components/common/AvatarCircle.vue'
|
||||
import type { RecentSearchItem } from '@/types/home'
|
||||
|
||||
interface Props {
|
||||
recentSearches: RecentSearchItem[]
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
interface Emits {
|
||||
/** 닉네임 검색 실행 */
|
||||
(e: 'search', nickname: string): void
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const keyword = ref('')
|
||||
|
||||
function submit() {
|
||||
const trimmed = keyword.value.trim()
|
||||
if (!trimmed) return
|
||||
emit('search', trimmed)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="search-hero">
|
||||
<div class="search-hero__inner">
|
||||
<h1 class="search-hero__title">
|
||||
누구의 전적이 궁금하세요?
|
||||
</h1>
|
||||
<p class="search-hero__lead">
|
||||
닉네임만 알려주시면 최근 경기 흐름부터 자주 쓰는 무기까지 정리해 드릴게요.
|
||||
</p>
|
||||
|
||||
<form
|
||||
class="search-hero__form"
|
||||
role="search"
|
||||
@submit.prevent="submit"
|
||||
>
|
||||
<span class="search-hero__icon">
|
||||
<AppIcon
|
||||
name="search"
|
||||
:size="21"
|
||||
/>
|
||||
</span>
|
||||
<label
|
||||
class="sz-sr-only"
|
||||
for="hero-search"
|
||||
>닉네임</label>
|
||||
<input
|
||||
id="hero-search"
|
||||
v-model="keyword"
|
||||
class="search-hero__input"
|
||||
type="search"
|
||||
autocomplete="off"
|
||||
placeholder="닉네임을 입력해 보세요"
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
class="search-hero__submit"
|
||||
>
|
||||
찾아보기
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="search-hero__recent">
|
||||
<span class="search-hero__recent-label">최근에 찾아봤어요</span>
|
||||
<div class="search-hero__chips">
|
||||
<button
|
||||
v-for="item in recentSearches"
|
||||
:key="item.nickname"
|
||||
type="button"
|
||||
class="search-hero__chip"
|
||||
@click="emit('search', item.nickname)"
|
||||
>
|
||||
<AvatarCircle
|
||||
size="1.5rem"
|
||||
:color="item.avatarColor"
|
||||
:image-url="item.avatarUrl"
|
||||
/>
|
||||
{{ item.nickname }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.search-hero {
|
||||
background: var(--sz-surface-sub);
|
||||
border-bottom: 1px solid var(--sz-line);
|
||||
}
|
||||
|
||||
.search-hero__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 3.25rem var(--sz-page-pad) 2.875rem;
|
||||
}
|
||||
|
||||
.search-hero__title {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
/* 한글이 낱자로 끊기지 않게 띄어쓰기에서만 줄을 바꾼다 */
|
||||
word-break: keep-all;
|
||||
font-size: 2.125rem;
|
||||
line-height: 1.28;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.045em;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.search-hero__lead {
|
||||
margin: 0.75rem 0 0;
|
||||
text-align: center;
|
||||
word-break: keep-all;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.65;
|
||||
color: var(--sz-text-sub);
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
.search-hero__form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.875rem;
|
||||
width: 100%;
|
||||
max-width: 43.75rem;
|
||||
height: 4.125rem;
|
||||
margin-top: 1.625rem;
|
||||
padding: 0 0.5rem 0 1.375rem;
|
||||
background: var(--sz-surface);
|
||||
border: 1px solid var(--sz-line-strong);
|
||||
border-radius: var(--sz-radius-pill);
|
||||
box-shadow: var(--sz-shadow-hero);
|
||||
}
|
||||
|
||||
.search-hero__icon {
|
||||
display: flex;
|
||||
color: var(--sz-text-faint);
|
||||
}
|
||||
|
||||
.search-hero__input {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
font-family: inherit;
|
||||
font-size: 1.0625rem;
|
||||
letter-spacing: inherit;
|
||||
color: var(--sz-text);
|
||||
}
|
||||
|
||||
.search-hero__input::placeholder {
|
||||
color: var(--sz-text-faint);
|
||||
}
|
||||
|
||||
.search-hero__input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-hero__submit {
|
||||
flex-shrink: 0;
|
||||
height: 3.125rem;
|
||||
padding: 0 1.75rem;
|
||||
border: none;
|
||||
border-radius: var(--sz-radius-pill);
|
||||
background: var(--sz-brand);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--sz-text-invert);
|
||||
letter-spacing: -0.02em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-hero__submit:hover,
|
||||
.search-hero__submit:active {
|
||||
background: var(--sz-brand-press);
|
||||
}
|
||||
|
||||
.search-hero__recent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
width: 100%;
|
||||
max-width: 43.75rem;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.search-hero__recent-label {
|
||||
flex-shrink: 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--sz-text-faint);
|
||||
}
|
||||
|
||||
.search-hero__chips {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
/* 가로 스크롤 막대는 숨기고 밀어서 보게 한다 */
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.search-hero__chips::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-hero__chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
height: 2.25rem;
|
||||
padding: 0 0.875rem 0 0.375rem;
|
||||
border: 1px solid var(--sz-line);
|
||||
border-radius: var(--sz-radius-pill);
|
||||
background: var(--sz-surface);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--sz-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-hero__chip:hover {
|
||||
border-color: var(--sz-line-strong);
|
||||
}
|
||||
|
||||
/* ---------- 태블릿 ---------- */
|
||||
@media (max-width: 74.9375rem) {
|
||||
.search-hero__inner {
|
||||
padding: 2.75rem var(--sz-page-pad-tablet) 2.375rem;
|
||||
}
|
||||
|
||||
.search-hero__title {
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- 모바일 ---------- */
|
||||
@media (max-width: 47.9375rem) {
|
||||
.search-hero__inner {
|
||||
align-items: stretch;
|
||||
padding: 2rem var(--sz-page-pad-mobile) 1.625rem;
|
||||
}
|
||||
|
||||
.search-hero__title {
|
||||
font-size: 1.625rem;
|
||||
line-height: 1.32;
|
||||
}
|
||||
|
||||
.search-hero__lead {
|
||||
margin-top: 0.625rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.search-hero__form {
|
||||
height: 3.5rem;
|
||||
margin-top: 1.25rem;
|
||||
padding: 0 0.375rem 0 0.875rem;
|
||||
gap: 0.5rem;
|
||||
box-shadow: var(--sz-shadow-hero-mobile);
|
||||
}
|
||||
|
||||
.search-hero__input {
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.search-hero__submit {
|
||||
height: 2.75rem;
|
||||
padding: 0 1.125rem;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
/* 라벨을 칩 위로 올려 좁은 폭에서도 칩이 온전히 보이게 한다 */
|
||||
.search-hero__recent {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.search-hero__recent-label {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.search-hero__chips {
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.search-hero__chip {
|
||||
height: 2.25rem;
|
||||
padding: 0 0.75rem 0 0.3125rem;
|
||||
gap: 0.4375rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,411 @@
|
||||
<script setup lang="ts">
|
||||
// 헤더 검색 시트 — 헤더의 돋보기를 누르면 열린다.
|
||||
// 데스크톱은 640px 카드, 모바일은 전체 화면(반쯤 덮으면 키보드가 올라왔을 때 남는 높이가 너무 작다).
|
||||
// 아직 아무것도 치지 않았을 때는 최근 검색과 「지금 많이 찾는」 다섯을 보여 준다 —
|
||||
// 홈의 검색 랭킹과 같은 데이터라 새로 만들 것이 없고, 빈 시트를 마주하지 않게 한다.
|
||||
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import AppIcon from '@/components/common/AppIcon.vue'
|
||||
import AvatarCircle from '@/components/common/AvatarCircle.vue'
|
||||
import RankMovementCell from '@/components/common/RankMovementCell.vue'
|
||||
import type { RecentSearchItem, SearchRankEntry } from '@/types/home'
|
||||
|
||||
interface Props {
|
||||
open: boolean
|
||||
recentSearches: RecentSearchItem[]
|
||||
/** 지금 많이 찾는 — 홈 검색 랭킹과 같은 데이터 */
|
||||
popular: SearchRankEntry[]
|
||||
/** 「지금 많이 찾는」 에 보여 줄 개수 */
|
||||
popularLimit?: number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
popularLimit: 5,
|
||||
})
|
||||
|
||||
interface Emits {
|
||||
(e: 'close'): void
|
||||
(e: 'search', nickname: string): void
|
||||
/** 최근 검색 한 줄 지우기 */
|
||||
(e: 'remove-recent', nickname: string): void
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const keyword = ref('')
|
||||
const inputRef = ref<HTMLInputElement | null>(null)
|
||||
|
||||
// 열리면 바로 칠 수 있는 상태로 둔다
|
||||
watch(
|
||||
() => props.open,
|
||||
async (open) => {
|
||||
document.body.style.overflow = open ? 'hidden' : ''
|
||||
if (!open) {
|
||||
keyword.value = ''
|
||||
return
|
||||
}
|
||||
await nextTick()
|
||||
inputRef.value?.focus()
|
||||
},
|
||||
)
|
||||
|
||||
// ESC 로 닫는다 — 시트 안 어디에 초점이 있어도 동작하도록 창 단위로 듣는다
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
if (props.open && event.key === 'Escape') emit('close')
|
||||
}
|
||||
|
||||
onMounted(() => window.addEventListener('keydown', handleKeydown))
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('keydown', handleKeydown)
|
||||
document.body.style.overflow = ''
|
||||
})
|
||||
|
||||
function submit() {
|
||||
const trimmed = keyword.value.trim()
|
||||
if (!trimmed) return
|
||||
emit('search', trimmed)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="open"
|
||||
class="search-sheet"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="전적 검색"
|
||||
>
|
||||
<!-- 바깥을 누르면 닫힌다 -->
|
||||
<div
|
||||
class="search-sheet__scrim"
|
||||
@click="emit('close')"
|
||||
/>
|
||||
|
||||
<div class="search-sheet__card">
|
||||
<form
|
||||
class="search-sheet__field"
|
||||
role="search"
|
||||
@submit.prevent="submit"
|
||||
>
|
||||
<div class="search-sheet__field-box">
|
||||
<span class="search-sheet__field-icon">
|
||||
<AppIcon
|
||||
name="search"
|
||||
:size="21"
|
||||
/>
|
||||
</span>
|
||||
<label
|
||||
class="sz-sr-only"
|
||||
for="sheet-search"
|
||||
>닉네임</label>
|
||||
<input
|
||||
id="sheet-search"
|
||||
ref="inputRef"
|
||||
v-model="keyword"
|
||||
class="search-sheet__input"
|
||||
type="search"
|
||||
autocomplete="off"
|
||||
placeholder="닉네임을 입력해 보세요"
|
||||
>
|
||||
</div>
|
||||
<!-- 데스크톱은 ESC, 모바일은 「취소」 로 닫는다 -->
|
||||
<span class="search-sheet__esc">ESC</span>
|
||||
<button
|
||||
type="button"
|
||||
class="search-sheet__cancel"
|
||||
@click="emit('close')"
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="search-sheet__body">
|
||||
<p
|
||||
v-if="recentSearches.length > 0"
|
||||
class="search-sheet__label"
|
||||
>
|
||||
최근에 찾아봤어요
|
||||
</p>
|
||||
<div
|
||||
v-for="item in recentSearches"
|
||||
:key="item.nickname"
|
||||
class="search-sheet__recent"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="search-sheet__recent-main"
|
||||
@click="emit('search', item.nickname)"
|
||||
>
|
||||
<AvatarCircle
|
||||
size="1.625rem"
|
||||
:color="item.avatarColor"
|
||||
:image-url="item.avatarUrl"
|
||||
/>
|
||||
<span class="search-sheet__nickname">{{ item.nickname }}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="search-sheet__remove"
|
||||
:aria-label="`${item.nickname} 검색 기록 지우기`"
|
||||
@click="emit('remove-recent', item.nickname)"
|
||||
>
|
||||
<AppIcon
|
||||
name="close"
|
||||
:size="15"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-if="popular.length > 0"
|
||||
class="search-sheet__label"
|
||||
>
|
||||
지금 많이 찾는
|
||||
</p>
|
||||
<button
|
||||
v-for="entry in popular.slice(0, popularLimit)"
|
||||
:key="entry.rank"
|
||||
type="button"
|
||||
class="search-sheet__popular"
|
||||
@click="emit('search', entry.nickname)"
|
||||
>
|
||||
<span class="search-sheet__rank">{{ entry.rank }}</span>
|
||||
<span class="search-sheet__nickname">{{ entry.nickname }}</span>
|
||||
<RankMovementCell :movement="entry.movement" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.search-sheet {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.search-sheet__scrim {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(20, 22, 26, 0.45);
|
||||
}
|
||||
|
||||
.search-sheet__card {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 3.5rem;
|
||||
transform: translateX(-50%);
|
||||
width: min(40rem, calc(100vw - 2.5rem));
|
||||
max-height: calc(100vh - 7rem);
|
||||
border-radius: var(--sz-radius-lg);
|
||||
background: var(--sz-surface);
|
||||
box-shadow: 0 24px 60px rgba(20, 22, 26, 0.28);
|
||||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
.search-sheet__field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
height: 4rem;
|
||||
padding: 0 1.25rem;
|
||||
border-bottom: 1px solid var(--sz-line);
|
||||
}
|
||||
|
||||
.search-sheet__field-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.search-sheet__field-icon {
|
||||
display: flex;
|
||||
color: var(--sz-text-faint);
|
||||
}
|
||||
|
||||
.search-sheet__input {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
font-family: inherit;
|
||||
font-size: 1.0625rem;
|
||||
letter-spacing: inherit;
|
||||
color: var(--sz-text);
|
||||
}
|
||||
|
||||
.search-sheet__input::placeholder {
|
||||
color: var(--sz-text-faint);
|
||||
}
|
||||
|
||||
.search-sheet__input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-sheet__esc {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
height: 1.5rem;
|
||||
padding: 0 0.4375rem;
|
||||
border: 1px solid var(--sz-line-strong);
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
color: var(--sz-text-faint);
|
||||
}
|
||||
|
||||
.search-sheet__cancel {
|
||||
display: none;
|
||||
flex-shrink: 0;
|
||||
padding: 0 0.375rem;
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
color: var(--sz-text-sub);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-sheet__body {
|
||||
padding: 0.25rem 1.25rem 1.125rem;
|
||||
}
|
||||
|
||||
.search-sheet__label {
|
||||
margin: 0.875rem 0 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--sz-text-faint);
|
||||
}
|
||||
|
||||
.search-sheet__recent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 2.875rem;
|
||||
}
|
||||
|
||||
.search-sheet__recent-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-sheet__nickname {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
color: var(--sz-text);
|
||||
}
|
||||
|
||||
.search-sheet__remove {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--sz-text-disabled);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-sheet__remove:hover {
|
||||
color: var(--sz-text-sub);
|
||||
}
|
||||
|
||||
.search-sheet__popular {
|
||||
display: grid;
|
||||
grid-template-columns: 1.25rem minmax(0, 1fr) 2.75rem;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
width: 100%;
|
||||
height: 2.75rem;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-sheet__rank {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.search-sheet__popular .search-sheet__nickname {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ---------- 모바일 — 전체 화면 ---------- */
|
||||
@media (max-width: 47.9375rem) {
|
||||
.search-sheet__scrim {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-sheet__card {
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.search-sheet__field {
|
||||
height: 3.75rem;
|
||||
padding: 0 0.75rem 0 1rem;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
/* 입력칸을 알약 바탕으로 감싸 헤더의 검색 자리처럼 보이게 한다 */
|
||||
.search-sheet__field-box {
|
||||
gap: 0.5rem;
|
||||
height: 2.625rem;
|
||||
padding: 0 0.875rem;
|
||||
border-radius: var(--sz-radius-pill);
|
||||
background: var(--sz-surface-button);
|
||||
}
|
||||
|
||||
.search-sheet__input {
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.search-sheet__esc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-sheet__cancel {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.search-sheet__recent {
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
/* 모바일에서는 지우기 버튼을 44px 로 키운다 */
|
||||
.search-sheet__remove {
|
||||
width: var(--sz-tap-min);
|
||||
height: var(--sz-tap-min);
|
||||
margin-right: -0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,32 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { resolveErrorMessage } from '@/composables/useApi'
|
||||
|
||||
// 에러 코드 ↔ 메시지는 세 플랫폼이 공유하는 계약이라 분기를 직접 검증한다
|
||||
describe('resolveErrorMessage', () => {
|
||||
it('서버가 내려준 에러 코드의 문장을 쓴다', () => {
|
||||
const error = { response: { status: 400, data: { success: false, error: { code: 'AUTH_003', message: '' } } } }
|
||||
|
||||
expect(resolveErrorMessage(error)).toBe('해당 메뉴나 기능에 접근할 수 있는 권한이 없습니다.')
|
||||
})
|
||||
|
||||
it('에러 코드가 없으면 HTTP 상태로 코드를 정한다', () => {
|
||||
expect(resolveErrorMessage({ response: { status: 401 } })).toBe(
|
||||
'로그인이 필요한 서비스입니다. 로그인 후 이용해 주세요.',
|
||||
)
|
||||
expect(resolveErrorMessage({ response: { status: 422 } })).toBe(
|
||||
'입력하신 정보를 다시 확인해 주세요. (필수값 누락 또는 형식 오류)',
|
||||
)
|
||||
expect(resolveErrorMessage({ response: { status: 404 } })).toBe(
|
||||
'요청하신 정보나 페이지를 찾을 수 없습니다.',
|
||||
)
|
||||
})
|
||||
|
||||
it('모르는 코드나 응답이 없는 에러는 SYS_001 문장으로 떨어진다', () => {
|
||||
const unknownCode = { response: { status: 500, data: { success: false, error: { code: 'NOPE_999', message: '' } } } }
|
||||
const fallbackMessage = '일시적인 시스템 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.'
|
||||
|
||||
expect(resolveErrorMessage(unknownCode)).toBe(fallbackMessage)
|
||||
expect(resolveErrorMessage(new Error('네트워크 끊김'))).toBe(fallbackMessage)
|
||||
expect(resolveErrorMessage(undefined)).toBe(fallbackMessage)
|
||||
})
|
||||
})
|
||||
@@ -14,6 +14,14 @@ export interface StandardResponse<T = unknown> {
|
||||
}
|
||||
}
|
||||
|
||||
// 요청 단위 확장 옵션 — 섹션 안에서 실패를 직접 그리는 화면(홈 등)이 전역 알림을 끄는 데 쓴다
|
||||
declare module 'axios' {
|
||||
export interface AxiosRequestConfig {
|
||||
/** true 면 전역 알림을 띄우지 않는다 — 호출한 쪽에서 문구를 직접 보여 줄 때 */
|
||||
silentError?: boolean
|
||||
}
|
||||
}
|
||||
|
||||
// 에러 코드 사전 — CLAUDE.md / 백엔드 HttpExceptionFilter 와 1:1 매핑
|
||||
// SYS_001 은 폴백 메시지로 항상 존재함을 타입으로 보장 (noUncheckedIndexedAccess 대응)
|
||||
const ErrorCodeLexicon: Record<string, string> & { SYS_001: string } = {
|
||||
@@ -31,6 +39,41 @@ const showErrorUI = (message: string) => {
|
||||
window.alert(message)
|
||||
}
|
||||
|
||||
// 에러 코드 → 한국어 문장. 모르는 코드는 SYS_001 문장으로 떨어진다
|
||||
const messageOf = (code: string) => ErrorCodeLexicon[code] || ErrorCodeLexicon.SYS_001
|
||||
|
||||
/**
|
||||
* HTTP 상태 코드를 에러 코드로 옮긴다.
|
||||
* 서버가 error.code 를 내려 주면 그 값이 우선한다.
|
||||
*/
|
||||
const codeFromStatus = (status: number): string => {
|
||||
if (status === 401) return 'AUTH_001'
|
||||
if (status === 403) return 'AUTH_003'
|
||||
if (status === 400 || status === 422) return 'VAL_001'
|
||||
if (status === 404) return 'RES_001'
|
||||
return 'SYS_001'
|
||||
}
|
||||
|
||||
/**
|
||||
* resolveErrorMessage — 잡은 에러에서 사용자에게 보여 줄 문장을 꺼낸다.
|
||||
*
|
||||
* 화면에서 실패 문구를 새로 짓지 않기 위한 통로다. 실패 블록·폼 오류 등
|
||||
* 알림 대신 화면 안에 문구를 그리는 자리에서 쓴다.
|
||||
*/
|
||||
export function resolveErrorMessage(error: unknown): string {
|
||||
const candidate = error as
|
||||
| { code?: string; response?: { status?: number; data?: StandardResponse } }
|
||||
| undefined
|
||||
|
||||
const serverCode = candidate?.response?.data?.error?.code || candidate?.code
|
||||
if (typeof serverCode === 'string' && serverCode in ErrorCodeLexicon) {
|
||||
return messageOf(serverCode)
|
||||
}
|
||||
|
||||
const status = candidate?.response?.status
|
||||
return messageOf(typeof status === 'number' ? codeFromStatus(status) : 'SYS_001')
|
||||
}
|
||||
|
||||
// 중앙 Axios 인스턴스
|
||||
const api: AxiosInstance = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
|
||||
@@ -57,27 +100,18 @@ api.interceptors.response.use(
|
||||
}
|
||||
// HTTP 200 이지만 비즈니스 로직상 실패인 경우
|
||||
const errCode = payload.error?.code || 'BIZ_001'
|
||||
showErrorUI(ErrorCodeLexicon[errCode] || ErrorCodeLexicon.SYS_001)
|
||||
if (!response.config?.silentError) {
|
||||
showErrorUI(messageOf(errCode))
|
||||
}
|
||||
return Promise.reject(payload.error)
|
||||
}
|
||||
return payload as never
|
||||
},
|
||||
(error) => {
|
||||
let errCode = 'SYS_001'
|
||||
|
||||
if (error?.response) {
|
||||
const status: number = error.response.status
|
||||
const payload = error.response.data as StandardResponse | undefined
|
||||
|
||||
if (payload?.error?.code) {
|
||||
errCode = payload.error.code
|
||||
} else if (status === 401) errCode = 'AUTH_001'
|
||||
else if (status === 403) errCode = 'AUTH_003'
|
||||
else if (status === 400 || status === 422) errCode = 'VAL_001'
|
||||
else if (status === 404) errCode = 'RES_001'
|
||||
// silentError 요청은 호출한 쪽이 화면 안에서 직접 문구를 그린다
|
||||
if (!error?.config?.silentError) {
|
||||
showErrorUI(resolveErrorMessage(error))
|
||||
}
|
||||
|
||||
showErrorUI(ErrorCodeLexicon[errCode] || ErrorCodeLexicon.SYS_001)
|
||||
return Promise.reject(error)
|
||||
},
|
||||
)
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
import { useSectionResource, type SectionResource } from '@/composables/useSectionResource'
|
||||
import * as fixtures from '@/mocks/home.fixtures'
|
||||
import type {
|
||||
CommunityPost,
|
||||
EventBanner,
|
||||
GameRanking,
|
||||
NewsItem,
|
||||
RecentSearchItem,
|
||||
SearchRankEntry,
|
||||
StreamChannel,
|
||||
} from '@/types/home'
|
||||
|
||||
/**
|
||||
* 홈 화면 데이터 — 섹션마다 따로 부른다.
|
||||
*
|
||||
* 아직 백엔드에 홈 API 가 없어서 임시 데이터를 돌려준다.
|
||||
* 연동할 때는 각 로더의 본문을 아래 한 줄로 바꾸면 된다 (주석의 예시 참고).
|
||||
* `silentError` 를 켜는 이유는, 실패를 전역 알림 대신 섹션 안의 실패 블록으로 보여 주기 때문이다.
|
||||
*/
|
||||
|
||||
// 임시 데이터를 비동기로 흉내 낸다 — 로딩 상태(스켈레톤)를 실제로 확인하기 위한 짧은 지연
|
||||
const MOCK_DELAY_MS = 400
|
||||
|
||||
function mock<T>(value: T): Promise<T> {
|
||||
return new Promise((resolve) => {
|
||||
window.setTimeout(() => resolve(value), MOCK_DELAY_MS)
|
||||
})
|
||||
}
|
||||
|
||||
/** 이벤트 배너 */
|
||||
export function useEventBanners(): SectionResource<EventBanner[]> {
|
||||
// 연동 시: return api.get<never, EventBanner[]>('/home/events', { silentError: true })
|
||||
return useSectionResource(() => mock(fixtures.eventBanners))
|
||||
}
|
||||
|
||||
/** 검색 랭킹 */
|
||||
export function useSearchRanking(): SectionResource<SearchRankEntry[]> {
|
||||
// 연동 시: return api.get<never, SearchRankEntry[]>('/home/search-ranking', { silentError: true })
|
||||
return useSectionResource(() => mock(fixtures.searchRanking))
|
||||
}
|
||||
|
||||
/** 게임 랭킹 — 계급 · 랭크전 · 클랜 세 갈래를 한 번에 받는다 */
|
||||
export function useGameRanking(): SectionResource<GameRanking> {
|
||||
// 연동 시: return api.get<never, GameRanking>('/home/game-ranking', { silentError: true })
|
||||
return useSectionResource(() => mock(fixtures.gameRanking), {
|
||||
// 세 갈래가 모두 비어 있을 때만 «비어 있음» 으로 본다
|
||||
isEmpty: (data) => data.tier.length === 0 && data.ranked.length === 0 && data.clan.length === 0,
|
||||
})
|
||||
}
|
||||
|
||||
/** 커뮤니티 인기 글 */
|
||||
export function useCommunityPosts(): SectionResource<CommunityPost[]> {
|
||||
// 연동 시: return api.get<never, CommunityPost[]>('/home/community', { silentError: true })
|
||||
return useSectionResource(() => mock(fixtures.communityPosts))
|
||||
}
|
||||
|
||||
/** 서든어택 소식 */
|
||||
export function useGameNews(): SectionResource<NewsItem[]> {
|
||||
// 연동 시: return api.get<never, NewsItem[]>('/home/news/game', { silentError: true })
|
||||
return useSectionResource(() => mock(fixtures.gameNews))
|
||||
}
|
||||
|
||||
/** 서린즈 소식 */
|
||||
export function useServiceNews(): SectionResource<NewsItem[]> {
|
||||
// 연동 시: return api.get<never, NewsItem[]>('/home/news/service', { silentError: true })
|
||||
return useSectionResource(() => mock(fixtures.serviceNews))
|
||||
}
|
||||
|
||||
/** 지금 방송 중인 채널 */
|
||||
export function useLiveStreams(): SectionResource<StreamChannel[]> {
|
||||
// 연동 시: return api.get<never, StreamChannel[]>('/home/streams', { silentError: true })
|
||||
return useSectionResource(() => mock(fixtures.liveStreams))
|
||||
}
|
||||
|
||||
/**
|
||||
* 최근 검색 기록 — 서버가 아니라 브라우저에 남는 값이라 섹션 상태를 두지 않는다.
|
||||
* 실제 저장소(localStorage) 연결은 검색 기능을 붙일 때 함께 처리한다.
|
||||
*/
|
||||
export function useRecentSearches(): RecentSearchItem[] {
|
||||
return fixtures.recentSearches
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import { onBeforeUnmount, readonly, ref, type Ref } from 'vue'
|
||||
|
||||
/**
|
||||
* useMediaQuery — 미디어 쿼리 일치 여부를 반응형으로 돌려준다.
|
||||
*
|
||||
* CSS 로 해결되는 배치는 CSS 에서 처리하고,
|
||||
* 이 컴포저블은 «구조 자체가 달라지는» 경우(예: 게임 랭킹을 세 개 나란히 vs 하나씩)에만 쓴다.
|
||||
*/
|
||||
export function useMediaQuery(query: string): Readonly<Ref<boolean>> {
|
||||
const matches = ref(false)
|
||||
|
||||
// 서버 렌더링·테스트 환경에서는 matchMedia 가 없을 수 있다
|
||||
if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
|
||||
return readonly(matches)
|
||||
}
|
||||
|
||||
const mediaQuery = window.matchMedia(query)
|
||||
matches.value = mediaQuery.matches
|
||||
|
||||
const handleChange = (event: MediaQueryListEvent) => {
|
||||
matches.value = event.matches
|
||||
}
|
||||
|
||||
mediaQuery.addEventListener('change', handleChange)
|
||||
onBeforeUnmount(() => mediaQuery.removeEventListener('change', handleChange))
|
||||
|
||||
return readonly(matches)
|
||||
}
|
||||
|
||||
/** 서린즈 화면 분기점 — 아트보드 1440 / 768 / 390 에 맞춘 값 */
|
||||
export const BREAKPOINT = {
|
||||
/** 태블릿 이하 — 게임 랭킹을 갈래 세그먼트로 하나씩 보여 준다 */
|
||||
tabletDown: '(max-width: 74.9375rem)',
|
||||
/** 모바일 — 한 열 배치 */
|
||||
mobileDown: '(max-width: 47.9375rem)',
|
||||
} as const
|
||||
@@ -0,0 +1,57 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { useSectionResource } from '@/composables/useSectionResource'
|
||||
|
||||
describe('useSectionResource', () => {
|
||||
it('불러오기에 성공하면 ready 상태가 되고 데이터를 담는다', async () => {
|
||||
const resource = useSectionResource(() => Promise.resolve([1, 2, 3]))
|
||||
|
||||
await resource.load()
|
||||
|
||||
expect(resource.status.value).toBe('ready')
|
||||
expect(resource.data.value).toEqual([1, 2, 3])
|
||||
})
|
||||
|
||||
it('빈 배열이면 empty 상태가 된다', async () => {
|
||||
const resource = useSectionResource<number[]>(() => Promise.resolve([]))
|
||||
|
||||
await resource.load()
|
||||
|
||||
expect(resource.status.value).toBe('empty')
|
||||
})
|
||||
|
||||
it('isEmpty 를 넘기면 그 판정으로 empty 를 정한다', async () => {
|
||||
const resource = useSectionResource(() => Promise.resolve({ items: [] }), {
|
||||
isEmpty: (data) => data.items.length === 0,
|
||||
})
|
||||
|
||||
await resource.load()
|
||||
|
||||
expect(resource.status.value).toBe('empty')
|
||||
})
|
||||
|
||||
it('실패하면 error 상태가 되고 에러 코드 맵의 문장을 담는다', async () => {
|
||||
const resource = useSectionResource(() => Promise.reject({ response: { status: 404 } }))
|
||||
|
||||
await resource.load()
|
||||
|
||||
expect(resource.status.value).toBe('error')
|
||||
expect(resource.errorMessage.value).toBe('요청하신 정보나 페이지를 찾을 수 없습니다.')
|
||||
expect(resource.data.value).toBeNull()
|
||||
})
|
||||
|
||||
it('다시 시도하면 실패했던 섹션이 다시 채워진다', async () => {
|
||||
let shouldFail = true
|
||||
const resource = useSectionResource(() =>
|
||||
shouldFail ? Promise.reject(new Error('일시 실패')) : Promise.resolve(['가']),
|
||||
)
|
||||
|
||||
await resource.load()
|
||||
expect(resource.status.value).toBe('error')
|
||||
|
||||
shouldFail = false
|
||||
await resource.reload()
|
||||
|
||||
expect(resource.status.value).toBe('ready')
|
||||
expect(resource.errorMessage.value).toBe('')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,64 @@
|
||||
import { ref, shallowRef, type Ref, type ShallowRef } from 'vue'
|
||||
import { resolveErrorMessage } from '@/composables/useApi'
|
||||
|
||||
/**
|
||||
* 섹션 하나의 상태 — 홈은 섹션마다 따로 채우기 때문에
|
||||
* 한 섹션이 실패하거나 비어도 나머지는 그대로 보인다.
|
||||
*/
|
||||
export type SectionStatus = 'idle' | 'loading' | 'ready' | 'empty' | 'error'
|
||||
|
||||
export interface SectionResource<T> {
|
||||
data: ShallowRef<T | null>
|
||||
status: Ref<SectionStatus>
|
||||
/** 실패했을 때 화면에 그대로 쓸 문구 — 에러 코드 맵에서 온다 */
|
||||
errorMessage: Ref<string>
|
||||
/** 처음 불러오기 */
|
||||
load: () => Promise<void>
|
||||
/** 「다시 시도」 — 실패 블록의 버튼이 부른다 */
|
||||
reload: () => Promise<void>
|
||||
}
|
||||
|
||||
interface Options<T> {
|
||||
/** 결과가 «비어 있음» 인지 판단한다. 기본값은 빈 배열 판정 */
|
||||
isEmpty?: (data: T) => boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* useSectionResource — 홈 섹션 하나를 불러오고 로딩 · 성공 · 비어 있음 · 실패 네 상태를 관리한다.
|
||||
*
|
||||
* 실패 문구는 여기서 새로 짓지 않고 에러 코드 맵(useApi)의 문장을 그대로 쓴다.
|
||||
*/
|
||||
export function useSectionResource<T>(
|
||||
loader: () => Promise<T>,
|
||||
options: Options<T> = {},
|
||||
): SectionResource<T> {
|
||||
const data = shallowRef<T | null>(null)
|
||||
const status = ref<SectionStatus>('idle')
|
||||
const errorMessage = ref('')
|
||||
|
||||
const isEmpty = options.isEmpty ?? ((value: T) => Array.isArray(value) && value.length === 0)
|
||||
|
||||
async function load() {
|
||||
status.value = 'loading'
|
||||
errorMessage.value = ''
|
||||
|
||||
try {
|
||||
const result = await loader()
|
||||
data.value = result
|
||||
status.value = isEmpty(result) ? 'empty' : 'ready'
|
||||
} catch (error: unknown) {
|
||||
data.value = null
|
||||
errorMessage.value = resolveErrorMessage(error)
|
||||
status.value = 'error'
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
data,
|
||||
status,
|
||||
errorMessage,
|
||||
load,
|
||||
// 다시 시도도 처음 불러오기와 같은 흐름을 탄다
|
||||
reload: load,
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,9 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
|
||||
// 전역 스타일(디자인 토큰 + 기본값) 을 앱 코드보다 먼저 읽는다
|
||||
import '@/assets/styles/base.css'
|
||||
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
|
||||
@@ -0,0 +1,216 @@
|
||||
/**
|
||||
* 홈 화면 임시 데이터 — .design/surinz 아트보드에 그려진 값을 그대로 옮긴 것.
|
||||
*
|
||||
* 백엔드에 홈 API 가 아직 없어서 화면을 먼저 세운다.
|
||||
* 실제 연동은 `composables/useHome.ts` 의 로더 한 줄만 바꾸면 되고,
|
||||
* 그때 이 파일은 지우거나 테스트 픽스처로만 남긴다.
|
||||
*/
|
||||
import type {
|
||||
ClanRankEntry,
|
||||
CommunityPost,
|
||||
EventBanner,
|
||||
GameRanking,
|
||||
NewsItem,
|
||||
RecentSearchItem,
|
||||
SearchRankEntry,
|
||||
StreamChannel,
|
||||
UserRankEntry,
|
||||
} from '@/types/home'
|
||||
|
||||
// 등락 값을 짧게 만드는 도우미 — 픽스처를 읽기 쉽게 하려는 용도
|
||||
const up = (amount: number) => ({ direction: 'up' as const, amount })
|
||||
const down = (amount: number) => ({ direction: 'down' as const, amount })
|
||||
const same = () => ({ direction: 'same' as const, amount: 0 })
|
||||
|
||||
export const recentSearches: RecentSearchItem[] = [
|
||||
{ nickname: '달빛조각사', avatarColor: '#DDE4EE' },
|
||||
{ nickname: '칼든햄스터', avatarColor: '#E5E0F0' },
|
||||
{ nickname: '새벽두시', avatarColor: '#E7E3D8' },
|
||||
{ nickname: '무명연대장', avatarColor: '#D8E6E2' },
|
||||
]
|
||||
|
||||
export const eventBanners: EventBanner[] = [
|
||||
{
|
||||
id: 'ev-1',
|
||||
category: '시즌 이벤트',
|
||||
title: '서든 페스티벌 같이 갈래?',
|
||||
period: '9월 1일 ~ 9월 30일',
|
||||
imageUrl: '/images/events/season-festival.jpg',
|
||||
},
|
||||
{
|
||||
id: 'ev-2',
|
||||
category: '출석 이벤트',
|
||||
title: '매일 접속하고 보급 상자 받아 가기',
|
||||
period: '9월 1일 ~ 9월 14일',
|
||||
placeholderColor: '#E4E8ED',
|
||||
},
|
||||
{
|
||||
id: 'ev-3',
|
||||
category: '클랜 이벤트',
|
||||
title: '클랜전 정기 리그 참가 모집',
|
||||
period: '9월 5일 ~ 9월 21일',
|
||||
placeholderColor: '#EAE6E0',
|
||||
},
|
||||
{
|
||||
id: 'ev-4',
|
||||
category: '신규 유저',
|
||||
title: '처음 오셨나요? 첫 주 지원 꾸러미',
|
||||
period: '상시',
|
||||
placeholderColor: '#E2E9E6',
|
||||
},
|
||||
{
|
||||
id: 'ev-5',
|
||||
category: '업데이트',
|
||||
title: '신규 맵 컨테이너 야드 체험 주간',
|
||||
period: '9월 8일 ~ 9월 15일',
|
||||
placeholderColor: '#E8E4EC',
|
||||
},
|
||||
]
|
||||
|
||||
export const searchRanking: SearchRankEntry[] = [
|
||||
{ rank: 1, nickname: '달빛조각사', movement: up(2) },
|
||||
{ rank: 2, nickname: '칼든햄스터', movement: down(1) },
|
||||
{ rank: 3, nickname: '새벽두시', movement: up(4) },
|
||||
{ rank: 4, nickname: '무명연대장', movement: same() },
|
||||
{ rank: 5, nickname: '한밤의저격수', movement: up(3) },
|
||||
{ rank: 6, nickname: '조용한총잡이', movement: down(2) },
|
||||
{ rank: 7, nickname: '야간부대장', movement: same() },
|
||||
{ rank: 8, nickname: '헤드샷장인', movement: up(5) },
|
||||
{ rank: 9, nickname: '삼보급단골', movement: same() },
|
||||
]
|
||||
|
||||
const tierRanking: UserRankEntry[] = [
|
||||
{ rank: 1, nickname: '달빛조각사', gradeShape: 'bar', movement: up(2) },
|
||||
{ rank: 2, nickname: '칼든햄스터', gradeShape: 'star', movement: down(1) },
|
||||
{ rank: 3, nickname: '새벽두시', gradeShape: 'bar', movement: up(4) },
|
||||
{ rank: 4, nickname: '무명연대장', gradeShape: 'diamond', movement: same() },
|
||||
{ rank: 5, nickname: '한밤의저격수', gradeShape: 'diamond', movement: up(3) },
|
||||
{ rank: 6, nickname: '조용한총잡이', gradeShape: 'bar', movement: down(2) },
|
||||
{ rank: 7, nickname: '야간부대장', gradeShape: 'diamond', movement: same() },
|
||||
{ rank: 8, nickname: '헤드샷장인', gradeShape: 'diamond', movement: up(5) },
|
||||
{ rank: 9, nickname: '삼보급단골', gradeShape: 'bar', movement: down(3) },
|
||||
{ rank: 10, nickname: '웨어하우스지박령', gradeShape: 'star', movement: up(1) },
|
||||
]
|
||||
|
||||
const rankedRanking: UserRankEntry[] = [
|
||||
{ rank: 1, nickname: '헤드샷장인', gradeShape: 'star', rp: 2486, movement: up(1) },
|
||||
{ rank: 2, nickname: '달빛조각사', gradeShape: 'bar', rp: 2451, movement: down(1) },
|
||||
{ rank: 3, nickname: '삼보급단골', gradeShape: 'diamond', rp: 2398, movement: up(6) },
|
||||
{ rank: 4, nickname: '칼든햄스터', gradeShape: 'star', rp: 2344, movement: same() },
|
||||
{ rank: 5, nickname: '웨어하우스지박령', gradeShape: 'diamond', rp: 2301, movement: up(2) },
|
||||
{ rank: 6, nickname: '새벽두시', gradeShape: 'bar', rp: 2276, movement: down(3) },
|
||||
{ rank: 7, nickname: '조용한총잡이', gradeShape: 'diamond', rp: 2240, movement: same() },
|
||||
{ rank: 8, nickname: '한밤의저격수', gradeShape: 'diamond', rp: 2205, movement: up(4) },
|
||||
{ rank: 9, nickname: '야간부대장', gradeShape: 'bar', rp: 2181, movement: down(2) },
|
||||
{ rank: 10, nickname: '무명연대장', gradeShape: 'diamond', rp: 2154, movement: up(1) },
|
||||
]
|
||||
|
||||
const clanRanking: ClanRankEntry[] = [
|
||||
{ rank: 1, clanName: '무명연대', movement: same() },
|
||||
{ rank: 2, clanName: '새벽클랜', movement: up(2) },
|
||||
{ rank: 3, clanName: '야간부대', movement: down(1) },
|
||||
{ rank: 4, clanName: '정예사격단', movement: up(3) },
|
||||
{ rank: 5, clanName: '삼보급수호대', movement: same() },
|
||||
{ rank: 6, clanName: '헤드샷연구소', movement: up(4) },
|
||||
{ rank: 7, clanName: '크로스카운터', movement: down(2) },
|
||||
{ rank: 8, clanName: '웨어하우스단', movement: same() },
|
||||
{ rank: 9, clanName: '새벽정찰대', movement: up(1) },
|
||||
{ rank: 10, clanName: '삼보급기동대', movement: down(3) },
|
||||
]
|
||||
|
||||
export const gameRanking: GameRanking = {
|
||||
tier: tierRanking,
|
||||
ranked: rankedRanking,
|
||||
clan: clanRanking,
|
||||
totalCount: 100,
|
||||
pageSize: 10,
|
||||
}
|
||||
|
||||
export const communityPosts: CommunityPost[] = [
|
||||
{
|
||||
id: 'cp-1',
|
||||
kind: 'photo',
|
||||
placeholderColor: '#E4E8ED',
|
||||
authorNickname: '달빛조각사',
|
||||
authorAvatarColor: '#C9D2DD',
|
||||
reactionCount: 312,
|
||||
},
|
||||
{
|
||||
id: 'cp-2',
|
||||
kind: 'album',
|
||||
placeholderColor: '#EAE6E0',
|
||||
authorNickname: '칼든햄스터',
|
||||
authorAvatarColor: '#D8D2C8',
|
||||
reactionCount: 274,
|
||||
},
|
||||
{
|
||||
id: 'cp-3',
|
||||
kind: 'text',
|
||||
excerpt: '폭파 삼보급 A 롱각, 다들 어디 서세요?',
|
||||
placeholderColor: '#F5F6F8',
|
||||
authorNickname: '새벽두시',
|
||||
authorAvatarColor: '#DDE4EE',
|
||||
reactionCount: 198,
|
||||
},
|
||||
{
|
||||
id: 'cp-4',
|
||||
kind: 'clip',
|
||||
placeholderColor: '#E8E4EC',
|
||||
authorNickname: '무명연대장',
|
||||
authorAvatarColor: '#D5CEDC',
|
||||
reactionCount: 163,
|
||||
},
|
||||
]
|
||||
|
||||
export const gameNews: NewsItem[] = [
|
||||
{ id: 'gn-1', title: '9월 정기점검 안내', date: '09.02', isNew: true },
|
||||
{ id: 'gn-2', title: '비매너 이용자 제재 결과', date: '09.01', isNew: true },
|
||||
{ id: 'gn-3', title: '가을 시즌 랭크전 일정', date: '08.29', isNew: false },
|
||||
{ id: 'gn-4', title: '신규 맵 컨테이너 야드 추가', date: '08.28', isNew: false },
|
||||
{ id: 'gn-5', title: 'AK-47 반동 수치 조정', date: '08.26', isNew: false },
|
||||
{ id: 'gn-6', title: '클랜전 매칭 로직 개선', date: '08.22', isNew: false },
|
||||
]
|
||||
|
||||
export const serviceNews: NewsItem[] = [
|
||||
{ id: 'sn-1', title: '맵별 승률 통계를 열었어요', date: '09.03', isNew: true },
|
||||
{ id: 'sn-2', title: '전적 갱신이 두 배 빨라졌어요', date: '09.01', isNew: true },
|
||||
{ id: 'sn-3', title: '즐겨찾기 알림 기능 추가', date: '08.30', isNew: false },
|
||||
{ id: 'sn-4', title: '8월 서버 점검 결과 보고', date: '08.27', isNew: false },
|
||||
{ id: 'sn-5', title: '커뮤니티 이용 규칙 정리', date: '08.24', isNew: false },
|
||||
{ id: 'sn-6', title: '모바일 화면을 다듬었어요', date: '08.20', isNew: false },
|
||||
]
|
||||
|
||||
export const liveStreams: StreamChannel[] = [
|
||||
{
|
||||
id: 'st-1',
|
||||
title: '삼보급 스나 연습',
|
||||
streamerName: '달빛조각사',
|
||||
viewerCount: 1204,
|
||||
placeholderColor: '#E4E8ED',
|
||||
streamerAvatarColor: '#DDE4EE',
|
||||
},
|
||||
{
|
||||
id: 'st-2',
|
||||
title: '클랜전 정기 리그 중계',
|
||||
streamerName: '무명연대',
|
||||
viewerCount: 862,
|
||||
placeholderColor: '#EAE6E0',
|
||||
streamerAvatarColor: '#D8E6E2',
|
||||
},
|
||||
{
|
||||
id: 'st-3',
|
||||
title: '초보 탈출 폭파미션 강의',
|
||||
streamerName: '새벽두시',
|
||||
viewerCount: 517,
|
||||
placeholderColor: '#E2E9E6',
|
||||
streamerAvatarColor: '#E7E3D8',
|
||||
},
|
||||
{
|
||||
id: 'st-4',
|
||||
title: '시청자 참여 한 판',
|
||||
streamerName: '한밤의저격수',
|
||||
viewerCount: 341,
|
||||
placeholderColor: '#E8E4EC',
|
||||
streamerAvatarColor: '#E5E0F0',
|
||||
},
|
||||
]
|
||||
+225
-17
@@ -1,27 +1,235 @@
|
||||
<script setup lang="ts">
|
||||
// 홈 페이지 — 템플릿 기본 진입점
|
||||
import { ref } from 'vue'
|
||||
// 서린즈 홈 — 최상단 검색 히어로 + 밀도 그리드.
|
||||
//
|
||||
// 배치는 폭에 따라 세 가지다.
|
||||
// · 데스크톱(1200~) : 3열. 이벤트와 게임 랭킹이 두 칸씩 차지한다
|
||||
// · 태블릿(768~1199): 2열. 커뮤니티를 검색 랭킹 옆으로 올려 빈 칸을 없앤다
|
||||
// · 모바일(~767) : 1열
|
||||
//
|
||||
// 섹션은 각자 따로 채운다 — 한 섹션이 실패하거나 비어도 나머지는 그대로 보인다.
|
||||
import { onMounted, onBeforeUnmount, ref } from 'vue'
|
||||
import AppFooter from '@/components/layout/AppFooter.vue'
|
||||
import AppHeader from '@/components/layout/AppHeader.vue'
|
||||
import SearchHero from '@/components/layout/SearchHero.vue'
|
||||
import SearchSheet from '@/components/layout/SearchSheet.vue'
|
||||
import CommunitySection from '@/components/home/CommunitySection.vue'
|
||||
import EventSection from '@/components/home/EventSection.vue'
|
||||
import GameRankingSection from '@/components/home/GameRankingSection.vue'
|
||||
import NewsSection from '@/components/home/NewsSection.vue'
|
||||
import SearchRankingSection from '@/components/home/SearchRankingSection.vue'
|
||||
import StreamingSection from '@/components/home/StreamingSection.vue'
|
||||
import {
|
||||
useCommunityPosts,
|
||||
useEventBanners,
|
||||
useGameNews,
|
||||
useGameRanking,
|
||||
useLiveStreams,
|
||||
useRecentSearches,
|
||||
useSearchRanking,
|
||||
useServiceNews,
|
||||
} from '@/composables/useHome'
|
||||
|
||||
const message = ref<string>('You did it!')
|
||||
const events = useEventBanners()
|
||||
const searchRanking = useSearchRanking()
|
||||
const gameRanking = useGameRanking()
|
||||
const community = useCommunityPosts()
|
||||
const gameNews = useGameNews()
|
||||
const serviceNews = useServiceNews()
|
||||
const streams = useLiveStreams()
|
||||
|
||||
const recentSearches = ref(useRecentSearches())
|
||||
|
||||
// 헤더 검색 시트
|
||||
const isSearchSheetOpen = ref(false)
|
||||
|
||||
// 히어로 검색창이 화면 밖으로 나갔는지 — 헤더의 돋보기와 그림자를 함께 켠다
|
||||
const heroRef = ref<InstanceType<typeof SearchHero> | null>(null)
|
||||
const isHeroOut = ref(false)
|
||||
let heroObserver: IntersectionObserver | null = null
|
||||
|
||||
function handleSearch(nickname: string) {
|
||||
isSearchSheetOpen.value = false
|
||||
// 전적 검색 화면이 생기면 router.push({ name: 'record', params: { nickname } }) 로 바꾼다
|
||||
window.console.info('전적 검색:', nickname)
|
||||
}
|
||||
|
||||
function removeRecentSearch(nickname: string) {
|
||||
recentSearches.value = recentSearches.value.filter((item) => item.nickname !== nickname)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 섹션마다 따로 부른다 — 하나가 늦어도 나머지는 먼저 그려진다
|
||||
events.load()
|
||||
searchRanking.load()
|
||||
gameRanking.load()
|
||||
community.load()
|
||||
gameNews.load()
|
||||
serviceNews.load()
|
||||
streams.load()
|
||||
|
||||
const heroElement = heroRef.value?.$el as HTMLElement | undefined
|
||||
if (!heroElement || typeof IntersectionObserver === 'undefined') return
|
||||
|
||||
heroObserver = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
isHeroOut.value = entry !== undefined && !entry.isIntersecting
|
||||
},
|
||||
// 헤더 높이만큼 위를 잘라내고 판단한다
|
||||
{ rootMargin: '-72px 0px 0px 0px' },
|
||||
)
|
||||
heroObserver.observe(heroElement)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => heroObserver?.disconnect())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="home">
|
||||
<h1>{{ message }}</h1>
|
||||
<p>
|
||||
Visit
|
||||
<a
|
||||
href="https://vuejs.org/"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>vuejs.org</a>
|
||||
to read the documentation
|
||||
</p>
|
||||
</main>
|
||||
<div class="home">
|
||||
<AppHeader
|
||||
:search-visible="isHeroOut"
|
||||
current-label="홈"
|
||||
@open-search="isSearchSheetOpen = true"
|
||||
/>
|
||||
|
||||
<SearchHero
|
||||
ref="heroRef"
|
||||
:recent-searches="recentSearches"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
|
||||
<main class="home__grid">
|
||||
<EventSection
|
||||
class="home__cell home__cell--wide home__cell--event"
|
||||
:resource="events"
|
||||
/>
|
||||
<SearchRankingSection
|
||||
class="home__cell home__cell--search-rank"
|
||||
:resource="searchRanking"
|
||||
/>
|
||||
<GameRankingSection
|
||||
class="home__cell home__cell--wide home__cell--game-rank"
|
||||
:resource="gameRanking"
|
||||
/>
|
||||
<CommunitySection
|
||||
class="home__cell home__cell--community"
|
||||
:resource="community"
|
||||
/>
|
||||
<NewsSection
|
||||
class="home__cell home__cell--game-news"
|
||||
title="서든어택 소식"
|
||||
:resource="gameNews"
|
||||
/>
|
||||
<NewsSection
|
||||
class="home__cell home__cell--service-news"
|
||||
title="서린즈 소식"
|
||||
:resource="serviceNews"
|
||||
/>
|
||||
<StreamingSection
|
||||
class="home__cell home__cell--streaming"
|
||||
:resource="streams"
|
||||
/>
|
||||
</main>
|
||||
|
||||
<AppFooter />
|
||||
|
||||
<SearchSheet
|
||||
:open="isSearchSheetOpen"
|
||||
:recent-searches="recentSearches"
|
||||
:popular="searchRanking.data.value ?? []"
|
||||
@close="isSearchSheetOpen = false"
|
||||
@search="handleSearch"
|
||||
@remove-recent="removeRecentSearch"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.home {
|
||||
padding: 2rem;
|
||||
/* ---------- 데스크톱 — 균등 3열 ---------- */
|
||||
.home__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: var(--sz-section-gap) 2rem;
|
||||
padding: 2.25rem var(--sz-page-pad) 3.5rem;
|
||||
}
|
||||
|
||||
.home__cell--wide {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
/* ---------- 태블릿 — 2열. 커뮤니티를 검색 랭킹 옆으로 올려 빈 칸을 없앤다 ---------- */
|
||||
@media (max-width: 74.9375rem) {
|
||||
.home__grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 2.25rem 1.5rem;
|
||||
padding: 1.75rem var(--sz-page-pad-tablet) 3rem;
|
||||
}
|
||||
|
||||
.home__cell--event {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.home__cell--search-rank {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.home__cell--community {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.home__cell--game-rank {
|
||||
order: 4;
|
||||
}
|
||||
|
||||
.home__cell--game-news {
|
||||
order: 5;
|
||||
}
|
||||
|
||||
.home__cell--service-news {
|
||||
order: 6;
|
||||
}
|
||||
|
||||
/* 방송은 두 칸을 써서 큰 방송과 목록을 나란히 둔다 */
|
||||
.home__cell--streaming {
|
||||
order: 7;
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- 모바일 — 한 열. 순서는 데스크톱과 같다 ---------- */
|
||||
@media (max-width: 47.9375rem) {
|
||||
.home__grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sz-section-gap-mobile);
|
||||
padding: 1.5rem var(--sz-page-pad-mobile) 2.5rem;
|
||||
}
|
||||
|
||||
.home__cell--event {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.home__cell--search-rank {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.home__cell--game-rank {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.home__cell--community {
|
||||
order: 4;
|
||||
}
|
||||
|
||||
.home__cell--game-news {
|
||||
order: 5;
|
||||
}
|
||||
|
||||
.home__cell--service-news {
|
||||
order: 6;
|
||||
}
|
||||
|
||||
.home__cell--streaming {
|
||||
order: 7;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -18,3 +18,21 @@ export function formatDate(input: Date | string): string {
|
||||
const dd = String(date.getDate()).padStart(2, '0')
|
||||
return `${yyyy}-${mm}-${dd}`
|
||||
}
|
||||
|
||||
/**
|
||||
* Date 를 'HH:mm' 형식으로 변환 (예: 랭킹 집계 기준 시각)
|
||||
*/
|
||||
export function formatClockTime(input: Date | string): string {
|
||||
const date = typeof input === 'string' ? new Date(input) : input
|
||||
if (Number.isNaN(date.getTime())) return ''
|
||||
const hh = String(date.getHours()).padStart(2, '0')
|
||||
const mm = String(date.getMinutes()).padStart(2, '0')
|
||||
return `${hh}:${mm}`
|
||||
}
|
||||
|
||||
/**
|
||||
* 숫자에 천 단위 구분을 넣는다 (예: 1204 → "1,204")
|
||||
*/
|
||||
export function formatCount(value: number): string {
|
||||
return value.toLocaleString('ko-KR')
|
||||
}
|
||||
|
||||
@@ -0,0 +1,130 @@
|
||||
/**
|
||||
* 홈 화면 도메인 타입 — .design/surinz 홈 아트보드(Main · Tablet · Mobile)의 화면 요소를 그대로 옮긴 것.
|
||||
* 백엔드 응답 스키마가 확정되면 이 파일만 맞추면 된다.
|
||||
*/
|
||||
|
||||
/** 등락 방향 — 상승 / 하락 / 변동 없음 */
|
||||
export type MovementDirection = 'up' | 'down' | 'same'
|
||||
|
||||
/** 순위 등락 — 변동 없음이면 amount 는 0 */
|
||||
export interface RankMovement {
|
||||
direction: MovementDirection
|
||||
amount: number
|
||||
}
|
||||
|
||||
/** 계급 자리표시 종류 — 실제 계급 이미지가 없을 때 그리는 약식 표장 */
|
||||
export type RankGradeShape = 'bar' | 'star' | 'diamond'
|
||||
|
||||
/** 이벤트 배너 */
|
||||
export interface EventBanner {
|
||||
id: string
|
||||
/** 이벤트 분류 (예: 시즌 이벤트) */
|
||||
category: string
|
||||
title: string
|
||||
/** 노출 기간 문구 */
|
||||
period: string
|
||||
/** 배너 이미지. 없으면 자리표시 색을 쓴다 */
|
||||
imageUrl?: string
|
||||
/** 이미지가 없을 때 채울 자리표시 색 */
|
||||
placeholderColor?: string
|
||||
}
|
||||
|
||||
/** 검색 랭킹 한 줄 */
|
||||
export interface SearchRankEntry {
|
||||
rank: number
|
||||
nickname: string
|
||||
movement: RankMovement
|
||||
}
|
||||
|
||||
/** 계급 · 랭크전 랭킹 한 줄 */
|
||||
export interface UserRankEntry {
|
||||
rank: number
|
||||
nickname: string
|
||||
/** 계급 이미지. 없으면 gradeShape 로 약식 표장을 그린다 */
|
||||
gradeImageUrl?: string
|
||||
gradeShape: RankGradeShape
|
||||
/**
|
||||
* 랭크전 티어 이미지 — 랭크전 랭킹에만 있다 (RP 와 한 칸에 붙는다).
|
||||
* 없으면 육각 자리표시를 그린다.
|
||||
*/
|
||||
tierImageUrl?: string
|
||||
/** 랭크전 랭킹에만 있는 RP 점수 */
|
||||
rp?: number
|
||||
movement: RankMovement
|
||||
}
|
||||
|
||||
/** 클랜 랭킹 한 줄 */
|
||||
export interface ClanRankEntry {
|
||||
rank: number
|
||||
clanName: string
|
||||
/** 클랜 마크 이미지. 없으면 방패 자리표시를 그린다 */
|
||||
markImageUrl?: string
|
||||
movement: RankMovement
|
||||
}
|
||||
|
||||
/** 게임 랭킹 갈래 — 세 갈래를 나란히 두거나(데스크톱) 하나씩 고른다(태블릿·모바일) */
|
||||
export type GameRankBranch = 'tier' | 'ranked' | 'clan'
|
||||
|
||||
/** 갈래 안의 하위 탭 (예: 통합 / 시즌) */
|
||||
export interface RankTabOption {
|
||||
value: string
|
||||
label: string
|
||||
}
|
||||
|
||||
/** 게임 랭킹 묶음 — 세 갈래가 같은 순위 구간을 함께 본다 */
|
||||
export interface GameRanking {
|
||||
tier: UserRankEntry[]
|
||||
ranked: UserRankEntry[]
|
||||
clan: ClanRankEntry[]
|
||||
/** 전체 순위 수 — 구간 이동(페이지네이션) 계산에 쓴다 */
|
||||
totalCount: number
|
||||
/** 한 구간에 보여 주는 순위 수 */
|
||||
pageSize: number
|
||||
}
|
||||
|
||||
/** 커뮤니티 글 종류 — 사진 / 글 / 클립(영상) / 여러 장 */
|
||||
export type CommunityPostKind = 'photo' | 'text' | 'clip' | 'album'
|
||||
|
||||
/** 커뮤니티 글 */
|
||||
export interface CommunityPost {
|
||||
id: string
|
||||
kind: CommunityPostKind
|
||||
/** 글 종류일 때 카드에 그대로 보이는 본문 */
|
||||
excerpt?: string
|
||||
thumbnailUrl?: string
|
||||
/** 썸네일이 없을 때 채울 자리표시 색 */
|
||||
placeholderColor: string
|
||||
authorNickname: string
|
||||
authorAvatarUrl?: string
|
||||
/** 프로필 이미지가 없을 때 채울 자리표시 색 */
|
||||
authorAvatarColor: string
|
||||
reactionCount: number
|
||||
}
|
||||
|
||||
/** 소식 한 줄 (서든어택 · 서린즈 공통) */
|
||||
export interface NewsItem {
|
||||
id: string
|
||||
title: string
|
||||
/** 노출용 날짜 문구 (MM.DD) */
|
||||
date: string
|
||||
isNew: boolean
|
||||
}
|
||||
|
||||
/** 방송 중인 채널 */
|
||||
export interface StreamChannel {
|
||||
id: string
|
||||
title: string
|
||||
streamerName: string
|
||||
viewerCount: number
|
||||
thumbnailUrl?: string
|
||||
placeholderColor: string
|
||||
streamerAvatarUrl?: string
|
||||
streamerAvatarColor: string
|
||||
}
|
||||
|
||||
/** 최근 검색 기록 칩 */
|
||||
export interface RecentSearchItem {
|
||||
nickname: string
|
||||
avatarUrl?: string
|
||||
avatarColor: string
|
||||
}
|
||||
Reference in New Issue
Block a user