Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 ttipo
|
b34afa4c7e | ||
|
ttipo
|
1ca4ca0756 | ||
|
ttipo
|
d27184c13b | ||
|
ttipo
|
1ac74e804a | ||
|
ttipo
|
3b831c5ad2 | ||
|
ttipo
|
4ef3deb87e |
@@ -13,13 +13,13 @@ description: 세 플랫폼이 공유하는 에러 코드 ↔ 한국어 메시지
|
||||
|
||||
| 코드 | HTTP / 상황 | 메시지 |
|
||||
| -------- | -------------------- | ------------------------------------------------------- |
|
||||
| SYS_001 | 500 / 미정의 예외 | "일시적인 시스템 오류가 발생했습니다. 잠시 후 다시 시도해 주세요." |
|
||||
| AUTH_001 | 401 | "로그인이 필요한 서비스입니다. 로그인 후 이용해 주세요." |
|
||||
| AUTH_002 | 세션 만료 (클라이언트) | "안전을 위해 로그아웃 되었습니다. 다시 로그인해 주세요." |
|
||||
| AUTH_003 | 403 | "해당 메뉴나 기능에 접근할 수 있는 권한이 없습니다." |
|
||||
| VAL_001 | 400 / 422 (Validation) | "입력하신 정보를 다시 확인해 주세요. (필수값 누락 또는 형식 오류)" |
|
||||
| RES_001 | 404 | "요청하신 정보나 페이지를 찾을 수 없습니다." |
|
||||
| BIZ_001 | 200(비즈니스 실패) / 기타 | "요청하신 작업을 완료하지 못했습니다. 다시 시도해 주세요." |
|
||||
| SYS_001 | 500 / 미정의 예외 | "일시적인 오류가 생겼어요. 잠시 후 다시 시도해 주세요." |
|
||||
| AUTH_001 | 401 | "로그인이 필요한 기능이에요. 로그인 후 이용해 주세요." |
|
||||
| AUTH_002 | 세션 만료 (클라이언트) | "안전을 위해 로그아웃했어요. 다시 로그인해 주세요." |
|
||||
| AUTH_003 | 403 | "이 메뉴나 기능을 이용할 권한이 없어요." |
|
||||
| VAL_001 | 400 / 422 (Validation) | "입력하신 내용을 다시 확인해 주세요. 빠진 항목이 있거나 형식이 맞지 않아요." |
|
||||
| RES_001 | 404 | "찾으시는 정보나 페이지가 없어요." |
|
||||
| BIZ_001 | 200(비즈니스 실패) / 기타 | "요청하신 작업을 끝내지 못했어요. 다시 시도해 주세요." |
|
||||
|
||||
> 비즈니스 예외는 `HttpException` 응답의 `message` 로 사용자 노출 문구를 재정의할 수 있다.
|
||||
> 응답 래퍼 구조는 [[response-format]] 참조.
|
||||
|
||||
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
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,64 @@
|
||||
// templates-record/*.dc.html 의 /*PRETENDARD*/ 토큰을 Pretendard woff2 data URI 로 치환해
|
||||
// record/ 아래에 최종 .dc.html 아트보드를 생성한다.
|
||||
//
|
||||
// 홈 캔버스(build.mjs · fonts/mini)와 서브셋을 공유하지 않는다.
|
||||
// 전적 화면은 홈에 없던 글자를 많이 쓰는데, 공용 서브셋을 키우면 홈 아트보드 10개가
|
||||
// 전부 같이 무거워지기 때문이다. 여기서는 이 화면이 실제로 쓰는 글자만 담는다.
|
||||
import { readFileSync, writeFileSync, readdirSync, mkdirSync } from 'node:fs';
|
||||
import { join } from 'node:path';
|
||||
import subsetFont from 'subset-font';
|
||||
import { decompress } from 'wawoff2';
|
||||
|
||||
const TPL = 'templates-record';
|
||||
const OUT = 'record';
|
||||
|
||||
// 1) 아트보드 텍스트에서 쓰이는 글자를 모은다 (style 블록과 태그는 제외)
|
||||
const used = new Set();
|
||||
const names = readdirSync(TPL).filter((n) => n.endsWith('.dc.html'));
|
||||
for (const name of names) {
|
||||
const src = readFileSync(join(TPL, name), 'utf8')
|
||||
.replace(/<style[\s\S]*?<\/style>/g, '')
|
||||
.replace(/<[^>]+>/g, ' ');
|
||||
for (const c of src) used.add(c);
|
||||
}
|
||||
// 안전 여유 — 아스키 인쇄 가능 문자와 자주 쓰는 기호는 항상 포함
|
||||
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}`);
|
||||
|
||||
// 2) 굵기별 서브셋을 만들어 @font-face 로 인라인한다
|
||||
const WEIGHTS = [
|
||||
['Regular', 400],
|
||||
['SemiBold', 600],
|
||||
['Bold', 700],
|
||||
];
|
||||
let faceBytes = 0;
|
||||
const faces = [];
|
||||
for (const [file, weight] of WEIGHTS) {
|
||||
const woff2 = readFileSync(join('fonts', `Pretendard-${file}.subset.woff2`));
|
||||
const ttf = Buffer.from(await decompress(woff2));
|
||||
const out = await subsetFont(ttf, text, { targetFormat: 'woff2' });
|
||||
faceBytes += out.length;
|
||||
console.log(`${file.padEnd(9)} ${(out.length / 1024).toFixed(0).padStart(3)} KB`);
|
||||
faces.push(
|
||||
`@font-face{font-family:'Pretendard';font-style:normal;font-weight:${weight};font-display:swap;` +
|
||||
`src:url(data:font/woff2;base64,${out.toString('base64')}) format('woff2');}`,
|
||||
);
|
||||
}
|
||||
console.log(`글꼴 합계 ${(faceBytes / 1024).toFixed(0)} KB (아트보드 1개당)`);
|
||||
|
||||
// 3) 치환해서 내보낸다
|
||||
mkdirSync(OUT, { recursive: true });
|
||||
const joined = faces.join('\n');
|
||||
let total = 0;
|
||||
for (const name of names) {
|
||||
const src = readFileSync(join(TPL, name), 'utf8');
|
||||
if (!src.includes('/*PRETENDARD*/')) console.error(`warn: ${name} 에 /*PRETENDARD*/ 토큰이 없습니다`);
|
||||
const out = src.replace('/*PRETENDARD*/', joined);
|
||||
writeFileSync(join(OUT, name), out, 'utf8');
|
||||
total += out.length;
|
||||
console.log(`${name} — ${(out.length / 1024).toFixed(0)} KB`);
|
||||
}
|
||||
console.log(`${names.length} artboards built · 합계 ${(total / 1024 / 1024).toFixed(1)} MB`);
|
||||
@@ -164,7 +164,7 @@
|
||||
"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여기 없는 크기나 색을 화면에서 쓰게 되면, 먼저 이 아트보드에 올리고 나서 씁니다. 그래야 한 벌로 남습니다."
|
||||
"text": "기본 요소\n\n홈을 그리면서 실제로 굳어진 값만 모았습니다. 새로 만든 표가 아니라 이미 화면에 쓰이고 있는 것을 한자리에 옮겨 적은 것입니다.\n· 글자 — 아홉 단계. Pretendard 400/500/600/700 네 굵기만 씁니다. 숫자는 tabular-nums.\n· 색 — 브랜드 4, 글자 5, 선 3, 면 5, 의미 2. 여기 없는 색은 쓰지 않습니다.\n· 컴포넌트 — 탭(필터)과 세그먼트(갈래)를 다른 모양으로 두는 이유, 버튼 세 종류, 표 한 줄의 구성.\n· 치수 — 라운드·행 높이·여백·최소 터치 크기.\n\n여기 없는 크기나 색을 화면에서 쓰게 되면, 먼저 이 아트보드에 올리고 나서 씁니다. 그래야 한 벌로 남습니다.\n\n의미 색이 셋으로 늘었습니다\n승리 #2A5FCC 를 올렸습니다. 전적 화면에서 승/패를 가르려고 정한 값이고, 승패에만 씁니다 — 상승·하락은 그대로 초록·빨강입니다. 전적 화면에서는 패도 하락과 같은 #C4453D 를 씁니다."
|
||||
},
|
||||
{
|
||||
"id": "note-blocks",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1 +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{|}‘’“”『』〈〉《》±×÷≤≥→←↑↓★☆※℃％㎏㎜㎝
|
||||
실패·비어있음블록섹션마다따로채우기때문에한이하거나도머지는그대보입니.두상태모본자리를차해서,늦게착페가밀않습든공통일시적인오류생겼요잠후주세구름(커뮤티예)아직올라온글없첫쓰러의규격바탕#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,405 @@
|
||||
// 배경 커스터마이즈 방향 아트보드를 만든다.
|
||||
//
|
||||
// BannerOpen.dc.html 프로필 카드 열림 (원본 16:9 · 810px)
|
||||
//
|
||||
// 배경을 「화면 전체」에 까는 안과 「서린즈가 고른 배경만 허용」하는 안은 접었다.
|
||||
// 둘을 비교하던 아트보드(BgBand · BgPhoto · BgFull)는 결정이 끝나 지웠고, 고른 이유는 캔버스 메모에 남겼다.
|
||||
// 비교가 목적이라 Main.dc.html 의 <style> 블록과 표 규격을 그대로 물려받는다.
|
||||
import { readFileSync, writeFileSync } from 'node:fs';
|
||||
import { join } from 'node:path';
|
||||
|
||||
const TPL = 'templates-record';
|
||||
const main = readFileSync(join(TPL, 'Main.dc.html'), 'utf8');
|
||||
const style = main.match(/<helmet>\s*([\s\S]*?)\s*<\/helmet>/)[1];
|
||||
|
||||
// 프로필 층 아래(화면 갈래 탭 · 본문 · 푸터)를 Main 에서 그대로 가져온다.
|
||||
// 배경이 본문 전체와 어떻게 부딪히는지 보려면 본문이 «전부» 있어야 한다.
|
||||
const NL = String.fromCharCode(10);
|
||||
const restStart = main.indexOf(' <div class="ptab">');
|
||||
const restEnd = main.lastIndexOf('</x-dc>');
|
||||
const restRaw = main.slice(restStart, restEnd).trimEnd();
|
||||
// 마지막 </div> 는 뿌리 요소를 닫는 것이라 뺀다 — page() 가 다시 닫는다
|
||||
const REST = restRaw.slice(0, restRaw.lastIndexOf('</div>')) + NL;
|
||||
|
||||
const LOGO = (stroke) =>
|
||||
`<svg width="61" height="20" viewBox="-13.5 -7.5 373 123" fill="none" stroke="${stroke}" 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>`;
|
||||
|
||||
const NAV = [
|
||||
['홈', 500, true], ['전적 검색', 700, false], ['랭킹', 500, true],
|
||||
['커뮤니티', 500, true], ['스트리밍', 500, true], ['소식', 500, true], ['이벤트', 500, true],
|
||||
];
|
||||
|
||||
// 상단 전역 바. dark=true 는 배경 위에 얹히는 경우(C)만 쓴다.
|
||||
// inner 를 주면 그 폭의 기둥 안에 내용을 넣는다 — C 의 본문 카드와 기준선을 맞추기 위해서다.
|
||||
function gnb(dark, inner) {
|
||||
const dim = dark ? 'rgba(255,255,255,0.62)' : '#5B6169';
|
||||
const nav = NAV.map(([t, w, d]) => `<span style="font-weight: ${w};${d ? ` color: ${dim};` : ''}">${t}</span>`).join('');
|
||||
const skin = dark
|
||||
? { bar: 'background: rgba(10,12,16,0.72); border-bottom: 1px solid rgba(255,255,255,0.12);', ink: '#FFFFFF', pill: 'rgba(255,255,255,0.14)' }
|
||||
: { bar: 'border-bottom: 1px solid #EDEFF2;', ink: '#14161A', pill: '#F2F4F7' };
|
||||
const row = `<div style="display: flex; align-items: center; gap: 1.75rem; height: 72px;${inner ? ` width: ${inner}px; margin: 0 auto;` : ' padding: 0 40px;'}">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">${LOGO(skin.ink)}</div>
|
||||
<nav style="display: flex; align-items: center; gap: 1.5rem; margin-left: 0.75rem; font-size: 0.9375rem; color: ${skin.ink};">${nav}</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: ${skin.pill};"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="${skin.ink}" 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: ${skin.pill}; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: ${skin.ink}; letter-spacing: -0.015em; cursor: pointer;">로그인</button>
|
||||
</div>`;
|
||||
return ` <header style="${skin.bar}">
|
||||
${row}
|
||||
</header>
|
||||
`;
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
// 배경 그림 — 실제 에셋 자리다. 바깥에서 파일을 받을 수 없으므로 그라데이션과
|
||||
// 도형으로 대신 그렸다. 판단에 필요한 것은 "이 정도로 복잡한 면 위에서 글자가
|
||||
// 읽히는가" 뿐이라 이걸로 충분하다.
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
|
||||
// 서린즈가 고른 배경 — 브랜드 안에서 놀기 때문에 처음부터 어둡고 조용하다.
|
||||
// 주황 블룸은 왼쪽 위로 옮겼다 — 오른쪽에 두면 같은 주황인 「전적 갱신」 버튼과 겹친다.
|
||||
const ART_PRESET = `background:
|
||||
repeating-linear-gradient(115deg, rgba(255,255,255,0.028) 0 2px, rgba(255,255,255,0) 2px 9px),
|
||||
radial-gradient(110% 150% at 14% -40%, rgba(255,106,0,0.46) 0%, rgba(255,106,0,0) 56%),
|
||||
radial-gradient(95% 130% at 92% 130%, rgba(42,95,204,0.42) 0%, rgba(42,95,204,0) 62%),
|
||||
linear-gradient(135deg, #14161A 0%, #1E232B 52%, #0D0F12 100%);`;
|
||||
|
||||
// 사용자가 올린 사진 — 무엇이든 올 수 있다는 걸 보이려고 일부러 밝고 어수선하게,
|
||||
// 닉네임이 앉는 왼쪽 위에 가장 밝은 덩어리를 뒀다 (최악의 경우)
|
||||
const ART_PHOTO = `background:
|
||||
radial-gradient(55% 85% at 20% 26%, rgba(255,244,214,0.96) 0%, rgba(255,206,120,0.55) 38%, rgba(255,170,60,0) 72%),
|
||||
radial-gradient(70% 110% at 78% 82%, rgba(126,196,255,0.45) 0%, rgba(126,196,255,0) 62%),
|
||||
linear-gradient(158deg, #8A6A3C 0%, #3A4B58 54%, #0F171E 100%);`;
|
||||
|
||||
// 창고 맵 실루엣 — 사진처럼 보이게 하는 최소한의 형태
|
||||
const crates = (height, opacity) =>
|
||||
`<svg viewBox="0 0 1440 200" preserveAspectRatio="none" style="position: absolute; inset: auto 0 0 0; width: 100%; height: ${height}; opacity: ${opacity};" aria-hidden="true"><path d="M0 200V128h96v-28h84v28h58V84h132v116z" fill="#0B1116"></path><path d="M470 200v-52h74v-30h96v30h52v52z" fill="#0E151B"></path><path d="M792 200v-84h120v-22h74v22h66v84z" fill="#0B1116"></path><path d="M1128 200v-44h92v-34h120v78z" fill="#0E151B"></path></svg>`;
|
||||
|
||||
// 글자 받침 — 아래에서 위로 어두워지는 판.
|
||||
// 가로 방향 스크림은 왼쪽이 밝은 사진에만 듣는다. 어느 쪽이 밝을지 모르는 사용자
|
||||
// 사진에서는 글자가 앉는 «면» 자체를 눌러야 한다. height 는 판이 덮는 높이.
|
||||
const PLATE = (strength, height = '100%') =>
|
||||
`<span style="position: absolute; inset: auto 0 0 0; height: ${height}; background: linear-gradient(to top, rgba(6,8,11,${strength}) 0%, rgba(6,8,11,${(strength * 0.86).toFixed(2)}) 46%, rgba(6,8,11,${(strength * 0.34).toFixed(2)}) 100%);" aria-hidden="true"></span>`;
|
||||
|
||||
const HEX = (stroke) =>
|
||||
`<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="${stroke}" 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>`;
|
||||
|
||||
const REFRESH_ICON = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 11-2.3-5.6"></path><polyline points="20,4 20,8 16,8"></polyline></svg>`;
|
||||
|
||||
const PIC_ICON = (stroke) =>
|
||||
`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="${stroke}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="14" rx="2.5"></rect><path d="M3.5 15.5l4.5-4 4 3.5 3.5-3 5 4.5"></path><circle cx="9" cy="9.5" r="1.4"></circle></svg>`;
|
||||
|
||||
// 배경을 바꾸는 문. 제 화면임이 확인된 사람에게만 보인다.
|
||||
// onDark=false 는 흰 카드 위(C)에 올라가는 경우다.
|
||||
// 보조 버튼 — 주 동작(전적 갱신)과 같은 42px 이되 면이 없는 급.
|
||||
// 오른쪽 끝에 여러 개가 모이면 난잡해지므로, 한 상태에 보조는 «하나»만 둔다.
|
||||
const ghostButton = (label, icon, onDark = true) => {
|
||||
const skin = onDark
|
||||
? 'border: 1px solid rgba(255,255,255,0.34); background: rgba(255,255,255,0.10); color: #FFFFFF;'
|
||||
: 'border: 1px solid #E4E8ED; background: #FFFFFF; color: #14161A;';
|
||||
return `<button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.125rem; border-radius: 999px; ${skin} font-family: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; cursor: pointer;">${icon}${label}</button>`;
|
||||
};
|
||||
|
||||
const pickButton = (onDark = true) =>
|
||||
ghostButton('배경 고르기', PIC_ICON(onDark ? '#FFFFFF' : '#14161A'), onDark);
|
||||
|
||||
const CHEV = (up) =>
|
||||
`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="${up ? 'M8 14l4-4 4 4' : 'M8 10l4 4 4-4'}"></path></svg>`;
|
||||
|
||||
// 프로필 카드를 열고 닫는 문
|
||||
const cardButton = (open) =>
|
||||
ghostButton(open ? '카드 그만 보기' : '프로필 카드 보기', CHEV(open), true);
|
||||
|
||||
// ── 소유 인증 표시 ───────────────────────────────────────────
|
||||
// 전적 화면은 셋 중 한 상태다:
|
||||
// mine — 내가 연동한 내 계정. 배경을 고칠 수 있다.
|
||||
// linked — 남이 연동해 둔 계정. 누가 연동했는지(서린즈 계정)를 밝히고, 신고로 닿는다.
|
||||
// none — 아무도 연동하지 않은 계정. 표시가 없고 꾸밀 수도 없다 (로딩·상태 아트보드의 모습).
|
||||
// 자리는 둘째 줄 끝이다. 첫 줄(닉네임 · 계급)은 «게임 안»의 정체라 건드리지 않는다 —
|
||||
// 연동은 서린즈 쪽 사실이므로 클랜 · 마지막 플레이와 같은 줄에 둔다.
|
||||
const CHECK_ICON = (ink) =>
|
||||
`<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="${ink}" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M8 12.4l2.6 2.6L16 9.6"></path></svg>`;
|
||||
const PERSON_ICON = (ink) =>
|
||||
`<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="${ink}" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="3.4"></circle><path d="M5.5 19.5c0-3.4 2.9-5.6 6.5-5.6s6.5 2.2 6.5 5.6"></path></svg>`;
|
||||
|
||||
function ownerChip(owner, onDark) {
|
||||
if (owner === 'none') return '';
|
||||
const ink = onDark ? '#FFFFFF' : '#14161A';
|
||||
const skin = onDark
|
||||
? 'background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.24);'
|
||||
: 'background: #FFFFFF; border: 1px solid #E4E8ED;';
|
||||
const [icon, label] = owner === 'mine'
|
||||
? [CHECK_ICON(ink), '내 계정']
|
||||
: [PERSON_ICON(ink), '밤하늘 님이 연동한 계정'];
|
||||
return `<span style="display: inline-flex; align-items: center; gap: 0.3125rem; height: 24px; padding: 0 0.625rem; border-radius: 999px; ${skin} font-size: 0.75rem; font-weight: 600; color: ${ink}; white-space: nowrap;">${icon}${label}</span>`;
|
||||
}
|
||||
|
||||
// 프로필 한 줄 — onDark 면 배경 위(흰 글자), 아니면 지금 그대로(검은 글자)
|
||||
function profile({ onDark, pad = 34, secondary = '', owner = 'linked' }) {
|
||||
const ink = onDark ? '#FFFFFF' : '#14161A';
|
||||
const sub = onDark ? 'rgba(255,255,255,0.78)' : '#5B6169';
|
||||
const dim = onDark ? 'rgba(255,255,255,0.68)' : '#9BA1A9';
|
||||
const tile = onDark ? 'rgba(255,255,255,0.18)' : '#EDEFF2';
|
||||
const rule = onDark ? 'rgba(255,255,255,0.30)' : '#E4E8ED';
|
||||
const glyph = onDark ? 'rgba(255,255,255,0.88)' : '#7A828C';
|
||||
const tiers = [['랭크전 솔로 · 2026 시즌3', '다이아 3', '1,842 RP'], ['랭크전 파티 · 2026 시즌3', '플래티넘 1', '1,455 RP']];
|
||||
return `<div style="display: flex; align-items: center; gap: 1.25rem; padding: ${pad}px 40px;">
|
||||
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; background: ${tile}; flex-shrink: 0;"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="${glyph}" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
|
||||
<div style="min-width: 0;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.625rem;">
|
||||
<h1 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em; color: ${ink};">달빛조각사</h1>
|
||||
<span style="font-size: 0.9375rem; font-weight: 600; color: ${sub};">중령 2호</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4375rem;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: ${ink};">무명연대</span>
|
||||
<span style="width: 1px; height: 12px; background: ${rule};"></span>
|
||||
<span style="font-size: 0.875rem; color: ${dim};">마지막 플레이 2시간 전</span>
|
||||
${owner === 'none' ? '' : `<span style="width: 1px; height: 12px; background: ${rule};"></span>${ownerChip(owner, onDark)}`}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1;"></div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 2rem;">
|
||||
${tiers.map(([l, t, rp]) => `<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: ${tile}; flex-shrink: 0;">${HEX(glyph)}</span>
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: ${dim};">${l}</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700; color: ${ink};">${t}</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.8125rem; color: ${sub};">${rp}</div>
|
||||
</div>
|
||||
</div>`).join('\n ')}
|
||||
</div>
|
||||
|
||||
<span style="width: 1px; height: 48px; background: ${rule}; margin: 0 0.5rem;"></span>
|
||||
|
||||
<!-- 오른쪽 컨트롤 — 보조 하나 · 캡션 · 주 동작이 모두 42px 한 줄에 선다.
|
||||
캡션을 갱신 버튼 아래에 매달면 그 덩어리만 66px 이 되어 옆 버튼과 어긋난다. -->
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
${secondary}
|
||||
<span style="font-size: 0.8125rem; color: ${dim}; white-space: nowrap;">12분 전에 불러왔어요</span>
|
||||
<button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #FF6A00; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.015em; cursor: pointer;">${REFRESH_ICON}전적 갱신</button>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// 배경이 깔린 프로필 층
|
||||
function band({ art, silhouette = '', plate, plateHeight = '100%', extra = '', pad = 34, secondary = '', owner = 'linked' }) {
|
||||
return ` <section style="position: relative; isolation: isolate; overflow: hidden;">
|
||||
<span style="position: absolute; inset: 0; ${art}" aria-hidden="true"></span>
|
||||
${silhouette}
|
||||
${PLATE(plate, plateHeight)}
|
||||
<div style="position: relative;">
|
||||
${profile({ onDark: true, pad, secondary, owner }).replace(/^/gm, ' ')}
|
||||
</div>
|
||||
${extra} </section>
|
||||
`;
|
||||
}
|
||||
|
||||
function page(inner, { width = 1440, height = 1040, bg = '#FFFFFF', rootExtra = '' } = {}) {
|
||||
return `<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
${style}
|
||||
</helmet>
|
||||
|
||||
<div class="d-root" style="width: ${width}px; min-height: ${height}px; background: ${bg}; color: #14161A;${rootExtra}">
|
||||
${inner}</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
}
|
||||
|
||||
// ── 기본 시안의 프로필 층을 여기서 적는다 ────────────────────
|
||||
// 배경을 넣은 상태를 «따로» 둔 아트보드로 관리하면 기본 시안과 어긋난다.
|
||||
// (실제로 그 아트보드의 본문이 축약된 채로 남아 주무기·랭크전 시즌이 사라져 보였다.)
|
||||
// 그래서 기본 시안 자체가 「카드 닫힘」 상태가 되도록 프로필 층을 여기서 만들어 넣고,
|
||||
// 나머지 상태 아트보드는 그 아래(REST)를 공유한다.
|
||||
const mainBand = band({
|
||||
art: ART_PHOTO,
|
||||
silhouette: crates('62%', 0.42),
|
||||
plate: 0.88,
|
||||
secondary: cardButton(false),
|
||||
});
|
||||
|
||||
const BAND_NOTE = ' <!-- 프로필 층 — 배경을 넣은 사람은 여기에 사진이 깔린다. 받침이 글자를 지킨다 -->';
|
||||
|
||||
function applyBand(name) {
|
||||
const src = readFileSync(join(TPL, name), 'utf8');
|
||||
const from = src.search(/ {2}<!-- 프로필 (헤더|층)/);
|
||||
const close = src.indexOf(' </section>', from);
|
||||
if (from < 0 || close < 0) throw new Error(name + ': 프로필 층을 찾지 못했습니다');
|
||||
const out = src.slice(0, from) + BAND_NOTE + NL + mainBand.trimEnd() + src.slice(close + ' </section>'.length);
|
||||
writeFileSync(join(TPL, name), out, 'utf8');
|
||||
console.log(name + ' — 프로필 층 적용');
|
||||
}
|
||||
|
||||
// 같은 사람의 «다 불러온» 화면 둘. 로딩·첫 조회·오류 상태는 배경 없이 둔다 —
|
||||
// 그 아트보드는 상태를 읽으려고 있는 것이라 사진이 얹히면 읽을 것이 흐려진다.
|
||||
applyBand('Main.dc.html');
|
||||
applyBand('Maps.dc.html');
|
||||
|
||||
// ── 프로필 카드 · 펼친 상태 ──────────────────────────────────
|
||||
// 「프로필 카드 보기」를 누르면 배너가 원본 비율(1440 폭에 16:9 = 810px)로 열리고,
|
||||
// 아래쪽 받침 위에 이 사람의 프로필이 한 장으로 모인다 — 기본 · 티어 · 간단 스탯.
|
||||
// 높이가 생겨야 할 수 있는 일이라, 접힌 132px 에서는 성립하지 않는다.
|
||||
|
||||
// 승 파랑 #2A5FCC · 패 빨강 #C4453D 는 어두운 받침 위에서 너무 가라앉는다.
|
||||
// 같은 색상각을 유지한 채 밝기만 올린 짝을 쓴다 (기본 요소에 올려야 할 값).
|
||||
const WIN_ON_DARK = '#7BA4FF';
|
||||
const LOSE_ON_DARK = '#F0857C';
|
||||
|
||||
// 주무기 — 라플 · 스나 · 특수의 «계열별 킬뎃». 셋의 합이 100% 가 아니라 각각이 최대 100% 다.
|
||||
// 흰 바탕의 .stat-row / .bar 는 먹이 #14161A 라 어두운 받침 위에서는 안 보인다 — 같은 규격을 흰색으로 다시 쓴다.
|
||||
const weaponRow = (name, pct) =>
|
||||
`<div style="display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px;">
|
||||
<span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">${name}</span>
|
||||
<span style="height: 6px; border-radius: 999px; background: rgba(255,255,255,0.20);"><span style="display: block; width: ${pct}%; height: 100%; border-radius: 999px; background: #FFFFFF;"></span></span>
|
||||
<span style="font-size: 0.875rem; font-weight: 700; text-align: right; color: #FFFFFF;">${pct}%</span>
|
||||
</div>`;
|
||||
|
||||
const cardTile = (label, value) =>
|
||||
`<div style="padding: 0.625rem 0.875rem 0.6875rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; background: rgba(255,255,255,0.12);">
|
||||
<div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">${label}</div>
|
||||
<div style="margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; color: #FFFFFF;">${value}</div>
|
||||
</div>`;
|
||||
|
||||
// 카드 아래쪽 둘째 줄 — 최근 동향을 가로로 눕힌 것. 왼쪽 레일의 값과 같은 값이다.
|
||||
const cardStats = ` <div style="height: 1px; margin: 0 40px; background: rgba(255,255,255,0.20);"></div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 2.5rem; padding: 22px 40px 34px;">
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; font-weight: 500; color: rgba(255,255,255,0.68);">최근 동향</div>
|
||||
<div style="display: flex; align-items: baseline; gap: 0.625rem; margin-top: 0.375rem;">
|
||||
<span style="font-size: 2.125rem; font-weight: 700; letter-spacing: -0.045em; color: #FFFFFF;">60<span style="font-size: 1.125rem;">%</span></span>
|
||||
<span style="font-size: 0.875rem; color: rgba(255,255,255,0.78);">승률 · <span style="font-weight: 700; color: ${WIN_ON_DARK};">12승</span> <span style="font-weight: 700; color: ${LOSE_ON_DARK};">8패</span></span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 2px; width: 232px; height: 10px; margin-top: 0.625rem;">
|
||||
<span style="flex-grow: 12; border-radius: 999px; background: ${WIN_ON_DARK};"></span>
|
||||
<span style="flex-grow: 8; border-radius: 999px; background: ${LOSE_ON_DARK};"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; flex-grow: 1;">
|
||||
${cardTile('킬뎃', '59%')}
|
||||
${cardTile('헤드샷', '36%')}
|
||||
${cardTile('경기당 딜량', '4,270')}
|
||||
</div>
|
||||
|
||||
<div style="width: 320px; flex-shrink: 0;">
|
||||
<div style="display: flex; align-items: baseline;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,255,0.78);">주무기</span><div style="flex-grow: 1;"></div><span style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">킬뎃</span>
|
||||
</div>
|
||||
<div style="margin-top: 0.375rem;">
|
||||
${weaponRow('라플', 61)}
|
||||
${weaponRow('스나', 57)}
|
||||
${weaponRow('특수', 48)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const profileCard = ` <section style="position: relative; isolation: isolate; overflow: hidden; height: 810px;">
|
||||
<span style="position: absolute; inset: 0; ${ART_PHOTO}" aria-hidden="true"></span>
|
||||
${crates('34%', 0.5)}
|
||||
${PLATE(0.9, '348px')}
|
||||
<!-- 배경에 대한 동작이라 배경 위에 둔다. 프로필 줄의 컨트롤과 섞이지 않는다 -->
|
||||
<div style="position: absolute; top: 24px; right: 40px; z-index: 2;">${pickButton(true)}</div>
|
||||
<div style="position: absolute; inset: auto 0 0 0;">
|
||||
${profile({ onDark: true, pad: 34, secondary: cardButton(true), owner: 'mine' }).replace(/^/gm, ' ').replace('padding: 34px 40px;', 'padding: 34px 40px 22px;')}
|
||||
${cardStats} </div>
|
||||
</section>
|
||||
`;
|
||||
writeFileSync(
|
||||
join(TPL, 'BannerOpen.dc.html'),
|
||||
page(gnb(false) + profileCard + REST, { height: 2840 }),
|
||||
'utf8',
|
||||
);
|
||||
|
||||
// ── 남의 전적에서 연 카드 · 신고 ─────────────────────────────
|
||||
// 배경은 누구나 볼 수 있다 — 남이 꾸민 걸 보라고 만든 기능이라 카드는 누구의 전적에서나 열린다.
|
||||
// 그래서 신고가 필요하다. 사진 오른쪽 위 한 자리를 주인과 남이 나눠 쓴다:
|
||||
// 내 화면이면 「배경 고르기」, 남의 화면이면 「신고」. 한 상태에 보조는 하나라는 규칙 그대로다.
|
||||
const FLAG_ICON = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 21V4"></path><path d="M6 4.5h10l-2 3.5 2 3.5H6"></path></svg>`;
|
||||
|
||||
const reportButton = () => ghostButton('신고', FLAG_ICON, true);
|
||||
|
||||
const guestCard = (corner) => ` <section style="position: relative; isolation: isolate; overflow: hidden; height: 810px;">
|
||||
<span style="position: absolute; inset: 0; ${ART_PHOTO}" aria-hidden="true"></span>
|
||||
${crates('34%', 0.5)}
|
||||
${PLATE(0.9, '348px')}
|
||||
<div style="position: absolute; top: 24px; right: 40px; z-index: 2;">${corner}</div>
|
||||
<div style="position: absolute; inset: auto 0 0 0;">
|
||||
${profile({ onDark: true, pad: 34, secondary: cardButton(true), owner: 'linked' }).replace(/^/gm, ' ').replace('padding: 34px 40px;', 'padding: 34px 40px 22px;')}
|
||||
${cardStats} </div>
|
||||
</section>
|
||||
`;
|
||||
|
||||
writeFileSync(
|
||||
join(TPL, 'CardGuest.dc.html'),
|
||||
page(gnb(false) + guestCard(reportButton()) + REST, { height: 2840 }),
|
||||
'utf8',
|
||||
);
|
||||
|
||||
// ── 신고 모달 ────────────────────────────────────────────────
|
||||
// 신고는 카드 «안»에서만 닿는다. 배경이 문제인지 판단하려면 배경을 봐야 하고,
|
||||
// 배경을 보는 곳이 카드이기 때문이다. 닫힌 띠에는 신고를 두지 않는다.
|
||||
const REASONS = [
|
||||
['부적절한 배경 이미지', true],
|
||||
['욕설이나 혐오 표현이 담긴 닉네임 · 클랜명', false],
|
||||
['다른 사람을 사칭한 프로필', false],
|
||||
['광고나 홍보', false],
|
||||
['그 밖의 문제', false],
|
||||
];
|
||||
|
||||
const reasonRow = (label, on) => ` <label style="display: flex; align-items: center; gap: 0.75rem; height: 52px; border-bottom: 1px solid #F3F5F7; cursor: pointer;">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; border: ${on ? '6px solid #14161A' : '1.5px solid #C9CDD3'}; background: #FFFFFF; flex-shrink: 0;"></span>
|
||||
<span style="font-size: 0.9375rem; font-weight: ${on ? 600 : 500};">${label}</span>
|
||||
</label>`;
|
||||
|
||||
// 주 동작이지만 브랜드 오렌지를 쓰지 않는다. 이 화면의 오렌지는 「전적 갱신」의 자리다.
|
||||
const reportDialog = ` <div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 520px; border-radius: 16px; background: #FFFFFF; box-shadow: 0 24px 60px rgba(6,8,11,0.32); overflow: hidden;">
|
||||
<div style="padding: 26px 28px 20px;">
|
||||
<h2 style="margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.035em;">이 프로필을 신고할게요</h2>
|
||||
<p style="margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.55; color: #5B6169;">어떤 점이 문제인지 알려 주시면 확인한 뒤 조치할게요.<br>신고한 분이 누구인지는 상대에게 알려지지 않아요.</p>
|
||||
</div>
|
||||
|
||||
<div style="padding: 0 28px;">
|
||||
${REASONS.map(([l, on]) => reasonRow(l, on)).join('\n')}
|
||||
</div>
|
||||
|
||||
<div style="padding: 18px 28px 0;">
|
||||
<div style="padding: 0.875rem 1rem; border: 1px solid #EDEFF2; border-radius: 12px; background: #FAFBFC; font-size: 0.875rem; color: #9BA1A9;">자세한 내용을 적어 주세요 (선택)</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; padding: 20px 28px 24px;">
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">처리 결과는 따로 알려드리지 않아요</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<button style="height: 42px; padding: 0 1.125rem; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">그만두기</button>
|
||||
<button style="height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #14161A; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.015em; cursor: pointer;">신고 보내기</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const reportScreen = ` <div style="position: relative;">
|
||||
${gnb(false)}${guestCard(reportButton())} </div>
|
||||
<span style="position: absolute; inset: 0; background: rgba(6,8,11,0.55); z-index: 3;" aria-hidden="true"></span>
|
||||
<div style="position: absolute; inset: 0; z-index: 4;">
|
||||
${reportDialog} </div>
|
||||
`;
|
||||
writeFileSync(
|
||||
join(TPL, 'Report.dc.html'),
|
||||
page(reportScreen, { height: 900, rootExtra: ' position: relative; overflow: hidden;' }),
|
||||
'utf8',
|
||||
);
|
||||
|
||||
console.log('wrote BannerOpen, CardGuest, Report');
|
||||
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
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,424 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 서린즈 전적 — 데스크톱 1440 · 프로필 헤더 + 좌 요약 레일 / 우 경기 목록 */
|
||||
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-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
/* 갈래 선택 — 하위 탭(알약)과 구분되도록 밑줄형 세그먼트 (홈과 같은 규칙) */
|
||||
/* 화면 갈래 — 페이지 전체를 가르는 탭이라 폭을 채우지 않고 왼쪽에 붙인다 */
|
||||
.ptab { display: flex; gap: 1.5rem; height: 48px; padding: 0 40px; border-bottom: 1px solid #E4E8ED; }
|
||||
.ptab > span { display: flex; align-items: center; font-size: 0.9375rem; font-weight: 500; color: #9BA1A9; box-shadow: inset 0 -2px 0 transparent; }
|
||||
.ptab > .on { font-weight: 700; color: #14161A; box-shadow: inset 0 -2px 0 #14161A; }
|
||||
.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; }
|
||||
|
||||
/* 경기 한 줄 — 머리와 본문이 같은 격자를 쓴다 */
|
||||
.mg { display: grid; grid-template-columns: 44px 128px minmax(0, 1fr) 160px 76px 84px 84px 116px 18px; align-items: center; gap: 0.75rem; }
|
||||
.mh { height: 32px; border-bottom: 1px solid #E4E8ED; }
|
||||
.mr { height: 46px; border-bottom: 1px solid #F3F5F7; }
|
||||
.win { font-size: 0.9375rem; font-weight: 700; color: #2A5FCC; }
|
||||
.lose { font-size: 0.9375rem; font-weight: 700; color: #C4453D; }
|
||||
.m-mode { font-size: 0.875rem; font-weight: 600; }
|
||||
.m-map { font-size: 0.875rem; color: #5B6169; }
|
||||
.m-num { font-size: 0.875rem; font-weight: 600; text-align: right; }
|
||||
/* 데스는 색을 달리해 킬·어시와 눈으로 갈린다 */
|
||||
.m-death { color: #C4453D; }
|
||||
.m-dot { color: #C9CDD3; font-weight: 500; }
|
||||
.m-sub { font-size: 0.8125rem; color: #5B6169; }
|
||||
.m-dim { font-size: 0.8125rem; color: #9BA1A9; text-align: right; }
|
||||
.m-r { text-align: right; }
|
||||
|
||||
/* 요약 레일 */
|
||||
.tile { padding: 0.625rem 0.75rem 0.6875rem; border: 1px solid #EDEFF2; border-radius: 12px; background: #FAFBFC; }
|
||||
.tile-l { font-size: 0.75rem; color: #9BA1A9; }
|
||||
.tile-v { margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; }
|
||||
.d-more { font-size: 0.8125rem; font-weight: 600; color: #5B6169; }
|
||||
.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; }
|
||||
.season-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
|
||||
.tier-sm { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 8px; background: #EDEFF2; flex-shrink: 0; }
|
||||
/* 최근 폼 — 승/패 20칸. 왼쪽이 최근이라 아래 경기 목록과 같은 방향을 가리킨다 */
|
||||
.form-c { width: 14px; height: 14px; border-radius: 5px; flex-shrink: 0; }
|
||||
.stat-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px; }
|
||||
/* 크기 막대 — 갈래가 하나뿐이라 색을 나누지 않고 길이로만 읽힌다 */
|
||||
.bar { height: 6px; border-radius: 999px; background: #EDEFF2; }
|
||||
.bar > span { display: block; height: 100%; border-radius: 999px; background: #14161A; }
|
||||
.tier { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #EDEFF2; flex-shrink: 0; }
|
||||
.map-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) 64px 72px 72px 72px 80px; align-items: center; gap: 0.75rem; height: 56px; border-bottom: 1px solid #F3F5F7; }
|
||||
.map-thumb { width: 80px; height: 45px; border-radius: 12px; }
|
||||
.sb-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 64px; align-items: center; gap: 0.625rem; height: 34px; }
|
||||
.clan-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px 48px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
|
||||
.who-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px 48px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="d-root" style="width: 1440px; min-height: 2840px; background: #FFFFFF; color: #14161A;">
|
||||
<header style="border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 1.75rem; height: 72px; padding: 0 40px;">
|
||||
<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; color: #14161A;"><span style="font-weight: 500; color: #5B6169;">홈</span><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>
|
||||
<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>
|
||||
</div>
|
||||
</header>
|
||||
<section style="position: relative; isolation: isolate; overflow: hidden; height: 810px;">
|
||||
<span style="position: absolute; inset: 0; background:
|
||||
radial-gradient(55% 85% at 20% 26%, rgba(255,244,214,0.96) 0%, rgba(255,206,120,0.55) 38%, rgba(255,170,60,0) 72%),
|
||||
radial-gradient(70% 110% at 78% 82%, rgba(126,196,255,0.45) 0%, rgba(126,196,255,0) 62%),
|
||||
linear-gradient(158deg, #8A6A3C 0%, #3A4B58 54%, #0F171E 100%);" aria-hidden="true"></span>
|
||||
<svg viewBox="0 0 1440 200" preserveAspectRatio="none" style="position: absolute; inset: auto 0 0 0; width: 100%; height: 34%; opacity: 0.5;" aria-hidden="true"><path d="M0 200V128h96v-28h84v28h58V84h132v116z" fill="#0B1116"></path><path d="M470 200v-52h74v-30h96v30h52v52z" fill="#0E151B"></path><path d="M792 200v-84h120v-22h74v22h66v84z" fill="#0B1116"></path><path d="M1128 200v-44h92v-34h120v78z" fill="#0E151B"></path></svg>
|
||||
<span style="position: absolute; inset: auto 0 0 0; height: 348px; background: linear-gradient(to top, rgba(6,8,11,0.9) 0%, rgba(6,8,11,0.77) 46%, rgba(6,8,11,0.31) 100%);" aria-hidden="true"></span>
|
||||
<!-- 배경에 대한 동작이라 배경 위에 둔다. 프로필 줄의 컨트롤과 섞이지 않는다 -->
|
||||
<div style="position: absolute; top: 24px; right: 40px; z-index: 2;"><button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.125rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.34); background: rgba(255,255,255,0.10); color: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="14" rx="2.5"></rect><path d="M3.5 15.5l4.5-4 4 3.5 3.5-3 5 4.5"></path><circle cx="9" cy="9.5" r="1.4"></circle></svg>배경 고르기</button></div>
|
||||
<div style="position: absolute; inset: auto 0 0 0;">
|
||||
<div style="display: flex; align-items: center; gap: 1.25rem; padding: 34px 40px 22px;">
|
||||
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
|
||||
<div style="min-width: 0;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.625rem;">
|
||||
<h1 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em; color: #FFFFFF;">달빛조각사</h1>
|
||||
<span style="font-size: 0.9375rem; font-weight: 600; color: rgba(255,255,255,0.78);">중령 2호</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4375rem;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">무명연대</span>
|
||||
<span style="width: 1px; height: 12px; background: rgba(255,255,255,0.30);"></span>
|
||||
<span style="font-size: 0.875rem; color: rgba(255,255,255,0.68);">마지막 플레이 2시간 전</span>
|
||||
<span style="width: 1px; height: 12px; background: rgba(255,255,255,0.30);"></span><span style="display: inline-flex; align-items: center; gap: 0.3125rem; height: 24px; padding: 0 0.625rem; border-radius: 999px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.24); font-size: 0.75rem; font-weight: 600; color: #FFFFFF; white-space: nowrap;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M8 12.4l2.6 2.6L16 9.6"></path></svg>내 계정</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1;"></div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 2rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" 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>
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">랭크전 솔로 · 2026 시즌3</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">다이아 3</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.8125rem; color: rgba(255,255,255,0.78);">1,842 RP</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" 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>
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">랭크전 파티 · 2026 시즌3</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">플래티넘 1</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.8125rem; color: rgba(255,255,255,0.78);">1,455 RP</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span style="width: 1px; height: 48px; background: rgba(255,255,255,0.30); margin: 0 0.5rem;"></span>
|
||||
|
||||
<!-- 오른쪽 컨트롤 — 보조 하나 · 캡션 · 주 동작이 모두 42px 한 줄에 선다.
|
||||
캡션을 갱신 버튼 아래에 매달면 그 덩어리만 66px 이 되어 옆 버튼과 어긋난다. -->
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.125rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.34); background: rgba(255,255,255,0.10); color: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 14l4-4 4 4"></path></svg>카드 그만 보기</button>
|
||||
<span style="font-size: 0.8125rem; color: rgba(255,255,255,0.68); white-space: nowrap;">12분 전에 불러왔어요</span>
|
||||
<button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #FF6A00; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 11-2.3-5.6"></path><polyline points="20,4 20,8 16,8"></polyline></svg>전적 갱신</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 1px; margin: 0 40px; background: rgba(255,255,255,0.20);"></div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 2.5rem; padding: 22px 40px 34px;">
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; font-weight: 500; color: rgba(255,255,255,0.68);">최근 동향</div>
|
||||
<div style="display: flex; align-items: baseline; gap: 0.625rem; margin-top: 0.375rem;">
|
||||
<span style="font-size: 2.125rem; font-weight: 700; letter-spacing: -0.045em; color: #FFFFFF;">60<span style="font-size: 1.125rem;">%</span></span>
|
||||
<span style="font-size: 0.875rem; color: rgba(255,255,255,0.78);">승률 · <span style="font-weight: 700; color: #7BA4FF;">12승</span> <span style="font-weight: 700; color: #F0857C;">8패</span></span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 2px; width: 232px; height: 10px; margin-top: 0.625rem;">
|
||||
<span style="flex-grow: 12; border-radius: 999px; background: #7BA4FF;"></span>
|
||||
<span style="flex-grow: 8; border-radius: 999px; background: #F0857C;"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; flex-grow: 1;">
|
||||
<div style="padding: 0.625rem 0.875rem 0.6875rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; background: rgba(255,255,255,0.12);">
|
||||
<div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">킬뎃</div>
|
||||
<div style="margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; color: #FFFFFF;">59%</div>
|
||||
</div>
|
||||
<div style="padding: 0.625rem 0.875rem 0.6875rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; background: rgba(255,255,255,0.12);">
|
||||
<div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">헤드샷</div>
|
||||
<div style="margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; color: #FFFFFF;">36%</div>
|
||||
</div>
|
||||
<div style="padding: 0.625rem 0.875rem 0.6875rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; background: rgba(255,255,255,0.12);">
|
||||
<div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">경기당 딜량</div>
|
||||
<div style="margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; color: #FFFFFF;">4,270</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 320px; flex-shrink: 0;">
|
||||
<div style="display: flex; align-items: baseline;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,255,0.78);">주무기</span><div style="flex-grow: 1;"></div><span style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">킬뎃</span>
|
||||
</div>
|
||||
<div style="margin-top: 0.375rem;">
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px;">
|
||||
<span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">라플</span>
|
||||
<span style="height: 6px; border-radius: 999px; background: rgba(255,255,255,0.20);"><span style="display: block; width: 61%; height: 100%; border-radius: 999px; background: #FFFFFF;"></span></span>
|
||||
<span style="font-size: 0.875rem; font-weight: 700; text-align: right; color: #FFFFFF;">61%</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px;">
|
||||
<span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">스나</span>
|
||||
<span style="height: 6px; border-radius: 999px; background: rgba(255,255,255,0.20);"><span style="display: block; width: 57%; height: 100%; border-radius: 999px; background: #FFFFFF;"></span></span>
|
||||
<span style="font-size: 0.875rem; font-weight: 700; text-align: right; color: #FFFFFF;">57%</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px;">
|
||||
<span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">특수</span>
|
||||
<span style="height: 6px; border-radius: 999px; background: rgba(255,255,255,0.20);"><span style="display: block; width: 48%; height: 100%; border-radius: 999px; background: #FFFFFF;"></span></span>
|
||||
<span style="font-size: 0.875rem; font-weight: 700; text-align: right; color: #FFFFFF;">48%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="ptab"><span class="on">종합</span><span>맵</span></div>
|
||||
|
||||
<!-- 본문 — 왼쪽 요약 레일 300 / 오른쪽 경기 목록 -->
|
||||
<div style="display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 2rem; padding: 36px 40px 56px;">
|
||||
|
||||
<!-- 왼쪽 요약 레일 -->
|
||||
<div style="display: flex; flex-direction: column; gap: 2rem;">
|
||||
|
||||
<!-- 최근 동향 — 넥슨 프로필이 주는 값 그대로. 경기 목록에서 다시 계산하지 않는다 -->
|
||||
<section>
|
||||
<div style="display: flex; align-items: baseline;">
|
||||
<h2 class="d-h2">최근 동향</h2>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.625rem; margin-top: 0.875rem;">
|
||||
<span style="font-size: 2.125rem; font-weight: 700; letter-spacing: -0.045em;">60<span style="font-size: 1.125rem;">%</span></span>
|
||||
<span style="font-size: 0.875rem; color: #5B6169;">승률 · <span style="font-weight: 700; color: #2A5FCC;">12승</span> <span style="font-weight: 700; color: #C4453D;">8패</span></span>
|
||||
</div>
|
||||
<!-- 승/패 비율 — 두 조각 사이를 2px 띄워 경계가 색 대비에만 기대지 않게 한다 -->
|
||||
<div style="display: flex; gap: 2px; height: 10px; margin-top: 0.75rem;">
|
||||
<span style="flex-grow: 12; border-radius: 999px; background: #2A5FCC;"></span>
|
||||
<span style="flex-grow: 8; border-radius: 999px; background: #C4453D;"></span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1rem;">
|
||||
<div class="tile"><div class="tile-l">킬뎃</div><div class="tile-v">59%</div></div>
|
||||
<div class="tile"><div class="tile-l">헤드샷</div><div class="tile-v">36%</div></div>
|
||||
<div class="tile"><div class="tile-l">경기당 딜량</div><div class="tile-v">4,270</div></div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 1.25rem;">
|
||||
<div style="display: flex; align-items: baseline;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: #5B6169;">주무기</span><div style="flex-grow: 1;"></div><span style="font-size: 0.75rem; color: #9BA1A9;">킬뎃</span>
|
||||
</div>
|
||||
<div style="margin-top: 0.5rem;">
|
||||
<div class="stat-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">라플</span><span class="bar"><span style="width: 61%;"></span></span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">61%</span></div>
|
||||
<div class="stat-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">스나</span><span class="bar"><span style="width: 57%;"></span></span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">57%</span></div>
|
||||
<div class="stat-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">특수</span><span class="bar"><span style="width: 48%;"></span></span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">48%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 랭크전 시즌 — 한 시즌이 석 달이라 목록이 길어지지 않는다. 접지 않고 전부 편다 -->
|
||||
<section>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="d-h2">랭크전 시즌</h2><div style="flex-grow: 1;"></div>
|
||||
<span style="display: flex; gap: 0.25rem;"><span class="d-tab d-tab-on">솔로</span><span class="d-tab">파티</span></span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 72px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">시즌</span><span class="d-th">티어</span><span class="d-th m-r">RP</span>
|
||||
</div>
|
||||
<div class="season-row"><span style="font-size: 0.8125rem; font-weight: 700; color: #14161A;">2026 시즌3</span><span style="display: flex; align-items: center; gap: 0.5rem; min-width: 0;"><span class="tier-sm"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path></svg></span><span class="d-clip" style="font-size: 0.875rem; font-weight: 700; color: #14161A;">다이아 3</span></span><span style="text-align: right; font-size: 0.875rem; font-weight: 700; color: #14161A;">1,842</span></div>
|
||||
<div class="season-row"><span style="font-size: 0.8125rem; font-weight: 500; color: #9BA1A9;">2026 시즌2</span><span style="display: flex; align-items: center; gap: 0.5rem; min-width: 0;"><span class="tier-sm"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path></svg></span><span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #5B6169;">플래티넘 2</span></span><span style="text-align: right; font-size: 0.875rem; font-weight: 600; color: #5B6169;">1,610</span></div>
|
||||
<div class="season-row"><span style="font-size: 0.8125rem; font-weight: 500; color: #9BA1A9;">2026 시즌1</span><span style="display: flex; align-items: center; gap: 0.5rem; min-width: 0;"><span class="tier-sm"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path></svg></span><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #9BA1A9;">미배치</span></span><span style="display: flex; justify-content: flex-end;"><span style="width: 10px; height: 1px; background: #C9CDD3;"></span></span></div>
|
||||
<div class="season-row"><span style="font-size: 0.8125rem; font-weight: 500; color: #9BA1A9;">2025 시즌4</span><span style="display: flex; align-items: center; gap: 0.5rem; min-width: 0;"><span class="tier-sm"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path></svg></span><span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #5B6169;">골드 1</span></span><span style="text-align: right; font-size: 0.875rem; font-weight: 600; color: #5B6169;">1,280</span></div>
|
||||
<div class="season-row" style="border-bottom: none;"><span style="font-size: 0.8125rem; font-weight: 500; color: #9BA1A9;">2025 시즌3</span><span style="display: flex; align-items: center; gap: 0.5rem; min-width: 0;"><span class="tier-sm"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path></svg></span><span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #5B6169;">실버 1</span></span><span style="text-align: right; font-size: 0.875rem; font-weight: 600; color: #5B6169;">740</span></div>
|
||||
|
||||
<div style="margin-top: 0.75rem; font-size: 0.8125rem; font-weight: 600; color: #5B6169;">2026 시즌3 · 솔로 기준</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.5rem;">
|
||||
<div class="tile"><div class="tile-l">승률</div><div class="tile-v">62%</div></div>
|
||||
<div class="tile"><div class="tile-l">킬뎃</div><div class="tile-v">61%</div></div>
|
||||
<div class="tile"><div class="tile-l">헤드샷</div><div class="tile-v">38%</div></div>
|
||||
<div class="tile"><div class="tile-l">경기당 딜량</div><div class="tile-v">4,510</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 클랜별 전적 — 몸담았던 클랜별로 전체 전적을 가른다. 소속 기간은 알 수 없어 적지 않는다 -->
|
||||
<section>
|
||||
<div style="display: flex; align-items: baseline;">
|
||||
<h2 class="d-h2">클랜별 전적</h2><div style="flex-grow: 1;"></div><span style="font-size: 0.8125rem; color: #9BA1A9;">전체 경기</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 44px 48px; align-items: center; gap: 0.625rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">클랜</span><span class="d-th m-r">판수</span><span class="d-th m-r">승률</span>
|
||||
</div>
|
||||
<div class="clan-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">무명연대</span><span class="m-sub m-r">214판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">70%</span></div>
|
||||
<div class="clan-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">밤새기동대</span><span class="m-sub m-r">151판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">45%</span></div>
|
||||
<div class="clan-row" style="border-bottom: none;"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">무소속</span><span class="m-sub m-r">55판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">33%</span></div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: baseline;">
|
||||
<h2 class="d-h2">같이 한 유저</h2><div style="flex-grow: 1;"></div><span style="font-size: 0.8125rem; color: #9BA1A9;">최근 100경기</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 40px 48px; align-items: center; gap: 0.625rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">유저</span><span class="d-th m-r">판수</span><span class="d-th m-r">내 승률</span>
|
||||
</div>
|
||||
<div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">칼든햄스터</span><span class="m-sub m-r">38판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">58%</span></div>
|
||||
<div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">새벽두시</span><span class="m-sub m-r">29판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">62%</span></div>
|
||||
<div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">무명연대장</span><span class="m-sub m-r">24판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">50%</span></div>
|
||||
<div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">한밤의저격수</span><span class="m-sub m-r">19판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">74%</span></div>
|
||||
<div class="who-row" style="border-bottom: none;"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">조용한총잡이</span><span class="m-sub m-r">15판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">47%</span></div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: baseline;">
|
||||
<h2 class="d-h2">자주 만난 상대</h2><div style="flex-grow: 1;"></div><span style="font-size: 0.8125rem; color: #9BA1A9;">최근 100경기</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 40px 48px; align-items: center; gap: 0.625rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">유저</span><span class="d-th m-r">판수</span><span class="d-th m-r">내 승률</span>
|
||||
</div>
|
||||
<div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">헤드샷장인</span><span class="m-sub m-r">22판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">41%</span></div>
|
||||
<div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">야간부대장</span><span class="m-sub m-r">18판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">56%</span></div>
|
||||
<div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">삼보급단골</span><span class="m-sub m-r">16판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">44%</span></div>
|
||||
<div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">웨어하우스지박령</span><span class="m-sub m-r">13판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">31%</span></div>
|
||||
<div class="who-row" style="border-bottom: none;"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">칼든햄스터</span><span class="m-sub m-r">11판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">55%</span></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- 오른쪽 — 최근 폼 + 경기 목록 -->
|
||||
<div style="display: flex; flex-direction: column; gap: 2rem;">
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: baseline; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">최근 폼</h2>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">최근 20판 · 최근 10판과 그 이전 10판 비교</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: flex-start; gap: 2.5rem;">
|
||||
<div>
|
||||
<div style="display: flex; align-items: center; gap: 4px;"><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #2A5FCC;"></span><span style="width: 12px;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span></div>
|
||||
<div style="display: flex; align-items: center; margin-top: 0.5rem;">
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">← 최근</span><div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.8125rem;"><span style="font-weight: 700; color: #2A5FCC;">12승</span> <span style="font-weight: 700; color: #C4453D;">8패</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 2.5rem;">
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: #9BA1A9;">승률</div>
|
||||
<div style="display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.25rem;"><span style="font-size: 1.0625rem; font-weight: 700;">70%</span><span style="display: inline-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.8125rem; font-weight: 600; color: #12805C;">20</span></span></div>
|
||||
<div style="font-size: 0.8125rem; color: #9BA1A9; margin-top: 0.25rem;">이전 10판 50%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: #9BA1A9;">킬뎃</div>
|
||||
<div style="display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.25rem;"><span style="font-size: 1.0625rem; font-weight: 700;">60%</span><span style="display: inline-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.8125rem; font-weight: 600; color: #12805C;">3</span></span></div>
|
||||
<div style="font-size: 0.8125rem; color: #9BA1A9; margin-top: 0.25rem;">이전 10판 57%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: #9BA1A9;">헤드샷</div>
|
||||
<div style="display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.25rem;"><span style="font-size: 1.0625rem; font-weight: 700;">36%</span><span style="display: inline-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.8125rem; font-weight: 600; color: #12805C;">1</span></span></div>
|
||||
<div style="font-size: 0.8125rem; color: #9BA1A9; margin-top: 0.25rem;">이전 10판 35%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: baseline; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">경기 기록</h2>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">9월 5일 18:08 기준</span>
|
||||
</div>
|
||||
|
||||
<div class="seg">
|
||||
<span class="on">전체</span><span>랭크전</span><span>클랜전</span><span>토너먼트</span><span>일반전</span>
|
||||
</div>
|
||||
|
||||
<div class="mg mh" style="margin-top: 0.25rem;">
|
||||
<span class="d-th">결과</span><span class="d-th">모드</span><span class="d-th">맵</span>
|
||||
<span class="d-th m-r">킬 · 데스 · 어시</span><span class="d-th m-r">킬뎃</span><span class="d-th m-r">헤드샷</span><span class="d-th m-r">딜량</span>
|
||||
<span class="d-th m-r">시각</span><span></span>
|
||||
</div>
|
||||
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">일반전</span><span class="d-clip m-map">제3보급창고</span><span class="m-num">21<span class="m-dot"> · </span><span class="m-death">9</span><span class="m-dot"> · </span>4</span><span class="m-sub m-r">70%</span><span class="m-sub m-r">41%</span><span class="m-sub m-r">4,820</span><span class="m-dim">14분 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 14l4-4 4 4"></path></svg></span></div>
|
||||
|
||||
<!-- 한 판 펼침 — 화살표를 누르면 그 줄 아래에 팀 스코어보드가 열린다 -->
|
||||
<div style="padding: 1.25rem; border: 1px solid #EDEFF2; border-radius: 16px; background: #FAFBFC;">
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem;">
|
||||
<div>
|
||||
<div style="display: flex; align-items: baseline; gap: 0.375rem; height: 26px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700; color: #2A5FCC;">승</span>
|
||||
<span style="font-size: 0.875rem; font-weight: 600;">우리 팀</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 120px 64px; align-items: center; gap: 0.625rem; height: 28px; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">유저</span><span class="d-th m-r">킬 · 데스 · 어시</span><span class="d-th m-r">딜량</span>
|
||||
</div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 700; color: #14161A;">달빛조각사</span><span class="m-num">21<span class="m-dot"> · </span><span class="m-death">9</span><span class="m-dot"> · </span>4</span><span class="m-sub m-r">4,820</span></div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">칼든햄스터</span><span class="m-num">14<span class="m-dot"> · </span><span class="m-death">11</span><span class="m-dot"> · </span>6</span><span class="m-sub m-r">3,210</span></div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">새벽두시</span><span class="m-num">12<span class="m-dot"> · </span><span class="m-death">13</span><span class="m-dot"> · </span>3</span><span class="m-sub m-r">2,880</span></div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">무명연대장</span><span class="m-num">9<span class="m-dot"> · </span><span class="m-death">14</span><span class="m-dot"> · </span>8</span><span class="m-sub m-r">2,140</span></div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">한밤의저격수</span><span class="m-num">7<span class="m-dot"> · </span><span class="m-death">15</span><span class="m-dot"> · </span>2</span><span class="m-sub m-r">1,690</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display: flex; align-items: baseline; gap: 0.375rem; height: 26px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700; color: #C4453D;">패</span>
|
||||
<span style="font-size: 0.875rem; font-weight: 600;">상대 팀</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 120px 64px; align-items: center; gap: 0.625rem; height: 28px; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">유저</span><span class="d-th m-r">킬 · 데스 · 어시</span><span class="d-th m-r">딜량</span>
|
||||
</div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">헤드샷장인</span><span class="m-num">18<span class="m-dot"> · </span><span class="m-death">12</span><span class="m-dot"> · </span>4</span><span class="m-sub m-r">4,050</span></div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">야간부대장</span><span class="m-num">15<span class="m-dot"> · </span><span class="m-death">13</span><span class="m-dot"> · </span>5</span><span class="m-sub m-r">3,470</span></div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">삼보급단골</span><span class="m-num">11<span class="m-dot"> · </span><span class="m-death">12</span><span class="m-dot"> · </span>7</span><span class="m-sub m-r">2,610</span></div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">웨어하우스지박령</span><span class="m-num">10<span class="m-dot"> · </span><span class="m-death">13</span><span class="m-dot"> · </span>3</span><span class="m-sub m-r">2,350</span></div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">조용한총잡이</span><span class="m-num">8<span class="m-dot"> · </span><span class="m-death">13</span><span class="m-dot"> · </span>6</span><span class="m-sub m-r">1,920</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mg mr"><span class="lose">패</span><span class="m-mode">일반전</span><span class="d-clip m-map">웨어하우스</span><span class="m-num">12<span class="m-dot"> · </span><span class="m-death">16</span><span class="m-dot"> · </span>7</span><span class="m-sub m-r">43%</span><span class="m-sub m-r">27%</span><span class="m-sub m-r">2,740</span><span class="m-dim">32분 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">솔로 랭크전</span><span class="d-clip m-map">크로스카운터</span><span class="m-num">24<span class="m-dot"> · </span><span class="m-death">11</span><span class="m-dot"> · </span>3</span><span class="m-sub m-r">69%</span><span class="m-sub m-r">44%</span><span class="m-sub m-r">5,610</span><span class="m-dim">1시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">일반전</span><span class="d-clip m-map">데드엔드</span><span class="m-num">19<span class="m-dot"> · </span><span class="m-death">7</span><span class="m-dot"> · </span>6</span><span class="m-sub m-r">73%</span><span class="m-sub m-r">39%</span><span class="m-sub m-r">4,380</span><span class="m-dim">1시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="lose">패</span><span class="m-mode">일반전</span><span class="d-clip m-map">아지트</span><span class="m-num">25<span class="m-dot"> · </span><span class="m-death">28</span><span class="m-dot"> · </span>5</span><span class="m-sub m-r">47%</span><span class="m-sub m-r">31%</span><span class="m-sub m-r">5,940</span><span class="m-dim">2시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">솔로 랭크전</span><span class="d-clip m-map">제3보급창고</span><span class="m-num">17<span class="m-dot"> · </span><span class="m-death">13</span><span class="m-dot"> · </span>8</span><span class="m-sub m-r">57%</span><span class="m-sub m-r">35%</span><span class="m-sub m-r">3,920</span><span class="m-dim">2시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">클랜전</span><span class="d-clip m-map">웨어하우스</span><span class="m-num">22<span class="m-dot"> · </span><span class="m-death">6</span><span class="m-dot"> · </span>3</span><span class="m-sub m-r">79%</span><span class="m-sub m-r">47%</span><span class="m-sub m-r">5,180</span><span class="m-dim">3시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="lose">패</span><span class="m-mode">솔로 랭크전</span><span class="d-clip m-map">크로스카운터</span><span class="m-num">9<span class="m-dot"> · </span><span class="m-death">14</span><span class="m-dot"> · </span>4</span><span class="m-sub m-r">39%</span><span class="m-sub m-r">29%</span><span class="m-sub m-r">2,150</span><span class="m-dim">3시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">일반전</span><span class="d-clip m-map">데드엔드</span><span class="m-num">16<span class="m-dot"> · </span><span class="m-death">9</span><span class="m-dot"> · </span>11</span><span class="m-sub m-r">64%</span><span class="m-sub m-r">33%</span><span class="m-sub m-r">3,640</span><span class="m-dim">어제 21:40</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">일반전</span><span class="d-clip m-map">제3보급창고</span><span class="m-num">20<span class="m-dot"> · </span><span class="m-death">12</span><span class="m-dot"> · </span>5</span><span class="m-sub m-r">63%</span><span class="m-sub m-r">38%</span><span class="m-sub m-r">4,510</span><span class="m-dim">어제 21:02</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="lose">패</span><span class="m-mode">클랜전</span><span class="d-clip m-map">아지트</span><span class="m-num">11<span class="m-dot"> · </span><span class="m-death">13</span><span class="m-dot"> · </span>2</span><span class="m-sub m-r">46%</span><span class="m-sub m-r">30%</span><span class="m-sub m-r">2,480</span><span class="m-dim">어제 20:24</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">일반전</span><span class="d-clip m-map">웨어하우스</span><span class="m-num">31<span class="m-dot"> · </span><span class="m-death">22</span><span class="m-dot"> · </span>6</span><span class="m-sub m-r">58%</span><span class="m-sub m-r">36%</span><span class="m-sub m-r">7,260</span><span class="m-dim">어제 19:51</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">토너먼트</span><span class="d-clip m-map">크로스카운터</span><span class="m-num">18<span class="m-dot"> · </span><span class="m-death">8</span><span class="m-dot"> · </span>7</span><span class="m-sub m-r">69%</span><span class="m-sub m-r">42%</span><span class="m-sub m-r">4,120</span><span class="m-dim">9월 3일</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr" style="border-bottom: none;"><span class="lose">패</span><span class="m-mode">파티 랭크전</span><span class="d-clip m-map">데드엔드</span><span class="m-num">13<span class="m-dot"> · </span><span class="m-death">15</span><span class="m-dot"> · </span>5</span><span class="m-sub m-r">46%</span><span class="m-sub m-r">28%</span><span class="m-sub m-r">2,980</span><span class="m-dim">9월 3일</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
|
||||
<button style="display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; margin-top: 1.25rem; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; font-family: inherit; font-size: 0.875rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">이전 경기 더 보기</button>
|
||||
</section>
|
||||
</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>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,423 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 서린즈 전적 — 데스크톱 1440 · 프로필 헤더 + 좌 요약 레일 / 우 경기 목록 */
|
||||
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-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
/* 갈래 선택 — 하위 탭(알약)과 구분되도록 밑줄형 세그먼트 (홈과 같은 규칙) */
|
||||
/* 화면 갈래 — 페이지 전체를 가르는 탭이라 폭을 채우지 않고 왼쪽에 붙인다 */
|
||||
.ptab { display: flex; gap: 1.5rem; height: 48px; padding: 0 40px; border-bottom: 1px solid #E4E8ED; }
|
||||
.ptab > span { display: flex; align-items: center; font-size: 0.9375rem; font-weight: 500; color: #9BA1A9; box-shadow: inset 0 -2px 0 transparent; }
|
||||
.ptab > .on { font-weight: 700; color: #14161A; box-shadow: inset 0 -2px 0 #14161A; }
|
||||
.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; }
|
||||
|
||||
/* 경기 한 줄 — 머리와 본문이 같은 격자를 쓴다 */
|
||||
.mg { display: grid; grid-template-columns: 44px 128px minmax(0, 1fr) 160px 76px 84px 84px 116px 18px; align-items: center; gap: 0.75rem; }
|
||||
.mh { height: 32px; border-bottom: 1px solid #E4E8ED; }
|
||||
.mr { height: 46px; border-bottom: 1px solid #F3F5F7; }
|
||||
.win { font-size: 0.9375rem; font-weight: 700; color: #2A5FCC; }
|
||||
.lose { font-size: 0.9375rem; font-weight: 700; color: #C4453D; }
|
||||
.m-mode { font-size: 0.875rem; font-weight: 600; }
|
||||
.m-map { font-size: 0.875rem; color: #5B6169; }
|
||||
.m-num { font-size: 0.875rem; font-weight: 600; text-align: right; }
|
||||
/* 데스는 색을 달리해 킬·어시와 눈으로 갈린다 */
|
||||
.m-death { color: #C4453D; }
|
||||
.m-dot { color: #C9CDD3; font-weight: 500; }
|
||||
.m-sub { font-size: 0.8125rem; color: #5B6169; }
|
||||
.m-dim { font-size: 0.8125rem; color: #9BA1A9; text-align: right; }
|
||||
.m-r { text-align: right; }
|
||||
|
||||
/* 요약 레일 */
|
||||
.tile { padding: 0.625rem 0.75rem 0.6875rem; border: 1px solid #EDEFF2; border-radius: 12px; background: #FAFBFC; }
|
||||
.tile-l { font-size: 0.75rem; color: #9BA1A9; }
|
||||
.tile-v { margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; }
|
||||
.d-more { font-size: 0.8125rem; font-weight: 600; color: #5B6169; }
|
||||
.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; }
|
||||
.season-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
|
||||
.tier-sm { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 8px; background: #EDEFF2; flex-shrink: 0; }
|
||||
/* 최근 폼 — 승/패 20칸. 왼쪽이 최근이라 아래 경기 목록과 같은 방향을 가리킨다 */
|
||||
.form-c { width: 14px; height: 14px; border-radius: 5px; flex-shrink: 0; }
|
||||
.stat-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px; }
|
||||
/* 크기 막대 — 갈래가 하나뿐이라 색을 나누지 않고 길이로만 읽힌다 */
|
||||
.bar { height: 6px; border-radius: 999px; background: #EDEFF2; }
|
||||
.bar > span { display: block; height: 100%; border-radius: 999px; background: #14161A; }
|
||||
.tier { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #EDEFF2; flex-shrink: 0; }
|
||||
.map-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) 64px 72px 72px 72px 80px; align-items: center; gap: 0.75rem; height: 56px; border-bottom: 1px solid #F3F5F7; }
|
||||
.map-thumb { width: 80px; height: 45px; border-radius: 12px; }
|
||||
.sb-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 64px; align-items: center; gap: 0.625rem; height: 34px; }
|
||||
.clan-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px 48px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
|
||||
.who-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px 48px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="d-root" style="width: 1440px; min-height: 2840px; background: #FFFFFF; color: #14161A;">
|
||||
<header style="border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 1.75rem; height: 72px; padding: 0 40px;">
|
||||
<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; color: #14161A;"><span style="font-weight: 500; color: #5B6169;">홈</span><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>
|
||||
<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>
|
||||
</div>
|
||||
</header>
|
||||
<section style="position: relative; isolation: isolate; overflow: hidden; height: 810px;">
|
||||
<span style="position: absolute; inset: 0; background:
|
||||
radial-gradient(55% 85% at 20% 26%, rgba(255,244,214,0.96) 0%, rgba(255,206,120,0.55) 38%, rgba(255,170,60,0) 72%),
|
||||
radial-gradient(70% 110% at 78% 82%, rgba(126,196,255,0.45) 0%, rgba(126,196,255,0) 62%),
|
||||
linear-gradient(158deg, #8A6A3C 0%, #3A4B58 54%, #0F171E 100%);" aria-hidden="true"></span>
|
||||
<svg viewBox="0 0 1440 200" preserveAspectRatio="none" style="position: absolute; inset: auto 0 0 0; width: 100%; height: 34%; opacity: 0.5;" aria-hidden="true"><path d="M0 200V128h96v-28h84v28h58V84h132v116z" fill="#0B1116"></path><path d="M470 200v-52h74v-30h96v30h52v52z" fill="#0E151B"></path><path d="M792 200v-84h120v-22h74v22h66v84z" fill="#0B1116"></path><path d="M1128 200v-44h92v-34h120v78z" fill="#0E151B"></path></svg>
|
||||
<span style="position: absolute; inset: auto 0 0 0; height: 348px; background: linear-gradient(to top, rgba(6,8,11,0.9) 0%, rgba(6,8,11,0.77) 46%, rgba(6,8,11,0.31) 100%);" aria-hidden="true"></span>
|
||||
<div style="position: absolute; top: 24px; right: 40px; z-index: 2;"><button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.125rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.34); background: rgba(255,255,255,0.10); color: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 21V4"></path><path d="M6 4.5h10l-2 3.5 2 3.5H6"></path></svg>신고</button></div>
|
||||
<div style="position: absolute; inset: auto 0 0 0;">
|
||||
<div style="display: flex; align-items: center; gap: 1.25rem; padding: 34px 40px 22px;">
|
||||
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
|
||||
<div style="min-width: 0;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.625rem;">
|
||||
<h1 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em; color: #FFFFFF;">달빛조각사</h1>
|
||||
<span style="font-size: 0.9375rem; font-weight: 600; color: rgba(255,255,255,0.78);">중령 2호</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4375rem;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">무명연대</span>
|
||||
<span style="width: 1px; height: 12px; background: rgba(255,255,255,0.30);"></span>
|
||||
<span style="font-size: 0.875rem; color: rgba(255,255,255,0.68);">마지막 플레이 2시간 전</span>
|
||||
<span style="width: 1px; height: 12px; background: rgba(255,255,255,0.30);"></span><span style="display: inline-flex; align-items: center; gap: 0.3125rem; height: 24px; padding: 0 0.625rem; border-radius: 999px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.24); font-size: 0.75rem; font-weight: 600; color: #FFFFFF; white-space: nowrap;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="3.4"></circle><path d="M5.5 19.5c0-3.4 2.9-5.6 6.5-5.6s6.5 2.2 6.5 5.6"></path></svg>밤하늘 님이 연동한 계정</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1;"></div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 2rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" 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>
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">랭크전 솔로 · 2026 시즌3</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">다이아 3</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.8125rem; color: rgba(255,255,255,0.78);">1,842 RP</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" 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>
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">랭크전 파티 · 2026 시즌3</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">플래티넘 1</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.8125rem; color: rgba(255,255,255,0.78);">1,455 RP</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span style="width: 1px; height: 48px; background: rgba(255,255,255,0.30); margin: 0 0.5rem;"></span>
|
||||
|
||||
<!-- 오른쪽 컨트롤 — 보조 하나 · 캡션 · 주 동작이 모두 42px 한 줄에 선다.
|
||||
캡션을 갱신 버튼 아래에 매달면 그 덩어리만 66px 이 되어 옆 버튼과 어긋난다. -->
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.125rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.34); background: rgba(255,255,255,0.10); color: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 14l4-4 4 4"></path></svg>카드 그만 보기</button>
|
||||
<span style="font-size: 0.8125rem; color: rgba(255,255,255,0.68); white-space: nowrap;">12분 전에 불러왔어요</span>
|
||||
<button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #FF6A00; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 11-2.3-5.6"></path><polyline points="20,4 20,8 16,8"></polyline></svg>전적 갱신</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 1px; margin: 0 40px; background: rgba(255,255,255,0.20);"></div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 2.5rem; padding: 22px 40px 34px;">
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; font-weight: 500; color: rgba(255,255,255,0.68);">최근 동향</div>
|
||||
<div style="display: flex; align-items: baseline; gap: 0.625rem; margin-top: 0.375rem;">
|
||||
<span style="font-size: 2.125rem; font-weight: 700; letter-spacing: -0.045em; color: #FFFFFF;">60<span style="font-size: 1.125rem;">%</span></span>
|
||||
<span style="font-size: 0.875rem; color: rgba(255,255,255,0.78);">승률 · <span style="font-weight: 700; color: #7BA4FF;">12승</span> <span style="font-weight: 700; color: #F0857C;">8패</span></span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 2px; width: 232px; height: 10px; margin-top: 0.625rem;">
|
||||
<span style="flex-grow: 12; border-radius: 999px; background: #7BA4FF;"></span>
|
||||
<span style="flex-grow: 8; border-radius: 999px; background: #F0857C;"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; flex-grow: 1;">
|
||||
<div style="padding: 0.625rem 0.875rem 0.6875rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; background: rgba(255,255,255,0.12);">
|
||||
<div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">킬뎃</div>
|
||||
<div style="margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; color: #FFFFFF;">59%</div>
|
||||
</div>
|
||||
<div style="padding: 0.625rem 0.875rem 0.6875rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; background: rgba(255,255,255,0.12);">
|
||||
<div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">헤드샷</div>
|
||||
<div style="margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; color: #FFFFFF;">36%</div>
|
||||
</div>
|
||||
<div style="padding: 0.625rem 0.875rem 0.6875rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; background: rgba(255,255,255,0.12);">
|
||||
<div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">경기당 딜량</div>
|
||||
<div style="margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; color: #FFFFFF;">4,270</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 320px; flex-shrink: 0;">
|
||||
<div style="display: flex; align-items: baseline;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,255,0.78);">주무기</span><div style="flex-grow: 1;"></div><span style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">킬뎃</span>
|
||||
</div>
|
||||
<div style="margin-top: 0.375rem;">
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px;">
|
||||
<span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">라플</span>
|
||||
<span style="height: 6px; border-radius: 999px; background: rgba(255,255,255,0.20);"><span style="display: block; width: 61%; height: 100%; border-radius: 999px; background: #FFFFFF;"></span></span>
|
||||
<span style="font-size: 0.875rem; font-weight: 700; text-align: right; color: #FFFFFF;">61%</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px;">
|
||||
<span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">스나</span>
|
||||
<span style="height: 6px; border-radius: 999px; background: rgba(255,255,255,0.20);"><span style="display: block; width: 57%; height: 100%; border-radius: 999px; background: #FFFFFF;"></span></span>
|
||||
<span style="font-size: 0.875rem; font-weight: 700; text-align: right; color: #FFFFFF;">57%</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px;">
|
||||
<span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">특수</span>
|
||||
<span style="height: 6px; border-radius: 999px; background: rgba(255,255,255,0.20);"><span style="display: block; width: 48%; height: 100%; border-radius: 999px; background: #FFFFFF;"></span></span>
|
||||
<span style="font-size: 0.875rem; font-weight: 700; text-align: right; color: #FFFFFF;">48%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="ptab"><span class="on">종합</span><span>맵</span></div>
|
||||
|
||||
<!-- 본문 — 왼쪽 요약 레일 300 / 오른쪽 경기 목록 -->
|
||||
<div style="display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 2rem; padding: 36px 40px 56px;">
|
||||
|
||||
<!-- 왼쪽 요약 레일 -->
|
||||
<div style="display: flex; flex-direction: column; gap: 2rem;">
|
||||
|
||||
<!-- 최근 동향 — 넥슨 프로필이 주는 값 그대로. 경기 목록에서 다시 계산하지 않는다 -->
|
||||
<section>
|
||||
<div style="display: flex; align-items: baseline;">
|
||||
<h2 class="d-h2">최근 동향</h2>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.625rem; margin-top: 0.875rem;">
|
||||
<span style="font-size: 2.125rem; font-weight: 700; letter-spacing: -0.045em;">60<span style="font-size: 1.125rem;">%</span></span>
|
||||
<span style="font-size: 0.875rem; color: #5B6169;">승률 · <span style="font-weight: 700; color: #2A5FCC;">12승</span> <span style="font-weight: 700; color: #C4453D;">8패</span></span>
|
||||
</div>
|
||||
<!-- 승/패 비율 — 두 조각 사이를 2px 띄워 경계가 색 대비에만 기대지 않게 한다 -->
|
||||
<div style="display: flex; gap: 2px; height: 10px; margin-top: 0.75rem;">
|
||||
<span style="flex-grow: 12; border-radius: 999px; background: #2A5FCC;"></span>
|
||||
<span style="flex-grow: 8; border-radius: 999px; background: #C4453D;"></span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1rem;">
|
||||
<div class="tile"><div class="tile-l">킬뎃</div><div class="tile-v">59%</div></div>
|
||||
<div class="tile"><div class="tile-l">헤드샷</div><div class="tile-v">36%</div></div>
|
||||
<div class="tile"><div class="tile-l">경기당 딜량</div><div class="tile-v">4,270</div></div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 1.25rem;">
|
||||
<div style="display: flex; align-items: baseline;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: #5B6169;">주무기</span><div style="flex-grow: 1;"></div><span style="font-size: 0.75rem; color: #9BA1A9;">킬뎃</span>
|
||||
</div>
|
||||
<div style="margin-top: 0.5rem;">
|
||||
<div class="stat-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">라플</span><span class="bar"><span style="width: 61%;"></span></span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">61%</span></div>
|
||||
<div class="stat-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">스나</span><span class="bar"><span style="width: 57%;"></span></span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">57%</span></div>
|
||||
<div class="stat-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">특수</span><span class="bar"><span style="width: 48%;"></span></span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">48%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 랭크전 시즌 — 한 시즌이 석 달이라 목록이 길어지지 않는다. 접지 않고 전부 편다 -->
|
||||
<section>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="d-h2">랭크전 시즌</h2><div style="flex-grow: 1;"></div>
|
||||
<span style="display: flex; gap: 0.25rem;"><span class="d-tab d-tab-on">솔로</span><span class="d-tab">파티</span></span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 72px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">시즌</span><span class="d-th">티어</span><span class="d-th m-r">RP</span>
|
||||
</div>
|
||||
<div class="season-row"><span style="font-size: 0.8125rem; font-weight: 700; color: #14161A;">2026 시즌3</span><span style="display: flex; align-items: center; gap: 0.5rem; min-width: 0;"><span class="tier-sm"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path></svg></span><span class="d-clip" style="font-size: 0.875rem; font-weight: 700; color: #14161A;">다이아 3</span></span><span style="text-align: right; font-size: 0.875rem; font-weight: 700; color: #14161A;">1,842</span></div>
|
||||
<div class="season-row"><span style="font-size: 0.8125rem; font-weight: 500; color: #9BA1A9;">2026 시즌2</span><span style="display: flex; align-items: center; gap: 0.5rem; min-width: 0;"><span class="tier-sm"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path></svg></span><span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #5B6169;">플래티넘 2</span></span><span style="text-align: right; font-size: 0.875rem; font-weight: 600; color: #5B6169;">1,610</span></div>
|
||||
<div class="season-row"><span style="font-size: 0.8125rem; font-weight: 500; color: #9BA1A9;">2026 시즌1</span><span style="display: flex; align-items: center; gap: 0.5rem; min-width: 0;"><span class="tier-sm"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path></svg></span><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #9BA1A9;">미배치</span></span><span style="display: flex; justify-content: flex-end;"><span style="width: 10px; height: 1px; background: #C9CDD3;"></span></span></div>
|
||||
<div class="season-row"><span style="font-size: 0.8125rem; font-weight: 500; color: #9BA1A9;">2025 시즌4</span><span style="display: flex; align-items: center; gap: 0.5rem; min-width: 0;"><span class="tier-sm"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path></svg></span><span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #5B6169;">골드 1</span></span><span style="text-align: right; font-size: 0.875rem; font-weight: 600; color: #5B6169;">1,280</span></div>
|
||||
<div class="season-row" style="border-bottom: none;"><span style="font-size: 0.8125rem; font-weight: 500; color: #9BA1A9;">2025 시즌3</span><span style="display: flex; align-items: center; gap: 0.5rem; min-width: 0;"><span class="tier-sm"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path></svg></span><span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #5B6169;">실버 1</span></span><span style="text-align: right; font-size: 0.875rem; font-weight: 600; color: #5B6169;">740</span></div>
|
||||
|
||||
<div style="margin-top: 0.75rem; font-size: 0.8125rem; font-weight: 600; color: #5B6169;">2026 시즌3 · 솔로 기준</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.5rem;">
|
||||
<div class="tile"><div class="tile-l">승률</div><div class="tile-v">62%</div></div>
|
||||
<div class="tile"><div class="tile-l">킬뎃</div><div class="tile-v">61%</div></div>
|
||||
<div class="tile"><div class="tile-l">헤드샷</div><div class="tile-v">38%</div></div>
|
||||
<div class="tile"><div class="tile-l">경기당 딜량</div><div class="tile-v">4,510</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 클랜별 전적 — 몸담았던 클랜별로 전체 전적을 가른다. 소속 기간은 알 수 없어 적지 않는다 -->
|
||||
<section>
|
||||
<div style="display: flex; align-items: baseline;">
|
||||
<h2 class="d-h2">클랜별 전적</h2><div style="flex-grow: 1;"></div><span style="font-size: 0.8125rem; color: #9BA1A9;">전체 경기</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 44px 48px; align-items: center; gap: 0.625rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">클랜</span><span class="d-th m-r">판수</span><span class="d-th m-r">승률</span>
|
||||
</div>
|
||||
<div class="clan-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">무명연대</span><span class="m-sub m-r">214판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">70%</span></div>
|
||||
<div class="clan-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">밤새기동대</span><span class="m-sub m-r">151판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">45%</span></div>
|
||||
<div class="clan-row" style="border-bottom: none;"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">무소속</span><span class="m-sub m-r">55판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">33%</span></div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: baseline;">
|
||||
<h2 class="d-h2">같이 한 유저</h2><div style="flex-grow: 1;"></div><span style="font-size: 0.8125rem; color: #9BA1A9;">최근 100경기</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 40px 48px; align-items: center; gap: 0.625rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">유저</span><span class="d-th m-r">판수</span><span class="d-th m-r">내 승률</span>
|
||||
</div>
|
||||
<div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">칼든햄스터</span><span class="m-sub m-r">38판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">58%</span></div>
|
||||
<div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">새벽두시</span><span class="m-sub m-r">29판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">62%</span></div>
|
||||
<div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">무명연대장</span><span class="m-sub m-r">24판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">50%</span></div>
|
||||
<div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">한밤의저격수</span><span class="m-sub m-r">19판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">74%</span></div>
|
||||
<div class="who-row" style="border-bottom: none;"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">조용한총잡이</span><span class="m-sub m-r">15판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">47%</span></div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: baseline;">
|
||||
<h2 class="d-h2">자주 만난 상대</h2><div style="flex-grow: 1;"></div><span style="font-size: 0.8125rem; color: #9BA1A9;">최근 100경기</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 40px 48px; align-items: center; gap: 0.625rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">유저</span><span class="d-th m-r">판수</span><span class="d-th m-r">내 승률</span>
|
||||
</div>
|
||||
<div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">헤드샷장인</span><span class="m-sub m-r">22판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">41%</span></div>
|
||||
<div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">야간부대장</span><span class="m-sub m-r">18판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">56%</span></div>
|
||||
<div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">삼보급단골</span><span class="m-sub m-r">16판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">44%</span></div>
|
||||
<div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">웨어하우스지박령</span><span class="m-sub m-r">13판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">31%</span></div>
|
||||
<div class="who-row" style="border-bottom: none;"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">칼든햄스터</span><span class="m-sub m-r">11판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">55%</span></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- 오른쪽 — 최근 폼 + 경기 목록 -->
|
||||
<div style="display: flex; flex-direction: column; gap: 2rem;">
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: baseline; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">최근 폼</h2>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">최근 20판 · 최근 10판과 그 이전 10판 비교</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: flex-start; gap: 2.5rem;">
|
||||
<div>
|
||||
<div style="display: flex; align-items: center; gap: 4px;"><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #2A5FCC;"></span><span style="width: 12px;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span></div>
|
||||
<div style="display: flex; align-items: center; margin-top: 0.5rem;">
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">← 최근</span><div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.8125rem;"><span style="font-weight: 700; color: #2A5FCC;">12승</span> <span style="font-weight: 700; color: #C4453D;">8패</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 2.5rem;">
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: #9BA1A9;">승률</div>
|
||||
<div style="display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.25rem;"><span style="font-size: 1.0625rem; font-weight: 700;">70%</span><span style="display: inline-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.8125rem; font-weight: 600; color: #12805C;">20</span></span></div>
|
||||
<div style="font-size: 0.8125rem; color: #9BA1A9; margin-top: 0.25rem;">이전 10판 50%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: #9BA1A9;">킬뎃</div>
|
||||
<div style="display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.25rem;"><span style="font-size: 1.0625rem; font-weight: 700;">60%</span><span style="display: inline-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.8125rem; font-weight: 600; color: #12805C;">3</span></span></div>
|
||||
<div style="font-size: 0.8125rem; color: #9BA1A9; margin-top: 0.25rem;">이전 10판 57%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: #9BA1A9;">헤드샷</div>
|
||||
<div style="display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.25rem;"><span style="font-size: 1.0625rem; font-weight: 700;">36%</span><span style="display: inline-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.8125rem; font-weight: 600; color: #12805C;">1</span></span></div>
|
||||
<div style="font-size: 0.8125rem; color: #9BA1A9; margin-top: 0.25rem;">이전 10판 35%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: baseline; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">경기 기록</h2>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">9월 5일 18:08 기준</span>
|
||||
</div>
|
||||
|
||||
<div class="seg">
|
||||
<span class="on">전체</span><span>랭크전</span><span>클랜전</span><span>토너먼트</span><span>일반전</span>
|
||||
</div>
|
||||
|
||||
<div class="mg mh" style="margin-top: 0.25rem;">
|
||||
<span class="d-th">결과</span><span class="d-th">모드</span><span class="d-th">맵</span>
|
||||
<span class="d-th m-r">킬 · 데스 · 어시</span><span class="d-th m-r">킬뎃</span><span class="d-th m-r">헤드샷</span><span class="d-th m-r">딜량</span>
|
||||
<span class="d-th m-r">시각</span><span></span>
|
||||
</div>
|
||||
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">일반전</span><span class="d-clip m-map">제3보급창고</span><span class="m-num">21<span class="m-dot"> · </span><span class="m-death">9</span><span class="m-dot"> · </span>4</span><span class="m-sub m-r">70%</span><span class="m-sub m-r">41%</span><span class="m-sub m-r">4,820</span><span class="m-dim">14분 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 14l4-4 4 4"></path></svg></span></div>
|
||||
|
||||
<!-- 한 판 펼침 — 화살표를 누르면 그 줄 아래에 팀 스코어보드가 열린다 -->
|
||||
<div style="padding: 1.25rem; border: 1px solid #EDEFF2; border-radius: 16px; background: #FAFBFC;">
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem;">
|
||||
<div>
|
||||
<div style="display: flex; align-items: baseline; gap: 0.375rem; height: 26px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700; color: #2A5FCC;">승</span>
|
||||
<span style="font-size: 0.875rem; font-weight: 600;">우리 팀</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 120px 64px; align-items: center; gap: 0.625rem; height: 28px; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">유저</span><span class="d-th m-r">킬 · 데스 · 어시</span><span class="d-th m-r">딜량</span>
|
||||
</div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 700; color: #14161A;">달빛조각사</span><span class="m-num">21<span class="m-dot"> · </span><span class="m-death">9</span><span class="m-dot"> · </span>4</span><span class="m-sub m-r">4,820</span></div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">칼든햄스터</span><span class="m-num">14<span class="m-dot"> · </span><span class="m-death">11</span><span class="m-dot"> · </span>6</span><span class="m-sub m-r">3,210</span></div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">새벽두시</span><span class="m-num">12<span class="m-dot"> · </span><span class="m-death">13</span><span class="m-dot"> · </span>3</span><span class="m-sub m-r">2,880</span></div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">무명연대장</span><span class="m-num">9<span class="m-dot"> · </span><span class="m-death">14</span><span class="m-dot"> · </span>8</span><span class="m-sub m-r">2,140</span></div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">한밤의저격수</span><span class="m-num">7<span class="m-dot"> · </span><span class="m-death">15</span><span class="m-dot"> · </span>2</span><span class="m-sub m-r">1,690</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display: flex; align-items: baseline; gap: 0.375rem; height: 26px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700; color: #C4453D;">패</span>
|
||||
<span style="font-size: 0.875rem; font-weight: 600;">상대 팀</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 120px 64px; align-items: center; gap: 0.625rem; height: 28px; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">유저</span><span class="d-th m-r">킬 · 데스 · 어시</span><span class="d-th m-r">딜량</span>
|
||||
</div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">헤드샷장인</span><span class="m-num">18<span class="m-dot"> · </span><span class="m-death">12</span><span class="m-dot"> · </span>4</span><span class="m-sub m-r">4,050</span></div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">야간부대장</span><span class="m-num">15<span class="m-dot"> · </span><span class="m-death">13</span><span class="m-dot"> · </span>5</span><span class="m-sub m-r">3,470</span></div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">삼보급단골</span><span class="m-num">11<span class="m-dot"> · </span><span class="m-death">12</span><span class="m-dot"> · </span>7</span><span class="m-sub m-r">2,610</span></div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">웨어하우스지박령</span><span class="m-num">10<span class="m-dot"> · </span><span class="m-death">13</span><span class="m-dot"> · </span>3</span><span class="m-sub m-r">2,350</span></div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">조용한총잡이</span><span class="m-num">8<span class="m-dot"> · </span><span class="m-death">13</span><span class="m-dot"> · </span>6</span><span class="m-sub m-r">1,920</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mg mr"><span class="lose">패</span><span class="m-mode">일반전</span><span class="d-clip m-map">웨어하우스</span><span class="m-num">12<span class="m-dot"> · </span><span class="m-death">16</span><span class="m-dot"> · </span>7</span><span class="m-sub m-r">43%</span><span class="m-sub m-r">27%</span><span class="m-sub m-r">2,740</span><span class="m-dim">32분 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">솔로 랭크전</span><span class="d-clip m-map">크로스카운터</span><span class="m-num">24<span class="m-dot"> · </span><span class="m-death">11</span><span class="m-dot"> · </span>3</span><span class="m-sub m-r">69%</span><span class="m-sub m-r">44%</span><span class="m-sub m-r">5,610</span><span class="m-dim">1시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">일반전</span><span class="d-clip m-map">데드엔드</span><span class="m-num">19<span class="m-dot"> · </span><span class="m-death">7</span><span class="m-dot"> · </span>6</span><span class="m-sub m-r">73%</span><span class="m-sub m-r">39%</span><span class="m-sub m-r">4,380</span><span class="m-dim">1시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="lose">패</span><span class="m-mode">일반전</span><span class="d-clip m-map">아지트</span><span class="m-num">25<span class="m-dot"> · </span><span class="m-death">28</span><span class="m-dot"> · </span>5</span><span class="m-sub m-r">47%</span><span class="m-sub m-r">31%</span><span class="m-sub m-r">5,940</span><span class="m-dim">2시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">솔로 랭크전</span><span class="d-clip m-map">제3보급창고</span><span class="m-num">17<span class="m-dot"> · </span><span class="m-death">13</span><span class="m-dot"> · </span>8</span><span class="m-sub m-r">57%</span><span class="m-sub m-r">35%</span><span class="m-sub m-r">3,920</span><span class="m-dim">2시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">클랜전</span><span class="d-clip m-map">웨어하우스</span><span class="m-num">22<span class="m-dot"> · </span><span class="m-death">6</span><span class="m-dot"> · </span>3</span><span class="m-sub m-r">79%</span><span class="m-sub m-r">47%</span><span class="m-sub m-r">5,180</span><span class="m-dim">3시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="lose">패</span><span class="m-mode">솔로 랭크전</span><span class="d-clip m-map">크로스카운터</span><span class="m-num">9<span class="m-dot"> · </span><span class="m-death">14</span><span class="m-dot"> · </span>4</span><span class="m-sub m-r">39%</span><span class="m-sub m-r">29%</span><span class="m-sub m-r">2,150</span><span class="m-dim">3시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">일반전</span><span class="d-clip m-map">데드엔드</span><span class="m-num">16<span class="m-dot"> · </span><span class="m-death">9</span><span class="m-dot"> · </span>11</span><span class="m-sub m-r">64%</span><span class="m-sub m-r">33%</span><span class="m-sub m-r">3,640</span><span class="m-dim">어제 21:40</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">일반전</span><span class="d-clip m-map">제3보급창고</span><span class="m-num">20<span class="m-dot"> · </span><span class="m-death">12</span><span class="m-dot"> · </span>5</span><span class="m-sub m-r">63%</span><span class="m-sub m-r">38%</span><span class="m-sub m-r">4,510</span><span class="m-dim">어제 21:02</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="lose">패</span><span class="m-mode">클랜전</span><span class="d-clip m-map">아지트</span><span class="m-num">11<span class="m-dot"> · </span><span class="m-death">13</span><span class="m-dot"> · </span>2</span><span class="m-sub m-r">46%</span><span class="m-sub m-r">30%</span><span class="m-sub m-r">2,480</span><span class="m-dim">어제 20:24</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">일반전</span><span class="d-clip m-map">웨어하우스</span><span class="m-num">31<span class="m-dot"> · </span><span class="m-death">22</span><span class="m-dot"> · </span>6</span><span class="m-sub m-r">58%</span><span class="m-sub m-r">36%</span><span class="m-sub m-r">7,260</span><span class="m-dim">어제 19:51</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">토너먼트</span><span class="d-clip m-map">크로스카운터</span><span class="m-num">18<span class="m-dot"> · </span><span class="m-death">8</span><span class="m-dot"> · </span>7</span><span class="m-sub m-r">69%</span><span class="m-sub m-r">42%</span><span class="m-sub m-r">4,120</span><span class="m-dim">9월 3일</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr" style="border-bottom: none;"><span class="lose">패</span><span class="m-mode">파티 랭크전</span><span class="d-clip m-map">데드엔드</span><span class="m-num">13<span class="m-dot"> · </span><span class="m-death">15</span><span class="m-dot"> · </span>5</span><span class="m-sub m-r">46%</span><span class="m-sub m-r">28%</span><span class="m-sub m-r">2,980</span><span class="m-dim">9월 3일</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
|
||||
<button style="display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; margin-top: 1.25rem; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; font-family: inherit; font-size: 0.875rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">이전 경기 더 보기</button>
|
||||
</section>
|
||||
</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>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,318 @@
|
||||
<!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-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
/* 화면 갈래 — 페이지 전체를 가르는 탭이라 폭을 채우지 않고 왼쪽에 붙인다 */
|
||||
.ptab { display: flex; gap: 1.5rem; height: 48px; padding: 0 40px; border-bottom: 1px solid #E4E8ED; }
|
||||
.ptab > span { display: flex; align-items: center; font-size: 0.9375rem; font-weight: 500; color: #9BA1A9; box-shadow: inset 0 -2px 0 transparent; }
|
||||
.ptab > .on { font-weight: 700; color: #14161A; box-shadow: inset 0 -2px 0 #14161A; }
|
||||
.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; }
|
||||
.mg { display: grid; grid-template-columns: 44px 128px minmax(0, 1fr) 160px 76px 84px 84px 116px 18px; align-items: center; gap: 0.75rem; }
|
||||
.mh { height: 32px; border-bottom: 1px solid #E4E8ED; }
|
||||
.mr { height: 46px; border-bottom: 1px solid #F3F5F7; }
|
||||
.m-r { text-align: right; }
|
||||
.tile { padding: 0.625rem 0.75rem 0.6875rem; border: 1px solid #EDEFF2; border-radius: 12px; background: #FAFBFC; }
|
||||
.tile-l { font-size: 0.75rem; color: #9BA1A9; }
|
||||
.tier { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #EDEFF2; flex-shrink: 0; }
|
||||
.d-more { font-size: 0.8125rem; font-weight: 600; color: #5B6169; }
|
||||
.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; }
|
||||
.season-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
|
||||
.form-c { width: 14px; height: 14px; border-radius: 5px; flex-shrink: 0; }
|
||||
.stat-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px; }
|
||||
.clan-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px 48px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
|
||||
.who-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px 48px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
|
||||
.map-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) 64px 72px 72px 72px 80px; align-items: center; gap: 0.75rem; height: 56px; border-bottom: 1px solid #F3F5F7; }
|
||||
|
||||
/* 스켈레톤 — 홈과 같은 한 덩어리(.s). 색 #EDEFF2 하나, 1.6초에 한 번 쓸어간다 */
|
||||
.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; } }
|
||||
.sb { height: 11px; border-radius: 5px; }
|
||||
.sb-s { height: 10px; border-radius: 5px; }
|
||||
.sb-l { height: 13px; border-radius: 5px; }
|
||||
.sr { margin-left: auto; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="d-root" style="width: 1440px; min-height: 2120px; 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: 500; color: #5B6169;">홈</span>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<!-- 프로필 헤더 — 닉네임은 검색어라 서버 응답 없이도 안다. 즉시 그린다 -->
|
||||
<section style="background: #FAFBFC; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 1.25rem; padding: 26px 40px;">
|
||||
|
||||
<span class="s" style="width: 64px; height: 64px; border-radius: 12px; flex-shrink: 0;"></span>
|
||||
|
||||
<div style="min-width: 0;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<h1 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">달빛조각사</h1>
|
||||
<span class="s sb-l" style="width: 62px;"></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4375rem;">
|
||||
<span class="s sb" style="width: 74px;"></span>
|
||||
<span class="s sb-s" style="width: 108px; margin-left: 0.25rem;"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1;"></div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 2rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<span class="s" style="width: 40px; height: 40px; border-radius: 8px;"></span>
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: #9BA1A9;">랭크전 솔로 · 2026 시즌3</div>
|
||||
<div style="margin-top: 0.3125rem;"><span class="s sb-l" style="width: 68px;"></span></div>
|
||||
<div style="margin-top: 0.4375rem;"><span class="s sb-s" style="width: 64px;"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<span class="s" style="width: 40px; height: 40px; border-radius: 8px;"></span>
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: #9BA1A9;">랭크전 파티 · 2026 시즌3</div>
|
||||
<div style="margin-top: 0.3125rem;"><span class="s sb-l" style="width: 84px;"></span></div>
|
||||
<div style="margin-top: 0.4375rem;"><span class="s sb-s" style="width: 68px;"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span style="width: 1px; height: 48px; background: #E4E8ED; margin: 0 0.5rem;"></span>
|
||||
|
||||
<!-- 갱신 버튼은 회색으로 두지 않는다. 기다리는 동안에도 누를 수 있어야 한다 -->
|
||||
<!-- 오른쪽 컨트롤 — 보조 하나 · 캡션 · 주 동작이 모두 42px 한 줄에 선다.
|
||||
캡션을 갱신 버튼 아래에 매달면 그 덩어리만 66px 이 되어 옆 버튼과 어긋난다 -->
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.125rem; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg>프로필 카드 보기</button>
|
||||
<span class="s sb-s" style="width: 104px;"></span>
|
||||
<button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #FF6A00; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 11-2.3-5.6"></path><polyline points="20,4 20,8 16,8"></polyline></svg>전적 갱신</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="ptab"><span class="on">종합</span><span>맵</span></div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 2rem; padding: 36px 40px 56px;">
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 2rem;">
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="d-h2">최근 동향</h2>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; height: 41px; margin-top: 0.875rem;">
|
||||
<span class="s" style="width: 96px; height: 30px; border-radius: 5px;"></span>
|
||||
<span class="s sb" style="width: 108px;"></span>
|
||||
</div>
|
||||
<div class="s" style="height: 10px; border-radius: 999px; margin-top: 0.75rem;"></div>
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1rem;">
|
||||
<div class="tile"><div class="tile-l">킬뎃</div><div style="display: flex; align-items: center; height: 20px; margin-top: 0.1875rem;"><span class="s sb-l" style="width: 62%;"></span></div></div>
|
||||
<div class="tile"><div class="tile-l">헤드샷</div><div style="display: flex; align-items: center; height: 20px; margin-top: 0.1875rem;"><span class="s sb-l" style="width: 58%;"></span></div></div>
|
||||
<div class="tile"><div class="tile-l">경기당 딜량</div><div style="display: flex; align-items: center; height: 20px; margin-top: 0.1875rem;"><span class="s sb-l" style="width: 66%;"></span></div></div>
|
||||
</div>
|
||||
<div style="margin-top: 1.25rem;">
|
||||
<div style="display: flex; align-items: baseline;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: #5B6169;">주무기</span><div style="flex-grow: 1;"></div><span style="font-size: 0.75rem; color: #9BA1A9;">킬뎃</span>
|
||||
</div>
|
||||
<div style="margin-top: 0.5rem;">
|
||||
<div class="stat-row"><span class="s sb" style="width: 68%;"></span><span class="s" style="height: 6px; border-radius: 999px;"></span><span class="s sb sr" style="width: 32px;"></span></div>
|
||||
<div class="stat-row"><span class="s sb" style="width: 62%;"></span><span class="s" style="height: 6px; border-radius: 999px;"></span><span class="s sb sr" style="width: 32px;"></span></div>
|
||||
<div class="stat-row"><span class="s sb" style="width: 72%;"></span><span class="s" style="height: 6px; border-radius: 999px;"></span><span class="s sb sr" style="width: 32px;"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="d-h2">랭크전 시즌</h2><div style="flex-grow: 1;"></div>
|
||||
<span style="display: flex; gap: 0.25rem;"><span class="d-tab d-tab-on">솔로</span><span class="d-tab">파티</span></span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 72px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">시즌</span><span class="d-th">티어</span><span class="d-th m-r">RP</span>
|
||||
</div>
|
||||
<div class="season-row"><span class="s sb-s" style="width: 62px;"></span><span style="display: flex; align-items: center; gap: 0.5rem;"><span class="s" style="width: 22px; height: 22px; border-radius: 8px; flex-shrink: 0;"></span><span class="s sb" style="width: 74%;"></span></span><span class="s sb sr" style="width: 36px;"></span></div>
|
||||
<div class="season-row"><span class="s sb-s" style="width: 62px;"></span><span style="display: flex; align-items: center; gap: 0.5rem;"><span class="s" style="width: 22px; height: 22px; border-radius: 8px; flex-shrink: 0;"></span><span class="s sb" style="width: 66%;"></span></span><span class="s sb sr" style="width: 36px;"></span></div>
|
||||
<div class="season-row"><span class="s sb-s" style="width: 62px;"></span><span style="display: flex; align-items: center; gap: 0.5rem;"><span class="s" style="width: 22px; height: 22px; border-radius: 8px; flex-shrink: 0;"></span><span class="s sb" style="width: 70%;"></span></span><span class="s sb sr" style="width: 36px;"></span></div>
|
||||
<div class="season-row"><span class="s sb-s" style="width: 62px;"></span><span style="display: flex; align-items: center; gap: 0.5rem;"><span class="s" style="width: 22px; height: 22px; border-radius: 8px; flex-shrink: 0;"></span><span class="s sb" style="width: 62%;"></span></span><span class="s sb sr" style="width: 36px;"></span></div>
|
||||
<div class="season-row" style="border-bottom: none;"><span class="s sb-s" style="width: 62px;"></span><span style="display: flex; align-items: center; gap: 0.5rem;"><span class="s" style="width: 22px; height: 22px; border-radius: 8px; flex-shrink: 0;"></span><span class="s sb" style="width: 68%;"></span></span><span class="s sb sr" style="width: 36px;"></span></div>
|
||||
|
||||
<div style="margin-top: 1rem;"><span class="s sb-s" style="width: 132px;"></span></div>
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.5rem;">
|
||||
<div class="tile"><div class="tile-l">승률</div><div style="display: flex; align-items: center; height: 20px; margin-top: 0.1875rem;"><span class="s sb-l" style="width: 58%;"></span></div></div>
|
||||
<div class="tile"><div class="tile-l">킬뎃</div><div style="display: flex; align-items: center; height: 20px; margin-top: 0.1875rem;"><span class="s sb-l" style="width: 61%;"></span></div></div>
|
||||
<div class="tile"><div class="tile-l">헤드샷</div><div style="display: flex; align-items: center; height: 20px; margin-top: 0.1875rem;"><span class="s sb-l" style="width: 64%;"></span></div></div>
|
||||
<div class="tile"><div class="tile-l">경기당 딜량</div><div style="display: flex; align-items: center; height: 20px; margin-top: 0.1875rem;"><span class="s sb-l" style="width: 67%;"></span></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="d-h2">클랜별 전적</h2><div style="flex-grow: 1;"></div><span style="font-size: 0.8125rem; color: #9BA1A9;">전체 경기</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 44px 48px; align-items: center; gap: 0.625rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">클랜</span><span class="d-th m-r">판수</span><span class="d-th m-r">승률</span>
|
||||
</div>
|
||||
<div class="clan-row"><span class="s sb" style="width: 68%;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb sr" style="width: 32px;"></span></div>
|
||||
<div class="clan-row"><span class="s sb" style="width: 76%;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb sr" style="width: 32px;"></span></div>
|
||||
<div class="clan-row" style="border-bottom: none;"><span class="s sb" style="width: 46%;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb sr" style="width: 32px;"></span></div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="d-h2">같이 한 유저</h2><div style="flex-grow: 1;"></div><span style="font-size: 0.8125rem; color: #9BA1A9;">최근 100경기</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 40px 48px; align-items: center; gap: 0.625rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">유저</span><span class="d-th m-r">판수</span><span class="d-th m-r">내 승률</span>
|
||||
</div>
|
||||
<div class="who-row"><span class="s sb" style="width: 62%;"></span><span class="s sb-s sr" style="width: 24px;"></span><span class="s sb sr" style="width: 30px;"></span></div>
|
||||
<div class="who-row"><span class="s sb" style="width: 54%;"></span><span class="s sb-s sr" style="width: 24px;"></span><span class="s sb sr" style="width: 30px;"></span></div>
|
||||
<div class="who-row"><span class="s sb" style="width: 70%;"></span><span class="s sb-s sr" style="width: 24px;"></span><span class="s sb sr" style="width: 30px;"></span></div>
|
||||
<div class="who-row"><span class="s sb" style="width: 58%;"></span><span class="s sb-s sr" style="width: 24px;"></span><span class="s sb sr" style="width: 30px;"></span></div>
|
||||
<div class="who-row" style="border-bottom: none;"><span class="s sb" style="width: 66%;"></span><span class="s sb-s sr" style="width: 24px;"></span><span class="s sb sr" style="width: 30px;"></span></div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="d-h2">자주 만난 상대</h2><div style="flex-grow: 1;"></div><span style="font-size: 0.8125rem; color: #9BA1A9;">최근 100경기</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 40px 48px; align-items: center; gap: 0.625rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">유저</span><span class="d-th m-r">판수</span><span class="d-th m-r">내 승률</span>
|
||||
</div>
|
||||
<div class="who-row"><span class="s sb" style="width: 74%;"></span><span class="s sb-s sr" style="width: 24px;"></span><span class="s sb sr" style="width: 30px;"></span></div>
|
||||
<div class="who-row"><span class="s sb" style="width: 58%;"></span><span class="s sb-s sr" style="width: 24px;"></span><span class="s sb sr" style="width: 30px;"></span></div>
|
||||
<div class="who-row"><span class="s sb" style="width: 64%;"></span><span class="s sb-s sr" style="width: 24px;"></span><span class="s sb sr" style="width: 30px;"></span></div>
|
||||
<div class="who-row"><span class="s sb" style="width: 80%;"></span><span class="s sb-s sr" style="width: 24px;"></span><span class="s sb sr" style="width: 30px;"></span></div>
|
||||
<div class="who-row" style="border-bottom: none;"><span class="s sb" style="width: 56%;"></span><span class="s sb-s sr" style="width: 24px;"></span><span class="s sb sr" style="width: 30px;"></span></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 2rem;">
|
||||
|
||||
<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 sb-s" style="width: 246px;"></span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: flex-start; gap: 2.5rem;">
|
||||
<div>
|
||||
<div style="display: flex; align-items: center; gap: 4px;"><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span style="width: 12px;"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span><span class="s form-c"></span></div>
|
||||
<div style="display: flex; align-items: center; margin-top: 0.5rem;">
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">← 최근</span><div style="flex-grow: 1;"></div>
|
||||
<span class="s sb-s" style="width: 68px;"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 2.5rem;">
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: #9BA1A9;">승률</div>
|
||||
<div style="display: flex; align-items: center; height: 21px; margin-top: 0.25rem;"><span class="s sb-l" style="width: 56px;"></span></div>
|
||||
<div style="margin-top: 0.375rem;"><span class="s sb-s" style="width: 86px;"></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: #9BA1A9;">킬뎃</div>
|
||||
<div style="display: flex; align-items: center; height: 21px; margin-top: 0.25rem;"><span class="s sb-l" style="width: 62px;"></span></div>
|
||||
<div style="margin-top: 0.375rem;"><span class="s sb-s" style="width: 90px;"></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: #9BA1A9;">헤드샷</div>
|
||||
<div style="display: flex; align-items: center; height: 21px; margin-top: 0.25rem;"><span class="s sb-l" style="width: 68px;"></span></div>
|
||||
<div style="margin-top: 0.375rem;"><span class="s sb-s" style="width: 94px;"></span></div>
|
||||
</div>
|
||||
</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="s sb-s" style="width: 188px;"></span>
|
||||
</div>
|
||||
|
||||
<!-- 세그먼트는 고정 문구라 즉시 그린다 -->
|
||||
<div class="seg">
|
||||
<span class="on">전체</span><span>랭크전</span><span>클랜전</span><span>토너먼트</span><span>일반전</span>
|
||||
</div>
|
||||
|
||||
<div class="mg mh" style="margin-top: 0.25rem;">
|
||||
<span class="d-th">결과</span><span class="d-th">모드</span><span class="d-th">맵</span>
|
||||
<span class="d-th m-r">킬 · 데스 · 어시</span><span class="d-th m-r">킬뎃</span><span class="d-th m-r">헤드샷</span><span class="d-th m-r">딜량</span>
|
||||
<span class="d-th m-r">시각</span><span></span>
|
||||
</div>
|
||||
|
||||
<div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 78%;"></span><span class="s sb" style="width: 64%;"></span><span class="s sb sr" style="width: 96px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 44px;"></span><span class="s sb-s sr" style="width: 62px;"></span><span></span></div>
|
||||
<div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 62%;"></span><span class="s sb" style="width: 78%;"></span><span class="s sb sr" style="width: 102px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 40px;"></span><span class="s sb-s sr" style="width: 62px;"></span><span></span></div>
|
||||
<div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 84%;"></span><span class="s sb" style="width: 70%;"></span><span class="s sb sr" style="width: 94px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 46px;"></span><span class="s sb-s sr" style="width: 66px;"></span><span></span></div>
|
||||
<div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 70%;"></span><span class="s sb" style="width: 56%;"></span><span class="s sb sr" style="width: 98px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 44px;"></span><span class="s sb-s sr" style="width: 62px;"></span><span></span></div>
|
||||
<div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 76%;"></span><span class="s sb" style="width: 62%;"></span><span class="s sb sr" style="width: 104px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 46px;"></span><span class="s sb-s sr" style="width: 62px;"></span><span></span></div>
|
||||
<div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 84%;"></span><span class="s sb" style="width: 74%;"></span><span class="s sb sr" style="width: 96px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 42px;"></span><span class="s sb-s sr" style="width: 66px;"></span><span></span></div>
|
||||
<div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 70%;"></span><span class="s sb" style="width: 78%;"></span><span class="s sb sr" style="width: 92px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 44px;"></span><span class="s sb-s sr" style="width: 62px;"></span><span></span></div>
|
||||
<div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 84%;"></span><span class="s sb" style="width: 68%;"></span><span class="s sb sr" style="width: 90px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 38px;"></span><span class="s sb-s sr" style="width: 62px;"></span><span></span></div>
|
||||
<div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 62%;"></span><span class="s sb" style="width: 56%;"></span><span class="s sb sr" style="width: 100px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 42px;"></span><span class="s sb-s sr" style="width: 80px;"></span><span></span></div>
|
||||
<div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 76%;"></span><span class="s sb" style="width: 70%;"></span><span class="s sb sr" style="width: 96px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 44px;"></span><span class="s sb-s sr" style="width: 80px;"></span><span></span></div>
|
||||
<div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 70%;"></span><span class="s sb" style="width: 58%;"></span><span class="s sb sr" style="width: 94px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 40px;"></span><span class="s sb-s sr" style="width: 80px;"></span><span></span></div>
|
||||
<div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 84%;"></span><span class="s sb" style="width: 74%;"></span><span class="s sb sr" style="width: 104px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 48px;"></span><span class="s sb-s sr" style="width: 80px;"></span><span></span></div>
|
||||
<div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 76%;"></span><span class="s sb" style="width: 78%;"></span><span class="s sb sr" style="width: 92px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 44px;"></span><span class="s sb-s sr" style="width: 68px;"></span><span></span></div>
|
||||
<div class="mg mr"><span class="s sb-l" style="width: 20px;"></span><span class="s sb" style="width: 84%;"></span><span class="s sb" style="width: 62%;"></span><span class="s sb sr" style="width: 96px;"></span><span class="s sb-s sr" style="width: 34px;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s sb-s sr" style="width: 42px;"></span><span class="s sb-s sr" style="width: 68px;"></span><span></span></div>
|
||||
|
||||
<div class="s" style="height: 46px; border-radius: 999px; margin-top: 1.25rem;"></div>
|
||||
</section>
|
||||
</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>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,383 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 서린즈 전적 — 데스크톱 1440 · 프로필 헤더 + 좌 요약 레일 / 우 경기 목록 */
|
||||
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-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
/* 갈래 선택 — 하위 탭(알약)과 구분되도록 밑줄형 세그먼트 (홈과 같은 규칙) */
|
||||
/* 화면 갈래 — 페이지 전체를 가르는 탭이라 폭을 채우지 않고 왼쪽에 붙인다 */
|
||||
.ptab { display: flex; gap: 1.5rem; height: 48px; padding: 0 40px; border-bottom: 1px solid #E4E8ED; }
|
||||
.ptab > span { display: flex; align-items: center; font-size: 0.9375rem; font-weight: 500; color: #9BA1A9; box-shadow: inset 0 -2px 0 transparent; }
|
||||
.ptab > .on { font-weight: 700; color: #14161A; box-shadow: inset 0 -2px 0 #14161A; }
|
||||
.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; }
|
||||
|
||||
/* 경기 한 줄 — 머리와 본문이 같은 격자를 쓴다 */
|
||||
.mg { display: grid; grid-template-columns: 44px 128px minmax(0, 1fr) 160px 76px 84px 84px 116px 18px; align-items: center; gap: 0.75rem; }
|
||||
.mh { height: 32px; border-bottom: 1px solid #E4E8ED; }
|
||||
.mr { height: 46px; border-bottom: 1px solid #F3F5F7; }
|
||||
.win { font-size: 0.9375rem; font-weight: 700; color: #2A5FCC; }
|
||||
.lose { font-size: 0.9375rem; font-weight: 700; color: #C4453D; }
|
||||
.m-mode { font-size: 0.875rem; font-weight: 600; }
|
||||
.m-map { font-size: 0.875rem; color: #5B6169; }
|
||||
.m-num { font-size: 0.875rem; font-weight: 600; text-align: right; }
|
||||
/* 데스는 색을 달리해 킬·어시와 눈으로 갈린다 */
|
||||
.m-death { color: #C4453D; }
|
||||
.m-dot { color: #C9CDD3; font-weight: 500; }
|
||||
.m-sub { font-size: 0.8125rem; color: #5B6169; }
|
||||
.m-dim { font-size: 0.8125rem; color: #9BA1A9; text-align: right; }
|
||||
.m-r { text-align: right; }
|
||||
|
||||
/* 요약 레일 */
|
||||
.tile { padding: 0.625rem 0.75rem 0.6875rem; border: 1px solid #EDEFF2; border-radius: 12px; background: #FAFBFC; }
|
||||
.tile-l { font-size: 0.75rem; color: #9BA1A9; }
|
||||
.tile-v { margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; }
|
||||
.d-more { font-size: 0.8125rem; font-weight: 600; color: #5B6169; }
|
||||
.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; }
|
||||
.season-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
|
||||
.tier-sm { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 8px; background: #EDEFF2; flex-shrink: 0; }
|
||||
/* 최근 폼 — 승/패 20칸. 왼쪽이 최근이라 아래 경기 목록과 같은 방향을 가리킨다 */
|
||||
.form-c { width: 14px; height: 14px; border-radius: 5px; flex-shrink: 0; }
|
||||
.stat-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px; }
|
||||
/* 크기 막대 — 갈래가 하나뿐이라 색을 나누지 않고 길이로만 읽힌다 */
|
||||
.bar { height: 6px; border-radius: 999px; background: #EDEFF2; }
|
||||
.bar > span { display: block; height: 100%; border-radius: 999px; background: #14161A; }
|
||||
.tier { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #EDEFF2; flex-shrink: 0; }
|
||||
.map-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) 64px 72px 72px 72px 80px; align-items: center; gap: 0.75rem; height: 56px; border-bottom: 1px solid #F3F5F7; }
|
||||
.map-thumb { width: 80px; height: 45px; border-radius: 12px; }
|
||||
.sb-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 64px; align-items: center; gap: 0.625rem; height: 34px; }
|
||||
.clan-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px 48px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
|
||||
.who-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px 48px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="d-root" style="width: 1440px; min-height: 2120px; 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: 500; color: #5B6169;">홈</span>
|
||||
<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>
|
||||
<!-- 이 화면에는 히어로 검색창이 없으므로 돋보기를 처음부터 둔다 (홈은 스크롤 뒤에만) -->
|
||||
<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>
|
||||
|
||||
<!-- 프로필 층 — 배경을 넣은 사람은 여기에 사진이 깔린다. 받침이 글자를 지킨다 -->
|
||||
<section style="position: relative; isolation: isolate; overflow: hidden;">
|
||||
<span style="position: absolute; inset: 0; background:
|
||||
radial-gradient(55% 85% at 20% 26%, rgba(255,244,214,0.96) 0%, rgba(255,206,120,0.55) 38%, rgba(255,170,60,0) 72%),
|
||||
radial-gradient(70% 110% at 78% 82%, rgba(126,196,255,0.45) 0%, rgba(126,196,255,0) 62%),
|
||||
linear-gradient(158deg, #8A6A3C 0%, #3A4B58 54%, #0F171E 100%);" aria-hidden="true"></span>
|
||||
<svg viewBox="0 0 1440 200" preserveAspectRatio="none" style="position: absolute; inset: auto 0 0 0; width: 100%; height: 62%; opacity: 0.42;" aria-hidden="true"><path d="M0 200V128h96v-28h84v28h58V84h132v116z" fill="#0B1116"></path><path d="M470 200v-52h74v-30h96v30h52v52z" fill="#0E151B"></path><path d="M792 200v-84h120v-22h74v22h66v84z" fill="#0B1116"></path><path d="M1128 200v-44h92v-34h120v78z" fill="#0E151B"></path></svg>
|
||||
<span style="position: absolute; inset: auto 0 0 0; height: 100%; background: linear-gradient(to top, rgba(6,8,11,0.88) 0%, rgba(6,8,11,0.76) 46%, rgba(6,8,11,0.30) 100%);" aria-hidden="true"></span>
|
||||
<div style="position: relative;">
|
||||
<div style="display: flex; align-items: center; gap: 1.25rem; padding: 34px 40px;">
|
||||
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
|
||||
<div style="min-width: 0;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.625rem;">
|
||||
<h1 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em; color: #FFFFFF;">달빛조각사</h1>
|
||||
<span style="font-size: 0.9375rem; font-weight: 600; color: rgba(255,255,255,0.78);">중령 2호</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4375rem;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">무명연대</span>
|
||||
<span style="width: 1px; height: 12px; background: rgba(255,255,255,0.30);"></span>
|
||||
<span style="font-size: 0.875rem; color: rgba(255,255,255,0.68);">마지막 플레이 2시간 전</span>
|
||||
<span style="width: 1px; height: 12px; background: rgba(255,255,255,0.30);"></span><span style="display: inline-flex; align-items: center; gap: 0.3125rem; height: 24px; padding: 0 0.625rem; border-radius: 999px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.24); font-size: 0.75rem; font-weight: 600; color: #FFFFFF; white-space: nowrap;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="3.4"></circle><path d="M5.5 19.5c0-3.4 2.9-5.6 6.5-5.6s6.5 2.2 6.5 5.6"></path></svg>밤하늘 님이 연동한 계정</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1;"></div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 2rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" 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>
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">랭크전 솔로 · 2026 시즌3</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">다이아 3</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.8125rem; color: rgba(255,255,255,0.78);">1,842 RP</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" 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>
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">랭크전 파티 · 2026 시즌3</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">플래티넘 1</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.8125rem; color: rgba(255,255,255,0.78);">1,455 RP</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span style="width: 1px; height: 48px; background: rgba(255,255,255,0.30); margin: 0 0.5rem;"></span>
|
||||
|
||||
<!-- 오른쪽 컨트롤 — 보조 하나 · 캡션 · 주 동작이 모두 42px 한 줄에 선다.
|
||||
캡션을 갱신 버튼 아래에 매달면 그 덩어리만 66px 이 되어 옆 버튼과 어긋난다. -->
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.125rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.34); background: rgba(255,255,255,0.10); color: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg>프로필 카드 보기</button>
|
||||
<span style="font-size: 0.8125rem; color: rgba(255,255,255,0.68); white-space: nowrap;">12분 전에 불러왔어요</span>
|
||||
<button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #FF6A00; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 11-2.3-5.6"></path><polyline points="20,4 20,8 16,8"></polyline></svg>전적 갱신</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="ptab"><span class="on">종합</span><span>맵</span></div>
|
||||
|
||||
<!-- 본문 — 왼쪽 요약 레일 300 / 오른쪽 경기 목록 -->
|
||||
<div style="display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 2rem; padding: 36px 40px 56px;">
|
||||
|
||||
<!-- 왼쪽 요약 레일 -->
|
||||
<div style="display: flex; flex-direction: column; gap: 2rem;">
|
||||
|
||||
<!-- 최근 동향 — 넥슨 프로필이 주는 값 그대로. 경기 목록에서 다시 계산하지 않는다 -->
|
||||
<section>
|
||||
<div style="display: flex; align-items: baseline;">
|
||||
<h2 class="d-h2">최근 동향</h2>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; gap: 0.625rem; margin-top: 0.875rem;">
|
||||
<span style="font-size: 2.125rem; font-weight: 700; letter-spacing: -0.045em;">60<span style="font-size: 1.125rem;">%</span></span>
|
||||
<span style="font-size: 0.875rem; color: #5B6169;">승률 · <span style="font-weight: 700; color: #2A5FCC;">12승</span> <span style="font-weight: 700; color: #C4453D;">8패</span></span>
|
||||
</div>
|
||||
<!-- 승/패 비율 — 두 조각 사이를 2px 띄워 경계가 색 대비에만 기대지 않게 한다 -->
|
||||
<div style="display: flex; gap: 2px; height: 10px; margin-top: 0.75rem;">
|
||||
<span style="flex-grow: 12; border-radius: 999px; background: #2A5FCC;"></span>
|
||||
<span style="flex-grow: 8; border-radius: 999px; background: #C4453D;"></span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1rem;">
|
||||
<div class="tile"><div class="tile-l">킬뎃</div><div class="tile-v">59%</div></div>
|
||||
<div class="tile"><div class="tile-l">헤드샷</div><div class="tile-v">36%</div></div>
|
||||
<div class="tile"><div class="tile-l">경기당 딜량</div><div class="tile-v">4,270</div></div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 1.25rem;">
|
||||
<div style="display: flex; align-items: baseline;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: #5B6169;">주무기</span><div style="flex-grow: 1;"></div><span style="font-size: 0.75rem; color: #9BA1A9;">킬뎃</span>
|
||||
</div>
|
||||
<div style="margin-top: 0.5rem;">
|
||||
<div class="stat-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">라플</span><span class="bar"><span style="width: 61%;"></span></span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">61%</span></div>
|
||||
<div class="stat-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">스나</span><span class="bar"><span style="width: 57%;"></span></span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">57%</span></div>
|
||||
<div class="stat-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">특수</span><span class="bar"><span style="width: 48%;"></span></span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">48%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 랭크전 시즌 — 한 시즌이 석 달이라 목록이 길어지지 않는다. 접지 않고 전부 편다 -->
|
||||
<section>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 class="d-h2">랭크전 시즌</h2><div style="flex-grow: 1;"></div>
|
||||
<span style="display: flex; gap: 0.25rem;"><span class="d-tab d-tab-on">솔로</span><span class="d-tab">파티</span></span>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 72px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">시즌</span><span class="d-th">티어</span><span class="d-th m-r">RP</span>
|
||||
</div>
|
||||
<div class="season-row"><span style="font-size: 0.8125rem; font-weight: 700; color: #14161A;">2026 시즌3</span><span style="display: flex; align-items: center; gap: 0.5rem; min-width: 0;"><span class="tier-sm"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path></svg></span><span class="d-clip" style="font-size: 0.875rem; font-weight: 700; color: #14161A;">다이아 3</span></span><span style="text-align: right; font-size: 0.875rem; font-weight: 700; color: #14161A;">1,842</span></div>
|
||||
<div class="season-row"><span style="font-size: 0.8125rem; font-weight: 500; color: #9BA1A9;">2026 시즌2</span><span style="display: flex; align-items: center; gap: 0.5rem; min-width: 0;"><span class="tier-sm"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path></svg></span><span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #5B6169;">플래티넘 2</span></span><span style="text-align: right; font-size: 0.875rem; font-weight: 600; color: #5B6169;">1,610</span></div>
|
||||
<div class="season-row"><span style="font-size: 0.8125rem; font-weight: 500; color: #9BA1A9;">2026 시즌1</span><span style="display: flex; align-items: center; gap: 0.5rem; min-width: 0;"><span class="tier-sm"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path></svg></span><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #9BA1A9;">미배치</span></span><span style="display: flex; justify-content: flex-end;"><span style="width: 10px; height: 1px; background: #C9CDD3;"></span></span></div>
|
||||
<div class="season-row"><span style="font-size: 0.8125rem; font-weight: 500; color: #9BA1A9;">2025 시즌4</span><span style="display: flex; align-items: center; gap: 0.5rem; min-width: 0;"><span class="tier-sm"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path></svg></span><span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #5B6169;">골드 1</span></span><span style="text-align: right; font-size: 0.875rem; font-weight: 600; color: #5B6169;">1,280</span></div>
|
||||
<div class="season-row" style="border-bottom: none;"><span style="font-size: 0.8125rem; font-weight: 500; color: #9BA1A9;">2025 시즌3</span><span style="display: flex; align-items: center; gap: 0.5rem; min-width: 0;"><span class="tier-sm"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"><path d="M12 3l7.5 4.3v9.4L12 21l-7.5-4.3V7.3z"></path></svg></span><span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #5B6169;">실버 1</span></span><span style="text-align: right; font-size: 0.875rem; font-weight: 600; color: #5B6169;">740</span></div>
|
||||
|
||||
<div style="margin-top: 0.75rem; font-size: 0.8125rem; font-weight: 600; color: #5B6169;">2026 시즌3 · 솔로 기준</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.5rem;">
|
||||
<div class="tile"><div class="tile-l">승률</div><div class="tile-v">62%</div></div>
|
||||
<div class="tile"><div class="tile-l">킬뎃</div><div class="tile-v">61%</div></div>
|
||||
<div class="tile"><div class="tile-l">헤드샷</div><div class="tile-v">38%</div></div>
|
||||
<div class="tile"><div class="tile-l">경기당 딜량</div><div class="tile-v">4,510</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 클랜별 전적 — 몸담았던 클랜별로 전체 전적을 가른다. 소속 기간은 알 수 없어 적지 않는다 -->
|
||||
<section>
|
||||
<div style="display: flex; align-items: baseline;">
|
||||
<h2 class="d-h2">클랜별 전적</h2><div style="flex-grow: 1;"></div><span style="font-size: 0.8125rem; color: #9BA1A9;">전체 경기</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 44px 48px; align-items: center; gap: 0.625rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">클랜</span><span class="d-th m-r">판수</span><span class="d-th m-r">승률</span>
|
||||
</div>
|
||||
<div class="clan-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">무명연대</span><span class="m-sub m-r">214판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">70%</span></div>
|
||||
<div class="clan-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">밤새기동대</span><span class="m-sub m-r">151판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">45%</span></div>
|
||||
<div class="clan-row" style="border-bottom: none;"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">무소속</span><span class="m-sub m-r">55판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">33%</span></div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: baseline;">
|
||||
<h2 class="d-h2">같이 한 유저</h2><div style="flex-grow: 1;"></div><span style="font-size: 0.8125rem; color: #9BA1A9;">최근 100경기</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 40px 48px; align-items: center; gap: 0.625rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">유저</span><span class="d-th m-r">판수</span><span class="d-th m-r">내 승률</span>
|
||||
</div>
|
||||
<div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">칼든햄스터</span><span class="m-sub m-r">38판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">58%</span></div>
|
||||
<div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">새벽두시</span><span class="m-sub m-r">29판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">62%</span></div>
|
||||
<div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">무명연대장</span><span class="m-sub m-r">24판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">50%</span></div>
|
||||
<div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">한밤의저격수</span><span class="m-sub m-r">19판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">74%</span></div>
|
||||
<div class="who-row" style="border-bottom: none;"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">조용한총잡이</span><span class="m-sub m-r">15판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">47%</span></div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: baseline;">
|
||||
<h2 class="d-h2">자주 만난 상대</h2><div style="flex-grow: 1;"></div><span style="font-size: 0.8125rem; color: #9BA1A9;">최근 100경기</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 40px 48px; align-items: center; gap: 0.625rem; height: 32px; margin-top: 0.75rem; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">유저</span><span class="d-th m-r">판수</span><span class="d-th m-r">내 승률</span>
|
||||
</div>
|
||||
<div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">헤드샷장인</span><span class="m-sub m-r">22판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">41%</span></div>
|
||||
<div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">야간부대장</span><span class="m-sub m-r">18판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">56%</span></div>
|
||||
<div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">삼보급단골</span><span class="m-sub m-r">16판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">44%</span></div>
|
||||
<div class="who-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">웨어하우스지박령</span><span class="m-sub m-r">13판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">31%</span></div>
|
||||
<div class="who-row" style="border-bottom: none;"><span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">칼든햄스터</span><span class="m-sub m-r">11판</span><span style="font-size: 0.875rem; font-weight: 700; text-align: right;">55%</span></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- 오른쪽 — 최근 폼 + 경기 목록 -->
|
||||
<div style="display: flex; flex-direction: column; gap: 2rem;">
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: baseline; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">최근 폼</h2>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">최근 20판 · 최근 10판과 그 이전 10판 비교</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: flex-start; gap: 2.5rem;">
|
||||
<div>
|
||||
<div style="display: flex; align-items: center; gap: 4px;"><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #2A5FCC;"></span><span style="width: 12px;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #C4453D;"></span><span class="form-c" style="background: #2A5FCC;"></span></div>
|
||||
<div style="display: flex; align-items: center; margin-top: 0.5rem;">
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">← 최근</span><div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.8125rem;"><span style="font-weight: 700; color: #2A5FCC;">12승</span> <span style="font-weight: 700; color: #C4453D;">8패</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 2.5rem;">
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: #9BA1A9;">승률</div>
|
||||
<div style="display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.25rem;"><span style="font-size: 1.0625rem; font-weight: 700;">70%</span><span style="display: inline-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.8125rem; font-weight: 600; color: #12805C;">20</span></span></div>
|
||||
<div style="font-size: 0.8125rem; color: #9BA1A9; margin-top: 0.25rem;">이전 10판 50%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: #9BA1A9;">킬뎃</div>
|
||||
<div style="display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.25rem;"><span style="font-size: 1.0625rem; font-weight: 700;">60%</span><span style="display: inline-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.8125rem; font-weight: 600; color: #12805C;">3</span></span></div>
|
||||
<div style="font-size: 0.8125rem; color: #9BA1A9; margin-top: 0.25rem;">이전 10판 57%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: #9BA1A9;">헤드샷</div>
|
||||
<div style="display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.25rem;"><span style="font-size: 1.0625rem; font-weight: 700;">36%</span><span style="display: inline-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.8125rem; font-weight: 600; color: #12805C;">1</span></span></div>
|
||||
<div style="font-size: 0.8125rem; color: #9BA1A9; margin-top: 0.25rem;">이전 10판 35%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div style="display: flex; align-items: baseline; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">경기 기록</h2>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">9월 5일 18:08 기준</span>
|
||||
</div>
|
||||
|
||||
<div class="seg">
|
||||
<span class="on">전체</span><span>랭크전</span><span>클랜전</span><span>토너먼트</span><span>일반전</span>
|
||||
</div>
|
||||
|
||||
<div class="mg mh" style="margin-top: 0.25rem;">
|
||||
<span class="d-th">결과</span><span class="d-th">모드</span><span class="d-th">맵</span>
|
||||
<span class="d-th m-r">킬 · 데스 · 어시</span><span class="d-th m-r">킬뎃</span><span class="d-th m-r">헤드샷</span><span class="d-th m-r">딜량</span>
|
||||
<span class="d-th m-r">시각</span><span></span>
|
||||
</div>
|
||||
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">일반전</span><span class="d-clip m-map">제3보급창고</span><span class="m-num">21<span class="m-dot"> · </span><span class="m-death">9</span><span class="m-dot"> · </span>4</span><span class="m-sub m-r">70%</span><span class="m-sub m-r">41%</span><span class="m-sub m-r">4,820</span><span class="m-dim">14분 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 14l4-4 4 4"></path></svg></span></div>
|
||||
|
||||
<!-- 한 판 펼침 — 화살표를 누르면 그 줄 아래에 팀 스코어보드가 열린다 -->
|
||||
<div style="padding: 1.25rem; border: 1px solid #EDEFF2; border-radius: 16px; background: #FAFBFC;">
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem;">
|
||||
<div>
|
||||
<div style="display: flex; align-items: baseline; gap: 0.375rem; height: 26px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700; color: #2A5FCC;">승</span>
|
||||
<span style="font-size: 0.875rem; font-weight: 600;">우리 팀</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 120px 64px; align-items: center; gap: 0.625rem; height: 28px; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">유저</span><span class="d-th m-r">킬 · 데스 · 어시</span><span class="d-th m-r">딜량</span>
|
||||
</div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 700; color: #14161A;">달빛조각사</span><span class="m-num">21<span class="m-dot"> · </span><span class="m-death">9</span><span class="m-dot"> · </span>4</span><span class="m-sub m-r">4,820</span></div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">칼든햄스터</span><span class="m-num">14<span class="m-dot"> · </span><span class="m-death">11</span><span class="m-dot"> · </span>6</span><span class="m-sub m-r">3,210</span></div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">새벽두시</span><span class="m-num">12<span class="m-dot"> · </span><span class="m-death">13</span><span class="m-dot"> · </span>3</span><span class="m-sub m-r">2,880</span></div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">무명연대장</span><span class="m-num">9<span class="m-dot"> · </span><span class="m-death">14</span><span class="m-dot"> · </span>8</span><span class="m-sub m-r">2,140</span></div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">한밤의저격수</span><span class="m-num">7<span class="m-dot"> · </span><span class="m-death">15</span><span class="m-dot"> · </span>2</span><span class="m-sub m-r">1,690</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display: flex; align-items: baseline; gap: 0.375rem; height: 26px;">
|
||||
<span style="font-size: 0.875rem; font-weight: 700; color: #C4453D;">패</span>
|
||||
<span style="font-size: 0.875rem; font-weight: 600;">상대 팀</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 120px 64px; align-items: center; gap: 0.625rem; height: 28px; border-bottom: 1px solid #E4E8ED;">
|
||||
<span class="d-th">유저</span><span class="d-th m-r">킬 · 데스 · 어시</span><span class="d-th m-r">딜량</span>
|
||||
</div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">헤드샷장인</span><span class="m-num">18<span class="m-dot"> · </span><span class="m-death">12</span><span class="m-dot"> · </span>4</span><span class="m-sub m-r">4,050</span></div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">야간부대장</span><span class="m-num">15<span class="m-dot"> · </span><span class="m-death">13</span><span class="m-dot"> · </span>5</span><span class="m-sub m-r">3,470</span></div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">삼보급단골</span><span class="m-num">11<span class="m-dot"> · </span><span class="m-death">12</span><span class="m-dot"> · </span>7</span><span class="m-sub m-r">2,610</span></div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">웨어하우스지박령</span><span class="m-num">10<span class="m-dot"> · </span><span class="m-death">13</span><span class="m-dot"> · </span>3</span><span class="m-sub m-r">2,350</span></div>
|
||||
<div class="sb-row"><span class="d-clip" style="font-size: 0.875rem; font-weight: 500; color: #5B6169;">조용한총잡이</span><span class="m-num">8<span class="m-dot"> · </span><span class="m-death">13</span><span class="m-dot"> · </span>6</span><span class="m-sub m-r">1,920</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mg mr"><span class="lose">패</span><span class="m-mode">일반전</span><span class="d-clip m-map">웨어하우스</span><span class="m-num">12<span class="m-dot"> · </span><span class="m-death">16</span><span class="m-dot"> · </span>7</span><span class="m-sub m-r">43%</span><span class="m-sub m-r">27%</span><span class="m-sub m-r">2,740</span><span class="m-dim">32분 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">솔로 랭크전</span><span class="d-clip m-map">크로스카운터</span><span class="m-num">24<span class="m-dot"> · </span><span class="m-death">11</span><span class="m-dot"> · </span>3</span><span class="m-sub m-r">69%</span><span class="m-sub m-r">44%</span><span class="m-sub m-r">5,610</span><span class="m-dim">1시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">일반전</span><span class="d-clip m-map">데드엔드</span><span class="m-num">19<span class="m-dot"> · </span><span class="m-death">7</span><span class="m-dot"> · </span>6</span><span class="m-sub m-r">73%</span><span class="m-sub m-r">39%</span><span class="m-sub m-r">4,380</span><span class="m-dim">1시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="lose">패</span><span class="m-mode">일반전</span><span class="d-clip m-map">아지트</span><span class="m-num">25<span class="m-dot"> · </span><span class="m-death">28</span><span class="m-dot"> · </span>5</span><span class="m-sub m-r">47%</span><span class="m-sub m-r">31%</span><span class="m-sub m-r">5,940</span><span class="m-dim">2시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">솔로 랭크전</span><span class="d-clip m-map">제3보급창고</span><span class="m-num">17<span class="m-dot"> · </span><span class="m-death">13</span><span class="m-dot"> · </span>8</span><span class="m-sub m-r">57%</span><span class="m-sub m-r">35%</span><span class="m-sub m-r">3,920</span><span class="m-dim">2시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">클랜전</span><span class="d-clip m-map">웨어하우스</span><span class="m-num">22<span class="m-dot"> · </span><span class="m-death">6</span><span class="m-dot"> · </span>3</span><span class="m-sub m-r">79%</span><span class="m-sub m-r">47%</span><span class="m-sub m-r">5,180</span><span class="m-dim">3시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="lose">패</span><span class="m-mode">솔로 랭크전</span><span class="d-clip m-map">크로스카운터</span><span class="m-num">9<span class="m-dot"> · </span><span class="m-death">14</span><span class="m-dot"> · </span>4</span><span class="m-sub m-r">39%</span><span class="m-sub m-r">29%</span><span class="m-sub m-r">2,150</span><span class="m-dim">3시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">일반전</span><span class="d-clip m-map">데드엔드</span><span class="m-num">16<span class="m-dot"> · </span><span class="m-death">9</span><span class="m-dot"> · </span>11</span><span class="m-sub m-r">64%</span><span class="m-sub m-r">33%</span><span class="m-sub m-r">3,640</span><span class="m-dim">어제 21:40</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">일반전</span><span class="d-clip m-map">제3보급창고</span><span class="m-num">20<span class="m-dot"> · </span><span class="m-death">12</span><span class="m-dot"> · </span>5</span><span class="m-sub m-r">63%</span><span class="m-sub m-r">38%</span><span class="m-sub m-r">4,510</span><span class="m-dim">어제 21:02</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="lose">패</span><span class="m-mode">클랜전</span><span class="d-clip m-map">아지트</span><span class="m-num">11<span class="m-dot"> · </span><span class="m-death">13</span><span class="m-dot"> · </span>2</span><span class="m-sub m-r">46%</span><span class="m-sub m-r">30%</span><span class="m-sub m-r">2,480</span><span class="m-dim">어제 20:24</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">일반전</span><span class="d-clip m-map">웨어하우스</span><span class="m-num">31<span class="m-dot"> · </span><span class="m-death">22</span><span class="m-dot"> · </span>6</span><span class="m-sub m-r">58%</span><span class="m-sub m-r">36%</span><span class="m-sub m-r">7,260</span><span class="m-dim">어제 19:51</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">토너먼트</span><span class="d-clip m-map">크로스카운터</span><span class="m-num">18<span class="m-dot"> · </span><span class="m-death">8</span><span class="m-dot"> · </span>7</span><span class="m-sub m-r">69%</span><span class="m-sub m-r">42%</span><span class="m-sub m-r">4,120</span><span class="m-dim">9월 3일</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr" style="border-bottom: none;"><span class="lose">패</span><span class="m-mode">파티 랭크전</span><span class="d-clip m-map">데드엔드</span><span class="m-num">13<span class="m-dot"> · </span><span class="m-death">15</span><span class="m-dot"> · </span>5</span><span class="m-sub m-r">46%</span><span class="m-sub m-r">28%</span><span class="m-sub m-r">2,980</span><span class="m-dim">9월 3일</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
|
||||
<button style="display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; margin-top: 1.25rem; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; font-family: inherit; font-size: 0.875rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">이전 경기 더 보기</button>
|
||||
</section>
|
||||
</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>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,282 @@
|
||||
<!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-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
/* 갈래 선택 — 하위 탭(알약)과 구분되도록 밑줄형 세그먼트 (홈과 같은 규칙) */
|
||||
/* 화면 갈래 — 페이지 전체를 가르는 탭이라 폭을 채우지 않고 왼쪽에 붙인다 */
|
||||
.ptab { display: flex; gap: 1.5rem; height: 48px; padding: 0 40px; border-bottom: 1px solid #E4E8ED; }
|
||||
.ptab > span { display: flex; align-items: center; font-size: 0.9375rem; font-weight: 500; color: #9BA1A9; box-shadow: inset 0 -2px 0 transparent; }
|
||||
.ptab > .on { font-weight: 700; color: #14161A; box-shadow: inset 0 -2px 0 #14161A; }
|
||||
/* 맵 카드 — 다섯 칸씩 흐르고, 맵이 늘면 줄이 늘어난다 */
|
||||
.mcard { border: 1px solid #EDEFF2; border-radius: 16px; overflow: hidden; background: #FFFFFF; }
|
||||
.mcard-img { display: block; width: 100%; aspect-ratio: 16 / 9; }
|
||||
.mstat { min-width: 0; }
|
||||
.mstat-l { font-size: 0.6875rem; color: #9BA1A9; }
|
||||
.mstat-v { margin-top: 0.1875rem; font-size: 0.875rem; font-weight: 600; }
|
||||
.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; }
|
||||
|
||||
/* 경기 한 줄 — 머리와 본문이 같은 격자를 쓴다 */
|
||||
.mg { display: grid; grid-template-columns: 44px 128px minmax(0, 1fr) 160px 76px 84px 84px 116px 18px; align-items: center; gap: 0.75rem; }
|
||||
.mh { height: 32px; border-bottom: 1px solid #E4E8ED; }
|
||||
.mr { height: 46px; border-bottom: 1px solid #F3F5F7; }
|
||||
.win { font-size: 0.9375rem; font-weight: 700; color: #2A5FCC; }
|
||||
.lose { font-size: 0.9375rem; font-weight: 700; color: #C4453D; }
|
||||
.m-mode { font-size: 0.875rem; font-weight: 600; }
|
||||
.m-map { font-size: 0.875rem; color: #5B6169; }
|
||||
.m-num { font-size: 0.875rem; font-weight: 600; text-align: right; }
|
||||
/* 데스는 색을 달리해 킬·어시와 눈으로 갈린다 */
|
||||
.m-death { color: #C4453D; }
|
||||
.m-dot { color: #C9CDD3; font-weight: 500; }
|
||||
.m-sub { font-size: 0.8125rem; color: #5B6169; }
|
||||
.m-dim { font-size: 0.8125rem; color: #9BA1A9; text-align: right; }
|
||||
.m-r { text-align: right; }
|
||||
|
||||
/* 요약 레일 */
|
||||
.tile { padding: 0.625rem 0.75rem 0.6875rem; border: 1px solid #EDEFF2; border-radius: 12px; background: #FAFBFC; }
|
||||
.tile-l { font-size: 0.75rem; color: #9BA1A9; }
|
||||
.tile-v { margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; }
|
||||
.d-more { font-size: 0.8125rem; font-weight: 600; color: #5B6169; }
|
||||
.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; }
|
||||
.season-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
|
||||
.tier-sm { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 8px; background: #EDEFF2; flex-shrink: 0; }
|
||||
/* 최근 폼 — 승/패 20칸. 왼쪽이 최근이라 아래 경기 목록과 같은 방향을 가리킨다 */
|
||||
.form-c { width: 14px; height: 14px; border-radius: 5px; flex-shrink: 0; }
|
||||
.stat-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px; }
|
||||
/* 크기 막대 — 갈래가 하나뿐이라 색을 나누지 않고 길이로만 읽힌다 */
|
||||
.bar { height: 6px; border-radius: 999px; background: #EDEFF2; }
|
||||
.bar > span { display: block; height: 100%; border-radius: 999px; background: #14161A; }
|
||||
.tier { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #EDEFF2; flex-shrink: 0; }
|
||||
.map-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) 64px 72px 72px 72px 80px; align-items: center; gap: 0.75rem; height: 56px; border-bottom: 1px solid #F3F5F7; }
|
||||
.map-thumb { width: 80px; height: 45px; border-radius: 12px; }
|
||||
.sb-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 64px; align-items: center; gap: 0.625rem; height: 34px; }
|
||||
.who-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px 48px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
|
||||
.mode-row { display: grid; grid-template-columns: minmax(0, 1fr) 42px 64px 40px; align-items: center; gap: 0.625rem; height: 42px; border-bottom: 1px solid #F3F5F7; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="d-root" style="width: 1440px; min-height: 820px; 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: 500; color: #5B6169;">홈</span>
|
||||
<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>
|
||||
<!-- 이 화면에는 히어로 검색창이 없으므로 돋보기를 처음부터 둔다 (홈은 스크롤 뒤에만) -->
|
||||
<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>
|
||||
|
||||
<!-- 프로필 층 — 배경을 넣은 사람은 여기에 사진이 깔린다. 받침이 글자를 지킨다 -->
|
||||
<section style="position: relative; isolation: isolate; overflow: hidden;">
|
||||
<span style="position: absolute; inset: 0; background:
|
||||
radial-gradient(55% 85% at 20% 26%, rgba(255,244,214,0.96) 0%, rgba(255,206,120,0.55) 38%, rgba(255,170,60,0) 72%),
|
||||
radial-gradient(70% 110% at 78% 82%, rgba(126,196,255,0.45) 0%, rgba(126,196,255,0) 62%),
|
||||
linear-gradient(158deg, #8A6A3C 0%, #3A4B58 54%, #0F171E 100%);" aria-hidden="true"></span>
|
||||
<svg viewBox="0 0 1440 200" preserveAspectRatio="none" style="position: absolute; inset: auto 0 0 0; width: 100%; height: 62%; opacity: 0.42;" aria-hidden="true"><path d="M0 200V128h96v-28h84v28h58V84h132v116z" fill="#0B1116"></path><path d="M470 200v-52h74v-30h96v30h52v52z" fill="#0E151B"></path><path d="M792 200v-84h120v-22h74v22h66v84z" fill="#0B1116"></path><path d="M1128 200v-44h92v-34h120v78z" fill="#0E151B"></path></svg>
|
||||
<span style="position: absolute; inset: auto 0 0 0; height: 100%; background: linear-gradient(to top, rgba(6,8,11,0.88) 0%, rgba(6,8,11,0.76) 46%, rgba(6,8,11,0.30) 100%);" aria-hidden="true"></span>
|
||||
<div style="position: relative;">
|
||||
<div style="display: flex; align-items: center; gap: 1.25rem; padding: 34px 40px;">
|
||||
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
|
||||
<div style="min-width: 0;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.625rem;">
|
||||
<h1 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em; color: #FFFFFF;">달빛조각사</h1>
|
||||
<span style="font-size: 0.9375rem; font-weight: 600; color: rgba(255,255,255,0.78);">중령 2호</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4375rem;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">무명연대</span>
|
||||
<span style="width: 1px; height: 12px; background: rgba(255,255,255,0.30);"></span>
|
||||
<span style="font-size: 0.875rem; color: rgba(255,255,255,0.68);">마지막 플레이 2시간 전</span>
|
||||
<span style="width: 1px; height: 12px; background: rgba(255,255,255,0.30);"></span><span style="display: inline-flex; align-items: center; gap: 0.3125rem; height: 24px; padding: 0 0.625rem; border-radius: 999px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.24); font-size: 0.75rem; font-weight: 600; color: #FFFFFF; white-space: nowrap;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="3.4"></circle><path d="M5.5 19.5c0-3.4 2.9-5.6 6.5-5.6s6.5 2.2 6.5 5.6"></path></svg>밤하늘 님이 연동한 계정</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1;"></div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 2rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" 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>
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">랭크전 솔로 · 2026 시즌3</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">다이아 3</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.8125rem; color: rgba(255,255,255,0.78);">1,842 RP</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" 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>
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">랭크전 파티 · 2026 시즌3</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">플래티넘 1</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.8125rem; color: rgba(255,255,255,0.78);">1,455 RP</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span style="width: 1px; height: 48px; background: rgba(255,255,255,0.30); margin: 0 0.5rem;"></span>
|
||||
|
||||
<!-- 오른쪽 컨트롤 — 보조 하나 · 캡션 · 주 동작이 모두 42px 한 줄에 선다.
|
||||
캡션을 갱신 버튼 아래에 매달면 그 덩어리만 66px 이 되어 옆 버튼과 어긋난다. -->
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.125rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.34); background: rgba(255,255,255,0.10); color: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg>프로필 카드 보기</button>
|
||||
<span style="font-size: 0.8125rem; color: rgba(255,255,255,0.68); white-space: nowrap;">12분 전에 불러왔어요</span>
|
||||
<button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #FF6A00; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 11-2.3-5.6"></path><polyline points="20,4 20,8 16,8"></polyline></svg>전적 갱신</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="ptab"><span>종합</span><span class="on">맵</span></div>
|
||||
|
||||
<div style="padding: 36px 40px 56px;">
|
||||
<div style="display: flex; align-items: baseline; margin-bottom: 0.875rem;">
|
||||
<h2 class="d-h2">맵별 성적</h2><div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">전체 경기 · 많이 한 순서</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem;">
|
||||
<div class="mcard">
|
||||
<span class="mcard-img" style="background: #E4E8ED;"></span>
|
||||
<div style="padding: 0.75rem;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem;">
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 700;">제3보급창고</span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">132판</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.5rem;">
|
||||
<span style="font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">64<span style="font-size: 1rem;">%</span></span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">승률</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.8125rem;"><span style="font-weight: 700; color: #2A5FCC;">84승</span> <span style="font-weight: 700; color: #C4453D;">48패</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #F3F5F7;">
|
||||
<div class="mstat"><div class="mstat-l">킬뎃</div><div class="mstat-v">61%</div></div>
|
||||
<div class="mstat"><div class="mstat-l">헤드샷</div><div class="mstat-v">37%</div></div>
|
||||
<div class="mstat"><div class="mstat-l">경기당 딜량</div><div class="mstat-v">4,480</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mcard">
|
||||
<span class="mcard-img" style="background: #EAE6E0;"></span>
|
||||
<div style="padding: 0.75rem;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem;">
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 700;">웨어하우스</span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">96판</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.5rem;">
|
||||
<span style="font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">53<span style="font-size: 1rem;">%</span></span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">승률</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.8125rem;"><span style="font-weight: 700; color: #2A5FCC;">51승</span> <span style="font-weight: 700; color: #C4453D;">45패</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #F3F5F7;">
|
||||
<div class="mstat"><div class="mstat-l">킬뎃</div><div class="mstat-v">56%</div></div>
|
||||
<div class="mstat"><div class="mstat-l">헤드샷</div><div class="mstat-v">34%</div></div>
|
||||
<div class="mstat"><div class="mstat-l">경기당 딜량</div><div class="mstat-v">4,120</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mcard">
|
||||
<span class="mcard-img" style="background: #E2E9E6;"></span>
|
||||
<div style="padding: 0.75rem;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem;">
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 700;">크로스카운터</span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">88판</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.5rem;">
|
||||
<span style="font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">60<span style="font-size: 1rem;">%</span></span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">승률</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.8125rem;"><span style="font-weight: 700; color: #2A5FCC;">53승</span> <span style="font-weight: 700; color: #C4453D;">35패</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #F3F5F7;">
|
||||
<div class="mstat"><div class="mstat-l">킬뎃</div><div class="mstat-v">58%</div></div>
|
||||
<div class="mstat"><div class="mstat-l">헤드샷</div><div class="mstat-v">38%</div></div>
|
||||
<div class="mstat"><div class="mstat-l">경기당 딜량</div><div class="mstat-v">4,310</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mcard">
|
||||
<span class="mcard-img" style="background: #E8E4EC;"></span>
|
||||
<div style="padding: 0.75rem;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem;">
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 700;">데드엔드</span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">61판</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.5rem;">
|
||||
<span style="font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">48<span style="font-size: 1rem;">%</span></span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">승률</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.8125rem;"><span style="font-weight: 700; color: #2A5FCC;">29승</span> <span style="font-weight: 700; color: #C4453D;">32패</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #F3F5F7;">
|
||||
<div class="mstat"><div class="mstat-l">킬뎃</div><div class="mstat-v">53%</div></div>
|
||||
<div class="mstat"><div class="mstat-l">헤드샷</div><div class="mstat-v">32%</div></div>
|
||||
<div class="mstat"><div class="mstat-l">경기당 딜량</div><div class="mstat-v">3,940</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mcard">
|
||||
<span class="mcard-img" style="background: #DDE4EE;"></span>
|
||||
<div style="padding: 0.75rem;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.5rem;">
|
||||
<span class="d-clip" style="flex-grow: 1; min-width: 0; font-size: 0.9375rem; font-weight: 700;">아지트</span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">43판</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.5rem;">
|
||||
<span style="font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">42<span style="font-size: 1rem;">%</span></span>
|
||||
<span style="font-size: 0.75rem; color: #9BA1A9;">승률</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.8125rem;"><span style="font-weight: 700; color: #2A5FCC;">18승</span> <span style="font-weight: 700; color: #C4453D;">25패</span></span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #F3F5F7;">
|
||||
<div class="mstat"><div class="mstat-l">킬뎃</div><div class="mstat-v">48%</div></div>
|
||||
<div class="mstat"><div class="mstat-l">헤드샷</div><div class="mstat-v">30%</div></div>
|
||||
<div class="mstat"><div class="mstat-l">경기당 딜량</div><div class="mstat-v">3,720</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,245 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
/*PRETENDARD*/
|
||||
/* 서린즈 전적 — 데스크톱 1440 · 프로필 헤더 + 좌 요약 레일 / 우 경기 목록 */
|
||||
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-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
/* 갈래 선택 — 하위 탭(알약)과 구분되도록 밑줄형 세그먼트 (홈과 같은 규칙) */
|
||||
/* 화면 갈래 — 페이지 전체를 가르는 탭이라 폭을 채우지 않고 왼쪽에 붙인다 */
|
||||
.ptab { display: flex; gap: 1.5rem; height: 48px; padding: 0 40px; border-bottom: 1px solid #E4E8ED; }
|
||||
.ptab > span { display: flex; align-items: center; font-size: 0.9375rem; font-weight: 500; color: #9BA1A9; box-shadow: inset 0 -2px 0 transparent; }
|
||||
.ptab > .on { font-weight: 700; color: #14161A; box-shadow: inset 0 -2px 0 #14161A; }
|
||||
.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; }
|
||||
|
||||
/* 경기 한 줄 — 머리와 본문이 같은 격자를 쓴다 */
|
||||
.mg { display: grid; grid-template-columns: 44px 128px minmax(0, 1fr) 160px 76px 84px 84px 116px 18px; align-items: center; gap: 0.75rem; }
|
||||
.mh { height: 32px; border-bottom: 1px solid #E4E8ED; }
|
||||
.mr { height: 46px; border-bottom: 1px solid #F3F5F7; }
|
||||
.win { font-size: 0.9375rem; font-weight: 700; color: #2A5FCC; }
|
||||
.lose { font-size: 0.9375rem; font-weight: 700; color: #C4453D; }
|
||||
.m-mode { font-size: 0.875rem; font-weight: 600; }
|
||||
.m-map { font-size: 0.875rem; color: #5B6169; }
|
||||
.m-num { font-size: 0.875rem; font-weight: 600; text-align: right; }
|
||||
/* 데스는 색을 달리해 킬·어시와 눈으로 갈린다 */
|
||||
.m-death { color: #C4453D; }
|
||||
.m-dot { color: #C9CDD3; font-weight: 500; }
|
||||
.m-sub { font-size: 0.8125rem; color: #5B6169; }
|
||||
.m-dim { font-size: 0.8125rem; color: #9BA1A9; text-align: right; }
|
||||
.m-r { text-align: right; }
|
||||
|
||||
/* 요약 레일 */
|
||||
.tile { padding: 0.625rem 0.75rem 0.6875rem; border: 1px solid #EDEFF2; border-radius: 12px; background: #FAFBFC; }
|
||||
.tile-l { font-size: 0.75rem; color: #9BA1A9; }
|
||||
.tile-v { margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; }
|
||||
.d-more { font-size: 0.8125rem; font-weight: 600; color: #5B6169; }
|
||||
.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; }
|
||||
.season-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 52px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
|
||||
.tier-sm { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 8px; background: #EDEFF2; flex-shrink: 0; }
|
||||
/* 최근 폼 — 승/패 20칸. 왼쪽이 최근이라 아래 경기 목록과 같은 방향을 가리킨다 */
|
||||
.form-c { width: 14px; height: 14px; border-radius: 5px; flex-shrink: 0; }
|
||||
.stat-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px; }
|
||||
/* 크기 막대 — 갈래가 하나뿐이라 색을 나누지 않고 길이로만 읽힌다 */
|
||||
.bar { height: 6px; border-radius: 999px; background: #EDEFF2; }
|
||||
.bar > span { display: block; height: 100%; border-radius: 999px; background: #14161A; }
|
||||
.tier { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #EDEFF2; flex-shrink: 0; }
|
||||
.map-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) 64px 72px 72px 72px 80px; align-items: center; gap: 0.75rem; height: 56px; border-bottom: 1px solid #F3F5F7; }
|
||||
.map-thumb { width: 80px; height: 45px; border-radius: 12px; }
|
||||
.sb-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 64px; align-items: center; gap: 0.625rem; height: 34px; }
|
||||
.clan-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px 48px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
|
||||
.who-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px 48px; align-items: center; gap: 0.625rem; height: 38px; border-bottom: 1px solid #F3F5F7; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="d-root" style="width: 1440px; min-height: 900px; background: #FFFFFF; color: #14161A; position: relative; overflow: hidden;">
|
||||
<div style="position: relative;">
|
||||
<header style="border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 1.75rem; height: 72px; padding: 0 40px;">
|
||||
<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; color: #14161A;"><span style="font-weight: 500; color: #5B6169;">홈</span><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>
|
||||
<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>
|
||||
</div>
|
||||
</header>
|
||||
<section style="position: relative; isolation: isolate; overflow: hidden; height: 810px;">
|
||||
<span style="position: absolute; inset: 0; background:
|
||||
radial-gradient(55% 85% at 20% 26%, rgba(255,244,214,0.96) 0%, rgba(255,206,120,0.55) 38%, rgba(255,170,60,0) 72%),
|
||||
radial-gradient(70% 110% at 78% 82%, rgba(126,196,255,0.45) 0%, rgba(126,196,255,0) 62%),
|
||||
linear-gradient(158deg, #8A6A3C 0%, #3A4B58 54%, #0F171E 100%);" aria-hidden="true"></span>
|
||||
<svg viewBox="0 0 1440 200" preserveAspectRatio="none" style="position: absolute; inset: auto 0 0 0; width: 100%; height: 34%; opacity: 0.5;" aria-hidden="true"><path d="M0 200V128h96v-28h84v28h58V84h132v116z" fill="#0B1116"></path><path d="M470 200v-52h74v-30h96v30h52v52z" fill="#0E151B"></path><path d="M792 200v-84h120v-22h74v22h66v84z" fill="#0B1116"></path><path d="M1128 200v-44h92v-34h120v78z" fill="#0E151B"></path></svg>
|
||||
<span style="position: absolute; inset: auto 0 0 0; height: 348px; background: linear-gradient(to top, rgba(6,8,11,0.9) 0%, rgba(6,8,11,0.77) 46%, rgba(6,8,11,0.31) 100%);" aria-hidden="true"></span>
|
||||
<div style="position: absolute; top: 24px; right: 40px; z-index: 2;"><button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.125rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.34); background: rgba(255,255,255,0.10); color: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 21V4"></path><path d="M6 4.5h10l-2 3.5 2 3.5H6"></path></svg>신고</button></div>
|
||||
<div style="position: absolute; inset: auto 0 0 0;">
|
||||
<div style="display: flex; align-items: center; gap: 1.25rem; padding: 34px 40px 22px;">
|
||||
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
|
||||
<div style="min-width: 0;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.625rem;">
|
||||
<h1 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em; color: #FFFFFF;">달빛조각사</h1>
|
||||
<span style="font-size: 0.9375rem; font-weight: 600; color: rgba(255,255,255,0.78);">중령 2호</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4375rem;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">무명연대</span>
|
||||
<span style="width: 1px; height: 12px; background: rgba(255,255,255,0.30);"></span>
|
||||
<span style="font-size: 0.875rem; color: rgba(255,255,255,0.68);">마지막 플레이 2시간 전</span>
|
||||
<span style="width: 1px; height: 12px; background: rgba(255,255,255,0.30);"></span><span style="display: inline-flex; align-items: center; gap: 0.3125rem; height: 24px; padding: 0 0.625rem; border-radius: 999px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.24); font-size: 0.75rem; font-weight: 600; color: #FFFFFF; white-space: nowrap;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="3.4"></circle><path d="M5.5 19.5c0-3.4 2.9-5.6 6.5-5.6s6.5 2.2 6.5 5.6"></path></svg>밤하늘 님이 연동한 계정</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex-grow: 1;"></div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 2rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" 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>
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">랭크전 솔로 · 2026 시즌3</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">다이아 3</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.8125rem; color: rgba(255,255,255,0.78);">1,842 RP</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.18); flex-shrink: 0;"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.88)" 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>
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">랭크전 파티 · 2026 시즌3</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700; color: #FFFFFF;">플래티넘 1</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.8125rem; color: rgba(255,255,255,0.78);">1,455 RP</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span style="width: 1px; height: 48px; background: rgba(255,255,255,0.30); margin: 0 0.5rem;"></span>
|
||||
|
||||
<!-- 오른쪽 컨트롤 — 보조 하나 · 캡션 · 주 동작이 모두 42px 한 줄에 선다.
|
||||
캡션을 갱신 버튼 아래에 매달면 그 덩어리만 66px 이 되어 옆 버튼과 어긋난다. -->
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.125rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.34); background: rgba(255,255,255,0.10); color: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 14l4-4 4 4"></path></svg>카드 그만 보기</button>
|
||||
<span style="font-size: 0.8125rem; color: rgba(255,255,255,0.68); white-space: nowrap;">12분 전에 불러왔어요</span>
|
||||
<button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #FF6A00; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 11-2.3-5.6"></path><polyline points="20,4 20,8 16,8"></polyline></svg>전적 갱신</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 1px; margin: 0 40px; background: rgba(255,255,255,0.20);"></div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 2.5rem; padding: 22px 40px 34px;">
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; font-weight: 500; color: rgba(255,255,255,0.68);">최근 동향</div>
|
||||
<div style="display: flex; align-items: baseline; gap: 0.625rem; margin-top: 0.375rem;">
|
||||
<span style="font-size: 2.125rem; font-weight: 700; letter-spacing: -0.045em; color: #FFFFFF;">60<span style="font-size: 1.125rem;">%</span></span>
|
||||
<span style="font-size: 0.875rem; color: rgba(255,255,255,0.78);">승률 · <span style="font-weight: 700; color: #7BA4FF;">12승</span> <span style="font-weight: 700; color: #F0857C;">8패</span></span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 2px; width: 232px; height: 10px; margin-top: 0.625rem;">
|
||||
<span style="flex-grow: 12; border-radius: 999px; background: #7BA4FF;"></span>
|
||||
<span style="flex-grow: 8; border-radius: 999px; background: #F0857C;"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; flex-grow: 1;">
|
||||
<div style="padding: 0.625rem 0.875rem 0.6875rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; background: rgba(255,255,255,0.12);">
|
||||
<div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">킬뎃</div>
|
||||
<div style="margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; color: #FFFFFF;">59%</div>
|
||||
</div>
|
||||
<div style="padding: 0.625rem 0.875rem 0.6875rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; background: rgba(255,255,255,0.12);">
|
||||
<div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">헤드샷</div>
|
||||
<div style="margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; color: #FFFFFF;">36%</div>
|
||||
</div>
|
||||
<div style="padding: 0.625rem 0.875rem 0.6875rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; background: rgba(255,255,255,0.12);">
|
||||
<div style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">경기당 딜량</div>
|
||||
<div style="margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 700; color: #FFFFFF;">4,270</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 320px; flex-shrink: 0;">
|
||||
<div style="display: flex; align-items: baseline;">
|
||||
<span style="font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,255,0.78);">주무기</span><div style="flex-grow: 1;"></div><span style="font-size: 0.75rem; color: rgba(255,255,255,0.68);">킬뎃</span>
|
||||
</div>
|
||||
<div style="margin-top: 0.375rem;">
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px;">
|
||||
<span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">라플</span>
|
||||
<span style="height: 6px; border-radius: 999px; background: rgba(255,255,255,0.20);"><span style="display: block; width: 61%; height: 100%; border-radius: 999px; background: #FFFFFF;"></span></span>
|
||||
<span style="font-size: 0.875rem; font-weight: 700; text-align: right; color: #FFFFFF;">61%</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px;">
|
||||
<span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">스나</span>
|
||||
<span style="height: 6px; border-radius: 999px; background: rgba(255,255,255,0.20);"><span style="display: block; width: 57%; height: 100%; border-radius: 999px; background: #FFFFFF;"></span></span>
|
||||
<span style="font-size: 0.875rem; font-weight: 700; text-align: right; color: #FFFFFF;">57%</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 0.625rem; height: 34px;">
|
||||
<span class="d-clip" style="font-size: 0.875rem; font-weight: 600; color: #FFFFFF;">특수</span>
|
||||
<span style="height: 6px; border-radius: 999px; background: rgba(255,255,255,0.20);"><span style="display: block; width: 48%; height: 100%; border-radius: 999px; background: #FFFFFF;"></span></span>
|
||||
<span style="font-size: 0.875rem; font-weight: 700; text-align: right; color: #FFFFFF;">48%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<span style="position: absolute; inset: 0; background: rgba(6,8,11,0.55); z-index: 3;" aria-hidden="true"></span>
|
||||
<div style="position: absolute; inset: 0; z-index: 4;">
|
||||
<div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 520px; border-radius: 16px; background: #FFFFFF; box-shadow: 0 24px 60px rgba(6,8,11,0.32); overflow: hidden;">
|
||||
<div style="padding: 26px 28px 20px;">
|
||||
<h2 style="margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.035em;">이 프로필을 신고할게요</h2>
|
||||
<p style="margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.55; color: #5B6169;">어떤 점이 문제인지 알려 주시면 확인한 뒤 조치할게요.<br>신고한 분이 누구인지는 상대에게 알려지지 않아요.</p>
|
||||
</div>
|
||||
|
||||
<div style="padding: 0 28px;">
|
||||
<label style="display: flex; align-items: center; gap: 0.75rem; height: 52px; border-bottom: 1px solid #F3F5F7; cursor: pointer;">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; border: 6px solid #14161A; background: #FFFFFF; flex-shrink: 0;"></span>
|
||||
<span style="font-size: 0.9375rem; font-weight: 600;">부적절한 배경 이미지</span>
|
||||
</label>
|
||||
<label style="display: flex; align-items: center; gap: 0.75rem; height: 52px; border-bottom: 1px solid #F3F5F7; cursor: pointer;">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid #C9CDD3; background: #FFFFFF; flex-shrink: 0;"></span>
|
||||
<span style="font-size: 0.9375rem; font-weight: 500;">욕설이나 혐오 표현이 담긴 닉네임 · 클랜명</span>
|
||||
</label>
|
||||
<label style="display: flex; align-items: center; gap: 0.75rem; height: 52px; border-bottom: 1px solid #F3F5F7; cursor: pointer;">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid #C9CDD3; background: #FFFFFF; flex-shrink: 0;"></span>
|
||||
<span style="font-size: 0.9375rem; font-weight: 500;">다른 사람을 사칭한 프로필</span>
|
||||
</label>
|
||||
<label style="display: flex; align-items: center; gap: 0.75rem; height: 52px; border-bottom: 1px solid #F3F5F7; cursor: pointer;">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid #C9CDD3; background: #FFFFFF; flex-shrink: 0;"></span>
|
||||
<span style="font-size: 0.9375rem; font-weight: 500;">광고나 홍보</span>
|
||||
</label>
|
||||
<label style="display: flex; align-items: center; gap: 0.75rem; height: 52px; border-bottom: 1px solid #F3F5F7; cursor: pointer;">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid #C9CDD3; background: #FFFFFF; flex-shrink: 0;"></span>
|
||||
<span style="font-size: 0.9375rem; font-weight: 500;">그 밖의 문제</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div style="padding: 18px 28px 0;">
|
||||
<div style="padding: 0.875rem 1rem; border: 1px solid #EDEFF2; border-radius: 12px; background: #FAFBFC; font-size: 0.875rem; color: #9BA1A9;">자세한 내용을 적어 주세요 (선택)</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; padding: 20px 28px 24px;">
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">처리 결과는 따로 알려드리지 않아요</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<button style="height: 42px; padding: 0 1.125rem; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;">그만두기</button>
|
||||
<button style="height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #14161A; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.015em; cursor: pointer;">신고 보내기</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,309 @@
|
||||
<!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-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
/* 점선 라벨 — 설명용이고 실제 화면에는 없다 */
|
||||
.an { display: inline-flex; align-items: center; height: 22px; padding: 0 0.5rem; border: 1px dashed #C9CDD3; border-radius: 5px; font-size: 0.6875rem; font-weight: 600; color: #7A828C; letter-spacing: -0.01em; }
|
||||
.frame { border: 1px solid #E4E8ED; border-radius: 16px; overflow: hidden; background: #FFFFFF; }
|
||||
|
||||
.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: 22rem; }
|
||||
.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-i { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: #F2F4F7; }
|
||||
|
||||
.ptab { display: flex; gap: 1.5rem; height: 48px; padding: 0 40px; border-bottom: 1px solid #E4E8ED; }
|
||||
.ptab > span { display: flex; align-items: center; font-size: 0.9375rem; font-weight: 500; color: #9BA1A9; box-shadow: inset 0 -2px 0 transparent; }
|
||||
.ptab > .on { font-weight: 700; color: #14161A; box-shadow: inset 0 -2px 0 #14161A; }
|
||||
.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; }
|
||||
.mg { display: grid; grid-template-columns: 44px 128px minmax(0, 1fr) 160px 76px 84px 84px 116px 18px; align-items: center; gap: 0.75rem; }
|
||||
.mh { height: 32px; border-bottom: 1px solid #E4E8ED; }
|
||||
.mr { height: 46px; border-bottom: 1px solid #F3F5F7; }
|
||||
.win { font-size: 0.9375rem; font-weight: 700; color: #2A5FCC; }
|
||||
.lose { font-size: 0.9375rem; font-weight: 700; color: #C4453D; }
|
||||
.m-mode { font-size: 0.875rem; font-weight: 600; }
|
||||
.m-map { font-size: 0.875rem; color: #5B6169; }
|
||||
.m-num { font-size: 0.875rem; font-weight: 600; text-align: right; }
|
||||
/* 데스는 색을 달리해 킬·어시와 눈으로 갈린다 */
|
||||
.m-death { color: #C4453D; }
|
||||
.m-dot { color: #C9CDD3; font-weight: 500; }
|
||||
.m-sub { font-size: 0.8125rem; color: #5B6169; }
|
||||
.m-dim { font-size: 0.8125rem; color: #9BA1A9; text-align: right; }
|
||||
.m-r { text-align: right; }
|
||||
.tier { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #EDEFF2; flex-shrink: 0; }
|
||||
.brand-btn { display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.25rem; border: none; border-radius: 999px; background: #FF6A00; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.015em; cursor: pointer; }
|
||||
.nav { display: flex; align-items: center; gap: 1.5rem; margin-left: 0.75rem; font-size: 0.9375rem; }
|
||||
.nav > span { font-weight: 500; color: #5B6169; }
|
||||
.nav > .on { font-weight: 700; color: #14161A; }
|
||||
.hdr { display: flex; align-items: center; gap: 1.75rem; height: 72px; padding: 0 40px; border-bottom: 1px solid #EDEFF2; }
|
||||
.ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: #F2F4F7; }
|
||||
.login { 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; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.spin { animation: spin 1s linear infinite; }
|
||||
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div class="d-root" style="width: 1560px; min-height: 3060px; padding: 48px 59px 60px; 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; align-items: center; gap: 0.625rem; margin-top: 2.25rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">① 없는 닉네임</span>
|
||||
<span class="an">비어 있음 · 실패 아님</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">넥슨에 그 닉네임이 없을 때</span>
|
||||
</div>
|
||||
<div class="frame" style="margin-top: 0.75rem;">
|
||||
<div style="width: 1440px;">
|
||||
<header class="hdr">
|
||||
<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 class="nav"><span>홈</span><span class="on">전적 검색</span><span>랭킹</span><span>커뮤니티</span><span>스트리밍</span><span>소식</span><span>이벤트</span></nav>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span class="ico"><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 class="login">로그인</button>
|
||||
</header>
|
||||
|
||||
<div style="padding: 96px 40px 104px;">
|
||||
<div class="st" style="min-height: 268px; max-width: 640px; margin: 0 auto;">
|
||||
<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"><circle cx="11" cy="11" r="6.5"></circle><path d="M19.5 19.5L16 16"></path></svg></span>
|
||||
<p class="st-t" style="font-size: 0.9375rem; color: #14161A; font-weight: 600;">「야간부대장77」 님을 찾지 못했어요</p>
|
||||
<p class="st-s">닉네임 철자와 띄어쓰기를 다시 확인해 주세요. 서든어택에서 닉네임을 바꿨다면 바뀐 닉네임으로 찾을 수 있어요.</p>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem;">
|
||||
<button class="st-b">다시 검색하기</button>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem;">
|
||||
<span style="font-size: 0.875rem; color: #9BA1A9;">이런 닉네임을 찾으셨나요?</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: #E7E3D8;"></span>야간부대장7</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ② 첫 조회 -->
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; margin-top: 2.5rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">② 첫 조회</span>
|
||||
<span class="an">비어 있음</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">유저는 있지만 서린즈가 아직 경기를 가져온 적 없을 때 — 프로필은 넥슨 기본 정보라 바로 나온다</span>
|
||||
</div>
|
||||
<div class="frame" style="margin-top: 0.75rem;">
|
||||
<div style="width: 1440px;">
|
||||
<header class="hdr">
|
||||
<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 class="nav"><span>홈</span><span class="on">전적 검색</span><span>랭킹</span><span>커뮤니티</span><span>스트리밍</span><span>소식</span><span>이벤트</span></nav>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span class="ico"><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 class="login">로그인</button>
|
||||
</header>
|
||||
|
||||
<section style="background: #FAFBFC; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 1.25rem; padding: 26px 40px;">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; background: #EDEFF2; flex-shrink: 0;"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<div style="min-width: 0;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.625rem;">
|
||||
<h2 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">새벽두시</h2>
|
||||
<span style="font-size: 0.9375rem; font-weight: 600; color: #5B6169;">대위 4호</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4375rem;">
|
||||
<span style="font-size: 0.875rem; color: #9BA1A9;">클랜 없음</span>
|
||||
<span style="width: 1px; height: 12px; background: #E4E8ED;"></span>
|
||||
<span style="font-size: 0.875rem; color: #9BA1A9;">마지막 플레이 3일 전</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<span class="tier"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" 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></svg></span>
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: #9BA1A9;">랭크전</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700; color: #9BA1A9;">배치 전</div>
|
||||
</div>
|
||||
</div>
|
||||
<span style="width: 1px; height: 48px; background: #E4E8ED; margin: 0 0.5rem;"></span>
|
||||
<!-- 첫 조회에서는 같은 버튼의 이름만 「전적 불러오기」로 바뀐다. 본문에 같은 버튼을 하나 더 두지 않는다 -->
|
||||
<!-- 첫 조회에는 「프로필 카드 보기」를 두지 않는다 — 아직 아무 값도 없어 열 카드가 없다 -->
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">아직 불러온 적 없어요</span>
|
||||
<button class="brand-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 11-2.3-5.6"></path><polyline points="20,4 20,8 16,8"></polyline></svg>전적 불러오기</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="ptab"><span class="on">종합</span><span>맵</span></div>
|
||||
|
||||
<div style="padding: 36px 40px 56px;">
|
||||
<div class="st" style="min-height: 320px;">
|
||||
<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="M4.5 6.5h15"></path><path d="M4.5 12h15"></path><path d="M4.5 17.5h9"></path></svg></span>
|
||||
<p class="st-t" style="font-size: 0.9375rem; color: #14161A; font-weight: 600;">아직 불러온 경기가 없어요</p>
|
||||
<p class="st-s">위에 있는 전적 불러오기 버튼을 누르면 최근 경기부터 정리해 드릴게요. 처음 한 번은 30초쯤 걸려요.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ③ 갱신 중 -->
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; margin-top: 2.5rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">③ 갱신 중</span>
|
||||
<span class="an">화면 위쪽만 잘라 보여 줌</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">이미 보고 있던 내용은 지우지 않는다 — 버튼만 진행 상태가 되고, 모드 필터는 「전체」로 돌아간다</span>
|
||||
</div>
|
||||
<div class="frame" style="margin-top: 0.75rem;">
|
||||
<div style="width: 1440px;">
|
||||
<section style="background: #FAFBFC; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 1.25rem; padding: 26px 40px;">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; background: #EDEFF2; flex-shrink: 0;"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<div style="min-width: 0;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.625rem;">
|
||||
<h2 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">달빛조각사</h2>
|
||||
<span style="font-size: 0.9375rem; font-weight: 600; color: #5B6169;">중령 2호</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4375rem;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600;">무명연대</span>
|
||||
<span style="width: 1px; height: 12px; background: #E4E8ED;"></span>
|
||||
<span style="font-size: 0.875rem; color: #9BA1A9;">마지막 플레이 2시간 전</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<span class="tier"><svg width="19" height="19" 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>
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: #9BA1A9;">랭크전 솔로 · 2026 시즌3</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700;">다이아 3</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.8125rem; color: #5B6169;">1,842 RP</div>
|
||||
</div>
|
||||
</div>
|
||||
<span style="width: 1px; height: 48px; background: #E4E8ED; margin: 0 0.5rem;"></span>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.125rem; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg>프로필 카드 보기</button>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">새로 올라온 경기를 확인하고 있어요</span>
|
||||
<button class="brand-btn" style="background: #D95A00;"><svg class="spin" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round"><path d="M12 4a8 8 0 018 8"></path><path d="M12 20a8 8 0 01-8-8" opacity="0.45"></path></svg>불러오는 중</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="ptab"><span class="on">종합</span><span>맵</span></div>
|
||||
|
||||
<div style="padding: 36px 40px 32px;">
|
||||
<div style="display: flex; align-items: baseline; margin-bottom: 0.875rem;">
|
||||
<span class="d-h2">경기 기록</span>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">9월 5일 18:08 기준</span>
|
||||
</div>
|
||||
<div class="seg"><span class="on">전체</span><span>랭크전</span><span>클랜전</span><span>토너먼트</span><span>일반전</span></div>
|
||||
<div class="mg mh" style="margin-top: 0.25rem;">
|
||||
<span class="d-th">결과</span><span class="d-th">모드</span><span class="d-th">맵</span>
|
||||
<span class="d-th m-r">킬 · 데스 · 어시</span><span class="d-th m-r">킬뎃</span><span class="d-th m-r">헤드샷</span><span class="d-th m-r">딜량</span>
|
||||
<span class="d-th m-r">시각</span><span></span>
|
||||
</div>
|
||||
<div class="mg mr"><span class="win">승</span><span class="m-mode">일반전</span><span class="d-clip m-map">제3보급창고</span><span class="m-num">21<span class="m-dot"> · </span><span class="m-death">9</span><span class="m-dot"> · </span>4</span><span class="m-sub m-r">70%</span><span class="m-sub m-r">41%</span><span class="m-sub m-r">4,820</span><span class="m-dim">14분 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr"><span class="lose">패</span><span class="m-mode">일반전</span><span class="d-clip m-map">웨어하우스</span><span class="m-num">12<span class="m-dot"> · </span><span class="m-death">16</span><span class="m-dot"> · </span>7</span><span class="m-sub m-r">43%</span><span class="m-sub m-r">27%</span><span class="m-sub m-r">2,740</span><span class="m-dim">32분 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
<div class="mg mr" style="border-bottom: none;"><span class="win">승</span><span class="m-mode">솔로 랭크전</span><span class="d-clip m-map">크로스카운터</span><span class="m-num">24<span class="m-dot"> · </span><span class="m-death">11</span><span class="m-dot"> · </span>3</span><span class="m-sub m-r">69%</span><span class="m-sub m-r">44%</span><span class="m-sub m-r">5,610</span><span class="m-dim">1시간 전</span><span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C9CDD3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ④ 불러오기 실패 -->
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem; margin-top: 2.5rem;">
|
||||
<span style="font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;">④ 경기 기록 실패</span>
|
||||
<span class="an">실패</span>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">프로필은 다른 응답이라 그대로 남는다 — 실패한 쪽만 다시 부른다</span>
|
||||
</div>
|
||||
<div class="frame" style="margin-top: 0.75rem;">
|
||||
<div style="width: 1440px;">
|
||||
<header class="hdr">
|
||||
<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 class="nav"><span>홈</span><span class="on">전적 검색</span><span>랭킹</span><span>커뮤니티</span><span>스트리밍</span><span>소식</span><span>이벤트</span></nav>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<span class="ico"><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 class="login">로그인</button>
|
||||
</header>
|
||||
|
||||
<section style="background: #FAFBFC; border-bottom: 1px solid #EDEFF2;">
|
||||
<div style="display: flex; align-items: center; gap: 1.25rem; padding: 26px 40px;">
|
||||
<span style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; background: #EDEFF2; flex-shrink: 0;"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#7A828C" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10l7 4 7-4"></path><path d="M5 15l7 4 7-4"></path></svg></span>
|
||||
<div style="min-width: 0;">
|
||||
<div style="display: flex; align-items: baseline; gap: 0.625rem;">
|
||||
<h2 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">달빛조각사</h2>
|
||||
<span style="font-size: 0.9375rem; font-weight: 600; color: #5B6169;">중령 2호</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4375rem;">
|
||||
<span style="font-size: 0.875rem; font-weight: 600;">무명연대</span>
|
||||
<span style="width: 1px; height: 12px; background: #E4E8ED;"></span>
|
||||
<span style="font-size: 0.875rem; color: #9BA1A9;">마지막 플레이 2시간 전</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
<div style="display: flex; align-items: center; gap: 0.625rem;">
|
||||
<span class="tier"><svg width="19" height="19" 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>
|
||||
<div>
|
||||
<div style="font-size: 0.75rem; color: #9BA1A9;">랭크전 솔로 · 2026 시즌3</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700;">다이아 3</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.8125rem; color: #5B6169;">1,842 RP</div>
|
||||
</div>
|
||||
</div>
|
||||
<span style="width: 1px; height: 48px; background: #E4E8ED; margin: 0 0.5rem;"></span>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<button style="display: inline-flex; align-items: center; gap: 0.4375rem; height: 42px; padding: 0 1.125rem; border: 1px solid #E4E8ED; border-radius: 999px; background: #FFFFFF; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #14161A; letter-spacing: -0.015em; cursor: pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#14161A" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10l4 4 4-4"></path></svg>프로필 카드 보기</button>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">12분 전에 불러왔어요</span>
|
||||
<button class="brand-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 11-2.3-5.6"></path><polyline points="20,4 20,8 16,8"></polyline></svg>전적 갱신</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="ptab"><span class="on">종합</span><span>맵</span></div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 2rem; padding: 36px 40px 56px;">
|
||||
<div>
|
||||
<div style="display: flex; align-items: baseline;">
|
||||
<span class="d-h2">최근 동향</span>
|
||||
</div>
|
||||
<div class="st" style="min-height: 300px; margin-top: 0.875rem;">
|
||||
<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 16h.01"></path></svg></span>
|
||||
<p class="st-t">일시적인 오류가 생겼어요.<br>잠시 후 다시 시도해 주세요.</p>
|
||||
<button class="st-b">다시 시도</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display: flex; align-items: baseline; margin-bottom: 0.875rem;">
|
||||
<span class="d-h2">경기 기록</span>
|
||||
</div>
|
||||
<div class="seg"><span class="on">전체</span><span>랭크전</span><span>클랜전</span><span>토너먼트</span><span>일반전</span></div>
|
||||
<div class="st" style="min-height: 288px; margin-top: 1rem;">
|
||||
<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 16h.01"></path></svg></span>
|
||||
<p class="st-t">일시적인 오류가 생겼어요.<br>잠시 후 다시 시도해 주세요.</p>
|
||||
<button class="st-b">다시 시도</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</x-dc>
|
||||
</body>
|
||||
</html>
|
||||
@@ -68,7 +68,7 @@
|
||||
</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>
|
||||
<p class="st-t">일시적인 오류가 생겼어요.<br>잠시 후 다시 시도해 주세요.</p>
|
||||
<button class="st-b">다시 시도</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -273,10 +273,14 @@
|
||||
<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 style="display: flex; align-items: center; height: 40px; padding: 0 0.75rem; border-radius: 10px; background: #2A5FCC;">
|
||||
<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;">#2A5FCC</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>
|
||||
<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. 상승·하락·승리는 의미가 정해진 색이라 다른 뜻으로 쓰지 않습니다. 전적 화면의 승은 #2A5FCC, 패는 하락과 같은 #C4453D 를 씁니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 2.5rem;">
|
||||
|
||||
@@ -365,7 +365,7 @@
|
||||
<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>
|
||||
<p class="st-t">일시적인 오류가 생겼어요.<br>잠시 후 다시 시도해 주세요.</p>
|
||||
<button class="st-b">다시 시도</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -431,7 +431,7 @@
|
||||
<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>
|
||||
<p class="st-t">일시적인 오류가 생겼어요.<br>잠시 후 다시 시도해 주세요.</p>
|
||||
<button class="st-b">다시 시도</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -21,7 +21,7 @@ export class HttpExceptionFilter implements ExceptionFilter {
|
||||
let status: HttpStatus = HttpStatus.INTERNAL_SERVER_ERROR;
|
||||
let code = 'SYS_001';
|
||||
let message =
|
||||
'일시적인 시스템 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.';
|
||||
'일시적인 오류가 생겼어요. 잠시 후 다시 시도해 주세요.';
|
||||
|
||||
if (exception instanceof HttpException) {
|
||||
status = exception.getStatus();
|
||||
@@ -29,23 +29,23 @@ export class HttpExceptionFilter implements ExceptionFilter {
|
||||
|
||||
if (status === HttpStatus.UNAUTHORIZED) {
|
||||
code = 'AUTH_001';
|
||||
message = '로그인이 필요한 서비스입니다. 로그인 후 이용해 주세요.';
|
||||
message = '로그인이 필요한 기능이에요. 로그인 후 이용해 주세요.';
|
||||
} else if (status === HttpStatus.FORBIDDEN) {
|
||||
code = 'AUTH_003';
|
||||
message = '해당 메뉴나 기능에 접근할 수 있는 권한이 없습니다.';
|
||||
message = '이 메뉴나 기능을 이용할 권한이 없어요.';
|
||||
} else if (status === HttpStatus.NOT_FOUND) {
|
||||
code = 'RES_001';
|
||||
message = '요청하신 정보나 페이지를 찾을 수 없습니다.';
|
||||
message = '찾으시는 정보나 페이지가 없어요.';
|
||||
} else if (
|
||||
status === HttpStatus.BAD_REQUEST ||
|
||||
status === HttpStatus.UNPROCESSABLE_ENTITY
|
||||
) {
|
||||
code = 'VAL_001';
|
||||
message =
|
||||
'입력하신 정보를 다시 확인해 주세요. (필수값 누락 또는 형식 오류)';
|
||||
'입력하신 내용을 다시 확인해 주세요. 빠진 항목이 있거나 형식이 맞지 않아요.';
|
||||
} else {
|
||||
code = 'BIZ_001';
|
||||
message = '요청하신 작업을 완료하지 못했습니다. 다시 시도해 주세요.';
|
||||
message = '요청하신 작업을 끝내지 못했어요. 다시 시도해 주세요.';
|
||||
|
||||
// 비즈니스 예외에서는 사용자에게 보일 메시지를 재정의 가능
|
||||
if (
|
||||
|
||||
+1
-1
@@ -71,7 +71,7 @@ async function bootstrap() {
|
||||
error: {
|
||||
code: 'SYS_001',
|
||||
message:
|
||||
'일시적인 시스템 오류가 발생했습니다. (요청 한도 초과) 잠시 후 다시 시도해 주세요.', // 글로벌 통합 에러 포맷
|
||||
'요청이 너무 많아요. 잠시 후 다시 시도해 주세요.', // 글로벌 통합 에러 포맷
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
class ErrorLexicon {
|
||||
static const Map<String, String> codes = {
|
||||
'SYS_001': '일시적인 시스템 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.',
|
||||
'AUTH_001': '로그인이 필요한 서비스입니다. 로그인 후 이용해 주세요.',
|
||||
'AUTH_002': '안전을 위해 로그아웃 되었습니다. 다시 로그인해 주세요.',
|
||||
'AUTH_003': '해당 메뉴나 기능에 접근할 수 있는 권한이 없습니다.',
|
||||
'VAL_001': '입력하신 정보를 다시 확인해 주세요. (필수값 누락 또는 형식 오류)',
|
||||
'RES_001': '요청하신 정보나 페이지를 찾을 수 없습니다.',
|
||||
'BIZ_001': '요청하신 작업을 완료하지 못했습니다. 다시 시도해 주세요.',
|
||||
'SYS_001': '일시적인 오류가 생겼어요. 잠시 후 다시 시도해 주세요.',
|
||||
'AUTH_001': '로그인이 필요한 기능이에요. 로그인 후 이용해 주세요.',
|
||||
'AUTH_002': '안전을 위해 로그아웃했어요. 다시 로그인해 주세요.',
|
||||
'AUTH_003': '이 메뉴나 기능을 이용할 권한이 없어요.',
|
||||
'VAL_001': '입력하신 내용을 다시 확인해 주세요. 빠진 항목이 있거나 형식이 맞지 않아요.',
|
||||
'RES_001': '찾으시는 정보나 페이지가 없어요.',
|
||||
'BIZ_001': '요청하신 작업을 끝내지 못했어요. 다시 시도해 주세요.',
|
||||
};
|
||||
|
||||
static String getMessage(String code) {
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
// 섹션 본문의 상태 분기 — 로딩(스켈레톤) · 실패 · 비어 있음 · 정상.
|
||||
// 뿌리가 상태마다 갈리는 프래그먼트라 이 컴포넌트에 class 를 넘겨도 DOM 에 닿지 않는다.
|
||||
// 여백·테두리는 부르는 쪽에서 감싸개 요소에 준다.
|
||||
// 섹션마다 이 네 상태를 모두 가진다. 한 섹션이 실패해도 그 섹션만 다시 부른다.
|
||||
import SectionStateBlock from '@/components/common/SectionStateBlock.vue'
|
||||
import type { IconName } from '@/components/common/app-icon'
|
||||
@@ -19,7 +21,7 @@ interface Props {
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
errorMessage: '일시적인 시스템 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.',
|
||||
errorMessage: '일시적인 오류가 생겼어요. 잠시 후 다시 시도해 주세요.',
|
||||
minHeight: '15rem',
|
||||
emptyDescription: undefined,
|
||||
emptyLinkLabel: undefined,
|
||||
|
||||
@@ -39,84 +39,85 @@ const selectedTab = ref('popular')
|
||||
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"
|
||||
<div class="community__body">
|
||||
<SectionBoundary
|
||||
: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)'"
|
||||
/>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -37,46 +37,47 @@ const selectedTab = ref('notice')
|
||||
: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="#"
|
||||
<div class="news__body">
|
||||
<SectionBoundary
|
||||
:status="resource.status.value"
|
||||
:error-message="resource.errorMessage.value"
|
||||
empty-title="등록된 소식이 없어요"
|
||||
empty-icon="document"
|
||||
min-height="18rem"
|
||||
@retry="resource.reload"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -6,24 +6,24 @@ describe('resolveErrorMessage', () => {
|
||||
it('서버가 내려준 에러 코드의 문장을 쓴다', () => {
|
||||
const error = { response: { status: 400, data: { success: false, error: { code: 'AUTH_003', message: '' } } } }
|
||||
|
||||
expect(resolveErrorMessage(error)).toBe('해당 메뉴나 기능에 접근할 수 있는 권한이 없습니다.')
|
||||
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 = '일시적인 시스템 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.'
|
||||
const fallbackMessage = '일시적인 오류가 생겼어요. 잠시 후 다시 시도해 주세요.'
|
||||
|
||||
expect(resolveErrorMessage(unknownCode)).toBe(fallbackMessage)
|
||||
expect(resolveErrorMessage(new Error('네트워크 끊김'))).toBe(fallbackMessage)
|
||||
|
||||
@@ -25,13 +25,13 @@ declare module 'axios' {
|
||||
// 에러 코드 사전 — CLAUDE.md / 백엔드 HttpExceptionFilter 와 1:1 매핑
|
||||
// SYS_001 은 폴백 메시지로 항상 존재함을 타입으로 보장 (noUncheckedIndexedAccess 대응)
|
||||
const ErrorCodeLexicon: Record<string, string> & { SYS_001: string } = {
|
||||
SYS_001: '일시적인 시스템 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.',
|
||||
AUTH_001: '로그인이 필요한 서비스입니다. 로그인 후 이용해 주세요.',
|
||||
AUTH_002: '안전을 위해 로그아웃 되었습니다. 다시 로그인해 주세요.',
|
||||
AUTH_003: '해당 메뉴나 기능에 접근할 수 있는 권한이 없습니다.',
|
||||
VAL_001: '입력하신 정보를 다시 확인해 주세요. (필수값 누락 또는 형식 오류)',
|
||||
RES_001: '요청하신 정보나 페이지를 찾을 수 없습니다.',
|
||||
BIZ_001: '요청하신 작업을 완료하지 못했습니다. 다시 시도해 주세요.',
|
||||
SYS_001: '일시적인 오류가 생겼어요. 잠시 후 다시 시도해 주세요.',
|
||||
AUTH_001: '로그인이 필요한 기능이에요. 로그인 후 이용해 주세요.',
|
||||
AUTH_002: '안전을 위해 로그아웃했어요. 다시 로그인해 주세요.',
|
||||
AUTH_003: '이 메뉴나 기능을 이용할 권한이 없어요.',
|
||||
VAL_001: '입력하신 내용을 다시 확인해 주세요. 빠진 항목이 있거나 형식이 맞지 않아요.',
|
||||
RES_001: '찾으시는 정보나 페이지가 없어요.',
|
||||
BIZ_001: '요청하신 작업을 끝내지 못했어요. 다시 시도해 주세요.',
|
||||
}
|
||||
|
||||
// 사용자 노출용 알림 — Toast 라이브러리 도입 시 이 함수만 교체하면 됨
|
||||
|
||||
@@ -35,7 +35,7 @@ describe('useSectionResource', () => {
|
||||
await resource.load()
|
||||
|
||||
expect(resource.status.value).toBe('error')
|
||||
expect(resource.errorMessage.value).toBe('요청하신 정보나 페이지를 찾을 수 없습니다.')
|
||||
expect(resource.errorMessage.value).toBe('찾으시는 정보나 페이지가 없어요.')
|
||||
expect(resource.data.value).toBeNull()
|
||||
})
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
role="alert"
|
||||
>
|
||||
<h1>404</h1>
|
||||
<p>요청하신 정보나 페이지를 찾을 수 없습니다.</p>
|
||||
<p>찾으시는 정보나 페이지가 없어요.</p>
|
||||
<RouterLink to="/">
|
||||
홈으로 돌아가기
|
||||
</RouterLink>
|
||||
|
||||
Reference in New Issue
Block a user