Просмотр исходного кода

fix(home): 세계지도 key 중복 경고 수정 + 기본 전체표시/주요국16/그리드 스크롤

- COUNTRY_PATHS key를 id(일부 undefined로 중복) → index로 변경 (React key 경고 해소)
- 기본 확대 1.5→1 (첫 렌더 시 아프리카 확대 대신 세계 전체 표시)
- 주요국(major) 16개국 지정: 한/일/중/미/호/홍콩/대만/인도/이탈리아/독/영/프/남아공/캐/멕/브라질
- world-map__grid 세로 스크롤(overflow-y:auto, max-height) + 헤더 고정(sticky thead)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
KIM-JINO5 2 недель назад
Родитель
Сommit
03788d35a8

+ 3 - 3
app/(main)/_components/WorldMarketMap.tsx

@@ -26,7 +26,7 @@ const VW = 1000;
 const VH = 500;
 const MIN_K = 1;
 const MAX_K = 6;
-const DEFAULT_K = 1.5; // 기본 살짝 확대
+const DEFAULT_K = 1; // 기본: 전체 세계지도 표시 (확대는 휠/드래그/지역탭)
 const PIN_H = 15; // 핀 막대 높이 — 머리를 지점 위로 띄워 겹침 완화(map-pin)
 
 type GeoFeature = Feature<Geometry>;
@@ -296,8 +296,8 @@ export default function WorldMarketMap({ rows }: Props)
 						{/* 팬/줌 그룹 — 육지만. 핀/라벨은 변환 밖에서 화면좌표로 그려 확대 시 크기 고정 + 라벨 겹침 회피 */}
 						<g transform={`translate(${view.x} ${view.y}) scale(${view.k})`}>
 							<g className='world-map__land'>
-								{COUNTRY_PATHS.map((c) => (
-									<path key={c.id} d={c.d} />
+								{COUNTRY_PATHS.map((c, i) => (
+									<path key={i} d={c.d} />
 								))}
 							</g>
 						</g>

+ 7 - 1
app/(main)/_components/world-map.scss

@@ -336,9 +336,11 @@
 		}
 	}
 
-	// 데이터 그리드
+	// 데이터 그리드 (세로 스크롤 — 행 많으면 스크롤)
 	&__grid-wrap {
 		overflow-x: auto;
+		overflow-y: auto;
+		max-height: 460px;
 	}
 
 	&__grid {
@@ -348,13 +350,17 @@
 		font-variant-numeric: tabular-nums;
 
 		th {
+			position: sticky;
+			top: 0;
 			padding: var(--sp-3);
 			text-align: right;
 			font-size: var(--fs-xs);
 			font-weight: 600;
 			color: var(--text-muted);
+			background: var(--bg-elevated);
 			border-bottom: 1px solid var(--border-default);
 			white-space: nowrap;
+			z-index: 1;
 		}
 
 		td {

+ 13 - 12
types/worldIndex.ts

@@ -42,33 +42,34 @@ export interface ExchangeGeo {
 }
 
 export const EXCHANGE_GEO: Record<string, ExchangeGeo> = {
+	// 주요국(major) — 사용자 지정 16개국 (2026-07-09)
 	US: { lat: 40.7, lng: -74.0, label: '미국', region: 'america', major: true },
 	KR: { lat: 37.5, lng: 127.0, label: '한국', region: 'asia', major: true },
 	JP: { lat: 35.7, lng: 139.7, label: '일본', region: 'asia', major: true },
 	CN: { lat: 31.2, lng: 121.5, label: '중국', region: 'asia', major: true },
-	HK: { lat: 22.3, lng: 114.2, label: '홍콩', region: 'asia' },
-	TW: { lat: 25.0, lng: 121.6, label: '대만', region: 'asia' },
-	SG: { lat: 1.35, lng: 103.8, label: '싱가포르', region: 'asia' },
-	IN: { lat: 19.1, lng: 72.9, label: '인도', region: 'asia' },
-	AU: { lat: -33.9, lng: 151.2, label: '호주', region: 'asia' },
+	HK: { lat: 22.3, lng: 114.2, label: '홍콩', region: 'asia', major: true },
+	TW: { lat: 25.0, lng: 121.6, label: '대만', region: 'asia', major: true },
+	IN: { lat: 19.1, lng: 72.9, label: '인도', region: 'asia', major: true },
+	AU: { lat: -33.9, lng: 151.2, label: '호주', region: 'asia', major: true },
 	GB: { lat: 51.5, lng: -0.1, label: '영국', region: 'europe', major: true },
 	DE: { lat: 50.1, lng: 8.7, label: '독일', region: 'europe', major: true },
-	FR: { lat: 48.9, lng: 2.3, label: '프랑스', region: 'europe' },
-	CA: { lat: 43.7, lng: -79.4, label: '캐나다', region: 'america' },
-	BR: { lat: -23.5, lng: -46.6, label: '브라질', region: 'america' },
-	// 이하 확장(백엔드 WorldIndex Items 구성 시 활성) — 지역 탭 커버리지 대비
+	FR: { lat: 48.9, lng: 2.3, label: '프랑스', region: 'europe', major: true },
+	IT: { lat: 45.46, lng: 9.19, label: '이탈리아', region: 'europe', major: true },
+	CA: { lat: 43.7, lng: -79.4, label: '캐나다', region: 'america', major: true },
+	MX: { lat: 19.43, lng: -99.13, label: '멕시코', region: 'america', major: true },
+	BR: { lat: -23.5, lng: -46.6, label: '브라질', region: 'america', major: true },
+	ZA: { lat: -26.20, lng: 28.05, label: '남아공', region: 'mideast', major: true },
+	// 그 외(지역 탭에서 노출, 주요국 아님)
+	SG: { lat: 1.35, lng: 103.8, label: '싱가포르', region: 'asia' },
 	ID: { lat: -6.2, lng: 106.85, label: '인도네시아', region: 'asia' },
 	TH: { lat: 13.75, lng: 100.52, label: '태국', region: 'asia' },
 	MY: { lat: 3.14, lng: 101.69, label: '말레이시아', region: 'asia' },
 	VN: { lat: 10.82, lng: 106.63, label: '베트남', region: 'asia' },
-	IT: { lat: 45.46, lng: 9.19, label: '이탈리아', region: 'europe' },
 	ES: { lat: 40.42, lng: -3.70, label: '스페인', region: 'europe' },
 	CH: { lat: 47.37, lng: 8.54, label: '스위스', region: 'europe' },
 	NL: { lat: 52.37, lng: 4.90, label: '네덜란드', region: 'europe' },
 	SE: { lat: 59.33, lng: 18.07, label: '스웨덴', region: 'europe' },
-	MX: { lat: 19.43, lng: -99.13, label: '멕시코', region: 'america' },
 	SA: { lat: 24.71, lng: 46.68, label: '사우디', region: 'mideast' },
-	ZA: { lat: -26.20, lng: 28.05, label: '남아공', region: 'mideast' },
 	AE: { lat: 25.20, lng: 55.27, label: 'UAE', region: 'mideast' }
 };