Compare commits
4 Commits
e5de79a669
...
d27184c13b
| Author | SHA1 | Date | |
|---|---|---|---|
 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{|}‘’“”『』〈〉《》±×÷≤≥→←↑↓★☆※℃％㎏㎜㎝
|
||||
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,313 @@
|
||||
<!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; }
|
||||
.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; }
|
||||
.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; }
|
||||
|
||||
/* 스켈레톤 — 홈과 같은 한 덩어리(.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: 2100px; 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>
|
||||
|
||||
<!-- 갱신 버튼은 회색으로 두지 않는다. 기다리는 동안에도 누를 수 있어야 한다 -->
|
||||
<div style="display: flex; flex-direction: column; align-items: flex-end; gap: 0.4375rem;">
|
||||
<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>
|
||||
<span class="s sb-s" style="width: 104px;"></span>
|
||||
</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>
|
||||
<h2 class="d-h2">랭크·클랜 성적</h2>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 42px 64px 40px; 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></span><span class="d-th m-r">승률</span>
|
||||
</div>
|
||||
<div class="mode-row"><span class="s sb" style="width: 76%;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s" style="height: 6px; border-radius: 999px;"></span><span class="s sb sr" style="width: 32px;"></span></div>
|
||||
<div class="mode-row"><span class="s sb" style="width: 72%;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s" style="height: 6px; border-radius: 999px;"></span><span class="s sb sr" style="width: 32px;"></span></div>
|
||||
<div class="mode-row" style="border-bottom: none;"><span class="s sb" style="width: 58%;"></span><span class="s sb-s sr" style="width: 30px;"></span><span class="s" style="height: 6px; border-radius: 999px;"></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,384 @@
|
||||
<!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; }
|
||||
.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: 2100px; 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 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;">
|
||||
<h1 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">달빛조각사</h1>
|
||||
<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: 2rem;">
|
||||
<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>
|
||||
<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;">플래티넘 1</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.8125rem; color: #5B6169;">1,455 RP</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span style="width: 1px; height: 48px; background: #E4E8ED; margin: 0 0.5rem;"></span>
|
||||
|
||||
<div style="display: flex; flex-direction: column; align-items: flex-end; gap: 0.4375rem;">
|
||||
<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>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">12분 전에 불러왔어요</span>
|
||||
</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>
|
||||
<h2 class="d-h2">랭크·클랜 성적</h2>
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) 42px 64px 40px; 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></span><span class="d-th m-r">승률</span>
|
||||
</div>
|
||||
<div class="mode-row">
|
||||
<span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">솔로 랭크전</span>
|
||||
<span class="m-sub m-r">5판</span>
|
||||
<span class="bar"><span style="width: 60%;"></span></span>
|
||||
<span style="font-size: 0.875rem; font-weight: 700; text-align: right;">60%</span>
|
||||
</div>
|
||||
<div class="mode-row">
|
||||
<span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">파티 랭크전</span>
|
||||
<span class="m-sub m-r">3판</span>
|
||||
<span class="bar"><span style="width: 33%;"></span></span>
|
||||
<span style="font-size: 0.875rem; font-weight: 700; text-align: right;">33%</span>
|
||||
</div>
|
||||
<div class="mode-row" style="border-bottom: none;">
|
||||
<span class="d-clip" style="font-size: 0.875rem; font-weight: 600;">클랜전</span>
|
||||
<span class="m-sub m-r">4판</span>
|
||||
<span class="bar"><span style="width: 50%;"></span></span>
|
||||
<span style="font-size: 0.875rem; font-weight: 700; text-align: right;">50%</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,270 @@
|
||||
<!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="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;">
|
||||
<h1 style="margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;">달빛조각사</h1>
|
||||
<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: 2rem;">
|
||||
<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>
|
||||
<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;">플래티넘 1</div>
|
||||
<div style="margin-top: 0.125rem; font-size: 0.8125rem; color: #5B6169;">1,455 RP</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span style="width: 1px; height: 48px; background: #E4E8ED; margin: 0 0.5rem;"></span>
|
||||
|
||||
<div style="display: flex; flex-direction: column; align-items: flex-end; gap: 0.4375rem;">
|
||||
<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>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">12분 전에 불러왔어요</span>
|
||||
</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,306 @@
|
||||
<!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; flex-direction: column; align-items: flex-end; gap: 0.4375rem;">
|
||||
<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>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">아직 불러온 적 없어요</span>
|
||||
</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; flex-direction: column; align-items: flex-end; gap: 0.4375rem;">
|
||||
<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>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">새로 올라온 경기를 확인하고 있어요</span>
|
||||
</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; flex-direction: column; align-items: flex-end; gap: 0.4375rem;">
|
||||
<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>
|
||||
<span style="font-size: 0.8125rem; color: #9BA1A9;">12분 전에 불러왔어요</span>
|
||||
</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