Trip-Linker 개발일지 3 - 프론트 리팩토링 — MOCK 위치, go() 렌더러, CSS 버그

프론트 리팩토링 — MOCK 위치, go() 렌더러, CSS 버그

📋 한줄 요약

프론트엔드 3개 파일의 코드 품질 개선, MOCK 데이터 위치 정리, CSS 버그 픽스.

---

🎯 왜 만들었나

go() 실행 후 후기/장소 데이터가 렌더링되지 않는 문제가 있었다.

MOCK 데이터 선언 위치가 파일 맨 위에 있어 로드 실패 시 스크립트 전체가 먹통되는 문제도 있었다.

---

📁 작업 순서 (파일별)

1. app_main.js

📦 src/main/resources/static

삭제: 파일 맨 위 _md MOCK 선언

// 파일 시작 부분에 있던 하드코딩 데이터 제거
const _md = { jeju: {...}, seorak: {...}, ... };

이동: _md를 openPreview() 바로 위로

파일 로드 실패 시 openPreview()가 아니라 전체 스크립트가 먹통되는 문제 햴결.

수정: openPreview() null 체크 추가

// 이전: null 체크 없이 직접 .textContent 세팅
document.getElementById('prevTags').innerHTML = ...

// 이후: el() 헬퍼로 null 체크
const el = id => document.getElementById(id);
if (el('prevTags')) el('prevTags').innerHTML = ...

SPA에서는 페이지 이동 전 DOM이 없어 null을 반환할 수 있다. 항상 null 체크 후 접근.

추가: go() 내부 렌더러 자동 호출

setTimeout(function() {
  try {
    var allR = Object.assign({},
        typeof MOCK_ROUTE_REVIEWS !== 'undefined' ? MOCK_ROUTE_REVIEWS : {}, ...);
    if (allR[id] && typeof renderReviewDetailPage === 'function')
        renderReviewDetailPage(id);
  } catch(e) {}
}, 30);

page_community.html에서 go()를 래핑하는 코드와 이중 구조였던 것을 app_main.js에서 일괄 처리.

---

2. page_community.html

📦 src/main/resources/templates

CSS 버그 픽스

이전: style="border-left:3px solid; var(--sage)"
이후: style="border-left:3px solid var(--sage)"

border-left 안에 세미콜론을 넣으면 color가 CSS 파서에 의해 무시된다.

모달 ID 통일

이전: id="commWriteModal"  onclick="...classList.remove('open')"
이후: id="writeModal"     onclick="if(event.target===this)closeWrite()"

app_community.js에서 writeModal로 모달을 열어 ID 불일치로 열리지 않던 문제 햴결.

인기 태그 스타일 개선

이전: <span class="comm-side-tag">
이후: <button class="chip chip-sm" style="justify-content:center">

---

3. page_place.html

📦 src/main/resources/templates

미리보기 모달 레이아웃 정적화

이전: <div id="prev-stats-container"></div>  (자동 렌더링)
이후:
<div class="prev-stats-row">
  <div class="prev-stat-card"><div id="prevBudget"></div></div>
  <div class="prev-stat-card"><div id="prevPlaces"></div></div>
  <div class="prev-stat-card"><div id="prevDur"></div></div>
</div>

DOM 구조가 명확해지고 openPreview()에서 id로 직접 접근하는 구조로 정리.

---

💡 배운 점

SPA에서 getElementById는 페이지 열림 전 null을 반환한다. 항상 null 체크.

CSS shorthand border-left 안에서 세미콜론을 잘못 빛으면 color가 적용 안 된다.

모달 ID는 JS와 HTML에서 반드시 일치시켜야 한다.