fix: 중국어선감시 지도 멈춤 해결 — 마커 수 제한 + 이벤트 차단 CSS, 탑메뉴 불법어선 제거

This commit is contained in:
Nan Kyung Lee 2026-03-20 08:54:32 +09:00
부모 a467540dda
커밋 d000807909
3개의 변경된 파일25개의 추가작업 그리고 30개의 파일을 삭제

파일 보기

@ -1881,6 +1881,11 @@
border-top-color: rgba(10, 10, 26, 0.96) !important;
}
/* 중국어선 오버레이 마커 — 이벤트 차단 */
.maplibregl-marker:has(.cn-fishing-no-events) {
pointer-events: none;
}
.gl-popup .maplibregl-popup-close-button,
.event-popup .maplibregl-popup-close-button {
color: #aaa !important;

파일 보기

@ -253,15 +253,6 @@ function AuthenticatedApp({ user, onLogout }: AuthenticatedAppProps) {
{dashboardTab === 'korea' && (
<div className="mode-toggle">
<button
type="button"
className={`mode-btn ${koreaFiltersResult.filters.illegalFishing ? 'active live' : ''}`}
onClick={() => koreaFiltersResult.setFilter('illegalFishing', !koreaFiltersResult.filters.illegalFishing)}
title={t('filters.illegalFishing')}
>
<span className="text-[11px]">🚫🐟</span>
{t('filters.illegalFishing')}
</button>
<button
type="button"
className={`mode-btn ${koreaFiltersResult.filters.illegalTransship ? 'active live' : ''}`}

파일 보기

@ -194,32 +194,33 @@ export function ChineseFishingOverlay({ ships }: Props) {
</Source>
)}
{/* 어구/어망 위치 마커 (모선 연결된 것) */}
{gearLinks.map(link => (
{/* 어구/어망 위치 마커 (모선 연결된 것) — 최대 50개 */}
{gearLinks.slice(0, 50).map(link => (
<Marker key={`gearlink-${link.gear.mmsi}`} longitude={link.gear.lng} latitude={link.gear.lat} anchor="center">
<div style={{ filter: 'drop-shadow(0 0 3px #f9731688)', pointerEvents: 'none' }}>
<div className="cn-fishing-no-events">
<div style={{ filter: 'drop-shadow(0 0 3px #f9731688)' }}>
<FishingNetIcon color="#f97316" size={10} />
</div>
<div style={{
fontSize: 5, color: '#f97316', textAlign: 'center',
textShadow: '0 0 2px #000', fontWeight: 700, marginTop: -1,
whiteSpace: 'nowrap', pointerEvents: 'none',
whiteSpace: 'nowrap',
}}>
{link.parentName}
</div>
</div>
</Marker>
))}
{/* 조업 중 어선 — 어구 아이콘 */}
{operating.map(({ ship, analysis }) => {
{/* 조업 중 어선 — 어구 아이콘 — 최대 80개 */}
{operating.slice(0, 80).map(({ ship, analysis }) => {
const meta = GEAR_LABELS[analysis.gearType];
return (
<Marker key={`gear-${ship.mmsi}`} longitude={ship.lng} latitude={ship.lat} anchor="bottom">
<div style={{
<div className="cn-fishing-no-events" style={{
marginBottom: 8,
filter: `drop-shadow(0 0 3px ${meta?.color || '#f97316'}88)`,
opacity: 0.85,
pointerEvents: 'none',
}}>
<GearIcon gear={analysis.gearType} size={12} />
</div>
@ -227,10 +228,10 @@ export function ChineseFishingOverlay({ ships }: Props) {
);
})}
{/* 본선/부속선/어선 역할 라벨 */}
{analyzed.filter(a => a.role.role).map(({ ship, role }) => (
{/* 본선/부속선/어선 역할 라벨 — 최대 100개 */}
{analyzed.filter(a => a.role.role).slice(0, 100).map(({ ship, role }) => (
<Marker key={`role-${ship.mmsi}`} longitude={ship.lng} latitude={ship.lat} anchor="top">
<div style={{
<div className="cn-fishing-no-events" style={{
marginTop: 6,
fontSize: 5,
fontWeight: 700,
@ -238,7 +239,6 @@ export function ChineseFishingOverlay({ ships }: Props) {
textShadow: '0 0 2px #000, 0 0 2px #000',
textAlign: 'center',
whiteSpace: 'nowrap',
pointerEvents: 'none',
}}>
{role.roleKo}
</div>
@ -248,7 +248,7 @@ export function ChineseFishingOverlay({ ships }: Props) {
{/* 운반선 라벨 */}
{carriers.map(s => (
<Marker key={`carrier-${s.mmsi}`} longitude={s.lng} latitude={s.lat} anchor="top">
<div style={{
<div className="cn-fishing-no-events" style={{
marginTop: 6,
fontSize: 5,
fontWeight: 700,
@ -256,7 +256,6 @@ export function ChineseFishingOverlay({ ships }: Props) {
textShadow: '0 0 2px #000, 0 0 2px #000',
textAlign: 'center',
whiteSpace: 'nowrap',
pointerEvents: 'none',
}}>
</div>